[fix] fix the custom config cannot save its state after switching to …

…other tab (#23)

fix the custom config cannot save its state after switching to other tab

frontend/src/routes/space/detail/space-detail.tsx

@@ -191,6 +191,7 @@ export function SpaceDetail() {
                                             label={user.name}
                                             value={user.id}
                                             title={user.name}
+                                            disabled={userInfo.id === user.id && !userInfo.is_super_admin}
                                         >
                                             <Row justify="space-between">
                                                 <div className={styles.optionContent}>

frontend/src/routes/space/new-cluster/steps/node-config/components/custom-config.interface.ts

@@ -15,13 +15,16 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { ClassAttributes } from "react";
+import { DorisNodeTypeEnum } from '../../../types/params.type';
+import { Custom } from '../node-config';
 
-export interface CustomConfigProps extends ClassAttributes<any>{
-    onChange?: (value: CustomConfigValue) => void;
+export interface CustomConfigProps {
+    dispatch: (value: { type: DorisNodeTypeEnum; payload: Custom }) => void;
+    activeKey: DorisNodeTypeEnum;
+    custom: Custom;
 }
 
 export interface CustomConfigValue {
     showCustomConfig: boolean;
     value: string;
-}
+}

frontend/src/routes/space/new-cluster/steps/node-config/components/custom-config.tsx

@@ -15,12 +15,12 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { Input, Row, Space, Switch } from "antd";
-import React, { useState } from "react";
-import { CustomConfigProps } from "./custom-config.interface";
+import React from 'react';
+import { Input, Row, Space, Switch } from 'antd';
+import { CustomConfigProps } from './custom-config.interface';
 
 export function CustomConfig(props: CustomConfigProps) {
-    const [showCustomConfig, setShowCustomConfig] = useState(false);
+    const { dispatch, activeKey, custom } = props;
     return (
         <>
             <Row style={{ margin: '20px 0' }}>
@@ -30,24 +30,35 @@ export function CustomConfig(props: CustomConfigProps) {
                         style={{ marginLeft: 40 }}
                         checkedChildren="开"
                         unCheckedChildren="关"
-                        defaultChecked={false}
-                        onChange={(checked: boolean) => {
-                            setShowCustomConfig(checked);
+                        checked={custom.visible}
+                        onChange={(visible: boolean) => {
+                            dispatch({
+                                type: activeKey,
+                                payload: {
+                                    ...custom,
+                                    visible,
+                                },
+                            });
                         }}
                     />
                 </Space>
             </Row>
-            {
-                showCustomConfig && (
-                    <Input.TextArea onChange={e => {
-                        props.onChange && props.onChange({
-                            value: e.target.value,
-                            showCustomConfig,
+            {custom.visible && (
+                <Input.TextArea
+                    value={custom.value}
+                    onChange={e => {
+                        dispatch({
+                            type: activeKey,
+                            payload: {
+                                ...custom,
+                                value: e.target.value,
+                            },
                         });
-                    }} rows={5} placeholder="请输入您的自定义配置项，若存在冲突，自定义配置将覆盖上方默认配置 格式: xxx=xxx" />
-                )
-            }
-
+                    }}
+                    rows={5}
+                    placeholder="请输入您的自定义配置项，若存在冲突，自定义配置将覆盖上方默认配置 格式: xxx=xxx"
+                />
+            )}
         </>
     );
 }

frontend/src/routes/space/new-cluster/steps/node-config/node-config.tsx

@@ -42,27 +42,51 @@ interface DataType {
     desc: string | null;
 }
 
-const initData = {
-    feCustom: '',
-    beCustom: '',
-    brokerCustom: '',
+export interface Custom {
+    value: string;
+    visible: boolean;
+}
+
+interface CustomState {
+    feCustom: Custom;
+    beCustom: Custom;
+    brokerCustom: Custom;
+}
+
+const initData: CustomState = {
+    feCustom: {
+        value: '',
+        visible: false,
+    },
+    beCustom: {
+        value: '',
+        visible: false,
+    },
+    brokerCustom: {
+        value: '',
+        visible: false,
+    },
 };
-const reducer = (state: any, action: { type: any; feCustom?: any; beCustom?: any; brokerCustom?: any }) => {
-    let newState = { ...state };
+const reducer = (state: CustomState, action: { type: DorisNodeTypeEnum; payload: Custom }) => {
     switch (action.type) {
-        case 'SET_FE_CONFIG':
-            newState.feCustom = action.feCustom;
-            break;
-        case 'SET_BE_CONFIG':
-            newState.beCustom = action.beCustom;
-            break;
-        case 'SET_BROKER_CONFIG':
-            newState.brokerCustom = action.brokerCustom;
-            break;
+        case DorisNodeTypeEnum.FE:
+            return {
+                ...state,
+                feCustom: action.payload,
+            };
+        case DorisNodeTypeEnum.BE:
+            return {
+                ...state,
+                beCustom: action.payload,
+            };
+        case DorisNodeTypeEnum.BROKER:
+            return {
+                ...state,
+                brokerCustom: action.payload,
+            };
         default:
-            newState = state;
+            return state;
     }
-    return newState;
 };
 
 function getDeployConfigs(name: string, modules: any[]) {
@@ -80,7 +104,7 @@ function tranverseModulesToObject(modules: DataType[]) {
 }
 
 function tranverseStringToObject(customString: string) {
-    if(customString === '') return {}
+    if (customString === '') return {};
     const customModules = customString.split('\n');
     return customModules.reduce((memo, current) => {
         const [key, value] = current.split('=');
@@ -158,8 +182,6 @@ export function NodeConfigContent(props: any) {
     const [feDataSource, setFeDataSource] = useState<DataType[]>([]);
     const [beDataSource, setBeDataSource] = useState<DataType[]>([]);
     const [brokerDataSource, setBrokerDataSource] = useState<DataType[]>([]);
-    // const {fe, be} = useRecoilValue(roleListQuery);
-    const processID = useRecoilValue(processId);
 
     useEffect(() => {
         if (!reqInfo.cluster_id) return;
@@ -184,11 +206,11 @@ export function NodeConfigContent(props: any) {
             const { feCustom, beCustom, brokerCustom } = customState;
             switch (moduleName) {
                 case 'fe':
-                    return getNewConfigsWithCustom(feDataSource, feCustom);
+                    return getNewConfigsWithCustom(feDataSource, feCustom.visible ? feCustom.value : '');
                 case 'be':
-                    return getNewConfigsWithCustom(beDataSource, beCustom);
+                    return getNewConfigsWithCustom(beDataSource, beCustom.visible ? beCustom.value : '');
                 case 'broker':
-                    return getNewConfigsWithCustom(brokerDataSource, brokerCustom);
+                    return getNewConfigsWithCustom(brokerDataSource, brokerCustom.visible ? brokerCustom.value : '');
             }
         },
         [feDataSource, beDataSource, brokerDataSource, customState],
@@ -199,7 +221,7 @@ export function NodeConfigContent(props: any) {
             moduleName: module.name,
             configs: getNewConfigs(module.name),
         }));
-        props.onChange?.(newClusterModules)
+        props.onChange?.(newClusterModules);
     }, [getNewConfigs]);
 
     return (
@@ -231,11 +253,7 @@ export function NodeConfigContent(props: any) {
                                 },
                             }}
                         />
-                        <CustomConfig
-                            onChange={val => {
-                                dispatch({ type: 'SET_FE_CONFIG', feCustom: val.value });
-                            }}
-                        />
+                        <CustomConfig dispatch={dispatch} activeKey={activeKey} custom={customState.feCustom} />
                     </>
                 )}
                 {activeKey === DorisNodeTypeEnum.BE && (
@@ -255,11 +273,7 @@ export function NodeConfigContent(props: any) {
                                 },
                             }}
                         />
-                        <CustomConfig
-                            onChange={val => {
-                                dispatch({ type: 'SET_BE_CONFIG', beCustom: val.value });
-                            }}
-                        />
+                        <CustomConfig dispatch={dispatch} activeKey={activeKey} custom={customState.beCustom} />
                     </>
                 )}
                 {activeKey === DorisNodeTypeEnum.BROKER && (
@@ -280,11 +294,7 @@ export function NodeConfigContent(props: any) {
                                 },
                             }}
                         />
-                        <CustomConfig
-                            onChange={val => {
-                                dispatch({ type: 'SET_BROKER_CONFIG', brokerCustom: val.value });
-                            }}
-                        />
+                        <CustomConfig dispatch={dispatch} activeKey={activeKey} custom={customState.brokerCustom} />
                     </>
                 )}
             </PageContainer>