@rancher/shell 2.0.1 → 3.0.0-rc.2

package/edit/workload/mixins/workload.js

@@ -188,7 +188,7 @@ export default {
 
         const podSpec = { template: { spec: { containers: podContainers, initContainers: [] }, metadata } };
 
-        this.$set(this.value, 'spec', podSpec);
+        this.value['spec'] = podSpec;
       }
     }
 
@@ -198,7 +198,7 @@ export default {
       const podSpec = { ...this.value.spec };
       const metadata = { ...this.value.metadata };
 
-      this.$set(this.value.spec, 'template', { spec: podSpec, metadata });
+      this.value.spec['template'] = { spec: podSpec, metadata };
     }
 
     const spec = this.value.spec;
@@ -345,9 +345,9 @@ export default {
       },
       set(neu) {
         if (this.isCronJob) {
-          this.$set(this.spec.jobTemplate.spec.template, 'spec', neu);
+          this.spec.jobTemplate.spec.template['spec'] = neu;
         } else {
-          this.$set(this.spec.template, 'spec', neu);
+          this.spec.template['spec'] = neu;
         }
       },
     },
@@ -356,23 +356,23 @@ export default {
       get() {
         if (this.isCronJob) {
           if (!this.spec.jobTemplate.metadata) {
-            this.$set(this.spec.jobTemplate, 'metadata', { labels: {} });
+            this.spec.jobTemplate['metadata'] = { labels: {} };
           }
 
           return this.spec.jobTemplate.metadata.labels;
         }
 
         if (!this.spec.template.metadata) {
-          this.$set(this.spec.template, 'metadata', { labels: {} });
+          this.spec.template['metadata'] = { labels: {} };
         }
 
         return this.spec.template.metadata.labels;
       },
       set(neu) {
         if (this.isCronJob) {
-          this.$set(this.spec.jobTemplate.metadata, 'labels', neu);
+          this.spec.jobTemplate.metadata['labels'] = neu;
         } else {
-          this.$set(this.spec.template.metadata, 'labels', neu);
+          this.spec.template.metadata['labels'] = neu;
         }
       },
     },
@@ -381,22 +381,22 @@ export default {
       get() {
         if (this.isCronJob) {
           if (!this.spec.jobTemplate.metadata) {
-            this.$set(this.spec.jobTemplate, 'metadata', { annotations: {} });
+            this.spec.jobTemplate['metadata'] = { annotations: {} };
           }
 
           return this.spec.jobTemplate.metadata.annotations;
         }
         if (!this.spec.template.metadata) {
-          this.$set(this.spec.template, 'metadata', { annotations: {} });
+          this.spec.template['metadata'] = { annotations: {} };
         }
 
         return this.spec.template.metadata.annotations;
       },
       set(neu) {
         if (this.isCronJob) {
-          this.$set(this.spec.jobTemplate.metadata, 'annotations', neu);
+          this.spec.jobTemplate.metadata['annotations'] = neu;
         } else {
-          this.$set(this.spec.template.metadata, 'annotations', neu);
+          this.spec.template.metadata['annotations'] = neu;
         }
       },
     },
@@ -471,7 +471,7 @@ export default {
           },
         };
 
-        this.$set(this.container, 'resources', cleanUp(out));
+        this.container['resources'] = cleanUp(out);
       },
     },
 
@@ -493,7 +493,7 @@ export default {
     imagePullSecrets: {
       get() {
         if (!this.podTemplateSpec.imagePullSecrets) {
-          this.$set(this.podTemplateSpec, 'imagePullSecrets', []);
+          this.podTemplateSpec['imagePullSecrets'] = [];
         }
 
         const { imagePullSecrets } = this.podTemplateSpec;
@@ -586,23 +586,23 @@ export default {
         restartPolicy = 'Always';
       }
 
-      this.$set(template.spec, 'restartPolicy', restartPolicy);
+      template.spec['restartPolicy'] = restartPolicy;
 
       if (!this.isReplicable) {
         delete this.spec.replicas;
       }
 
       if (old === WORKLOAD_TYPES.CRON_JOB) {
-        this.$set(this.spec, 'template', { ...template });
+        this.spec['template'] = { ...template };
         delete this.spec.jobTemplate;
         delete this.spec.schedule;
       } else if (neu === WORKLOAD_TYPES.CRON_JOB) {
-        this.$set(this.spec, 'jobTemplate', { spec: { template } });
-        this.$set(this.spec, 'schedule', '0 * * * *');
+        this.spec['jobTemplate'] = { spec: { template } };
+        this.spec['schedule'] = '0 * * * *';
         delete this.spec.template;
       }
 
-      this.$set(this.value, 'type', neu);
+      this.value['type'] = neu;
       delete this.value.apiVersion;
     },
   },
@@ -813,7 +813,7 @@ export default {
 
       // delete this.value.kind;
       if (this.container && !this.container.name) {
-        this.$set(this.container, 'name', this.value.metadata.name);
+        this.container['name'] = this.value.metadata.name;
       }
 
       const ports = this.value.containers.reduce((total, each) => {
@@ -1030,29 +1030,29 @@ export default {
       const annotations = this.value?.metadata?.annotations;
 
       if (annotations) {
-        this.$delete(annotations, 'batch.kubernetes.io/job-tracking');
+        delete annotations['batch.kubernetes.io/job-tracking'];
       }
       const labels = this.value?.metadata?.labels;
 
       if (labels) {
-        this.$delete(labels, 'batch.kubernetes.io/controller-uid');
-        this.$delete(labels, 'batch.kubernetes.io/job-name');
-        this.$delete(labels, 'controller-uid');
-        this.$delete(labels, 'job-name');
+        delete labels['batch.kubernetes.io/controller-uid'];
+        delete labels['batch.kubernetes.io/job-name'];
+        delete labels['controller-uid'];
+        delete labels['job-name'];
       }
 
       const matchLabels = this.value?.spec?.selector?.matchLabels;
 
       if (matchLabels) {
-        this.$delete(matchLabels, 'batch.kubernetes.io/controller-uid');
+        delete matchLabels['batch.kubernetes.io/controller-uid'];
       }
       const templateLabels = this.value?.spec?.template?.metadata?.labels;
 
       if (templateLabels) {
-        this.$delete(templateLabels, 'batch.kubernetes.io/controller-uid');
-        this.$delete(templateLabels, 'batch.kubernetes.io/job-name');
-        this.$delete(templateLabels, 'controller-uid');
-        this.$delete(templateLabels, 'job-name');
+        delete templateLabels['batch.kubernetes.io/controller-uid'];
+        delete templateLabels['batch.kubernetes.io/job-name'];
+        delete templateLabels['controller-uid'];
+        delete templateLabels['job-name'];
       }
     }
   },

package/edit/workload/storage/ContainerMountPaths.vue

@@ -95,10 +95,10 @@ export default {
      */
     initializeStorage() {
       if (!this.container.volumeMounts) {
-        this.$set(this.container, 'volumeMounts', []);
+        this.container['volumeMounts'] = [];
       }
       if (!this.value.volumes) {
-        this.$set(this.value, 'volumes', []);
+        this.value['volumes'] = [];
       }
     },
 
@@ -197,8 +197,7 @@ export default {
   <div>
     <!-- Storage Volumes -->
     <ArrayListGrouped
-      :key="selectedContainerVolumes.length"
-      v-model="selectedContainerVolumes"
+      v-model:value="selectedContainerVolumes"
       :mode="mode"
       @remove="removeVolume"
     >

package/edit/workload/storage/Mount.vue

@@ -33,9 +33,12 @@ export default {
   computed: { ...mapGetters({ t: 'i18n/t' }) },
 
   watch: {
-    volumeMounts(neu) {
-      this.container.volumeMounts = (this.container.volumeMounts || []).filter((mount) => mount.name && (mount.name !== this.name));
-      this.container.volumeMounts.push(...neu);
+    volumeMounts: {
+      handler(neu) {
+        this.container.volumeMounts = (this.container.volumeMounts || []).filter((mount) => mount.name && (mount.name !== this.name));
+        this.container.volumeMounts.push(...neu);
+      },
+      deep: true
     },
 
     name(neu) {
@@ -90,22 +93,22 @@ export default {
       :key="i"
       class="mount-rows"
     >
-      <div>
+      <div :data-testid="`mount-path-${i}`">
         <LabeledInput
           :id="`mount-path-${i}`"
-          v-model="volumeMount.mountPath"
+          v-model:value="volumeMount.mountPath"
           :mode="mode"
         />
       </div>
       <div>
         <LabeledInput
-          v-model="volumeMount.subPath"
+          v-model:value="volumeMount.subPath"
           :mode="mode"
         />
       </div>
       <div class="read-only">
         <Checkbox
-          v-model="volumeMount.readOnly"
+          v-model:value="volumeMount.readOnly"
           :mode="mode"
         />
       </div>

package/edit/workload/storage/__tests__/Mount.test.ts

@@ -1,11 +1,12 @@
 import { mount } from '@vue/test-utils';
 import Mount from '@shell/edit//workload/storage/Mount.vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 describe('component: Mount', () => {
   it('should display alway at least 1 mount point input', () => {
     const wrapper = mount(Mount, {
-      propsData: { container: {} },
-      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } },
+      props:  { container: {} },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } },
     });
     const inputElement = wrapper.find('input').element as HTMLInputElement;
 
@@ -15,7 +16,7 @@ describe('component: Mount', () => {
   it('should display only values for the current name', () => {
     const name = 'test';
     const wrapper = mount(Mount, {
-      propsData: {
+      props: {
         name,
         container: {
           volumeMounts: [
@@ -30,7 +31,7 @@ describe('component: Mount', () => {
           ]
         }
       },
-      mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } },
     });
 
     const inputs = wrapper.findAll('[id^="mount-path-"]');
@@ -41,8 +42,8 @@ describe('component: Mount', () => {
   it('should add the new mount point', async() => {
     const name = 'test';
     const wrapper = mount(Mount, {
-      propsData: { name, container: {} },
-      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } },
+      props:  { name, container: {} },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } },
     });
 
     await wrapper.find('#add-mount').trigger('click');
@@ -55,8 +56,8 @@ describe('component: Mount', () => {
   it('should remove the mount point', async() => {
     const name = 'test';
     const wrapper = mount(Mount, {
-      propsData: { name, container: {} },
-      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } },
+      props:  { name, container: {} },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } },
     });
 
     await wrapper.find('#remove-mount').trigger('click');
@@ -69,11 +70,14 @@ describe('component: Mount', () => {
     const name = 'test';
     const mountPath = './';
     const wrapper = mount(Mount, {
-      propsData: { name, container: {} },
-      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } },
+      props:  { name, container: {} },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } },
     });
 
-    await wrapper.find('[id^="mount-path-"]').setValue(mountPath);
+    const pathComponent = wrapper.get('[data-testid="mount-path-0"]').getComponent(LabeledInput);
+
+    pathComponent.vm.$emit('update:value', mountPath);
+    await wrapper.vm.$nextTick();
     const result = wrapper.props('container');
 
     expect(result).toStrictEqual({ volumeMounts: [{ name, mountPath }] });
@@ -84,8 +88,8 @@ describe('component: Mount', () => {
     const newName = 'test';
     const mountPath = './';
     const wrapper = mount(Mount, {
-      propsData: { name, container: { volumeMounts: [{ name, mountPath }] } },
-      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } },
+      props:  { name, container: { volumeMounts: [{ name, mountPath }] } },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } },
     });
 
     await wrapper.setProps({ name: newName });

package/edit/workload/storage/__tests__/Storage.test.ts

@@ -19,7 +19,7 @@ describe('component: Storage', () => {
     it('should display the volume name as first input of the form array', () => {
       const name = 'whatever';
       const wrapper = mount(Storage, {
-        propsData: {
+        props: {
           savePvcHookName: '',
           value:           {
             volumes: [{
@@ -29,14 +29,16 @@ describe('component: Storage', () => {
             }]
           },
         },
-        mocks: {
-          t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
-          $store: {
-            getters: {
-              'i18n/t':      jest.fn().mockImplementation((key: string) => key),
-              'i18n/exists': jest.fn()
+        global: {
+          mocks: {
+            t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
+            $store: {
+              getters: {
+                'i18n/t':      jest.fn().mockImplementation((key: string) => key),
+                'i18n/exists': jest.fn()
+              }
             }
-          }
+          },
         },
       });
 
@@ -49,7 +51,7 @@ describe('component: Storage', () => {
       const name = 'whatever';
       const newName = 'new whatever';
       const wrapper = mount(Storage, {
-        propsData: {
+        props: {
           savePvcHookName: '',
           value:           {
             volumes: [{
@@ -59,14 +61,16 @@ describe('component: Storage', () => {
             }]
           },
         },
-        mocks: {
-          t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
-          $store: {
-            getters: {
-              'i18n/t':      jest.fn().mockImplementation((key: string) => key),
-              'i18n/exists': jest.fn()
+        global: {
+          mocks: {
+            t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
+            $store: {
+              getters: {
+                'i18n/t':      jest.fn().mockImplementation((key: string) => key),
+                'i18n/exists': jest.fn()
+              }
             }
-          }
+          },
         },
       });
 
@@ -80,10 +84,12 @@ describe('component: Storage', () => {
   // eslint-disable-next-line jest/no-disabled-tests
   it.skip('should allow to add a new volume', async() => {
     const wrapper = mount(Storage, {
-      propsData: { savePvcHookName: '' },
-      mocks:     {
-        t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
-        $store: { getters: { 'i18n/t': jest.fn() } }
+      props:  { savePvcHookName: '' },
+      global: {
+        mocks: {
+          t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
+          $store: { getters: { 'i18n/t': jest.fn() } }
+        },
       },
     });
 

package/edit/workload/storage/awsElasticBlockStore.vue

@@ -29,7 +29,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.name"
+          v-model:value="value.name"
           :required="true"
           :mode="mode"
           :label="t('workload.storage.volumeName')"
@@ -37,7 +37,7 @@ export default {
       </div>
       <div class="col span-6">
         <Checkbox
-          v-model="value.awsElasticBlockStore.readOnly"
+          v-model:value="value.awsElasticBlockStore.readOnly"
           :mode="mode"
           :label="t('workload.storage.readOnly')"
         />
@@ -46,7 +46,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.awsElasticBlockStore.volumeID"
+          v-model:value="value.awsElasticBlockStore.volumeID"
           :required="true"
           :mode="mode"
           :label="t('workload.storage.csi.volumeID')"
@@ -63,7 +63,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.awsElasticBlockStore.fsType"
+          v-model:value="value.awsElasticBlockStore.fsType"
           :mode="mode"
           :label="t('workload.storage.csi.fsType')"
         />

package/edit/workload/storage/azureDisk.vue

@@ -25,7 +25,7 @@ export default {
 
   created() {
     if (!this.value.kind) {
-      this.$set(this.value, 'kind', 'Shared');
+      this.value['kind'] = 'Shared';
     }
   },
 
@@ -37,7 +37,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.name"
+          v-model:value="value.name"
           :required="true"
           :mode="mode"
           :label="t('workload.storage.volumeName')"
@@ -45,7 +45,7 @@ export default {
       </div>
       <div class="col span-6">
         <Checkbox
-          v-model="value.azureDisk.readOnly"
+          v-model:value="value.azureDisk.readOnly"
           :mode="mode"
           :label="t('workload.storage.readOnly')"
         />
@@ -54,7 +54,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.azureDisk.diskName"
+          v-model:value="value.azureDisk.diskName"
           :mode="mode"
           :required="true"
           :label="t('workload.storage.csi.diskName')"
@@ -72,7 +72,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <RadioGroup
-          v-model="value.azureDisk.kind"
+          v-model:value="value.azureDisk.kind"
           :mode="mode"
           name="kind"
           :label="t('workload.storage.csi.kind.label')"
@@ -82,7 +82,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="value.azureDisk.cachingMode"
+          v-model:value="value.azureDisk.cachingMode"
           name="cachingMode"
           :mode="mode"
           :label="t('workload.storage.csi.cachingMode.label')"
@@ -94,7 +94,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.azureDisk.fsType"
+          v-model:value="value.azureDisk.fsType"
           :mode="mode"
           :label="t('workload.storage.csi.fsType')"
         />

package/edit/workload/storage/azureFile.vue

@@ -29,7 +29,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.name"
+          v-model:value="value.name"
           :required="true"
           :mode="mode"
           :label="t('workload.storage.volumeName')"
@@ -37,7 +37,7 @@ export default {
       </div>
       <div class="col span-6">
         <Checkbox
-          v-model="value.azureFile.readOnly"
+          v-model:value="value.azureFile.readOnly"
           :mode="mode"
           :label="t('workload.storage.readOnly')"
         />
@@ -46,7 +46,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.azureFile.shareName"
+          v-model:value="value.azureFile.shareName"
           :mode="mode"
           :required="true"
           :label="t('workload.storage.csi.shareName')"
@@ -54,7 +54,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.azureFile.secretName"
+          v-model:value="value.azureFile.secretName"
           :mode="mode"
           :required="true"
           :label="t('workload.storage.csi.secretName')"
@@ -64,7 +64,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.azureFile.fsType"
+          v-model:value="value.azureFile.fsType"
           :mode="mode"
           :label="t('workload.storage.csi.fsType')"
         />

package/edit/workload/storage/csi/driver.longhorn.io.vue

@@ -25,7 +25,7 @@ export default {
 
     for (const key in defaults) {
       if (!this.value[key]) {
-        this.$set(this.value, key, defaults[key]);
+        this.value[key] = defaults[key];
       }
     }
   }
@@ -36,10 +36,10 @@ export default {
   <div class="row">
     <div class="col span-12">
       <KeyValue
-        v-model="value"
+        :value="value"
         :mode="mode"
         :as-map="true"
-        @input="$emit('input', value)"
+        @update:value="$emit('update:value', value)"
       />
     </div>
   </div>

package/edit/workload/storage/csi/index.vue

@@ -53,7 +53,7 @@ export default {
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :required="true"
             :mode="mode"
             :label="t('workload.storage.volumeName')"
@@ -61,7 +61,7 @@ export default {
         </div>
         <div class="col span-6">
           <Checkbox
-            v-model="value.csi.readOnly"
+            v-model:value="value.csi.readOnly"
             :mode="mode"
             :label="t('workload.storage.readOnly')"
           />
@@ -70,7 +70,7 @@ export default {
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledSelect
-            v-model="value.csi.driver"
+            v-model:value="value.csi.driver"
             :mode="mode"
             :label="t('workload.storage.driver')"
             :options="driverOpts"
@@ -85,7 +85,7 @@ export default {
       >
         <component
           :is="driverComponent"
-          v-model="value.csi.volumeAttributes"
+          v-model:value="value.csi.volumeAttributes"
           :mode="mode"
         />
       </div>

package/edit/workload/storage/emptyDir.vue

@@ -44,7 +44,7 @@ export default {
         return this.value.emptyDir.medium ?? '';
       },
       set(v) {
-        this.$set(this.value.emptyDir, 'medium', v);
+        this.value.emptyDir['medium'] = v;
       }
     },
   },
@@ -55,7 +55,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.name"
+          v-model:value="value.name"
           :required="true"
           :mode="mode"
           :label="t('workload.storage.volumeName')"
@@ -63,7 +63,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledSelect
-          v-model="medium"
+          v-model:value="medium"
           :mode="mode"
           :label="t('workload.storage.emptyDir.medium.label')"
           :options="mediumOpts"
@@ -74,7 +74,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <UnitInput
-          v-model="value.emptyDir.sizeLimit"
+          v-model:value="value.emptyDir.sizeLimit"
           :mode="mode"
           :label="t('workload.storage.emptyDir.sizeLimit.label')"
           :increment="1024"