@rancher/shell 2.0.1 → 3.0.0-rc.1

package/edit/workload/__tests__/Job.test.ts

@@ -10,7 +10,7 @@ describe('component: Job', () => {
       'failed',
     ])('should emit an update on %p input', (field) => {
       const wrapper = mount(Job, {
-        propsData: {
+        props: {
           mode: _EDIT,
           type: WORKLOAD_TYPES.CRON_JOB
         }
@@ -20,15 +20,15 @@ describe('component: Job', () => {
 
       input.setValue(newValue);
 
-      expect(wrapper.emitted('input')).toHaveLength(1);
+      expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
 
-    it.each([
+    it.skip.each([
       'concurrencyPolicy',
       'suspend',
-    ])('should emit an update on %p radio option change', (field) => {
+    ])('(Vue3 Skip) should emit an update on %p radio option change', (field) => {
       const wrapper = mount(Job, {
-        propsData: {
+        props: {
           mode: _EDIT,
           type: WORKLOAD_TYPES.CRON_JOB
         }
@@ -39,7 +39,7 @@ describe('component: Job', () => {
 
       radioOption.trigger('click');
 
-      expect(wrapper.emitted('input')).toHaveLength(1);
+      expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
   });
 
@@ -55,7 +55,7 @@ describe('component: Job', () => {
       'activeDeadlineSeconds',
     ])('should emit an update on %p input and blur', (field) => {
       const wrapper = mount(Job, {
-        propsData: {
+        props: {
           mode: _EDIT,
           type
         }
@@ -66,7 +66,7 @@ describe('component: Job', () => {
       input.setValue(newValue);
       input.trigger('blur');
 
-      expect(wrapper.emitted('input')).toHaveLength(1);
+      expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
   });
 });

package/edit/workload/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Workload from '@shell/edit/workload/index.vue';
 
 jest.mock('@shell/models/secret', () => ({ onmessage: jest.fn() }));
@@ -52,43 +52,46 @@ describe('component: Workload', () => {
         // tabWeightMap:     jest.fn(),
       }
     };
-    const localVue = createLocalVue();
+
     const MockedWorkload = { ...Workload, mixins: [mockedValidationMixin, mockedCREMixin, mockedWorkloadMixin] };
     const wrapper = shallowMount(MockedWorkload, {
-      localVue,
-      propsData: {
+      props: {
         value:         { metadata: {}, spec: { template: {} } },
         params:        {},
         fvFormIsValid: {}
       },
-      mocks: {
-        $route:      { params: {}, query: {} },
-        $router:     { applyQuery: jest.fn() },
-        $fetchState: { pending: false },
-        $store:      {
-          getters: {
-            'cluster/schemaFor': jest.fn(),
-            'type-map/labelFor': jest.fn(),
-            'i18n/t':            jest.fn(),
+
+      global: {
+        mocks: {
+          $route:      { params: {}, query: {} },
+          $router:     { applyQuery: jest.fn() },
+          $fetchState: { pending: false },
+          $store:      {
+            getters: {
+              'cluster/schemaFor': jest.fn(),
+              'type-map/labelFor': jest.fn(),
+              'i18n/t':            jest.fn(),
+            },
           },
         },
+
+        stubs: {
+          Tab:                 true,
+          LabeledInput:        true,
+          VolumeClaimTemplate: true,
+          Networking:          true,
+          Job:                 true,
+          NodeScheduling:      true,
+          PodAffinity:         true,
+          Tolerations:         true,
+          Storage:             true,
+          Tabbed:              true,
+          LabeledSelect:       true,
+          NameNsDescription:   true,
+          CruResource:         true,
+          KeyValue:            true
+        },
       },
-      stubs: {
-        Tab:                 true,
-        LabeledInput:        true,
-        VolumeClaimTemplate: true,
-        Networking:          true,
-        Job:                 true,
-        NodeScheduling:      true,
-        PodAffinity:         true,
-        Tolerations:         true,
-        Storage:             true,
-        Tabbed:              true,
-        LabeledSelect:       true,
-        NameNsDescription:   true,
-        CruResource:         true,
-        KeyValue:            true
-      }
     });
 
     const result = (wrapper.vm as any).mapError(oldMessage).message;

package/edit/workload/index.vue

@@ -112,7 +112,7 @@ export default {
           class="col span-3"
         >
           <LabeledInput
-            v-model="spec.schedule"
+            v-model:value="spec.schedule"
             type="cron"
             required
             :mode="mode"
@@ -139,7 +139,7 @@ export default {
           class="col span-3"
         >
           <LabeledSelect
-            v-model="spec.serviceName"
+            v-model:value="spec.serviceName"
             option-label="metadata.name"
             :reduce="service=>service.metadata.name"
             :mode="mode"
@@ -159,7 +159,7 @@ export default {
       >
         <Tab
           v-for="(tab, i) in allContainers"
-          :key="tab[idKey]"
+          :key="i"
           :label="tab.name"
           :name="tab[idKey]"
           :weight="tab.weight"
@@ -195,7 +195,7 @@ export default {
                 >
                   <div class="col span-6">
                     <LabeledInput
-                      v-model="allContainers[i].name"
+                      v-model:value="allContainers[i].name"
                       :mode="mode"
                       :label="t('workload.container.containerName')"
                     />
@@ -207,7 +207,7 @@ export default {
                       name="initContainer"
                       :options="[true, false]"
                       :labels="[t('workload.container.init'), t('workload.container.standard')]"
-                      @input="updateInitContainer($event, allContainers[i])"
+                      @update:value="updateInitContainer($event, allContainers[i])"
                     />
                   </div>
                 </div>
@@ -215,7 +215,7 @@ export default {
                 <div class="row mb-20">
                   <div class="col span-6">
                     <LabeledInput
-                      v-model.trim="allContainers[i].image"
+                      v-model:value.trim="allContainers[i].image"
                       :mode="mode"
                       :label="t('workload.container.image')"
                       :placeholder="t('generic.placeholder', {text: 'nginx:latest'}, true)"
@@ -224,7 +224,7 @@ export default {
                   </div>
                   <div class="col span-6">
                     <LabeledSelect
-                      v-model="allContainers[i].imagePullPolicy"
+                      v-model:value="allContainers[i].imagePullPolicy"
                       :label="t('workload.container.imagePullPolicy')"
                       :options="pullPolicyOptions"
                       :mode="mode"
@@ -234,7 +234,7 @@ export default {
                 <div class="row">
                   <div class="col span-6">
                     <LabeledSelect
-                      v-model="imagePullSecrets"
+                      v-model:value="imagePullSecrets"
                       :label="t('workload.container.imagePullSecrets.label')"
                       :multiple="true"
                       :taggable="true"
@@ -262,7 +262,7 @@ export default {
                 </p>
                 <div class="row">
                   <WorkloadPorts
-                    v-model="allContainers[i].ports"
+                    v-model:value="allContainers[i].ports"
                     :name="value.metadata.name"
                     :services="servicesOwned"
                     :mode="mode"
@@ -273,7 +273,7 @@ export default {
               <div>
                 <h3>{{ t('workload.container.titles.command') }}</h3>
                 <Command
-                  v-model="allContainers[i]"
+                  v-model:value="allContainers[i]"
                   :secrets="namespacedSecrets"
                   :config-maps="namespacedConfigMaps"
                   :mode="mode"
@@ -288,13 +288,13 @@ export default {
                 :options="namespacedServiceNames"
                 option-label="metadata.name"
                 :loading="isLoadingSecondaryResources"
-                @input="updateServiceAccount"
+                @update:value="updateServiceAccount"
               />
               <div class="spacer" />
               <div>
                 <h3>{{ t('workload.container.titles.lifecycle') }}</h3>
                 <LifecycleHooks
-                  v-model="allContainers[i].lifecycle"
+                  v-model:value="allContainers[i].lifecycle"
                   :mode="mode"
                 />
               </div>
@@ -306,7 +306,7 @@ export default {
             >
               <!-- Resources and Limitations -->
               <ContainerResourceLimit
-                v-model="flatResources"
+                v-model:value="flatResources"
                 :mode="mode"
                 :show-tip="false"
               />
@@ -321,7 +321,7 @@ export default {
               <HealthCheck
                 :value="allContainers[i]"
                 :mode="mode"
-                @input="Object.assign(allContainers[i], $event)"
+                @update:value="Object.assign(allContainers[i], $event)"
               />
             </Tab>
             <Tab
@@ -330,7 +330,7 @@ export default {
               :weight="tabWeightMap['securityContext']"
             >
               <Security
-                v-model="allContainers[i].securityContext"
+                v-model:value="allContainers[i].securityContext"
                 :mode="mode"
               />
             </Tab>
@@ -340,7 +340,7 @@ export default {
               :weight="tabWeightMap['storage']"
             >
               <ContainerMountPaths
-                v-model="podTemplateSpec"
+                v-model:value="podTemplateSpec"
                 :namespace="value.metadata.namespace"
                 :register-before-hook="registerBeforeHook"
                 :mode="mode"
@@ -366,8 +366,9 @@ export default {
               :weight="tabWeightMap['labels']"
             >
               <Labels
-                v-model="value"
+                :value="value"
                 :mode="mode"
+                @update:value="$emit('input', $event)"
               />
             </Tab>
             <Tab
@@ -377,13 +378,13 @@ export default {
             >
               <Job
                 v-if="isJob || isCronJob"
-                v-model="spec"
+                v-model:value="spec"
                 :mode="mode"
                 :type="type"
               />
               <Upgrading
                 v-else
-                v-model="spec"
+                v-model:value="spec"
                 :mode="mode"
                 :type="type"
                 :no-pod-spec="true"
@@ -403,7 +404,7 @@ export default {
               :weight="tabWeightMap['storage']"
             >
               <Storage
-                v-model="podTemplateSpec"
+                v-model:value="podTemplateSpec"
                 :namespace="value.metadata.namespace"
                 :register-before-hook="registerBeforeHook"
                 :mode="mode"
@@ -427,7 +428,7 @@ export default {
                   </h3>
                   <div class="row">
                     <Tolerations
-                      v-model="podTemplateSpec.tolerations"
+                      v-model:value="podTemplateSpec.tolerations"
                       :mode="mode"
                     />
                   </div>
@@ -448,7 +449,7 @@ export default {
                     </div>
                     <div class="col span-6">
                       <LabeledInput
-                        v-model="podTemplateSpec.priorityClassName"
+                        v-model:value="podTemplateSpec.priorityClassName"
                         :mode="mode"
                         :label="t('workload.scheduling.priority.className')"
                       />
@@ -488,13 +489,13 @@ export default {
             >
               <Job
                 v-if="isJob || isCronJob"
-                v-model="spec"
+                v-model:value="spec"
                 :mode="mode"
                 :type="type"
               />
               <Upgrading
                 v-else
-                v-model="spec"
+                v-model:value="spec"
                 :mode="mode"
                 :type="type"
                 :no-deployment-spec="true"
@@ -525,7 +526,7 @@ export default {
               :weight="tabWeightMap['networking']"
             >
               <Networking
-                v-model="podTemplateSpec"
+                v-model:value="podTemplateSpec"
                 :mode="mode"
               />
             </Tab>
@@ -536,7 +537,7 @@ export default {
               :weight="tabWeightMap['volumeClaimTemplates']"
             >
               <VolumeClaimTemplate
-                v-model="spec"
+                v-model:value="spec"
                 :mode="mode"
               />
             </Tab>
@@ -550,7 +551,7 @@ export default {
                 <div class="row mb-20">
                   <KeyValue
                     key="labels"
-                    v-model="podLabels"
+                    v-model:value="podLabels"
                     :add-label="t('labels.addLabel')"
                     :mode="mode"
                     :read-allowed="false"
@@ -562,7 +563,7 @@ export default {
                 <div class="row">
                   <KeyValue
                     key="annotations"
-                    v-model="podAnnotations"
+                    v-model:value="podAnnotations"
                     :add-label="t('labels.addAnnotation')"
                     :mode="mode"
                     :read-allowed="false"

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

@@ -93,19 +93,19 @@ export default {
       <div>
         <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>