fix: uniformly use Enter to add item in LabelField (#3581)

* fix: uniformly use Enter to add item in LabelField
Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>

* chore: update changelog
Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>
Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>

CHANGELOG.md

@@ -29,6 +29,7 @@ For more information and how-to, see [RFC: Keep A Changelog](https://github.com/
 
 - Fix default value for concurrencyPolicy [#2834](https://github.com/chaos-mesh/chaos-mesh/pull/2834)
 - Bump toda to v0.2.3 [#3131](https://github.com/chaos-mesh/chaos-mesh/pull/3131)
+- Uniformly use Enter to add item in LabelField [#3581](https://github.com/chaos-mesh/chaos-mesh/pull/3581)
 
 ### Security
 

pkg/apiserver/experiment/experiment.go

@@ -274,10 +274,6 @@ func (s *Service) createIOChaos(exp *core.ExperimentInfo, kubeCli client.Client)
 		},
 	}
 
-	if exp.Target.IOChaos.ContainerName != "" {
-		chaos.Spec.ContainerNames = []string{exp.Target.IOChaos.ContainerName}
-	}
-
 	if exp.Scheduler.Duration != "" {
 		chaos.Spec.Duration = &exp.Scheduler.Duration
 	}

pkg/apiserver/schedule/schedule.go

@@ -275,7 +275,7 @@ func parseIOChaos(exp *core.ScheduleInfo) v1alpha1.ScheduleItem {
 					Mode:     v1alpha1.PodMode(exp.Scope.Mode),
 					Value:    exp.Scope.Value,
 				},
-				ContainerNames: []string{exp.Target.IOChaos.ContainerName},
+				ContainerNames: exp.Target.IOChaos.ContainerNames,
 			},
 			Action:     v1alpha1.IOChaosType(exp.Target.IOChaos.Action),
 			Delay:      exp.Target.IOChaos.Delay,

pkg/core/experiment.go

@@ -187,16 +187,16 @@ type NetworkChaosInfo struct {
 
 // IOChaosInfo defines the basic information of io chaos for creating a new IOChaos.
 type IOChaosInfo struct {
-	Action        string                     `json:"action" binding:"oneof='' 'latency' 'fault' 'attrOverride'"`
-	Delay         string                     `json:"delay"`
-	Errno         uint32                     `json:"errno"`
-	Attr          *v1alpha1.AttrOverrideSpec `json:"attr"`
-	Mistake       *v1alpha1.MistakeSpec      `json:"mistake"`
-	Path          string                     `json:"path"`
-	Percent       int                        `json:"percent"`
-	Methods       []v1alpha1.IoMethod        `json:"methods"`
-	VolumePath    string                     `json:"volume_path"`
-	ContainerName string                     `json:"container_name"`
+	Action         string                     `json:"action" binding:"oneof='' 'latency' 'fault' 'attrOverride'"`
+	Delay          string                     `json:"delay"`
+	Errno          uint32                     `json:"errno"`
+	Attr           *v1alpha1.AttrOverrideSpec `json:"attr"`
+	Mistake        *v1alpha1.MistakeSpec      `json:"mistake"`
+	Path           string                     `json:"path"`
+	Percent        int                        `json:"percent"`
+	Methods        []v1alpha1.IoMethod        `json:"methods"`
+	VolumePath     string                     `json:"volume_path"`
+	ContainerNames []string                   `json:"container_names"`
 }
 
 // KernelChaosInfo defines the basic information of kernel chaos for creating a new KernelChaos.

ui/src/components/FormField/LabelField.tsx

@@ -69,7 +69,9 @@ const LabelField: React.FC<LabelFieldProps & TextFieldProps> = ({ isKV = false,
       setError('')
     }
 
-    if (e.key === ' ') {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+
       processText()
     }
 

ui/src/components/NewExperiment/types.ts

@@ -109,7 +109,7 @@ export interface ExperimentTargetStress {
     }
   }
   stressng_stressors: string
-  container_name: string
+  container_names: string[]
 }
 
 export type ExperimentKind =

ui/src/components/NewExperimentNext/data/target.ts

@@ -24,6 +24,14 @@ export interface Target {
   spec?: Spec
 }
 
+const containerNames = {
+  field: 'label' as FieldType,
+  label: 'Container names',
+  value: [],
+  helperText:
+    "Optional. Type and end with Enter to generate the container names. If it's empty, the first container will be injected.",
+}
+
 const networkCommon: Spec = {
   direction: {
     field: 'select',
@@ -36,7 +44,7 @@ const networkCommon: Spec = {
     field: 'label',
     label: 'External targets',
     value: [],
-    helperText: 'Type string and end with a space to generate the network targets outside k8s',
+    helperText: 'Type and end with Enter to generate the network targets outside k8s.',
   },
   target_scope: undefined as any,
 }
@@ -90,12 +98,7 @@ const ioCommon: Spec = {
     value: '',
     helperText: "Optional. The path of files for injecting. If it's empty, the action will inject into all files.",
   },
-  container_name: {
-    field: 'text',
-    label: 'Container name',
-    value: '',
-    helperText: 'Optional. The target container to inject in',
-  },
+  container_names: containerNames,
   percent: {
     field: 'number',
     label: 'Percent',
@@ -118,13 +121,7 @@ const dnsCommon: Spec = {
     value: [],
     helperText: 'Specify the DNS patterns. For example, type google.com and then press space to add it.',
   },
-  container_names: {
-    field: 'label',
-    label: 'Affected container names',
-    value: [],
-    helperText:
-      "Optional. Type string and end with a space to generate the container names. If it's empty, all containers will be injected",
-  },
+  container_names: containerNames,
 }
 
 const awsCommon: Spec = {
@@ -204,12 +201,7 @@ const data: Record<Kind, Target> = {
         key: 'container-kill',
         spec: {
           action: 'container-kill' as any,
-          container_names: {
-            field: 'label',
-            label: 'Container names',
-            value: [],
-            helperText: 'Type string and end with a space to generate the container names.',
-          },
+          container_names: containerNames,
         },
       },
     ],
@@ -445,15 +437,9 @@ const data: Record<Kind, Target> = {
         label: 'Clock ids',
         value: [],
         helperText:
-          "Optional. Type string and end with a space to generate the clock ids. If it's empty, it will be set to ['CLOCK_REALTIME']",
-      },
-      container_names: {
-        field: 'label',
-        label: 'Affected container names',
-        value: [],
-        helperText:
-          "Optional. Type string and end with a space to generate the container names. If it's empty, all containers will be injected",
+          "Optional. Type and end with Enter to generate the clock ids. If it's empty, it will be set to ['CLOCK_REALTIME'].",
       },
+      container_names: containerNames,
     },
   },
   // DNS Fault
@@ -547,7 +533,7 @@ const data: Record<Kind, Target> = {
             field: 'label',
             label: 'Device names',
             value: [],
-            helperText: 'Type string and end with a space to generate the device names',
+            helperText: 'Type and end with Enter to generate the device names.',
           },
         },
       },

ui/src/components/NewExperimentNext/form/Kernel.tsx

@@ -97,7 +97,7 @@ const Kernel: React.FC<KernelProps> = ({ onSubmit }) => {
               <LabelField
                 name="fail_kern_request.headers"
                 label="Headers"
-                helperText="Type string and end with a space to generate the appropriate kernel headers"
+                helperText="Type and end with Enter to generate the appropriate kernel headers"
               />
               <TextField
                 type="number"

ui/src/components/NewExperimentNext/form/Stress.tsx

@@ -70,7 +70,7 @@ const Stress: React.FC<StressProps> = ({ onSubmit }) => {
             <LabelField
               name="stressors.cpu.options"
               label="Options of CPU stressors"
-              helperText="Type string and end with a space to generate the stress-ng options"
+              helperText="Type and end with Enter to generate the stress-ng options"
             />
 
             <Typography>Memory</Typography>
@@ -88,7 +88,7 @@ const Stress: React.FC<StressProps> = ({ onSubmit }) => {
             <LabelField
               name="stressors.memory.options"
               label="Options of Memory stressors"
-              helperText="Type string and end with a space to generate the stress-ng options"
+              helperText="Type and end with Enter to generate the stress-ng options"
             />
           </Space>
 
@@ -101,7 +101,7 @@ const Stress: React.FC<StressProps> = ({ onSubmit }) => {
             <LabelField
               name="container_names"
               label="Container Names"
-              helperText="Optional. Type string and end with a space to generate the container names. If it's empty, all containers will be injected"
+              helperText="Optional. Type and end with Enter to generate the container names. If it's empty, the first container will be injected"
             />
           </AdvancedOptions>
 

ui/src/i18n/en.json

@@ -134,7 +134,7 @@
         "imageHelper": "The image of container",
         "imageValidation": "The image is required",
         "command": "Command",
-        "commandHelper": "Optional. Specifies the command running in the container, enter the string and ends a space to create a single command."
+        "commandHelper": "Optional. Specifies the command running in the container, types and ends with Enter to create a single command."
       },
       "conditionalBranches": {
         "title": "Conditional branches (Optional)",
@@ -165,7 +165,7 @@
       "nameHelper": "The schedule name",
       "scheduleHelper": "The schedule is expressed in the form of CronJob. If you are not familiar with it, you can use {crontabguru} to help define the schedule",
       "startingDeadlineSeconds": "Experiment expiration time",
-      "startingDeadlineSecondsHelper": "Set to ignore experiments that haven’t been running for a long time",
+      "startingDeadlineSecondsHelper": "Set to ignore experiments that haven't been running for a long time",
       "concurrencyPolicy": "Concurrency Policy",
       "concurrencyPolicyHelper": "Whether to allow experiments to run at the same time",
       "forbid": "Forbid",
@@ -292,7 +292,7 @@
     "durationHelper": "The supported formats of the duration are: ms / s / m / h.",
     "edit": "Edit",
     "ip": "IP address",
-    "isKVHelperText": "Type key:value and end with a space to generate a key/value pair",
+    "isKVHelperText": "Type key:value and end with Enter to generate a key/value pair.",
     "multiOptions": "Support mutiple options",
     "name": "Name",
     "noOptions": "No options",