@rancher/shell 3.0.5-rc.7 → 3.0.5-rc.9

package/components/SlideInPanelManager.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, watch } from 'vue';
+import { computed, onBeforeUnmount, watch, useTemplateRef } from 'vue';
 import { useStore } from 'vuex';
 import {
   DEFAULT_FOCUS_TRAP_OPTS,
@@ -10,6 +10,9 @@ import { useRouter } from 'vue-router';
 
 const HEADER_HEIGHT = 55;
 
+const slideInPanelManager = useTemplateRef('SlideInPanelManager');
+const slideInPanelManagerClose = useTemplateRef('SlideInPanelManagerClose');
+
 const store = useStore();
 const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
 const isClosing = computed(() => store.getters['slideInPanel/isClosing']);
@@ -72,7 +75,9 @@ watch(
           }
 
           return returnFocusSelector || '.dashboard-root';
-        }
+        },
+        // putting the initial focus on the first element that is not conditionally displayed
+        initialFocus: slideInPanelManagerClose.value
       };
 
       useWatcherBasedSetupFocusTrapWithDestroyIncluded(
@@ -83,7 +88,7 @@ watch(
 
           return isOpen?.value && !isClosing?.value;
         },
-        '#slide-in-panel-manager',
+        slideInPanelManager.value as HTMLElement,
         opts,
         false
       );
@@ -128,6 +133,7 @@ function closePanel() {
   <Teleport to="#slides">
     <div
       id="slide-in-panel-manager"
+      ref="SlideInPanelManager"
       @keydown.escape="closePanel"
     >
       <div
@@ -155,6 +161,7 @@ function closePanel() {
             {{ panelTitle }}
           </div>
           <i
+            ref="SlideInPanelManagerClose"
             class="icon icon-close"
             data-testid="slide-in-close"
             :tabindex="isOpen ? 0 : -1"

package/components/SortableTable/index.vue

@@ -3,7 +3,7 @@ import { mapGetters, useStore } from 'vuex';
 import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
-import { dasherize, ucFirst } from '@shell/utils/string';
+import { dasherize, ucFirst, randomStr } from '@shell/utils/string';
 import { get, clone } from '@shell/utils/object';
 import { removeObject } from '@shell/utils/array';
 import { Checkbox } from '@components/Form/Checkbox';
@@ -26,6 +26,7 @@ import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 import ActionDropdownShell from '@shell/components/ActionDropdownShell.vue';
+import { useTabCountUpdater } from '@shell/components/form/ResourceTabs/composable';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -51,7 +52,7 @@ export default {
     'group-value-change',
     'selection',
     'rowClick',
-    'enter',
+    'enter'
   ],
 
   components: {
@@ -432,6 +433,7 @@ export default {
     $main?.addEventListener('scroll', this._onScroll);
 
     this.debouncedPaginationChanged();
+    this.updateTabCount(this.totalRows);
   },
 
   beforeUnmount() {
@@ -445,6 +447,7 @@ export default {
     const $main = document.querySelector('main');
 
     $main?.removeEventListener('scroll', this._onScroll);
+    this.clearTabCount();
   },
 
   watch: {
@@ -559,10 +562,13 @@ export default {
 
     const store = useStore();
     const { featureDropdownMenu } = useRuntimeFlag(store);
+    const { updateTabCount, clearTabCount } = useTabCountUpdater();
 
     return {
       table,
       featureDropdownMenu,
+      updateTabCount,
+      clearTabCount
     };
   },
 
@@ -735,7 +741,7 @@ export default {
         grp.rows.forEach((row) => {
           const rowData = {
             row,
-            key:                        this.get(row, this.keyField),
+            key:                        this.get(row, this.keyField) ?? randomStr(),
             showSubRow:                 this.showSubRow(row, this.keyField),
             canRunBulkActionOfInterest: this.canRunBulkActionOfInterest(row),
             columns:                    []
@@ -1038,7 +1044,7 @@ export default {
     handleActionButtonClick(i, event) {
       // Each row in the table gets its own ref with
       // a number based on its index. If you are using
-      // an ActionMenu that doen't have a dependency on Vuex,
+      // an ActionMenu that doesn't have a dependency on Vuex,
       // these refs are useful because you can reuse the
       // same ActionMenu component on a page with many different
       // target elements in a list,
@@ -1398,7 +1404,7 @@ export default {
         </slot>
         <template
           v-for="(row, i) in groupedRows.rows"
-          :key="i"
+          :key="row.key"
         >
           <slot
             name="main-row"

package/components/SortableTable/paging.js

@@ -99,6 +99,9 @@ export default {
       this.debouncedPaginationChanged();
     },
 
+    totalRows() {
+      this.updateTabCount(this.totalRows);
+    }
   },
 
   methods: {

package/components/Tabbed/Tab.vue

@@ -1,4 +1,6 @@
 <script>
+import { useTabCountWatcher } from '@shell/components/form/ResourceTabs/composable';
+
 export default {
   inject: ['addTab', 'removeTab', 'sideTabs'],
 
@@ -43,6 +45,20 @@ export default {
       required: false,
       type:     Number
     },
+    /**
+     * False to hide the count from being displayed in a tab.
+     * Number override/display the number as the count on the tab.
+     */
+    count: {
+      default: undefined,
+      type:    [Number, Boolean]
+    }
+  },
+
+  setup(props) {
+    const { count, isCountVisible } = useTabCountWatcher();
+
+    return { inferredCount: count, isInferredCountVisible: isCountVisible };
   },
 
   data() {
@@ -50,7 +66,7 @@ export default {
   },
 
   computed: {
-    labelDisplay() {
+    baseLabelDisplay() {
       if ( this.labelKey ) {
         return this.$store.getters['i18n/t'](this.labelKey);
       }
@@ -62,12 +78,38 @@ export default {
       return this.name;
     },
 
+    labelDisplay() {
+      const baseLabel = this.baseLabelDisplay;
+
+      if ( this.displayCount === false ) {
+        return baseLabel;
+      }
+
+      return `${ baseLabel } (${ this.displayCount })`;
+    },
+
     shouldShowHeader() {
       if ( this.showHeader !== null ) {
         return this.showHeader;
       }
 
       return this.sideTabs || false;
+    },
+
+    displayCount() {
+      if (this.count === false) {
+        return false;
+      }
+
+      if (typeof this.count === 'number') {
+        return this.count;
+      }
+
+      if (this.isInferredCountVisible) {
+        return this.inferredCount;
+      }
+
+      return false;
     }
   },
 

package/components/Tabbed/index.vue

@@ -71,6 +71,14 @@ export default {
     showExtensionTabs: {
       type:    Boolean,
       default: true,
+    },
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'tabbed'
     }
   },
 
@@ -253,8 +261,12 @@ export default {
 
 <template>
   <div
-    :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }"
-    data-testid="tabbed"
+    class="tabbed-container"
+    :class="{
+      'side-tabs': !!sideTabs,
+      'tabs-only': tabsOnly
+    }"
+    :data-testid="componentTestid"
   >
     <ul
       v-if="!hideTabs"
@@ -262,7 +274,7 @@ export default {
       role="tablist"
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
-      data-testid="tabbed-block"
+      :data-testid="`${componentTestid}-block`"
       tabindex="0"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
@@ -287,7 +299,9 @@ export default {
           @click.prevent="select(tab.name, $event)"
           @keyup.enter.space="select(tab.name, $event)"
         >
-          <span>{{ tab.labelDisplay }}</span>
+          <span>
+            {{ tab.labelDisplay }}
+          </span>
           <span
             v-if="tab.badge"
             class="tab-badge"
@@ -369,6 +383,10 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.tabbed-container {
+  min-width: fit-content;
+}
+
 .tabs {
   list-style-type: none;
   margin: 0;
@@ -541,6 +559,7 @@ export default {
       list-style: none;
       padding: 0;
       margin-top: auto;
+      z-index: z-index('default');
 
       li {
         display: flex;
@@ -550,16 +569,25 @@ export default {
           flex: 1 1;
           display: flex;
           justify-content: center;
+
+          &:focus-visible {
+            @include focus-outline;
+          }
         }
 
         button:first-of-type {
           border-top: solid 1px var(--border);
           border-right: solid 1px var(--border);
+          border-top-left-radius: 0;
           border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
         }
         button:last-of-type {
           border-top: solid 1px var(--border);
+          border-top-right-radius: 0;
           border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
         }
       }
     }

package/components/__tests__/Cron/CronExpressionEditor.test.ts

@@ -0,0 +1,151 @@
+/* eslint-disable jest/no-hooks */
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { createStore } from 'vuex';
+import CronExpressionEditor from '@shell/components/Cron/CronExpressionEditor.vue';
+import type { CronField } from '@shell/components/Cron/types';
+
+const translations: Record<string, string> = {
+  'component.cron.expressionEditor.label.minute':     'Minute',
+  'component.cron.expressionEditor.label.hour':       'Hour',
+  'component.cron.expressionEditor.label.dayOfMonth': 'Day of Month',
+  'component.cron.expressionEditor.label.month':      'Month',
+  'component.cron.expressionEditor.label.dayOfWeek':  'Day of Week',
+  'component.cron.expressionEditor.invalidValue':     'Invalid value',
+};
+
+const store = createStore({});
+
+interface CronExpressionEditorVm extends InstanceType<typeof CronExpressionEditor> {
+  cronValues: Record<CronField, string>;
+  handleInput: (field: CronField, value: string) => void;
+  isValid: boolean;
+  readableCron: string;
+  errors: Record<CronField, boolean>;
+  focusedField: Record<CronField, boolean>;
+  tooltipRefs: Record<CronField, unknown>;
+  popperInstances: Record<CronField, unknown>;
+  handleFocus: (field: CronField) => void;
+  handleBlur: (field: CronField) => void;
+}
+
+describe('cronExpressionEditor', () => {
+  let wrapper: VueWrapper<CronExpressionEditorVm>;
+
+  const factory = (props: Partial<CronExpressionEditorVm> = {}) => mount(CronExpressionEditor, {
+    global: {
+      plugins: [store],
+      stubs:   {
+        CronTooltip:  true,
+        LabeledInput: {
+          name:     'LabeledInput',
+          props:    ['label', 'tooltip', 'type', 'value'],
+          template: `
+            <div>
+              <label>{{ label }}</label>
+              <input ref="value" :value="value" />
+            </div>
+          `
+        }
+      },
+      mocks: { t: (key: string) => translations[key] || key },
+    },
+    props: { cronExpression: '0 0 * * *', ...props },
+  }) as VueWrapper<CronExpressionEditorVm>;
+
+  afterEach(() => wrapper?.unmount());
+
+  const getEmitted = (event: string) => wrapper.emitted(event) as unknown[][] || [];
+
+  it('renders 5 input fields with correct labels', () => {
+    wrapper = factory();
+    const labels = wrapper.findAll('label').map((l) => l.text());
+
+    expect(labels).toStrictEqual(['Minute', 'Hour', 'Day of Month', 'Month', 'Day of Week']);
+  });
+
+  it('initializes cron values and emits initial events', () => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    expect(vm.cronValues).toStrictEqual({
+      minute: '0', hour: '0', dayOfMonth: '*', month: '*', dayOfWeek: '*'
+    });
+    expect(vm.isValid).toBe(true);
+    expect(vm.readableCron).toContain('12:00');
+
+    expect(getEmitted('update:cronExpression')[0][0]).toBe('0 0 * * *');
+    expect(typeof getEmitted('update:readableCron')[0][0]).toBe('string');
+    expect(getEmitted('update:isValid')[0][0]).toBe(true);
+  });
+
+  it('emits correct events when cron value changes', async() => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    vm.handleInput('minute', '5');
+    await nextTick();
+
+    expect(getEmitted('update:cronExpression')[1][0]).toBe('5 0 * * *');
+    expect(getEmitted('update:readableCron')[1][0]).toBe(vm.readableCron);
+    expect(getEmitted('update:isValid')[1][0]).toBe(true);
+  });
+
+  it('validates individual fields correctly', () => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    vm.handleInput('minute', '0');
+    expect(vm.errors.minute).toBe(false);
+
+    vm.handleInput('minute', '61');
+    expect(vm.errors.minute).toBe(true);
+  });
+
+  it('handles invalid cron expressions gracefully', async() => {
+    wrapper = factory({ cronExpression: '61 * * * *' });
+    const vm = wrapper.vm;
+
+    await nextTick();
+    expect(vm.isValid).toBe(false);
+  });
+
+  it('updates readableCron correctly for valid and invalid inputs', async() => {
+    wrapper = factory({ cronExpression: '0 12 * * *' });
+    const vm = wrapper.vm;
+
+    await nextTick();
+    expect(vm.readableCron).toContain('12:00');
+
+    vm.handleInput('hour', '25');
+    await nextTick();
+    expect(vm.isValid).toBe(false);
+  });
+
+  it('shows tooltip and manages popper on focus/blur', async() => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    await vm.handleFocus('minute');
+    expect(vm.focusedField.minute).toBe(true);
+    expect(vm.tooltipRefs.minute).not.toBeNull();
+    expect(vm.popperInstances.minute).not.toBeNull();
+
+    vm.handleBlur('minute');
+    await nextTick();
+    expect(vm.focusedField.minute).toBe(false);
+    expect(vm.popperInstances.minute).toBeNull();
+  });
+
+  it('displays error tooltip for invalid input', async() => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    vm.handleInput('minute', '61');
+    await nextTick();
+
+    const inputWrapper = wrapper.findComponent({ name: 'LabeledInput' });
+
+    expect(inputWrapper.props('tooltip')).toBe('Invalid value');
+  });
+});

package/components/__tests__/Cron/CronExpressionEditorModal.test.ts

@@ -0,0 +1,81 @@
+/* eslint-disable jest/no-hooks */
+import { mount, VueWrapper } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import CronExpressionEditorModal from '@shell/components/Cron/CronExpressionEditorModal.vue';
+
+interface CronExpressionEditorModalVm extends InstanceType<typeof CronExpressionEditorModal> {
+  localCron: string;
+  confirmCron?: () => void;
+  closeModal?: () => void;
+}
+
+const store = createStore({});
+
+describe('cronExpressionEditorModal', () => {
+  let modalsDiv: HTMLElement;
+  let wrapper: VueWrapper<CronExpressionEditorModalVm>;
+
+  const factory = (props: Partial<CronExpressionEditorModalVm> = {}) => mount(CronExpressionEditorModal, {
+    global: {
+      plugins: [store],
+      stubs:   {
+        AppModal:             true,
+        CronExpressionEditor: true,
+      },
+    },
+    props: {
+      cronExpression: '0 0 * * *',
+      show:           true,
+      ...props,
+    },
+  }) as VueWrapper<CronExpressionEditorModalVm>;
+
+  const getEmitted = (event: string) => wrapper.emitted(event) as unknown[][] || [];
+
+  beforeEach(() => {
+    modalsDiv = document.createElement('div');
+    modalsDiv.id = 'modals';
+    document.body.appendChild(modalsDiv);
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    modalsDiv.remove();
+  });
+
+  it('renders modal with correct initial props', () => {
+    wrapper = factory();
+    expect(wrapper.props('cronExpression')).toBe('0 0 * * *');
+    expect(wrapper.props('show')).toBe(true);
+  });
+
+  it('updates localCron when cronExpression prop changes', async() => {
+    wrapper = factory();
+    await wrapper.setProps({ cronExpression: '*/5 * * * *' });
+    expect(wrapper.vm.localCron).toBe('*/5 * * * *');
+  });
+
+  it('emits update:cronExpression and update:show on confirm', async() => {
+    wrapper = factory();
+    await wrapper.vm.confirmCron?.();
+
+    const cronEmits = getEmitted('update:cronExpression');
+    const showEmits = getEmitted('update:show');
+
+    expect(cronEmits).toHaveLength(1);
+    expect(cronEmits[0][0]).toBe('0 0 * * *');
+
+    expect(showEmits).toHaveLength(1);
+    expect(showEmits[0][0]).toBe(false);
+  });
+
+  it('emits update:show on cancel', async() => {
+    wrapper = factory();
+    await wrapper.vm.closeModal?.();
+
+    const showEmits = getEmitted('update:show');
+
+    expect(showEmits).toHaveLength(1);
+    expect(showEmits[0][0]).toBe(false);
+  });
+});

package/components/__tests__/LazyImage.spec.ts

@@ -0,0 +1,121 @@
+import { mount } from '@vue/test-utils';
+import LazyImage from '@shell/components/LazyImage.vue';
+
+describe('component: LazyImage.vue', () => {
+  const initialSrc = 'initial.jpg';
+  const src = 'test.jpg';
+  const errorSrc = 'error.jpg';
+
+  beforeEach(() => {
+    // Clear all mocks before each test to ensure test isolation
+    jest.clearAllMocks();
+  });
+
+  it('renders the initial source image', () => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    const img = wrapper.find('img');
+
+    expect(img.attributes('src')).toBe(initialSrc);
+  });
+
+  it('does not load the main src image if not in viewport', async() => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    const callback = window.IntersectionObserver.mock.calls[0][0];
+
+    // eslint-disable-next-line node/no-callback-literal
+    callback([{ isIntersecting: false }]);
+    await wrapper.vm.$nextTick();
+
+    const img = wrapper.find('img');
+
+    expect(img.attributes('src')).toBe(initialSrc);
+  });
+
+  it('loads the main src image when it enters the viewport', async() => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    // Manually trigger the intersection observer
+    const callback = window.IntersectionObserver.mock.calls[0][0];
+
+    // eslint-disable-next-line node/no-callback-literal
+    callback([{ isIntersecting: true }]);
+
+    await wrapper.vm.$nextTick();
+
+    const img = wrapper.find('img');
+
+    expect(img.attributes('src')).toBe(src);
+  });
+
+  it('loads the error image if the main src image fails to load', async() => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    // Manually trigger the intersection observer
+    const callback = window.IntersectionObserver.mock.calls[0][0];
+
+    // eslint-disable-next-line node/no-callback-literal
+    callback([{ isIntersecting: true }]);
+
+    await wrapper.vm.$nextTick();
+
+    const img = wrapper.find('img');
+
+    img.trigger('error');
+
+    await wrapper.vm.$nextTick();
+
+    expect(img.attributes('src')).toBe(errorSrc);
+  });
+
+  it('loads a new src image if the src prop changes', async() => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    // Manually trigger the intersection observer
+    const callback = window.IntersectionObserver.mock.calls[0][0];
+
+    // eslint-disable-next-line node/no-callback-literal
+    callback([{ isIntersecting: true }]);
+
+    await wrapper.vm.$nextTick();
+
+    const newSrc = 'new.jpg';
+
+    await wrapper.setProps({ src: newSrc });
+
+    const img = wrapper.find('img');
+
+    expect(img.attributes('src')).toBe(newSrc);
+  });
+});