@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/Questions/__tests__/Yaml.test.ts

@@ -6,7 +6,7 @@ import defaults from './utils/questions-defaults';
 describe('the yaml Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -16,8 +16,11 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
@@ -36,7 +39,7 @@ describe('the yaml Component', () => {
 
   it('description is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -46,8 +49,11 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
@@ -62,7 +68,7 @@ describe('the yaml Component', () => {
 
   it('label is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -72,8 +78,11 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
@@ -88,7 +97,7 @@ describe('the yaml Component', () => {
 
   it('tooltip is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -98,15 +107,18 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
 
     expect(inputFields).toHaveLength(1);
 
-    const labelFields = wrapper.findAll('[data-testid="yaml-row-var_name"] .has-tooltip');
+    const labelFields = wrapper.findAll('[data-testid="yaml-row-var_name"] .v-popper--has-tooltip');
 
     expect(labelFields).toHaveLength(1);
   });

package/components/Questions/__tests__/utils/questions-defaults.ts

@@ -1,7 +1,7 @@
 
 const defaultStubs = {
-  Tab:    true,
-  Tabbed: true,
+  Tab:    { template: '<span><slot/></span>' },
+  Tabbed: false,
 };
 const defaultGetters = {
   currentStore:           () => 'current_store',

package/components/Questions/index.vue

@@ -452,15 +452,15 @@ export default {
   />
   <form v-else-if="asTabs">
     <Tab
-      v-for="g in groups"
-      :key="g.name"
+      v-for="(g, i) in groups"
+      :key="i"
       :name="g.name"
       :label="g.name"
       :weight="g.weight"
     >
       <div
-        v-for="q in g.questions"
-        :key="q.variable"
+        v-for="(q, j) in g.questions"
+        :key="`${i}-${j}`"
         class="row question"
       >
         <div class="col span-12">
@@ -472,7 +472,7 @@ export default {
             :value="get(value, q.variable)"
             :disabled="disabled"
             :chart-name="chartName"
-            @input="update(q.variable, $event)"
+            @update:value="update(q.variable, $event)"
           />
         </div>
       </div>
@@ -480,15 +480,15 @@ export default {
   </form>
   <form v-else>
     <div
-      v-for="g in groups"
-      :key="g.name"
+      v-for="(g, i) in groups"
+      :key="i"
     >
       <h3 v-if="groups.length > 1">
         {{ g.label }}
       </h3>
       <div
-        v-for="q in g.questions"
-        :key="q.variable"
+        v-for="(q, j) in g.questions"
+        :key="`${i}-${j}`"
         class="row question"
       >
         <div class="col span-12">
@@ -501,7 +501,7 @@ export default {
             :value="get(value, q.variable)"
             :disabled="disabled"
             :chart-name="chartName"
-            @input="update(q.variable, $event)"
+            @update:value="update(q.variable, $event)"
           />
         </div>
       </div>

package/components/Random.vue

@@ -43,7 +43,7 @@ export default {
     return { label: this.update(), value: 0 };
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     clearTimeout(this.timer);
   },
 

package/components/ResourceDetail/Masthead.vue

@@ -85,6 +85,11 @@ export default {
       type:    String,
       default: null,
     },
+
+    canViewYaml: {
+      type:    Boolean,
+      default: false,
+    }
   },
 
   data() {
@@ -503,12 +508,12 @@ export default {
               icon-size="lg"
               :options="sensitiveOptions"
               class="mr-10"
-              @input="toggleSensitiveData"
+              @update:value="toggleSensitiveData"
             />
 
             <ButtonGroup
               v-if="viewOptions && isView"
-              v-model="currentView"
+              v-model:value="currentView"
               :options="viewOptions"
               class="mr-10"
             />

package/components/ResourceDetail/index.vue

@@ -273,6 +273,7 @@ export default {
       model:           null,
       notFound:        null,
       canViewChart:    true,
+      canViewYaml:     null,
     };
   },
 
@@ -406,21 +407,22 @@ export default {
     <ResourceYaml
       v-else-if="isYaml"
       ref="resourceyaml"
-      v-model="value"
+      :value="value"
       :mode="mode"
       :yaml="yaml"
       :offer-preview="offerPreview"
       :done-route="doneRoute"
       :done-override="value.doneOverride"
       :class="{'flex-content': flexContent}"
+      @update:value="$emit('input', $event)"
     />
 
     <component
       :is="showComponent"
       v-else
       ref="comp"
-      v-model="value"
-      v-bind="_data"
+      v-model:value="value"
+      v-bind="$data"
       :done-params="doneParams"
       :done-route="doneRoute"
       :mode="mode"
@@ -428,6 +430,7 @@ export default {
       :live-value="liveModel"
       :real-mode="realMode"
       :class="{'flex-content': flexContent}"
+      @update:value="$emit('input', $event)"
       @set-subtype="setSubtype"
     />
 

package/components/ResourceList/Masthead.vue

@@ -238,5 +238,9 @@ export default {
 
   .sub-header {
     grid-area: sub-header;
+
+    a {
+      display: inline-block;
+    }
   }
 </style>

package/components/ResourceList/index.vue

@@ -47,7 +47,8 @@ export default {
     if ( this.hasListComponent ) {
       // If you provide your own list then call its fetch
       const importer = this.listComponent;
-      const component = (await importer())?.default;
+
+      const component = await importer.__asyncLoader();
 
       if ( component?.typeDisplay ) {
         this.customTypeDisplay = component.typeDisplay.apply(this);
@@ -231,7 +232,10 @@ export default {
       {{ t('resourceList.nsFilteringGeneric') }}
     </template>
   </IconMessage>
-  <div v-else>
+  <div
+    v-else
+    class="outlet"
+  >
     <Masthead
       v-if="showMasthead"
       :type-display="customTypeDisplay"
@@ -241,7 +245,7 @@ export default {
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
     >
-      <template slot="extraActions">
+      <template #extraActions>
         <slot name="extraActions" />
       </template>
     </Masthead>
@@ -252,7 +256,9 @@ export default {
       :location="extensionLocation"
     />
 
-    <div v-if="hasListComponent">
+    <div
+      v-if="hasListComponent"
+    >
       <component
         :is="listComponent"
         :incremental-loading-indicator="showIncrementalLoadingIndicator"

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,10 +438,10 @@ export default {
 
       <!-- locale selector -->
       <span v-if="isSingleProduct">
-        <v-popover
-          popover-class="localeSelector"
+        <v-dropdown
+          popperClass="localeSelector"
           placement="top"
-          trigger="click"
+          :triggers="['click']"
         >
           <a
             data-testid="locale-selector"
@@ -448,7 +450,7 @@ export default {
             {{ locale }}
           </a>
 
-          <template slot="popover">
+          <template #popper>
             <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);
   }
 };