fix: something for onboard

apache · Apr 26, 2024 · dfb34d7 · dfb34d7
1 parent 6ab1d29
commit dfb34d7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git 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
@@ -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
@@ -17,18 +17,23 @@
  */
 
 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';
 
 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>