You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by kl...@apache.org on 2024/05/09 01:57:19 UTC
(incubator-devlake) branch main updated: feat: add new component icon-button (#7429)
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 a61f43e0f feat: add new component icon-button (#7429)
a61f43e0f is described below
commit a61f43e0f979032bc554874e60d7de6cd62b6fdf
Author: 青湛 <0x...@gmail.com>
AuthorDate: Thu May 9 13:57:15 2024 +1200
feat: add new component icon-button (#7429)
---
.../action/{index.ts => icon-button/index.tsx} | 19 +++++++++++++++++--
config-ui/src/components/action/index.ts | 1 +
config-ui/src/routes/blueprint/home/index.tsx | 15 ++++++++++-----
config-ui/src/routes/connection/connection.tsx | 12 +++++++++---
config-ui/src/routes/pipeline/components/table.tsx | 10 +++++-----
config-ui/src/routes/project/home/index.tsx | 5 +++--
6 files changed, 45 insertions(+), 17 deletions(-)
diff --git a/config-ui/src/components/action/index.ts b/config-ui/src/components/action/icon-button/index.tsx
similarity index 60%
copy from config-ui/src/components/action/index.ts
copy to config-ui/src/components/action/icon-button/index.tsx
index 67daeef8f..04950c39b 100644
--- a/config-ui/src/components/action/index.ts
+++ b/config-ui/src/components/action/icon-button/index.tsx
@@ -16,5 +16,20 @@
*
*/
-export * from './copy-text';
-export * from './external-link';
+import { forwardRef, Ref } from 'react';
+import type { ButtonProps } from 'antd';
+import { Tooltip, Button } from 'antd';
+
+interface Props extends Pick<ButtonProps, 'type'> {
+ icon: React.ReactNode;
+ helptip: string;
+ onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+}
+
+export const IconButton = forwardRef(function ({ icon, helptip, type, onClick }: Props, ref?: Ref<HTMLElement>) {
+ return (
+ <Tooltip title={helptip}>
+ <Button ref={ref} type={type} icon={icon} onClick={onClick} />
+ </Tooltip>
+ );
+});
diff --git a/config-ui/src/components/action/index.ts b/config-ui/src/components/action/index.ts
index 67daeef8f..c16968efc 100644
--- a/config-ui/src/components/action/index.ts
+++ b/config-ui/src/components/action/index.ts
@@ -18,3 +18,4 @@
export * from './copy-text';
export * from './external-link';
+export * from './icon-button';
diff --git a/config-ui/src/routes/blueprint/home/index.tsx b/config-ui/src/routes/blueprint/home/index.tsx
index b7645b163..ada7fbb12 100644
--- a/config-ui/src/routes/blueprint/home/index.tsx
+++ b/config-ui/src/routes/blueprint/home/index.tsx
@@ -17,13 +17,13 @@
*/
import { useState, useMemo } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
import { PlusOutlined, SettingOutlined } from '@ant-design/icons';
import { Flex, Table, Modal, Radio, Button, Input, Tag } from 'antd';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, Block, TextTooltip } from '@/components';
+import { PageHeader, Block, TextTooltip, IconButton } from '@/components';
import { getCronOptions, cronPresets, getCron, PATHS } from '@/config';
import { ConnectionName } from '@/features';
import { useRefreshData } from '@/hooks';
@@ -42,6 +42,8 @@ export const BlueprintHomePage = () => {
const [mode, setMode] = useState(IBPMode.NORMAL);
const [saving, setSaving] = useState(false);
+ const navigate = useNavigate();
+
const { ready, data } = useRefreshData(
() => API.blueprint.list({ type: type.toLocaleUpperCase(), page, pageSize }),
[version, type, page, pageSize],
@@ -190,9 +192,12 @@ export const BlueprintHomePage = () => {
width: 100,
align: 'center',
render: (val) => (
- <Link to={PATHS.BLUEPRINT(val, 'configuration')}>
- <Button type="primary" icon={<SettingOutlined />} />
- </Link>
+ <IconButton
+ type="primary"
+ icon={<SettingOutlined />}
+ helptip="Blueprint Configuration"
+ onClick={() => navigate(PATHS.BLUEPRINT(val, 'configuration'))}
+ />
),
},
]}
diff --git a/config-ui/src/routes/connection/connection.tsx b/config-ui/src/routes/connection/connection.tsx
index fab7ff6a4..fbb90126f 100644
--- a/config-ui/src/routes/connection/connection.tsx
+++ b/config-ui/src/routes/connection/connection.tsx
@@ -23,7 +23,7 @@ import { DeleteOutlined, PlusOutlined, LinkOutlined, ClearOutlined } from '@ant-
import { theme, Space, Table, Button, Modal, message } from 'antd';
import API from '@/api';
-import { PageHeader, Message } from '@/components';
+import { PageHeader, Message, IconButton } from '@/components';
import { PATHS } from '@/config';
import { useAppDispatch, useAppSelector } from '@/hooks';
import { selectConnection, removeConnection } from '@/features';
@@ -371,10 +371,16 @@ export const Connection = () => {
width: 200,
render: (id) => (
<Space>
- <Button type="primary" icon={<ClearOutlined />} onClick={() => handleShowClearDataScopeDialog(id)} />
- <Button
+ <IconButton
+ type="primary"
+ icon={<ClearOutlined />}
+ helptip="Clear Data Scope"
+ onClick={() => handleShowClearDataScopeDialog(id)}
+ />
+ <IconButton
type="primary"
icon={<DeleteOutlined />}
+ helptip="Delete Data Scope"
onClick={() => handleShowDeleteDataScopeDialog(id)}
/>
</Space>
diff --git a/config-ui/src/routes/pipeline/components/table.tsx b/config-ui/src/routes/pipeline/components/table.tsx
index 5d56b479e..2dfb6fb4f 100644
--- a/config-ui/src/routes/pipeline/components/table.tsx
+++ b/config-ui/src/routes/pipeline/components/table.tsx
@@ -18,13 +18,13 @@
import { useState } from 'react';
import { CodeOutlined, FileZipOutlined, RightOutlined } from '@ant-design/icons';
-import { Table, Space, Button, Modal } from 'antd';
+import { Table, Space, Modal } from 'antd';
import { pick } from 'lodash';
import { saveAs } from 'file-saver';
import API from '@/api';
import { DEVLAKE_ENDPOINT } from '@/config';
-import { Inspector } from '@/components';
+import { IconButton, Inspector } from '@/components';
import { IPipeline } from '@/types';
import { formatTime } from '@/utils';
@@ -115,9 +115,9 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => {
align: 'center',
render: (id: ID, row) => (
<Space>
- <Button icon={<CodeOutlined />} onClick={() => handleShowJSON(row)} />
- <Button icon={<FileZipOutlined />} onClick={() => handleDownloadLog(id)} />
- <Button icon={<RightOutlined />} onClick={() => handleShowDetails(id)} />
+ <IconButton icon={<CodeOutlined />} helptip="Configuration" onClick={() => handleShowJSON(row)} />
+ <IconButton icon={<FileZipOutlined />} helptip="Download Logs" onClick={() => handleDownloadLog(id)} />
+ <IconButton icon={<RightOutlined />} helptip="Detail" onClick={() => handleShowDetails(id)} />
</Space>
),
},
diff --git a/config-ui/src/routes/project/home/index.tsx b/config-ui/src/routes/project/home/index.tsx
index 55ab995c2..5a7a350f4 100644
--- a/config-ui/src/routes/project/home/index.tsx
+++ b/config-ui/src/routes/project/home/index.tsx
@@ -23,7 +23,7 @@ import { Flex, Table, Button, Modal, Input, Checkbox, message } from 'antd';
import dayjs from 'dayjs';
import API from '@/api';
-import { PageHeader, Block, ExternalLink } from '@/components';
+import { PageHeader, Block, ExternalLink, IconButton } from '@/components';
import { getCron, cronPresets, PATHS } from '@/config';
import { ConnectionName } from '@/features';
import { useRefreshData } from '@/hooks';
@@ -192,10 +192,11 @@ export const ProjectHomePage = () => {
width: 100,
align: 'center',
render: (name: any) => (
- <Button
+ <IconButton
ref={configRef}
type="primary"
icon={<SettingOutlined />}
+ helptip="Project Configuration"
onClick={() => navigate(PATHS.PROJECT(name, { tab: 'configuration' }))}
/>
),