@rancher/shell 2.0.1 → 3.0.0-rc.2

package/edit/resources.cattle.io.backup.vue

@@ -85,7 +85,7 @@ export default {
 
   data() {
     if (!this.value.spec) {
-      this.$set(this.value, 'spec', { retentionCount: 10 });
+      this.value['spec'] = { retentionCount: 10 };
     }
     let s3 = {};
     let useEncryption = false;
@@ -168,13 +168,13 @@ export default {
       if (neu === 'useDefault') {
         delete this.value.spec.storageLocation;
       } else {
-        this.$set(this.value.spec, 'storageLocation', { s3: this.s3 });
+        this.value.spec['storageLocation'] = { s3: this.s3 };
       }
     },
 
     resourceSet(neu) {
       if (neu?.metadata?.name) {
-        this.$set(this.value.spec, 'resourceSetName', neu?.metadata?.name);
+        this.value.spec['resourceSetName'] = neu?.metadata?.name;
       }
     },
 
@@ -216,7 +216,7 @@ export default {
       <template v-if="!!resourceSet">
         <div class="bordered-section">
           <RadioGroup
-            v-model="setSchedule"
+            v-model:value="setSchedule"
             :mode="mode"
             :label="t('backupRestoreOperator.schedule.label')"
             name="setSchedule"
@@ -229,7 +229,7 @@ export default {
           >
             <div class="col span-6">
               <LabeledInput
-                v-model="value.spec.schedule"
+                v-model:value="value.spec.schedule"
                 type="cron"
                 :mode="mode"
                 :label="t('backupRestoreOperator.schedule.label')"
@@ -238,7 +238,7 @@ export default {
             </div>
             <div class="col span-6">
               <UnitInput
-                v-model="value.spec.retentionCount"
+                v-model:value="value.spec.retentionCount"
                 :suffix="t('backupRestoreOperator.retentionCount.units', {count: value.spec.retentionCount || 0})"
                 :mode="mode"
                 :label="t('backupRestoreOperator.retentionCount.label')"
@@ -251,7 +251,7 @@ export default {
           <div class="row">
             <div class="col span-12">
               <RadioGroup
-                v-model="useEncryption"
+                v-model:value="useEncryption"
                 name="useEncryption"
                 :label="t('backupRestoreOperator.encryption')"
                 :options="encryptionOptions.options"
@@ -267,7 +267,7 @@ export default {
           >
             <div class="col span-6">
               <LabeledSelect
-                v-model="value.spec.encryptionConfigSecretName"
+                v-model:value="value.spec.encryptionConfigSecretName"
                 :tooltip="t('backupRestoreOperator.encryptionConfigName.backuptip', { ns: chartNamespace}, true)"
                 :hover-tooltip="true"
                 :mode="mode"
@@ -286,7 +286,7 @@ export default {
             >{{ t('backupRestoreOperator.s3.titles.location') }}</span>
             <RadioGroup
               v-else
-              v-model="storageSource"
+              v-model:value="storageSource"
               name="storageSource"
               :label="t('backupRestoreOperator.s3.titles.location')"
               :options="storageOptions.options"

package/edit/resources.cattle.io.restore.vue

@@ -81,7 +81,7 @@ export default {
 
   data() {
     if (!this.value.spec) {
-      this.$set(this.value, 'spec', { prune: true, deleteTimeoutSeconds: 10 });
+      this.value['spec'] = { prune: true, deleteTimeoutSeconds: 10 };
     }
 
     if (!this.value.metadata.name) {
@@ -160,7 +160,7 @@ export default {
         delete this.value.spec.storageLocation;
         delete this.value.spec.backupFilename;
       } else if (!this.value.spec.storageLocation && neu === 'configureS3') {
-        this.$set(this.value.spec, 'storageLocation', { s3: {} });
+        this.value.spec['storageLocation'] = { s3: {} };
         this.s3 = this.value.spec.storageLocation.s3;
       }
       if (neu === 'useBackup') {
@@ -198,7 +198,7 @@ export default {
       if (neu.spec.encryptionConfigSecretName && this.encryptionSecretNames.includes(neu.spec.encryptionConfigSecretName)) {
         out.encryptionConfigSecretName = neu.spec.encryptionConfigSecretName;
       }
-      this.$set(this.value, 'spec', { ...this.value.spec, ...out });
+      this.value['spec'] = { ...this.value.spec, ...out };
 
       this.targetBackup = neu;
     }
@@ -223,7 +223,7 @@ export default {
         <div class="row mb-10">
           <div class="col span-12">
             <RadioGroup
-              v-model="storageSource"
+              v-model:value="storageSource"
               name="storageSource"
               :label="t('backupRestoreOperator.s3.titles.backupLocation')"
               :options="radioOptions.options"
@@ -234,7 +234,7 @@ export default {
         </div>
         <template v-if="storageSource === 'configureS3'">
           <S3
-            v-model="s3"
+            v-model:value="s3"
             :mode="mode"
           />
         </template>
@@ -250,7 +250,7 @@ export default {
               :mode="mode"
               option-label="metadata.name"
               :label="t('backupRestoreOperator.targetBackup')"
-              @input="updateTargetBackup"
+              @update:value="updateTargetBackup"
             />
           </div>
         </div>
@@ -264,7 +264,7 @@ export default {
         >
           <div class="col span-6">
             <LabeledInput
-              v-model="value.spec.backupFilename"
+              v-model:value="value.spec.backupFilename"
               :spellcheck="false"
               required
               :mode="mode"
@@ -274,7 +274,7 @@ export default {
           <div class="col span-6">
             <LabeledSelect
               v-if="isEncrypted"
-              v-model="value.spec.encryptionConfigSecretName"
+              v-model:value="value.spec.encryptionConfigSecretName"
               :status="mode === 'view' ? null : 'warning'"
               :tooltip="mode === 'view' ? null : t('backupRestoreOperator.encryptionConfigName.restoretip')"
               :hover-tooltip="true"
@@ -290,7 +290,7 @@ export default {
         >
           <div class="col span-6">
             <Checkbox
-              v-model="value.spec.prune"
+              v-model:value="value.spec.prune"
               class="mb-5"
               :label="t('backupRestoreOperator.prune.label')"
               :mode="mode"
@@ -306,7 +306,7 @@ export default {
             </Checkbox>
             <UnitInput
               v-if="value.spec.prune"
-              v-model="value.spec.deleteTimeoutSeconds"
+              v-model:value="value.spec.deleteTimeoutSeconds"
               :suffix="t('suffix.seconds', {count: value.spec.deleteTimeoutSeconds})"
               :mode="mode"
               :label="t('backupRestoreOperator.deleteTimeout.label')"
@@ -314,7 +314,7 @@ export default {
               <template #label>
                 <label
                   v-clean-tooltip="t('backupRestoreOperator.deleteTimeout.tip')"
-                  class="has-tooltip"
+                  class="v-popper--has-tooltip"
                 >
                   {{ t('backupRestoreOperator.deleteTimeout.label') }} <i class="icon icon-info" />
                 </label>

package/edit/secret/basic.vue

@@ -45,7 +45,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="username"
+          v-model:value="username"
           required
           :label="t('secret.basic.username')"
           :mode="mode"
@@ -53,7 +53,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="password"
+          v-model:value="password"
           :label="t('secret.basic.password')"
           :mode="mode"
           type="password"

package/edit/secret/generic.vue

@@ -48,7 +48,7 @@ export default {
 <template>
   <KeyValue
     key="data"
-    v-model="value.data"
+    v-model:value="value.data"
     :mode="mode"
     :initial-empty-row="true"
     :handle-base64="true"

package/edit/secret/index.vue

@@ -61,9 +61,9 @@ export default {
     if ( newCloudCred ) {
       this.value.metadata.namespace = DEFAULT_WORKSPACE;
 
-      this.$set(this.value.metadata, 'name', '');
+      this.value.metadata['name'] = '';
 
-      this.$set(this.value, 'data', {});
+      this.value['data'] = {};
     }
 
     const secretTypes = [
@@ -269,13 +269,13 @@ export default {
         }
       }
 
-      this.$set(this.value, '_type', type);
+      this.value['_type'] = type;
       this.$emit('set-subtype', this.typeDisplay(type, driver));
 
       this.secretType = type;
 
       if (this.mode === _CREATE && type === 'custom') {
-        this.$set(this.value, '_type', '');
+        this.value['_type'] = '';
       }
     },
 
@@ -297,7 +297,7 @@ export default {
 
     selectCustomType(type) {
       if (type !== 'custom') {
-        this.$set(this.value, '_type', type);
+        this.value['_type'] = type;
       }
     }
   },
@@ -321,9 +321,10 @@ export default {
       @error="e=>errors = e"
     >
       <NameNsDescription
-        v-model="value"
+        :value="value"
         :mode="mode"
         :namespaced="!isCloud"
+        @update:value="$emit('input', $event)"
       />
 
       <div
@@ -332,7 +333,7 @@ export default {
       >
         <div class="col span-3">
           <LabeledSelect
-            v-model="secretType"
+            v-model:value="secretType"
             :options="secretTypes"
             :searchable="false"
             :mode="mode"
@@ -340,7 +341,7 @@ export default {
             :reduce="(e) => e.value"
             label-key="secret.type"
             required
-            @input="selectCustomType"
+            @update:value="selectCustomType"
           />
         </div>
 
@@ -348,7 +349,7 @@ export default {
           <LabeledInput
             v-if="showCustomSecretType"
             ref="customType"
-            v-model="value._type"
+            v-model:value="value._type"
             v-focus
             label-key="secret.customType"
             :mode="mode"
@@ -390,8 +391,9 @@ export default {
           :weight="-1"
         >
           <Labels
-            v-model="value"
+            :value="value"
             :mode="mode"
+            @update:value="$emit('input', $event)"
           />
         </Tab>
       </Tabbed>

package/edit/secret/registry.vue

@@ -105,7 +105,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-12">
         <RadioGroup
-          v-model="registryProvider"
+          v-model:value="registryProvider"
           name="registryProvider"
           :mode="mode"
           :options="registryAddresses"
@@ -117,7 +117,7 @@ export default {
       class="row mb-20"
     >
       <LabeledInput
-        v-model="registryUrl"
+        v-model:value="registryUrl"
         required
         :label="t('secret.registry.domainName')"
         placeholder="e.g. index.docker.io"
@@ -127,14 +127,14 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="username"
+          v-model:value="username"
           :label="t('secret.registry.username')"
           :mode="mode"
         />
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="password"
+          v-model:value="password"
           :label="t('secret.registry.password')"
           :mode="mode"
           type="password"

package/edit/secret/ssh.vue

@@ -49,7 +49,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="username"
+          v-model:value="username"
           type="multiline"
           :label="t('secret.ssh.public')"
           :mode="mode"
@@ -64,7 +64,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="password"
+          v-model:value="password"
           type="multiline"
           :label="t('secret.ssh.private')"
           :mode="mode"

package/edit/secret/tls.vue

@@ -62,7 +62,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="key"
+          v-model:value="key"
           type="multiline"
           :label="t('secret.certificate.privateKey')"
           :mode="mode"
@@ -76,7 +76,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="crt"
+          v-model:value="crt"
           required
           type="multiline"
           :label="t('secret.certificate.certificate')"

package/edit/service.vue

@@ -43,8 +43,8 @@ const SESSION_STICKY_TIME_DEFAULT = 10800;
 export default {
   // Props are found in CreateEditView
   // props: {},
-
-  components: {
+  inheritAttrs: false,
+  components:   {
     ArrayList,
     Banner,
     CruResource,
@@ -69,10 +69,10 @@ export default {
   data() {
     if (!this?.value?.spec?.type) {
       if (!this.value?.spec) {
-        this.$set(this.value, 'spec', {
+        this.value['spec'] = {
           ports:           [],
-          sessionAffinity: 'None',
-        });
+          sessionAffinity: 'None'
+        };
       }
     }
 
@@ -83,7 +83,7 @@ export default {
         this.value.spec.clusterIP = '';
       }
       if (this.value?.spec?.clusterIPs) {
-        this.$delete(this.value.spec, 'clusterIPs');
+        delete this.value.spec['clusterIPs'];
       }
     }
 
@@ -151,19 +151,19 @@ export default {
         this.$emit('set-subtype', serviceType);
 
         if (serviceType === HEADLESS) {
-          this.$set(this.value.spec, 'type', CLUSTERIP);
-          this.$set(this.value.spec, 'clusterIP', 'None');
+          this.value.spec['type'] = CLUSTERIP;
+          this.value.spec['clusterIP'] = 'None';
         } else {
           if (
             serviceType !== HEADLESS &&
             this.value?.spec?.clusterIP === 'None'
           ) {
-            this.$set(this.value.spec, 'clusterIP', null);
+            this.value.spec['clusterIP'] = null;
           } else if (serviceType === 'ExternalName') {
-            this.$set(this.value.spec, 'ports', null);
+            this.value.spec['ports'] = null;
           }
 
-          this.$set(this.value.spec, 'type', serviceType);
+          this.value.spec['type'] = serviceType;
         }
       },
     },
@@ -248,7 +248,7 @@ export default {
   mounted() {
     const initialType = this.serviceType;
 
-    this.$set(this, 'serviceType', initialType);
+    this['serviceType'] = initialType;
   },
 
   methods: {
@@ -304,7 +304,7 @@ export default {
     },
 
     updateServicePorts(servicePorts) {
-      this.$set(this.value.spec, 'ports', servicePorts);
+      this.value.spec['ports'] = servicePorts;
     },
 
     targetPortsStrOrInt(targetPorts = []) {
@@ -387,12 +387,12 @@ export default {
         :error="tabErrors.servicePorts"
       >
         <ServicePorts
-          v-model="value.spec.ports"
+          v-model:value="value.spec.ports"
           class="col span-12"
           :mode="mode"
           :spec-type="serviceType"
           :rules="fvGetAndReportPathRules('spec.ports')"
-          @input="updateServicePorts"
+          @update:value="updateServicePorts"
         />
       </Tab>
       <Tab
@@ -412,11 +412,11 @@ export default {
           <div class="col span-12">
             <KeyValue
               key="selectors"
-              v-model="value.spec.selector"
+              v-model:value="value.spec.selector"
               :mode="mode"
               :initial-empty-row="true"
               :protip="false"
-              @input="(e) => $set(value.spec, 'selector', e)"
+              @update:value="(e) => $set(value.spec, 'selector', e)"
             />
           </div>
         </div>
@@ -432,14 +432,14 @@ export default {
         >
           <div class="col span-6">
             <LabeledInput
-              v-model="value.spec.clusterIP"
+              v-model:value="value.spec.clusterIP"
               :mode="mode"
               :label="t('servicesPage.ips.input.label')"
               :placeholder="t('servicesPage.ips.input.placeholder')"
               :tooltip-key="
                 hasClusterIp ? 'servicesPage.ips.clusterIpHelpText' : null
               "
-              @input="(e) => $set(value.spec, 'clusterIP', e)"
+              @update:value="(e) => $set(value.spec, 'clusterIP', e)"
             />
           </div>
         </div>
@@ -449,14 +449,14 @@ export default {
         >
           <div class="col span-6">
             <LabeledInput
-              v-model="value.spec.loadBalancerIP"
+              v-model:value="value.spec.loadBalancerIP"
               :mode="mode"
               :label="t('servicesPage.ips.loadBalancerIp.label')"
               :placeholder="t('servicesPage.ips.loadBalancerIp.placeholder')"
               :tooltip-key="
                 hasClusterIp ? 'servicesPage.ips.loadBalancerIp.helpText' : null
               "
-              @input="(e) => $set(value.spec, 'loadBalancerIP', e)"
+              @update:value="(e) => $set(value.spec, 'loadBalancerIP', e)"
             />
           </div>
         </div>
@@ -464,12 +464,12 @@ export default {
           <div class="col span-7">
             <ArrayList
               key="clusterExternalIpAddresses"
-              v-model="value.spec.externalIPs"
+              v-model:value="value.spec.externalIPs"
               :title="hasClusterIp ? t('servicesPage.ips.external.label') : ''"
               :value-placeholder="t('servicesPage.ips.external.placeholder')"
               :mode="mode"
               :protip="false"
-              @input="(e) => $set(value.spec, 'externalIPs', e)"
+              @update:value="(e) => $set(value.spec, 'externalIPs', e)"
             />
           </div>
         </div>
@@ -495,7 +495,7 @@ export default {
         <div class="row session-affinity">
           <div class="col span-6">
             <RadioGroup
-              v-model="value.spec.sessionAffinity"
+              v-model:value="value.spec.sessionAffinity"
               name="sessionAffinity"
               class="enforcement-action"
               :options="sessionAffinityActionOptions"
@@ -508,7 +508,7 @@ export default {
             class="col span-6"
           >
             <UnitInput
-              v-model="value.spec.sessionAffinityConfig.clientIP.timeoutSeconds"
+              v-model:value="value.spec.sessionAffinityConfig.clientIP.timeoutSeconds"
               :suffix="
                 t('suffix.seconds', {
                   count:

package/edit/serviceaccount.vue

@@ -12,9 +12,9 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
-  name: 'ServiceAccount',
-
-  components: {
+  name:         'ServiceAccount',
+  inheritAttrs: false,
+  components:   {
     CruResource,
     NameNsDescription,
     Checkbox,
@@ -49,7 +49,7 @@ export default {
   mixins: [CreateEditView],
 
   data() {
-    this.$set(this.value, 'automountServiceAccountToken', this.value.automountServiceAccountToken || false);
+    this.value['automountServiceAccountToken'] = this.value.automountServiceAccountToken || false;
 
     return {
       allSecrets:      [],
@@ -97,7 +97,7 @@ export default {
     imagePullSecrets: {
       get() {
         if (!this.value.imagePullSecrets) {
-          this.$set(this.value, 'imagePullSecrets', []);
+          this.value['imagePullSecrets'] = [];
         }
         const { imagePullSecrets } = this.value;
 
@@ -151,7 +151,7 @@ export default {
         <div class="row">
           <div class="col mt-20">
             <Checkbox
-              v-model="value.automountServiceAccountToken"
+              v-model:value="value.automountServiceAccountToken"
               :label="t('serviceAccount.automount')"
               type="checkbox"
               :mode="mode"
@@ -163,7 +163,7 @@ export default {
             <h3>{{ t('serviceAccount.imagePullSecrets') }}</h3>
 
             <LabeledSelect
-              v-model="imagePullSecrets"
+              v-model:value="imagePullSecrets"
               label-key="workload.container.imagePullSecrets.label"
               :tooltip="t('workload.container.imagePullSecrets.tooltip')"
               :multiple="true"

package/edit/storage.k8s.io.storageclass/index.vue

@@ -14,9 +14,9 @@ import { mapFeature, UNSUPPORTED_STORAGE_DRIVERS } from '@shell/store/features';
 import { CSI_DRIVER, LONGHORN_DRIVER } from '@shell/config/types';
 
 export default {
-  name: 'StorageClass',
-
-  components: {
+  name:         'StorageClass',
+  inheritAttrs: false,
+  components:   {
     ArrayList,
     CruResource,
     LabeledSelect,
@@ -68,11 +68,11 @@ export default {
       }
     ];
 
-    this.$set(this.value, 'parameters', this.value.parameters || {});
-    this.$set(this.value, 'provisioner', this.value.provisioner || PROVISIONER_OPTIONS[0].value);
-    this.$set(this.value, 'allowVolumeExpansion', this.value.allowVolumeExpansion || allowVolumeExpansionOptions[1].value);
-    this.$set(this.value, 'reclaimPolicy', this.value.reclaimPolicy || reclaimPolicyOptions[0].value);
-    this.$set(this.value, 'volumeBindingMode', this.value.volumeBindingMode || volumeBindingModeOptions[0].value);
+    this.value['parameters'] = this.value.parameters || {};
+    this.value['provisioner'] = this.value.provisioner || PROVISIONER_OPTIONS[0].value;
+    this.value['allowVolumeExpansion'] = this.value.allowVolumeExpansion || allowVolumeExpansionOptions[1].value;
+    this.value['reclaimPolicy'] = this.value.reclaimPolicy || reclaimPolicyOptions[0].value;
+    this.value['volumeBindingMode'] = this.value.volumeBindingMode || volumeBindingModeOptions[0].value;
 
     return {
       reclaimPolicyOptions,
@@ -151,7 +151,7 @@ export default {
 
   watch: {
     provisionerWatch() {
-      this.$set(this.value, 'parameters', {});
+      this.value['parameters'] = {};
     }
   },
 
@@ -170,8 +170,8 @@ export default {
     updateProvisioner(event) {
       const provisioner = event.labelKey ? event.labelKey : event;
 
-      this.$set(this.value, 'provisioner', provisioner);
-      this.$set(this.value, 'allowVolumeExpansion', provisioner === 'driver.longhorn.io');
+      this.value['provisioner'] = provisioner;
+      this.value['allowVolumeExpansion'] = provisioner === 'driver.longhorn.io';
     },
     willSave() {
       Object.keys(this.value.parameters).forEach((key) => {
@@ -225,7 +225,7 @@ export default {
       :searchable="true"
       :taggable="true"
       class="mb-20"
-      @input="updateProvisioner($event)"
+      @update:value="updateProvisioner($event)"
     />
     <Banner
       v-if="provisionerIsDeprecated"
@@ -260,7 +260,7 @@ export default {
             <div class="row mb-20">
               <div class="col span-12">
                 <RadioGroup
-                  v-model="value.reclaimPolicy"
+                  v-model:value="value.reclaimPolicy"
                   name="reclaimPolicy"
                   :label="t('storageClass.customize.reclaimPolicy.label')"
                   :mode="modeOverride"
@@ -271,7 +271,7 @@ export default {
             <div class="row mb-20">
               <div class="col span-12">
                 <RadioGroup
-                  v-model="value.allowVolumeExpansion"
+                  v-model:value="value.allowVolumeExpansion"
                   name="allowVolumeExpansion"
                   :label="t('storageClass.customize.allowVolumeExpansion.label')"
                   :mode="mode"
@@ -283,7 +283,7 @@ export default {
           <div class="col span-6">
             <h3>{{ t('storageClass.customize.mountOptions.label') }}</h3>
             <ArrayList
-              v-model="value.mountOptions"
+              v-model:value="value.mountOptions"
               :mode="mode"
               :label="t('storageClass.customize.mountOptions.label')"
               :add-label="t('storageClass.customize.mountOptions.addLabel')"
@@ -293,7 +293,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <RadioGroup
-              v-model="value.volumeBindingMode"
+              v-model:value="value.volumeBindingMode"
               name="volumeBindingMode"
               :label="t('storageClass.customize.volumeBindingMode.label')"
               :mode="modeOverride"