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

package/components/CruResource.vue

@@ -587,75 +587,74 @@ export default {
               </template>
             </template>
             <template #controlsContainer="{showPrevious, next, back, activeStep, canNext, activeStepIndex, visibleSteps}">
-              <template name="form-footer">
-                <CruResourceFooter
-                  class="cru__footer"
-                  :mode="mode"
-                  :is-form="showAsForm"
-                  :show-cancel="showCancel"
-                  @cancel-confirmed="confirmCancel"
+              <CruResourceFooter
+                class="cru__footer"
+                :mode="mode"
+                :is-form="showAsForm"
+                :show-cancel="showCancel"
+                @cancel-confirmed="confirmCancel"
+              >
+                <!-- Pass down templates provided by the caller -->
+                <template
+                  v-for="(_, slot) of $slots"
+                  #[slot]="scope"
+                  :key="slot"
                 >
-                  <!-- Pass down templates provided by the caller -->
+                  <template v-if="shouldProvideSlot(slot)">
+                    <slot
+                      :name="slot"
+                      v-bind="scope"
+                    />
+                  </template>
+                </template>
+                <div class="controls-steps">
+                  <button
+                    v-if="showYaml"
+                    type="button"
+                    class="btn role-secondary"
+                    @click="showPreviewYaml"
+                  >
+                    <t k="cruResource.previewYaml" />
+                  </button>
                   <template
-                    v-for="(_, slot) of $slots"
-                    :key="slot"
+                    v-if="showPrevious"
+                    name="back"
                   >
-                    <template v-if="shouldProvideSlot(slot)">
-                      <slot
-                        :name="slot"
-                        v-bind="{ ...$slots[slot]() }"
-                      />
-                    </template>
-                  </template>
-                  <div class="controls-steps">
                     <button
-                      v-if="showYaml"
                       type="button"
                       class="btn role-secondary"
-                      @click="showPreviewYaml"
+                      @click="back()"
                     >
-                      <t k="cruResource.previewYaml" />
+                      <t k="wizard.previous" />
                     </button>
-                    <template
-                      v-if="showPrevious"
-                      name="back"
-                    >
-                      <button
-                        type="button"
-                        class="btn role-secondary"
-                        @click="back()"
-                      >
-                        <t k="wizard.previous" />
-                      </button>
-                    </template>
-                    <template
-                      v-if="activeStepIndex === visibleSteps.length-1"
-                      name="finish"
-                    >
-                      <AsyncButton
-                        v-if="!showSubtypeSelection && !isView"
-                        ref="save"
-                        :disabled="!activeStep.ready"
-                        :mode="finishButtonMode || mode"
-                        @click="$emit('finish', $event)"
-                      />
-                    </template>
-                    <template
-                      v-else
-                      name="next"
+                  </template>
+                  <template
+                    v-if="activeStepIndex === visibleSteps.length-1"
+                    name="finish"
+                  >
+                    <AsyncButton
+                      v-if="!showSubtypeSelection && !isView"
+                      ref="save"
+                      :disabled="!activeStep.ready"
+                      :mode="finishButtonMode || mode"
+                      @click="$emit('finish', $event)"
+                    />
+                  </template>
+                  <template
+                    v-else
+                    name="next"
+                  >
+                    <button
+                      :disabled="!canNext"
+                      type="button"
+                      class="btn role-primary"
+                      @click="next()"
                     >
-                      <button
-                        :disabled="!canNext"
-                        type="button"
-                        class="btn role-primary"
-                        @click="next()"
-                      >
-                        <t k="wizard.next" />
-                      </button>
-                    </template>
-                  </div>
-                </CruResourceFooter>
-              </template>
+                      <t k="wizard.next" />
+                    </button>
+                  </template>
+                </div>
+              </CruResourceFooter>
             </template>
           </Wizard>
         </div>
@@ -681,12 +680,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/Import.vue

@@ -140,7 +140,6 @@ export default {
             <div class="col span-6">
               <LabeledSelect
                 :value="defaultNamespace"
-                class="pull-right"
                 :options="namespaceOptions"
                 label-key="import.defaultNamespace.label"
                 mode="edit"

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

@@ -52,9 +52,11 @@ export default {
     <div v-if="mode === 'login'">
       <div v-if="showLocale">
         <v-dropdown
-          popover-class="localeSelector"
+          popperClass="localeSelector"
           placement="top"
-          trigger="click"
+          distance="8"
+          skidding="12"
+          :triggers="['click']"
         >
           <a
             data-testid="locale-selector"
@@ -63,7 +65,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;"

package/components/SortableTable/index.vue

@@ -1,5 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
+import { defineAsyncComponent } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
@@ -682,7 +683,7 @@ export default {
                 const pluginFormatter = this.$plugin?.getDynamic('formatters', c.formatter);
 
                 if (pluginFormatter) {
-                  component = pluginFormatter;
+                  component = defineAsyncComponent(pluginFormatter);
                   needRef = true;
                 }
               }

package/components/Wizard.vue

@@ -4,6 +4,7 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { stringify } from '@shell/utils/error';
+import LazyImage from '@shell/components/LazyImage';
 
 /*
 Wizard accepts an array of steps (see props), and creates named slots for each step.
@@ -26,6 +27,7 @@ export default {
     AsyncButton,
     Banner,
     Loading,
+    LazyImage,
   },
 
   props: {

package/components/YamlEditor.vue

@@ -103,7 +103,7 @@ export default {
         mode:            'yaml',
         lint:            !readOnly,
         lineNumbers:     !readOnly,
-        styleActiveLine: true,
+        styleActiveLine: false,
         tabSize:         2,
         indentWithTabs:  false,
         cursorBlinkRate: ( readOnly ? -1 : 530 ),

package/components/__tests__/CodeMirror.test.ts

@@ -1,96 +1,93 @@
-// import { nextTick } from 'vue';
-// import { shallowMount, Wrapper } from '@vue/test-utils';
-// import CodeMirror from '@shell/components/CodeMirror.vue';
-// import { _EDIT, _YAML } from '@shell/config/query-params';
-
-// // eslint-disable-next-line jest/no-disabled-tests
-// describe.skip('component: CodeMirror.vue', () => {
-//   let wrapper: Wrapper<InstanceType<typeof CodeMirror>>;
-
-//   const options = {
-//     readOnly: false,
-//     gutters:  [
-//       'CodeMirror-lint-markers',
-//       'CodeMirror-foldgutter'
-//     ],
-//     mode:            'yaml',
-//     lint:            true,
-//     lineNumbers:     true,
-//     styleActiveLine: true,
-//     tabSize:         2,
-//     indentWithTabs:  false,
-//     cursorBlinkRate: 530,
-//     extraKeys:       { 'Ctrl-Space': 'autocomplete' }
-//   };
-
-//   const mountOptions = {
-//     propsData: {
-//       value:         '',
-//       mode:          _EDIT,
-//       options,
-//       asTextArea:    false,
-//       showKeyMapBox: true,
-//     },
-//     mocks: {
-//       $store: {
-//         getters: {
-//           currentStore:              () => 'current_store',
-//           'current_store/schemaFor': jest.fn(),
-//           'current_store/all':       jest.fn(),
-//           'i18n/t':                  () => 'Vim',
-//           'prefs/get':               () => 'Vim',
-//           'prefs/theme':             jest.fn(),
-//         }
-//       },
-//       $route:  { query: { AS: _YAML } },
-//       $router: { applyQuery: jest.fn() },
-//     },
-//   };
-
-//   // eslint-disable-next-line jest/no-disabled-tests
-//   describe.skip('keyMap info', () => {
-//     (window as any).__codeMirrorLoader = () => new Promise((resolve) => {
-//       resolve(true);
-//     });
-
-//     wrapper = shallowMount(
-//       CodeMirror,
-//       mountOptions,
-//     );
-
-//     it(`should show keyMap preference`, async() => {
-//       await nextTick();
-
-//       const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
-//       const keyboardIcon = keyMapBox.find('.keymap-indicator');
-//       const closeIcon = keyMapBox.find('.icon-close');
-
-//       expect(keyboardIcon.element).toBeDefined();
-//       expect(closeIcon.element).toBeDefined();
-//     });
-
-//     it(`should remove keyMap box`, async() => {
-//       await nextTick();
-
-//       let keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
-
-//       keyMapBox.trigger('mouseenter');
-//       await nextTick();
-
-//       const closeIcon = keyMapBox.find('.icon-close');
-
-//       closeIcon.element.click();
-//       await nextTick();
-
-//       keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
-
-//       expect(keyMapBox.element).toBeUndefined();
-//     });
-//   });
-// });
-
-describe.skip('(Vue3 Skip) it must have one test', () => {
-  it('will pass', () => {
-    expect(true).toBe(true);
+import { nextTick } from 'vue';
+import { shallowMount, Wrapper } from '@vue/test-utils';
+import CodeMirror from '@shell/components/CodeMirror.vue';
+import { _EDIT, _YAML } from '@shell/config/query-params';
+
+// eslint-disable-next-line jest/no-disabled-tests
+describe('component: CodeMirror.vue', () => {
+  let wrapper: Wrapper<InstanceType<typeof CodeMirror>>;
+
+  const options = {
+    readOnly: false,
+    gutters:  [
+      'CodeMirror-lint-markers',
+      'CodeMirror-foldgutter'
+    ],
+    mode:            'yaml',
+    lint:            true,
+    lineNumbers:     true,
+    styleActiveLine: true,
+    tabSize:         2,
+    indentWithTabs:  false,
+    cursorBlinkRate: 530,
+    extraKeys:       { 'Ctrl-Space': 'autocomplete' }
+  };
+
+  const mountOptions = {
+    propsData: {
+      value:         '',
+      mode:          _EDIT,
+      options,
+      asTextArea:    false,
+      showKeyMapBox: true,
+    },
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  () => 'Vim',
+            'prefs/get':               () => 'Vim',
+            'prefs/theme':             jest.fn(),
+          }
+        },
+        $route:  { query: { AS: _YAML } },
+        $router: { applyQuery: jest.fn() },
+      },
+    }
+
+  };
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  describe('keyMap info', () => {
+    (window as any).__codeMirrorLoader = () => new Promise((resolve) => {
+      resolve(true);
+    });
+
+    wrapper = shallowMount(
+      CodeMirror,
+      mountOptions,
+    );
+
+    it(`should show keyMap preference`, async() => {
+      await nextTick();
+
+      const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"] .keymap-indicator');
+
+      const closeIcon = wrapper.find('[data-testid="code-mirror-keymap"] .icon-close');
+
+      expect(keyMapBox).toBeDefined();
+      expect(closeIcon).toBeDefined();
+    });
+
+    it(`should remove keyMap box`, async() => {
+      await nextTick();
+
+      let keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+
+      keyMapBox.trigger('mouseenter');
+      await nextTick();
+
+      const closeIcon = keyMapBox.find('.icon-close');
+
+      closeIcon.element.click();
+      await nextTick();
+
+      keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+
+      expect(keyMapBox.exists()).toBe(false);
+    });
   });
 });

package/components/__tests__/ConsumptionGauge.test.ts

@@ -3,7 +3,7 @@ import ConsumptionGauge from '@shell/components/ConsumptionGauge.vue';
 import PercentageBar from '@shell/components/PercentageBar.vue';
 
 describe('component: ConsumptionGauge', () => {
-  it.skip('(Vue3 Skip) should render component with the correct data applied', () => {
+  it('should render component with the correct data applied', () => {
     const colorStops = {
       0: '--success', 30: '--warning', 70: '--error'
     };
@@ -36,7 +36,7 @@ describe('component: ConsumptionGauge', () => {
 
     // checking PercentageBar component render
     expect(percentageBar.exists()).toBe(true);
-    expect(Number(percentageBar.attributes().value)).toBe(20);
+    expect(percentageBar.props().modelValue).toBe(20);
     expect(percentageBar.props().colorStops).toStrictEqual(colorStops);
   });