From f6045b861b06deb56ef8e01f4977f13c13ff6b2c Mon Sep 17 00:00:00 2001
From: mintsweet <0x1304570@gmail.com>
Date: Tue, 14 Nov 2023 19:26:38 +1300
Subject: [PATCH] fix(config-ui): adjust the table component

---
 .../blueprint/connection-detail/index.tsx     |  5 +++--
 .../blueprint/detail/configuration-panel.tsx  |  4 ++++
 config-ui/src/pages/blueprint/home/index.tsx  | 22 +++++++------------
 .../src/pages/connection/detail/index.tsx     |  6 ++---
 config-ui/src/pages/project/home/index.tsx    | 13 +++++------
 .../components/connection-list/index.tsx      |  6 +++--
 .../components/scope-config-select/index.tsx  |  3 +++
 .../plugins/register/webhook/connection.tsx   |  9 +++++---
 config-ui/src/routes/api-keys/api-keys.tsx    |  2 ++
 config-ui/src/routes/layout/styled.ts         |  2 --
 .../src/routes/pipeline/components/table.tsx  |  5 +++--
 11 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index 9aa183ca214..6b821702fa9 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -216,6 +216,8 @@ export const BlueprintConnectionDetailPage = () => {
         )}
       </Buttons>
       <Table
+        rowKey="id"
+        size="middle"
         columns={[
           {
             title: 'Data Scope',
@@ -224,9 +226,8 @@ export const BlueprintConnectionDetailPage = () => {
           },
           {
             title: 'Scope Config',
-            dataIndex: ['scopeConfigId', 'scopeConfigName'],
             key: 'scopeConfig',
-            render: ({ scopeConfigId, scopeConfigName }) => (scopeConfigId ? scopeConfigName : 'N/A'),
+            render: (_, { scopeConfigId, scopeConfigName }) => (scopeConfigId ? scopeConfigName : 'N/A'),
           },
         ]}
         dataSource={scopes}
diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
index 9c81f02c546..1dddb6069b8 100644
--- a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
@@ -135,6 +135,8 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
           <IconButton icon="annotation" tooltip="Edit" onClick={handleShowPolicyDialog} />
         </h3>
         <Table
+          rowKey="id"
+          size="middle"
           columns={[
             {
               title: 'Data Time Range',
@@ -162,12 +164,14 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
           ]}
           dataSource={[
             {
+              id: blueprint.id,
               timeRange: blueprint.timeAfter,
               frequency: blueprint.cronConfig,
               isManual: blueprint.isManual,
               skipFailed: blueprint.skipOnFail,
             },
           ]}
+          pagination={false}
         />
       </div>
       {blueprint.mode === IBPMode.NORMAL && (
diff --git a/config-ui/src/pages/blueprint/home/index.tsx b/config-ui/src/pages/blueprint/home/index.tsx
index fb7a4d74007..5d8fb0b3775 100644
--- a/config-ui/src/pages/blueprint/home/index.tsx
+++ b/config-ui/src/pages/blueprint/home/index.tsx
@@ -112,13 +112,14 @@ export const BlueprintHomePage = () => {
           <Button icon="plus" intent={Intent.PRIMARY} text="New Blueprint" onClick={handleShowDialog} />
         </div>
         <Table
+          rowKey="id"
+          size="middle"
           loading={!ready}
           columns={[
             {
               title: 'Blueprint Name',
-              dataIndex: ['id', 'name'],
               key: 'name',
-              render: ({ id, name }) => (
+              render: (_, { id, name }) => (
                 <Link to={`/blueprints/${id}?tab=configuration`} style={{ color: '#292b3f' }}>
                   <TextTooltip content={name}>{name}</TextTooltip>
                 </Link>
@@ -126,21 +127,16 @@ export const BlueprintHomePage = () => {
             },
             {
               title: 'Data Connections',
-              dataIndex: ['mode', 'connections'],
               key: 'connections',
-              render: ({ mode, connections }: Pick<IBlueprint, 'mode' | 'connections'>) => {
+              render: (_, { mode, connections }: Pick<IBlueprint, 'mode' | 'connections'>) => {
                 if (mode === IBPMode.ADVANCED) {
                   return 'Advanced Mode';
                 }
                 return (
                   <S.ConnectionList>
                     {connections.map((it) => (
-                      <li>
-                        <ConnectionName
-                          key={`${it.pluginName}-${it.connectionId}`}
-                          plugin={it.pluginName}
-                          connectionId={it.connectionId}
-                        />
+                      <li key={`${it.pluginName}-${it.connectionId}`}>
+                        <ConnectionName plugin={it.pluginName} connectionId={it.connectionId} />
                       </li>
                     ))}
                   </S.ConnectionList>
@@ -149,20 +145,18 @@ export const BlueprintHomePage = () => {
             },
             {
               title: 'Frequency',
-              dataIndex: ['isManual', 'cronConfig'],
               key: 'frequency',
               width: 100,
-              render: ({ isManual, cronConfig }) => {
+              render: (_, { isManual, cronConfig }) => {
                 const cron = getCron(isManual, cronConfig);
                 return cron.label;
               },
             },
             {
               title: 'Next Run Time',
-              dataIndex: ['isManual', 'cronConfig'],
               key: 'nextRunTime',
               width: 200,
-              render: ({ isManual, cronConfig }) => {
+              render: (_, { isManual, cronConfig }) => {
                 const cron = getCron(isManual, cronConfig);
                 return formatTime(cron.nextTime);
               },
diff --git a/config-ui/src/pages/connection/detail/index.tsx b/config-ui/src/pages/connection/detail/index.tsx
index 551eff76cfd..3a25e18ec53 100644
--- a/config-ui/src/pages/connection/detail/index.tsx
+++ b/config-ui/src/pages/connection/detail/index.tsx
@@ -266,7 +266,8 @@ export const ConnectionDetailPage = () => {
           )}
         </Buttons>
         <Table
-          rowKey={(row) => row.id}
+          rowKey="id"
+          size="middle"
           loading={!ready}
           columns={[
             {
@@ -296,10 +297,9 @@ export const ConnectionDetailPage = () => {
             },
             {
               title: 'Scope Config',
-              dataIndex: ['id', 'configId', 'configName'],
               key: 'scopeConfig',
               width: 400,
-              render: ({ id, configId, configName }) => (
+              render: (_, { id, configId, configName }) => (
                 <>
                   <span>{configId ? configName : 'N/A'}</span>
                   {pluginConfig.scopeConfig && (
diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
index f18f6df1bdb..81ffa6b65c2 100644
--- a/config-ui/src/pages/project/home/index.tsx
+++ b/config-ui/src/pages/project/home/index.tsx
@@ -123,6 +123,8 @@ export const ProjectHomePage = () => {
       extra={<Button intent={Intent.PRIMARY} icon="plus" text="New Project" onClick={handleShowDialog} />}
     >
       <Table
+        rowKey="name"
+        size="middle"
         loading={!ready}
         columns={[
           {
@@ -145,12 +147,8 @@ export const ProjectHomePage = () => {
               ) : (
                 <S.ConnectionList>
                   {val.map((it) => (
-                    <li>
-                      <ConnectionName
-                        key={`${it.pluginName}-${it.connectionId}`}
-                        plugin={it.pluginName}
-                        connectionId={it.connectionId}
-                      />
+                    <li key={`${it.pluginName}-${it.connectionId}`}>
+                      <ConnectionName plugin={it.pluginName} connectionId={it.connectionId} />
                     </li>
                   ))}
                 </S.ConnectionList>
@@ -158,9 +156,8 @@ export const ProjectHomePage = () => {
           },
           {
             title: 'Sync Frequency',
-            dataIndex: ['isManual', 'cronConfig'],
             key: 'frequency',
-            render: ({ isManual, cronConfig }) => {
+            render: (_, { isManual, cronConfig }) => {
               const cron = getCron(isManual, cronConfig);
               return cron.label;
             },
diff --git a/config-ui/src/plugins/components/connection-list/index.tsx b/config-ui/src/plugins/components/connection-list/index.tsx
index 20b6b8975bb..65cb33c76ae 100644
--- a/config-ui/src/plugins/components/connection-list/index.tsx
+++ b/config-ui/src/plugins/components/connection-list/index.tsx
@@ -41,6 +41,8 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => {
   return (
     <>
       <Table
+        rowKey="id"
+        size="small"
         columns={[
           {
             title: 'Connection Name',
@@ -55,13 +57,13 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => {
           },
           {
             title: '',
-            dataIndex: ['plugin', 'id'],
             key: 'link',
             width: 100,
-            render: ({ plugin, id }) => <Link to={`/connections/${plugin}/${id}`}>Details</Link>,
+            render: (_, { plugin, id }) => <Link to={`/connections/${plugin}/${id}`}>Details</Link>,
           },
         ]}
         dataSource={connections}
+        pagination={false}
       />
       <Button
         style={{ marginTop: 16 }}
diff --git a/config-ui/src/plugins/components/scope-config-select/index.tsx b/config-ui/src/plugins/components/scope-config-select/index.tsx
index 409b4db0be8..88492e4d4a7 100644
--- a/config-ui/src/plugins/components/scope-config-select/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-select/index.tsx
@@ -76,6 +76,8 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
         <Button icon="add" intent={Intent.PRIMARY} text="Add New Scope Config" onClick={handleShowDialog} />
       </Buttons>
       <Table
+        rowKey="id"
+        size="small"
         loading={!ready}
         columns={[
           { title: 'Name', dataIndex: 'name', key: 'name' },
@@ -93,6 +95,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
           selectedRowKeys: trId ? [trId] : [],
           onChange: (selectedRowKeys) => setTrId(selectedRowKeys[0]),
         }}
+        pagination={false}
       />
       <Buttons position="bottom" align="right">
         <Button outlined intent={Intent.PRIMARY} text="Cancel" onClick={onCancel} />
diff --git a/config-ui/src/plugins/register/webhook/connection.tsx b/config-ui/src/plugins/register/webhook/connection.tsx
index 55ea71e94f9..0a7d8335292 100644
--- a/config-ui/src/plugins/register/webhook/connection.tsx
+++ b/config-ui/src/plugins/register/webhook/connection.tsx
@@ -55,10 +55,9 @@ export const WebHookConnection = ({ filterIds, onCreateAfter, onDeleteAfter }: P
 
   return (
     <S.Wrapper>
-      <Buttons position="top">
-        <Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY} onClick={() => handleShowDialog('add')} />
-      </Buttons>
       <Table
+        rowKey="id"
+        size="middle"
         columns={[
           {
             title: 'ID',
@@ -86,7 +85,11 @@ export const WebHookConnection = ({ filterIds, onCreateAfter, onDeleteAfter }: P
           },
         ]}
         dataSource={webhooks.filter((cs) => (filterIds ? filterIds.includes(cs.id) : true))}
+        pagination={false}
       />
+      <Buttons position="bottom">
+        <Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY} onClick={() => handleShowDialog('add')} />
+      </Buttons>
       {type === 'add' && (
         <CreateDialog isOpen onCancel={handleHideDialog} onSubmitAfter={(id) => onCreateAfter?.(id)} />
       )}
diff --git a/config-ui/src/routes/api-keys/api-keys.tsx b/config-ui/src/routes/api-keys/api-keys.tsx
index 5c033deddb1..ef3acdcef4c 100644
--- a/config-ui/src/routes/api-keys/api-keys.tsx
+++ b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -97,6 +97,8 @@ export const ApiKeys = () => {
     >
       <p>You can generate and manage your API keys to access the DevLake API.</p>
       <Table
+        rowKey="id"
+        size="middle"
         loading={!ready}
         columns={[
           {
diff --git a/config-ui/src/routes/layout/styled.ts b/config-ui/src/routes/layout/styled.ts
index b6726a7adeb..e253d49be5f 100644
--- a/config-ui/src/routes/layout/styled.ts
+++ b/config-ui/src/routes/layout/styled.ts
@@ -22,7 +22,6 @@ import { Navbar } from '@blueprintjs/core';
 export const Wrapper = styled.div`
   display: flex;
   height: 100vh;
-  background-color: #f9f9fa;
   overflow: hidden;
 `;
 
@@ -89,7 +88,6 @@ export const Sider = styled.div`
 
 export const Header = styled(Navbar)`
   flex: 0 0 50px;
-  background-color: #f9f9fa;
   box-shadow: none;
 
   a {
diff --git a/config-ui/src/routes/pipeline/components/table.tsx b/config-ui/src/routes/pipeline/components/table.tsx
index f3bc21c4f36..eb6c3123385 100644
--- a/config-ui/src/routes/pipeline/components/table.tsx
+++ b/config-ui/src/routes/pipeline/components/table.tsx
@@ -70,6 +70,8 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => {
   return (
     <>
       <Table
+        rowKey="id"
+        size="middle"
         columns={[
           {
             title: 'ID',
@@ -98,9 +100,8 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => {
           },
           {
             title: 'Duration',
-            dataIndex: ['status', 'beganAt', 'finishedAt'],
             key: 'duration',
-            render: ({ status, beganAt, finishedAt }) => (
+            render: (_, { status, beganAt, finishedAt }) => (
               <PipelineDuration status={status} beganAt={beganAt} finishedAt={finishedAt} />
             ),
           },