From 4f65bce1e9a82d76b66f5aa5658c21c351d20218 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=92=E6=B9=9B?= <0x1304570@gmail.com>
Date: Fri, 20 Oct 2023 20:22:32 +1300
Subject: [PATCH] fix(config-ui): some bugs (#6295)

* fix(config-ui): missed connections when refreshing connection detail page

* fix(config-ui): adjust the spacing for webhook

* fix(config-ui): adjust some content about api-keys

* fix(config-ui): hidden edit scope config when plugin doesn't have it
---
 .../blueprint/connection-detail/index.tsx     | 15 ++++---
 .../src/pages/connection/detail/index.tsx     | 13 ++----
 .../src/plugins/register/webhook/styled.ts    |  2 +-
 config-ui/src/routes/api-keys/api-keys.tsx    | 40 +++++--------------
 config-ui/src/routes/api-keys/styled.ts       | 10 -----
 5 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index bae6b58f885..bb13c4b0532 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -24,7 +24,7 @@ import { Popover2 } from '@blueprintjs/popover2';
 import API from '@/api';
 import { PageLoading, PageHeader, ExternalLink, Message, Buttons, Table, Dialog } from '@/components';
 import { useRefreshData, useTips } from '@/hooks';
-import { DataScopeSelect, getPluginScopeId } from '@/plugins';
+import { DataScopeSelect, getPluginScopeId, PluginConfig, PluginConfigType } from '@/plugins';
 import { operator } from '@/utils';
 
 import { encodeName } from '../../project/utils';
@@ -50,8 +50,11 @@ export const BlueprintConnectionDetailPage = () => {
     return API.blueprint.get(bid as any);
   };
 
+  const [plugin, connectionId] = unique.split('-');
+
+  const pluginConfig = PluginConfig.find((p) => p.plugin === plugin) as PluginConfigType;
+
   const { ready, data } = useRefreshData(async () => {
-    const [plugin, connectionId] = unique.split('-');
     const [blueprint, connection] = await Promise.all([
       getBlueprint(pname, bid),
       API.connection.get(plugin, connectionId),
@@ -205,9 +208,11 @@ export const BlueprintConnectionDetailPage = () => {
       </S.Top>
       <Buttons position="top">
         <Button intent={Intent.PRIMARY} icon="annotation" text="Manage Data Scope" onClick={handleShowDataScope} />
-        <ExternalLink style={{ marginLeft: 8 }} link={`/connections/${connection.plugin}/${connection.id}`}>
-          <Button intent={Intent.PRIMARY} icon="annotation" text="Edit Scope Config" />
-        </ExternalLink>
+        {pluginConfig.scopeConfig && (
+          <ExternalLink style={{ marginLeft: 8 }} link={`/connections/${connection.plugin}/${connection.id}`}>
+            <Button intent={Intent.PRIMARY} icon="annotation" text="Edit Scope Config" />
+          </ExternalLink>
+        )}
       </Buttons>
       <Table
         columns={[
diff --git a/config-ui/src/pages/connection/detail/index.tsx b/config-ui/src/pages/connection/detail/index.tsx
index 2668392f3c1..2ce5e207ed3 100644
--- a/config-ui/src/pages/connection/detail/index.tsx
+++ b/config-ui/src/pages/connection/detail/index.tsx
@@ -41,16 +41,6 @@ import { operator } from '@/utils';
 import * as S from './styled';
 
 export const ConnectionDetailPage = () => {
-  const { plugin, id } = useParams() as { plugin: string; id: string };
-  return <ConnectionDetail plugin={plugin} connectionId={+id} />;
-};
-
-interface Props {
-  plugin: string;
-  connectionId: ID;
-}
-
-const ConnectionDetail = ({ plugin, connectionId }: Props) => {
   const [type, setType] = useState<
     | 'deleteConnection'
     | 'updateConnection'
@@ -71,6 +61,9 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) => {
   const [conflict, setConflict] = useState<string[]>([]);
   const [errorMsg, setErrorMsg] = useState('');
 
+  const { plugin, id } = useParams() as { plugin: string; id: string };
+  const connectionId = +id;
+
   const connection = useAppSelector((state) => selectConnection(state, `${plugin}-${connectionId}`)) as IConnection;
   const navigate = useNavigate();
   const { setTips } = useTips();
diff --git a/config-ui/src/plugins/register/webhook/styled.ts b/config-ui/src/plugins/register/webhook/styled.ts
index 2ac46315253..12d83227db0 100644
--- a/config-ui/src/plugins/register/webhook/styled.ts
+++ b/config-ui/src/plugins/register/webhook/styled.ts
@@ -36,7 +36,7 @@ export const Wrapper = styled.div`
   }
 
   h5 {
-    margin: 8px 0;
+    margin: 16px 0 8px;
   }
 
   p {
diff --git a/config-ui/src/routes/api-keys/api-keys.tsx b/config-ui/src/routes/api-keys/api-keys.tsx
index b37a525e064..cfb8419fcc4 100644
--- a/config-ui/src/routes/api-keys/api-keys.tsx
+++ b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -18,22 +18,9 @@
 
 import { useState, useMemo } from 'react';
 import { Button, Intent, InputGroup } from '@blueprintjs/core';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import API from '@/api';
-import {
-  PageHeader,
-  Table,
-  Dialog,
-  FormItem,
-  Selector,
-  ExternalLink,
-  TextTooltip,
-  IconButton,
-  toast,
-  Buttons,
-  Message,
-} from '@/components';
+import { PageHeader, Table, Dialog, FormItem, Selector, ExternalLink, CopyText, Message } from '@/components';
 import { useRefreshData } from '@/hooks';
 import { operator, formatTime } from '@/utils';
 
@@ -47,7 +34,7 @@ export const ApiKeys = () => {
   const [operating, setOperating] = useState(false);
   const [modal, setModal] = useState<'create' | 'show' | 'delete'>();
   const [currentId, setCurrentId] = useState<string>();
-  const [currentKey, setCurrentKey] = useState<string>();
+  const [currentKey, setCurrentKey] = useState<string>('');
   const [form, setForm] = useState<{
     name: string;
     expiredAt?: string;
@@ -61,6 +48,7 @@ export const ApiKeys = () => {
   const { data, ready } = useRefreshData(() => API.apiKey.list({ page, pageSize }), [version, page, pageSize]);
 
   const [dataSource, total] = useMemo(() => [data?.apikeys ?? [], data?.count ?? 0], [data]);
+  const hasError = useMemo(() => !form.name || !form.allowedPath, [form]);
 
   const timeSelectedItem = useMemo(() => {
     return C.timeOptions.find((it) => it.value === form.expiredAt || !it.value);
@@ -73,7 +61,6 @@ export const ApiKeys = () => {
   const handleSubmit = async () => {
     const [success, res] = await operator(() => API.apiKey.create(form), {
       setOperating,
-      hideToast: true,
     });
 
     if (success) {
@@ -164,6 +151,7 @@ export const ApiKeys = () => {
           title="Generate a New API Key"
           okLoading={operating}
           okText="Generate"
+          okDisabled={hasError}
           onCancel={handleCancel}
           onOk={handleSubmit}
         >
@@ -191,8 +179,8 @@ export const ApiKeys = () => {
             subLabel={
               <p>
                 Enter a Regular Expression that matches the API URL(s) from the{' '}
-                <ExternalLink link="">DevLake API docs</ExternalLink>. The default Regular Expression is set to all
-                APIs.
+                <ExternalLink link="/api/swagger/index.html">DevLake API docs</ExternalLink>. The default Regular
+                Expression is set to all APIs.
               </p>
             }
             required
@@ -216,18 +204,10 @@ export const ApiKeys = () => {
           footer={null}
           onCancel={handleCancel}
         >
-          <div>Please make sure to copy your API key now. You will not be able to see it again.</div>
-          <S.KeyContainer>
-            <TextTooltip style={{ width: '96%' }} content="">
-              {currentKey}
-            </TextTooltip>
-            <CopyToClipboard text={currentKey as string} onCopy={() => toast.success('Copy successfully.')}>
-              <IconButton icon="clipboard" tooltip="Copy" />
-            </CopyToClipboard>
-          </S.KeyContainer>
-          <Buttons position="bottom" align="right">
-            <Button intent={Intent.PRIMARY} text="Confirm" onClick={handleCancel} />
-          </Buttons>
+          <div style={{ marginBottom: 16 }}>
+            Please make sure to copy your API key now. You will not be able to see it again.
+          </div>
+          <CopyText content={currentKey} />
         </Dialog>
       )}
       {modal === 'delete' && (
diff --git a/config-ui/src/routes/api-keys/styled.ts b/config-ui/src/routes/api-keys/styled.ts
index 3838e3d1925..9a4aa557a0e 100644
--- a/config-ui/src/routes/api-keys/styled.ts
+++ b/config-ui/src/routes/api-keys/styled.ts
@@ -26,13 +26,3 @@ export const InputContainer = styled.div`
     margin-right: 4px;
   }
 `;
-
-export const KeyContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 24px;
-  margin-bottom: 16px;
-  padding: 10px 16px;
-  background: #f0f4fe;
-`;