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 bb4b26b1f1a9bf53d66ade1abf41f55e35fbe7a0 Author: 青湛 <[email protected]> AuthorDate: Fri Mar 29 20:17:33 2024 +1300 fix: some bugs for onboard (#7253) * fix: adjust some content for onboard card * fix: adjust the style for onboard start button * fix: adjust the font size for markdown li * fix: adjust the wording for onboard partial * fix: adjust the wording for onboard running * fix: adjust the wording for onboard failed --- config-ui/src/routes/layout/layout.tsx | 2 +- .../src/routes/onboard/{ => components}/card.tsx | 7 +++- config-ui/src/routes/onboard/components/index.ts | 1 + config-ui/src/routes/onboard/step-0.tsx | 4 +-- config-ui/src/routes/onboard/step-4.tsx | 40 +++++++--------------- config-ui/src/routes/onboard/styled.ts | 1 + 6 files changed, 24 insertions(+), 31 deletions(-) diff --git a/config-ui/src/routes/layout/layout.tsx b/config-ui/src/routes/layout/layout.tsx index 82d3a41d3..0e1f1647e 100644 --- a/config-ui/src/routes/layout/layout.tsx +++ b/config-ui/src/routes/layout/layout.tsx @@ -34,7 +34,7 @@ import { selectTipsPayload, hideTips, } from '@/features'; -import { OnboardCard } from '@/routes/onboard/card'; +import { OnboardCard } from '@/routes/onboard/components'; import { useAppDispatch, useAppSelector } from '@/hooks'; import { operator } from '@/utils'; diff --git a/config-ui/src/routes/onboard/card.tsx b/config-ui/src/routes/onboard/components/card.tsx similarity index 90% rename from config-ui/src/routes/onboard/card.tsx rename to config-ui/src/routes/onboard/components/card.tsx index 6877adcbe..c0874a743 100644 --- a/config-ui/src/routes/onboard/card.tsx +++ b/config-ui/src/routes/onboard/components/card.tsx @@ -39,7 +39,12 @@ export const OnboardCard = ({ style }: Props) => { <Card style={style}> <Flex align="center" justify="space-between"> <Flex align="center"> - <Progress type="circle" size={30} format={() => `${data.step}/4`} percent={(data.step / 4) * 100} /> + <Progress + type="circle" + size={30} + format={() => `${data.step > 3 ? 3 : data.step}/3`} + percent={(data.step / 3) * 100} + /> <div style={{ marginLeft: 16 }}> <h4>Onboard Session</h4> <h5 style={{ fontWeight: 400 }}> diff --git a/config-ui/src/routes/onboard/components/index.ts b/config-ui/src/routes/onboard/components/index.ts index 49ecf41b7..5cebf15cd 100644 --- a/config-ui/src/routes/onboard/components/index.ts +++ b/config-ui/src/routes/onboard/components/index.ts @@ -16,4 +16,5 @@ * */ +export * from './card'; export * from './logs'; diff --git a/config-ui/src/routes/onboard/step-0.tsx b/config-ui/src/routes/onboard/step-0.tsx index fb35d5078..08487dc7c 100644 --- a/config-ui/src/routes/onboard/step-0.tsx +++ b/config-ui/src/routes/onboard/step-0.tsx @@ -61,7 +61,7 @@ const Wrapper = styled.div` .action { margin: 0 auto; - width: 268px; + width: 200px; margin-top: 64px; } `; @@ -97,7 +97,7 @@ export const Step0 = () => { Integrate your first Git tool and observe engineering metrics with just a few clicks. </div> <div className="action"> - <Button block type="primary" loading={operating} onClick={handleSubmit}> + <Button block size="large" type="primary" loading={operating} onClick={handleSubmit}> Start </Button> </div> diff --git a/config-ui/src/routes/onboard/step-4.tsx b/config-ui/src/routes/onboard/step-4.tsx index 1541f8256..5923e4316 100644 --- a/config-ui/src/routes/onboard/step-4.tsx +++ b/config-ui/src/routes/onboard/step-4.tsx @@ -19,12 +19,12 @@ import { useState, useContext, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'; -import { theme, Progress, Space, Button, Modal } from 'antd'; +import { theme, Progress, Space, Button } from 'antd'; import styled from 'styled-components'; import API from '@/api'; +import { ExternalLink } from '@/components'; import { useAutoRefresh } from '@/hooks'; -import { ConnectionName, ConnectionForm } from '@/plugins'; import { operator } from '@/utils'; import { Logs } from './components'; @@ -103,7 +103,6 @@ const getStatus = (data: any) => { export const Step4 = () => { const [operating, setOperating] = useState(false); - const [open, setOpen] = useState(false); const navigate = useNavigate(); @@ -170,7 +169,7 @@ export const Step4 = () => { }, [data]); const { - token: { green5, orange5, red5, colorPrimary }, + token: { green5, orange5, red5 }, } = theme.useToken(); const handleFinish = async () => { @@ -197,7 +196,7 @@ export const Step4 = () => { return null; } - const { connectionId, scopeName } = record; + const { scopeName } = record; return ( <Wrapper> @@ -205,8 +204,9 @@ export const Step4 = () => { <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. + This may take a few minutes to hours, depending on the volume of your data and the rate limits imposed by + the selected tool. To speed up, only data updated from the past 14 days will be collected. However, this + timeframe can be modified at any time via the project details page. </div> <Progress type="circle" size={120} percent={percent} /> </div> @@ -229,7 +229,7 @@ export const Step4 = () => { )} {status === 'partial' && ( <div className="top"> - <div className="info">{scopeName} is parted collected！</div> + <div className="info">Data from {scopeName} has been partially collected!</div> <CheckCircleOutlined style={{ fontSize: 120, color: orange5 }} /> <div className="action"> <Space> @@ -243,15 +243,11 @@ export const Step4 = () => { )} {status === 'failed' && ( <div className="top"> - <div className="info" style={{ marginBottom: 10 }}> - Something went wrong with the collection process. - </div> - <div className="info"> - Please check out the{' '} - <span style={{ color: colorPrimary, cursor: 'pointer' }} onClick={() => setOpen(true)}> - network and token permission - </span>{' '} - and retry data collection + <div className="info">Something went wrong with the collection process.</div> + <div className="tips"> + Please verify your network connection and ensure your token's rate limits have not been exceeded, then + attempt to collect the data again. Alternatively, you may report the issue by filing a bug on{' '} + <ExternalLink link="https://github.com/apache/incubator-devlake/issues/new/choose";>GitHub</ExternalLink>. </div> <CloseCircleOutlined style={{ fontSize: 120, color: red5 }} /> <div className="action"> @@ -268,16 +264,6 @@ export const Step4 = () => { <Logs log={extractor} style={{ marginLeft: 16 }} /> </div> </div> - <Modal - open={open} - width={820} - centered - title={<ConnectionName plugin={plugin} />} - footer={null} - onCancel={() => setOpen(false)} - > - <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 0d83a42fd..b8d95a9e7 100644 --- a/config-ui/src/routes/onboard/styled.ts +++ b/config-ui/src/routes/onboard/styled.ts @@ -137,6 +137,7 @@ export const StepContent = styled.div` } li { + font-size: 12px; line-height: 20px; }
