@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/form/__tests__/Taints.test.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import Taints from '@shell/components/form/Taints.vue';
 
@@ -6,29 +7,29 @@ describe('component: Taints', () => {
     const customEffects = { FOO_EFFECT: 'foo', BAR_EFFECT: 'bar' };
 
     const wrapper = mount(Taints, {
-      propsData: {
+      props: {
         value:        [{ effect: 'FOO_EFFECT', value: 'abc' }],
         effectValues: customEffects
       }
     });
 
-    const firstEffectInput = wrapper.find('[data-testid="taints-effect-row-0"]');
+    const firstEffectInput = wrapper.findComponent('[data-testid="taints-effect-row-0"]');
 
     expect(firstEffectInput.exists()).toBe(true);
 
-    expect(firstEffectInput.props().value).toBe('FOO_EFFECT');
-    expect(firstEffectInput.props().options).toStrictEqual([{ value: 'FOO_EFFECT', label: 'foo' }, { value: 'BAR_EFFECT', label: 'bar' }]);
+    expect(firstEffectInput.props().modelValue).toBe('FOO_EFFECT');
+    expect(wrapper.vm.effectOptions).toStrictEqual([{ value: 'FOO_EFFECT', label: 'foo' }, { value: 'BAR_EFFECT', label: 'bar' }]);
 
-    const taintKV = wrapper.find('[data-testid="taints-keyvalue"]');
+    const taintKV = wrapper.findComponent('[data-testid="taints-keyvalue"]');
 
     taintKV.vm.add();
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
-    const secondEffectInput = wrapper.find('[data-testid="taints-effect-row-1"]');
+    const secondEffectInput = wrapper.findComponent('[data-testid="taints-effect-row-1"]');
 
     expect(secondEffectInput.exists()).toBe(true);
 
-    expect(secondEffectInput.props().value).toStrictEqual('FOO_EFFECT');
+    expect(secondEffectInput.props().modelValue).toBe('FOO_EFFECT');
     expect(wrapper.vm.defaultAddData).toStrictEqual({ effect: 'FOO_EFFECT' });
   });
 
@@ -41,29 +42,29 @@ describe('component: Taints', () => {
 
     ];
 
-    const wrapper = mount(Taints, { propsData: { value: [{ effect: '', value: 'abc' }] } });
+    const wrapper = mount(Taints, { props: { value: [{ effect: '', value: 'abc' }] } });
 
-    const firstEffectInput = wrapper.find('[data-testid="taints-effect-row-0"]');
+    const firstEffectInput = wrapper.findComponent('[data-testid="taints-effect-row-0"]');
 
     expect(firstEffectInput.exists()).toBe(true);
 
-    expect(firstEffectInput.props().value).toBe('');
-    expect(firstEffectInput.props().options).toStrictEqual(expectedEffectOptions);
+    expect(firstEffectInput.props().modelValue).toBe('');
+    expect(wrapper.vm.effectOptions).toStrictEqual(expectedEffectOptions);
   });
 
   it('should set the effect value to NoSchedule by default', async() => {
-    const wrapper = mount(Taints, { propsData: { value: [] } });
+    const wrapper = mount(Taints, { props: { value: [] } });
 
-    const taintKV = wrapper.find('[data-testid="taints-keyvalue"]');
+    const taintKV = wrapper.findComponent('[data-testid="taints-keyvalue"]');
 
     taintKV.vm.add();
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
-    const effectInput = wrapper.find('[data-testid="taints-effect-row-0"]');
+    const effectInput = wrapper.findComponent('[data-testid="taints-effect-row-0"]');
 
     expect(effectInput.exists()).toBe(true);
 
-    expect(effectInput.props().value).toStrictEqual('NoSchedule');
+    expect(effectInput.props().modelValue).toStrictEqual('NoSchedule');
 
     expect(wrapper.vm.defaultAddData).toStrictEqual({ effect: 'NoSchedule' });
   });

package/components/form/__tests__/UnitInput.test.ts

@@ -5,20 +5,20 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 describe('component: UnitInput', () => {
   it('should renders', () => {
-    const wrapper = mount(UnitInput, { propsData: { value: 1 } });
+    const wrapper = mount(UnitInput, { props: { value: 1 } });
 
     expect(wrapper.isVisible()).toBe(true);
   });
 
   it.each(['blur', 'change'])('should emit input event when "%p" is fired', async(event) => {
-    const wrapper = mount(UnitInput, { propsData: { value: 1, delay: 0 } });
+    const wrapper = mount(UnitInput, { props: { value: 1, delay: 0 } });
     const input = wrapper.find('input');
 
     await input.setValue(2);
     await input.setValue(4);
-    input.trigger(event);
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')[2]).toStrictEqual([4]);
   });
 
   it.each([
@@ -26,7 +26,7 @@ describe('component: UnitInput', () => {
     ['edit', false],
   ])('should contain input disabled status %p when in %p mode', (mode, status) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1,
         mode
       }
@@ -41,7 +41,7 @@ describe('component: UnitInput', () => {
     ['2G', '2000000000'],
     ['3', '3'],
   ])('should parse values with SI modifier %p and return %p', (value, expected) => {
-    const wrapper = mount(UnitInput, { propsData: { value } });
+    const wrapper = mount(UnitInput, { props: { value } });
     const label = wrapper.findComponent(LabeledInput);
 
     expect(label.props('value')).toBe(expected);
@@ -51,7 +51,7 @@ describe('component: UnitInput', () => {
     const inputExponent = 2;
     const baseUnit = 'B';
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1,
         inputExponent,
         baseUnit,
@@ -69,7 +69,7 @@ describe('component: UnitInput', () => {
     [false, 3000000000],
   ])('should (%p) force use of SI modifier and return %p', async(outputModifier, expected) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1, inputExponent: 3, outputModifier: !outputModifier
       }
     });
@@ -79,13 +79,13 @@ describe('component: UnitInput', () => {
     await inputWrapper.setValue(3);
     inputWrapper.trigger('blur');
 
-    expect(wrapper.emitted('input')![0][0]).toBe(expected);
+    expect(wrapper.emitted('update:value')![0][0]).toBe(expected);
   });
 
   it('should display defined SI unit', async() => {
     const inputExponent = 3;
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value:          1,
         inputExponent,
         outputModifier: true,
@@ -96,7 +96,7 @@ describe('component: UnitInput', () => {
     await input.setValue(2);
     input.trigger('blur');
 
-    expect(wrapper.emitted('input')![0][0]).toContain(UNITS[inputExponent]);
+    expect(wrapper.emitted('update:value')![0][0]).toContain(UNITS[inputExponent]);
   });
 
   it.each([
@@ -104,7 +104,7 @@ describe('component: UnitInput', () => {
     [1000, 'MB'],
   ])('based on increment %p and exponent M, it should use binary modifier and return unit %p', (increment, expected) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1, inputExponent: 2, increment
       }
     });
@@ -117,7 +117,7 @@ describe('component: UnitInput', () => {
     ['number'],
   ])('should force emission of value type as %p', (outputAs) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1, inputExponent: 3, outputAs
       }
     });
@@ -127,7 +127,7 @@ describe('component: UnitInput', () => {
     input.setValue(2);
     input.trigger('blur');
 
-    expect(typeof wrapper.emitted('input')![0][0]).toBe(outputAs);
+    expect(typeof wrapper.emitted('update:value')![0][0]).toBe(outputAs);
   });
 
   it.each([
@@ -135,7 +135,7 @@ describe('component: UnitInput', () => {
     ['Coolio', 'MCoolio'],
   ])('should appended base unit %p value to SI modifier and return %p', (baseUnit, expected) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1, baseUnit, inputExponent: 2
       }
     });
@@ -146,7 +146,7 @@ describe('component: UnitInput', () => {
 
   it('should display suffix outside of the value', () => {
     const suffix = 'seconds';
-    const wrapper = mount(UnitInput, { propsData: { value: 1, suffix } });
+    const wrapper = mount(UnitInput, { props: { value: 1, suffix } });
     const addonText = wrapper.find('.addon').text();
 
     const input = wrapper.find('input');
@@ -167,25 +167,21 @@ describe('component: UnitInput', () => {
     input.setValue(value);
     input.trigger('blur');
 
-    expect(wrapper.emitted('input')![0][0]).toBe(expectation);
+    expect(wrapper.emitted('update:value')![0][0]).toBe(expectation);
   });
 
   it('should not correct value to a valid integer while typing', () => {
     const value = 5096;
     const delay = 1;
-    const wrapper = mount(UnitInput, { propsData: { delay } });
+    const wrapper = mount(UnitInput, { props: { delay } });
     const input = wrapper.find('input');
 
-    jest.useFakeTimers();
-
     input.setValue('4096');
     input.setValue('096');
     input.setValue(value);
     input.trigger('blur');
-    jest.advanceTimersByTime(delay);
-    jest.useRealTimers();
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
-    expect(wrapper.emitted('input')![0][0]).toBe(value);
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')[4][0]).toBe(value);
   });
 });

package/components/form/labeled-select-utils/labeled-select.utils.ts

@@ -109,7 +109,7 @@ export async function labelSelectPaginationFunction<T>({
 
     return {
       page:  resPage,
-      pages: res.pages,
+      pages: res.pages || Math.ceil(res.count / (pageSize || Number.MAX_SAFE_INTEGER)),
       total: res.count
     };
   } catch (err) {

package/components/formatter/AppSummaryGraph.vue

@@ -85,7 +85,7 @@ export default {
 </script>
 
 <template>
-  <v-popover
+  <v-dropdown
     v-if="show"
     class="text-center hand"
     placement="top"
@@ -105,15 +105,15 @@ export default {
     </router-link>
     <span v-else>{{ displayLabel }}</span>
 
-    <template #popover>
+    <template #popper>
       <table
         v-if="show"
         class="fixed"
       >
         <tbody>
           <tr
-            v-for="obj in stateParts"
-            :key="obj.key"
+            v-for="(obj, i) in stateParts"
+            :key="i"
           >
             <td
               class="text-left pr-20"
@@ -128,7 +128,7 @@ export default {
         </tbody>
       </table>
     </template>
-  </v-popover>
+  </v-dropdown>
   <div
     v-else
     class="text-center text-muted"

package/components/formatter/ClusterLink.vue

@@ -93,7 +93,7 @@ export default {
     color: var(--error);
     margin-left: 4px;
   }
-  ::v-deep {
+  :deep() {
     .labeled-tooltip, .status-icon {
       position: relative;
       display: inline;

package/components/formatter/Endpoints.vue

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

package/components/formatter/FleetSummaryGraph.vue

@@ -59,7 +59,7 @@ export default {
 </script>
 
 <template>
-  <v-popover
+  <v-dropdown
     v-if="show"
     class="text-center hand"
     placement="top"
@@ -74,15 +74,15 @@ export default {
     <span v-if="summary.desiredReady === summary.ready">{{ summary.ready }}</span>
     <span v-else>{{ summary.ready }} of {{ summary.desiredReady }}</span>
 
-    <template #popover>
+    <template #popper>
       <table
         v-if="show"
         class="fixed"
       >
         <tbody>
           <tr
-            v-for="obj in stateParts"
-            :key="obj.label"
+            v-for="(obj, i) in stateParts"
+            :key="i"
           >
             <td
               class="text-left pr-20"
@@ -97,7 +97,7 @@ export default {
         </tbody>
       </table>
     </template>
-  </v-popover>
+  </v-dropdown>
   <div
     v-else
     class="text-center text-muted"

package/components/formatter/ListLink.vue

@@ -24,7 +24,7 @@ export default {
   <span>
     <span
       v-for="(el, i) in value"
-      :key="el.key"
+      :key="i"
     >
       <Link
         :row="el"

package/components/formatter/ListLinkDetail.vue

@@ -21,8 +21,8 @@ export default {
 <template>
   <span>
     <LinkDetail
-      v-for="el in value"
-      :key="el.key"
+      v-for="(el, i) in value"
+      :key="i"
       :row="row"
       v-bind="el"
     />

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,19 +29,19 @@ export default {
 </script>
 
 <template>
-  <v-popover
+  <v-dropdown
     class="text-center hand machine-summary-graph"
     placement="top"
     :open-group="row.id"
     trigger="click"
     offset="1"
   >
-    <template #popover>
+    <template #popper>
       <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"
@@ -83,7 +83,7 @@ export default {
       </span>
     </span>
 
-    <template #popover>
+    <template #popper>
       <div
         v-if="canAdjust"
         class="text-center pb-5"
@@ -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"
@@ -110,7 +110,7 @@ export default {
       </div>
     </div>
 
-    <template #popover>
+    <template #popper>
       <div
         v-if="canAdjust"
         class="text-center pb-5"
@@ -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>