@rancher/shell 3.0.0-rc.1 → 3.0.0-rc.2

package/assets/styles/base/_variables.scss

@@ -7,6 +7,7 @@ $max-width: 1440px !default;
 $min-width: 75% !default;
 $input-height: 61px;
 $unlabeled-input-height: 40px;
+$unlabaled-select-padding: 3px 0;
 
 $input-padding-lg: 18px;
 $input-padding-sm: 10px;

package/assets/styles/global/_layout.scss

@@ -119,15 +119,15 @@ HEADER {
 }
 
 .localeSelector {
-  :deep(.popover-inner) {
+  :deep(.v-popper__inner) {
     padding: 50px 0;
   }
 
-  :deep(.popover-arrow) {
+  :deep(.v-popper__arrow-container) {
     display: none;
   }
 
-  :deep(.popover:focus) {
+  :deep(.v-popper:focus) {
     outline: 0;
   }
 

package/assets/styles/global/_select.scss

@@ -142,7 +142,7 @@
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
   color: var(--input-text);
-  padding: 3px 0;
+  padding: $unlabaled-select-padding;
 
   .vs--single .vs__selected-options {
     flex-wrap: nowrap;

package/assets/styles/global/_tooltip.scss

@@ -1,4 +1,4 @@
-.tooltip {
+.v-popper__popper.v-popper--theme-tooltip {
   $triangle-size: 8px;
   $triangle-inner-size: $triangle-size - 1px;
   $center: calc(50% - #{$triangle-size});
@@ -7,130 +7,105 @@
   z-index: z-index('tooltip');
   max-width: 50vw;
 
-  .tooltip-inner {
+  .v-popper__inner {
     background: var(--tooltip-bg);
     color: var(--tooltip-text);
     border-radius: var(--border-radius);
     padding: 8px;
   }
 
-  .tooltip-arrow {
+  .v-popper__arrow-container {
     width: 0;
     height: 0;
     border: 0 solid transparent;
     position: absolute;
     z-index: 1;
 
-    &:after {
-      position: absolute;
+    .v-popper__arrow-inner {
       border: $triangle-inner-size solid transparent;
-      content: '';
     }
   }
 
-  &[x-placement^="top"] {
-    margin-bottom: $triangle-size;
+  &[data-popper-placement^="top"] {
+    .v-popper__arrow-container {
 
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      bottom: -4px;
-    }
-
-    margin-bottom: $triangle-size;
-
-    .tooltip-arrow {
-      bottom: -$triangle-inner-size;
-
-      &:after {
+      .v-popper__arrow-outer {
         border-bottom-width: 0;
         border-top-color: var(--tooltip-bg);
-        bottom: 1px;
         left: -$triangle-inner-size;
       }
     }
   }
 
 
-  &[x-placement^="bottom"] {
-    margin-top: $triangle-size;
+  &[data-popper-placement^="bottom"] {
+    .v-popper__arrow-container {
 
-    .tooltip-arrow {
-      top: -$triangle-inner-size;
-
-      &:after {
+      .v-popper__arrow-outer {
         border-top-width: 0;
         border-bottom-color: var(--tooltip-bg);
-        top: 1px;
         left: -$triangle-inner-size;
         background: transparent;
       }
     }
   }
 
-  &[x-placement^="right"] {
-    margin-left: $triangle-size;
-
-    .tooltip-arrow {
-      left: -$triangle-inner-size;
+  &[data-popper-placement^="right"] {
+    .v-popper__arrow-container {
 
-      &:after {
-        border-left-width: 0;
+      .v-popper__arrow-outer {
         border-right-color: var(--tooltip-bg);
-        left: 1px;
         top: -$triangle-inner-size;
+        border-left-width: 0;
       }
     }
   }
 
-  &[x-placement^="left"] {
-    margin-right: $triangle-size;
+  &[data-popper-placement^="left"] {
+    .v-popper__arrow-container {
 
-    .tooltip-arrow {
-      right: -$triangle-inner-size;
-
-      &:after {
+      .v-popper__arrow-outer {
         border-right-width: 0;
         border-left-color: var(--tooltip-bg);
-        right: 1px;
         top: -$triangle-inner-size;
       }
     }
   }
 
   &.tooltip-warning {
-    .tooltip-inner {
+    .v-popper__inner {
       background: var(--tooltip-bg-warning);
       color: var(--tooltip-text-warning);
     }
 
-    &[x-placement^="top"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="top"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-top-color: var(--tooltip-bg-warning);
         }
       }
     }
 
 
-    &[x-placement^="bottom"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="bottom"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-bottom-color: var(--body-bg);
         }
       }
     }
 
-    &[x-placement^="right"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="right"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-right-color: var(--tooltip-bg-warning);
         }
       }
     }
 
-    &[x-placement^="left"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="left"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-left-color: var(--tooltip-bg-warning);
         }
       }
@@ -138,44 +113,35 @@
   }
 }
 
-.popover {
+.v-popper__popper {
   $color: var(--popover-bg);
   border: 1px solid var(--border);
   border-radius: var(--border-radius);
 
-  .popover-inner {
+  .v-popper__inner {
     background: $color;
     color: var(--popover-text);
     padding: 10px;
     border-radius: var(--border-radius);
     box-shadow: 0 5px 20px var(--shadow);
+    border: none;
 
     a {
       color: var(--popover-text);
     }
   }
 
-  .popover-arrow {
+  .v-popper__arrow-container {
     border-color: transparent;
   }
-
-  &[x-placement^="bottom"] {
-    .popover-arrow {
-      &:after {
-        // border-bottom-color: var(--popover-bg);
-        border-bottom-width: 0;
-      }
-    }
-  }
-
 }
 
-.v-popover {
+.v-popper {
   display: inline;
 }
 
-.tooltip,
-.popover {
+.v-popper__popper.v-popper--theme-tooltip,
+.v-popper {
   &[aria-hidden='true'] {
     // This removes it from the layout of ButtondropDown (so it doesn't render huge for SSR) but
     // still allows it to maintain it's dimensions for v-tooltip to calculate the appropriate position.

package/components/ActionDropdown.vue

@@ -82,7 +82,7 @@ export default {
             Button <i class="icon icon-chevron-down" />
           </button>
         </slot>
-        <template #popover>
+        <template #popper>
           <slot name="popover-content" />
         </template>
       </v-dropdown>
@@ -123,7 +123,7 @@ export default {
   $sm-trigger-padding: 10px 10px 10px 10px;
   $lg-trigger-padding: 18px 10px 10px 10px;
 
-  .v-popover {
+  .v-popper {
     .text-right {
       margin-top: 5px;
     }
@@ -179,7 +179,7 @@ export default {
       &>.btn {
         padding: 15px 35px 15px 15px;
       }
-      .v-popover{
+      .v-popper{
         .trigger{
           position: absolute;
           top: 0px;
@@ -194,23 +194,19 @@ export default {
       }
     }
   }
-  .popover {
+  .v-popper__popper {
     border: none;
   }
-  .tooltip {
+  .v-popper__popper {
     margin-top: 0px;
 
-    &[x-placement^="bottom"] {
-      .tooltip-arrow {
-        border-bottom-color: var(--dropdown-border);
-
-        &:after {
-          border-bottom-color: var(--dropdown-bg);
-        }
+    &[data-popper-placement^="bottom"] {
+      .v-popper__arrow-container {
+        display: none;
       }
     }
 
-    .tooltip-inner {
+    .v-popper__inner {
       color: var(--dropdown-text);
       background-color: var(--dropdown-bg);
       border: 1px solid var(--dropdown-border);

package/components/ActionMenu.vue

@@ -258,7 +258,7 @@ export default {
       <li
         v-for="(opt, i) in menuOptions"
         :key="i"
-        :disabled="opt.disabled"
+        :disabled="opt.disabled ? true : null"
         :class="{divider: opt.divider}"
         :data-testid="componentTestid + '-' + i + '-item'"
         @click="execute(opt, $event)"

package/components/ButtonDropdown.vue

@@ -181,7 +181,7 @@ export default {
     :clearable="false"
     :close-on-select="closeOnSelect"
     :filterable="false"
-    :value="buttonLabel"
+    :modelValue="buttonLabel"
     :options="dropdownOptions"
     :map-keydown="mappedKeys"
     :get-option-key="
@@ -191,7 +191,7 @@ export default {
     :selectable="selectable"
     @search:blur="onBlur"
     @search:focus="onFocus"
-    @update:value="$emit('click-action', $event)"
+    @update:modelValue="$emit('click-action', $event)"
   >
     <template #no-options>
       <slot name="no-options" />
@@ -211,14 +211,15 @@ export default {
     <!-- Pass down templates provided by the caller -->
     <template
       v-for="(_, slot) of $slots"
+      #[slot]="scope"
       :key="slot"
-      v-slot:[slot]="scope"
     >
-      <slot
-        v-if="slot !== 'selected-option'"
-        :name="slot"
-        v-bind="scope"
-      />
+      <template v-if="slot !== 'selected-option' && typeof $slots[slot] === 'function'">
+        <slot
+          :name="slot"
+          v-bind="scope"
+        />
+      </template>
     </template>
   </v-select>
 </template>

package/components/CruResource.vue

@@ -598,12 +598,13 @@ export default {
                   <!-- Pass down templates provided by the caller -->
                   <template
                     v-for="(_, slot) of $slots"
+                    #[slot]="scope"
                     :key="slot"
                   >
                     <template v-if="shouldProvideSlot(slot)">
                       <slot
                         :name="slot"
-                        v-bind="{ ...$slots[slot]() }"
+                        v-bind="scope"
                       />
                     </template>
                   </template>
@@ -681,12 +682,13 @@ export default {
             <!-- Pass down templates provided by the caller -->
             <template
               v-for="(_, slot) of $slots"
+              #[slot]="scope"
               :key="slot"
             >
               <template v-if="shouldProvideSlot(slot)">
                 <slot
                   :name="slot"
-                  v-bind="{ ...$slots[slot]() }"
+                  v-bind="scope"
                 />
               </template>
             </template>

package/components/InputOrDisplay.vue

@@ -1,28 +1,9 @@
 <script>
-import { createApp } from 'vue';
+import { h, computed } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
-const vueApp = createApp({});
 
-const component = vueApp.component('InputOrDisplay', {
-  render(h) {
-    if (this.isView) {
-      return h('div',
-        { attrs: { class: 'label' } },
-        [
-          h('div',
-            { attrs: { class: 'text-label' } },
-            this.$slots.name ? this.$slots.name : this.name
-          ),
-          h('div',
-            { attrs: { class: 'value' } },
-            this.$slots.value ? this.$slots.value : this.displayValue
-          )
-        ]
-      );
-    } else {
-      return this.$slots.default;
-    }
-  },
+export default {
+  name:  'InputOrDisplay',
   props: {
     name: {
       type:     String,
@@ -37,22 +18,29 @@ const component = vueApp.component('InputOrDisplay', {
       default: 'edit'
     }
   },
-  computed: {
-    isView() {
-      return this.mode === _VIEW;
-    },
+  setup(props, { slots }) {
+    const isView = computed(() => props.mode === _VIEW);
 
-    displayValue() {
-      if (Array.isArray(this.value) && this.value.length === 0) {
+    const displayValue = computed(() => {
+      if (Array.isArray(props.value) && props.value.length === 0) {
         return '';
       } else {
-        return this.value;
+        return props.value;
       }
-    }
-  }
-});
+    });
 
-export default component;
+    return () => {
+      if (isView.value) {
+        return h('div', { class: 'label' }, [
+          h('div', { class: 'text-label' }, slots.name ? slots.name : props.name),
+          h('div', { class: 'value' }, slots.value ? slots.value : displayValue.value)
+        ]);
+      } else {
+        return slots.default;
+      }
+    };
+  }
+};
 </script>
 
 <style lang="scss" scoped>

package/components/LocaleSelector.vue

@@ -63,7 +63,7 @@ export default {
             {{ selectedLocaleLabel }}
             <i class="icon icon-fw icon-sort-down" />
           </a>
-          <template #popover>
+          <template #popper>
             <ul
               class="list-unstyled dropdown"
               style="margin: -1px;"

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

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
 import defaults from './utils/questions-defaults';
 
-describe.skip('(Vue3 Skip) the Boolean Component', () => {
+describe('the Boolean Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
       props: {
@@ -25,7 +25,6 @@ describe.skip('(Vue3 Skip) the Boolean Component', () => {
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"] input[type=checkbox]');
 
-    // TODO: UNIT TEST - Default stubs give us a tab stub, rendering no input fields
     expect(inputFields).toHaveLength(1);
 
     const descriptionFields = wrapper.findAll('[data-testid="boolean-description-var_name"]');

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

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
 import defaults from './utils/questions-defaults';
 
-describe.skip('(Vue3 Skip) the float Component', () => {
+describe('the float Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
       props: {
@@ -25,7 +25,6 @@ describe.skip('(Vue3 Skip) the float Component', () => {
 
     const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
 
-    // TODO: UNIT TEST - Default stubs give us a tab stub, rendering no input fields
     expect(inputFields).toHaveLength(1);
 
     const descriptionFields = wrapper.findAll('[data-testid="float-description-var_name"]');

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

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
 import defaults from './utils/questions-defaults';
 
-describe.skip('(Vue3 Skip) the Int Component', () => {
+describe('the Int Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
       props: {
@@ -25,7 +25,6 @@ describe.skip('(Vue3 Skip) the Int Component', () => {
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
 
-    // TODO: UNIT TEST - Default stubs give us a tab stub, rendering no input fields
     expect(inputFields).toHaveLength(1);
 
     const descriptionFields = wrapper.findAll('[data-testid="int-description-var_name"]');

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

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
 import defaults from './utils/questions-defaults';
 
-describe.skip('(Vue3 Skip) the String Component', () => {
+describe('the String Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
       props: {
@@ -25,7 +25,6 @@ describe.skip('(Vue3 Skip) the String Component', () => {
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
 
-    // TODO: UNIT TEST - Default stubs give us a tab stub, rendering no input fields
     expect(inputFields).toHaveLength(1);
 
     const descriptionFields = wrapper.findAll('[data-testid="string-description-var_name"]');

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

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
 import defaults from './utils/questions-defaults';
 
-describe.skip('(Vue3 Skip) the yaml Component', () => {
+describe('the yaml Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
       props: {

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/SideNav.vue

@@ -439,9 +439,9 @@ export default {
       <!-- locale selector -->
       <span v-if="isSingleProduct">
         <v-dropdown
-          popover-class="localeSelector"
+          popperClass="localeSelector"
           placement="top"
-          trigger="click"
+          :triggers="['click']"
         >
           <a
             data-testid="locale-selector"
@@ -450,7 +450,7 @@ export default {
             {{ locale }}
           </a>
 
-          <template #popover>
+          <template #popper>
             <ul
               class="list-unstyled dropdown"
               style="margin: -1px;"