@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/form/NodeAffinity.vue

@@ -138,7 +138,7 @@ export default {
         out.requiredDuringSchedulingIgnoredDuringExecution = requiredDuringSchedulingIgnoredDuringExecution;
       }
 
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
 
     remove() {
@@ -148,9 +148,9 @@ export default {
 
     changePriority(term) {
       if (term.weight) {
-        this.$delete(term, 'weight');
+        delete term['weight'];
       } else {
-        this.$set(term, 'weight', 1);
+        term['weight'] = 1;
       }
       this.update();
     },
@@ -170,8 +170,8 @@ export default {
           expressionsMatching[expression.matching || 'matchExpressions'].push(expression);
         });
 
-        this.$set(row, 'matchFields', expressionsMatching.matchFields);
-        this.$set(row, 'matchExpressions', expressionsMatching.matchExpressions);
+        row['matchFields'] = expressionsMatching.matchFields;
+        row['matchExpressions'] = expressionsMatching.matchExpressions;
 
         this.update();
       }
@@ -188,11 +188,11 @@ export default {
 <template>
   <div
     class="row"
-    @input="queueUpdate"
+    @update:value="queueUpdate"
   >
     <div class="col span-12">
       <ArrayListGrouped
-        v-model="allSelectorTerms"
+        v-model:value="allSelectorTerms"
         class="mt-20"
         :mode="mode"
         :default-add-value="{matchExpressions:[]}"
@@ -208,7 +208,7 @@ export default {
                 :label="t('workload.scheduling.affinity.priority')"
                 :mode="mode"
                 :data-testid="`node-affinity-priority-index${props.i}`"
-                @input="(changePriority(props.row.value))"
+                @update:value="(changePriority(props.row.value))"
               />
             </div>
             <div
@@ -228,7 +228,6 @@ export default {
             </div>
           </div>
           <MatchExpressions
-            :key="rerenderNums"
             :value="matchingSelectorDisplay ? props.row.value : props.row.value.matchExpressions"
             :matching-selector-display="matchingSelectorDisplay"
             :mode="mode"
@@ -236,7 +235,7 @@ export default {
             :type="node"
             :show-remove="false"
             :data-testid="`node-affinity-expressions-index${props.i}`"
-            @input="(updateExpressions(props.row.value, $event))"
+            @update:value="(updateExpressions(props.row.value, $event))"
           />
         </template>
       </ArrayListGrouped>

package/components/form/NodeScheduling.vue

@@ -58,10 +58,10 @@ export default {
     }
 
     if (!nodeAffinity.requiredDuringSchedulingIgnoredDuringExecution) {
-      this.$set(nodeAffinity, 'requiredDuringSchedulingIgnoredDuringExecution', { nodeSelectorTerms: [] } );
+      nodeAffinity['requiredDuringSchedulingIgnoredDuringExecution'] = { nodeSelectorTerms: [] };
     }
     if (!nodeAffinity.preferredDuringSchedulingIgnoredDuringExecution) {
-      this.$set(nodeAffinity, 'preferredDuringSchedulingIgnoredDuringExecution', []);
+      nodeAffinity['preferredDuringSchedulingIgnoredDuringExecution'] = [];
     }
 
     return {
@@ -151,8 +151,8 @@ export default {
             }, { root: true });
 
             delete this.value.nodeSelector;
-            this.$set(this, 'nodeName', '');
-            this.$set(this, 'selectNode', null);
+            this['nodeName'] = '';
+            this['selectNode'] = null;
           }
         }
       },
@@ -165,7 +165,7 @@ export default {
   <div>
     <div class="row mb-20">
       <RadioGroup
-        v-model="selectNode"
+        v-model:value="selectNode"
         name="selectNode"
         :options="selectNodeOptions"
         :mode="mode"
@@ -176,7 +176,7 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledSelect
-            v-model="nodeName"
+            v-model:value="nodeName"
             :label="t('workload.scheduling.affinity.nodeName')"
             :options="nodes || []"
             :mode="mode"
@@ -189,7 +189,7 @@ export default {
     </template>
     <template v-else-if="selectNode === 'affinity'">
       <NodeAffinity
-        v-model="nodeAffinity"
+        v-model:value="nodeAffinity"
         :mode="mode"
         @input="update"
       />

package/components/form/NotificationSettings.vue

@@ -35,7 +35,7 @@ export default ({
           :mode="mode"
           :value="value.showMessage === 'true'"
           :label="t('notifications.loginError.showCheckboxLabel')"
-          @input="e=>$set(value, 'showMessage', e.toString())"
+          @update:value="value.showMessage = $event.toString()"
         />
       </div>
     </div>
@@ -44,7 +44,7 @@ export default ({
         <div class="row">
           <div class="col span-12">
             <LabeledInput
-              v-model="value.message"
+              v-model:value="value.message"
               :mode="mode"
               :disabled="value.showMessage === 'false'"
               :label="t('notifications.loginError.messageLabel')"

package/components/form/Password.vue

@@ -46,7 +46,7 @@ export default {
         return this.value;
       },
       set(val) {
-        this.$emit('input', val);
+        this.$emit('update:value', val);
       }
     },
     attributes() {
@@ -94,7 +94,7 @@ export default {
   <div class="password">
     <LabeledInput
       ref="input"
-      v-model="password"
+      v-model:value="password"
       v-bind="attributes"
       :type="isRandom || reveal ? 'text' : 'password'"
       :readonly="isRandom"

package/components/form/PodAffinity.vue

@@ -83,7 +83,7 @@ export default {
 
   data() {
     if (!this.value[this.field]) {
-      this.$set(this.value, this.field, {});
+      this.value[this.field] = {};
     }
     const { podAffinity = {}, podAntiAffinity = {} } = this.value[this.field];
     const allAffinityTerms = [...(podAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
@@ -281,7 +281,7 @@ export default {
         term.weight = this.defaultWeight;
       }
 
-      this.$set(this.allSelectorTerms, idx, clone(term));
+      this.allSelectorTerms[idx] = clone(term);
       this.queueUpdate();
     },
 
@@ -290,7 +290,7 @@ export default {
     },
 
     changeNamespaceMode(val, term, idx) {
-      this.$set(term, '_namespaceOption', val);
+      term['_namespaceOption'] = val;
 
       switch (val) {
       case NAMESPACE_SELECTION_OPTION_VALUES.POD:
@@ -314,8 +314,8 @@ export default {
         break;
 
       default:
-        this.$set(term, 'namespaces', []);
-        this.$set(term, '_namespaces', '');
+        term['namespaces'] = [];
+        term['_namespaces'] = '';
 
         if (term.namespaceSelector || term.namespaceSelector === null) {
           delete term.namespaceSelector;
@@ -324,7 +324,7 @@ export default {
         break;
       }
 
-      this.$set(this.allSelectorTerms, idx, term);
+      this.allSelectorTerms[idx] = term;
       this.queueUpdate();
     },
 
@@ -336,7 +336,7 @@ export default {
         nsArray = namespaces.split(',').map((ns) => ns.trim()).filter((ns) => ns?.length);
       }
 
-      this.$set(term, 'namespaces', nsArray);
+      term['namespaces'] = nsArray;
       this.queueUpdate();
     },
 
@@ -357,11 +357,11 @@ export default {
   <div
     :style="{'width':'100%'}"
     class="row"
-    @input="queueUpdate"
+    @update:value="queueUpdate"
   >
     <div class="col span-12">
       <ArrayListGrouped
-        v-model="allSelectorTerms"
+        v-model:value="allSelectorTerms"
         class="mt-20"
         :default-add-value="defaultAddValue"
         :mode="mode"
@@ -377,18 +377,17 @@ export default {
                 :value="props.row.value._anti ?t('workload.scheduling.affinity.antiAffinityOption') :t('workload.scheduling.affinity.affinityOption') "
                 :label="t('workload.scheduling.affinity.type')"
                 :data-testid="`pod-affinity-type-index${props.i}`"
-                @input="$set(props.row.value, '_anti',!props.row.value._anti)"
+                @update:value="$set(props.row.value, '_anti',!props.row.value._anti)"
               />
             </div>
             <div class="col span-6">
               <LabeledSelect
-                :key="priorityDisplay(props.row.value)"
                 :mode="mode"
                 :options="[t('workload.scheduling.affinity.preferred'),t('workload.scheduling.affinity.required')]"
                 :value="priorityDisplay(props.row.value)"
                 :label="t('workload.scheduling.affinity.priority')"
                 :data-testid="`pod-affinity-priority-index${props.i}`"
-                @input="changePriority(props.row.value, props.i)"
+                @update:value="changePriority(props.row.value, props.i)"
               />
             </div>
           </div>
@@ -400,7 +399,7 @@ export default {
               :mode="mode"
               :value="props.row.value._namespaceOption"
               :data-testid="`pod-affinity-namespacetype-index${props.i}`"
-              @input="changeNamespaceMode($event, props.row.value, props.i)"
+              @update:value="changeNamespaceMode($event, props.row.value, props.i)"
             />
           </div>
           <div
@@ -409,40 +408,39 @@ export default {
           >
             <LabeledSelect
               v-if="hasNamespaces && !forceInputNamespaceSelection"
-              v-model="props.row.value.namespaces"
+              v-model:value="props.row.value.namespaces"
               :mode="mode"
               :multiple="true"
               :taggable="true"
               :options="allNamespacesOptions"
               :label="labeledInputNamespaceLabel"
               :data-testid="`pod-affinity-namespace-select-index${props.i}`"
-              @input="updateNamespaces(props.row.value, props.row.value.namespaces)"
+              @update:value="updateNamespaces(props.row.value, props.row.value.namespaces)"
             />
             <LabeledInput
               v-else
-              v-model="props.row.value._namespaces"
+              v-model:value="props.row.value._namespaces"
               :mode="mode"
               :label="labeledInputNamespaceLabel"
               :placeholder="t('harvesterManager.affinity.namespaces.placeholder')"
               :data-testid="`pod-affinity-namespace-input-index${props.i}`"
-              @input="updateNamespaces(props.row.value, props.row.value._namespaces)"
+              @update:value="updateNamespaces(props.row.value, props.row.value._namespaces)"
             />
           </div>
           <MatchExpressions
-            :key="rerenderNums"
             :mode="mode"
             class=" col span-12 mt-20"
             :type="pod"
             :value="get(props.row.value, 'labelSelector.matchExpressions')"
             :show-remove="false"
             :data-testid="`pod-affinity-expressions-index${props.i}`"
-            @input="e=>updateLabelSelector(e, props)"
+            @update:value="e=>updateLabelSelector(e, props)"
           />
           <div class="row mt-20">
             <div class="col span-9">
               <LabeledSelect
                 v-if="hasNodes"
-                v-model="props.row.value.topologyKey"
+                v-model:value="props.row.value.topologyKey"
                 :taggable="true"
                 :searchable="true"
                 :close-on-select="false"
@@ -454,17 +452,17 @@ export default {
                 :disabled="mode==='view'"
                 :loading="loading"
                 :data-testid="`pod-affinity-topology-select-index${props.i}`"
-                @input="update"
+                @update:value="update"
               />
               <LabeledInput
                 v-else
-                v-model="props.row.value.topologyKey"
+                v-model:value="props.row.value.topologyKey"
                 :mode="mode"
                 :label="t('workload.scheduling.affinity.topologyKey.label')"
                 :placeholder="topologyKeyPlaceholder"
                 required
                 :data-testid="`pod-affinity-topology-input-index${props.i}`"
-                @input="update"
+                @update:value="update"
               />
             </div>
             <div

package/components/form/PodSecurity.vue

@@ -55,7 +55,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <RadioGroup
-          v-model="shareProcessNamespace"
+          v-model:value="shareProcessNamespace"
           name="shareProcessNamespace"
           :label="t('workload.container.security.shareProcessNamespace')"
           :labels="['No', 'Yes']"
@@ -65,7 +65,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="runasNonRoot"
+          v-model:value="runasNonRoot"
           name="runasNonRoot"
           :label="t('workload.container.security.runAsNonRoot')"
           :options="[false, true]"
@@ -102,7 +102,7 @@ export default {
           <t k="workload.container.security.supplementalGroups" />
         </h5>
         <ArrayList
-          v-model="supplementalGroups"
+          v-model:value="supplementalGroups"
           :add-label="t('workload.container.security.addGroupIDs')"
           :mode="mode"
         />
@@ -126,7 +126,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <RadioGroup
-          v-model="hostIPC"
+          v-model:value="hostIPC"
           name="hostIPC"
           :label="t('workload.container.security.hostIPC')"
           :labels="['No', 'Yes']"
@@ -136,7 +136,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="hostPID"
+          v-model:value="hostPID"
           name="hostPID"
           :label="t('workload.container.security.hostPID')"
           :labels="['No', 'Yes']"
@@ -151,7 +151,7 @@ export default {
     <div class="row">
       <div class="col span-12">
         <KeyValue
-          v-model="sysctls"
+          v-model:value="sysctls"
           :title="t('workload.container.security.sysctls')"
           :key-label="t('workload.container.security.sysctlsKey')"
           :mode="mode"

package/components/form/Ports.vue

@@ -98,7 +98,7 @@ export default {
           out.push(value);
         }
       }
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     }
   },
 };
@@ -207,18 +207,18 @@ export default {
             <span v-if="isView">{{ row.expose ? "Yes" : "No" }}</span>
             <Checkbox
               v-else
-              v-model="row.expose"
+              v-model:value="row.expose"
               type="checkbox"
-              @input="queueUpdate"
+              @update:value="queueUpdate"
             />
           </td>
           <td class="hostPort">
             <span v-if="isView">{{ row.hostPort ? "Yes" : "No" }}</span>
             <Checkbox
               v-else
-              v-model="row.hostPort"
+              v-model:value="row.hostPort"
               type="checkbox"
-              @input="queueUpdate"
+              @update:value="queueUpdate"
             />
           </td>
           <td

package/components/form/Probe.vue

@@ -111,7 +111,7 @@ export default {
       const probe = this.probe;
 
       if ( this.isNone ) {
-        this.$emit('input', null);
+        this.$emit('update:value', null);
 
         return;
       }
@@ -136,7 +136,7 @@ export default {
         break;
       }
 
-      this.$emit('input', probe);
+      this.$emit('update:value', probe);
     }
   },
 };
@@ -160,12 +160,12 @@ export default {
         class="col span-11-of-23"
       >
         <LabeledSelect
-          v-model="kind"
+          v-model:value="kind"
           :mode="mode"
           :label="t('probe.type.label')"
           :options="kindOptions"
           :placeholder="t('probe.type.placeholder')"
-          @input="update"
+          @update:value="update"
         />
 
         <div
@@ -186,18 +186,18 @@ export default {
             :mode="mode"
             :label="t('probe.httpGet.port.label')"
             :placeholder="t('probe.httpGet.port.placeholder')"
-            @input="update"
+            @update:value="update"
           />
 
           <div class="spacer-small" />
 
           <div data-testid="input-probe-path">
             <LabeledInput
-              v-model="httpGet.path"
+              v-model:value="httpGet.path"
               :mode="mode"
               :label="t('probe.httpGet.path.label')"
               :placeholder="t('probe.httpGet.path.placeholder')"
-              @input="update"
+              @update:value="update"
             />
           </div>
         </div>
@@ -215,7 +215,7 @@ export default {
             :mode="mode"
             :label="t('probe.httpGet.port.label')"
             :placeholder="t('probe.httpGet.port.placeholderDeux')"
-            @input="update"
+            @update:value="update"
           />
           <div class="spacer-small" />
         </div>
@@ -227,10 +227,10 @@ export default {
         >
           <div class="col span-12">
             <ShellInput
-              v-model="exec.command"
+              v-model:value="exec.command"
               :label="t('probe.command.label')"
               :placeholder="t('probe.command.placeholder')"
-              @input="update"
+              @update:value="update"
             />
           </div>
           <div class="spacer-small" />
@@ -256,13 +256,13 @@ export default {
             class="col span-4"
           >
             <UnitInput
-              v-model="probe.periodSeconds"
+              v-model:value="probe.periodSeconds"
               :mode="mode"
               :label="t('probe.checkInterval.label')"
               min="1"
               :suffix="t('suffix.sec')"
               :placeholder="t('probe.checkInterval.placeholder')"
-              @input="update"
+              @update:value="update"
             />
           </div>
           <div
@@ -270,13 +270,13 @@ export default {
             class="col span-4"
           >
             <UnitInput
-              v-model="probe.initialDelaySeconds"
+              v-model:value="probe.initialDelaySeconds"
               :mode="mode"
               :suffix="t('suffix.sec')"
               :label="t('probe.initialDelay.label')"
               min="0"
               :placeholder="t('probe.initialDelay.placeholder')"
-              @input="update"
+              @update:value="update"
             />
           </div>
           <div
@@ -284,13 +284,13 @@ export default {
             class="col span-4"
           >
             <UnitInput
-              v-model="probe.timeoutSeconds"
+              v-model:value="probe.timeoutSeconds"
               min="0"
               :mode="mode"
               :suffix="t('suffix.sec')"
               :label="t('probe.timeout.label')"
               :placeholder="t('probe.timeout.placeholder')"
-              @input="update"
+              @update:value="update"
             />
           </div>
         </div>
@@ -309,7 +309,7 @@ export default {
               :mode="mode"
               :label="t('probe.successThreshold.label')"
               :placeholder="t('probe.successThreshold.placeholder')"
-              @input="update"
+              @update:value="update"
             />
           </div>
           <div
@@ -323,7 +323,7 @@ export default {
               :mode="mode"
               :label="t('probe.failureThreshold.label')"
               :placeholder="t('probe.failureThreshold.placeholder')"
-              @input="update"
+              @update:value="update"
             />
           </div>
         </div>
@@ -334,7 +334,7 @@ export default {
           <div class="row">
             <div class="col span-12">
               <KeyValue
-                v-model="httpGet.httpHeaders"
+                v-model:value="httpGet.httpHeaders"
                 key-name="name"
                 :mode="mode"
                 :as-map="false"
@@ -363,7 +363,7 @@ export default {
   .title {
     margin-bottom: 10px;
   }
-  ::v-deep .labeled-select {
+  :deep() .labeled-select {
     height: auto;
   }
 

package/components/form/ProjectMemberEditor.vue

@@ -192,7 +192,7 @@ export default {
     },
     customPermissionsUpdate() {
       return this.customPermissions.reduce((acc, customPermissionsItem) => {
-        const lockedExist = this.roleTemplates.find((roleTemplateItem) => roleTemplateItem.displayName === customPermissionsItem.label);
+        const lockedExist = this.roleTemplates.find((roleTemplateItem) => roleTemplateItem.id === customPermissionsItem.key);
 
         if (lockedExist.locked) {
           customPermissionsItem['locked'] = true;
@@ -217,13 +217,13 @@ export default {
   },
   methods: {
     onAdd(principalId) {
-      this.$set(this.value, 'principalId', principalId);
+      this.value['principalId'] = principalId;
     },
 
     setRoleTemplateIds(permissionGroup) {
       const roleTemplateIds = this.getRoleTemplateIds(permissionGroup);
 
-      this.$set(this.value, 'roleTemplateIds', roleTemplateIds);
+      this.value['roleTemplateIds'] = roleTemplateIds;
     },
 
     getRoleTemplateIds(permissionGroup) {
@@ -284,7 +284,7 @@ export default {
       </template>
       <template v-slot:body>
         <RadioGroup
-          v-model="value.permissionGroup"
+          v-model:value="value.permissionGroup"
           :options="options"
           name="permission-group"
         />
@@ -294,11 +294,11 @@ export default {
           :class="{'two-column': useTwoColumnsForCustom}"
         >
           <div
-            v-for="permission in customPermissionsUpdate"
-            :key="permission.key"
+            v-for="(permission, i) in customPermissionsUpdate"
+            :key="i"
           >
             <Checkbox
-              v-model="permission.value"
+              v-model:value="permission.value"
               :disabled="permission.locked"
               class="mb-5"
               :label="permission.label"
@@ -317,7 +317,7 @@ export default {
 <style lang="scss" scoped>
 $detailSize: 11px;
 
-::v-deep .type-description {
+:deep() .type-description {
     font-size: $detailSize;
 }
 
@@ -332,7 +332,7 @@ label.radio {
     grid-template-columns: 1fr 1fr;
   }
 
-  ::v-deep .checkbox-label {
+  :deep() .checkbox-label {
     margin-right: 0;
   }
 }

package/components/form/ResourceLabeledSelect.vue

@@ -126,11 +126,17 @@ export default defineComponent({
 
   computed: {
     labelSelectAttributes() {
+      // This component is a wrapper for LabelSelect, so pass through everything
+      const allAttrs = {
+        ...this.$attrs, // Attributes (other than props)
+        ...this.$props, // Attributes that are props
+      };
+
       return this.paginate ? {
-        ...this.$attrs,
+        ...allAttrs,
         ...this.paginatedResourceSettings?.labelSelectOptions || {}
       } : {
-        ...this.$attrs,
+        ...allAttrs,
         ...this.allResourcesSettings?.labelSelectOptions || {}
       };
     },
@@ -156,7 +162,9 @@ export default defineComponent({
       }
 
       const { filter } = opts;
-      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({
+        field: 'metadata.name', value: filter, exact: false
+      })] : [];
       const defaultOptions: LabelSelectPaginationFunctionOptions = {
         opts,
         filters,
@@ -182,6 +190,5 @@ export default defineComponent({
     :loading="$fetchState.pending"
     :options="allOfType"
     :paginate="paginateType"
-    v-on="$listeners"
   />
 </template>