@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/ResourceSummary.vue

@@ -148,7 +148,7 @@ export default {
     }
   }
 
-  ::v-deep .content{
+  :deep() .content{
     display: flex;
     justify-content: space-between;
     align-items: center;

package/components/ResourceTable.vue

@@ -194,7 +194,7 @@ export default {
     window.addEventListener('keyup', this.handleEnterKeyPress);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('keyup', this.handleEnterKeyPress);
   },
 
@@ -562,8 +562,6 @@ export default {
     :mandatory-sort="_mandatorySort"
     @clickedActionButton="handleActionButtonClick"
     @group-value-change="group = $event"
-
-    v-on="$listeners"
   >
     <template
       v-if="showGrouping"
@@ -572,7 +570,7 @@ export default {
       <slot name="more-header-middle" />
 
       <ButtonGroup
-        v-model="group"
+        v-model:value="group"
         :options="groupOptions"
       />
     </template>
@@ -593,7 +591,8 @@ export default {
 
     <!-- Pass down templates provided by the caller -->
     <template
-      v-for="(_, slot) of $scopedSlots"
+      v-for="(_, slot) of $slots"
+      :key="slot"
       v-slot:[slot]="scope"
     >
       <slot

package/components/ResourceYaml.vue

@@ -347,11 +347,10 @@ export default {
   <div class="root resource-yaml">
     <YamlEditor
       ref="yamleditor"
-      v-model="currentYaml"
+      v-model:value="currentYaml"
       :initial-yaml-values="initialYaml"
       class="yaml-editor flex-content"
       :editor-mode="editorMode"
-      @onInput="onInput"
       @onReady="onReady"
       @onChanges="onChanges"
     />

package/components/RoleBindings.vue

@@ -349,7 +349,7 @@ export default {
 
     remove(row) {
       if ( row.existing ) {
-        this.$set(row, 'remove', true);
+        row['remove'] = true;
       } else {
         removeObject(this.rows, row);
       }
@@ -389,7 +389,7 @@ export default {
     >
       <div class="subject">
         <LabeledSelect
-          v-model="row.subject"
+          v-model:value="row.subject"
           label-key="rbac.roleBinding.user.label"
           :mode="mode"
           :searchable="true"
@@ -399,7 +399,7 @@ export default {
       </div>
       <div class="binding">
         <LabeledSelect
-          v-model="row.role"
+          v-model:value="row.role"
           label-key="rbac.roleBinding.role.label"
           :mode="mode"
           :searchable="true"

package/components/SideNav.vue

@@ -400,10 +400,12 @@ export default {
   <nav class="side-nav">
     <!-- Actual nav -->
     <div class="nav">
-      <template v-for="(g) in groups">
+      <template
+        v-for="(g) in groups"
+        :key="g.name"
+      >
         <Group
           ref="groups"
-          :key="g.name"
           id-prefix=""
           class="package"
           :group="g"
@@ -436,7 +438,7 @@ export default {
 
       <!-- locale selector -->
       <span v-if="isSingleProduct">
-        <v-popover
+        <v-dropdown
           popover-class="localeSelector"
           placement="top"
           trigger="click"
@@ -448,7 +450,7 @@ export default {
             {{ locale }}
           </a>
 
-          <template slot="popover">
+          <template #popover>
             <ul
               class="list-unstyled dropdown"
               style="margin: -1px;"
@@ -463,7 +465,7 @@ export default {
               </li>
             </ul>
           </template>
-        </v-popover>
+        </v-dropdown>
       </span>
     </div>
     <!-- SideNav footer alternative -->
@@ -505,7 +507,7 @@ export default {
     overflow-y: auto;
 
     // h6 is used in Group element
-    ::v-deep h6 {
+    :deep() h6 {
       margin: 0;
       letter-spacing: normal;
       line-height: 15px;

package/components/SimpleBox.vue

@@ -32,7 +32,6 @@ export default {
     v-if="shown"
     class="simple-box"
     data-testid="simple-box-container"
-    v-on="$listeners"
   >
     <div
       v-if="title || canClose || $slots.title"

package/components/SortableTable/THead.vue

@@ -215,7 +215,7 @@ export default {
         :width="checkWidth"
       >
         <Checkbox
-          v-model="isAll"
+          v-model:value="isAll"
           class="check"
           data-testid="sortable-table_check_select_all"
           :indeterminate="isIndeterminate"
@@ -227,7 +227,7 @@ export default {
         :width="expandWidth"
       />
       <th
-        v-for="col in columns"
+        v-for="(col) in columns"
         v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.isColVisible)"
         :key="col.name"
         :align="col.align || 'left'"
@@ -302,7 +302,7 @@ export default {
             >
               <span class="table-options-col-subtitle">{{ t('sortableTable.tableHeader.groupBy') }}:</span>
               <LabeledSelect
-                v-model="advGroup"
+                v-model:value="advGroup"
                 class="table-options-grouping-select"
                 :clearable="true"
                 :options="groupOptions"
@@ -325,10 +325,10 @@ export default {
               >
                 <Checkbox
                   v-show="!col.preventColToggle"
-                  v-model="col.isColVisible"
+                  v-model:value="col.isColVisible"
                   class="table-options-checkbox"
                   :label="col.label"
-                  @input="tableOptionsCheckbox($event, col.label)"
+                  @update:value="tableOptionsCheckbox($event, col.label)"
                 />
               </li>
             </ul>

package/components/SortableTable/index.vue

@@ -20,15 +20,11 @@ import actions from './actions';
 import AdvancedFiltering from './advanced-filtering';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { getParent } from '@shell/utils/dom';
+import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
 
-// Its quicker to render if we directly supply the components for the formatters
-// rather than just the name of a global component - so create a map of the formatter comoponents
-// NOTE: This is populated by a plugin (formatters.js) to avoid issues with plugins
-export const FORMATTERS = {};
-
 // @TODO:
 // Fixed header/scrolling
 
@@ -382,7 +378,7 @@ export default {
     this.debouncedPaginationChanged();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     clearTimeout(this._scrollTimer);
     clearTimeout(this._loadingDelayTimer);
     clearTimeout(this._altLoadingDelayTimer);
@@ -549,9 +545,9 @@ export default {
     showHeaderRow() {
       return this.search ||
         this.tableActions ||
-        this.$slots['header-left']?.length ||
-        this.$slots['header-middle']?.length ||
-        this.$slots['header-right']?.length;
+        this.$slots['header-left']?.() ||
+        this.$slots['header-middle']?.() ||
+        this.$slots['header-right']?.();
     },
 
     columns() {
@@ -1017,7 +1013,7 @@ export default {
           <slot name="header-left">
             <template v-if="tableActions">
               <button
-                v-for="act in availableActions"
+                v-for="(act) in availableActions"
                 :id="act.action"
                 :key="act.action"
                 v-clean-tooltip="actionTooltip"
@@ -1056,9 +1052,9 @@ export default {
                 <template #popover-content>
                   <ul class="list-unstyled menu">
                     <li
-                      v-for="act in hiddenActions"
-                      :key="act.action"
-                      v-close-popover
+                      v-for="(act, i) in hiddenActions"
+                      :key="i"
+                      v-close-popper
                       v-clean-tooltip="{
                         content: actionTooltip,
                         placement: 'right'
@@ -1088,14 +1084,14 @@ export default {
           </slot>
         </div>
         <div
-          v-if="!hasAdvancedFiltering && ($slots['header-middle'] && $slots['header-middle'].length)"
+          v-if="!hasAdvancedFiltering && $slots['header-middle']"
           class="middle"
         >
           <slot name="header-middle" />
         </div>
 
         <div
-          v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || ($slots['header-right'] && $slots['header-right'].length)"
+          v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || $slots['header-right']"
           class="search row"
           data-testid="search-box-filter-row"
         >
@@ -1148,7 +1144,7 @@ export default {
               <div class="middle-block">
                 <span>{{ t('sortableTable.in') }}</span>
                 <LabeledSelect
-                  v-model="advFilterSelectedProp"
+                  v-model:value="advFilterSelectedProp"
                   class="filter-select"
                   :clearable="true"
                   :options="advFilterSelectOptions"
@@ -1265,7 +1261,7 @@ export default {
         </slot>
       </tbody>
       <tbody
-        v-for="groupedRows in displayRows"
+        v-for="(groupedRows) in displayRows"
         v-else
         :key="groupedRows.key"
         :class="{ group: groupBy }"
@@ -1292,7 +1288,10 @@ export default {
             </td>
           </tr>
         </slot>
-        <template v-for="(row, i) in groupedRows.rows">
+        <template
+          v-for="(row, i) in groupedRows.rows"
+          :key="i"
+        >
           <slot
             name="main-row"
             :row="row.row"
@@ -1305,7 +1304,6 @@ export default {
                 because our selection.js invokes toggleClass and :class clobbers what was added by toggleClass if
                 the value of :class changes. -->
               <tr
-                :key="row.key"
                 class="main-row"
                 :data-testid="componentTestid + '-' + i + '-row'"
                 :class="{ 'has-sub-row': row.showSubRow}"
@@ -1339,7 +1337,10 @@ export default {
                     @click.stop="toggleExpand(row.row)"
                   />
                 </td>
-                <template v-for="(col, j) in row.columns">
+                <template
+                  v-for="(col, j) in row.columns"
+                  :key="j"
+                >
                   <slot
                     :name="'col:' + col.col.name"
                     :row="row.row"

package/components/SortableTable/sortable-config.ts

@@ -0,0 +1,4 @@
+// Its quicker to render if we directly supply the components for the formatters
+// rather than just the name of a global component - so create a map of the formatter comoponents
+// NOTE: This is populated by a plugin (formatters.js) to avoid issues with plugins
+export const FORMATTERS = {};

package/components/StatusTable.vue

@@ -33,7 +33,7 @@ export default {
       $event.stopPropagation();
       $event.preventDefault();
 
-      copyTextToClipboard(this.$slots.default[0].text).then(() => {
+      copyTextToClipboard(this.$slots.default()[0].text).then(() => {
         this.copied = true;
 
         setTimeout(() => {

package/components/TabTitle.vue

@@ -32,13 +32,13 @@ export default {
   methods: {
     // This isn't a computed prop because it would trigger a recompute when the $slots changed
     computeTitle() {
-      if (!this.$slots.default || this.$slots.default.length !== 1 || this.$slots.default[0].tag || (typeof this.$slots.default[0].text !== 'string')) {
+      if (!this.$slots.default || (typeof this.$slots.default()[0].children) !== 'string') {
         console.error('The <TabTitle> component only supports text as the child.'); // eslint-disable-line no-console
 
         return [];
       }
 
-      const breadcrumb = [this.$slots.default[0].text.trim()];
+      const breadcrumb = [this.$slots.default()[0].children.trim()];
 
       if (this.breadcrumb === 'full') {
         if (this.currentCluster && (this.isExplorer || this.currentCluster.isHarvester ) ) {
@@ -70,15 +70,9 @@ export default {
   // Using the render function instead of <template> because <template><slot /></template> will yield a compiler error since
   // <slot /> is not allowed to be a root node of a <template> and I don't want to wrap the child to avoid affecting existing styling
   render() {
-    if (this.$slots.default) {
-      this.$slots.default.forEach((e) => {
-        e.text = (e.text || '').trim();
-      });
-    }
-
     this.updatePageTitle();
 
-    return this.showChild ? this.$slots.default : null;
+    return this.showChild ? this.$slots.default() : null;
   }
 };
 </script>

package/components/Tabbed/Tab.vue

@@ -81,7 +81,7 @@ export default {
     this.addTab(this);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.removeTab(this);
   }
 };

package/components/Tabbed/index.vue

@@ -170,10 +170,8 @@ export default {
        * Exclude logic with URL anchor (hash) for projects without routing logic (vue-router)
        */
       if ( this.useHash ) {
-        const {
-          $route: { hash: routeHash },
-          $router: { currentRoute },
-        } = this;
+        const currentRoute = this.$router.currentRoute._value;
+        const routeHash = currentRoute.hash;
 
         if (this.useHash && routeHash !== hashName) {
           const kurrentRoute = { ...currentRoute };

package/components/Wizard.vue

@@ -333,11 +333,13 @@ export default {
               @keyup.right.stop="selectNext(1)"
               @keyup.left.stop="selectNext(-1)"
             >
-              <template v-for="(step, idx ) in visibleSteps">
+              <template
+                v-for="(step, idx ) in visibleSteps"
+                :key="idx"
+              >
                 <li
 
                   :id="step.name"
-                  :key="step.name+'li'"
                   :class="{step: true, active: step.name === activeStep.name, disabled: !isAvailable(step)}"
                   role="presentation"
                 >
@@ -372,7 +374,10 @@ export default {
         name="stepContainer"
         :activeStep="activeStep"
       >
-        <template v-for="step in steps">
+        <template
+          v-for="(step, i) in steps"
+          :key="i"
+        >
           <div
             v-if="step.name === activeStep.name || step.hidden"
             :key="step.name"

package/components/YamlEditor.vue

@@ -169,14 +169,14 @@ export default {
 
     onInput(value) {
       if ( !this.asObject ) {
-        this.$emit('input', ...arguments);
+        this.$emit('update:value', ...arguments);
       }
 
       try {
         const parsed = jsyaml.load(value);
 
         if ( this.asObject ) {
-          this.$emit('input', parsed);
+          this.$emit('update:value', parsed);
         } else {
           this.$emit('newObject', parsed);
         }
@@ -247,7 +247,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .yaml-editor {
   display: flex;
   flex-direction: column;
@@ -256,7 +256,7 @@ export default {
     flex: 1;
   }
 
-  ::v-deep .code-mirror  {
+  .codemirror-container  {
     position: relative;
 
     .CodeMirror {

package/components/__tests__/AppModal.test.ts

@@ -1,13 +1,15 @@
 /* eslint-disable jest/no-hooks */
-import { shallowMount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import AppModal from '@shell/components/AppModal.vue';
 
-let wrapper: Wrapper<InstanceType<typeof AppModal>>;
+let wrapper: VueWrapper<InstanceType<typeof AppModal>>;
 
 describe('appModal', () => {
   beforeEach(() => {
-    wrapper = shallowMount(AppModal, {
-      propsData: {
+    document.body.innerHTML = '<div id="modals"></div>';
+    wrapper = mount(AppModal, {
+      attachTo: document.body,
+      props:    {
         clickToClose: true,
         width:        600,
       },
@@ -16,17 +18,23 @@ describe('appModal', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
+    document.body.innerHTML = '';
   });
 
-  it('renders modal content', () => {
-    expect(wrapper.find('.content').exists()).toBeTruthy();
+  it('renders modal content', async() => {
+    const modalContainer = document.querySelector('#modals .modal-container');
+
+    expect(modalContainer).toBeTruthy();
+    expect(modalContainer?.textContent).toContain('Modal content');
   });
 
   it('emits close event when clicked outside', async() => {
-    const overlay = wrapper.find('.modal-overlay');
+    const overlay = document.querySelector('.modal-overlay');
+
+    expect(overlay).toBeTruthy();
 
-    await overlay.trigger('click');
+    await overlay?.dispatchEvent(new Event('click'));
     expect(wrapper.emitted('close')).toBeTruthy();
   });
 
@@ -40,9 +48,9 @@ describe('appModal', () => {
 
   it('does not emit close event when clickToClose is false', async() => {
     await wrapper.setProps({ clickToClose: false });
-    const overlay = wrapper.find('.modal-overlay');
+    const overlay = document.querySelector('.modal-overlay');
 
-    await overlay.trigger('click');
+    await overlay?.dispatchEvent(new Event('click'));
     expect(wrapper.emitted('close')).toBeFalsy();
 
     document.dispatchEvent(new KeyboardEvent('keydown', {
@@ -54,44 +62,44 @@ describe('appModal', () => {
   });
 
   it('sets a width for the modal container', async() => {
-    const container = wrapper.find('.modal-container');
+    const container = document.querySelector('.modal-container');
 
-    expect(container.exists()).toBeTruthy();
-    expect(wrapper.find('.modal-container').element.style.width).toBe('600px');
+    expect(container).toBeTruthy();
+    expect(container?.style.width).toBe('600px');
   });
 
   it('sets a percentage width for the modal container', async() => {
     await wrapper.setProps({ width: '50%' });
-    const container = wrapper.find('.modal-container');
+    const container = document.querySelector('.modal-container');
 
-    expect(container.exists()).toBeTruthy();
-    expect(wrapper.find('.modal-container').element.style.width).toBe('50%');
+    expect(container).toBeTruthy();
+    expect(container?.style.width).toBe('50%');
   });
 
   it('does not generate validation errors when setting a pixel width', async() => {
-    const consoleErrorSpy = jest.spyOn(console, 'error');
+    const consoleErrorSpy = jest.spyOn(console, 'warn');
 
     consoleErrorSpy.mockImplementation(() => {});
 
     await wrapper.setProps({ width: '200px' });
-    const container = wrapper.find('.modal-container');
+    const container = document.querySelector('.modal-container');
 
-    expect(container.exists()).toBeTruthy();
-    expect(wrapper.find('.modal-container').element.style.width).toBe('200px');
+    expect(container).toBeTruthy();
+    expect(container?.style.width).toBe('200px');
 
     expect(consoleErrorSpy).not.toHaveBeenCalled();
   });
 
   it('generates validation errors with an invalid string for width', async() => {
-    const consoleErrorSpy = jest.spyOn(console, 'error');
+    const consoleErrorSpy = jest.spyOn(console, 'warn');
 
     consoleErrorSpy.mockImplementation(() => {});
 
     await wrapper.setProps({ width: 'FAIL' });
-    const container = wrapper.find('.modal-container');
+    const container = document.querySelector('.modal-container');
 
-    expect(container.exists()).toBeTruthy();
-    expect(wrapper.find('.modal-container').element.style.width).toBe('600px');
+    expect(container).toBeTruthy();
+    expect(container?.style.width).toBe('600px');
 
     expect(consoleErrorSpy).toHaveBeenCalledTimes(1);
   });

package/components/__tests__/ApplicationCard.test.ts

@@ -18,7 +18,7 @@ describe('component: ApplicationCard', () => {
     const content = '<div>text</div>';
     const ele = mount(ApplicationCard, { slots: { [slot]: content } });
 
-    expect(ele.find(`[data-testid="${ slot }-section`).find('div').html()).toContain(content);
+    expect(ele.find(`[data-testid="${ slot }-section"`).find('div').html()).toContain(content);
   });
 
   it('should have card-icon slot with an icon', () => {