This is an automated email from the ASF dual-hosted git repository.
klesh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new b42f02f9d refactor(config-ui): use button component to replace
icon-button component (#6626)
b42f02f9d is described below
commit b42f02f9d99cc264c7b51b4904215a1a4e916dd5
Author: 青湛 <[email protected]>
AuthorDate: Thu Dec 14 14:52:35 2023 +1300
refactor(config-ui): use button component to replace icon-button component
(#6626)
---
.../components/action/copy-text/assets/copy.svg | 32 ---------------
.../src/components/action/copy-text/index.tsx | 9 ++--
.../src/components/action/icon-button/index.tsx | 46 ---------------------
config-ui/src/components/action/index.ts | 1 -
.../pages/blueprint/detail/configuration-panel.tsx | 47 +++++++++++----------
.../src/pages/blueprint/detail/status-panel.tsx | 44 ++++++++++----------
config-ui/src/pages/blueprint/home/index.tsx | 48 +++++++++++-----------
config-ui/src/pages/project/home/index.tsx | 19 +++++----
.../plugins/components/connection-status/index.tsx | 9 +++-
.../plugins/components/scope-config-form/index.tsx | 1 -
.../github/connection-fields/githubapp.tsx | 3 +-
.../jira/transformation-fields/remote-link.tsx | 22 ++++++----
.../src/plugins/register/webhook/connection.tsx | 29 +++++++++----
config-ui/src/routes/connection/connection.tsx | 23 +++++------
config-ui/src/routes/layout/layout.tsx | 7 ++--
config-ui/src/routes/pipeline/components/info.tsx | 8 ++--
config-ui/src/routes/pipeline/components/table.tsx | 16 ++++----
config-ui/src/routes/pipeline/components/task.tsx | 6 ++-
18 files changed, 158 insertions(+), 212 deletions(-)
diff --git a/config-ui/src/components/action/copy-text/assets/copy.svg
b/config-ui/src/components/action/copy-text/assets/copy.svg
deleted file mode 100644
index fb968e5ff..000000000
--- a/config-ui/src/components/action/copy-text/assets/copy.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements. See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg";>
- <g clip-path="url(#clip0_6939_12355)">
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M7.3335 6.66665C6.96531 6.66665 6.66683 6.96512 6.66683
7.33331V13.3333C6.66683 13.7015 6.96531 14 7.3335 14H13.3335C13.7017 14 14.0002
13.7015 14.0002 13.3333V7.33331C14.0002 6.96512 13.7017 6.66665 13.3335
6.66665H7.3335ZM5.3335 7.33331C5.3335 6.22874 6.22893 5.33331 7.3335
5.33331H13.3335C14.4381 5.33331 15.3335 6.22874 15.3335 7.33331V13.3333C15.3335
14.4379 14.4381 15.3333 13.3335 15.3333H7.3335C6.22893 15.3333 5.3335 14.4379
5.3335 13.3333V7.33331Z"
- fill="#7497F7" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M2.6665 2.00002C2.48969 2.00002 2.32012 2.07026 2.1951
2.19528C2.07008 2.32031 1.99984 2.48988 1.99984 2.66669V8.66669C1.99984 8.8435
2.07008 9.01307 2.1951 9.13809C2.32012 9.26312 2.48969 9.33335 2.6665
9.33335H3.33317C3.70136 9.33335 3.99984 9.63183 3.99984 10C3.99984 10.3682
3.70136 10.6667 3.33317 10.6667H2.6665C2.13607 10.6667 1.62736 10.456 1.25229
10.0809C0.877218 9.70583 0.666504 9.19712 0.666504 8.66669V2.66669C0.666504
2.13625 0.877217 1.62755 1.25229 1.25247C1.62736 0 [...]
- fill="#7497F7" />
- </g>
- <defs>
- <clipPath id="clip0_6939_12355">
- <rect width="16" height="16" fill="white" />
- </clipPath>
- </defs>
-</svg>
-
\ No newline at end of file
diff --git a/config-ui/src/components/action/copy-text/index.tsx
b/config-ui/src/components/action/copy-text/index.tsx
index 02dd3d9dc..1a4b2e88e 100644
--- a/config-ui/src/components/action/copy-text/index.tsx
+++ b/config-ui/src/components/action/copy-text/index.tsx
@@ -17,12 +17,11 @@
*/
import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { message } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+import { Button, message } from 'antd';
import styled from 'styled-components';
-import { TextTooltip, IconButton } from '@/components';
-
-import CopyIcon from './assets/copy.svg';
+import { TextTooltip } from '@/components';
const Wrapper = styled.div`
display: flex;
@@ -43,7 +42,7 @@ export const CopyText = ({ content }: Props) => {
{content}
</TextTooltip>
<CopyToClipboard text={content} onCopy={() => message.success('Copy
successfully.')}>
- <IconButton image={<img src={CopyIcon} alt="" />} tooltip="Copy" />
+ <Button icon={<CopyOutlined rev={undefined} />} />
</CopyToClipboard>
</Wrapper>
);
diff --git a/config-ui/src/components/action/icon-button/index.tsx
b/config-ui/src/components/action/icon-button/index.tsx
deleted file mode 100644
index 1b162fe01..000000000
--- a/config-ui/src/components/action/icon-button/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { Button, Intent, Position, IconName } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
-
-interface Props {
- style?: React.CSSProperties;
- icon?: IconName;
- image?: JSX.Element;
- tooltip: string;
- loading?: boolean;
- disabled?: boolean;
- onClick?: () => void;
-}
-
-export const IconButton = ({ style, icon, image, tooltip, loading, disabled,
onClick }: Props) => {
- return (
- <Tooltip2 intent={Intent.PRIMARY} position={Position.TOP}
content={tooltip}>
- <Button
- style={style}
- loading={loading}
- disabled={disabled}
- minimal
- intent={Intent.PRIMARY}
- icon={icon ?? image}
- onClick={onClick}
- />
- </Tooltip2>
- );
-};
diff --git a/config-ui/src/components/action/index.ts
b/config-ui/src/components/action/index.ts
index c16968efc..67daeef8f 100644
--- a/config-ui/src/components/action/index.ts
+++ b/config-ui/src/components/action/index.ts
@@ -18,4 +18,3 @@
export * from './copy-text';
export * from './external-link';
-export * from './icon-button';
diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
index acedf9065..a67592927 100644
--- a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
@@ -18,11 +18,11 @@
import { useState, useEffect, useMemo } from 'react';
import { Link } from 'react-router-dom';
-import { Flex, Table } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { FormOutlined, PlusOutlined } from '@ant-design/icons';
+import { Flex, Table, Space, Button } from 'antd';
import API from '@/api';
-import { IconButton, NoData } from '@/components';
+import { NoData } from '@/components';
import { getCron } from '@/config';
import { ConnectionName } from '@/features';
import { getPluginConfig } from '@/plugins';
@@ -124,15 +124,17 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh, onChangeTab }:
<S.ConfigurationPanel>
<div className="block">
<h3>Blueprint Name</h3>
- <div>
+ <Space>
<span>{blueprint.name}</span>
- <IconButton icon="annotation" tooltip="Edit"
onClick={handleShowNameDialog} />
- </div>
+ <Button type="primary" icon={<FormOutlined rev={undefined} />}
onClick={handleShowNameDialog} />
+ </Space>
</div>
<div className="block">
<h3>
- <span>Sync Policy</span>
- <IconButton icon="annotation" tooltip="Edit"
onClick={handleShowPolicyDialog} />
+ <Space>
+ <span>Sync Policy</span>
+ <Button type="primary" icon={<FormOutlined rev={undefined} />}
onClick={handleShowPolicyDialog} />
+ </Space>
</h3>
<Table
rowKey="id"
@@ -186,23 +188,17 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh, onChangeTab }:
</>
}
action={
- <Button
- intent={Intent.PRIMARY}
- icon="add"
- text="Add a Connection"
- onClick={handleShowAddConnectionDialog}
- />
+ <Button type="primary" icon={<PlusOutlined rev={undefined} />}
onClick={handleShowAddConnectionDialog}>
+ Add a Connection
+ </Button>
}
/>
) : (
<Flex vertical gap="middle">
<Flex>
- <Button
- intent={Intent.PRIMARY}
- icon="add"
- text="Add a Connection"
- onClick={handleShowAddConnectionDialog}
- />
+ <Button type="primary" icon={<PlusOutlined rev={undefined} />}
onClick={handleShowAddConnectionDialog}>
+ Add a Connection
+ </Button>
</Flex>
<S.ConnectionList>
{connections.map((cs) => (
@@ -229,7 +225,9 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh, onChangeTab }:
))}
</S.ConnectionList>
<Flex justify="center">
- <Button intent={Intent.PRIMARY} text="Collect Data"
onClick={handleRun} />
+ <Button type="primary" onClick={handleRun}>
+ Collect Data
+ </Button>
</Flex>
</Flex>
)}
@@ -241,14 +239,15 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh, onChangeTab }:
<AdvancedEditor value={rawPlan} onChange={setRawPlan} />
<div className="btns">
<Button
- intent={Intent.PRIMARY}
- text="Save"
+ type="primary"
onClick={() =>
handleUpdate({
plan: !validRawPlan(rawPlan) ? JSON.parse(rawPlan) :
JSON.stringify([[]], null, ' '),
})
}
- />
+ >
+ Save
+ </Button>
</div>
</div>
)}
diff --git a/config-ui/src/pages/blueprint/detail/status-panel.tsx
b/config-ui/src/pages/blueprint/detail/status-panel.tsx
index e4bc20f3d..39b827fc0 100644
--- a/config-ui/src/pages/blueprint/detail/status-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/status-panel.tsx
@@ -18,12 +18,13 @@
import { useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
-import { Card, Modal } from 'antd';
-import { Button, Switch, Intent, Position, Popover, Menu, MenuItem } from
'@blueprintjs/core';
+import { MoreOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Card, Modal, Button, Tooltip } from 'antd';
+import { Switch, Position, Popover, Menu, MenuItem } from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
import API from '@/api';
-import { IconButton, Message } from '@/components';
+import { Message } from '@/components';
import { getCron } from '@/config';
import { useAutoRefresh } from '@/hooks';
import { PipelineInfo, PipelineTasks, PipelineTable } from '@/routes/pipeline';
@@ -133,20 +134,17 @@ export const StatusPanel = ({ from, blueprint,
pipelineId, onRefresh }: Props) =
content="It is recommended to re-transform your data in this
project if you have updated the transformation of the data scope in this
project."
>
<Button
+ type="primary"
disabled={!blueprint.enable}
loading={operating}
- intent={Intent.PRIMARY}
- text="Re-transform Data"
onClick={() => handleRun({ skipCollectors: true })}
- />
+ >
+ Re-transform Data
+ </Button>
</Tooltip2>
- <Button
- disabled={!blueprint.enable}
- loading={operating}
- intent={Intent.PRIMARY}
- text="Collect Data"
- onClick={() => handleRun({})}
- />
+ <Button type="primary" disabled={!blueprint.enable}
loading={operating} onClick={() => handleRun({})}>
+ Collect Data
+ </Button>
<Popover
content={
<Menu>
@@ -155,14 +153,14 @@ export const StatusPanel = ({ from, blueprint,
pipelineId, onRefresh }: Props) =
}
placement="bottom"
>
- <IconButton icon="more" tooltip="" />
+ <Button icon={<MoreOutlined rev={undefined} />} />
</Popover>
</S.ProjectACtion>
)}
{from === FromEnum.blueprint && (
<S.BlueprintAction>
- <Button text="Run Now" onClick={() => handleRun({})} />
+ <Button onClick={() => handleRun({})}>Run Now</Button>
<Switch
style={{ marginBottom: 0 }}
label="Blueprint Enabled"
@@ -170,13 +168,15 @@ export const StatusPanel = ({ from, blueprint,
pipelineId, onRefresh }: Props) =
checked={blueprint.enable}
onChange={(e) => handleUpdate({ enable: (e.target as
HTMLInputElement).checked })}
/>
- <IconButton
- loading={operating}
- disabled={!!blueprint.projectName}
- icon="trash"
- tooltip="Delete Blueprint"
- onClick={() => setType('delete')}
- />
+ <Tooltip title="Delete Blueprint">
+ <Button
+ type="primary"
+ loading={operating}
+ disabled={!!blueprint.projectName}
+ icon={<DeleteOutlined rev={undefined} />}
+ onClick={() => setType('delete')}
+ />
+ </Tooltip>
</S.BlueprintAction>
)}
diff --git a/config-ui/src/pages/blueprint/home/index.tsx
b/config-ui/src/pages/blueprint/home/index.tsx
index bbfc4389a..44de6bbc9 100644
--- a/config-ui/src/pages/blueprint/home/index.tsx
+++ b/config-ui/src/pages/blueprint/home/index.tsx
@@ -18,12 +18,13 @@
import { useState, useMemo } from 'react';
import { Link } from 'react-router-dom';
-import { Table, Modal } from 'antd';
-import { ButtonGroup, Button, Tag, Intent, FormGroup, InputGroup, RadioGroup,
Radio } from '@blueprintjs/core';
+import { PlusOutlined, SettingOutlined } from '@ant-design/icons';
+import { Flex, Table, Modal, Radio, Button } from 'antd';
+import { Tag, Intent, FormGroup, InputGroup } from '@blueprintjs/core';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, IconButton, TextTooltip } from '@/components';
+import { PageHeader, TextTooltip } from '@/components';
import { getCronOptions, cronPresets, getCron } from '@/config';
import { ConnectionName } from '@/features';
import { useRefreshData } from '@/hooks';
@@ -95,22 +96,23 @@ export const BlueprintHomePage = () => {
{ name: 'Blueprints', path: '/advanced/blueprints' },
]}
>
- <S.Wrapper>
- <p>This is a complete list of all Blueprints you have created, whether
they belong to Projects or not.</p>
- <div className="action">
- <ButtonGroup>
- <Button intent={type === 'all' ? Intent.PRIMARY : Intent.NONE}
text="All" onClick={() => setType('all')} />
+ <Flex vertical gap="middle">
+ <p style={{ margin: 0 }}>
+ This is a complete list of all Blueprints you have created, whether
they belong to Projects or not.
+ </p>
+ <Flex justify="space-between">
+ <Radio.Group optionType="button" value={type} onChange={({ target: {
value } }) => setType(value)}>
+ <Radio value="all">All</Radio>
{options.map(({ label }) => (
- <Button
- key={label}
- intent={type === label ? Intent.PRIMARY : Intent.NONE}
- text={label}
- onClick={() => setType(label)}
- />
+ <Radio key={label} value={label}>
+ {label}
+ </Radio>
))}
- </ButtonGroup>
- <Button icon="plus" intent={Intent.PRIMARY} text="New Blueprint"
onClick={handleShowDialog} />
- </div>
+ </Radio.Group>
+ <Button type="primary" icon={<PlusOutlined rev={undefined} />}
onClick={handleShowDialog}>
+ New Blueprint
+ </Button>
+ </Flex>
<Table
rowKey="id"
size="middle"
@@ -196,7 +198,7 @@ export const BlueprintHomePage = () => {
align: 'center',
render: (val) => (
<Link to={`/advanced/blueprints/${val}?tab=configuration`}>
- <IconButton icon="cog" tooltip="Detail" />
+ <Button type="primary" icon={<SettingOutlined
rev={undefined} />} />
</Link>
),
},
@@ -209,7 +211,7 @@ export const BlueprintHomePage = () => {
onChange: setPage,
}}
/>
- </S.Wrapper>
+ </Flex>
<Modal
open={open}
width={820}
@@ -250,14 +252,10 @@ export const BlueprintHomePage = () => {
}
labelInfo={<S.LabelInfo>*</S.LabelInfo>}
>
- <RadioGroup
- inline
- selectedValue={mode}
- onChange={(e) => setMode((e.target as HTMLInputElement).value as
IBPMode)}
- >
+ <Radio.Group value={mode} onChange={({ target: { value } }) =>
setMode(value)}>
<Radio value={IBPMode.NORMAL}>Normal Mode</Radio>
<Radio value={IBPMode.ADVANCED}>Advanced Mode</Radio>
- </RadioGroup>
+ </Radio.Group>
</FormGroup>
</S.DialogWrapper>
</Modal>
diff --git a/config-ui/src/pages/project/home/index.tsx
b/config-ui/src/pages/project/home/index.tsx
index 74d4f651a..284cf368b 100644
--- a/config-ui/src/pages/project/home/index.tsx
+++ b/config-ui/src/pages/project/home/index.tsx
@@ -18,12 +18,13 @@
import { useState, useMemo } from 'react';
import { Link, useNavigate } from 'react-router-dom';
-import { Table, Modal, message } from 'antd';
-import { Button, InputGroup, Checkbox, Intent, FormGroup } from
'@blueprintjs/core';
+import { PlusOutlined, SettingOutlined } from '@ant-design/icons';
+import { Table, Button, Modal, message } from 'antd';
+import { InputGroup, Checkbox, FormGroup } from '@blueprintjs/core';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, ExternalLink, IconButton } from '@/components';
+import { PageHeader, ExternalLink } from '@/components';
import { getCron, cronPresets } from '@/config';
import { ConnectionName } from '@/features';
import { useRefreshData } from '@/hooks';
@@ -120,7 +121,11 @@ export const ProjectHomePage = () => {
return (
<PageHeader
breadcrumbs={[{ name: 'Projects', path: '/projects' }]}
- extra={<Button intent={Intent.PRIMARY} icon="plus" text="New Project"
onClick={handleShowDialog} />}
+ extra={
+ <Button type="primary" icon={<PlusOutlined rev={undefined} />}
onClick={handleShowDialog}>
+ New Project
+ </Button>
+ }
>
<Table
rowKey="name"
@@ -187,9 +192,9 @@ export const ProjectHomePage = () => {
width: 100,
align: 'center',
render: (name: any) => (
- <IconButton
- icon="cog"
- tooltip="Detail"
+ <Button
+ type="primary"
+ icon={<SettingOutlined rev={undefined} />}
onClick={() =>
navigate(`/projects/${encodeName(name)}?tab=configuration`)}
/>
),
diff --git a/config-ui/src/plugins/components/connection-status/index.tsx
b/config-ui/src/plugins/components/connection-status/index.tsx
index 6bf893dac..e64397e1b 100644
--- a/config-ui/src/plugins/components/connection-status/index.tsx
+++ b/config-ui/src/plugins/components/connection-status/index.tsx
@@ -16,10 +16,11 @@
*
*/
+import { RedoOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
import styled from 'styled-components';
import { useAppDispatch } from '@/app/hook';
-import { IconButton } from '@/components';
import { testConnection } from '@/features/connections';
import { IConnection, IConnectionStatus } from '@/types';
import { operator } from '@/utils';
@@ -59,7 +60,11 @@ export const ConnectionStatus = ({ connection }: Props) => {
<Wrapper>
<span className={status}>{STATUS_MAP[status]}</span>
{status !== IConnectionStatus.ONLINE && (
- <IconButton loading={status === IConnectionStatus.TESTING}
icon="repeat" tooltip="Retry" onClick={handleTest} />
+ <Button
+ loading={status === IConnectionStatus.TESTING}
+ icon={<RedoOutlined rev={undefined} />}
+ onClick={handleTest}
+ />
)}
</Wrapper>
);
diff --git a/config-ui/src/plugins/components/scope-config-form/index.tsx
b/config-ui/src/plugins/components/scope-config-form/index.tsx
index b3561eab3..f804d2ea2 100644
--- a/config-ui/src/plugins/components/scope-config-form/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-form/index.tsx
@@ -36,7 +36,6 @@ import { BambooTransformation } from
'@/plugins/register/bamboo';
import { operator } from '@/utils';
import { TIPS_MAP } from './misc';
-import * as S from './styled';
interface Props {
plugin: string;
diff --git
a/config-ui/src/plugins/register/github/connection-fields/githubapp.tsx
b/config-ui/src/plugins/register/github/connection-fields/githubapp.tsx
index a6f3727c8..14c416577 100644
--- a/config-ui/src/plugins/register/github/connection-fields/githubapp.tsx
+++ b/config-ui/src/plugins/register/github/connection-fields/githubapp.tsx
@@ -18,8 +18,7 @@
import { useEffect, useState } from 'react';
import { Select } from 'antd';
-import { Button, FormGroup, InputGroup, MenuItem, TextArea } from
'@blueprintjs/core';
-// import { Select2 } from '@blueprintjs/select';
+import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
import API from '@/api';
import { ExternalLink } from '@/components';
diff --git
a/config-ui/src/plugins/register/jira/transformation-fields/remote-link.tsx
b/config-ui/src/plugins/register/jira/transformation-fields/remote-link.tsx
index 0c89b45a3..8b53c7109 100644
--- a/config-ui/src/plugins/register/jira/transformation-fields/remote-link.tsx
+++ b/config-ui/src/plugins/register/jira/transformation-fields/remote-link.tsx
@@ -17,11 +17,12 @@
*/
import { useEffect, useState } from 'react';
-import { InputGroup, Button, Intent } from '@blueprintjs/core';
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { InputGroup } from '@blueprintjs/core';
import { useDebounce } from 'ahooks';
import API from '@/api';
-import { IconButton } from '@/components';
import { operator } from '@/utils';
import * as S from './styled';
@@ -98,20 +99,25 @@ export const RemoteLink = ({ transformation,
setTransformation }: Props) => {
}}
/>
{links.length > 1 && (
- <IconButton loading={generating} icon="cross" tooltip="Delete"
onClick={() => handleDeleteLink(i)} />
+ <Button
+ type="primary"
+ loading={generating}
+ icon={<CloseOutlined rev={undefined} />}
+ onClick={() => handleDeleteLink(i)}
+ />
)}
</div>
{index === i && error && <div className="error">{error}</div>}
</div>
))}
<Button
- outlined
+ type="primary"
loading={generating}
- intent={Intent.PRIMARY}
- icon="add"
- text="Add a Pattern"
+ icon={<PlusOutlined rev={undefined} />}
onClick={() => handleAddLink()}
- />
+ >
+ Add a Pattern
+ </Button>
</S.RemoteLinkWrapper>
);
};
diff --git a/config-ui/src/plugins/register/webhook/connection.tsx
b/config-ui/src/plugins/register/webhook/connection.tsx
index 2228a9768..b5071916c 100644
--- a/config-ui/src/plugins/register/webhook/connection.tsx
+++ b/config-ui/src/plugins/register/webhook/connection.tsx
@@ -17,18 +17,15 @@
*/
import { useState } from 'react';
-import { Flex, Table, Space } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { EyeOutlined, FormOutlined, DeleteOutlined, PlusOutlined } from
'@ant-design/icons';
+import { Flex, Table, Space, Button } from 'antd';
import { useAppSelector } from '@/app/hook';
-import { IconButton } from '@/components';
import { selectWebhooks } from '@/features/connections';
import { IWebhook } from '@/types';
import { CreateDialog, ViewDialog, EditDialog, DeleteDialog } from
'./components';
-import * as S from './styled';
-
type Type = 'add' | 'edit' | 'show' | 'delete';
interface Props {
@@ -77,9 +74,21 @@ export const WebHookConnection = ({ filterIds,
onCreateAfter, onDeleteAfter }: P
align: 'center',
render: (_, row) => (
<Space>
- <IconButton icon="eye-open" tooltip="View" onClick={() =>
handleShowDialog('show', row)} />
- <IconButton icon="annotation" tooltip="Edit" onClick={() =>
handleShowDialog('edit', row)} />
- <IconButton icon="trash" tooltip="Delete" onClick={() =>
handleShowDialog('delete', row)} />
+ <Button
+ type="primary"
+ icon={<EyeOutlined rev={undefined} />}
+ onClick={() => handleShowDialog('show', row)}
+ />
+ <Button
+ type="primary"
+ icon={<FormOutlined rev={undefined} />}
+ onClick={() => handleShowDialog('edit', row)}
+ />
+ <Button
+ type="primary"
+ icon={<DeleteOutlined rev={undefined} />}
+ onClick={() => handleShowDialog('delete', row)}
+ />
</Space>
),
},
@@ -88,7 +97,9 @@ export const WebHookConnection = ({ filterIds, onCreateAfter,
onDeleteAfter }: P
pagination={false}
/>
<Flex>
- <Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY}
onClick={() => handleShowDialog('add')} />
+ <Button type="primary" icon={<PlusOutlined rev={undefined} />}
onClick={() => handleShowDialog('add')}>
+ Add a Webhook
+ </Button>
</Flex>
{type === 'add' && <CreateDialog open onCancel={handleHideDialog}
onSubmitAfter={(id) => onCreateAfter?.(id)} />}
{type === 'show' && currentID && <ViewDialog initialId={currentID}
onCancel={handleHideDialog} />}
diff --git a/config-ui/src/routes/connection/connection.tsx
b/config-ui/src/routes/connection/connection.tsx
index c1269027c..98636c576 100644
--- a/config-ui/src/routes/connection/connection.tsx
+++ b/config-ui/src/routes/connection/connection.tsx
@@ -18,15 +18,14 @@
import { useState, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
-import { DeleteOutlined, PlusOutlined, NodeIndexOutlined } from
'@ant-design/icons';
+import { DeleteOutlined, PlusOutlined, NodeIndexOutlined, LinkOutlined,
ClearOutlined } from '@ant-design/icons';
import { theme, Table, Button, Modal, message } from 'antd';
import API from '@/api';
import { useAppDispatch, useAppSelector } from '@/app/hook';
-import { PageHeader, IconButton, Message } from '@/components';
+import { PageHeader, Message } from '@/components';
import { selectConnection, removeConnection } from '@/features';
import { useTips, useRefreshData } from '@/hooks';
-import ClearImg from '@/images/icons/clear.svg';
import {
ConnectionStatus,
DataScopeRemote,
@@ -301,9 +300,9 @@ export const Connection = () => {
<>
<span>{configId ? configName : 'N/A'}</span>
{pluginConfig.scopeConfig && (
- <IconButton
- icon="link"
- tooltip="Associate Scope Config"
+ <Button
+ type="primary"
+ icon={<LinkOutlined rev={undefined} />}
onClick={() => {
handleShowScopeConfigSelectDialog([id]);
setScopeConfigId(configId);
@@ -320,14 +319,14 @@ export const Connection = () => {
width: 100,
render: (id) => (
<>
- <IconButton
- image={<img src={ClearImg} alt="clear" />}
- tooltip="Clear historical data"
+ <Button
+ type="primary"
+ icon={<ClearOutlined rev={undefined} />}
onClick={() => handleShowClearDataScopeDialog(id)}
/>
- <IconButton
- icon="trash"
- tooltip="Delete Data Scope"
+ <Button
+ type="primary"
+ icon={<DeleteOutlined rev={undefined} />}
onClick={() => handleShowDeleteDataScopeDialog(id)}
/>
</>
diff --git a/config-ui/src/routes/layout/layout.tsx
b/config-ui/src/routes/layout/layout.tsx
index fde820b25..c8bb35f6b 100644
--- a/config-ui/src/routes/layout/layout.tsx
+++ b/config-ui/src/routes/layout/layout.tsx
@@ -19,10 +19,11 @@
import { useState, useEffect, useRef } from 'react';
import { useLoaderData, Outlet, useNavigate, useLocation } from
'react-router-dom';
import { CSSTransition } from 'react-transition-group';
-import { Layout as AntdLayout, Menu, Divider } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { Layout as AntdLayout, Menu, Divider, Button } from 'antd';
import { useAppDispatch, useAppSelector } from '@/app/hook';
-import { PageLoading, Logo, ExternalLink, IconButton } from '@/components';
+import { PageLoading, Logo, ExternalLink } from '@/components';
import { init, selectError, selectStatus } from '@/features';
import { TipsContextProvider, TipsContextConsumer } from '@/store';
@@ -129,7 +130,7 @@ export const Layout = () => {
<CSSTransition in={!!tips} unmountOnExit timeout={300}
nodeRef={tipsRef} classNames="tips">
<S.Tips ref={tipsRef}>
<div className="content">{tips}</div>
- <IconButton style={{ color: '#fff' }} icon="cross"
tooltip="Close" onClick={() => setTips('')} />
+ <Button type="primary" icon={<CloseOutlined rev={undefined}
/>} onClick={() => setTips('')} />
</S.Tips>
</CSSTransition>
</AntdLayout>
diff --git a/config-ui/src/routes/pipeline/components/info.tsx
b/config-ui/src/routes/pipeline/components/info.tsx
index 103bcb6ef..970bad5e0 100644
--- a/config-ui/src/routes/pipeline/components/info.tsx
+++ b/config-ui/src/routes/pipeline/components/info.tsx
@@ -17,9 +17,11 @@
*/
import { useState } from 'react';
+import { StopOutlined, RedoOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
import API from '@/api';
-import { Loading, IconButton } from '@/components';
+import { Loading } from '@/components';
import { useAutoRefresh } from '@/hooks';
import { IPipeline, IPipelineStatus } from '@/types';
import { formatTime, operator } from '@/utils';
@@ -107,7 +109,7 @@ export const PipelineInfo = ({ id }: Props) => {
</li>
<li>
{[IPipelineStatus.ACTIVE, IPipelineStatus.RUNNING,
IPipelineStatus.RERUN].includes(status) && (
- <IconButton loading={operating} icon="disable" tooltip="Cancel"
onClick={handleCancel} />
+ <Button loading={operating} icon={<StopOutlined rev={undefined}
/>} onClick={handleCancel} />
)}
{[
IPipelineStatus.COMPLETED,
@@ -115,7 +117,7 @@ export const PipelineInfo = ({ id }: Props) => {
IPipelineStatus.FAILED,
IPipelineStatus.CANCELLED,
].includes(status) && (
- <IconButton loading={operating} icon="repeat" tooltip="Rerun
failed tasks" onClick={handleRerun} />
+ <Button loading={operating} icon={<RedoOutlined rev={undefined}
/>} onClick={handleRerun} />
)}
</li>
</ul>
diff --git a/config-ui/src/routes/pipeline/components/table.tsx
b/config-ui/src/routes/pipeline/components/table.tsx
index 176ab7d2e..981792c7b 100644
--- a/config-ui/src/routes/pipeline/components/table.tsx
+++ b/config-ui/src/routes/pipeline/components/table.tsx
@@ -17,14 +17,14 @@
*/
import { useState } from 'react';
-import { Table, Modal } from 'antd';
-import { ButtonGroup } from '@blueprintjs/core';
+import { CodeOutlined, FileZipOutlined, RightOutlined } from
'@ant-design/icons';
+import { Table, Space, Button, Modal } from 'antd';
import { pick } from 'lodash';
import { saveAs } from 'file-saver';
import API from '@/api';
import { DEVLAKE_ENDPOINT } from '@/config';
-import { IconButton, Inspector } from '@/components';
+import { Inspector } from '@/components';
import { IPipeline } from '@/types';
import { formatTime } from '@/utils';
@@ -111,11 +111,11 @@ export const PipelineTable = ({ dataSource, pagination,
noData }: Props) => {
key: 'action',
align: 'center',
render: (id: ID, row) => (
- <ButtonGroup>
- <IconButton icon="code" tooltip="View JSON" onClick={() =>
handleShowJSON(row)} />
- <IconButton icon="document" tooltip="Download Logs"
onClick={() => handleDownloadLog(id)} />
- <IconButton icon="chevron-right" tooltip="View Details"
onClick={() => handleShowDetails(id)} />
- </ButtonGroup>
+ <Space>
+ <Button icon={<CodeOutlined rev={undefined} />} onClick={() =>
handleShowJSON(row)} />
+ <Button icon={<FileZipOutlined rev={undefined} />} onClick={()
=> handleDownloadLog(id)} />
+ <Button icon={<RightOutlined rev={undefined} />} onClick={()
=> handleShowDetails(id)} />
+ </Space>
),
},
]}
diff --git a/config-ui/src/routes/pipeline/components/task.tsx
b/config-ui/src/routes/pipeline/components/task.tsx
index b8e6dce06..a521ea0d3 100644
--- a/config-ui/src/routes/pipeline/components/task.tsx
+++ b/config-ui/src/routes/pipeline/components/task.tsx
@@ -17,10 +17,12 @@
*/
import { useState, useMemo } from 'react';
+import { RedoOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
import { Intent } from '@blueprintjs/core';
import API from '@/api';
-import { TextTooltip, IconButton } from '@/components';
+import { TextTooltip } from '@/components';
import { getPluginConfig } from '@/plugins';
import { ITask, IPipelineStatus } from '@/types';
import { operator } from '@/utils';
@@ -136,7 +138,7 @@ export const PipelineTask = ({ task }: Props) => {
IPipelineStatus.FAILED,
IPipelineStatus.CANCELLED,
].includes(status) && (
- <IconButton loading={operating} icon="repeat" tooltip="Rerun task"
onClick={handleRerun} />
+ <Button loading={operating} icon={<RedoOutlined rev={undefined} />}
onClick={handleRerun} />
)}
</div>
</S.Task>
