refactor(config-ui): use redux to reorganize connection data

config-ui/package.json

@@ -27,6 +27,7 @@
     "@blueprintjs/datetime2": "^1.0.10",
     "@blueprintjs/popover2": "^2.0.10",
     "@blueprintjs/select": "^5.0.10",
+    "@reduxjs/toolkit": "^1.9.7",
     "ahooks": "^3.7.8",
     "axios": "^0.21.4",
     "classnames": "^2.3.2",
@@ -39,8 +40,10 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "17.0.2",
     "react-is": "^18.2.0",
+    "react-redux": "^8.1.3",
     "react-router-dom": "^6.14.1",
     "react-transition-group": "^4.4.5",
+    "redux": "^4.2.1",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {

config-ui/src/api/connection/types.ts

@@ -27,6 +27,8 @@ export type Connection = {
   proxy: string;
   apiKey?: string;
   dbUrl?: string;
+  appId?: string;
+  secretKey?: string;
 };
 
 export type ConnectionForm = {

config-ui/src/plugins/register/teambition/connection-fields/styled.ts → config-ui/src/app/hook.ts

@@ -16,17 +16,9 @@
  *
  */
 
-import styled from 'styled-components';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
 
-export const Label = styled.label`
-  font-size: 16px;
-  font-weight: 600;
-`;
-
-export const LabelInfo = styled.i`
-  color: #ff8b8b;
-`;
-
-export const LabelDescription = styled.p`
-  margin: 0;
-`;
+type DispatchFunc = () => AppDispatch;
+export const useAppDispatch: DispatchFunc = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

config-ui/src/app/store.ts

@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
+import ConnectionSlice from '@/features/connections/slice';
+
+export const store = configureStore({
+  reducer: {
+    connections: ConnectionSlice,
+  },
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;

config-ui/src/store/connections/index.ts → config-ui/src/features/connections/index.ts

@@ -16,5 +16,5 @@
  *
  */
 
-export * from './types';
-export * from './context';
+export * from './slice';
+export * from './name';

config-ui/src/features/connections/name.tsx

@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useAppSelector } from '@/app/hook';
+
+import { selectConnection } from './slice';
+import { IConnection } from '@/types';
+
+interface Props {
+  plugin: string;
+  connectionId: ID;
+}
+
+export const ConnectionName = ({ plugin, connectionId }: Props) => {
+  const connection = useAppSelector((state) => selectConnection(state, `${plugin}-${connectionId}`)) as IConnection;
+  return <span>{connection.name}</span>;
+};

config-ui/src/features/connections/slice.ts

@@ -0,0 +1,122 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import { flatten } from 'lodash';
+
+import API from '@/api';
+import type { ConnectionForm } from '@/api/connection/types';
+import { RootState } from '@/app/store';
+import { PluginConfig } from '@/plugins';
+import { IConnection, IConnectionStatus } from '@/types';
+
+import { transformConnection } from './utils';
+
+const initialState: {
+  connections: IConnection[];
+} = {
+  connections: [],
+};
+
+export const init = createAsyncThunk('connections/init', async () => {
+  const res = await Promise.all(
+    PluginConfig.map(async ({ plugin }) => {
+      const connections = await API.connection.list(plugin);
+      return connections.map((connection) => transformConnection(plugin, connection));
+    }),
+  );
+  return flatten(res);
+});
+
+export const fetchConnections = createAsyncThunk('connections/fetchConnections', async (plugin: string) => {
+  const connections = await API.connection.list(plugin);
+  return {
+    plugin,
+    connections: connections.map((connection) => transformConnection(plugin, connection)),
+  };
+});
+
+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,
+    };
+  },
+);
+
+export const addConnection = createAsyncThunk('connections/addConnection', async ({ plugin, ...payload }: any) => {
+  const connection = await API.connection.create(plugin, payload);
+  return transformConnection(plugin, connection);
+});
+
+export const updateConnection = createAsyncThunk('connections/updateConnection', async (payload: ConnectionForm) => {});
+
+export const slice = createSlice({
+  name: 'connections',
+  initialState,
+  reducers: {},
+  extraReducers(builder) {
+    builder
+      .addCase(init.fulfilled, (state, action) => {
+        state.connections = action.payload;
+      })
+      .addCase(fetchConnections.fulfilled, (state, action) => {
+        state.connections = state.connections.concat(action.payload.connections);
+      })
+      .addCase(addConnection.fulfilled, (state, action) => {
+        state.connections.push(action.payload);
+      })
+      .addCase(testConnection.pending, (state, action) => {
+        const existingConnection = state.connections.find((cs) => cs.unique === action.meta.arg.unique);
+        if (existingConnection) {
+          existingConnection.status = IConnectionStatus.TESTING;
+        }
+      })
+      .addCase(testConnection.fulfilled, (state, action) => {
+        const existingConnection = state.connections.find((cs) => cs.unique === action.payload.unique);
+        if (existingConnection) {
+          existingConnection.status = action.payload.status;
+        }
+      });
+  },
+});
+
+export const {} = slice.actions;
+
+export default slice.reducer;
+
+export const selectAllConnections = (state: RootState) => state.connections.connections;
+
+export const selectConnections = (state: RootState, plugin: string) =>
+  state.connections.connections.filter((connection) => connection.plugin === plugin);
+
+export const selectConnection = (state: RootState, unique: string) =>
+  state.connections.connections.find((cs) => cs.unique === unique);

config-ui/src/features/connections/utils.ts

@@ -0,0 +1,45 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import * as T from '@/api/connection/types';
+import type { PluginConfigType } from '@/plugins';
+import { PluginConfig } from '@/plugins';
+
+import { IConnection, IConnectionStatus } from '@/types';
+
+export const transformConnection = (plugin: string, connection: T.Connection): IConnection => {
+  const config = PluginConfig.find((p) => p.plugin === plugin) as PluginConfigType;
+  return {
+    unique: `${plugin}-${connection.id}`,
+    plugin,
+    pluginName: config.name,
+    id: connection.id,
+    name: connection.name,
+    status: IConnectionStatus.IDLE,
+    icon: config.icon,
+    isBeta: config.isBeta ?? false,
+    endpoint: connection.endpoint,
+    proxy: connection.proxy,
+    authMethod: connection.authMethod,
+    token: connection.token,
+    username: connection.username,
+    password: connection.password,
+    appId: connection.appId,
+    secretKey: connection.secretKey,
+  };
+};

config-ui/src/plugins/register/teambition/connection-fields/index.ts → config-ui/src/features/index.ts

@@ -16,5 +16,4 @@
  *
  */
 
-export * from './tenant-id';
-export * from './tenant-type';
+export * from './connections';

config-ui/src/hooks/index.ts

@@ -17,7 +17,6 @@
  */
 
 export * from './use-auto-refresh';
-export * from './use-connections';
 export * from './use-refresh-data';
 export * from './use-tips';
 export * from './user-proxy-prefix';

config-ui/src/main.tsx

@@ -17,8 +17,15 @@
  */
 
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 
 import { App } from './App';
+import { store } from './app/store';
 import './index.css';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root'),
+);

config-ui/src/pages/blueprint/detail/components/add-connection-dialog/index.tsx

@@ -19,10 +19,11 @@
 import { useState, useMemo } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 
+import { useAppSelector } from '@/app/hook';
 import { Dialog, FormItem, Selector, Buttons } from '@/components';
-import { useConnections } from '@/hooks';
-import { DataScopeSelect, getPluginScopeId } from '@/plugins';
-import type { ConnectionItemType } from '@/store';
+import { selectAllConnections } from '@/features';
+import { DataScopeSelect } from '@/plugins';
+import { IConnection } from '@/types';
 
 interface Props {
   disabled: string[];
@@ -32,9 +33,9 @@ interface Props {
 
 export const AddConnectionDialog = ({ disabled = [], onCancel, onSubmit }: Props) => {
   const [step, setStep] = useState(1);
-  const [selectedConnection, setSelectedConnection] = useState<ConnectionItemType>();
+  const [selectedConnection, setSelectedConnection] = useState<IConnection>();
 
-  const { connections } = useConnections({ filterPlugin: ['webhook'] });
+  const connections = useAppSelector(selectAllConnections);
 
   const disabledItems = useMemo(
     () => connections.filter((cs) => (disabled.length ? disabled.includes(cs.unique) : false)),