[incubator-devlake] branch main updated: feat(config-ui): add warning message for github test connection (#5253)

[likyh]

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 33f7999ad feat(config-ui): add warning message for github test 
connection (#5253)
33f7999ad is described below

commit 33f7999adb0758f4bb957654558ccc606ce16a77
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Tue May 23 09:41:47 2023 +0800

    feat(config-ui): add warning message for github test connection (#5253)
---
 .../register/github/connection-fields/styled.ts    | 22 ++++++------
 .../register/github/connection-fields/token.tsx    | 40 ++++++++++++++--------
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/config-ui/src/plugins/register/github/connection-fields/styled.ts 
b/config-ui/src/plugins/register/github/connection-fields/styled.ts
index 062843441..a4119ee73 100644
--- a/config-ui/src/plugins/register/github/connection-fields/styled.ts
+++ b/config-ui/src/plugins/register/github/connection-fields/styled.ts
@@ -39,24 +39,26 @@ export const Endpoint = styled.div`
 `;
 
 export const Token = styled.div`
-  display: flex;
-  align-items: center;
   margin-bottom: 8px;
 
   .input {
     display: flex;
     align-items: center;
-  }
 
-  .info {
-    margin-left: 4px;
+    .info {
+      margin-left: 4px;
 
-    span.error {
-      color: ${Colors.RED3};
-    }
+      span.error {
+        color: ${Colors.RED3};
+      }
 
-    span.success {
-      color: ${Colors.GREEN3};
+      span.success {
+        color: ${Colors.GREEN3};
+      }
     }
   }
+
+  .warning {
+    margin-top: 8px;
+  }
 `;
diff --git a/config-ui/src/plugins/register/github/connection-fields/token.tsx 
b/config-ui/src/plugins/register/github/connection-fields/token.tsx
index cce550c5b..a42d4bc26 100644
--- a/config-ui/src/plugins/register/github/connection-fields/token.tsx
+++ b/config-ui/src/plugins/register/github/connection-fields/token.tsx
@@ -16,8 +16,8 @@
  *
  */
 
-import React, { useEffect, useState } from 'react';
-import { FormGroup, InputGroup, Button, Intent } from '@blueprintjs/core';
+import { useEffect, useState } from 'react';
+import { FormGroup, InputGroup, Button, Icon, Intent } from 
'@blueprintjs/core';
 
 import { ExternalLink } from '@/components';
 
@@ -29,6 +29,7 @@ type TokenItem = {
   value: string;
   status: 'idle' | 'valid' | 'invalid';
   from?: string;
+  message?: string;
 };
 
 interface Props {
@@ -42,7 +43,7 @@ interface Props {
 }
 
 export const Token = ({ endpoint, proxy, initialValue, value, error, setValue, 
setError }: Props) => {
-  const [tokens, setTokens] = useState<TokenItem[]>([{ value: '', status: 
'idle' }]);
+  const [tokens, setTokens] = useState<TokenItem[]>([{ value: '', status: 
'idle', message: '' }]);
 
   const testToken = async (token: string): Promise<TokenItem> => {
     if (!endpoint || !token) {
@@ -62,6 +63,7 @@ export const Token = ({ endpoint, proxy, initialValue, value, 
error, setValue, s
         value: token,
         status: 'valid',
         from: res.login,
+        message: res.message,
       };
     } catch {
       return {
@@ -117,20 +119,28 @@ export const Token = ({ endpoint, proxy, initialValue, 
value, error, setValue, s
         </S.LabelDescription>
       }
     >
-      {tokens.map(({ value, status, from }, i) => (
+      {tokens.map(({ value, status, from, message }, i) => (
         <S.Token key={i}>
-          <InputGroup
-            placeholder="Token"
-            type="password"
-            value={value ?? ''}
-            onChange={(e) => handleChangeToken(i, e.target.value)}
-            onBlur={() => handleTestToken(i)}
-          />
-          <Button minimal icon="cross" onClick={() => handleRemoveToken(i)} />
-          <div className="info">
-            {status === 'invalid' && <span className="error">Invalid</span>}
-            {status === 'valid' && <span className="success">Valid From: 
{from}</span>}
+          <div className="input">
+            <InputGroup
+              placeholder="Token"
+              type="password"
+              value={value ?? ''}
+              onChange={(e) => handleChangeToken(i, e.target.value)}
+              onBlur={() => handleTestToken(i)}
+            />
+            <Button minimal icon="cross" onClick={() => handleRemoveToken(i)} 
/>
+            <div className="info">
+              {status === 'invalid' && <span className="error">Invalid</span>}
+              {status === 'valid' && <span className="success">Valid From: 
{from}</span>}
+            </div>
           </div>
+          {message && (
+            <div className="warning">
+              <Icon icon="warning-sign" color="#F4BE55" style={{ marginRight: 
4 }} />
+              {message}
+            </div>
+          )}
         </S.Token>
       ))}
       <div className="action">