(incubator-devlake) 01/01: fix(config-ui): show error when initializing connection error

[mi...@apache.org]

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

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

commit 5d36a7eb4a5c6e51411f91f989499fbdb6a627f9
Author: mintsweet <0x...@gmail.com>
AuthorDate: Thu Nov 16 15:48:35 2023 +1300

    fix(config-ui): show error when initializing connection error
---
 config-ui/src/features/connections/slice.ts | 10 ++++++++++
 config-ui/src/routes/layout/layout.tsx      |  9 +++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/config-ui/src/features/connections/slice.ts b/config-ui/src/features/connections/slice.ts
index 6e05d01d5..af62d5b49 100644
--- a/config-ui/src/features/connections/slice.ts
+++ b/config-ui/src/features/connections/slice.ts
@@ -27,11 +27,13 @@ import { transformConnection, transformWebhook } from './utils';
 
 const initialState: {
   status: IStatus;
+  error: any;
   plugins: string[];
   connections: IConnection[];
   webhooks: IWebhook[];
 } = {
   status: 'idle',
+  error: null,
   plugins: [],
   connections: [],
   webhooks: [],
@@ -52,6 +54,7 @@ export const init = createAsyncThunk('connections/init', async (plugins: string[
       .filter((plugin) => plugin === 'webhook')
       .map(async () => {
         const webhooks = await API.plugin.webhook.list();
+        console.log(webhooks);
         return webhooks.map((webhook) => transformWebhook(webhook));
       }),
   );
@@ -151,6 +154,11 @@ export const connectionsSlice = createSlice({
         state.webhooks = action.payload.webhooks;
         state.status = 'success';
       })
+      .addCase(init.rejected, (state, action) => {
+        console.error(action.error.stack);
+        state.status = 'failed';
+        state.error = action.error;
+      })
       .addCase(addConnection.fulfilled, (state, action) => {
         state.connections.push(action.payload);
       })
@@ -195,6 +203,8 @@ export default connectionsSlice.reducer;
 
 export const selectStatus = (state: RootState) => state.connections.status;
 
+export const selectError = (state: RootState) => state.connections.error;
+
 export const selectPlugins = (state: RootState) => state.connections.plugins;
 
 export const selectAllConnections = (state: RootState) => state.connections.connections;
diff --git a/config-ui/src/routes/layout/layout.tsx b/config-ui/src/routes/layout/layout.tsx
index eb1bb0a61..eca5c265b 100644
--- a/config-ui/src/routes/layout/layout.tsx
+++ b/config-ui/src/routes/layout/layout.tsx
@@ -23,7 +23,7 @@ import { Menu, MenuItem, Navbar, Alignment } from '@blueprintjs/core';
 
 import { useAppDispatch, useAppSelector } from '@/app/hook';
 import { PageLoading, Logo, ExternalLink, IconButton } from '@/components';
-import { init, selectStatus } from '@/features';
+import { init, selectError, selectStatus } from '@/features';
 import { DOC_URL } from '@/release';
 import { TipsContextProvider, TipsContextConsumer } from '@/store';
 
@@ -46,6 +46,7 @@ export const Layout = () => {
 
   const dispatch = useAppDispatch();
   const status = useAppSelector(selectStatus);
+  const error = useAppSelector(selectError);
 
   const menu = useMenu();
 
@@ -59,6 +60,10 @@ export const Layout = () => {
     return <PageLoading />;
   }
 
+  if (status === 'failed') {
+    throw error.message;
+  }
+
   const handlePushPath = (it: MenuItemType) => {
     if (!it.path) {
       return;
@@ -83,7 +88,7 @@ export const Layout = () => {
       <TipsContextConsumer>
         {({ tips, setTips }) => (
           <S.Wrapper>
-            <S.Sider style={{userSelect: 'none'}}>
+            <S.Sider style={{ userSelect: 'none' }}>
               <Logo />
               <Menu className="menu">
                 {menu.map((it) => {