@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/form/SelectOrCreateAuthSecret.vue

@@ -165,27 +165,12 @@ export default {
       this.allCloudCreds = [];
     }
 
-    let selected = this.preSelect?.selected || AUTH_TYPE._NONE;
-
     if ( !this.value ) {
       this.publicKey = this.preSelect?.publicKey || '';
       this.privateKey = this.preSelect?.privateKey || '';
     }
 
-    if ( this.value ) {
-      if ( typeof this.value === 'object' ) {
-        selected = `${ this.value.namespace }/${ this.value.name }`;
-      } else if ( this.value.includes('/') || this.value.includes(':') ) {
-        selected = this.value;
-      } else if ( this.namespace ) {
-        selected = `${ this.namespace }/${ this.value }`;
-      } else {
-        selected = this.value;
-      }
-    }
-
-    this.selected = selected;
-
+    this.updateSelectedFromValue();
     this.update();
   },
 
@@ -381,6 +366,7 @@ export default {
     selected:   'update',
     publicKey:  'updateKeyVal',
     privateKey: 'updateKeyVal',
+    value:      'updateSelectedFromValue',
 
     async namespace(ns) {
       if (ns && !this.selected.startsWith(`${ ns }/`)) {
@@ -407,6 +393,23 @@ export default {
   },
 
   methods: {
+    updateSelectedFromValue() {
+      let selected = this.preSelect?.selected || AUTH_TYPE._NONE;
+
+      if ( this.value ) {
+        if ( typeof this.value === 'object' ) {
+          selected = `${ this.value.namespace }/${ this.value.name }`;
+        } else if ( this.value.includes('/') || this.value.includes(':') ) {
+          selected = this.value;
+        } else if ( this.namespace ) {
+          selected = `${ this.namespace }/${ this.value }`;
+        } else {
+          selected = this.value;
+        }
+      }
+
+      this.selected = selected;
+    },
     async filterSecretsByApi() {
       const findPageArgs = {
         // Of type ActionFindPageArgs
@@ -457,22 +460,22 @@ export default {
 
     update() {
       if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._NONE].includes(this.selected))) {
-        this.$emit('input', null);
+        this.$emit('update:value', null);
       } else if ( this.selected.includes(':') ) {
         // Cloud creds
-        this.$emit('input', this.selected);
+        this.$emit('update:value', this.selected);
       } else {
         const split = this.selected.split('/');
 
         if ( this.limitToNamespace ) {
-          this.$emit('input', split[1]);
+          this.$emit('update:value', split[1]);
         } else {
           const out = {
             namespace: split[0],
             name:      split[1]
           };
 
-          this.$emit('input', out);
+          this.$emit('update:value', out);
         }
       }
 
@@ -549,7 +552,7 @@ export default {
     >
       <div :class="firstCol">
         <LabeledSelect
-          v-model="selected"
+          v-model:value="selected"
           data-testid="auth-secret-select"
           :mode="mode"
           :label-key="labelKey"
@@ -561,7 +564,7 @@ export default {
       <template v-if="selected === SSH">
         <div :class="moreCols">
           <LabeledInput
-            v-model="publicKey"
+            v-model:value="publicKey"
             data-testid="auth-secret-ssh-public-key"
             :mode="mode"
             type="multiline"
@@ -570,7 +573,7 @@ export default {
         </div>
         <div :class="moreCols">
           <LabeledInput
-            v-model="privateKey"
+            v-model:value="privateKey"
             data-testid="auth-secret-ssh-private-key"
             :mode="mode"
             type="multiline"
@@ -581,7 +584,7 @@ export default {
       <template v-else-if="selected === BASIC">
         <div :class="moreCols">
           <LabeledInput
-            v-model="publicKey"
+            v-model:value="publicKey"
             data-testid="auth-secret-basic-username"
             :mode="mode"
             label-key="selectOrCreateAuthSecret.basic.username"
@@ -589,7 +592,7 @@ export default {
         </div>
         <div :class="moreCols">
           <LabeledInput
-            v-model="privateKey"
+            v-model:value="privateKey"
             data-testid="auth-secret-basic-password"
             :mode="mode"
             type="password"
@@ -600,7 +603,7 @@ export default {
       <template v-else-if="selected === S3">
         <div :class="moreCols">
           <LabeledInput
-            v-model="publicKey"
+            v-model:value="publicKey"
             data-testid="auth-secret-s3-public-key"
             :mode="mode"
             label-key="selectOrCreateAuthSecret.s3.accessKey"
@@ -608,7 +611,7 @@ export default {
         </div>
         <div :class="moreCols">
           <LabeledInput
-            v-model="privateKey"
+            v-model:value="privateKey"
             data-testid="auth-secret-s3-private-key"
             :mode="mode"
             type="password"

package/components/form/ServiceNameSelect.vue

@@ -85,18 +85,21 @@ export default {
 
     serviceName() {
       return this.reduce(this.selected);
-    }
+    },
 
+    canPaginate() {
+      return false;
+    },
   },
 
   methods: {
     changeSelected() {
-      this.$emit('input', this.serviceName);
+      this.$emit('update:value', this.serviceName);
     },
 
     clearSearch(event) {
       this.selected = '';
-      this.$emit('input', null);
+      this.$emit('update:value', null);
 
       event.preventDefault();
     },
@@ -123,7 +126,7 @@ export default {
     </div>
     <div class="row span-6">
       <LabeledSelect
-        v-model="selected"
+        v-model:value="selected"
         :label="selectLabel"
         class="mr-10"
         :class="{ 'in-input': !isView }"
@@ -139,7 +142,7 @@ export default {
         :placement="$attrs.placement ? $attrs.placement : null"
         :v-bind="$attrs"
         :loading="loading"
-        @input="changeSelected"
+        @update:value="changeSelected"
       />
       <button
         v-if="!isView"

package/components/form/ServicePorts.vue

@@ -114,7 +114,7 @@ export default {
         return;
       }
 
-      this.$emit('input', this.rows);
+      this.$emit('update:value', this.rows);
     }
   },
 };
@@ -209,9 +209,9 @@ export default {
           <span v-if="isView">{{ row.protocol }}</span>
           <Select
             v-else
-            v-model="row.protocol"
+            v-model:value="row.protocol"
             :options="protocolOptions"
-            @input="queueUpdate"
+            @update:value="queueUpdate"
           />
         </div>
         <div class="target-port">
@@ -317,7 +317,7 @@ export default {
       height: 100%;
     }
 
-    .port-protocol ::v-deep {
+    .port-protocol :deep() {
       .unlabeled-select {
         .v-select.inline {
           margin-top: 2px;

package/components/form/ShellInput.vue

@@ -44,7 +44,7 @@ export default {
       if ( userValue ) {
         out = userValue.match(/('[^']+')|("[^"]+")|\S+/g).map((string) => string.replace(/^'|'$|^"|"$/g, ''));
       }
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
   }
 };
@@ -82,8 +82,8 @@ export function unparse(xs) {
 
 <template>
   <LabeledInput
-    v-model="userValue"
+    v-model:value="userValue"
     v-bind="$attrs"
-    @input="update($event)"
+    @update:value="update($event)"
   />
 </template>

package/components/form/SimpleSecretSelector.vue

@@ -186,7 +186,7 @@ export default {
   <div class="secret-selector show-key-selector">
     <div class="input-container">
       <ResourceLabeledSelect
-        v-model="name"
+        v-model:value="name"
         class="col span-6"
         :disabled="!isView && disabled"
         :loading="$fetchState.pending"
@@ -198,7 +198,7 @@ export default {
         @selecting="updateSecretName"
       />
       <LabeledSelect
-        v-model="key"
+        v-model:value="key"
         class="col span-6"
         :disabled="isKeyDisabled"
         :options="keys"

package/components/form/Taints.vue

@@ -3,10 +3,10 @@ import KeyValue from '@shell/components/form/KeyValue';
 import { _VIEW } from '@shell/config/query-params';
 import Select from '@shell/components/form/Select';
 
-const EFFECT_VALUES = {
-  NO_SCHEDULE:        'NoSchedule',
-  PREFER_NO_SCHEDULE: 'PreferNoSchedule',
-  NO_EXECUTE:         'NoExecute',
+const DEFAULT_EFFECT_VALUES = {
+  NoSchedule:       'NoSchedule',
+  PreferNoSchedule: 'PreferNoSchedule',
+  NoExecute:        'NoExecute',
 };
 
 export default {
@@ -24,11 +24,15 @@ export default {
     disabled: {
       default: false,
       type:    Boolean
+    },
+    effectValues: {
+      type:    Object,
+      default: () => DEFAULT_EFFECT_VALUES
     }
   },
 
   data() {
-    return { effectOptions: Object.values(EFFECT_VALUES).map((v) => ({ label: v, value: v })) };
+    return { effectOptions: Object.keys(this.effectValues).map((k) => ({ label: this.effectValues[k], value: k })) };
   },
 
   computed: {
@@ -38,12 +42,12 @@ export default {
       },
 
       set(localValue) {
-        this.$emit('input', localValue);
+        this.$emit('update:value', localValue);
       }
     },
 
     defaultAddData() {
-      return { effect: EFFECT_VALUES.NO_SCHEDULE };
+      return { effect: this.effectOptions[0].value };
     }
   }
 };
@@ -52,7 +56,8 @@ export default {
 <template>
   <div class="taints">
     <KeyValue
-      v-model="localValue"
+      :value="value"
+      data-testid="taints-keyvalue"
       :title="t('tableHeaders.taints')"
       :mode="mode"
       :as-map="false"
@@ -64,18 +69,20 @@ export default {
       :preserve-keys="['effect']"
       :add-label="t('labels.addTaint')"
       :disabled="disabled"
+      @update:value="$emit('input', $event)"
     >
       <template #label:effect>
         {{ t('tableHeaders.effect') }}
       </template>
 
-      <template #col:effect="{row, queueUpdate}">
+      <template #col:effect="{row, queueUpdate, i}">
         <Select
-          v-model="row.effect"
+          v-model:value="row.effect"
+          :data-testid="`taints-effect-row-${i}`"
           :options="effectOptions"
           :disabled="disabled"
           class="compact-select"
-          @input="queueUpdate"
+          @update:value="queueUpdate"
         />
       </template>
     </KeyValue>

package/components/form/Tolerations.vue

@@ -159,7 +159,7 @@ export default {
         return newRule;
       });
 
-      this.$emit('input', rules);
+      this.$emit('update:value', rules);
     },
 
     addToleration() {
@@ -193,26 +193,26 @@ export default {
     </div>
     <div
       v-for="(rule, index) in rules"
-      :key="rule.vKey"
+      :key="index"
       class="rule"
     >
       <div class="col">
         <LabeledInput
-          v-model="rule.key"
+          v-model:value="rule.key"
           :mode="mode"
           :data-testid="`toleration-key-index${ index }`"
           class="height-adjust-input"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div class="col">
         <Select
           id="operator"
-          v-model="rule.operator"
+          v-model:value="rule.operator"
           :options="operatorOpts"
           :mode="mode"
           :data-testid="`toleration-operator-index${ index }`"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <template v-if="rule.operator==='Exists'">
@@ -228,32 +228,32 @@ export default {
       <template v-else>
         <div class="col">
           <LabeledInput
-            v-model="rule.value"
+            v-model:value="rule.value"
             :mode="mode"
             :data-testid="`toleration-value-index${ index }`"
             class="height-adjust-input"
-            @input="update"
+            @update:value="update"
           />
         </div>
       </template>
       <div class="col">
         <Select
-          v-model="rule.effect"
+          v-model:value="rule.effect"
           :options="effectOpts"
           :mode="mode"
           :data-testid="`toleration-effect-index${ index }`"
-          @input="e=>updateEffect(e, rule)"
+          @update:value="e=>updateEffect(e, rule)"
         />
       </div>
       <div class="col">
         <UnitInput
-          v-model="rule.tolerationSeconds"
+          v-model:value="rule.tolerationSeconds"
           :disabled="rule.effect !== 'NoExecute'"
           :mode="mode"
           suffix="Seconds"
           :data-testid="`toleration-seconds-index${ index }`"
           class="height-adjust-input"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div class="col remove">

package/components/form/UnitInput.vue

@@ -202,7 +202,7 @@ export default {
         out = this.unit ? parseSi(`${ out }${ this.unit }`) : parseInt(out);
       }
 
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
   }
 };

package/components/form/ValueFromResource.vue

@@ -214,7 +214,7 @@ export default {
     updateRow() {
       if (!this.name?.length && !this.refName?.length) {
         if (this.type !== 'fieldRef') {
-          this.$emit('input', null);
+          this.$emit('update:value', null);
 
           return;
         }
@@ -251,7 +251,7 @@ export default {
         out.prefix = this.name;
         out[this.type] = { name: this.refName, optional: false };
       }
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
     get
   }
@@ -262,7 +262,7 @@ export default {
   <div class="var-row">
     <div class="type">
       <LabeledSelect
-        v-model="type"
+        v-model:value="type"
         :mode="mode"
         :multiple="false"
         :options="typeOpts"
@@ -270,17 +270,17 @@ export default {
         :searchable="false"
         :reduce="e=>e.value"
         :label="t('workload.container.command.fromResource.type')"
-        @input="updateRow"
+        @update:value="updateRow"
       />
     </div>
 
     <div class="name">
       <LabeledInput
-        v-model="name"
+        v-model:value="name"
         :label="nameLabel"
         :placeholder="t('workload.container.command.fromResource.name.placeholder')"
         :mode="mode"
-        @input="updateRow"
+        @update:value="updateRow"
       />
     </div>
 
@@ -289,18 +289,18 @@ export default {
       class="single-value"
     >
       <LabeledInput
-        v-model="valStr"
+        v-model:value="valStr"
         :label="t('workload.container.command.fromResource.value.label')"
         :placeholder="t('workload.container.command.fromResource.value.placeholder')"
         :mode="mode"
-        @input="updateRow"
+        @update:value="updateRow"
       />
     </div>
 
     <template v-else-if="needsSource">
       <div :class="{'single-value': type === 'configMapRef' || type === 'secretRef'}">
         <LabeledSelect
-          v-model="referenced"
+          v-model:value="referenced"
           :options="sourceOptions"
           :multiple="false"
           :get-option-label="opt=>get(opt, 'metadata.name') || opt"
@@ -312,14 +312,14 @@ export default {
       </div>
       <div v-if="type!=='secretRef' && type!== 'configMapRef'">
         <LabeledSelect
-          v-model="key"
+          v-model:value="key"
           :multiple="false"
           :options="keys"
           :mode="mode"
           option-label="label"
           :label="t('workload.container.command.fromResource.key.label')"
           :loading="loading"
-          @input="updateRow"
+          @update:value="updateRow"
         />
       </div>
     </template>
@@ -327,23 +327,23 @@ export default {
     <template v-else-if="type==='resourceFieldRef'">
       <div>
         <LabeledInput
-          v-model="refName"
+          v-model:value="refName"
           :label="t('workload.container.command.fromResource.containerName')"
           :placeholder="t('workload.container.command.fromResource.source.placeholder')"
           :mode="mode"
-          @input="updateRow"
+          @update:value="updateRow"
         />
       </div>
       <div>
         <LabeledSelect
-          v-model="key"
+          v-model:value="key"
           :label="t('workload.container.command.fromResource.key.label')"
           :multiple="false"
           :options="resourceKeyOpts"
           :mode="mode"
           :searchable="false"
           :placeholder="t('workload.container.command.fromResource.key.placeholder', null, true)"
-          @input="updateRow"
+          @update:value="updateRow"
         />
       </div>
     </template>
@@ -351,11 +351,11 @@ export default {
     <template v-else>
       <div class="single-value">
         <LabeledInput
-          v-model="fieldPath"
+          v-model:value="fieldPath"
           :placeholder="t('workload.container.command.fromResource.key.placeholder', null, true)"
           :label="t('workload.container.command.fromResource.key.label')"
           :mode="mode"
-          @input="updateRow"
+          @update:value="updateRow"
         />
       </div>
     </template>