This is an automated email from the ASF dual-hosted git repository. abeizn pushed a commit to branch release-v1.0 in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 5e369b2dd93217f10c05e16971dc2388b7a10d85 Author: 青湛 <[email protected]> AuthorDate: Thu Mar 28 22:13:40 2024 +1300 fix: some bugs for onboard (#7235) * fix: adjust some margin top for block component * fix: some wording about data connection * fix: adjust margin for onboard qa * fix: adjust the message for test connection * fix: adjust the position for onboard card * fix: some extra style for onboard step * fix: add some tips for onboard connect button * fix: remove exit word when onboard error * fix: adjust the style for onboard finish * fix: adjust the style for onboard card * fix: percent accuracy in onbaord progress --- config-ui/src/components/block/index.tsx | 2 +- config-ui/src/routes/layout/layout.tsx | 2 + config-ui/src/routes/onboard/card.tsx | 4 +- config-ui/src/routes/onboard/step-1.tsx | 2 +- config-ui/src/routes/onboard/step-2.tsx | 32 +++-- config-ui/src/routes/onboard/step-3.tsx | 2 +- config-ui/src/routes/onboard/step-4.tsx | 174 ++++++++++++---------------- config-ui/src/routes/onboard/styled.ts | 12 +- config-ui/src/routes/project/home/index.tsx | 2 - 9 files changed, 120 insertions(+), 112 deletions(-) diff --git a/config-ui/src/components/block/index.tsx b/config-ui/src/components/block/index.tsx index e08f94abe..068c64935 100644 --- a/config-ui/src/components/block/index.tsx +++ b/config-ui/src/components/block/index.tsx @@ -29,7 +29,7 @@ const Wrapper = styled.div` } & > p { - margin-top: 0; + margin-top: 5px; } & + & { diff --git a/config-ui/src/routes/layout/layout.tsx b/config-ui/src/routes/layout/layout.tsx index 51f5c630c..82d3a41d3 100644 --- a/config-ui/src/routes/layout/layout.tsx +++ b/config-ui/src/routes/layout/layout.tsx @@ -34,6 +34,7 @@ import { selectTipsPayload, hideTips, } from '@/features'; +import { OnboardCard } from '@/routes/onboard/card'; import { useAppDispatch, useAppSelector } from '@/hooks'; import { operator } from '@/utils'; @@ -163,6 +164,7 @@ export const Layout = () => { </Header> <Content style={{ overflowY: 'auto' }}> <div style={{ padding: 24, margin: '0 auto', width: 1280 }}> + <OnboardCard style={{ marginBottom: 32 }} /> <Outlet /> </div> {!import.meta.env.DEVLAKE_COPYRIGHT_HIDE && ( diff --git a/config-ui/src/routes/onboard/card.tsx b/config-ui/src/routes/onboard/card.tsx index 0dc9639c2..6877adcbe 100644 --- a/config-ui/src/routes/onboard/card.tsx +++ b/config-ui/src/routes/onboard/card.tsx @@ -42,7 +42,9 @@ export const OnboardCard = ({ style }: Props) => { <Progress type="circle" size={30} format={() => `${data.step}/4`} percent={(data.step / 4) * 100} /> <div style={{ marginLeft: 16 }}> <h4>Onboard Session</h4> - <h5>You are not far from connecting to your first tool. Continue to finish it..</h5> + <h5 style={{ fontWeight: 400 }}> + You are not far from connecting to your first tool. Continue to finish it. + </h5> </div> </Flex> <Button type="primary" onClick={() => navigate('/onboard')}> diff --git a/config-ui/src/routes/onboard/step-1.tsx b/config-ui/src/routes/onboard/step-1.tsx index 7cffde5af..707285d9a 100644 --- a/config-ui/src/routes/onboard/step-1.tsx +++ b/config-ui/src/routes/onboard/step-1.tsx @@ -81,7 +81,7 @@ export const Step1 = () => { onChange={(e) => setProjectName(e.target.value)} /> </Block> - <Block title="Data Connections" description="You can only choose one data connection" required> + <Block title="Data Connection" description="You can only choose one data connection" required> <ConnectionSelect placeholder="Select a Data Connection" options={[ diff --git a/config-ui/src/routes/onboard/step-2.tsx b/config-ui/src/routes/onboard/step-2.tsx index 3de264787..0470eba0e 100644 --- a/config-ui/src/routes/onboard/step-2.tsx +++ b/config-ui/src/routes/onboard/step-2.tsx @@ -17,7 +17,7 @@ */ import { useState, useContext, useEffect, useMemo } from 'react'; -import { Flex, Button } from 'antd'; +import { Flex, Button, Tooltip } from 'antd'; import Markdown from 'react-markdown'; import rehypeRaw from 'rehype-raw'; @@ -75,6 +75,8 @@ export const Step2 = () => { }), { setOperating: setTesting, + formatMessage: () => 'Connection success.', + formatReason: () => 'Connection failed. Please check your token or network.', }, ); @@ -138,9 +140,17 @@ export const Step2 = () => { error="" setError={() => {}} /> - <Button style={{ marginTop: 16 }} disabled={!payload.token} loading={testing} onClick={handleTest}> - Connect - </Button> + <Tooltip title="Test Connection"> + <Button + style={{ marginTop: 16 }} + type="primary" + disabled={!payload.token} + loading={testing} + onClick={handleTest} + > + Connect + </Button> + </Tooltip> </div> )} {['bitbucket'].includes(plugin) && ( @@ -161,9 +171,17 @@ export const Step2 = () => { error="" setError={() => {}} /> - <Button disabled={!payload.username || !payload.password} loading={testing} onClick={handleTest}> - Connect - </Button> + <Tooltip title="Test Connection"> + <Button + style={{ marginTop: 16 }} + type="primary" + disabled={!payload.username || !payload.password} + loading={testing} + onClick={handleTest} + > + Connect + </Button> + </Tooltip> </div> )} <Markdown className="qa" rehypePlugins={[rehypeRaw]}> diff --git a/config-ui/src/routes/onboard/step-3.tsx b/config-ui/src/routes/onboard/step-3.tsx index 35f7c93db..9a251b440 100644 --- a/config-ui/src/routes/onboard/step-3.tsx +++ b/config-ui/src/routes/onboard/step-3.tsx @@ -123,7 +123,7 @@ export const Step3 = () => { }, { setOperating, - hideToast: true, + formatMessage: () => 'Congratulations！You have successfully connected to your first repository!', }, ); diff --git a/config-ui/src/routes/onboard/step-4.tsx b/config-ui/src/routes/onboard/step-4.tsx index 4bc2bf4b8..e4d8ed1f6 100644 --- a/config-ui/src/routes/onboard/step-4.tsx +++ b/config-ui/src/routes/onboard/step-4.tsx @@ -18,7 +18,7 @@ import { useState, useContext, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; -import { SmileFilled, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'; +import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'; import { theme, Progress, Space, Button, Modal } from 'antd'; import styled from 'styled-components'; @@ -30,21 +30,7 @@ import { operator } from '@/utils'; import { Logs } from './components'; import { Context } from './context'; -const Top = styled.div` - display: flex; - align-items: center; - justify-content: center; - margin-top: 100px; - margin-bottom: 24px; - height: 70px; - - span.text { - margin-left: 8px; - font-size: 20px; - } -`; - -const Content = styled.div` +const Wrapper = styled.div` padding: 24px; background-color: #fff; box-shadow: 0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.1), 0px 1.6px 8px 0px rgba(0, 0, 0, 0.07); @@ -69,21 +55,21 @@ const Content = styled.div` margin-top: 30px; } } -`; -const LogsWrapper = styled.div` - .tip { - font-size: 12px; - font-weight: 600; - color: #70727f; - } + .logs { + .tip { + font-size: 12px; + font-weight: 600; + color: #70727f; + } - .detail { - display: flex; - margin-top: 12px; + .detail { + display: flex; + margin-top: 12px; - & > div { - flex: 1; + & > div { + flex: 1; + } } } `; @@ -138,7 +124,7 @@ export const Step4 = () => { const [status, percent, collector, extractor] = useMemo(() => { const status = getStatus(data); - const percent = (data?.completionRate ?? 0) * 100; + const percent = Math.floor((data?.completionRate ?? 0) * 100); const collectorTask = (data?.subtasks ?? [])[0] ?? {}; const extractorTask = (data?.subtasks ?? [])[1] ?? {}; @@ -205,78 +191,72 @@ export const Step4 = () => { const { connectionId, scopeName } = record; return ( - <> - <Top> - <SmileFilled style={{ fontSize: 36, color: green5 }} /> - <span className="text">Congratulations！You have successfully connected to your first repository!</span> - </Top> - <Content> - {status === 'running' && ( - <div className="top"> - <div className="info">syncing up data from {scopeName}...</div> - <div className="tip"> - This may take a few minutes to hours, depending on the size of your data and rate limits of the tool you - choose. Exit - </div> - <Progress type="circle" size={120} percent={percent} /> - </div> - )} - {status === 'success' && ( - <div className="top"> - <div className="info">{scopeName} is successfully collected !</div> - <CheckCircleOutlined style={{ fontSize: 120, color: green5 }} /> - <div className="action"> - <Space direction="vertical"> - <Button type="primary" onClick={() => window.open(DashboardURLMap[plugin])}> - Check Dashboard - </Button> - <Button loading={operating} onClick={handleFinish}> - Finish and Exit - </Button> - </Space> - </div> + <Wrapper> + {status === 'running' && ( + <div className="top"> + <div className="info">syncing up data from {scopeName}...</div> + <div className="tip"> + This may take a few minutes to hours, depending on the size of your data and rate limits of the tool you + choose. </div> - )} - {status === 'partial' && ( - <div className="top"> - <div className="info">{scopeName} is parted collected！</div> - <CheckCircleOutlined style={{ fontSize: 120, color: orange5 }} /> - <div className="action"> - <Space> - <Button type="primary">Re-collect Data</Button> - <Button type="primary" onClick={() => window.open(DashboardURLMap[plugin])}> - Check Dashboard - </Button> - </Space> - </div> + <Progress type="circle" size={120} percent={percent} /> + </div> + )} + {status === 'success' && ( + <div className="top"> + <div className="info">{scopeName} is successfully collected !</div> + <CheckCircleOutlined style={{ fontSize: 120, color: green5 }} /> + <div className="action"> + <Space direction="vertical"> + <Button type="primary" onClick={() => window.open(DashboardURLMap[plugin])}> + Check Dashboard + </Button> + <Button loading={operating} onClick={handleFinish}> + Finish and Exit + </Button> + </Space> </div> - )} - {status === 'failed' && ( - <div className="top"> - <div className="info">Something went wrong with the collection process. </div> - <div className="info"> - Please check out the - <Button type="link" onClick={() => setOpen(true)}> - network and token permission + </div> + )} + {status === 'partial' && ( + <div className="top"> + <div className="info">{scopeName} is parted collected！</div> + <CheckCircleOutlined style={{ fontSize: 120, color: orange5 }} /> + <div className="action"> + <Space> + <Button type="primary">Re-collect Data</Button> + <Button type="primary" onClick={() => window.open(DashboardURLMap[plugin])}> + Check Dashboard </Button> - and retry data collection - </div> - <CloseCircleOutlined style={{ fontSize: 120, color: red5 }} /> - <div className="action"> - <Space direction="vertical"> - <Button type="primary">Re-collect Data</Button> - </Space> - </div> + </Space> + </div> + </div> + )} + {status === 'failed' && ( + <div className="top"> + <div className="info">Something went wrong with the collection process. </div> + <div className="info"> + Please check out the + <Button type="link" onClick={() => setOpen(true)}> + network and token permission + </Button> + and retry data collection </div> - )} - <LogsWrapper> - <div className="tip">Sync progress details</div> - <div className="detail"> - <Logs log={collector} /> - <Logs log={extractor} style={{ marginLeft: 16 }} /> + <CloseCircleOutlined style={{ fontSize: 120, color: red5 }} /> + <div className="action"> + <Space direction="vertical"> + <Button type="primary">Re-collect Data</Button> + </Space> </div> - </LogsWrapper> - </Content> + </div> + )} + <div className="logs"> + <div className="tip">Sync progress details</div> + <div className="detail"> + <Logs log={collector} /> + <Logs log={extractor} style={{ marginLeft: 16 }} /> + </div> + </div> <Modal open={open} width={820} @@ -287,6 +267,6 @@ export const Step4 = () => { > <ConnectionForm plugin={plugin} connectionId={connectionId} onSuccess={() => setOpen(false)} /> </Modal> - </> + </Wrapper> ); }; diff --git a/config-ui/src/routes/onboard/styled.ts b/config-ui/src/routes/onboard/styled.ts index 976060653..0d83a42fd 100644 --- a/config-ui/src/routes/onboard/styled.ts +++ b/config-ui/src/routes/onboard/styled.ts @@ -65,7 +65,14 @@ export const StepItem = styled.li<{ $actived: boolean; $activedColor: string }>` border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 50%; - ${({ $actived, $activedColor }) => ($actived ? `color: #fff; background-color: ${$activedColor};` : '')} + ${({ $actived, $activedColor }) => + $actived + ? ` + color: #fff; + background-color: ${$activedColor}; + border: none; + ` + : ''} } span:last-child { @@ -105,7 +112,8 @@ export const StepContent = styled.div` .qa { flex: auto; - padding: 24px; + margin: 12px 0; + padding: 0 24px; font-size: 14px; border-left: 1px solid #f0f0f0; overflow-y: auto; diff --git a/config-ui/src/routes/project/home/index.tsx b/config-ui/src/routes/project/home/index.tsx index 27474a002..50acf8552 100644 --- a/config-ui/src/routes/project/home/index.tsx +++ b/config-ui/src/routes/project/home/index.tsx @@ -28,7 +28,6 @@ import { getCron, cronPresets, PATHS } from '@/config'; import { ConnectionName } from '@/features'; import { useRefreshData } from '@/hooks'; import { DOC_URL } from '@/release'; -import { OnboardCard } from '@/routes/onboard/card'; import { formatTime, operator } from '@/utils'; import { PipelineStatus } from '@/routes/pipeline'; import { IBlueprint, IBPMode } from '@/types'; @@ -118,7 +117,6 @@ export const ProjectHomePage = () => { return ( <PageHeader breadcrumbs={[{ name: 'Projects', path: PATHS.PROJECTS() }]}> - <OnboardCard style={{ marginBottom: 32 }} /> <Flex style={{ marginBottom: 16 }} justify="flex-end"> <Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}> New Project
