@rancher/shell 2.0.0 → 3.0.0-rc.1

package/edit/persistentvolume/__tests__/persistentvolume.test.ts

@@ -2,41 +2,45 @@ import { mount } from '@vue/test-utils';
 import PersistentVolume from '@shell/edit/persistentvolume/index';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 
-describe('view: PersistentVolume', () => {
+describe.skip('(Vue3 Skip) view: PersistentVolume', () => {
   it('should list enabled PV storage option if supported', () => {
     const plugin = {
       labelKey: 'persistentVolume.csi.label', supported: true, value: 'csi'
     };
     const resource = 'PersistentVolume';
     const wrapper = mount(PersistentVolume as ExtendedVue<Vue, {}, {}, {}, PersistentVolume>, {
-      propsData: { value: { spec: { } } },
-      mocks:     {
-        $store: {
-          dispatch: () => jest.fn(),
-          getters:  {
-            'i18n/t':            jest.fn(),
-            'i18n/exists':       jest.fn(),
-            currentStore:        () => 'cluster',
-            'features/get':      () => jest.fn(),
-            'prefs/get':         () => resource,
-            'cluster/schemaFor': () => {},
-            'cluster/all':       () => [{}],
+      props: { value: { spec: { } } },
+
+      global: {
+        mocks: {
+          $store: {
+            dispatch: () => jest.fn(),
+            getters:  {
+              'i18n/t':            jest.fn(),
+              'i18n/exists':       jest.fn(),
+              currentStore:        () => 'cluster',
+              'features/get':      () => jest.fn(),
+              'prefs/get':         () => resource,
+              'cluster/schemaFor': () => {},
+              'cluster/all':       () => [{}],
+            }
+          },
+          $fetchState: {
+            pending: false, error: true, timestamp: Date.now()
+          },
+          $route: {
+            params: { resource },
+            query:  { AS: '' },
+            hash:   '',
+          },
+          $router: {
+            currentRoute: {},
+            replace:      jest.fn(),
           }
         },
-        $fetchState: {
-          pending: false, error: true, timestamp: Date.now()
-        },
-        $route: {
-          params: { resource },
-          query:  { AS: '' },
-          hash:   '',
-        },
-        $router: {
-          currentRoute: {},
-          replace:      jest.fn(),
-        }
+
+        stubs: { LabeledSelect: true },
       },
-      stubs: { LabeledSelect: true }
     });
 
     const select = wrapper.find('[data-testid="persistent-volume-plugin-select"]');
@@ -48,32 +52,34 @@ describe('view: PersistentVolume', () => {
     const plugin = 'csi';
     const resource = 'PersistentVolume';
     const wrapper = mount(PersistentVolume as ExtendedVue<Vue, {}, {}, {}, PersistentVolume>, {
-      propsData: { value: { spec: { [plugin]: { value: plugin } } } },
-      mocks:     {
-        $store: {
-          dispatch: () => jest.fn(),
-          getters:  {
-            'i18n/t':            jest.fn(),
-            'i18n/exists':       jest.fn(),
-            currentStore:        () => 'cluster',
-            'features/get':      () => jest.fn(),
-            'prefs/get':         () => resource,
-            'cluster/schemaFor': () => {},
-            'cluster/all':       () => [{}],
+      props:  { value: { spec: { [plugin]: { value: plugin } } } },
+      global: {
+        mocks: {
+          $store: {
+            dispatch: () => jest.fn(),
+            getters:  {
+              'i18n/t':            jest.fn(),
+              'i18n/exists':       jest.fn(),
+              currentStore:        () => 'cluster',
+              'features/get':      () => jest.fn(),
+              'prefs/get':         () => resource,
+              'cluster/schemaFor': () => {},
+              'cluster/all':       () => [{}],
+            }
+          },
+          $fetchState: {
+            pending: false, error: true, timestamp: Date.now()
+          },
+          $route: {
+            params: { resource },
+            query:  { AS: '' },
+            hash:   '',
+          },
+          $router: {
+            currentRoute: {},
+            replace:      jest.fn(),
           }
         },
-        $fetchState: {
-          pending: false, error: true, timestamp: Date.now()
-        },
-        $route: {
-          params: { resource },
-          query:  { AS: '' },
-          hash:   '',
-        },
-        $router: {
-          currentRoute: {},
-          replace:      jest.fn(),
-        }
       }
     });
 

package/edit/persistentvolume/index.vue

@@ -70,11 +70,11 @@ export default {
     };
     const defaultAccessModes = ['ReadWriteOnce'];
 
-    this.$set(this.value, 'spec', this.value.spec || {});
-    this.$set(this.value.spec, 'accessModes', this.value.spec.accessModes || defaultAccessModes);
-    this.$set(this.value.spec, 'capacity', this.value.spec.capacity || {});
-    this.$set(this.value.spec.capacity, 'storage', this.value.spec.capacity.storage || '10Gi');
-    this.$set(this.value.spec, 'storageClassName', this.value.spec.storageClassName || NONE_OPTION.value);
+    this.value['spec'] = this.value.spec || {};
+    this.value.spec['accessModes'] = this.value.spec.accessModes || defaultAccessModes;
+    this.value.spec['capacity'] = this.value.spec.capacity || {};
+    this.value.spec.capacity['storage'] = this.value.spec.capacity.storage || '10Gi';
+    this.value.spec['storageClassName'] = this.value.spec.storageClassName || NONE_OPTION.value;
 
     const foundPlugin = this.value.isLonghorn ? LONGHORN_PLUGIN : VOLUME_PLUGINS.find((plugin) => this.value.spec[plugin.value]);
     const plugin = (foundPlugin || VOLUME_PLUGINS[0]).value;
@@ -130,14 +130,14 @@ export default {
           const defaultValue = { required: { nodeSelectorTerms: [] } };
 
           if (!this.value.spec.nodeAffinity?.required?.nodeSelectorTerms) {
-            this.$set(this.value.spec, 'nodeAffinity', this.value.spec.nodeAffinity || defaultValue);
-            this.$set(this.value.spec.nodeAffinity, 'required', this.value.spec.nodeAffinity.required || defaultValue.required);
-            this.$set(this.value.spec.nodeAffinity.required, 'nodeSelectorTerms', this.value.spec.nodeAffinity.required.nodeSelectorTerms || defaultValue.required.nodeSelectorTerms);
+            this.value.spec['nodeAffinity'] = this.value.spec.nodeAffinity || defaultValue;
+            this.value.spec.nodeAffinity['required'] = this.value.spec.nodeAffinity.required || defaultValue.required;
+            this.value.spec.nodeAffinity.required['nodeSelectorTerms'] = this.value.spec.nodeAffinity.required.nodeSelectorTerms || defaultValue.required.nodeSelectorTerms;
           }
 
-          this.$set(this.value.spec.nodeAffinity.required, 'nodeSelectorTerms', value);
+          this.value.spec.nodeAffinity.required['nodeSelectorTerms'] = value;
         } else {
-          this.$set(this.value.spec.nodeAffinity, 'nodeAffinity', undefined);
+          this.value.spec.nodeAffinity['nodeAffinity'] = undefined;
         }
       }
     },
@@ -181,7 +181,7 @@ export default {
     checkboxSetter(key, value) {
       if (value) {
         this.value.spec.accessModes.push(key);
-        this.$set(this.value, 'accessModes', uniq(this.value.spec.accessModes));
+        this.value['accessModes'] = uniq(this.value.spec.accessModes);
       } else {
         const indexOf = this.value.spec.accessModes.indexOf(key);
 
@@ -195,18 +195,18 @@ export default {
     },
     willSave() {
       if (this.value.spec.storageClassName === this.NONE_OPTION.value) {
-        this.$set(this.value.spec, 'storageClassName', null);
+        this.value.spec['storageClassName'] = null;
       }
 
       if (!this.isCreate) {
-        this.$set(this.value.spec, 'nodeAffinity', this.initialNodeAffinity);
+        this.value.spec['nodeAffinity'] = this.initialNodeAffinity;
       }
     },
     updatePlugin(value) {
       const plugin = this.plugin === LONGHORN_PLUGIN.value ? 'csi' : this.plugin;
 
       delete this.value.spec[plugin];
-      this.$set(this, 'plugin', value);
+      this['plugin'] = value;
     }
   }
 };
@@ -262,12 +262,12 @@ export default {
           :options="plugins"
           :mode="modeOverride"
           :required="true"
-          @input="updatePlugin($event)"
+          @update:value="updatePlugin($event)"
         />
       </div>
       <div class="col span-6">
         <UnitInput
-          v-model="value.spec.capacity.storage"
+          v-model:value="value.spec.capacity.storage"
           :required="true"
           :label="t('persistentVolume.capacity.label')"
           :increment="1024"
@@ -300,21 +300,21 @@ export default {
             <h3>{{ t('persistentVolume.customize.accessModes.label') }}</h3>
             <div>
               <Checkbox
-                v-model="readWriteOnce"
+                v-model:value="readWriteOnce"
                 :label="t('persistentVolume.customize.accessModes.readWriteOnce')"
                 :mode="mode"
               />
             </div>
             <div>
               <Checkbox
-                v-model="readOnlyMany"
+                v-model:value="readOnlyMany"
                 :label="t('persistentVolume.customize.accessModes.readOnlyMany')"
                 :mode="mode"
               />
             </div>
             <div>
               <Checkbox
-                v-model="readWriteMany"
+                v-model:value="readWriteMany"
                 :label="t('persistentVolume.customize.accessModes.readWriteMany')"
                 :mode="mode"
               />
@@ -322,7 +322,7 @@ export default {
           </div>
           <div class="col span-6">
             <ArrayList
-              v-model="value.spec.mountOptions"
+              v-model:value="value.spec.mountOptions"
               :mode="mode"
               :title="t('persistentVolume.customize.mountOptions.label')"
               :add-label="t('persistentVolume.customize.mountOptions.addLabel')"
@@ -332,7 +332,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledSelect
-              v-model="value.spec.storageClassName"
+              v-model:value="value.spec.storageClassName"
               :label="t('persistentVolume.customize.assignToStorageClass.label')"
               :options="storageClassOptions"
               :loading="isLoadingSecondaryResources"
@@ -348,14 +348,14 @@ export default {
               >*</span>
             </h3>
             <ArrayListGrouped
-              v-model="nodeSelectorTerms"
+              v-model:value="nodeSelectorTerms"
               :mode="modeOverride"
               :default-add-value="{matchExpressions:[]}"
               :add-label="t('workload.scheduling.affinity.addNodeSelector')"
             >
               <template #default="props">
                 <MatchExpressions
-                  v-model="props.row.value.matchExpressions"
+                  v-model:value="props.row.value.matchExpressions"
                   :mode="modeOverride"
                   class="col span-12"
                   :type="NODE"

package/edit/persistentvolume/plugins/awsElasticBlockStore.vue

@@ -15,9 +15,9 @@ export default {
     },
   },
   data() {
-    this.$set(this.value.spec, 'awsElasticBlockStore', this.value.spec.awsElasticBlockStore || {});
-    this.$set(this.value.spec.awsElasticBlockStore, 'readOnly', this.value.spec.awsElasticBlockStore.readOnly || false);
-    this.$set(this.value.spec.awsElasticBlockStore, 'partition', this.value.spec.awsElasticBlockStore.partition || 0);
+    this.value.spec['awsElasticBlockStore'] = this.value.spec.awsElasticBlockStore || {};
+    this.value.spec.awsElasticBlockStore['readOnly'] = this.value.spec.awsElasticBlockStore.readOnly || false;
+    this.value.spec.awsElasticBlockStore['partition'] = this.value.spec.awsElasticBlockStore.partition || 0;
 
     const readOnlyOptions = [
       {
@@ -38,7 +38,7 @@ export default {
         return this.value.spec.awsElasticBlockStore.partition;
       },
       set(value) {
-        this.$set(this.value.spec.awsElasticBlockStore, 'partition', Number.parseInt(value, 10));
+        this.value.spec.awsElasticBlockStore['partition'] = Number.parseInt(value, 10);
       }
     }
   }
@@ -50,7 +50,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.awsElasticBlockStore.volumeID"
+          v-model:value="value.spec.awsElasticBlockStore.volumeID"
           :mode="mode"
           :label="t('persistentVolume.awsElasticBlockStore.volumeId.label')"
           :placeholder="t('persistentVolume.awsElasticBlockStore.volumeId.placeholder')"
@@ -58,7 +58,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="partition"
+          v-model:value="partition"
           :mode="mode"
           :label="t('persistentVolume.shared.partition.label')"
           :placeholder="t('persistentVolume.shared.partition.placeholder')"
@@ -69,7 +69,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.awsElasticBlockStore.fsType"
+          v-model:value="value.spec.awsElasticBlockStore.fsType"
           :mode="mode"
           :label="t('persistentVolume.shared.filesystemType.label')"
           :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
@@ -77,7 +77,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.awsElasticBlockStore.readOnly"
+          v-model:value="value.spec.awsElasticBlockStore.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"

package/edit/persistentvolume/plugins/azureDisk.vue

@@ -56,10 +56,10 @@ export default {
       }
     ];
 
-    this.$set(this.value.spec, 'azureDisk', this.value.spec.azureDisk || {});
-    this.$set(this.value.spec.azureDisk, 'readOnly', this.value.spec.azureDisk.readOnly || false);
-    this.$set(this.value.spec.azureDisk, 'cachingMode', this.value.spec.azureDisk.cachingMode || cachingModeOptions[0].value);
-    this.$set(this.value.spec.azureDisk, 'kind', this.value.spec.azureDisk.kind || kindOptions[2].value);
+    this.value.spec['azureDisk'] = this.value.spec.azureDisk || {};
+    this.value.spec.azureDisk['readOnly'] = this.value.spec.azureDisk.readOnly || false;
+    this.value.spec.azureDisk['cachingMode'] = this.value.spec.azureDisk.cachingMode || cachingModeOptions[0].value;
+    this.value.spec.azureDisk['kind'] = this.value.spec.azureDisk.kind || kindOptions[2].value;
 
     return {
       kindOptions, readOnlyOptions, cachingModeOptions
@@ -73,7 +73,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.azureDisk.diskName"
+          v-model:value="value.spec.azureDisk.diskName"
           :required="true"
           :mode="mode"
           :label="t('persistentVolume.azureDisk.diskName.label')"
@@ -82,7 +82,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.azureDisk.diskURI"
+          v-model:value="value.spec.azureDisk.diskURI"
           :required="true"
           :mode="mode"
           :label="t('persistentVolume.azureDisk.diskURI.label')"
@@ -94,7 +94,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.azureDisk.kind"
+          v-model:value="value.spec.azureDisk.kind"
           name="kind"
           :mode="mode"
           :label="t('persistentVolume.azureDisk.kind.label')"
@@ -103,7 +103,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.azureDisk.cachingMode"
+          v-model:value="value.spec.azureDisk.cachingMode"
           name="cachingMode"
           :mode="mode"
           :label="t('persistentVolume.azureDisk.cachingMode.label')"
@@ -115,7 +115,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.azureDisk.fsType"
+          v-model:value="value.spec.azureDisk.fsType"
           :mode="mode"
           :label="t('persistentVolume.shared.filesystemType.label')"
           :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
@@ -123,7 +123,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.azureDisk.readOnly"
+          v-model:value="value.spec.azureDisk.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"

package/edit/persistentvolume/plugins/azureFile.vue

@@ -15,8 +15,8 @@ export default {
     },
   },
   data() {
-    this.$set(this.value.spec, 'azureFile', this.value.spec.azureFile || {});
-    this.$set(this.value.spec.azureFile, 'readOnly', this.value.spec.azureFile.readOnly || false);
+    this.value.spec['azureFile'] = this.value.spec.azureFile || {};
+    this.value.spec.azureFile['readOnly'] = this.value.spec.azureFile.readOnly || false;
 
     const readOnlyOptions = [
       {
@@ -39,7 +39,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.azureFile.shareName"
+          v-model:value="value.spec.azureFile.shareName"
           :mode="mode"
           :label="t('persistentVolume.azureFile.shareName.label')"
           :placeholder="t('persistentVolume.azureFile.shareName.placeholder')"
@@ -47,7 +47,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.azureFile.secretName"
+          v-model:value="value.spec.azureFile.secretName"
           :mode="mode"
           :label="t('persistentVolume.shared.secretName.label')"
           :placeholder="t('persistentVolume.shared.secretName.placeholder')"
@@ -57,7 +57,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.azureFile.secretNamespace"
+          v-model:value="value.spec.azureFile.secretNamespace"
           :mode="mode"
           :label="t('persistentVolume.shared.secretNamespace.label')"
           :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
@@ -65,7 +65,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.azureFile.readOnly"
+          v-model:value="value.spec.azureFile.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"

package/edit/persistentvolume/plugins/cephfs.vue

@@ -29,9 +29,9 @@ export default {
       }
     ];
 
-    this.$set(this.value.spec, 'cephfs', this.value.spec.cephfs || {});
-    this.$set(this.value.spec.cephfs, 'readOnly', this.value.spec.cephfs.readOnly || false);
-    this.$set(this.value.spec.cephfs, 'secretRef', this.value.spec.cephfs.secretRef || {});
+    this.value.spec['cephfs'] = this.value.spec.cephfs || {};
+    this.value.spec.cephfs['readOnly'] = this.value.spec.cephfs.readOnly || false;
+    this.value.spec.cephfs['secretRef'] = this.value.spec.cephfs.secretRef || {};
 
     return { readOnlyOptions };
   },
@@ -43,7 +43,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.cephfs.path"
+          v-model:value="value.spec.cephfs.path"
           :mode="mode"
           :label="t('persistentVolume.cephfs.path.label')"
           :placeholder="t('persistentVolume.cephfs.path.placeholder')"
@@ -51,7 +51,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.cephfs.user"
+          v-model:value="value.spec.cephfs.user"
           :mode="mode"
           :label="t('persistentVolume.cephfs.user.label')"
           :placeholder="t('persistentVolume.cephfs.user.placeholder')"
@@ -61,7 +61,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.cephfs.secretFile"
+          v-model:value="value.spec.cephfs.secretFile"
           :mode="mode"
           :label="t('persistentVolume.cephfs.secretFile.label')"
           :placeholder="t('persistentVolume.cephfs.secretFile.placeholder')"
@@ -69,7 +69,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.cephfs.secretRef.name"
+          v-model:value="value.spec.cephfs.secretRef.name"
           :mode="mode"
           :label="t('persistentVolume.shared.secretName.label')"
           :placeholder="t('persistentVolume.shared.secretName.placeholder')"
@@ -79,7 +79,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.cephfs.secretRef.namespace"
+          v-model:value="value.spec.cephfs.secretRef.namespace"
           :mode="mode"
           :label="t('persistentVolume.shared.secretNamespace.label')"
           :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
@@ -89,7 +89,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.cephfs.readOnly"
+          v-model:value="value.spec.cephfs.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"
@@ -99,7 +99,7 @@ export default {
       </div>
       <div class="col span-6">
         <ArrayList
-          v-model="value.spec.cephfs.monitors"
+          v-model:value="value.spec.cephfs.monitors"
           :add-label="t('persistentVolume.shared.monitors.add')"
           :mode="mode"
         />

package/edit/persistentvolume/plugins/cinder.vue

@@ -26,9 +26,9 @@ export default {
       }
     ];
 
-    this.$set(this.value.spec, 'cinder', this.value.spec.cinder || {});
-    this.$set(this.value.spec.cinder, 'readOnly', this.value.spec.cinder.readOnly || false);
-    this.$set(this.value.spec.cinder, 'secretRef', this.value.spec.cinder.secretRef || {});
+    this.value.spec['cinder'] = this.value.spec.cinder || {};
+    this.value.spec.cinder['readOnly'] = this.value.spec.cinder.readOnly || false;
+    this.value.spec.cinder['secretRef'] = this.value.spec.cinder.secretRef || {};
 
     return { readOnlyOptions };
   },
@@ -40,7 +40,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.cinder.volumeID"
+          v-model:value="value.spec.cinder.volumeID"
           :mode="mode"
           :label="t('persistentVolume.cinder.volumeId.label')"
           :placeholder="t('persistentVolume.cinder.volumeId.placeholder')"
@@ -48,7 +48,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.cinder.fsType"
+          v-model:value="value.spec.cinder.fsType"
           :mode="mode"
           :label="t('persistentVolume.shared.filesystemType.label')"
           :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
@@ -58,7 +58,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.cinder.secretRef.name"
+          v-model:value="value.spec.cinder.secretRef.name"
           :mode="mode"
           :label="t('persistentVolume.shared.secretName.label')"
           :placeholder="t('persistentVolume.shared.secretName.placeholder')"
@@ -66,7 +66,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.cinder.secretRef.namespace"
+          v-model:value="value.spec.cinder.secretRef.namespace"
           :mode="mode"
           :label="t('persistentVolume.shared.secretNamespace.label')"
           :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
@@ -76,7 +76,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.cinder.readOnly"
+          v-model:value="value.spec.cinder.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"