@rancher/shell 2.0.1 → 3.0.0-rc.2

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>

package/components/form/ResourceQuota/Namespace.vue

@@ -64,7 +64,7 @@ export default {
         }
       };
 
-      this.$set(this.value, 'resourceQuota', resourceQuota);
+      this.value['resourceQuota'] = resourceQuota;
     }
   },
 };
@@ -84,7 +84,7 @@ export default {
     </div>
     <Row
       v-for="(limit, i) in editableLimits"
-      :key="project.id + i"
+      :key="i"
       :value="value.resourceQuota"
       :namespace="value"
       :mode="mode"
@@ -93,7 +93,7 @@ export default {
       :project-resource-quota-limits="projectResourceQuotaLimits"
       :default-resource-quota-limits="defaultResourceQuotaLimits"
       :namespace-resource-quota-limits="namespaceResourceQuotaLimits"
-      @input="update"
+      @update:value="update"
     />
   </div>
 </template>

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -163,7 +163,7 @@ export default {
         addSuffixSpace: false
       });
 
-      this.$emit('input', this.type, value);
+      this.$emit('update:value', this.type, value);
     }
   }
 };
@@ -184,7 +184,7 @@ export default {
       <PercentageBar
         v-clean-tooltip="tooltip"
         class="percentage-bar"
-        :value="percentageUsed"
+        :modelValue="percentageUsed"
         :slices="slices"
         :color-stops="{'100': '--primary'}"
       />
@@ -197,7 +197,7 @@ export default {
       :input-exponent="typeOption.inputExponent"
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
-      @input="update"
+      @update:value="update"
     />
   </div>
 </template>

package/components/form/ResourceQuota/Project.vue

@@ -26,9 +26,9 @@ export default {
   },
 
   data() {
-    this.$set(this.value, 'spec', this.value.spec || {});
-    this.$set(this.value.spec, 'namespaceDefaultResourceQuota', this.value.spec.namespaceDefaultResourceQuota || { limit: {} });
-    this.$set(this.value.spec, 'resourceQuota', this.value.spec.resourceQuota || { limit: {} });
+    this.value['spec'] = this.value.spec || {};
+    this.value.spec['namespaceDefaultResourceQuota'] = this.value.spec.namespaceDefaultResourceQuota || { limit: {} };
+    this.value.spec['resourceQuota'] = this.value.spec.resourceQuota || { limit: {} };
 
     return { typeValues: Object.keys(this.value.spec.resourceQuota.limit) };
   },
@@ -37,7 +37,7 @@ export default {
 
   methods: {
     updateType(i, type) {
-      this.$set(this.typeValues, i, type);
+      this.typeValues[i] = type;
     },
     remainingTypes(currentType) {
       return this.mappedTypes
@@ -63,7 +63,7 @@ export default {
       </div>
     </div>
     <ArrayList
-      v-model="typeValues"
+      v-model:value="typeValues"
       label="Resources"
       :add-label="t('resourceQuota.add.label')"
       :default-add-value="remainingTypes()[0] ? remainingTypes()[0].value : ''"
@@ -73,10 +73,11 @@ export default {
     >
       <template #columns="props">
         <Row
-          v-model="value"
+          :value="value"
           :mode="mode"
           :types="remainingTypes(typeValues[props.i])"
           :type="typeValues[props.i]"
+          @input="$emit('input', $event)"
           @type-change="updateType(props.i, $event)"
         />
       </template>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -1,114 +1,113 @@
-<script>
-import Select from '@shell/components/form/Select';
-import UnitInput from '@shell/components/form/UnitInput';
-import { ROW_COMPUTED } from './shared';
-import Vue from 'vue';
-
-export default {
-  components: { Select, UnitInput },
-
-  props: {
-    mode: {
-      type:     String,
-      required: true,
-    },
-    types: {
-      type:    Array,
-      default: () => []
-    },
-    type: {
-      type:    String,
-      default: ''
-    },
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    }
-  },
-
-  computed: {
-    ...ROW_COMPUTED,
-
-    resourceQuotaLimit: {
-      get() {
-        return this.value.spec.resourceQuota?.limit || {};
-      },
-    },
-
-    namespaceDefaultResourceQuotaLimit: {
-      get() {
-        return this.value.spec.namespaceDefaultResourceQuota?.limit || {};
-      },
-    }
-  },
-
-  methods: {
-    updateType(type) {
-      if (typeof this.value.spec.resourceQuota?.limit[this.type] !== 'undefined') {
-        this.$delete(this.value.spec.resourceQuota.limit, this.type);
-      }
-      if (typeof this.value.spec.namespaceDefaultResourceQuota?.limit[this.type] !== 'undefined') {
-        this.$delete(this.value.spec.namespaceDefaultResourceQuota.limit, this.type);
-      }
-
-      this.$emit('type-change', type);
-    },
-
-    updateQuotaLimit(prop, type, val) {
-      if (!this.value.spec[prop]) {
-        Vue.set(this.value.spec, prop, { limit: { } });
-      }
-
-      Vue.set(this.value.spec[prop].limit, type, val);
-    }
-  },
-};
-</script>
-<template>
-  <div
-    v-if="typeOption"
-    class="row"
-  >
-    <Select
-      class="mr-10"
-      :mode="mode"
-      :value="type"
-      :options="types"
-      data-testid="projectrow-type-input"
-      @input="updateType($event)"
-    />
-    <UnitInput
-      :value="resourceQuotaLimit[type]"
-      class="mr-10"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-project-quota-input"
-      @input="updateQuotaLimit('resourceQuota', type, $event)"
-    />
-    <UnitInput
-      :value="namespaceDefaultResourceQuotaLimit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-namespace-quota-input"
-      @input="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
-    />
-  </div>
-</template>
-
-<style lang='scss' scoped>
-  .row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-  }
-</style>
+<script>
+import Select from '@shell/components/form/Select';
+import UnitInput from '@shell/components/form/UnitInput';
+import { ROW_COMPUTED } from './shared';
+
+export default {
+  components: { Select, UnitInput },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    types: {
+      type:    Array,
+      default: () => []
+    },
+    type: {
+      type:    String,
+      default: ''
+    },
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  computed: {
+    ...ROW_COMPUTED,
+
+    resourceQuotaLimit: {
+      get() {
+        return this.value.spec.resourceQuota?.limit || {};
+      },
+    },
+
+    namespaceDefaultResourceQuotaLimit: {
+      get() {
+        return this.value.spec.namespaceDefaultResourceQuota?.limit || {};
+      },
+    }
+  },
+
+  methods: {
+    updateType(type) {
+      if (typeof this.value.spec.resourceQuota?.limit[this.type] !== 'undefined') {
+        delete this.value.spec.resourceQuota.limit[this.type];
+      }
+      if (typeof this.value.spec.namespaceDefaultResourceQuota?.limit[this.type] !== 'undefined') {
+        delete this.value.spec.namespaceDefaultResourceQuota.limit[this.type];
+      }
+
+      this.$emit('type-change', type);
+    },
+
+    updateQuotaLimit(prop, type, val) {
+      if (!this.value.spec[prop]) {
+        this.value.spec[prop] = { limit: { } };
+      }
+
+      this.value.spec[prop].limit[type] = val;
+    }
+  },
+};
+</script>
+<template>
+  <div
+    v-if="typeOption"
+    class="row"
+  >
+    <Select
+      :value="type"
+      class="mr-10"
+      :mode="mode"
+      :options="types"
+      data-testid="projectrow-type-input"
+      @update:value="updateType($event)"
+    />
+    <UnitInput
+      :value="resourceQuotaLimit[type]"
+      class="mr-10"
+      :mode="mode"
+      :placeholder="typeOption.placeholder"
+      :increment="typeOption.increment"
+      :input-exponent="typeOption.inputExponent"
+      :base-unit="typeOption.baseUnit"
+      :output-modifier="true"
+      data-testid="projectrow-project-quota-input"
+      @update:value="updateQuotaLimit('resourceQuota', type, $event)"
+    />
+    <UnitInput
+      :value="namespaceDefaultResourceQuotaLimit[type]"
+      :mode="mode"
+      :placeholder="typeOption.placeholder"
+      :increment="typeOption.increment"
+      :input-exponent="typeOption.inputExponent"
+      :base-unit="typeOption.baseUnit"
+      :output-modifier="true"
+      data-testid="projectrow-namespace-quota-input"
+      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+  }
+</style>

package/components/form/ResourceSelector.vue

@@ -82,8 +82,8 @@ export default {
       set(selectorExpressions) {
         const { matchLabels, matchExpressions } = simplify(selectorExpressions);
 
-        this.$set(this.value, 'matchLabels', matchLabels);
-        this.$set(this.value, 'matchExpressions', matchExpressions);
+        this.value['matchLabels'] = matchLabels;
+        this.value['matchExpressions'] = matchExpressions;
       }
     },
   },
@@ -113,7 +113,7 @@ export default {
     <div class="row">
       <div class="col span-12">
         <MatchExpressions
-          v-model="selectorExpressions"
+          v-model:value="selectorExpressions"
           :mode="mode"
           :show-remove="false"
           :type="type"

package/components/form/ResourceTabs/index.vue

@@ -83,7 +83,7 @@ export default {
     };
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.$store.dispatch('cluster/forgetType', EVENT);
   },