fix: Fix app deploy form and yaml mode

Signed-off-by: leoliu <leoliu@yunify.com>

src/components/Forms/AppDeploy/AppConfig/index.jsx

@@ -21,7 +21,7 @@ import { set } from 'lodash'
 import { reaction } from 'mobx'
 import { observer } from 'mobx-react'
 import { Loading } from '@pitrix/lego-ui'
-import { CodeEditor, Switch } from 'components/Base'
+import { Alert, CodeEditor, Switch } from 'components/Base'
 import { safeParseJSON } from 'utils'
 import { getValueObj, getValue } from 'utils/yaml'
 
@@ -33,6 +33,7 @@ import styles from './index.scss'
 export default class Services extends React.Component {
   state = {
     valuesYaml: '',
+    valuesJSON: {},
     valuesSchema: undefined,
     loadingFile: true,
     isCodeMode: false,
@@ -73,12 +74,13 @@ export default class Services extends React.Component {
 
   updateFormData = () => {
     const { formData } = this.props
+    const { isCodeMode, valuesYaml, valuesJSON } = this.state
 
     set(
       formData,
       'conf',
       getValue({
-        ...getValueObj(this.state.valuesYaml),
+        ...(isCodeMode ? getValueObj(valuesYaml) : valuesJSON),
         Name: formData.name || '',
         Description: formData.desc || '',
         Workspace: formData.workspace,
@@ -87,21 +89,14 @@ export default class Services extends React.Component {
   }
 
   handleModeChange = () => {
-    const { isCodeMode, valuesYaml } = this.state
-    if (isCodeMode) {
-      this.setState({
-        valuesJSON: getValueObj(valuesYaml),
-        isCodeMode: !isCodeMode,
-      })
-    } else {
-      this.setState({
-        isCodeMode: !isCodeMode,
-      })
-    }
+    const { isCodeMode } = this.state
+    this.setState({
+      isCodeMode: !isCodeMode,
+    })
   }
 
   handleValueChange = value => {
-    this.setState({ valueJSON: value, valuesYaml: getValue(value) })
+    this.setState({ valueJSON: value })
   }
 
   handleYamlChange = value => {
@@ -155,6 +150,13 @@ export default class Services extends React.Component {
             />
           )}
         </div>
+        {valuesSchema && (
+          <Alert
+            className="margin-b12"
+            type="warning"
+            message={t('HELM_APP_SCHEMA_FORM_TIP')}
+          />
+        )}
         {showCodeEditor ? this.renderYamlEdit() : this.renderSchemaForm()}
       </div>
     )

src/locales/en/app.js

@@ -252,4 +252,7 @@ export default {
   APP_ICON_NOTE: 'JPG or PNG within 96px * 96px',
 
   MISS_FILE_NOTE: 'The file {file} not found',
+
+  HELM_APP_SCHEMA_FORM_TIP:
+    'The app configuration can be displayed in a form. You can modify the default app configuration through either the form or YAML editor. Note: app data stored in different patterns are independent of each other.',
 }

src/locales/es/app.js

@@ -260,4 +260,7 @@ export default {
   APP_ICON_NOTE: 'JPG o PNG menor o igual a 200px * 200px',
 
   MISS_FILE_NOTE: 'No se encuentra el fichero {file}',
+
+  HELM_APP_SCHEMA_FORM_TIP:
+    'The app configuration can be displayed in a form. You can modify the default app configuration through either the form or YAML editor. Note: app data stored in different patterns are independent of each other.',
 }

src/locales/tc/app.js

@@ -220,4 +220,7 @@ export default {
   'Please select a workspace': '請選擇企業空間',
   'Please select a cluster': '請選擇集群',
   'Please select a project': '請選擇項目',
+
+  HELM_APP_SCHEMA_FORM_TIP:
+    '此应用支持表单模式，可选择通过表单或 YAML 编辑器来修改默认应用配置。注意：不同模式之间数据独立。',
 }

src/locales/zh/app.js

@@ -219,4 +219,7 @@ export default {
   'Please select a workspace': '请选择企业空间',
   'Please select a cluster': '请选择集群',
   'Please select a project': '请选择项目',
+
+  HELM_APP_SCHEMA_FORM_TIP:
+    '此应用支持表单模式，可选择通过表单或 YAML 编辑器来修改默认应用配置。注意：不同模式之间数据独立。',
 }