dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/rancher-components/RcDropdown/RcDropdownItemCheckbox.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
+import { Checkbox as RcCheckbox } from '@components/Form/Checkbox';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
+
+const props = defineProps({ modelValue: Boolean, disabled: Boolean });
+const emits = defineEmits(['click']);
+
+const { handleKeydown, handleActivate, scrollIntoView } = useDropdownItem();
+
+const handleClick = () => {
+  if (props.disabled) {
+    return;
+  }
+
+  emits('click', !props.modelValue);
+};
+</script>
+
+<template>
+  <div
+    ref="dropdownMenuItem"
+    dropdown-menu-item
+    tabindex="-1"
+    role="menuitemcheckbox"
+    :disabled="disabled || null"
+    :aria-disabled="disabled || false"
+    @click.stop="handleClick"
+    @keydown.enter.space="handleActivate"
+    @keydown.up.down.prevent.stop="handleKeydown"
+    @focusin="scrollIntoView"
+  >
+    <rc-checkbox :value="modelValue">
+      <template #label>
+        <slot name="default">
+          <!--Empty slot content-->
+        </slot>
+      </template>
+    </rc-checkbox>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  [dropdown-menu-item] {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 9px 8px;
+    margin: 0 9px;
+    border-radius: 4px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--dropdown-hover-bg);
+    }
+    &:focus-visible, &:focus {
+      @include focus-outline;
+      outline-offset: 0;
+    }
+    &[disabled] {
+      color: var(--disabled-text);
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+</style>

package/rancher-components/RcDropdown/RcDropdownItemSelect.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
+import { ref } from 'vue';
+
+type LabeledSelectComponent = {
+  focusSearch: () => void;
+};
+
+defineProps({
+  modelValue: {
+    type:    String,
+    default: ''
+  },
+  disabled: Boolean,
+  options:  {
+    type: Array,
+    default() {
+      return [];
+    }
+  },
+});
+const emits = defineEmits(['click', 'select']);
+
+const { handleKeydown, handleActivate, scrollIntoView } = useDropdownItem();
+
+const dropdownMenuItem = ref<HTMLDivElement | null>(null);
+const menuItemSelect = ref<LabeledSelectComponent | null>(null);
+
+const handleClick = () => {
+  menuItemSelect?.value?.focusSearch();
+};
+
+const focusMenuItem = () => {
+  dropdownMenuItem?.value?.focus();
+};
+</script>
+
+<template>
+  <div
+    ref="dropdownMenuItem"
+    dropdown-menu-item
+    tabindex="-1"
+    role="menuitem"
+    :disabled="disabled || null"
+    :aria-disabled="disabled || false"
+    @click.stop="handleClick"
+    @keydown.enter.space="handleActivate"
+    @keydown.up.down.prevent.stop="handleKeydown"
+    @focusin="scrollIntoView"
+  >
+    <LabeledSelect
+      ref="menuItemSelect"
+      :value="modelValue"
+      :label="t('wm.containerLogs.range.label')"
+      :options="options"
+      :clearable="false"
+      placement="top"
+      @keydown.enter.stop
+      @update:value="emits('select', $event)"
+      @on-close="focusMenuItem"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  [dropdown-menu-item] {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 9px 8px;
+    margin: 0 9px;
+    border-radius: 4px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--dropdown-hover-bg);
+    }
+    &:focus-visible, &:focus {
+      @include focus-outline;
+      outline-offset: 0;
+    }
+    &[disabled] {
+      color: var(--disabled-text);
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+</style>

package/rancher-components/RcDropdown/index.ts

@@ -1,5 +1,7 @@
 export { default as RcDropdown } from './RcDropdown.vue';
 export { default as RcDropdownItem } from './RcDropdownItem.vue';
+export { default as RcDropdownItemCheckbox } from './RcDropdownItemCheckbox.vue';
+export { default as RcDropdownItemSelect } from './RcDropdownItemSelect.vue';
 export { default as RcDropdownSeparator } from './RcDropdownSeparator.vue';
 export { default as RcDropdownTrigger } from './RcDropdownTrigger.vue';
 export { default as RcDropdownMenu } from './RcDropdownMenu.vue';

package/rancher-components/RcDropdown/useDropdownContext.ts

@@ -89,6 +89,26 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
     });
   };
 
+  const setDropdownDimensions = (target: HTMLElement | null) => {
+    if (!target) {
+      return;
+    }
+
+    const { top, bottom } = target.getBoundingClientRect();
+    const padding = 32;
+
+    // The dropdown exceeds the top or bottom edge of the screen (or both).
+    if (top - padding < 0 || bottom + padding > window.innerHeight) {
+      const height = Math.min(
+        bottom,
+        window.innerHeight - top,
+        window.innerHeight
+      );
+
+      target.style.height = `${ height - padding }px`;
+    }
+  };
+
   /**
   * Provides Dropdown Context data and methods to descendants of RcDropdown.
   * Accessed in descendents with the `inject()` function.
@@ -115,5 +135,6 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
     provideDropdownContext,
     registerDropdownCollection,
     handleKeydown,
+    setDropdownDimensions,
   };
 };

package/rancher-components/RcDropdown/useDropdownItem.ts

@@ -0,0 +1,92 @@
+import { inject } from 'vue';
+import { DropdownContext, defaultContext } from './types';
+
+export const useDropdownItem = () => {
+  const { dropdownItems, close } = inject<DropdownContext>('dropdownContext') || defaultContext;
+
+  /**
+   * Handles keydown events to navigate between dropdown items.
+   * @param {KeyboardEvent} e - The keydown event.
+   */
+  const handleKeydown = (e: KeyboardEvent) => {
+    const activeItem = document.activeElement;
+
+    const activeIndex = dropdownItems.value.indexOf(activeItem || new HTMLElement());
+
+    if (activeIndex < 0) {
+      return;
+    }
+
+    const shouldAdvance = e.key === 'ArrowDown';
+
+    const newIndex = findNewIndex(shouldAdvance, activeIndex, dropdownItems.value);
+
+    if (dropdownItems.value[newIndex] instanceof HTMLElement) {
+      dropdownItems.value[newIndex].focus();
+    }
+  };
+
+  /**
+   * Finds the new index for the dropdown item based on the key pressed.
+   * @param shouldAdvance - Whether to advance to the next or previous item.
+   * @param activeIndex - Current active index.
+   * @param itemsArr - Array of dropdown items.
+   * @returns The new index.
+   */
+  const findNewIndex = (shouldAdvance: boolean, activeIndex: number, itemsArr: Element[]) => {
+    const newIndex = shouldAdvance ? activeIndex + 1 : activeIndex - 1;
+
+    if (newIndex > itemsArr.length - 1) {
+      return 0;
+    }
+
+    if (newIndex < 0) {
+      return itemsArr.length - 1;
+    }
+
+    return newIndex;
+  };
+
+  /**
+   * Handles keydown events to activate the dropdown item.
+   * @param e - The keydown event.
+   */
+  const handleActivate = (e: KeyboardEvent) => {
+    if (e?.target instanceof HTMLElement) {
+      e?.target?.click();
+    }
+  };
+
+  /**
+   * Scroll the item into view smoothly
+   * @param event FocusIn Event
+   */
+  const scrollIntoView = (event: Event) => {
+    const target = event.target;
+
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+
+    const t = target as HTMLElement;
+
+    // If a button was clicked, then do not scroll into view, as this will scroll to make the button
+    // visible and the click will be ignored - so just return, so that the click works as expected
+    if (t.tagName === 'BUTTON') {
+      return;
+    }
+
+    target?.scrollIntoView({
+      behavior: 'smooth',
+      block:    'center',
+      inline:   'nearest',
+    });
+  };
+
+  return {
+    handleKeydown,
+    close,
+    handleActivate,
+    scrollIntoView,
+  };
+};

package/rancher-components/RcItemCard/RcItemCard.test.ts

@@ -0,0 +1,189 @@
+import { mount } from '@vue/test-utils';
+import RcItemCard from './RcItemCard.vue';
+import RcItemCardAction from './RcItemCardAction.vue';
+
+class ResizeObserverMock {
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+}
+
+global.ResizeObserver = ResizeObserverMock;
+
+const id = 'test';
+
+const baseProps = {
+  id,
+  value:  { someProperty: 'some-value' },
+  image:  { src: 'logo.png', alt: { text: 'Logo' } },
+  header: {
+    title:    { text: 'Card Title' },
+    statuses: [
+      { icon: 'icon-one', tooltip: { text: 'Status One' } },
+      { icon: 'icon-two' }
+    ]
+  },
+  content: { text: 'Card description here' }
+};
+
+describe('rcItemCard', () => {
+  it('renders title, image, and content', () => {
+    const wrapper = mount(RcItemCard, { props: baseProps });
+
+    expect(wrapper.get('[data-testid="item-card-header-title"]').text()).toBe('Card Title');
+    expect(wrapper.get('[data-testid="item-card-content"]').text()).toContain('Card description here');
+    expect(wrapper.get('[data-testid="item-card-image"]')).toBeTruthy();
+    expect(wrapper.findAll(`[data-testid="item-card-header-statuses-status"]`)).toHaveLength(2);
+  });
+
+  it('renders pill only in medium variant', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        variant: 'medium',
+        pill:    { label: { text: 'Installed' } }
+      }
+    });
+
+    expect(wrapper.get('[data-testid="item-card-pill"]').text()).toBe('Installed');
+
+    // now test that it's not rendered when variant is small
+    const wrapperSmall = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        variant: 'small',
+        pill:    { label: { text: 'Installed' } }
+      }
+    });
+
+    expect(wrapperSmall.find('[data-testid="item-card-pill"]').exists()).toBe(false);
+  });
+
+  it('renders action-menu if slot content is provided for it', () => {
+    const wrapper = mount(RcItemCard, {
+      props: { ...baseProps },
+      slots: { 'item-card-actions': '<div class="test-slot-for-actions">test</div>' }
+    });
+
+    expect(wrapper.find('.test-slot-for-actions').exists()).toBe(true);
+  });
+
+  it('renders action-menu when actions are passed as a prop', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        actions: [{ action: 'test', label: 'test' }]
+      }
+    });
+
+    expect(wrapper.findComponent('[data-testid="item-card-header-action-menu"]').exists()).toBe(true);
+  });
+
+  it('does not render action-menu if no slot and no actions', () => {
+    const wrapper = mount(RcItemCard, { props: { ...baseProps } });
+
+    expect(wrapper.findComponent('[data-testid="item-card-header-action-menu"]').exists()).toBe(false);
+  });
+
+  it('emits card-click when clicked and clickable', async() => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: true
+      }
+    });
+
+    await wrapper.trigger('click');
+
+    const emitted = wrapper.emitted('card-click');
+
+    expect(emitted).toBeTruthy();
+    expect(emitted?.[0]).toStrictEqual([{ someProperty: 'some-value' }]);
+  });
+
+  it('does not emit card-click when clicking on rc-item-card-action content', async() => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: true
+      },
+      global: { components: { RcItemCardAction } },
+      slots:  { 'item-card-actions': '<rc-item-card-action>Click me</rc-item-card-action>' }
+    });
+
+    await wrapper.get('[data-testid="rc-item-card-action"]').trigger('click');
+
+    expect(wrapper.emitted('card-click')).toBeFalsy();
+  });
+
+  it('sets role and tabindex when clickable', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: true
+      }
+    });
+
+    const root = wrapper.get(`[data-testid="item-card-${ id }"]`);
+
+    expect(root.attributes('role')).toBe('button');
+    expect(root.attributes('tabindex')).toBe('0');
+  });
+
+  it('does not set role or tabindex when not clickable', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: false
+      }
+    });
+
+    const root = wrapper.get(`[data-testid="item-card-${ id }"]`);
+
+    expect(root.attributes('role')).toBeUndefined();
+    expect(root.attributes('tabindex')).toBeUndefined();
+  });
+
+  it('supports keyboard enter to trigger click', async() => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: true
+      }
+    });
+
+    await wrapper.trigger('keydown.enter');
+    expect(wrapper.emitted('card-click')).toBeTruthy();
+  });
+
+  it('supports slot for footer and sub-header', () => {
+    const wrapper = mount(RcItemCard, {
+      props: baseProps,
+      slots: {
+        'item-card-footer':     '<div>FooterContent</div>',
+        'item-card-sub-header': '<div>SubHeaderContent</div>'
+      }
+    });
+
+    expect(wrapper.text()).toContain('FooterContent');
+    expect(wrapper.text()).toContain('SubHeaderContent');
+  });
+
+  it('renders icon with custom color', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        header: {
+          ...baseProps.header,
+          statuses: [
+            { icon: 'icon-custom', customColor: 'red' }
+          ]
+        }
+      }
+    });
+
+    const icon = wrapper.get('[data-testid="item-card-header-status-0"]');
+
+    expect(icon.attributes('style')).toContain('color: red');
+  });
+});