fix: Block users from submitting updates when environment variable ve…

…rification fails

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>

src/components/Forms/Workload/ContainerSettings/ContainerForm/Environments/index.jsx

@@ -20,6 +20,7 @@ import React from 'react'
 import { Form } from '@kube-design/components'
 import { EnvironmentInput } from 'components/Inputs'
 import RootStore from 'stores/root'
+import { PATTERN_ENV_NAME } from 'utils/constants'
 
 import { lazy } from 'utils'
 
@@ -47,6 +48,20 @@ export default class Environments extends React.Component {
     )
   }
 
+  validKeys = (rule, value, callback) => {
+    if (!value) {
+      callback()
+    }
+    if (value.some(item => item.name === '' && item.value === '')) {
+      callback()
+    }
+    const keyInvalid = value.some(item => !PATTERN_ENV_NAME.test(item.name))
+    const noEmpty = [].concat(value).every(item => item.name !== '')
+    if (noEmpty && !keyInvalid) {
+      callback()
+    }
+  }
+
   render() {
     const {
       checkable,
@@ -62,7 +77,7 @@ export default class Environments extends React.Component {
         desc={t('CONTAINER_ENVIRONMENT_DESC')}
         checkable={checkable}
       >
-        <Form.Item>
+        <Form.Item rules={[{ validator: this.validKeys }]}>
           <EnvironmentInput
             rootStore={this.rootStore}
             name={`${this.prefix}env`}

src/components/Inputs/EnvironmentInput/Item.jsx

@@ -235,14 +235,16 @@ export default class EnvironmentInputItem extends React.Component {
     }
   }, 300)
 
-  handleValueChange = ({ name, value }) => {
+  handleValueChange = debounce(({ name, value }) => {
     if (name === '' && value === '') {
       this.props.handleKeyError()
       this.setState({
         keyError: false,
       })
+    } else {
+      this.validEnvKey(name, value)
     }
-  }
+  }, 300)
 
   render() {
     const { value = {}, onChange } = this.props