You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2024/04/26 15:04:34 UTC
(incubator-devlake) 01/01: fix: something for onboard
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch fix-7371
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit dfb34d700c17e192a3b63bf2dd053ad8529d6641
Author: mintsweet <0x...@gmail.com>
AuthorDate: Fri Apr 26 23:04:17 2024 +0800
fix: something for onboard
---
config-ui/src/routes/onboard/components/card.tsx | 4 +--
config-ui/src/routes/onboard/index.tsx | 2 +-
config-ui/src/routes/onboard/step-0.tsx | 40 ++++++++++++++++++++++--
3 files changed, 41 insertions(+), 5 deletions(-)
diff --git a/config-ui/src/routes/onboard/components/card.tsx b/config-ui/src/routes/onboard/components/card.tsx
index c607bd8eb..1baac37ba 100644
--- a/config-ui/src/routes/onboard/components/card.tsx
+++ b/config-ui/src/routes/onboard/components/card.tsx
@@ -89,7 +89,7 @@ export const OnboardCard = ({ style }: Props) => {
modal.confirm({
width: 600,
title: 'Permanently close this entry?',
- content: 'You will not be able to get back to the onboard session again.',
+ content: 'You will not be able to get back to the onboarding session again.',
okButtonProps: {
loading: oeprating,
},
@@ -122,7 +122,7 @@ export const OnboardCard = ({ style }: Props) => {
{status === 'partial' && <CheckCircleFilled style={{ color: orange5 }} />}
{status === 'failed' && <CloseCircleFilled style={{ color: red5 }} />}
<div style={{ marginLeft: 16 }}>
- <h4>Onboard Session</h4>
+ <h4>Onboarding Session</h4>
{['prepare', 'running'].includes(status) && (
<h5 style={{ fontWeight: 400 }}>
You are not far from connecting to your first tool. Continue to finish it.
diff --git a/config-ui/src/routes/onboard/index.tsx b/config-ui/src/routes/onboard/index.tsx
index 422a157d3..d0bcb5131 100644
--- a/config-ui/src/routes/onboard/index.tsx
+++ b/config-ui/src/routes/onboard/index.tsx
@@ -83,7 +83,7 @@ export const Onboard = ({ logo, title }: Props) => {
const handleClose = () => {
modal.confirm({
width: 820,
- title: 'Are you sure to exit the onboard session?',
+ title: 'Are you sure to exit the onboarding session?',
content: 'You can get back to this session via the card on top of the Projects page.',
icon: <ExclamationCircleOutlined />,
okText: 'Confirm',
diff --git a/config-ui/src/routes/onboard/step-0.tsx b/config-ui/src/routes/onboard/step-0.tsx
index 4a793d502..5e504bd42 100644
--- a/config-ui/src/routes/onboard/step-0.tsx
+++ b/config-ui/src/routes/onboard/step-0.tsx
@@ -17,11 +17,14 @@
*/
import { useState, useContext } from 'react';
-import { Flex, Button } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { ExclamationCircleOutlined, CloseOutlined } from '@ant-design/icons';
+import { Modal, Flex, Button } from 'antd';
import styled from 'styled-components';
import API from '@/api';
import { Logo } from '@/components';
+import { PATHS } from '@/config';
import { operator } from '@/utils';
import { Context } from './context';
@@ -29,6 +32,8 @@ import { Context } from './context';
const Wrapper = styled.div`
.logo {
display: flex;
+ align-items: center;
+ justify-content: space-between;
margin-bottom: 200px;
}
@@ -62,8 +67,35 @@ interface Props {
export const Step0 = ({ logo = <Logo direction="horizontal" />, title = 'DevLake' }: Props) => {
const [operating, setOperating] = useState(false);
+ const navigate = useNavigate();
+
+ const [modal, contextHolder] = Modal.useModal();
+
const { step, records, done, projectName, plugin, setStep } = useContext(Context);
+ const handleClose = () => {
+ modal.confirm({
+ width: 820,
+ title: 'Are you sure to exit the onboarding session?',
+ content: 'You can get back to this session via the card on top of the Projects page.',
+ icon: <ExclamationCircleOutlined />,
+ okText: 'Confirm',
+ onOk: async () => {
+ const [success] = await operator(
+ () => API.store.set('onboard', { step: 0, records, done, projectName, plugin }),
+ {
+ setOperating,
+ hideToast: true,
+ },
+ );
+
+ if (success) {
+ navigate(PATHS.ROOT());
+ }
+ },
+ });
+ };
+
const handleSubmit = async () => {
const [success] = await operator(
async () => API.store.set('onboard', { step: 1, records, done, projectName, plugin }),
@@ -80,7 +112,11 @@ export const Step0 = ({ logo = <Logo direction="horizontal" />, title = 'DevLake
return (
<Wrapper>
- <div className="logo">{logo}</div>
+ {contextHolder}
+ <div className="logo">
+ {logo}
+ <CloseOutlined style={{ fontSize: 18, color: '#70727F', cursor: 'pointer' }} onClick={handleClose} />
+ </div>
<Flex vertical justify="center" align="center">
<h1>
Welcome to <span>{title}</span>