fix: Fix the data is incorrect in router after cancel editing (kubesp…

…here#3641) Signed-off-by: harrisonliu5 <[email protected]> Signed-off-by: harrisonliu5 <[email protected]>
cmcc-ict · Sep 5, 2022 · 03b786a · 03b786a
1 parent c3b3017
commit 03b786a
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 27 deletions.
diff --git a/src/components/Forms/Route/RouteRules/RuleForm/index.jsx b/src/components/Forms/Route/RouteRules/RuleForm/index.jsx
@@ -69,14 +69,8 @@ export default class RuleForm extends React.Component {
 
   componentDidMount() {
     const { registerSubRoute } = this.context
-    const { onCancel } = this.props
-    registerSubRoute &&
-      registerSubRoute(this.handleSubmit, () => {
-        if (this.handleValidator()) {
-          return onCancel
-        }
-        return false
-      })
+
+    registerSubRoute && registerSubRoute(this.handleSubmit, this.handleGoBack)
   }
 
   get protocols() {
@@ -185,6 +179,7 @@ export default class RuleForm extends React.Component {
     if (this.handleValidator()) {
       this.props.onCancel()
     }
+    return false
   }
 
   handleProtocolChange = value => {

diff --git a/src/components/Forms/Route/RouteRules/RuleList/index.jsx b/src/components/Forms/Route/RouteRules/RuleList/index.jsx
@@ -46,7 +46,7 @@ export default class RuleList extends React.Component {
   }
 
   renderContent() {
-    const { value, onShow, onDelete, projectDetail } = this.props
+    const { value, onShow, onEdit, onDelete, projectDetail } = this.props
 
     const tls = get(this.context.formData, 'spec.tls', [])
 
@@ -60,7 +60,7 @@ export default class RuleList extends React.Component {
               tls={tls}
               key={index}
               index={index}
-              onEdit={onShow}
+              onEdit={onEdit}
               onDelete={onDelete}
               projectDetail={projectDetail}
             />

diff --git a/src/components/Forms/Route/RouteRules/index.jsx b/src/components/Forms/Route/RouteRules/index.jsx
@@ -16,7 +16,7 @@
  * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { get, set, isEmpty, omit } from 'lodash'
+import { get, set, isEmpty, omit, cloneDeep } from 'lodash'
 import React from 'react'
 import { toJS, computed } from 'mobx'
 import { observer } from 'mobx-react'
@@ -39,7 +39,9 @@ class RouteRules extends React.Component {
       showRule: false,
       selectRuleIndex: -1,
       gateway: {},
+      oldTemplate: {},
       isLoading: false,
+      operation: '',
     }
 
     this.secretStore = new SecretStore()
@@ -95,11 +97,30 @@ class RouteRules extends React.Component {
   }
 
   showRule = index => {
-    this.setState({ showRule: true, selectRuleIndex: index })
+    this.setState({ showRule: true, selectRuleIndex: index, operation: 'add' })
   }
 
-  hideRule = () => {
-    this.setState({ showRule: false, selectRuleIndex: -1 })
+  closeModal = () => {
+    this.setState({ showRule: false, selectRuleIndex: -1, operation: '' })
+  }
+
+  closeEditModal = () => {
+    if (this.state.operation === 'edit') {
+      const { oldTemplate } = this.state
+      set(this.fedFormTemplate, 'spec', oldTemplate.spec)
+      const { isFederated } = this.props
+      isFederated && this.updateOverrides()
+    }
+    this.closeModal()
+  }
+
+  showEdit = index => {
+    this.setState({
+      showRule: true,
+      selectRuleIndex: index,
+      operation: 'edit',
+      oldTemplate: cloneDeep(toJS(this.fedFormTemplate)),
+    })
   }
 
   handleRule = data => {
@@ -121,7 +142,7 @@ class RouteRules extends React.Component {
 
     isFederated && this.updateOverrides()
 
-    this.hideRule()
+    this.closeModal()
   }
 
   getGateway = async () => {
@@ -135,7 +156,7 @@ class RouteRules extends React.Component {
       this.setState({ isLoading: true })
       const dataList = await getProjectGateway()
 
-      const data = dataList[1] || dataList[0]
+      const data = dataList[1] || dataList[0] || {}
 
       if (data.serviceMeshEnable) {
         set(
@@ -162,7 +183,7 @@ class RouteRules extends React.Component {
 
     isFederated && this.updateOverrides()
 
-    this.hideRule()
+    this.closeModal()
   }
 
   updateTLS(formTemplate) {
@@ -242,7 +263,7 @@ class RouteRules extends React.Component {
         projectDetail={projectDetail}
         namespace={namespace}
         onSave={this.handleRule}
-        onCancel={this.hideRule}
+        onCancel={this.closeEditModal}
       />
     )
   }
@@ -263,6 +284,7 @@ class RouteRules extends React.Component {
           <RuleList
             name="spec.rules"
             onShow={this.showRule}
+            onEdit={this.showEdit}
             onDelete={this.handleDelete}
             disabled={noGateway}
             isFederated={isFederated}

diff --git a/src/components/Modals/EditAuthorization/CheckItem.jsx b/src/components/Modals/EditAuthorization/CheckItem.jsx
@@ -87,6 +87,17 @@ export default class CheckItem extends Component {
 
   render() {
     const { roleTemplates, roleTemplatesMap, data } = this.props
+    const dependencies =
+      data.dependencies.length > 0
+        ? data.dependencies
+            .map(item => {
+              const aliasName = get(roleTemplatesMap, `[${item}].aliasName`)
+              return aliasName
+                ? aliasName.toUpperCase().replace(/[^A-Z]+/g, '_')
+                : undefined
+            })
+            .filter(item => item !== undefined)
+        : []
 
     return (
       <div className={styles.checkItem}>
@@ -107,16 +118,12 @@ export default class CheckItem extends Component {
               .replace(/[^A-Z]+/g, '_')}_DESC`
           )}
         />
-        {data.dependencies.length > 0 && (
+        {dependencies.length > 0 && (
           <div className={styles.extra}>
             {t('DEPENDS_ON')}
-            {data.dependencies.map(item => (
-              <Tag className={styles.tag} type="info" key={item}>
-                {t(
-                  `PERMISSION_${get(roleTemplatesMap, `[${item}].aliasName`)
-                    .toUpperCase()
-                    .replace(/[^A-Z]+/g, '_')}`
-                )}
+            {dependencies.map(aliasName => (
+              <Tag className={styles.tag} type="info" key={aliasName}>
+                {t(`PERMISSION_${aliasName}`)}
               </Tag>
             ))}
           </div>

diff --git a/src/pages/projects/components/Modals/CreateApp/Routes/index.jsx b/src/pages/projects/components/Modals/CreateApp/Routes/index.jsx
@@ -94,8 +94,11 @@ export default class Routes extends React.Component {
 
   closeEditModal = () => {
     if (this.state.operation === 'edit') {
+      const { formData } = this.props
       const ingress = this.state.old
-      this.setState({ ingress })
+      this.setState({ ingress }, () => {
+        set(formData, 'ingress', ingress)
+      })
     }
     this.closeModal()
   }