@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/formatter/__tests__/Checked.test.ts

@@ -3,14 +3,14 @@ import Checked from '@shell/components/formatter/Checked.vue';
 
 describe('component: Checked', () => {
   it.each([true, 'true'])('should display a checkmark when the value is true or "true"', (value: any) => {
-    const wrapper = mount(Checked, { propsData: { value } });
+    const wrapper = mount(Checked, { props: { value } });
     const checkmark = wrapper.find('.icon-checkmark');
 
     expect(checkmark.exists()).toBe(true);
   });
 
   it.each([false, '', 'abc'])('should not display a checkmark when the value is anything other than true or "true"', (value: any) => {
-    const wrapper = mount(Checked, { propsData: { value } });
+    const wrapper = mount(Checked, { props: { value } });
 
     const checkmark = wrapper.find('.icon-checkmark');
 

package/components/formatter/__tests__/ClusterLink.test.ts

@@ -18,7 +18,7 @@ describe('component: ClusterLink', () => {
       'should show/hide properly based on on the number of unavailable machines',
       (unavailableMachines, expected) => {
         const wrapper = mount(ClusterLink, {
-          propsData: {
+          props: {
             row: {
               hasError:           false,
               status:             {},
@@ -46,7 +46,7 @@ describe('component: ClusterLink', () => {
       'should show/hide properly based on rkeTemplateUpgrade',
       (rkeTemplateUpgrade, expected) => {
         const wrapper = mount(ClusterLink, {
-          propsData: {
+          props: {
             row: {
               hasError:            false,
               status:              {},
@@ -82,7 +82,7 @@ describe('component: ClusterLink', () => {
       'should show/hide properly based on the status conditions',
       (conditions, expected) => {
         const wrapper = mount(ClusterLink, {
-          propsData: {
+          props: {
             row: {
               hasError:            true,
               status:              { conditions },

package/components/formatter/__tests__/Date.test.ts

@@ -10,8 +10,8 @@ describe('component: Date formatter', () => {
     const inputTime = dayjs().toString();
     const expectedDate = dayjs(inputTime).format(dateFormat);
     const wrapper = await mount(Date, {
-      propsData: { value: inputTime, showTime: false },
-      mocks:     { $store: { getters: { 'prefs/get': () => dateFormat } } }
+      props:  { value: inputTime, showTime: false },
+      global: { mocks: { $store: { getters: { 'prefs/get': () => dateFormat } } } }
     });
     const element = wrapper.find('span');
 
@@ -25,8 +25,8 @@ describe('component: Date formatter', () => {
     const inputTime = dayjs().toString();
     const expectedDate = dayjs(inputTime).format(timeFormat);
     const wrapper = await mount(Date, {
-      propsData: { value: inputTime, showDate: false },
-      mocks:     { $store: { getters: { 'prefs/get': () => timeFormat } } }
+      props:  { value: inputTime, showDate: false },
+      global: { mocks: { $store: { getters: { 'prefs/get': () => timeFormat } } } }
     });
     const element = wrapper.find('span');
 
@@ -38,8 +38,8 @@ describe('component: Date formatter', () => {
     'hr'
   ])('use custom tag provided by tagName prop', async(tagName) => {
     const wrapper = await mount(Date, {
-      propsData: { value: dayjs().toString(), tagName },
-      mocks:     { $store: { getters: { 'prefs/get': jest.fn() } } }
+      props:  { value: dayjs().toString(), tagName },
+      global: { mocks: { $store: { getters: { 'prefs/get': jest.fn() } } } }
     });
     const element = wrapper.find(tagName);
 
@@ -51,8 +51,8 @@ describe('component: Date formatter', () => {
     false
   ])('should render day and time on different lines if configured', async(multiline) => {
     const wrapper = await mount(Date, {
-      propsData: { value: dayjs().toString(), multiline },
-      mocks:     { $store: { getters: { 'prefs/get': jest.fn() } } }
+      props:  { value: dayjs().toString(), multiline },
+      global: { mocks: { $store: { getters: { 'prefs/get': jest.fn() } } } }
     });
 
     expect(wrapper.find('br').exists()).toBe(multiline);

package/components/formatter/__tests__/LinkDetail.test.ts

@@ -5,8 +5,8 @@ describe('component: LinkDetail', () => {
   it('should display the value', async() => {
     const location = 'route-somewhere';
     const wrapper = await mount(LinkDetail, {
-      propsData: { row: { detailLocation: location }, value: 'test-name' },
-      stubs:     { 'router-link': RouterLinkStub }
+      props:  { row: { detailLocation: location }, value: 'test-name' },
+      global: { stubs: { 'router-link': RouterLinkStub } }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -17,8 +17,8 @@ describe('component: LinkDetail', () => {
   it('should use rows detailLocation to render a link', async() => {
     const location = 'route-somewhere';
     const wrapper = await mount(LinkDetail, {
-      propsData: { row: { detailLocation: location } },
-      stubs:     { 'router-link': RouterLinkStub }
+      props:  { row: { detailLocation: location } },
+      global: { stubs: { 'router-link': RouterLinkStub } }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -28,10 +28,10 @@ describe('component: LinkDetail', () => {
 
   it('should render the value in a span if no location is provided', async() => {
     const wrapper = await mount(LinkDetail, {
-      propsData: {
+      props: {
         row: { detailLocation: null }, value: 'test-name', col: { }
       },
-      stubs: { 'router-link': RouterLinkStub }
+      global: { stubs: { 'router-link': RouterLinkStub } }
     });
     const span = wrapper.find('span span');
 
@@ -45,10 +45,10 @@ describe('component: LinkDetail', () => {
   it('should use getCustomDetailLink if defined', async() => {
     const location = 'route-somewhere';
     const wrapper = await mount(LinkDetail, {
-      propsData: {
+      props: {
         row: { detailLocation: location }, value: 'test-name', col: { }, getCustomDetailLink: () => 'custom-link'
       },
-      stubs: { 'router-link': RouterLinkStub }
+      global: { stubs: { 'router-link': RouterLinkStub } }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -59,10 +59,10 @@ describe('component: LinkDetail', () => {
   it('should use reference to find location if defined', async() => {
     const location = 'route-somewhere';
     const wrapper = await mount(LinkDetail, {
-      propsData: {
+      props: {
         row: { detailLocation: location, otherKey: 'other-location' }, value: 'test-name', col: { }, reference: 'otherKey'
       },
-      stubs: { 'router-link': RouterLinkStub }
+      global: { stubs: { 'router-link': RouterLinkStub } }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);

package/components/formatter/__tests__/LiveDate.test.ts

@@ -17,7 +17,7 @@ const defaultMock = {
 
 describe('component: LiveDate', () => {
   it('should show a dash if no date is provided', () => {
-    const wrapper = mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { mocks: defaultMock });
+    const wrapper = mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { global: { mocks: defaultMock } });
     const element = wrapper.find('span');
 
     expect(element.text()).toBe('-');
@@ -25,8 +25,8 @@ describe('component: LiveDate', () => {
 
   it('should say just now when the time provided is the current time', async() => {
     const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-      mocks:     defaultMock,
-      propsData: { value: dayjs().toString() }
+      props:  { value: dayjs().toString() },
+      global: { mocks: defaultMock }
     });
 
     const element = wrapper.find('span');
@@ -35,18 +35,21 @@ describe('component: LiveDate', () => {
   });
 
   it('should display difference between value and current time', async() => {
-    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { mocks: defaultMock, propsData: { value: Date.now() - 5000 } });
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      props:  { value: Date.now() - 5000 },
+      global: { mocks: defaultMock }
+    });
 
     const element = wrapper.find('span');
 
-    expect(element.text()).toContain('5 secs');
+    expect(element.text()).toContain('5 %unit.sec%');
   });
 
   // this test calls a component method directly: we're testing this because it's how 'live' formatters are used in sortabletable
   it('should recompute and update the displayed value when prompted', async() => {
     const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-      mocks:     defaultMock,
-      propsData: { value: dayjs().toString() }
+      props:  { value: dayjs().toString() },
+      global: { mocks: defaultMock }
     });
 
     let element = wrapper.find('span');
@@ -56,25 +59,28 @@ describe('component: LiveDate', () => {
     await wrapper.vm.liveUpdate(Date.now());
 
     element = wrapper.find('span');
-    expect(element.text()).toContain('1 sec');
+    expect(element.text()).toContain('1 %unit.sec%');
   });
 
   it('should include ago suffix if enabled', async() => {
-    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { mocks: defaultMock, propsData: { value: Date.now() - 5000, addSuffix: true } });
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      props:  { value: Date.now() - 5000, addSuffix: true },
+      global: { mocks: defaultMock }
+    });
 
     const element = wrapper.find('span');
 
-    expect(element.text()).toContain('5 secs ago');
+    expect(element.text()).toContain('5 %unit.sec% ago');
   });
 
   it.each([
-    [86400000, '1 day'],
-    [82800000, '23 hours'],
-    [3540000, '59 mins']
+    [86400000, '1 %unit.day%'],
+    [82800000, '23 %unit.hour%'],
+    [3540000, '59 %unit.min%']
   ])('should use the largest sensible time unit', async(msAgo, displayValue) => {
     const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-      mocks:     defaultMock,
-      propsData: { value: Date.now() - msAgo }
+      props:  { value: Date.now() - msAgo },
+      global: { mocks: defaultMock }
     });
 
     const element = wrapper.find('span');

package/components/formatter/__tests__/PodsUsage.test.ts

@@ -4,7 +4,7 @@ import PodsUsage from '@shell/components/formatter/PodsUsage.vue';
 describe('component: PodsUsage', () => {
   it('should display podsUsage value', () => {
     const wrapper = mount(PodsUsage, {
-      propsData: {
+      props: {
         row: {
           isReady: true,
           mgmt:    {
@@ -15,7 +15,7 @@ describe('component: PodsUsage', () => {
           }
         }
       },
-      mocks: { $store: { dispatch: { 'management/request': jest.fn() } } }
+      global: { mocks: { $store: { dispatch: { 'management/request': jest.fn() } } } }
     });
 
     const { element } = wrapper.find('p');
@@ -25,7 +25,7 @@ describe('component: PodsUsage', () => {
   });
   it('should display dash when there are no totalPods', () => {
     const wrapper = mount(PodsUsage, {
-      propsData: {
+      props: {
         row: {
           isReady: true,
           mgmt:    {
@@ -36,7 +36,7 @@ describe('component: PodsUsage', () => {
           }
         }
       },
-      mocks: { $store: { dispatch: { 'management/request': jest.fn() } } }
+      global: { mocks: { $store: { dispatch: { 'management/request': jest.fn() } } } }
     });
 
     const { element } = wrapper.find('p');
@@ -45,7 +45,7 @@ describe('component: PodsUsage', () => {
     expect(element.textContent).toBe('—');
   });
   it('should display a dash when there is no management cluster ti query for status', () => {
-    const wrapper = mount(PodsUsage, { propsData: { row: { isReady: true } } });
+    const wrapper = mount(PodsUsage, { props: { row: { isReady: true } } });
 
     const { element } = wrapper.find('p');
 

package/components/formatter/__tests__/Si.test.ts

@@ -3,7 +3,7 @@ import Si from '@shell/components/formatter/Si.vue';
 
 describe('component: Si formatter', () => {
   it('should format integers as Bytes', async() => {
-    const wrapper = await mount(Si, { propsData: { value: 13 } });
+    const wrapper = await mount(Si, { props: { value: 13 } });
 
     const element = wrapper.find('span');
 
@@ -15,7 +15,7 @@ describe('component: Si formatter', () => {
     ['1024', '1 KiB'],
     ['2048 GiB', '2 TiB']
   ])('should parse and re-format Si input strings', async(input, out) => {
-    const wrapper = await mount(Si, { propsData: { value: input, needParseSi: true } });
+    const wrapper = await mount(Si, { props: { value: input, needParseSi: true } });
 
     const element = wrapper.find('span');
 
@@ -24,7 +24,7 @@ describe('component: Si formatter', () => {
 
   it('should allow additional si formatting opts', async() => {
     const wrapper = await mount(Si, {
-      propsData: {
+      props: {
         value: '1 TiB', needParseSi: true, opts: { maxExponent: 3 }
       }
     });

package/components/formatter/__tests__/WorkloadDetailEndpoints.test.ts

@@ -56,8 +56,8 @@ describe('component: WorkloadDetailEndpoints', () => {
     [withoutAddresses, basicNodesOutput, ['https://some-external-ip:443']],
   ])('should display a link given the appropriate conditions', (value:any[], nodesOutput:any[], expectationArr:any[]) => {
     const wrapper = mount(WorkloadDetailEndpoints, {
-      propsData: { value: JSON.stringify(value) },
-      mocks:     { $store: { getters: { 'cluster/all': () => nodesOutput } } }
+      props:  { value: JSON.stringify(value) },
+      global: { mocks: { $store: { getters: { 'cluster/all': () => nodesOutput } } } }
     });
 
     wrapper.vm.parsed.forEach((endpoint:{[key: string]: string}, i:number) => {
@@ -66,11 +66,11 @@ describe('component: WorkloadDetailEndpoints', () => {
   });
 
   it.each([
-    [withoutAddresses, [], ['[some-translation]:443']],
+    [withoutAddresses, [], ['[%servicesPage.anyNode%]:443']],
   ])('should render a Tag component with the appropriate content', (value:any[], nodesOutput:any[], expectationArr:any[]) => {
     const wrapper = mount(WorkloadDetailEndpoints, {
-      propsData: { value: JSON.stringify(value) },
-      mocks:     { $store: { getters: { 'cluster/all': () => nodesOutput, 'i18n/t': () => 'some-translation' } } }
+      props:  { value: JSON.stringify(value) },
+      global: { mocks: { $store: { getters: { 'cluster/all': () => nodesOutput } } } }
     });
 
     wrapper.vm.parsed.forEach((endpoint:{[key: string]: string}, i:number) => {

package/components/graph/LinePlot.vue

@@ -139,13 +139,12 @@ export default {
       :class="`lines--${i}`"
     >
       <path
-        :key="i"
         :d="lines[i]"
         class="line"
       />
       <circle
         v-for="(point, index) in set.points"
-        :key="`${index}--circle`"
+        :key="index"
         class="data-circle"
         r="4"
         :cx="scaleX([0, 10], index)"

package/components/nav/Group.vue

@@ -5,6 +5,8 @@ export default {
 
   components: { Type },
 
+  emits: ['expand', 'close'],
+
   props: {
     depth: {
       type:    Number,
@@ -73,7 +75,7 @@ export default {
         if (overviewRoute && grp.overview) {
           const route = this.$router.resolve(overviewRoute || {});
 
-          return this.$route.fullPath.split('#')[0] === route?.route?.fullPath;
+          return this.$route.fullPath.split('#')[0] === route?.fullPath;
         }
       }
 
@@ -165,7 +167,7 @@ export default {
           const withoutHash = this.$route.hash ? this.$route.fullPath.slice(0, this.$route.fullPath.indexOf(this.$route.hash)) : this.$route.fullPath;
           const withoutQuery = withoutHash.split('?')[0];
 
-          if (matchesNavLevel || this.$router.resolve(item.route).route.fullPath === withoutQuery) {
+          if (matchesNavLevel || this.$router.resolve(item.route).fullPath === withoutQuery) {
             return true;
           }
         }
@@ -236,7 +238,10 @@ export default {
       class="list-unstyled body"
       v-bind="$attrs"
     >
-      <template v-for="(child, idx) in group[childrenKey]">
+      <template
+        v-for="(child, idx) in group[childrenKey]"
+        :key="idx"
+      >
         <li
           v-if="child.divider"
           :key="idx"
@@ -392,8 +397,8 @@ export default {
     }
   }
 
-  .body ::v-deep > .child.router-link-active,
-  .header ::v-deep > .child.router-link-exact-active {
+  .body :deep() > .child.router-link-active,
+  .header :deep() > .child.router-link-exact-active {
     padding: 0;
 
     A, A I {
@@ -407,7 +412,7 @@ export default {
     }
   }
 
-  .body ::v-deep > .child {
+  .body :deep() > .child {
     A {
       border-left: solid 5px transparent;
       line-height: 16px;