fix: Block users submit updates when environment variable verification fails

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

@@ -30,6 +30,8 @@ const getActions = lazy(() =>
 export default class Environments extends React.Component {
   rootStore = new RootStore()
 
+  envError = ''
+
   static defaultProps = {
     prefix: '',
     checkable: true,
@@ -47,6 +49,16 @@ export default class Environments extends React.Component {
     )
   }
 
+  handleErrorStatus = (err = '') => {
+    this.envError = err
+  }
+
+  envValidator = (rule, value, callback) => {
+    if (this.envError === '') {
+      callback()
+    }
+  }
+
   render() {
     const {
       checkable,
@@ -62,14 +74,15 @@ export default class Environments extends React.Component {
         desc={t('CONTAINER_ENVIRONMENT_DESC')}
         checkable={checkable}
       >
-        <Form.Item>
+        <Form.Item rules={[{ validator: this.envValidator }]}>
           <EnvironmentInput
             rootStore={this.rootStore}
             name={`${this.prefix}env`}
             namespace={namespace}
             isFederated={isFederated}
             cluster={cluster}
             projectDetail={projectDetail}
+            handleInputError={this.handleErrorStatus}
           />
         </Form.Item>
       </Form.Group>

src/components/Inputs/ArrayInput/Item.jsx

@@ -22,7 +22,15 @@ import { Button } from '@kube-design/components'
 
 import styles from './index.scss'
 
-const Item = ({ component, index, value, arrayValue, onChange, onDelete }) => {
+const Item = ({
+  component,
+  index,
+  value,
+  arrayValue,
+  onChange,
+  onDelete,
+  handleInputError,
+}) => {
   const [keyErrorTip, setKeyError] = useState('')
 
   const handleKeyError = info => {
@@ -37,6 +45,7 @@ const Item = ({ component, index, value, arrayValue, onChange, onDelete }) => {
     arrayValue,
     onChange,
     handleKeyError,
+    handleInputError,
   })
 
   return (

src/components/Inputs/ArrayInput/index.jsx

@@ -31,6 +31,7 @@ export default class ArrayInput extends React.Component {
     name: PropTypes.string,
     value: PropTypes.array,
     onChange: PropTypes.func,
+    handleInputError: PropTypes.func,
     addText: PropTypes.string,
     itemType: PropTypes.oneOf(['string', 'object']),
     children: PropTypes.node.isRequired,
@@ -41,6 +42,7 @@ export default class ArrayInput extends React.Component {
     name: '',
     value: [''],
     onChange() {},
+    handleInputError() {},
     addText: t('ADD'),
     itemType: 'string',
   }
@@ -109,7 +111,7 @@ export default class ArrayInput extends React.Component {
   }
 
   renderItems() {
-    const { value, children, id } = this.props
+    const { value, children, id, handleInputError } = this.props
     if (id && id.includes("metadata.annotations['kubesphere.io/")) {
       return value.map((item, index) => (
         <Form.Item
@@ -124,6 +126,7 @@ export default class ArrayInput extends React.Component {
             component={children}
             onChange={this.handleChange.bind(this, index)}
             onDelete={this.handleDelete.bind(this, index)}
+            handleInputError={handleInputError}
           />
         </Form.Item>
       ))
@@ -138,6 +141,7 @@ export default class ArrayInput extends React.Component {
         component={children}
         onChange={this.handleChange.bind(this, index)}
         onDelete={this.handleDelete.bind(this, index)}
+        handleInputError={handleInputError}
       />
     ))
   }

src/components/Inputs/EnvironmentInput/Item.jsx

@@ -210,39 +210,43 @@ export default class EnvironmentInputItem extends React.Component {
   }
 
   validEnvKey = debounce((value, target = {}) => {
-    const { handleKeyError } = this.props
+    const { handleKeyError, handleInputError } = this.props
     const status = !PATTERN_ENV_NAME.test(value)
     if (value === '' && target.value === '') {
       handleKeyError()
+      handleInputError()
       this.setState({
         keyError: false,
       })
     } else {
       if (status) {
-        value !== ''
-          ? handleKeyError({
-              message: t('ENVIRONMENT_INVALID_TIP'),
-            })
-          : handleKeyError({
-              message: t('ENVIRONMENT_CANNOT_BE_EMPTY'),
-            })
+        const message =
+          value !== ''
+            ? t('ENVIRONMENT_INVALID_TIP')
+            : t('ENVIRONMENT_CANNOT_BE_EMPTY')
+        handleInputError({ message })
+        handleKeyError({ message })
       } else {
         handleKeyError()
+        handleInputError()
       }
       this.setState({
         keyError: status,
       })
     }
   }, 300)
 
-  handleValueChange = ({ name, value }) => {
+  handleValueChange = debounce(({ name, value }) => {
     if (name === '' && value === '') {
       this.props.handleKeyError()
+      this.props.handleInputError()
       this.setState({
         keyError: false,
       })
+    } else {
+      this.validEnvKey(name, value)
     }
-  }
+  }, 300)
 
   render() {
     const { value = {}, onChange } = this.props

src/components/Inputs/EnvironmentInput/index.jsx

@@ -54,11 +54,13 @@ export default class EnvironmentInput extends React.Component {
     name: PropTypes.string,
     value: PropTypes.array,
     onChange: PropTypes.func,
+    handleInputError: PropTypes.func,
   }
 
   static defaultProps = {
     name: '',
     onChange() {},
+    handleInputError() {},
   }
 
   componentDidMount() {