@rancher/shell 2.0.1 → 3.0.0-rc.2

package/rancher-components/Form/Checkbox/Checkbox.test.ts

@@ -39,8 +39,8 @@ describe('checkbox.vue', () => {
     wrapper.vm.clicked(event);
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.length).toBe(1);
-    expect(wrapper.emitted().input?.[0][0]).toBe(true);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')[0][0]).toBe(true);
   });
 
   it('emits an input event with a custom valueWhenTrue', async() => {
@@ -51,8 +51,8 @@ describe('checkbox.vue', () => {
     wrapper.vm.clicked(event);
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.length).toBe(1);
-    expect(wrapper.emitted().input?.[0][0]).toBe(valueWhenTrue);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')[0][0]).toBe(valueWhenTrue);
   });
 
   it('updates from valueWhenTrue to falsy', async() => {
@@ -63,6 +63,6 @@ describe('checkbox.vue', () => {
     wrapper.vm.clicked(event);
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.[0][0]).toBeNull();
+    expect(wrapper.emitted('update:value')[0][0]).toBeNull();
   });
 });

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -173,15 +173,15 @@ export default defineComponent({
         } else {
           addObject(value, this.valueWhenTrue);
         }
-        this.$emit('input', value);
+        this.$emit('update:value', value);
       } else if (this.isString(this.valueWhenTrue)) {
         if (this.isChecked) {
-          this.$emit('input', null);
+          this.$emit('update:value', null);
         } else {
-          this.$emit('input', this.valueWhenTrue);
+          this.$emit('update:value', this.valueWhenTrue);
         }
       } else {
-        this.$emit('input', !value);
+        this.$emit('update:value', !value);
         this.$el.dispatchEvent(click);
       }
     },

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -16,14 +16,14 @@ describe('component: LabeledInput', () => {
     jest.advanceTimersByTime(delay);
     jest.useRealTimers();
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
-    expect(wrapper.emitted('input')![0][0]).toBe(value);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')![0][0]).toBe(value);
   });
 
   it('using mode "multiline" should emit input value correctly', () => {
     const value = 'any-string';
     const delay = 1;
-    const wrapper = mount(LabeledInput as any, {
+    const wrapper = mount(LabeledInput, {
       propsData: { delay, multiline: true },
       mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
     });
@@ -34,7 +34,7 @@ describe('component: LabeledInput', () => {
     jest.advanceTimersByTime(delay);
     jest.useRealTimers();
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
-    expect(wrapper.emitted('input')![0][0]).toBe(value);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')![0][0]).toBe(value);
   });
 });

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent } from 'vue';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
@@ -97,6 +98,11 @@ export default defineComponent({
       type:    Number,
       default: 0
     },
+
+    class: {
+      type:    String,
+      default: ''
+    }
   },
 
   setup(props, { emit }) {
@@ -201,6 +207,10 @@ export default defineComponent({
 
       return undefined;
     },
+
+    className() {
+      return this.class;
+    }
   },
 
   created() {
@@ -251,7 +261,7 @@ export default defineComponent({
     delayInput(val: string | Event): void {
       const value = typeof val === 'string' ? val : (val?.target as HTMLInputElement)?.value;
 
-      this.$emit('input', value);
+      this.$emit('update:value', value);
     },
 
     /**
@@ -286,9 +296,10 @@ export default defineComponent({
       disabled: isDisabled,
       [status]: status,
       suffix: hasSuffix,
-      'has-tooltip': hasTooltip,
+      'v-popper--has-tooltip': hasTooltip,
       'compact-input': isCompact,
-      hideArrows
+      hideArrows,
+      [className]: true
     }"
   >
     <slot name="label">
@@ -319,7 +330,7 @@ export default defineComponent({
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
-        @input="onInput"
+        @update:value="onInput"
         @focus="onFocus"
         @blur="onBlur"
       />

package/rancher-components/Form/Radio/RadioButton.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import { randomStr } from '@shell/utils/string';
@@ -102,7 +103,7 @@ export default defineComponent({
     },
 
     hasLabelSlot(): boolean {
-      return !!this.$slots.label || !!this.$scopedSlots.label;
+      return !!this.$slots.label;
     }
   },
 
@@ -126,7 +127,7 @@ export default defineComponent({
         return;
       }
 
-      this.$emit('input', this.val);
+      this.$emit('update:value', this.val);
     },
   }
 });

package/rancher-components/Form/Radio/RadioGroup.test.ts

@@ -1,3 +1,4 @@
+import { h } from 'vue';
 import { mount } from '@vue/test-utils';
 import { RadioGroup } from './index';
 
@@ -10,15 +11,11 @@ describe('component: RadioGroup', () => {
           options: [{ label: 'whatever', value: 'whatever' }],
           disabled
         },
-        scopedSlots: {
-          0(props: {isDisabled: boolean}) {
-            return this.$createElement('input', {
-              attrs: {
-                id:       'test',
-                disabled: props.isDisabled
-              }
-            });
-          }
+        slots: {
+          0: (props: {isDisabled: boolean}) => h('input', {
+            id:       'test',
+            disabled: props.isDisabled
+          })
         }
       });
 

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -162,7 +162,7 @@ export default defineComponent({
         newIndex = 0;
       }
 
-      this.$emit('input', opts[newIndex].value);
+      this.$emit('update:value', opts[newIndex].value);
     }
   }
 });
@@ -208,17 +208,16 @@ export default defineComponent({
     >
       <div
         v-for="(option, i) in normalizedOptions"
-        :key="name+'-'+i"
+        :key="i"
       >
         <slot
-          :listeners="$listeners"
+          :v-bind="$attrs"
           :option="option"
           :is-disabled="isDisabled"
           :name="i"
         >
           <!-- Default input -->
           <RadioButton
-            :key="name+'-'+i"
             :name="name"
             :value="value"
             :label="option.label"
@@ -226,7 +225,7 @@ export default defineComponent({
             :val="option.value"
             :disabled="isDisabled"
             :mode="mode"
-            v-on="$listeners"
+            @update:value="$emit('update:value', $event)"
           />
         </slot>
       </div>

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
@@ -14,6 +15,16 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    value: {
+      type:     String,
+      required: true
+    },
+
+    class: {
+      type:    String,
+      default: ''
+    },
+
     /**
      * Sets the edit mode for Text Area.
      * @values _EDIT, _VIEW
@@ -88,6 +99,10 @@ export default defineComponent({
      */
     style(): string {
       return `height: ${ this.curHeight }px; overflow: ${ this.overflow };`;
+    },
+
+    className(): string {
+      return this.class;
     }
   },
 
@@ -118,7 +133,7 @@ export default defineComponent({
     onInput(event: Event): void {
       const val = (event?.target as HTMLInputElement)?.value;
 
-      this.$emit('input', val);
+      this.$emit('update:value', val);
       this.queueResize();
     },
 
@@ -157,10 +172,12 @@ export default defineComponent({
 <template>
   <textarea
     ref="ta"
+    :value="value"
     :data-testid="$attrs['data-testid'] ? $attrs['data-testid'] : 'text-area-auto-grow'"
     :disabled="isDisabled"
     :style="style"
     :placeholder="placeholder"
+    :class="className"
     class="no-resize no-ease"
     v-bind="$attrs"
     :spellcheck="spellcheck"

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.test.ts

@@ -1,4 +1,4 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
+import { shallowMount, VueWrapper } from '@vue/test-utils';
 import { ToggleSwitch } from './index';
 
 describe('toggleSwitch.vue', () => {
@@ -33,18 +33,18 @@ describe('toggleSwitch.vue', () => {
   });
 
   it('emits an input event with a true value', async() => {
-    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(ToggleSwitch);
+    const wrapper: VueWrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(ToggleSwitch);
 
     wrapper.vm.toggle(true);
 
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.length).toBe(1);
-    expect(wrapper.emitted().input?.[0][0]).toBe(true);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')[0][0]).toBe(true);
   });
 
   it('emits an input event with a false value', async() => {
-    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
+    const wrapper: VueWrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
       ToggleSwitch,
       { propsData: { value: true } }
     );
@@ -53,14 +53,14 @@ describe('toggleSwitch.vue', () => {
 
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.length).toBe(1);
-    expect(wrapper.emitted().input?.[0][0]).toBe(false);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')[0][0]).toBe(false);
   });
 
   it('emits an input event with a custom onValue', async() => {
     const onValue = 'THE TRUTH';
 
-    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
+    const wrapper: VueWrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
       ToggleSwitch,
       { propsData: { onValue } });
 
@@ -68,14 +68,14 @@ describe('toggleSwitch.vue', () => {
 
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.length).toBe(1);
-    expect(wrapper.emitted().input?.[0][0]).toBe(onValue);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')[0][0]).toBe(onValue);
   });
 
   it('emits an input event with a custom offValue', async() => {
     const offValue = 'NOT THE TRUTH';
 
-    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
+    const wrapper: VueWrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
       ToggleSwitch,
       {
         propsData: {
@@ -88,7 +88,7 @@ describe('toggleSwitch.vue', () => {
 
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.length).toBe(1);
-    expect(wrapper.emitted().input?.[0][0]).toBe(offValue);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')[0][0]).toBe(offValue);
   });
 });

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -46,7 +46,7 @@ export default defineComponent({
   methods: {
     toggle(neu: StateType | null) {
       this.state = neu === null ? !this.state : neu;
-      this.$emit('input', this.state ? this.onValue : this.offValue);
+      this.$emit('update:value', this.state ? this.onValue : this.offValue);
     }
   }
 });

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -92,6 +92,7 @@ export default defineComponent({
         z-index: z-index(hoverOverContent);
      }
 
+    // I DON'T THINK iT NEEDS FiXING... I think we delete it... CHECK EDIT->PODS->GENERAL TAB-> PULL SECRETS ::TODO-ALEX
     .tooltip {
         position: absolute;
         width: calc(100% + 2px);

package/rancher-components/StringList/StringList.test.ts

@@ -1,9 +1,9 @@
 /* eslint-disable jest/no-hooks */
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { StringList } from './index';
 
 describe('stringList.vue', () => {
-  let wrapper: Wrapper<InstanceType<typeof StringList>>;
+  let wrapper: VueWrapper<InstanceType<typeof StringList>>;
 
   beforeEach(() => {
     wrapper = mount(StringList, { propsData: { items: [] } });
@@ -80,7 +80,7 @@ describe('stringList.vue', () => {
 
       const inputField = wrapper.find('[data-testid^="item-edit"]');
 
-      expect(inputField.element).toBeUndefined();
+      expect(inputField.exists()).toBe(false);
     });
 
     it('double click on empty space to create item not allowed when readonly', async() => {
@@ -96,7 +96,7 @@ describe('stringList.vue', () => {
 
       const inputField = wrapper.find('[data-testid="item-create"]');
 
-      expect(inputField.element).toBeUndefined();
+      expect(inputField.exists()).toBe(false);
     });
 
     it('select item not allowed when readonly', async() => {
@@ -142,7 +142,7 @@ describe('stringList.vue', () => {
       await wrapper.setProps({ readonly: true });
       const actionButtons = wrapper.find('[data-testid="div-action-buttons"]');
 
-      expect(actionButtons.element).toBeUndefined();
+      expect(actionButtons.exists()).toBe(false);
     });
 
     describe('add button', () => {
@@ -257,7 +257,7 @@ describe('stringList.vue', () => {
 
         const inputField = await wrapper.find('[data-testid="item-create"]');
 
-        expect(inputField.element).toBeUndefined();
+        expect(inputField.exists()).toBe(false);
       });
 
       it('deactivates edit mode', async() => {
@@ -275,7 +275,7 @@ describe('stringList.vue', () => {
 
         const inputField = wrapper.find('[data-testid^="item-edit"]');
 
-        expect(inputField.element).toBeUndefined();
+        expect(inputField.exists()).toBe(false);
       });
     });
   });
@@ -297,7 +297,7 @@ describe('stringList.vue', () => {
       await inputField.trigger('keydown.enter');
       await wrapper.vm.$nextTick();
 
-      const emitted = (wrapper.emitted('change') || [])[0][0][0];
+      const emitted = (wrapper.emitted('change') || [])[1][0][0];
 
       expect(emitted).toBe(validItem.trim());
     });
@@ -318,7 +318,7 @@ describe('stringList.vue', () => {
       await inputField.trigger('keydown.enter');
       await wrapper.vm.$nextTick();
 
-      const emitted = (wrapper.emitted('change') || [])[0][0][0];
+      const emitted = (wrapper.emitted('change') || [])[1][0][0];
 
       expect(emitted).toBe(validItem.trim());
     });
@@ -336,7 +336,7 @@ describe('stringList.vue', () => {
       await inputField.trigger('keydown.enter');
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.emitted('change')).toBeFalsy();
+      expect(wrapper.emitted('change')[1]).toBeFalsy();
     });
 
     it('reject a new item in create mode when item name is duplicate', async() => {
@@ -356,7 +356,7 @@ describe('stringList.vue', () => {
       await inputField.trigger('keydown.enter');
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.emitted('change')).toBeFalsy();
+      expect(wrapper.emitted('change')[1]).toBeFalsy();
     });
 
     it('reject an item in edit mode when item name is empty', async() => {
@@ -375,7 +375,7 @@ describe('stringList.vue', () => {
       await inputField.trigger('keydown.enter');
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.emitted('change')).toBeFalsy();
+      expect(wrapper.emitted('change')[1]).toBeFalsy();
     });
 
     it('reject an item in edit mode when item name is duplicate', async() => {
@@ -394,7 +394,7 @@ describe('stringList.vue', () => {
       await inputField.trigger('keydown.enter');
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.emitted('change')).toBeFalsy();
+      expect(wrapper.emitted('change')[1]).toBeFalsy();
     });
   });
 
@@ -428,7 +428,7 @@ describe('stringList.vue', () => {
         await inputField.trigger('keydown.enter');
         await wrapper.vm.$nextTick();
 
-        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+        const itemsResult = (wrapper.emitted('change') || [])[1][0];
 
         expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
       });
@@ -485,7 +485,7 @@ describe('stringList.vue', () => {
         await inputField.trigger('keydown.enter');
         await wrapper.vm.$nextTick();
 
-        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+        const itemsResult = (wrapper.emitted('change') || [])[1][0];
 
         expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
       });
@@ -504,7 +504,7 @@ describe('stringList.vue', () => {
         await inputField.trigger('keydown.enter');
         await wrapper.vm.$nextTick();
 
-        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+        const itemsResult = (wrapper.emitted('change') || [])[1][0];
 
         expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
       });
@@ -523,7 +523,7 @@ describe('stringList.vue', () => {
         await inputField.trigger('keydown.enter');
         await wrapper.vm.$nextTick();
 
-        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+        const itemsResult = (wrapper.emitted('change') || [])[1][0];
 
         expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
       });
@@ -555,7 +555,7 @@ describe('stringList.vue', () => {
         await inputField.trigger('keydown.enter');
         await wrapper.vm.$nextTick();
 
-        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+        const itemsResult = (wrapper.emitted('change') || [])[1][0];
 
         expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
       });
@@ -607,7 +607,7 @@ describe('stringList.vue', () => {
         await inputField.trigger('keydown.enter');
         await wrapper.vm.$nextTick();
 
-        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+        const itemsResult = (wrapper.emitted('change') || [])[1][0];
 
         expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
       });
@@ -625,7 +625,7 @@ describe('stringList.vue', () => {
         await inputField.trigger('keydown.enter');
         await wrapper.vm.$nextTick();
 
-        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+        const itemsResult = (wrapper.emitted('change') || [])[1][0];
 
         expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
       });
@@ -643,7 +643,7 @@ describe('stringList.vue', () => {
         await inputField.trigger('keydown.enter');
         await wrapper.vm.$nextTick();
 
-        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+        const itemsResult = (wrapper.emitted('change') || [])[1][0];
 
         expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
       });
@@ -661,7 +661,7 @@ describe('stringList.vue', () => {
         await inputField.trigger('keydown.enter');
         await wrapper.vm.$nextTick();
 
-        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+        const itemsResult = (wrapper.emitted('change') || [])[1][0];
 
         expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
       });

package/rancher-components/StringList/StringList.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-import Vue, { PropType, defineComponent } from 'vue';
+// @ts-nocheck
+import { PropType, defineComponent } from 'vue';
 
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { findStringIndex, hasDuplicatedStrings } from '@shell/utils/array';
@@ -219,7 +220,7 @@ export default defineComponent({
     },
 
     setFocus(refId: string) {
-      this.$nextTick(() => (this.getElemByRef(refId) as Vue & HTMLElement)?.focus());
+      this.$nextTick(() => (this.getElemByRef(refId) as HTMLElement)?.focus());
     },
 
     /**
@@ -256,7 +257,7 @@ export default defineComponent({
     },
 
     toggleErrorClass(refId: string, val: boolean) {
-      const input = (this.getElemByRef(refId) as Vue)?.$el;
+      const input = (this.getElemByRef(refId))?.$el;
 
       if (input) {
         if (val) {
@@ -433,7 +434,7 @@ export default defineComponent({
     >
       <div
         v-for="(item, index) in items"
-        :key="item"
+        :key="index"
         :ref="item"
         :class="{
           selected: selected === item,
@@ -460,9 +461,9 @@ export default defineComponent({
           :data-testid="`item-edit-${item}`"
           class="edit-input static"
           :value="value != null ? value : item"
-          @input="onChange($event, index)"
+          @update:value="onChange($event, index)"
           @blur.prevent="updateItem(item)"
-          @keydown.native.enter="updateItem(item, !errors.duplicate)"
+          @keydown.enter="updateItem(item, !errors.duplicate)"
         />
       </div>
       <div
@@ -476,9 +477,9 @@ export default defineComponent({
           type="text"
           :value="value"
           :placeholder="placeholder"
-          @input="onChange($event)"
+          @update:value="onChange($event)"
           @blur.prevent="saveItem"
-          @keydown.native.enter="saveItem(!errors.duplicate)"
+          @keydown.enter="saveItem(!errors.duplicate)"
         />
       </div>
     </div>
@@ -637,7 +638,7 @@ export default defineComponent({
   }
 }
 
-::v-deep {
+:deep() {
   .labeled-input INPUT.no-label,
   .labeled-input INPUT:hover.no-label,
   .labeled-input INPUT:focus.no-label {

package/scripts/extension/helm/charts/ui-plugin-server/Chart.yaml

@@ -1,6 +1,6 @@
 annotations:
   catalog.cattle.io/certified: rancher # Any application we are adding as a helm chart
-  catalog.cattle.io/kube-version: '>= 1.16.0-0 < 1.29.0-0'
+  catalog.cattle.io/kube-version: '>= 1.16.0-0'
   catalog.cattle.io/namespace: cattle-ui-plugin-system # Must prefix with cattle- and suffix with -system=
   catalog.cattle.io/os: linux
   catalog.cattle.io/permits-os: linux, windows