fix: Optimize the tag input to automatically fill in the value when i…

…t loses focus (#4225)

Signed-off-by: harrisonliu5 <[email protected]>

package.json

@@ -5,7 +5,7 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@kube-design/components": "^1.27.1",
+    "@kube-design/components": "^1.32.0",
     "ace-builds": "^1.4.7",
     "ansi_up": "^5.0.0",
     "async-validator": "^1.8.5",

src/components/Forms/Notification/BaseForm/ConditionSelect/index.jsx

@@ -134,7 +134,13 @@ export default class ConditionSelect extends React.Component {
   }
 
   handleOperatorChange = operator => {
-    this.setState({ operator }, () => this.handleChange())
+    let values = this.state.values
+
+    if (['Exists', 'DoesNotExist'].includes(operator)) {
+      values = undefined
+    }
+
+    this.setState({ operator, values }, () => this.handleChange())
   }
 
   handleValueChange = values => {
@@ -143,12 +149,20 @@ export default class ConditionSelect extends React.Component {
 
   handleChange = () => {
     const { key, operator, values } = this.state
+    const _values = ['Exists', 'DoesNotExist'].includes(operator)
+      ? undefined
+      : values || []
 
-    this.props.onChange({
+    const data = {
       key,
       operator,
-      values: ['Exists', 'DoesNotExist'].includes(operator) ? [] : values,
-    })
+    }
+
+    if (_values) {
+      data.values = _values
+    }
+
+    this.props.onChange(data)
   }
 
   dorpdownRender = options => {
@@ -173,9 +187,11 @@ export default class ConditionSelect extends React.Component {
 
   renderValues() {
     const { key, operator, values } = this.state
+
     if (operator === 'Exists' || operator === 'DoesNotExist') {
       return null
     }
+
     if (key === 'severity') {
       return (
         <Select
@@ -188,6 +204,7 @@ export default class ConditionSelect extends React.Component {
         />
       )
     }
+
     return (
       <TagInput
         name="values"

src/components/Inputs/TagInput/autosuggest.jsx

@@ -80,6 +80,21 @@ class Autosuggest extends Component {
     }
   }
 
+  handEnter = event => {
+    event.stopPropagation()
+    const { onAdd } = this.props
+    const { value } = this.state
+    if (value.trim() !== '') {
+      if (!PATTERN_TAG.test(value) || value.length > 63) {
+        Notify.error({ content: t('PATTERN_TAG_VALUE_INVALID_TIP') })
+        return
+      }
+      this.setState({ value: '' }, () => {
+        onAdd(value)
+      })
+    }
+  }
+
   render() {
     const { value } = this.state
     const { style, placeholder } = this.props
@@ -96,6 +111,7 @@ class Autosuggest extends Component {
           className={styles.autosuggestInput}
           type="text"
           onKeyDown={this.handlePressEnter}
+          onBlur={this.handEnter}
           onChange={this.handleChange}
           placeholder={placeholder}
           ref={n => {

src/components/Inputs/TagInput/index.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-wrap: wrap;
   min-height: 32px;
-  padding: 0px 8px 6px;
+  padding: 0px 8px;
   border-radius: 4px;
   border: solid 1px $light-color08;
   background-color: white;
@@ -17,13 +17,12 @@
   letter-spacing: normal;
   color: $dark-color06;
   outline: none;
-  height: 32px;
 
   :global {
     .tag {
       padding: 0 8px;
       margin-right: 8px;
-      margin-top: 6px;
+      margin-top: 5px;
       font-weight: 400;
     }
 

yarn.lock

@@ -1159,10 +1159,10 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
-"@kube-design/components@^1.27.1":
-  version "1.30.1"
-  resolved "https://registry.npmjs.org/@kube-design/components/-/components-1.30.1.tgz#79f6576f682f3fbd16d3cdbb42edb780acf8e0df"
-  integrity sha512-jMZZbH/mHoFDOBhhSHcSXj4taQTiEZf2gLzhtAA3SKQtoA4gsM56jSeSlE6ZTUKq1X8tZYZ17qIw3XbgpPX7Gw==
+"@kube-design/components@^1.32.0":
+  version "1.32.0"
+  resolved "https://registry.npmjs.org/@kube-design/components/-/components-1.32.0.tgz#3eead1fd42d09f60787ed3e81dedd699d8b8a818"
+  integrity sha512-I6iWPvHwEptpcNuVP15CqkSW94OM9OUbBU61MzAHJqJEP/ym4ppjBaN1ZjIDmqU9j0RqzQvKVxaN9OXJegOCnQ==
   dependencies:
     "@babel/runtime" "^7.11.2"
     "@pitrix/lego-locale" "^0.1.10"