[incubator-devlake] 03/04: fix(config-ui): adjust some content about api-keys

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a commit to branch fix-bugs
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git

commit dbbf628aff744b805e518c3a72a2f9b7be79e8cc
Author: mintsweet <0x...@gmail.com>
AuthorDate: Fri Oct 20 15:58:47 2023 +1300

    fix(config-ui): adjust some content about api-keys
---
 config-ui/src/routes/api-keys/api-keys.tsx | 40 ++++++++----------------------
 config-ui/src/routes/api-keys/styled.ts    | 10 --------
 2 files changed, 10 insertions(+), 40 deletions(-)

diff --git a/config-ui/src/routes/api-keys/api-keys.tsx b/config-ui/src/routes/api-keys/api-keys.tsx
index b37a525e0..cfb8419fc 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 3838e3d19..9a4aa557a 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;
-`;