@rancher/shell 2.0.1 → 3.0.0-rc.1

package/components/formatter/LiveExpiryBadgeState.vue

@@ -5,13 +5,17 @@ import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/reso
 import { safeSetTimeout } from '@shell/utils/time';
 
 export default {
-  components: { BadgeState },
-
-  props: {
+  components:   { BadgeState },
+  inheritAttrs: false,
+  props:        {
     row: {
       type:    Object,
       default: null,
     },
+    class: {
+      type:    String,
+      default: ''
+    }
   },
 
   data() {
@@ -21,6 +25,12 @@ export default {
   computed: {
     stateValue() {
       return this.state;
+    },
+
+    // We do this because we get a linter error vue/no-parsing-error (Parsing error: Unexpected end of expression)
+    // because class is a keyword and we can't disable the lint line in the template where it's needed
+    className() {
+      return this.class;
     }
   },
 
@@ -30,7 +40,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     clearTimeout(this.timer);
   },
 
@@ -62,5 +72,8 @@ export default {
 </script>
 
 <template>
-  <BadgeState :value="stateValue" />
+  <BadgeState
+    :value="stateValue"
+    :class="className"
+  />
 </template>

package/components/formatter/LiveExpiryDate.vue

@@ -30,7 +30,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     clearTimeout(this.timer);
   },
 

package/components/formatter/MachineSummaryGraph.vue

@@ -29,7 +29,7 @@ export default {
 </script>
 
 <template>
-  <v-popover
+  <v-dropdown
     class="text-center hand machine-summary-graph"
     placement="top"
     :open-group="row.id"
@@ -40,8 +40,8 @@ export default {
       <table class="fixed">
         <tbody>
           <tr
-            v-for="obj in row.stateParts"
-            :key="obj.label"
+            v-for="(obj, i) in row.stateParts"
+            :key="i"
           >
             <td
               class="text-left pr-20"
@@ -75,7 +75,7 @@ export default {
         class="count"
       >{{ ready }} of {{ row.desired }}</span>
     </div>
-  </v-popover>
+  </v-dropdown>
 </template>
 
 <style lang="scss" scoped>

package/components/formatter/PercentageBar.vue

@@ -35,7 +35,7 @@ export default {
   </p>
   <PercentageBarComponent
     v-else
-    :value="percentage"
+    :modelValue="percentage"
     :show-percentage="true"
   />
 </template>

package/components/formatter/Principal.vue

@@ -15,7 +15,6 @@ export default {
 <template>
   <div>
     <PrincipalComponent
-      :key="value"
       :value="value"
       :use-muted="false"
     />

package/components/formatter/PrincipalGroupBindings.vue

@@ -37,11 +37,11 @@ export default {
 
 <template>
   <div class="pgb">
-    <template v-for="(role, i) in boundRoles">
-      <router-link
-        :key="role.id"
-        :to="role.detailLocation"
-      >
+    <template
+      v-for="(role, i) in boundRoles"
+      :key="role.id"
+    >
+      <router-link :to="role.detailLocation">
         {{ role.label }}
       </router-link>
       <template v-if="i + 1 < boundRoles.length">

package/components/formatter/ReceiverIcons.vue

@@ -88,14 +88,16 @@ export default {
 
 <template>
   <span class="name-container">
-    <template v-for="(type, key, i) in types">
+    <template
+      v-for="(type, key, i) in types"
+      :key="i"
+    >
       <div
-        :key="key"
         class="logo"
       >
         <img :src="type.logo">
       </div>
-      <span :key="key+i">
+      <span>
         <span
           v-if="i<Object.keys(types).length-1"
           class="comma"

package/components/formatter/Scale.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <template>
-  <v-popover
+  <v-dropdown
     :class="{'hand': showHover}"
     placement="top"
     :open-group="row.id"
@@ -109,8 +109,8 @@ export default {
       >
         <tbody>
           <tr
-            v-for="obj in row.scaleParts"
-            :key="obj.label"
+            v-for="(obj, i) in row.scaleParts"
+            :key="i"
           >
             <td :class="{'text-left': true, [obj.textColor]: true}">
               {{ obj.label }}
@@ -122,7 +122,7 @@ export default {
         </tbody>
       </table>
     </template>
-  </v-popover>
+  </v-dropdown>
 </template>
 
 <style lang="scss">

package/components/formatter/ServiceTargets.vue

@@ -104,7 +104,7 @@ export default {
       class="text-small"
     >
       <Endpoints
-        v-model="parsed"
+        v-model:value="parsed"
         :row="{}"
         :col="{}"
       />

package/components/formatter/VirtualServiceGateways.vue

@@ -92,7 +92,7 @@ export default {
   <span>
     <span
       v-for="(gateway, i) in gateways"
-      :key="gateway"
+      :key="i"
     >
       <template v-if="i < 5">
         <router-link :to="gatewayLinks(gateway)">

package/components/formatter/Weight.vue

@@ -82,7 +82,7 @@ export default {
 </script>
 
 <template>
-  <v-popover
+  <v-dropdown
     :class="{'hand': canAdjust}"
     placement="top"
     :open-group="row.id"
@@ -143,5 +143,5 @@ export default {
         </form>
       </div>
     </template>
-  </v-popover>
+  </v-dropdown>
 </template>

package/components/formatter/WorkloadDetailEndpoints.vue

@@ -67,7 +67,10 @@ export default {
 
 <template>
   <span>
-    <template v-for="endpoint in parsed">
+    <template
+      v-for="(endpoint, i) in parsed"
+      :key="i"
+    >
       <Tag
         v-if="endpoint.display"
         :key="endpoint.display"

package/components/formatter/WorkloadHealthScale.vue

@@ -1,5 +1,4 @@
 <script>
-import Vue from 'vue';
 import ProgressBarMulti from '@shell/components/ProgressBarMulti';
 import PlusMinus from '@shell/components/form/PlusMinus';
 import { POD, SCALABLE_WORKLOAD_TYPES } from '@shell/config/types';
@@ -26,7 +25,7 @@ export default {
     },
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('click', this.onClickOutside);
   },
 
@@ -95,7 +94,7 @@ export default {
       await this.scale(true);
     },
     async scale(isUp) {
-      Vue.set(this, 'disabled', true);
+      this['disabled'] = true;
       try {
         if (isUp) {
           await this.row.scaleUp();
@@ -109,7 +108,7 @@ export default {
         },
         { root: true });
       }
-      Vue.set(this, 'disabled', false);
+      this['disabled'] = false;
     },
 
     insideBounds(bounding, bounds) {
@@ -201,8 +200,8 @@ export default {
     >
       <div>
         <div
-          v-for="obj in parts"
-          :key="obj.label"
+          v-for="(obj, i) in parts"
+          :key="i"
           class="counts"
         >
           <span class="counts-label">{{ obj.label }}</span>

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)"