You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by li...@apache.org on 2023/03/03 02:37:17 UTC
[incubator-devlake] branch main updated: refactor(config-ui): adjust the component table (#4569)
This is an automated email from the ASF dual-hosted git repository.
likyh 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 a5ac1a268 refactor(config-ui): adjust the component table (#4569)
a5ac1a268 is described below
commit a5ac1a2682f385b80b500fcd79424e054562d31b
Author: 青湛 <0x...@gmail.com>
AuthorDate: Fri Mar 3 10:37:11 2023 +0800
refactor(config-ui): adjust the component table (#4569)
* fix(config-ui): connection cannot selected on bp create
* feat(config-ui): support params style in text-tooltip
* refactor(config-ui): adjust the component table
* refactor(config-ui): adjust the table component in pages
---
config-ui/src/components/table/styled.ts | 43 ++++++++++++++--------
config-ui/src/components/table/table.tsx | 40 ++++++++++++--------
config-ui/src/components/table/types.ts | 2 +
.../src/components/tooltip/text-tooltip/index.tsx | 5 ++-
.../blueprint/create/components/action/index.tsx | 16 ++------
.../blueprint/create/components/action/styled.ts | 9 -----
config-ui/src/pages/blueprint/home/index.tsx | 21 +++++++++--
config-ui/src/pages/connection/list/connection.tsx | 4 ++
config-ui/src/pages/project/home/index.tsx | 12 +++---
config-ui/src/pages/transformation/home/index.tsx | 8 ++--
10 files changed, 92 insertions(+), 68 deletions(-)
diff --git a/config-ui/src/components/table/styled.ts b/config-ui/src/components/table/styled.ts
index fb1b97dc7..9ef1169b1 100644
--- a/config-ui/src/components/table/styled.ts
+++ b/config-ui/src/components/table/styled.ts
@@ -34,27 +34,40 @@ export const NoData = styled.div`
}
`;
-export const Table = styled.ul<{ loading: number }>`
- transition: opacity 0.3s linear;
- ${({ loading }) => (loading ? 'opacity: 0.2; ' : '')}
+export const Table = styled.table`
+ table-layout: fixed;
+ width: 100%;
+ background-color: #fff;
+ box-shadow: 0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.1), 0px 1.6px 8px rgba(0, 0, 0, 0.07);
+ border-radius: 8px;
+ border-spacing: 0;
`;
-export const Row = styled.li`
- display: flex;
- align-items: center;
- padding: 12px 16px;
- border-top: 1px solid #dbe4fd;
+export const THeader = styled.thead``;
- & > span {
- flex: 1;
- overflow: hidden;
+export const TBody = styled.tbody``;
+
+export const TR = styled.tr`
+ &:last-child {
+ td {
+ border-bottom: none;
+ }
}
`;
-export const Header = styled(Row)`
- font-size: 14px;
- font-weight: 600;
- border-top: none;
+export const TH = styled.th`
+ padding: 12px 16px;
+ border-bottom: 1px solid #dbe4fd;
+`;
+
+export const TD = styled.td`
+ padding: 12px 16px;
+ border-bottom: 1px solid #dbe4fd;
+ word-break: break-word;
+`;
+
+export const TDEllipsis = styled.td`
+ word-break: break-word;
`;
export const Mask = styled.div`
diff --git a/config-ui/src/components/table/table.tsx b/config-ui/src/components/table/table.tsx
index 2ccc4ec64..9dfc585bf 100644
--- a/config-ui/src/components/table/table.tsx
+++ b/config-ui/src/components/table/table.tsx
@@ -19,7 +19,7 @@
import React from 'react';
import { Button, Intent } from '@blueprintjs/core';
-import { Loading, Card, NoData } from '@/components';
+import { Loading, Card, NoData, TextTooltip } from '@/components';
import { ColumnType } from './types';
import * as S from './styled';
@@ -58,18 +58,20 @@ export const Table = <T extends Record<string, any>>({ loading, columns, dataSou
}
/>
) : (
- <Card style={{ padding: 0 }}>
- <S.Table loading={loading ? 1 : 0}>
- <S.Header>
- {columns.map(({ key, align = 'left', title }) => (
- <span key={key} style={{ textAlign: align }}>
+ <S.Table>
+ <S.THeader>
+ <S.TR>
+ {columns.map(({ key, width, align = 'left', title }) => (
+ <S.TH key={key} style={{ width, textAlign: align }}>
{title}
- </span>
+ </S.TH>
))}
- </S.Header>
+ </S.TR>
+ </S.THeader>
+ <S.TBody>
{dataSource.map((data, i) => (
- <S.Row key={i}>
- {columns.map(({ key, align = 'left', dataIndex, render }) => {
+ <S.TR key={i}>
+ {columns.map(({ key, width, align = 'left', ellipsis, dataIndex, render }) => {
const value = Array.isArray(dataIndex)
? dataIndex.reduce((acc, cur) => {
acc[cur] = data[cur];
@@ -77,15 +79,21 @@ export const Table = <T extends Record<string, any>>({ loading, columns, dataSou
}, {} as any)
: data[dataIndex];
return (
- <span key={key} style={{ textAlign: align }}>
- {render ? render(value, data) : value}
- </span>
+ <S.TD key={key} style={{ width, textAlign: align }}>
+ {render ? (
+ render(value, data)
+ ) : ellipsis ? (
+ <TextTooltip content={value}>{value}</TextTooltip>
+ ) : (
+ value
+ )}
+ </S.TD>
);
})}
- </S.Row>
+ </S.TR>
))}
- </S.Table>
- </Card>
+ </S.TBody>
+ </S.Table>
)}
</S.Container>
);
diff --git a/config-ui/src/components/table/types.ts b/config-ui/src/components/table/types.ts
index f85ce6c50..7f19de446 100644
--- a/config-ui/src/components/table/types.ts
+++ b/config-ui/src/components/table/types.ts
@@ -20,6 +20,8 @@ export type ColumnType<T> = Array<{
title: string;
dataIndex: string | string[];
key: string;
+ width?: number;
align?: 'left' | 'center' | 'right';
+ ellipsis?: boolean;
render?: (value: any, row: T) => React.ReactNode;
}>;
diff --git a/config-ui/src/components/tooltip/text-tooltip/index.tsx b/config-ui/src/components/tooltip/text-tooltip/index.tsx
index 03d90e766..16acafb23 100644
--- a/config-ui/src/components/tooltip/text-tooltip/index.tsx
+++ b/config-ui/src/components/tooltip/text-tooltip/index.tsx
@@ -36,11 +36,12 @@ const Wrapper = styled.div`
interface Props extends IntentProps {
content: string;
children: React.ReactNode;
+ style?: React.CSSProperties;
}
-export const TextTooltip = ({ intent, content, children }: Props) => {
+export const TextTooltip = ({ intent, content, children, style }: Props) => {
return (
- <Wrapper>
+ <Wrapper style={style}>
<Tooltip2 intent={intent} position={Position.TOP} content={content}>
{children}
</Tooltip2>
diff --git a/config-ui/src/pages/blueprint/create/components/action/index.tsx b/config-ui/src/pages/blueprint/create/components/action/index.tsx
index 10f312ed8..e2a6eb2d1 100644
--- a/config-ui/src/pages/blueprint/create/components/action/index.tsx
+++ b/config-ui/src/pages/blueprint/create/components/action/index.tsx
@@ -18,7 +18,7 @@
import React, { useMemo } from 'react';
import { ButtonGroup, Button, Icon, Intent, Position, Colors } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Tooltip2 } from '@blueprintjs/popover2';
import { ModeEnum } from '../../../types';
import { useCreateBP } from '../../bp-context';
@@ -62,19 +62,9 @@ export const Action = () => {
disabled={!!error}
icon={
error ? (
- <Popover2
- defaultIsOpen
- interactionKind="hover"
- placement={Position.TOP}
- content={
- <S.Error>
- <Icon icon="warning-sign" color={Colors.ORANGE5} />
- <span>{error}</span>
- </S.Error>
- }
- >
+ <Tooltip2 defaultIsOpen placement={Position.TOP} content={error}>
<Icon icon="warning-sign" color={Colors.ORANGE5} style={{ margin: 0 }} />
- </Popover2>
+ </Tooltip2>
) : null
}
text="Next Step"
diff --git a/config-ui/src/pages/blueprint/create/components/action/styled.ts b/config-ui/src/pages/blueprint/create/components/action/styled.ts
index 06b62ddd0..0660328ac 100644
--- a/config-ui/src/pages/blueprint/create/components/action/styled.ts
+++ b/config-ui/src/pages/blueprint/create/components/action/styled.ts
@@ -28,12 +28,3 @@ export const Container = styled.div`
margin-left: 8px;
}
`;
-
-export const Error = styled.div`
- padding: 6px 10px;
- color: #94959f;
-
- span.bp4-icon {
- margin-right: 4px;
- }
-`;
diff --git a/config-ui/src/pages/blueprint/home/index.tsx b/config-ui/src/pages/blueprint/home/index.tsx
index e5ee303e9..87373752e 100644
--- a/config-ui/src/pages/blueprint/home/index.tsx
+++ b/config-ui/src/pages/blueprint/home/index.tsx
@@ -20,7 +20,7 @@ import React, { useMemo } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { ButtonGroup, Button, Intent } from '@blueprintjs/core';
-import { PageLoading, PageHeader, Table, ColumnType } from '@/components';
+import { PageLoading, PageHeader, Table, ColumnType, IconButton, TextTooltip } from '@/components';
import { getCron, getCronOptions } from '@/config';
import { formatTime } from '@/utils';
@@ -44,10 +44,12 @@ export const BlueprintHomePage = () => {
title: 'Blueprint Name',
dataIndex: 'name',
key: 'name',
+ ellipsis: true,
},
{
title: 'Data Connections',
key: 'connections',
+ align: 'center',
render: (_, row) => {
if (row.mode === ModeEnum.advanced) {
return 'Advanced Mode';
@@ -58,6 +60,8 @@ export const BlueprintHomePage = () => {
{
title: 'Frequency',
key: 'frequency',
+ width: 100,
+ align: 'center',
render: (_, row) => {
const cron = getCron(row.isManual, row.cronConfig);
return cron.label;
@@ -66,6 +70,8 @@ export const BlueprintHomePage = () => {
{
title: 'Next Run Time',
key: 'nextRunTime',
+ width: 200,
+ align: 'center',
render: (_, row) => {
const cron = getCron(row.isManual, row.cronConfig);
return formatTime(cron.nextTime);
@@ -75,15 +81,24 @@ export const BlueprintHomePage = () => {
title: 'Project',
dataIndex: 'projectName',
key: 'project',
- render: (val) => (val ? <Link to={`/projects/${window.encodeURIComponent(val)}`}> {val}</Link> : val),
+ align: 'center',
+ render: (val) =>
+ val ? (
+ <Link to={`/projects/${window.encodeURIComponent(val)}`}>
+ <TextTooltip content={val}>{val}</TextTooltip>
+ </Link>
+ ) : (
+ val
+ ),
},
{
title: '',
dataIndex: 'id',
key: 'action',
+ width: 100,
align: 'center',
render: (val) => (
- <Button minimal intent={Intent.PRIMARY} icon="cog" onClick={() => history.push(`/blueprints/${val}`)} />
+ <IconButton icon="cog" tooltip="Detail" onClick={() => history.push(`/blueprints/${val}`)} />
),
},
] as ColumnType<BlueprintType>,
diff --git a/config-ui/src/pages/connection/list/connection.tsx b/config-ui/src/pages/connection/list/connection.tsx
index 8fa63bfe0..5ef877039 100644
--- a/config-ui/src/pages/connection/list/connection.tsx
+++ b/config-ui/src/pages/connection/list/connection.tsx
@@ -67,6 +67,7 @@ export const Connection = ({ plugin }: Props) => {
title: 'ID',
dataIndex: 'id',
key: 'id',
+ width: 100,
},
{
title: 'Connection Name',
@@ -77,6 +78,7 @@ export const Connection = ({ plugin }: Props) => {
title: 'Endpoint',
dataIndex: 'endpoint',
key: 'endpoint',
+ ellipsis: true,
},
{
title: 'Status',
@@ -89,6 +91,8 @@ export const Connection = ({ plugin }: Props) => {
title: '',
dataIndex: 'id',
key: 'action',
+ width: 100,
+ align: 'center',
render: (id) => (
<ButtonGroup>
<IconButton icon="edit" tooltip="Edit" onClick={() => handleUpdate(id)} />
diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
index 8135b36af..eed3215f4 100644
--- a/config-ui/src/pages/project/home/index.tsx
+++ b/config-ui/src/pages/project/home/index.tsx
@@ -20,7 +20,7 @@ import React, { useMemo, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { Button, InputGroup, Checkbox, Intent } from '@blueprintjs/core';
-import { PageHeader, Table, ColumnType, Dialog } from '@/components';
+import { PageHeader, Table, ColumnType, Dialog, IconButton } from '@/components';
import { useProject } from './use-project';
import * as S from './styled';
@@ -60,14 +60,14 @@ export const ProjectHomePage = () => {
},
{
title: '',
- dataIndex: 'name' as const,
- align: 'right' as const,
+ dataIndex: 'name',
key: 'action',
+ width: 100,
+ align: 'center',
render: (name: any) => (
- <Button
- outlined
- intent={Intent.PRIMARY}
+ <IconButton
icon="cog"
+ tooltip="Detail"
onClick={() => history.push(`/projects/${window.encodeURIComponent(name)}`)}
/>
),
diff --git a/config-ui/src/pages/transformation/home/index.tsx b/config-ui/src/pages/transformation/home/index.tsx
index 840af9e9e..35dae32f2 100644
--- a/config-ui/src/pages/transformation/home/index.tsx
+++ b/config-ui/src/pages/transformation/home/index.tsx
@@ -20,7 +20,7 @@ import React, { useState, useMemo } from 'react';
import { useHistory } from 'react-router-dom';
import { ButtonGroup, Button, Icon, Intent } from '@blueprintjs/core';
-import { PageHeader, Table, ColumnType, Dialog, Selector } from '@/components';
+import { PageHeader, Table, ColumnType, Dialog, Selector, IconButton } from '@/components';
import type { PluginConfigType } from '@/plugins';
import { TransformationContextProvider, TransformationContextConsumer, TransformationItemType } from '@/store';
@@ -51,13 +51,13 @@ export const TransformationHomePage = () => {
{
title: '',
key: 'action',
+ width: 100,
align: 'center',
render: (_, row) =>
row.plugin !== 'jira' && (
- <Button
- minimal
- intent={Intent.PRIMARY}
+ <IconButton
icon="cog"
+ tooltip="Detail"
onClick={() => history.push(`/transformations/${row.plugin}/${row.id}`)}
/>
),