update all instances of LabeledInput using v-model.number to use v-mo…

…del:value.number (#11902) * update all instances of LabeledInput using v-model.number * add probe http headers unit test * add hookoption test * remove codemirror focus change
rancher · Sep 19, 2024 · 5607114 · 5607114
1 parent 3fde3d5
commit 5607114
Show file tree

Hide file tree

Showing 28 changed files with 101 additions and 381 deletions.
diff --git a/shell/components/CodeMirror.vue b/shell/components/CodeMirror.vue
@@ -105,7 +105,6 @@ export default {
   },
 
   methods: {
-
     focus() {
       if ( this.$refs.codeMirrorRef ) {
         this.$refs.codeMirrorRef.codemirror.focus();

diff --git a/shell/components/form/HealthCheck.vue b/shell/components/form/HealthCheck.vue
@@ -52,7 +52,7 @@ export default {
           :mode="mode"
           :label="t('workload.container.healthCheck.readinessProbe')"
           :description="t('workload.container.healthCheck.readinessTip')"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -66,7 +66,7 @@ export default {
           :mode="mode"
           :label="t('workload.container.healthCheck.livenessProbe')"
           :description="t('workload.container.healthCheck.livenessTip')"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -79,7 +79,7 @@ export default {
         :mode="mode"
         :label="t('workload.container.healthCheck.startupProbe')"
         :description="t('workload.container.healthCheck.startupTip')"
-        @input="update"
+        @update:value="update"
       />
     </div>
   </div>

diff --git a/shell/components/form/HookOption.vue b/shell/components/form/HookOption.vue
@@ -164,7 +164,7 @@ export default {
             :mode="mode"
           />
           <LabeledInput
-            v-model.number="value.httpGet.port"
+            v-model:value.number="value.httpGet.port"
             type="number"
             :label="t('workload.container.lifecycleHook.httpGet.port.label')"
             :placeholder="t('workload.container.lifecycleHook.httpGet.port.placeholder')"
@@ -186,24 +186,25 @@ export default {
         v-for="(header, index) in value.httpGet.httpHeaders"
         :key="index"
         class="var-row"
+        data-testid="hookoption-header-row"
       >
-        <template @update:value="update">
-          <LabeledInput
-            v-model:value="value.httpGet.httpHeaders[index].name"
-            :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
-            :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
-            class="single-value"
-            :mode="mode"
-            required
-          />
-          <LabeledInput
-            v-model:value="value.httpGet.httpHeaders[index].value"
-            :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
-            :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
-            class="single-value"
-            :mode="mode"
-          />
-        </template>
+        <LabeledInput
+          v-model:value="value.httpGet.httpHeaders[index].name"
+          :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
+          :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
+          class="single-value"
+          :mode="mode"
+          required
+          @update:value="update"
+        />
+        <LabeledInput
+          v-model:value="value.httpGet.httpHeaders[index].value"
+          :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
+          :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
+          class="single-value"
+          :mode="mode"
+          @update:value="update"
+        />
         <div class="remove">
           <button
             v-if="!isView"
@@ -223,6 +224,7 @@ export default {
           type="button"
           class="btn role-link mb-20"
           :disabled="mode === 'view'"
+          data-testid="hookoption-add-header-button"
           @click.stop="addHeader"
         >
           Add Header

diff --git a/shell/components/form/NodeAffinity.vue b/shell/components/form/NodeAffinity.vue
@@ -218,14 +218,15 @@ export default {
               class="col span-3"
             >
               <LabeledInput
-                v-model.number="props.row.value.weight"
+                v-model:value.number="props.row.value.weight"
                 :mode="mode"
                 type="number"
                 min="1"
                 max="100"
                 :label="t('workload.scheduling.affinity.weight.label')"
                 :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
                 :data-testid="`node-affinity-weight-index${props.i}`"
+                @update:value="update"
               />
             </div>
           </div>

diff --git a/shell/components/form/PodAffinity.vue b/shell/components/form/PodAffinity.vue
@@ -472,14 +472,15 @@ export default {
               class="col span-3"
             >
               <LabeledInput
-                v-model.number="props.row.value.weight"
+                v-model:value.number="props.row.value.weight"
                 :mode="mode"
                 type="number"
                 min="1"
                 max="100"
                 :label="t('workload.scheduling.affinity.weight.label')"
                 :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
                 :data-testid="`pod-affinity-weight-index${props.i}`"
+                @update:value="update"
               />
             </div>
           </div>

diff --git a/shell/components/form/PodSecurity.vue b/shell/components/form/PodSecurity.vue
diff --git a/shell/components/form/Probe.vue b/shell/components/form/Probe.vue
@@ -181,7 +181,7 @@ export default {
           data-testid="input-probe-port"
         >
           <LabeledInput
-            v-model.number="httpGet.port"
+            v-model:value.number="httpGet.port"
             type="number"
             min="1"
             max="65535"
@@ -210,7 +210,7 @@ export default {
           data-testid="input-probe-socket"
         >
           <LabeledInput
-            v-model.number="tcpSocket.port"
+            v-model:value.number="tcpSocket.port"
             type="number"
             min="1"
             max="65535"
@@ -305,7 +305,7 @@ export default {
             class="col span-6"
           >
             <LabeledInput
-              v-model.number="probe.successThreshold"
+              v-model:value.number="probe.successThreshold"
               type="number"
               min="1"
               :mode="mode"
@@ -319,7 +319,7 @@ export default {
             class="col span-6"
           >
             <LabeledInput
-              v-model.number="probe.failureThreshold"
+              v-model:value.number="probe.failureThreshold"
               type="number"
               min="1"
               :mode="mode"
@@ -337,6 +337,7 @@ export default {
             <div class="col span-12">
               <KeyValue
                 v-model:value="httpGet.httpHeaders"
+                data-testid="input-probe-http-headers"
                 key-name="name"
                 :mode="mode"
                 :as-map="false"
@@ -345,6 +346,7 @@ export default {
                 :key-label="t('generic.name')"
                 :value-label="t('generic.value')"
                 :add-label="t('generic.add')"
+                @update:value="update"
               >
                 <template #title>
                   <h3>

diff --git a/shell/components/form/Security.vue b/shell/components/form/Security.vue
@@ -200,7 +200,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model.number="runAsUser"
+          v-model:value.number="runAsUser"
           :label="t('workload.container.security.runAsUser')"
           :mode="mode"
           @update:value="update"

diff --git a/shell/components/form/WorkloadPorts.vue b/shell/components/form/WorkloadPorts.vue
@@ -304,7 +304,7 @@ export default {
 
       <div class="port">
         <LabeledInput
-          v-model.number="row.containerPort"
+          v-model:value.number="row.containerPort"
           :mode="mode"
           type="number"
           min="1"
@@ -333,7 +333,7 @@ export default {
       >
         <LabeledInput
           ref="port"
-          v-model.number="row.hostPort"
+          v-model:value.number="row.hostPort"
           :mode="mode"
           type="number"
           min="1"
@@ -375,7 +375,7 @@ export default {
       <div v-if="row._serviceType === 'LoadBalancer' || row._serviceType === 'NodePort'">
         <LabeledInput
           ref="port"
-          v-model.number="row._listeningPort"
+          v-model:value.number="row._listeningPort"
           type="number"
           :mode="mode"
           :label="t('workload.container.ports.listeningPort')"