Fix: ui schema switch change, the configuration optimization

src/api/application.ts

@@ -134,7 +134,7 @@ export function createApplicationEnv(params: { appName?: string }) {
   return post(gurl, params).then((res) => res);
 }
 
-export function updateApplicationEnv(params: { appName?: string, name: string }) {
+export function updateApplicationEnv(params: { appName?: string; name: string }) {
   const gurl = isMock
     ? `${updateApplicationEnv_mock}`
     : `${application}/${params.appName}/envs/${name}`;

src/api/devLink.ts

@@ -37,4 +37,4 @@ export const getTrait_mock = '/mock/getTrait.json';
 export const listWorkFlowDefintion_mock = '/mock/listWorkFlowDefintion.json';
 export const listWorkFlowDetailsDefintion_mock = '/mock/listWorkFlowDetailsDefintion.json';
 
-export const updateApplicationEnv_mock = `/mock/api/v1/applications/name/envs/envName`
+export const updateApplicationEnv_mock = `/mock/api/v1/applications/name/envs/envName`;

src/components/UISchema/index.tsx

@@ -249,7 +249,15 @@ class UISchema extends Component<Props, State> {
             description={<Translation>{param.description || ''}</Translation>}
             title={<Translation>{param.label || ''}</Translation>}
             closed={true}
-            key={param.jsonKey}
+            required={param.validate && param.validate.required}
+            field={this.form}
+            jsonKey={param.jsonKey || ''}
+            propertyValue={this.props.value}
+            onChange={(values) => {
+              if (this.props.onChange) {
+                this.props.onChange(values);
+              }
+            }}
           >
             <Form.Item required={required} disabled={param.disable} key={param.jsonKey}>
               <KV
@@ -270,7 +278,15 @@ class UISchema extends Component<Props, State> {
             description={<Translation>{param.description || ''}</Translation>}
             title={<Translation>{param.label || ''}</Translation>}
             closed={true}
-            key={param.jsonKey}
+            required={param.validate && param.validate.required}
+            field={this.form}
+            jsonKey={param.jsonKey || ''}
+            propertyValue={this.props.value}
+            onChange={(values) => {
+              if (this.props.onChange) {
+                this.props.onChange(values);
+              }
+            }}
           >
             <Form.Item required={required} disabled={param.disable} key={param.jsonKey}>
               <Strings
@@ -381,6 +397,14 @@ class UISchema extends Component<Props, State> {
               title={<Translation>{param.label || ''}</Translation>}
               closed={true}
               required={param.validate && param.validate.required}
+              field={this.form}
+              jsonKey={param.jsonKey || ''}
+              propertyValue={this.props.value}
+              onChange={(values) => {
+                if (this.props.onChange) {
+                  this.props.onChange(values);
+                }
+              }}
             >
               <UISchema
                 {...init(param.jsonKey, {
@@ -424,6 +448,15 @@ class UISchema extends Component<Props, State> {
               description={<Translation>{param.description || ''}</Translation>}
               title={<Translation>{param.label || ''}</Translation>}
               closed={true}
+              required={param.validate && param.validate.required}
+              field={this.form}
+              jsonKey={param.jsonKey || ''}
+              propertyValue={this.props.value}
+              onChange={(values) => {
+                if (this.props.onChange) {
+                  this.props.onChange(values);
+                }
+              }}
             >
               <Form.Item>
                 <Structs

src/extends/Group/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { Icon, Loading, Grid, Switch } from '@b-design/ui';
+import { Icon, Loading, Grid, Switch, Field, Dialog } from '@b-design/ui';
 import { If } from 'tsx-control-statements/components';
+import Translation from '../../components/Translation';
+import locale from '../../utils/locale';
 import './index.less';
 
 const { Col, Row } = Grid;
-
 type Props = {
   title: string | React.ReactNode;
   description?: string | React.ReactNode;
@@ -14,11 +15,16 @@ type Props = {
   loading?: boolean;
   hasToggleIcon?: boolean;
   required?: boolean;
+  field?: Field;
+  jsonKey?: string;
+  propertyValue?: any;
+  onChange?: (values: any) => void;
 };
 
 type State = {
   closed: boolean | undefined;
   enable?: boolean;
+  checked: boolean;
 };
 
 class Group extends React.Component<Props, State> {
@@ -28,6 +34,7 @@ class Group extends React.Component<Props, State> {
     this.state = {
       closed: props.closed,
       enable: props.required,
+      checked: false,
     };
   }
 
@@ -37,9 +44,34 @@ class Group extends React.Component<Props, State> {
       closed: !closed,
     });
   };
+
+  componentDidMount() {
+    this.initSwitchState();
+  }
+
+  initSwitchState = () => {
+    const { jsonKey = '', propertyValue = {} } = this.props;
+    const findKey = Object.keys(propertyValue).find((item) => item === jsonKey);
+    if (findKey) {
+      this.setState({ enable: true, closed: false, checked: true });
+    } else {
+      this.setState({ enable: false, closed: false, checked: false });
+    }
+  };
+
+  removeJsonKeyValue() {
+    const { jsonKey = '', onChange } = this.props;
+    const field: Field | undefined = this.props.field;
+    if (field && onChange) {
+      field.remove(jsonKey);
+      const values = field.getValues();
+      onChange(values);
+    }
+  }
+
   render() {
     const { title, description, children, hasToggleIcon, loading, required } = this.props;
-    const { closed, enable } = this.state;
+    const { closed, enable, checked } = this.state;
     return (
       <Loading visible={loading || false} style={{ width: '100%' }}>
         <div className="group-container">
@@ -53,8 +85,27 @@ class Group extends React.Component<Props, State> {
                 <If condition={!required}>
                   <Switch
                     size="small"
+                    defaultChecked={required}
+                    checked={checked}
                     onChange={(event: boolean) => {
-                      this.setState({ enable: event, closed: false });
+                      if (event === true) {
+                        this.setState({ enable: event, closed: false, checked: true });
+                      } else if (event === false) {
+                        Dialog.confirm({
+                          type: 'confirm',
+                          content: (
+                            <Translation>
+                              If Swtich is turned off, The configuration will be reset. Are you sure
+                              you want to do this?
+                            </Translation>
+                          ),
+                          onOk: () => {
+                            this.setState({ enable: event, closed: false, checked: false });
+                            this.removeJsonKeyValue();
+                          },
+                          locale: locale.Dialog,
+                        });
+                      }
                     }}
                   />
                 </If>

src/locals/Zh/zh.json

@@ -37,7 +37,7 @@
   "Reset": "重置",
   "Please enter": "请输入",
   "Project Screening": "所属项目筛选",
-  "Target Screening":"交付目标筛选",
+  "Target Screening": "交付目标筛选",
   "Application name, description and search": "名称、描述模糊搜索",
   "App Name": "应用名称",
   "App Name-": "应用名称-",
@@ -181,4 +181,4 @@
   "Please select the action you want to perform": "请选择您期望的动作执行?",
   "Continue": "继续",
   "Termination": "终止"
-}
+}