This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch feat-icon-button in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 17c065e138bdcb2aea070bea74bc701ede493ae9 Author: mintsweet <[email protected]> AuthorDate: Tue May 7 14:53:23 2024 +1200 feat: add new component icon-button --- .../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 ba6d5d66a..755f6bdf8 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'; @@ -365,10 +365,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' }))} /> ),
