@rancher/shell 2.0.1 → 3.0.0-rc.2

package/edit/workload/Upgrading.vue

@@ -140,7 +140,7 @@ export default {
       }
 
       if (podSpec) {
-        this.$set(podSpec, 'terminationGracePeriodSeconds', terminationGracePeriodSeconds);
+        podSpec['terminationGracePeriodSeconds'] = terminationGracePeriodSeconds;
       }
 
       switch (this.type) {
@@ -196,7 +196,7 @@ export default {
         break;
       }
 
-      this.$emit('input', this.value);
+      this.$emit('update:value', this.value);
     },
 
     updateWithUnits({ selected:units, text:value }, target) {
@@ -229,12 +229,12 @@ export default {
         data-testid="input-policy-strategy"
       >
         <RadioGroup
-          v-model="strategy"
+          v-model:value="strategy"
           name="strategy"
           :options="strategyOptions.options"
           :labels="strategyOptions.labels"
           :mode="mode"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -247,12 +247,12 @@ export default {
         data-testid="input-policy-pod"
       >
         <RadioGroup
-          v-model="podManagementPolicy"
+          v-model:value="podManagementPolicy"
           name="podManagement"
           :mode="mode"
           :label="t('workload.upgrading.podManagementPolicy.label')"
           :options="['OrderedReady', 'Parallel']"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -274,7 +274,7 @@ export default {
             :mode="mode"
             type="number"
             :options="['Pods', '%']"
-            @input="e=>updateWithUnits(e, 'maxSurge')"
+            @update:value="e=>updateWithUnits(e, 'maxSurge')"
           />
         </div>
         <div
@@ -289,7 +289,7 @@ export default {
             :mode="mode"
             type="number"
             :options="['Pods', '%']"
-            @input="e=>updateWithUnits(e, 'maxUnavailable')"
+            @update:value="e=>updateWithUnits(e, 'maxUnavailable')"
           />
         </div>
       </div>
@@ -306,12 +306,12 @@ export default {
         data-testid="input-policy-min"
       >
         <UnitInput
-          v-model="minReadySeconds"
+          v-model:value="minReadySeconds"
           :suffix="t('suffix.seconds', {count: minReadySeconds})"
           label-key="workload.upgrading.minReadySeconds.label"
           tooltip-key="workload.upgrading.minReadySeconds.tip"
           :mode="mode"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div
@@ -320,12 +320,12 @@ export default {
         data-testid="input-policy-limit"
       >
         <UnitInput
-          v-model="revisionHistoryLimit"
+          v-model:value="revisionHistoryLimit"
           :suffix="t('suffix.revisions', {count: revisionHistoryLimit})"
           label-key="workload.upgrading.revisionHistoryLimit.label"
           tooltip-key="workload.upgrading.revisionHistoryLimit.tip"
           :mode="mode"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -338,12 +338,12 @@ export default {
         data-testid="input-policy-deadline"
       >
         <UnitInput
-          v-model="progressDeadlineSeconds"
+          v-model:value="progressDeadlineSeconds"
           :suffix="t('suffix.seconds', {count: progressDeadlineSeconds})"
           label-key="workload.upgrading.progressDeadlineSeconds.label"
           tooltip-key="workload.upgrading.progressDeadlineSeconds.tip"
           :mode="mode"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -358,12 +358,12 @@ export default {
         data-testid="input-policy-termination"
       >
         <UnitInput
-          v-model="terminationGracePeriodSeconds"
+          v-model:value="terminationGracePeriodSeconds"
           :suffix="t('suffix.seconds', {count: terminationGracePeriodSeconds})"
           label-key="workload.upgrading.terminationGracePeriodSeconds.label"
           tooltip-key="workload.upgrading.terminationGracePeriodSeconds.tip"
           :mode="mode"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>

package/edit/workload/VolumeClaimTemplate.vue

@@ -52,7 +52,7 @@ export default {
 
   methods: {
     update() {
-      this.$set(this.value, 'volumeClaimTemplates', this.templates);
+      this.value['volumeClaimTemplates'] = this.templates;
     },
 
     updatePVC(pvc) {
@@ -69,7 +69,7 @@ export default {
 
     addPVC() {
       if (!this.value.volumeClaimTemplates) {
-        this.$set(this.value, 'volumeClaimTemplates', []);
+        this.value['volumeClaimTemplates'] = [];
       }
       this.templates = this.value.volumeClaimTemplates;
 
@@ -93,7 +93,7 @@ export default {
   <div>
     <div>
       <ArrayListGrouped
-        v-model="templates"
+        v-model:value="templates"
         class="mb-20"
         @input="update()"
       >

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

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import Job from '@shell/edit/workload/Job.vue';
 import { _EDIT } from '@shell/config/query-params';
 import { WORKLOAD_TYPES } from '@shell/config/types';
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 
 describe('component: Job', () => {
   describe('given CronJob types', () => {
@@ -10,7 +11,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,26 +21,25 @@ describe('component: Job', () => {
 
       input.setValue(newValue);
 
-      expect(wrapper.emitted('input')).toHaveLength(1);
+      expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
 
     it.each([
       'concurrencyPolicy',
       'suspend',
-    ])('should emit an update on %p radio option change', (field) => {
+    ])('should emit an update on %p radio option change', async(field) => {
       const wrapper = mount(Job, {
-        propsData: {
+        props: {
           mode: _EDIT,
           type: WORKLOAD_TYPES.CRON_JOB
         }
       });
       const radioOption = wrapper
         .find(`[data-testid="input-job-${ field }"]`)
-        .find('label');
+        .findComponent(RadioGroup);
 
-      radioOption.trigger('click');
-
-      expect(wrapper.emitted('input')).toHaveLength(1);
+      radioOption.vm.$emit('update:value', true);
+      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"
@@ -420,14 +421,14 @@ export default {
               name="resources"
               :weight="tabWeightMap['resources']"
             >
-              <template>
+              <div>
                 <div>
                   <h3 class="mb-10">
                     <t k="workload.scheduling.titles.tolerations" />
                   </h3>
                   <div class="row">
                     <Tolerations
-                      v-model="podTemplateSpec.tolerations"
+                      v-model:value="podTemplateSpec.tolerations"
                       :mode="mode"
                     />
                   </div>
@@ -448,14 +449,14 @@ 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')"
                       />
                     </div>
                   </div>
                 </div>
-              </template>
+              </div>
             </Tab>
             <Tab
               :label="t('workload.container.titles.podScheduling')"
@@ -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"