@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/__tests__/PodSecurityAdmission.test.ts

@@ -15,7 +15,7 @@ describe('component: PodSecurityAdmission', () => {
       namespaces: [], runtimeClasses: [], usernames: []
     }]
   ])('should emit %p and exemptions on creation if labels always active', (emission, value) => {
-    const wrapper = mount(PodSecurityAdmission, { propsData: { mode: 'create', labelsAlwaysActive: true } });
+    const wrapper = mount(PodSecurityAdmission, { props: { mode: 'create', labelsAlwaysActive: true } });
 
     expect(wrapper.emitted(emission)![0][0]).toStrictEqual(value);
   });
@@ -26,11 +26,18 @@ describe('component: PodSecurityAdmission', () => {
       ['', 'level'],
       ['', 'version'],
     ])('should display default value %p for input %p', (value, inputId) => {
-      const wrapper = mount(PodSecurityAdmission, { propsData: { mode: 'edit' } });
+      const wrapper = mount(PodSecurityAdmission, { props: { mode: 'edit' } });
 
-      const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+      const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`);
+      let element;
 
-      expect(input.value).toStrictEqual(value);
+      if (inputId === 'version') {
+        element = input.element;
+      } else {
+        element = input.find('input').element;
+      }
+
+      expect(element.value).toStrictEqual(value);
     });
 
     describe.each([
@@ -61,7 +68,7 @@ describe('component: PodSecurityAdmission', () => {
         };
 
         const wrapper = mount(PodSecurityAdmission, {
-          propsData: {
+          props: {
             mode:         'edit',
             labels,
             labelsPrefix: prefix
@@ -82,14 +89,14 @@ describe('component: PodSecurityAdmission', () => {
         };
 
         const wrapper = mount(PodSecurityAdmission, {
-          propsData: {
+          props: {
             mode:         'edit',
             labels,
             labelsPrefix: prefix
           }
         });
 
-        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).element as HTMLInputElement;
 
         expect(input.value).toStrictEqual(value);
       });
@@ -105,14 +112,14 @@ describe('component: PodSecurityAdmission', () => {
         };
 
         const wrapper = mount(PodSecurityAdmission, {
-          propsData: {
+          props: {
             mode:         'edit',
             labels,
             labelsPrefix: prefix
           }
         });
 
-        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).element as HTMLInputElement;
 
         expect(input.value).toStrictEqual(value);
       });
@@ -125,7 +132,7 @@ describe('component: PodSecurityAdmission', () => {
             [`${ prefix }enforce-version`]: version
           };
           const wrapper = mount(PodSecurityAdmission, {
-            propsData: {
+            props: {
               mode:         'edit',
               labels:       {},
               labelsPrefix: prefix
@@ -143,7 +150,7 @@ describe('component: PodSecurityAdmission', () => {
           });
 
           // Unable to toggle the checkbox, so we use the input
-          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).find('input').setValue(version);
+          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).setValue(version);
 
           expect(wrapper.emitted('updateLabels')![0][0]).toStrictEqual(newLabels);
         });
@@ -158,7 +165,7 @@ describe('component: PodSecurityAdmission', () => {
             [`${ prefix }enforce-version`]: 'latest',
           };
           const wrapper = mount(PodSecurityAdmission, {
-            propsData: {
+            props: {
               mode:         'edit',
               labels,
               labelsPrefix: prefix
@@ -187,14 +194,14 @@ describe('component: PodSecurityAdmission', () => {
           });
 
           // Unable to toggle the checkbox, so we use the input
-          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).find('input').setValue('');
+          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).setValue('');
 
           expect(wrapper.emitted('updateLabels')![0][0]).toStrictEqual(newLabels);
         });
 
         it('should assign default version and level if missing', () => {
           const wrapper = mount(PodSecurityAdmission, {
-            propsData: {
+            props: {
               mode:         'edit',
               labels:       {},
               labelsPrefix: prefix
@@ -216,7 +223,7 @@ describe('component: PodSecurityAdmission', () => {
           };
 
           // Unable to toggle the checkbox, so we use the input
-          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).find('input').setValue('');
+          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).setValue('');
 
           expect(wrapper.emitted('updateLabels')![0][0]).toStrictEqual(newLabels);
         });
@@ -226,21 +233,28 @@ describe('component: PodSecurityAdmission', () => {
     describe.each(['level', 'version'])('should keep always %p enabled', (inputId) => {
       it('given labelsAlwaysActive true and no labels', () => {
         const wrapper = mount(PodSecurityAdmission, {
-          propsData: {
+          props: {
             mode:               'edit',
             labelsAlwaysActive: true,
             labels:             {}
           },
         });
 
-        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`);
+        let element;
+
+        if (inputId === 'version') {
+          element = input.element;
+        } else {
+          element = input.find('input').element;
+        }
 
-        expect(input.disabled).toBe(false);
+        expect(element.disabled).toBe(false);
       });
 
       it('given existing values', () => {
         const wrapper = mount(PodSecurityAdmission, {
-          propsData: {
+          props: {
             mode:   'edit',
             labels: {
               [`enforce`]:         'baseline',
@@ -249,31 +263,45 @@ describe('component: PodSecurityAdmission', () => {
           },
         });
 
-        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`);
+        let element;
+
+        if (inputId === 'version') {
+          element = input.element;
+        } else {
+          element = input.find('input').element;
+        }
 
-        expect(input.disabled).toBe(false);
+        expect(element.disabled).toBe(false);
       });
     });
 
     describe.each(['level', 'version'])('should keep always %p disabled', (inputId) => {
       it('given labelsAlwaysActive false and no labels', () => {
         const wrapper = mount(PodSecurityAdmission, {
-          propsData: {
+          props: {
             mode:               'edit',
             labelsAlwaysActive: false,
             labels:             {}
           },
         });
 
-        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`);
+        let element;
 
-        expect(input.disabled).toBe(true);
+        if (inputId === 'version') {
+          element = input.element;
+        } else {
+          element = input.find('input').element;
+        }
+
+        expect(element.disabled).toBe(true);
       });
 
       it('given disabled active status', () => {
         const wrapper = mount(PodSecurityAdmission, {
-          propsData: { mode: 'edit' },
-          data:      () => ({
+          props: { mode: 'edit' },
+          data:  () => ({
             psaControls: {
               enforce: {
                 active:  false,
@@ -284,14 +312,21 @@ describe('component: PodSecurityAdmission', () => {
           }),
         });
 
-        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`);
+        let element;
+
+        if (inputId === 'version') {
+          element = input.element;
+        } else {
+          element = input.find('input').element;
+        }
 
-        expect(input.disabled).toBe(true);
+        expect(element.disabled).toBe(true);
       });
 
       it('given view mode and provided labels', () => {
         const wrapper = mount(PodSecurityAdmission, {
-          propsData: {
+          props: {
             mode:   'view',
             labels: {
               [`enforce`]:         'baseline',
@@ -300,9 +335,16 @@ describe('component: PodSecurityAdmission', () => {
           },
         });
 
-        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`);
+        let element;
+
+        if (inputId === 'version') {
+          element = input.element;
+        } else {
+          element = input.find('input').element;
+        }
 
-        expect(input.disabled).toBe(true);
+        expect(element.disabled).toBe(true);
       });
     });
 
@@ -310,13 +352,13 @@ describe('component: PodSecurityAdmission', () => {
       [true, false],
     ])('should display the checkbox %p', (value) => {
       const wrapper = mount(PodSecurityAdmission, {
-        propsData: {
+        props: {
           mode:               'edit',
           labelsAlwaysActive: value
         }
       });
 
-      const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-active"]`).element as HTMLInputElement;
+      const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-active"]`).exists();
 
       expect(!input).toBe(value);
     });
@@ -343,7 +385,7 @@ describe('component: PodSecurityAdmission', () => {
       };
 
       const wrapper = mount(PodSecurityAdmission, {
-        propsData: {
+        props: {
           mode: 'edit',
           exemptions,
         }
@@ -358,13 +400,13 @@ describe('component: PodSecurityAdmission', () => {
     ])('should map to the form, with value %p for input %p', (value, inputId) => {
       const exemptions = { usernames: [value] };
       const wrapper = mount(PodSecurityAdmission, {
-        propsData: {
+        props: {
           mode: 'edit',
           exemptions
         }
       });
 
-      const input = wrapper.find(`[data-testid="pod-security-admission--psaExemptionsControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+      const input = wrapper.find(`[data-testid="pod-security-admission--psaExemptionsControl-0-${ inputId }"]`).element as HTMLInputElement;
 
       expect(input.value).toStrictEqual(value);
     });
@@ -381,13 +423,13 @@ describe('component: PodSecurityAdmission', () => {
           runtimeClasses: []
         };
         const wrapper = mount(PodSecurityAdmission, {
-          propsData: {
+          props: {
             mode: 'edit',
             exemptions
           },
         });
         // Unable to toggle the checkbox, so we use the input
-        const input = wrapper.find(`[data-testid="pod-security-admission--psaExemptionsControl-0-value"]`).find('input');
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaExemptionsControl-0-value"]`);
 
         input.setValue(value);
 

package/components/__tests__/ProjectRow.test.ts

@@ -1,14 +1,13 @@
 import ProjectRow from '@shell/components/form/ResourceQuota/ProjectRow.vue';
 import { RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
 
 const CONFIGMAP_STRING = RANCHER_TYPES[0].value;
 
 describe('component: ProjectRow.vue', () => {
   const wrapper = shallowMount(ProjectRow,
     {
-      propsData: {
+      props: {
         mode:  'edit',
         types: RANCHER_TYPES,
         type:  CONFIGMAP_STRING,
@@ -34,11 +33,8 @@ describe('component: ProjectRow.vue', () => {
   });
 
   it('triggering "updateQuotaLimit" should trigger Vue.set with the correct data', () => {
-    const vueSet = jest.spyOn(Vue, 'set');
-
     wrapper.vm.updateQuotaLimit('resourceQuota', CONFIGMAP_STRING, 10);
 
-    expect(vueSet).toHaveBeenCalledTimes(1);
     expect(wrapper.vm.value).toStrictEqual({
       spec: {
         namespaceDefaultResourceQuota: { limit: {} },

package/components/__tests__/PromptRestore.test.ts

@@ -1,6 +1,7 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import PromptRestore from '@shell/components/PromptRestore.vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 import { DefaultProps } from 'vue/types/options';
 import { CAPI, NORMAN } from '@shell/config/types';
@@ -59,10 +60,6 @@ const RKE1_WITH_ERROR_SNAPSHOT = {
 };
 
 describe('component: PromptRestore', () => {
-  const localVue = createLocalVue();
-
-  localVue.use(Vuex);
-
   const rke2TestCases = [
     [[], 0],
     [[RKE2_FAILED_SNAPSHOT], 0],
@@ -72,7 +69,7 @@ describe('component: PromptRestore', () => {
   ];
 
   it.each(rke2TestCases)('should list RKE2 snapshots properly', async(snapShots, expected) => {
-    const store = new Vuex.Store({
+    const store = createStore({
       modules: {
         'action-menu': {
           namespaced: true,
@@ -91,13 +88,13 @@ describe('component: PromptRestore', () => {
       actions: { 'management/findAll': jest.fn().mockResolvedValue(snapShots), 'rancher/findAll': jest.fn().mockResolvedValue([]) }
     });
 
-    const wrapper = shallowMount(PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-      store,
-      localVue
-    });
+    const wrapper = shallowMount(
+      PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>,
+      { global: { mocks: { $store: store } } }
+    );
 
     await wrapper.vm.fetchSnapshots();
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.vm.clusterSnapshots).toHaveLength(expected);
   });
@@ -111,7 +108,7 @@ describe('component: PromptRestore', () => {
   ];
 
   it.each(rke1TestCases)('should list RKE1 snapshots properly', async(snapShots, expected) => {
-    const store = new Vuex.Store({
+    const store = createStore({
       modules: {
         'action-menu': {
           namespaced: true,
@@ -129,13 +126,13 @@ describe('component: PromptRestore', () => {
       actions: { 'rancher/findAll': jest.fn().mockResolvedValue(snapShots) }
     });
 
-    const wrapper = shallowMount(PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-      store,
-      localVue
-    });
+    const wrapper = shallowMount(
+      PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>,
+      { global: { mocks: { $store: store } } }
+    );
 
     await wrapper.vm.fetchSnapshots();
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.vm.clusterSnapshots).toHaveLength(expected);
   });

package/components/__tests__/TabTitle.test.ts

@@ -1,13 +1,9 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import TabTitle from '@shell/components/TabTitle.vue';
 import * as privateLabel from '@shell/config/private-label';
 import * as title from '@shell/utils/title';
 
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
-
 describe('component: TabTitle', () => {
   function createMocks(): any {
     const mocks = {
@@ -31,7 +27,7 @@ describe('component: TabTitle', () => {
   }
 
   function mockStore(mocks: any) {
-    return new Vuex.Store({
+    return createStore({
       getters: {
         isExplorer() {
           return mocks.isExplorer;
@@ -56,7 +52,8 @@ describe('component: TabTitle', () => {
     const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
-      slots: { default: mocks.child }, store, localVue
+      slots:  { default: mocks.child },
+      global: { mocks: { $store: store } }
     });
 
     expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.vendor, mocks.currentCluster.nameDisplay, mocks.child]);
@@ -69,7 +66,8 @@ describe('component: TabTitle', () => {
     const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
-      slots: { default: mocks.child }, store, localVue
+      slots:  { default: mocks.child },
+      global: { mocks: { $store: store } }
     });
 
     expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.vendor, mocks.currentCluster.nameDisplay, mocks.child]);
@@ -83,7 +81,8 @@ describe('component: TabTitle', () => {
     const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
-      slots: { default: mocks.child }, store, localVue
+      slots:  { default: mocks.child },
+      global: { mocks: { $store: store } }
     });
 
     expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.vendor, mocks.withFallback, mocks.child]);
@@ -93,10 +92,14 @@ describe('component: TabTitle', () => {
     const mocks = createMocks();
     const store = mockStore(mocks);
 
-    global.console = { error: jest.fn() };
+    global.console = {
+      warn:  jest.fn(),
+      error: jest.fn()
+    };
 
     shallowMount(TabTitle, {
-      slots: { }, store, localVue
+      slots:  { default: jest.fn() },
+      global: { mocks: { $store: store } }
     });
 
     expect(console.error).toHaveBeenCalledWith('The <TabTitle> component only supports text as the child.'); // eslint-disable-line no-console
@@ -107,7 +110,9 @@ describe('component: TabTitle', () => {
     const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
-      slots: { default: mocks.child }, propsData: { breadcrumb: false }, store, localVue
+      slots:  { default: mocks.child },
+      props:  { breadcrumb: false },
+      global: { mocks: { $store: store } }
     });
 
     expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.child]);
@@ -121,7 +126,9 @@ describe('component: TabTitle', () => {
     const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
-      slots: { default: mocks.child }, propsData: { includeVendor: false }, store, localVue
+      slots:  { default: mocks.child },
+      props:  { includeVendor: false },
+      global: { mocks: { $store: store } }
     });
 
     expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.currentCluster.nameDisplay, mocks.child]);

package/components/auth/AllowedPrincipals.vue

@@ -4,7 +4,7 @@ import ArrayList from '@shell/components/form/ArrayList';
 import Principal from '@shell/components/auth/Principal';
 import SelectPrincipal from '@shell/components/auth/SelectPrincipal';
 import { _EDIT } from '@shell/config/query-params';
-import { addObject } from '@shell/utils/array';
+import uniq from 'lodash/uniq';
 
 export default {
   components: {
@@ -48,15 +48,15 @@ export default {
 
   created() {
     if ( !this.authConfig.accessMode ) {
-      this.$set(this.authConfig, 'accessMode', 'restricted');
+      this.authConfig['accessMode'] = 'restricted';
     } if (!this.authConfig.allowedPrincipalIds) {
-      this.$set(this.authConfig, 'allowedPrincipalIds', []);
+      this.authConfig['allowedPrincipalIds'] = [];
     }
   },
 
   methods: {
     addPrincipal(id) {
-      addObject(this.authConfig.allowedPrincipalIds, id);
+      this.authConfig.allowedPrincipalIds = uniq([...this.authConfig.allowedPrincipalIds, id]);
     },
   }
 };
@@ -69,7 +69,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <RadioGroup
-          v-model="authConfig.accessMode"
+          v-model:value="authConfig.accessMode"
           name="accessMode"
           :mode="mode"
           :options="accessModeOptions"
@@ -85,14 +85,13 @@ export default {
         <ArrayList
           v-if="accessMode!=='unrestricted'"
           key="allowedPrincipalIds"
-          v-model="authConfig.allowedPrincipalIds"
+          v-model:value="authConfig.allowedPrincipalIds"
           title-key="authConfig.allowedPrincipalIds.label"
           :mode="mode"
           :protip="false"
         >
           <template #value="{row}">
             <Principal
-              :key="row.value"
               :value="row.value"
             />
           </template>