(incubator-devlake) 01/02: fix(config-ui): missed catch the test connection error

[mi...@apache.org]

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

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

commit 0fae9c0677048bad080fba4a1f0e3f050b5b357d
Author: mintsweet <0x...@gmail.com>
AuthorDate: Wed Nov 22 19:00:03 2023 +1300

    fix(config-ui): missed catch the test connection error
---
 config-ui/src/features/connections/slice.ts        | 45 ++++++++++++++--------
 .../plugins/components/connection-status/index.tsx |  3 +-
 config-ui/src/utils/operator.ts                    | 14 +++++--
 3 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/config-ui/src/features/connections/slice.ts b/config-ui/src/features/connections/slice.ts
index af62d5b49..7b842a722 100644
--- a/config-ui/src/features/connections/slice.ts
+++ b/config-ui/src/features/connections/slice.ts
@@ -93,22 +93,29 @@ export const removeConnection = createAsyncThunk(
 
 export const testConnection = createAsyncThunk(
   'connections/testConnection',
-  async ({ unique, plugin, endpoint, proxy, token, username, password, authMethod, secretKey, appId }: IConnection) => {
-    const res = await API.connection.test(plugin, {
-      endpoint,
-      proxy,
-      token,
-      username,
-      password,
-      authMethod,
-      secretKey,
-      appId,
-    });
-
-    return {
-      unique,
-      status: res.success ? IConnectionStatus.ONLINE : IConnectionStatus.OFFLINE,
-    };
+  async (
+    { unique, plugin, endpoint, proxy, token, username, password, authMethod, secretKey, appId }: IConnection,
+    { rejectWithValue },
+  ) => {
+    try {
+      const res = await API.connection.test(plugin, {
+        endpoint,
+        proxy,
+        token,
+        username,
+        password,
+        authMethod,
+        secretKey,
+        appId,
+      });
+
+      return {
+        unique,
+        status: res.success ? IConnectionStatus.ONLINE : IConnectionStatus.OFFLINE,
+      };
+    } catch (err: any) {
+      return rejectWithValue({ unique, response: err.response });
+    }
   },
 );
 
@@ -185,6 +192,12 @@ export const connectionsSlice = createSlice({
           existingConnection.status = action.payload.status;
         }
       })
+      .addCase(testConnection.rejected, (state, action) => {
+        const existingConnection = state.connections.find((cs) => cs.unique === action.meta.arg.unique);
+        if (existingConnection) {
+          existingConnection.status = IConnectionStatus.OFFLINE;
+        }
+      })
       .addCase(addWebhook.fulfilled, (state, action) => {
         state.webhooks.push(action.payload.webhook);
       })
diff --git a/config-ui/src/plugins/components/connection-status/index.tsx b/config-ui/src/plugins/components/connection-status/index.tsx
index 136f9b59b..6bf893dac 100644
--- a/config-ui/src/plugins/components/connection-status/index.tsx
+++ b/config-ui/src/plugins/components/connection-status/index.tsx
@@ -22,6 +22,7 @@ import { useAppDispatch } from '@/app/hook';
 import { IconButton } from '@/components';
 import { testConnection } from '@/features/connections';
 import { IConnection, IConnectionStatus } from '@/types';
+import { operator } from '@/utils';
 
 const Wrapper = styled.div`
   display: inline-flex;
@@ -52,7 +53,7 @@ export const ConnectionStatus = ({ connection }: Props) => {
 
   const dispatch = useAppDispatch();
 
-  const handleTest = () => dispatch(testConnection(connection));
+  const handleTest = () => operator(() => dispatch(testConnection(connection)).unwrap());
 
   return (
     <Wrapper>
diff --git a/config-ui/src/utils/operator.ts b/config-ui/src/utils/operator.ts
index d78fea5d2..fbdb6e5ca 100644
--- a/config-ui/src/utils/operator.ts
+++ b/config-ui/src/utils/operator.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import { toast } from '@/components';
+import { message } from 'antd';
 
 export type OperateConfig = {
   setOperating?: (success: boolean) => void;
@@ -40,16 +40,22 @@ export const operator = async <T>(request: () => Promise<T>, config?: OperateCon
   try {
     setOperating?.(true);
     const res = await request();
-    const message = formatMessage?.() ?? 'Operation successfully completed';
+    const content = formatMessage?.() ?? 'Operation successfully completed';
     if (!config?.hideToast) {
-      toast.success(message);
+      message.open({
+        type: 'success',
+        content,
+      });
     }
     return [true, res];
   } catch (err) {
     console.error('Operation failed.', err);
     const reason = formatReason?.(err) ?? (err as any).response?.data?.message ?? 'Operation failed.';
     if (!config?.hideToast) {
-      toast.error(reason);
+      message.open({
+        type: 'error',
+        content: reason,
+      });
     }
 
     return [false, err];