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 2023/12/15 07:36:53 UTC
(incubator-devlake) 01/01: refactor(config-ui): use new ui icon to replace old
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch refactor-6307
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 3b03b61e5b021675ebd2e1441d06ad3af3caeb8d
Author: mintsweet <0x...@gmail.com>
AuthorDate: Fri Dec 15 20:36:40 2023 +1300
refactor(config-ui): use new ui icon to replace old
---
config-ui/src/components/message/index.tsx | 4 ++--
config-ui/src/components/page-header/index.tsx | 4 ++--
.../src/pages/project/detail/settings-panel.tsx | 4 ++--
.../register/github/connection-fields/token.tsx | 15 ++++++++-----
.../jira/transformation-fields/cross-domain.tsx | 9 ++++++--
.../jira/transformation-fields/dev-panel.tsx | 10 +++++++--
.../register/webhook/components/create-dialog.tsx | 4 ++--
.../routes/error/components/exception/index.tsx | 4 ++--
.../error/components/needs-db-migrate/index.tsx | 4 ++--
.../src/routes/error/components/offline/index.tsx | 21 ++++++++---------
.../src/routes/pipeline/components/status.tsx | 8 +------
config-ui/src/routes/pipeline/components/tasks.tsx | 10 ++++-----
.../routes/pipeline/{constant.ts => constant.tsx} | 26 ++++++++++++++--------
13 files changed, 71 insertions(+), 52 deletions(-)
diff --git a/config-ui/src/components/message/index.tsx b/config-ui/src/components/message/index.tsx
index 9540aec14..157acbad1 100644
--- a/config-ui/src/components/message/index.tsx
+++ b/config-ui/src/components/message/index.tsx
@@ -16,7 +16,7 @@
*
*/
-import { Icon } from '@blueprintjs/core';
+import { WarningOutlined } from '@ant-design/icons';
import styled from 'styled-components';
const Wrapper = styled.div`
@@ -37,7 +37,7 @@ interface Props {
export const Message = ({ style, size = 20, content }: Props) => {
return (
<Wrapper style={style}>
- <Icon icon="warning-sign" size={size} color="#f4be55" />
+ <WarningOutlined rev={undefined} size={size} color="#f4be55" />
<span>{content}</span>
</Wrapper>
);
diff --git a/config-ui/src/components/page-header/index.tsx b/config-ui/src/components/page-header/index.tsx
index ec4e08cb5..2fc1fe81e 100644
--- a/config-ui/src/components/page-header/index.tsx
+++ b/config-ui/src/components/page-header/index.tsx
@@ -17,7 +17,7 @@
*/
import { Link } from 'react-router-dom';
-import { Icon } from '@blueprintjs/core';
+import { RightOutlined } from '@ant-design/icons';
import * as S from './styled';
@@ -40,7 +40,7 @@ export const PageHeader = ({ breadcrumbs, extra, children }: Props) => {
{breadcrumbs.length !== i + 1 ? (
<Link to={path}>
{name}
- <Icon icon="chevron-right" />
+ <RightOutlined rev={undefined} />
</Link>
) : (
<span>{name}</span>
diff --git a/config-ui/src/pages/project/detail/settings-panel.tsx b/config-ui/src/pages/project/detail/settings-panel.tsx
index 1ed40313f..564b822ae 100644
--- a/config-ui/src/pages/project/detail/settings-panel.tsx
+++ b/config-ui/src/pages/project/detail/settings-panel.tsx
@@ -18,8 +18,8 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
+import { WarningOutlined } from '@ant-design/icons';
import { Flex, Card, Modal, Input, Checkbox, Button, message } from 'antd';
-import { Icon } from '@blueprintjs/core';
import API from '@/api';
import { Block } from '@/components';
@@ -134,7 +134,7 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
onOk={handleDelete}
>
<S.DialogBody>
- <Icon icon="warning-sign" />
+ <WarningOutlined rev={undefined} />
<span>
This operation cannot be undone. Deleting a Data Connection will delete all data that have been collected in
this Connection.
diff --git a/config-ui/src/plugins/register/github/connection-fields/token.tsx b/config-ui/src/plugins/register/github/connection-fields/token.tsx
index 106387394..245cb9a1e 100644
--- a/config-ui/src/plugins/register/github/connection-fields/token.tsx
+++ b/config-ui/src/plugins/register/github/connection-fields/token.tsx
@@ -17,9 +17,14 @@
*/
import { useEffect, useState } from 'react';
-import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+ CloseOutlined,
+ PlusOutlined,
+ CheckCircleOutlined,
+ WarningOutlined,
+ CloseCircleOutlined,
+} from '@ant-design/icons';
import { Input, Button } from 'antd';
-import { Icon } from '@blueprintjs/core';
import API from '@/api';
import { Block, ExternalLink } from '@/components';
@@ -165,9 +170,9 @@ export const Token = ({
{status && (
<S.Alert>
<h4>
- {status === 'success' && <Icon icon="tick-circle" color="#4DB764" />}
- {status === 'warning' && <Icon icon="warning-sign" color="#F4BE55" />}
- {status === 'error' && <Icon icon="cross-circle" color="#E34040" />}
+ {status === 'success' && <CheckCircleOutlined rev={undefined} color="#4DB764" />}
+ {status === 'warning' && <WarningOutlined rev={undefined} color="#F4BE55" />}
+ {status === 'error' && <CloseCircleOutlined rev={undefined} color="#E34040" />}
<span style={{ marginLeft: 8 }}>Token Permissions</span>
</h4>
{status === 'success' && <p>All required fields are checked.</p>}
diff --git a/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx b/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
index b020f55b1..3083eb5c5 100644
--- a/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
+++ b/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
@@ -17,8 +17,9 @@
*/
import { useEffect, useState } from 'react';
+import { UpOutlined, DownOutlined } from '@ant-design/icons';
import { Radio, Button } from 'antd';
-import { Icon, Collapse } from '@blueprintjs/core';
+import { Collapse } from '@blueprintjs/core';
import { ExternalLink } from '@/components';
import JiraIssueTipsImg from '@/images/jira-issue-tips.png';
@@ -73,7 +74,11 @@ export const CrossDomain = ({ connectionId, transformation, setTransformation }:
<h5>Connect Jira issues and commits via Jira issues’ remote links that match the following pattern</h5>
<p style={{ display: 'flex', alignItems: 'center' }} onClick={() => setShowTip(!showTip)}>
Input pattern(s) to match and parse commits and repo identifiers from issue remote links. See examples{' '}
- <Icon icon={showTip ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer' }} />
+ {showTip ? (
+ <UpOutlined rev={undefined} style={{ cursor: 'pointer' }} />
+ ) : (
+ <DownOutlined rev={undefined} style={{ cursor: 'pointer' }} />
+ )}
</p>
<Collapse isOpen={showTip}>
<img src={JiraIssueTipsImg} width="100%" alt="" />
diff --git a/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx b/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx
index c73d723cd..29944eaa8 100644
--- a/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx
+++ b/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx
@@ -17,8 +17,9 @@
*/
import { useEffect, useState } from 'react';
+import { UpOutlined, DownOutlined } from '@ant-design/icons';
import { Modal, Radio, Input, Button, message } from 'antd';
-import { Icon, Collapse } from '@blueprintjs/core';
+import { Collapse } from '@blueprintjs/core';
import API from '@/api';
import { Block } from '@/components';
@@ -185,7 +186,12 @@ export const DevPanel = ({ connectionId, transformation, setTransformation, open
<>
<p style={{ display: 'flex', alignItems: 'center' }} onClick={() => setShowTip(!showTip)}>
Input pattern(s) to match and parse commits and repo identifiers from above commit URLs. See
- examples <Icon icon={showTip ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer' }} />
+ examples{' '}
+ {showTip ? (
+ <UpOutlined rev={undefined} style={{ cursor: 'pointer' }} />
+ ) : (
+ <DownOutlined rev={undefined} style={{ cursor: 'pointer' }} />
+ )}
</p>
<Collapse isOpen={showTip}>
<img src={JiraIssueTipsImg} width="100%" alt="" />
diff --git a/config-ui/src/plugins/register/webhook/components/create-dialog.tsx b/config-ui/src/plugins/register/webhook/components/create-dialog.tsx
index c01637387..8e76c0a27 100644
--- a/config-ui/src/plugins/register/webhook/components/create-dialog.tsx
+++ b/config-ui/src/plugins/register/webhook/components/create-dialog.tsx
@@ -17,8 +17,8 @@
*/
import { useState, useMemo } from 'react';
+import { CheckCircleOutlined } from '@ant-design/icons';
import { Modal, Input } from 'antd';
-import { Icon } from '@blueprintjs/core';
import { useAppDispatch } from '@/app/hook';
import { Block, CopyText, ExternalLink } from '@/components';
@@ -129,7 +129,7 @@ export const CreateDialog = ({ open, onCancel, onSubmitAfter }: Props) => {
{step === 2 && (
<S.Wrapper>
<h2>
- <Icon icon="endorsed" size={30} />
+ <CheckCircleOutlined rev={undefined} size={30} />
<span>CURL commands generated. Please copy them now.</span>
</h2>
<p>
diff --git a/config-ui/src/routes/error/components/exception/index.tsx b/config-ui/src/routes/error/components/exception/index.tsx
index c0ab88d8a..787ce47b0 100644
--- a/config-ui/src/routes/error/components/exception/index.tsx
+++ b/config-ui/src/routes/error/components/exception/index.tsx
@@ -17,8 +17,8 @@
*/
import { useNavigate } from 'react-router-dom';
+import { CloseCircleOutlined } from '@ant-design/icons';
import { Card, Flex, Button } from 'antd';
-import { Icon, Colors } from '@blueprintjs/core';
interface Props {
error: string | Error;
@@ -31,7 +31,7 @@ export const Exception = ({ error }: Props) => {
return (
<Card>
<h2>
- <Icon icon="error" color={Colors.RED5} size={20} />
+ <CloseCircleOutlined rev={undefined} size={20} color="#f5222d" />
<span>{error.toString() || 'Unknown Error'}</span>
</h2>
<p>
diff --git a/config-ui/src/routes/error/components/needs-db-migrate/index.tsx b/config-ui/src/routes/error/components/needs-db-migrate/index.tsx
index 8c8571e03..9df814192 100644
--- a/config-ui/src/routes/error/components/needs-db-migrate/index.tsx
+++ b/config-ui/src/routes/error/components/needs-db-migrate/index.tsx
@@ -17,8 +17,8 @@
*/
import { useState } from 'react';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Card, Flex, Button } from 'antd';
-import { Icon, Colors } from '@blueprintjs/core';
import { useNavigate } from 'react-router-dom';
import API from '@/api';
@@ -42,7 +42,7 @@ export const NeedsDBMigrate = () => {
return (
<Card>
<h2>
- <Icon icon="outdated" color={Colors.ORANGE5} size={20} />
+ <ExclamationCircleOutlined rev={undefined} size={20} color="#fa541c" />
<span>New Migration Scripts Detected</span>
</h2>
<p>
diff --git a/config-ui/src/routes/error/components/offline/index.tsx b/config-ui/src/routes/error/components/offline/index.tsx
index a53070dd1..a5125beac 100644
--- a/config-ui/src/routes/error/components/offline/index.tsx
+++ b/config-ui/src/routes/error/components/offline/index.tsx
@@ -16,11 +16,11 @@
*
*/
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import { RedoOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { CheckCircleOutlined, CloseCircleOutlined, RedoOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Card, Flex, Button } from 'antd';
-import { Icon, Tag, Colors, IconName } from '@blueprintjs/core';
+import { Tag } from '@blueprintjs/core';
import API from '@/api';
import { DEVLAKE_ENDPOINT } from '@/config';
@@ -51,11 +51,6 @@ export const Offline = () => {
const { online } = data || { online: false };
- const [icon, color, text] = useMemo(
- () => [online ? 'endorsed' : 'offline', online ? Colors.GREEN3 : Colors.RED3, data ? 'Online' : 'Offline'],
- [online],
- );
-
const handleContinue = () => {
navigate('/');
};
@@ -63,9 +58,15 @@ export const Offline = () => {
return (
<Card>
<h2>
- <Icon icon={icon as IconName} color={color} size={30} />
+ {online ? (
+ <CheckCircleOutlined rev={undefined} color="#a0d911" size={30} />
+ ) : (
+ <CloseCircleOutlined rev={undefined} color="#f5222d" size={30} />
+ )}
<span>DevLake API</span>
- <strong style={{ marginLeft: 4, color }}>{text}</strong>
+ <strong style={{ marginLeft: 4, color: online ? '#a0d911' : '#f5222d' }}>
+ {online ? 'Online' : 'Offline'}
+ </strong>
</h2>
<p>
<Tag>DEVLAKE_ENDPOINT: {DEVLAKE_ENDPOINT}</Tag>
diff --git a/config-ui/src/routes/pipeline/components/status.tsx b/config-ui/src/routes/pipeline/components/status.tsx
index 9097f1cba..a3086f62e 100644
--- a/config-ui/src/routes/pipeline/components/status.tsx
+++ b/config-ui/src/routes/pipeline/components/status.tsx
@@ -16,10 +16,8 @@
*
*/
-import { Icon, IconName } from '@blueprintjs/core';
import classNames from 'classnames';
-import { Loading } from '@/components';
import { IPipelineStatus } from '@/types';
import * as S from '../styled';
@@ -40,11 +38,7 @@ export const PipelineStatus = ({ status }: Props) => {
return (
<S.StatusWrapper className={cls}>
- {C.PipeLineStatusIcon[status] === 'loading' ? (
- <Loading style={{ marginRight: 4 }} size={14} />
- ) : (
- <Icon style={{ marginRight: 4 }} icon={C.PipeLineStatusIcon[status] as IconName} />
- )}
+ {C.PipeLineStatusIcon[status]}
<span>{C.PipeLineStatusLabel[status]}</span>
</S.StatusWrapper>
);
diff --git a/config-ui/src/routes/pipeline/components/tasks.tsx b/config-ui/src/routes/pipeline/components/tasks.tsx
index a0402d9ea..5f4cbf40f 100644
--- a/config-ui/src/routes/pipeline/components/tasks.tsx
+++ b/config-ui/src/routes/pipeline/components/tasks.tsx
@@ -17,9 +17,9 @@
*/
import { useState } from 'react';
-import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { CheckCircleOutlined, CloseCircleOutlined, StopOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button } from 'antd';
-import { Collapse, Icon } from '@blueprintjs/core';
+import { Collapse } from '@blueprintjs/core';
import { groupBy, sortBy } from 'lodash';
import API from '@/api';
@@ -94,9 +94,9 @@ export const PipelineTasks = ({ id, style }: Props) => {
<li key={key} className={status}>
<strong>Stage {key}</strong>
{status === 'loading' && <Loading size={14} />}
- {status === 'success' && <Icon icon="tick-circle" />}
- {status === 'error' && <Icon icon="cross-circle" />}
- {status === 'cancel' && <Icon icon="disable" />}
+ {status === 'success' && <CheckCircleOutlined rev={undefined} />}
+ {status === 'error' && <CloseCircleOutlined rev={undefined} />}
+ {status === 'cancel' && <StopOutlined rev={undefined} />}
</li>
);
})}
diff --git a/config-ui/src/routes/pipeline/constant.ts b/config-ui/src/routes/pipeline/constant.tsx
similarity index 64%
rename from config-ui/src/routes/pipeline/constant.ts
rename to config-ui/src/routes/pipeline/constant.tsx
index 4bf80bf6e..4a42adbc0 100644
--- a/config-ui/src/routes/pipeline/constant.ts
+++ b/config-ui/src/routes/pipeline/constant.tsx
@@ -16,18 +16,26 @@
*
*/
+import {
+ FieldTimeOutlined,
+ LoadingOutlined,
+ CheckCircleOutlined,
+ CloseCircleOutlined,
+ UndoOutlined,
+} from '@ant-design/icons';
+
import { IPipelineStatus } from '@/types';
export const PipeLineStatusIcon = {
- [IPipelineStatus.CREATED]: 'stopwatch',
- [IPipelineStatus.PENDING]: 'stopwatch',
- [IPipelineStatus.ACTIVE]: 'loading',
- [IPipelineStatus.RUNNING]: 'loading',
- [IPipelineStatus.RERUN]: 'loading',
- [IPipelineStatus.COMPLETED]: 'tick-circle',
- [IPipelineStatus.PARTIAL]: 'tick-circle',
- [IPipelineStatus.FAILED]: 'delete',
- [IPipelineStatus.CANCELLED]: 'undo',
+ [IPipelineStatus.CREATED]: <FieldTimeOutlined rev={undefined} />,
+ [IPipelineStatus.PENDING]: <FieldTimeOutlined rev={undefined} />,
+ [IPipelineStatus.ACTIVE]: <LoadingOutlined rev={undefined} />,
+ [IPipelineStatus.RUNNING]: <LoadingOutlined rev={undefined} />,
+ [IPipelineStatus.RERUN]: <LoadingOutlined rev={undefined} />,
+ [IPipelineStatus.COMPLETED]: <CheckCircleOutlined rev={undefined} />,
+ [IPipelineStatus.PARTIAL]: <CheckCircleOutlined rev={undefined} />,
+ [IPipelineStatus.FAILED]: <CloseCircleOutlined rev={undefined} />,
+ [IPipelineStatus.CANCELLED]: <UndoOutlined rev={undefined} />,
};
export const PipeLineStatusLabel = {