@rancher/shell 3.0.9-rc.6 → 3.0.10

package/rancher-components/RcSection/RcSectionActions.test.ts

@@ -0,0 +1,212 @@
+import { mount } from '@vue/test-utils';
+import RcSectionActions from './RcSectionActions.vue';
+import type { ActionConfig } from './types';
+
+// Stubs for child components to isolate unit tests
+const RcButtonStub = {
+  name:     'RcButton',
+  props:    ['variant', 'size', 'leftIcon', 'ariaLabel'],
+  emits:    ['click'],
+  template: '<button class="rc-button" :data-variant="variant" :data-left-icon="leftIcon" :aria-label="ariaLabel" @click="$emit(\'click\', $event)"><slot /></button>',
+};
+
+const RcDropdownStub = {
+  name:     'RcDropdown',
+  template: '<div class="rc-dropdown"><slot /><slot name="dropdownCollection" /></div>',
+};
+
+const RcDropdownTriggerStub = {
+  name:     'RcDropdownTrigger',
+  template: '<button class="rc-dropdown-trigger"><slot /></button>',
+};
+
+const RcDropdownItemStub = {
+  name:     'RcDropdownItem',
+  props:    ['ariaLabel'],
+  emits:    ['click'],
+  template: '<div class="rc-dropdown-item" :aria-label="ariaLabel" @click="$emit(\'click\', $event)"><slot name="before" /><slot /></div>',
+};
+
+const RcIconStub = {
+  name:     'RcIcon',
+  props:    ['type', 'size'],
+  template: '<span class="rc-icon" :data-type="type" />',
+};
+
+const globalStubs = {
+  RcButton:          RcButtonStub,
+  RcDropdown:        RcDropdownStub,
+  RcDropdownTrigger: RcDropdownTriggerStub,
+  RcDropdownItem:    RcDropdownItemStub,
+  RcIcon:            RcIconStub,
+};
+
+describe('component: RcSectionActions', () => {
+  function createWrapper(actions: ActionConfig[]) {
+    return mount(RcSectionActions, {
+      props:  { actions },
+      global: { stubs: globalStubs },
+    });
+  }
+
+  describe('with fewer than 3 actions', () => {
+    it('should render all actions as primary buttons when 1 action is provided', () => {
+      const action = jest.fn();
+      const wrapper = createWrapper([{ label: 'Edit', action }]);
+
+      const buttons = wrapper.findAll('.rc-button');
+
+      expect(buttons).toHaveLength(1);
+      expect(buttons[0].text()).toContain('Edit');
+    });
+
+    it('should render all actions as primary buttons when 2 actions are provided', () => {
+      const wrapper = createWrapper([
+        { label: 'Edit', action: jest.fn() },
+        { label: 'Delete', action: jest.fn() },
+      ]);
+
+      expect(wrapper.findAll('.rc-button')).toHaveLength(2);
+    });
+
+    it('should not render the overflow dropdown when fewer than 3 actions', () => {
+      const wrapper = createWrapper([
+        { label: 'Edit', action: jest.fn() },
+        { label: 'Delete', action: jest.fn() },
+      ]);
+
+      expect(wrapper.find('.rc-dropdown').exists()).toBe(false);
+    });
+  });
+
+  describe('with 3 or more actions', () => {
+    it('should render only the first 2 actions as primary buttons', () => {
+      const wrapper = createWrapper([
+        { label: 'A', action: jest.fn() },
+        { label: 'B', action: jest.fn() },
+        { label: 'C', action: jest.fn() },
+      ]);
+
+      const buttons = wrapper.findAll('.rc-button');
+
+      expect(buttons).toHaveLength(2);
+      expect(buttons[0].text()).toContain('A');
+      expect(buttons[1].text()).toContain('B');
+    });
+
+    it('should render the overflow dropdown', () => {
+      const wrapper = createWrapper([
+        { label: 'A', action: jest.fn() },
+        { label: 'B', action: jest.fn() },
+        { label: 'C', action: jest.fn() },
+      ]);
+
+      expect(wrapper.find('.rc-dropdown').exists()).toBe(true);
+    });
+
+    it('should place remaining actions in the overflow dropdown', () => {
+      const wrapper = createWrapper([
+        { label: 'A', action: jest.fn() },
+        { label: 'B', action: jest.fn() },
+        { label: 'C', action: jest.fn() },
+        { label: 'D', action: jest.fn() },
+      ]);
+
+      const dropdownItems = wrapper.findAll('.rc-dropdown-item');
+
+      expect(dropdownItems).toHaveLength(2);
+      expect(dropdownItems[0].text()).toContain('C');
+      expect(dropdownItems[1].text()).toContain('D');
+    });
+  });
+
+  describe('action callbacks', () => {
+    it('should invoke the action callback when a primary button is clicked', async() => {
+      const action = jest.fn();
+      const wrapper = createWrapper([{ label: 'Edit', action }]);
+
+      await wrapper.find('.rc-button').trigger('click');
+
+      expect(action).toHaveBeenCalledTimes(1);
+    });
+
+    it('should invoke the correct action callback for overflow items', async() => {
+      const actionC = jest.fn();
+      const wrapper = createWrapper([
+        { label: 'A', action: jest.fn() },
+        { label: 'B', action: jest.fn() },
+        { label: 'C', action: actionC },
+      ]);
+
+      await wrapper.find('.rc-dropdown-item').trigger('click');
+
+      expect(actionC).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('variant resolution', () => {
+    it('should use "link" variant for actions with a label', () => {
+      const wrapper = createWrapper([{ label: 'Edit', action: jest.fn() }]);
+
+      expect(wrapper.find('.rc-button').attributes('data-variant')).toBe('link');
+    });
+
+    it('should use "link" variant for icon-only actions', () => {
+      const wrapper = createWrapper([{ icon: 'copy', action: jest.fn() }]);
+
+      expect(wrapper.find('.rc-button').attributes('data-variant')).toBe('link');
+    });
+
+    it('should render icon inside button for icon-only actions', () => {
+      const wrapper = createWrapper([{ icon: 'copy', action: jest.fn() }]);
+
+      expect(wrapper.find('.rc-button .rc-icon').exists()).toBe(true);
+      expect(wrapper.find('.rc-button .rc-icon').attributes('data-type')).toBe('copy');
+    });
+
+    it('should use left-icon for labeled actions with an icon', () => {
+      const wrapper = createWrapper([{
+        label: 'Edit', icon: 'edit', action: jest.fn()
+      }]);
+
+      expect(wrapper.find('.rc-button').attributes('data-left-icon')).toBe('edit');
+    });
+  });
+
+  describe('ariaLabel', () => {
+    it('should set aria-label on a primary button when ariaLabel is provided', () => {
+      const wrapper = createWrapper([{
+        icon: 'copy', ariaLabel: 'Copy item', action: jest.fn()
+      }]);
+
+      expect(wrapper.find('.rc-button').attributes('aria-label')).toBe('Copy item');
+    });
+
+    it('should not set aria-label on a primary button when ariaLabel is omitted', () => {
+      const wrapper = createWrapper([{ label: 'Edit', action: jest.fn() }]);
+
+      expect(wrapper.find('.rc-button').attributes('aria-label')).toBeUndefined();
+    });
+
+    it('should set aria-label on overflow dropdown items when ariaLabel is provided', () => {
+      const wrapper = createWrapper([
+        { label: 'A', action: jest.fn() },
+        { label: 'B', action: jest.fn() },
+        {
+          label: 'C', ariaLabel: 'Do C action', action: jest.fn()
+        },
+      ]);
+
+      expect(wrapper.find('.rc-dropdown-item').attributes('aria-label')).toBe('Do C action');
+    });
+  });
+
+  describe('empty actions', () => {
+    it('should render nothing when actions array is empty', () => {
+      const wrapper = createWrapper([]);
+
+      expect(wrapper.findAll('.rc-button')).toHaveLength(0);
+      expect(wrapper.find('.rc-dropdown').exists()).toBe(false);
+    });
+  });
+});

package/rancher-components/RcSection/RcSectionActions.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import RcDropdown from '@components/RcDropdown/RcDropdown.vue';
+import RcDropdownTrigger from '@components/RcDropdown/RcDropdownTrigger.vue';
+import RcDropdownItem from '@components/RcDropdown/RcDropdownItem.vue';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+
+import type { RcSectionActionsProps } from './types';
+
+const props = defineProps<RcSectionActionsProps>();
+
+const primaryActions = computed(() => (props.actions.length < 3 ? props.actions : props.actions.slice(0, 2)));
+
+const overflowActions = computed(() => (props.actions.length < 3 ? [] : props.actions.slice(2)));
+</script>
+
+<template>
+  <RcButton
+    v-for="(action, index) in primaryActions"
+    :key="index"
+    :class="{ 'icon-action': !action.label }"
+    variant="link"
+    size="medium"
+    :left-icon="action.label && action.icon ? (action.icon as any) : undefined"
+    :aria-label="action.ariaLabel"
+    @click.stop="action.action"
+  >
+    <RcIcon
+      v-if="!action.label && action.icon"
+      :type="action.icon as any"
+      size="medium"
+    />
+    <template v-if="action.label">
+      {{ action.label }}
+    </template>
+  </RcButton>
+
+  <RcDropdown
+    v-if="overflowActions.length"
+    placement="bottom-end"
+    @click.stop
+  >
+    <RcDropdownTrigger
+      class="icon-action"
+      variant="link"
+      size="medium"
+      aria-label="More actions"
+    >
+      <RcIcon
+        type="actions"
+        size="medium"
+      />
+    </RcDropdownTrigger>
+
+    <template #dropdownCollection>
+      <RcDropdownItem
+        v-for="(action, index) in overflowActions"
+        :key="index"
+        :aria-label="action.ariaLabel"
+        @click.stop="action.action"
+      >
+        <template
+          v-if="action.icon"
+          #before
+        >
+          <RcIcon
+            :type="action.icon as any"
+            size="small"
+          />
+        </template>
+        {{ action.label }}
+      </RcDropdownItem>
+    </template>
+  </RcDropdown>
+</template>
+
+<style lang="scss" scoped>
+
+.rc-button.btn-medium.variant-link {
+  &, &:hover {
+    color: var(--rc-section-action-color);
+  }
+}
+</style>

package/rancher-components/RcSection/RcSectionBadges.test.ts

@@ -0,0 +1,149 @@
+import { mount } from '@vue/test-utils';
+import RcSectionBadges from './RcSectionBadges.vue';
+
+// Stub RcStatusBadge to avoid pulling in its full dependency tree
+const RcStatusBadgeStub = {
+  name:     'RcStatusBadge',
+  props:    ['status'],
+  template: '<span class="rc-status-badge" :data-status="status"><slot /></span>',
+};
+
+describe('component: RcSectionBadges', () => {
+  function createWrapper(badges: { label: string; status: string; tooltip?: string }[]) {
+    return mount(RcSectionBadges, {
+      props:  { badges },
+      global: {
+        stubs:      { RcStatusBadge: RcStatusBadgeStub },
+        directives: { 'clean-tooltip': () => {} },
+      },
+    });
+  }
+
+  it('should render all badges when count is within the limit', () => {
+    const badges = [
+      { label: 'Active', status: 'success' },
+      { label: 'Pending', status: 'warning' },
+    ];
+    const wrapper = createWrapper(badges);
+    const rendered = wrapper.findAll('.rc-status-badge');
+
+    expect(rendered).toHaveLength(2);
+    expect(rendered[0].text()).toContain('Active');
+    expect(rendered[1].text()).toContain('Pending');
+  });
+
+  it('should render exactly 3 badges when 3 are provided', () => {
+    const badges = [
+      { label: 'A', status: 'success' },
+      { label: 'B', status: 'warning' },
+      { label: 'C', status: 'error' },
+    ];
+    const wrapper = createWrapper(badges);
+
+    expect(wrapper.findAll('.rc-status-badge')).toHaveLength(3);
+  });
+
+  it('should render a maximum of 3 badges when more than 3 are provided', () => {
+    const badges = [
+      { label: 'A', status: 'success' },
+      { label: 'B', status: 'warning' },
+      { label: 'C', status: 'error' },
+      { label: 'D', status: 'info' },
+    ];
+    const wrapper = createWrapper(badges);
+    const rendered = wrapper.findAll('.rc-status-badge');
+
+    expect(rendered).toHaveLength(3);
+    expect(rendered[0].text()).toContain('A');
+    expect(rendered[1].text()).toContain('B');
+    expect(rendered[2].text()).toContain('C');
+  });
+
+  it('should pass the correct status prop to each badge', () => {
+    const badges = [
+      { label: 'A', status: 'success' },
+      { label: 'B', status: 'error' },
+    ];
+    const wrapper = createWrapper(badges);
+    const rendered = wrapper.findAll('.rc-status-badge');
+
+    expect(rendered[0].attributes('data-status')).toBe('success');
+    expect(rendered[1].attributes('data-status')).toBe('error');
+  });
+
+  it('should render nothing when badges array is empty', () => {
+    const wrapper = createWrapper([]);
+
+    expect(wrapper.findAll('.rc-status-badge')).toHaveLength(0);
+  });
+
+  it('should render a single badge', () => {
+    const wrapper = createWrapper([{ label: 'Only', status: 'info' }]);
+
+    expect(wrapper.findAll('.rc-status-badge')).toHaveLength(1);
+    expect(wrapper.find('.rc-status-badge').text()).toContain('Only');
+  });
+
+  describe('tooltip', () => {
+    it('should pass tooltip value to v-clean-tooltip directive', () => {
+      const badges = [
+        {
+          label: 'Active', status: 'success', tooltip: 'All systems operational'
+        },
+      ];
+      const wrapper = createWrapper(badges);
+
+      // The directive is registered; if the template used an unknown directive it would throw.
+      // Verify the badge still renders correctly when tooltip is provided.
+      expect(wrapper.findAll('.rc-status-badge')).toHaveLength(1);
+      expect(wrapper.find('.rc-status-badge').text()).toContain('Active');
+    });
+
+    it('should render badges without tooltip when tooltip is omitted', () => {
+      const badges = [
+        { label: 'Pending', status: 'warning' },
+      ];
+      const wrapper = createWrapper(badges);
+
+      expect(wrapper.findAll('.rc-status-badge')).toHaveLength(1);
+      expect(wrapper.find('.rc-status-badge').text()).toContain('Pending');
+    });
+  });
+
+  describe('console warning', () => {
+    it('should warn when more than 3 badges are provided', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const badges = [
+        { label: 'A', status: 'success' },
+        { label: 'B', status: 'warning' },
+        { label: 'C', status: 'error' },
+        { label: 'D', status: 'info' },
+      ];
+
+      createWrapper(badges);
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[RcSectionBadges]: Received 4 badges but only 3 are allowed')
+      );
+
+      warnSpy.mockRestore();
+    });
+
+    it('should not warn when 3 or fewer badges are provided', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const badges = [
+        { label: 'A', status: 'success' },
+        { label: 'B', status: 'warning' },
+        { label: 'C', status: 'error' },
+      ];
+
+      createWrapper(badges);
+
+      expect(warnSpy).not.toHaveBeenCalledWith(
+        expect.stringContaining('[RcSectionBadges]')
+      );
+
+      warnSpy.mockRestore();
+    });
+  });
+});

package/rancher-components/RcSection/RcSectionBadges.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import RcStatusBadge from '@components/Pill/RcStatusBadge';
+import type { RcSectionBadgesProps } from './types';
+
+const MAX_BADGES = 3;
+
+const props = defineProps<RcSectionBadgesProps>();
+
+const visibleBadges = computed(() => {
+  if (props.badges.length > MAX_BADGES) {
+    // eslint-disable-next-line no-console
+    console.warn(`[RcSectionBadges]: Received ${ props.badges.length } badges but only ${ MAX_BADGES } are allowed. Extra badges will be hidden.`);
+  }
+
+  return props.badges.slice(0, MAX_BADGES);
+});
+</script>
+
+<template>
+  <RcStatusBadge
+    v-for="(badge, i) in visibleBadges"
+    :key="i"
+    v-clean-tooltip="badge.tooltip"
+    :status="badge.status"
+  >
+    {{ badge.label }}
+  </RcStatusBadge>
+</template>

package/rancher-components/RcSection/index.ts

@@ -0,0 +1,12 @@
+export { default as RcSection } from './RcSection.vue';
+export { default as RcSectionBadges } from './RcSectionBadges.vue';
+export { default as RcSectionActions } from './RcSectionActions.vue';
+export type {
+  RcSectionProps,
+  SectionType,
+  SectionMode,
+  BadgeConfig,
+  RcSectionBadgesProps,
+  ActionConfig,
+  RcSectionActionsProps,
+} from './types';

package/rancher-components/RcSection/types.ts

@@ -0,0 +1,86 @@
+import type { Status } from '@components/utils/status';
+import type { RcIconType } from '@components/RcIcon/types';
+
+export type SectionType = 'primary' | 'secondary';
+
+export type SectionMode = 'with-header' | 'no-header';
+
+export type SectionBackground = 'primary' | 'secondary';
+
+// ---------------------------------------------------------------------------
+// Badge helpers
+// ---------------------------------------------------------------------------
+
+export interface BadgeConfig {
+  /** Display text inside the badge. */
+  label: string;
+  /** Status colour of the badge. */
+  status: Status;
+  /** Optional tooltip text shown on hover. */
+  tooltip?: string;
+}
+
+export interface RcSectionBadgesProps {
+  badges: BadgeConfig[];
+}
+
+// ---------------------------------------------------------------------------
+// Action helpers
+// ---------------------------------------------------------------------------
+
+export interface ActionConfig {
+  /** Button label. When omitted the button renders as icon-only (ghost). */
+  label?: string;
+  /** Icon shown on the button (left position for labeled, sole content for icon-only). */
+  icon?: RcIconType;
+  /** Accessible label for the button. Required when `label` is omitted so screen readers can describe the action. */
+  ariaLabel?: string;
+  /** Callback invoked when the action is clicked. */
+  action: () => void;
+}
+
+export interface RcSectionActionsProps {
+  actions: ActionConfig[];
+}
+
+// ---------------------------------------------------------------------------
+// Section
+// ---------------------------------------------------------------------------
+
+export interface RcSectionProps {
+  /**
+   * Visual type of the section.
+   * - Primary: no lateral padding, border-radius, or background (inherits from parent). Bolder title (700).
+   * - Secondary: has lateral padding (16px), border-radius (8px), and background color. Lighter title (600).
+   */
+  type: SectionType;
+
+  /**
+   * Controls whether the section renders with a header or without.
+   * - 'with-header': renders the full header (title, badges, actions, errors).
+   * - 'no-header': hides the header entirely; content padding adjusts to 16px vertical.
+   */
+  mode: SectionMode;
+
+  /**
+   * Background color of the section. When omitted, automatically alternates
+   * from the parent RcSection's background (primary -> secondary -> primary).
+   */
+  background?: SectionBackground;
+
+  /**
+   * Whether the section can be expanded/collapsed via the header.
+   */
+  expandable: boolean;
+
+  /**
+   * Whether the section content is expanded. Only applies when `expandable` is true.
+   * Supports `v-model:expanded`.
+   */
+  expanded?: boolean;
+
+  /**
+   * The section title text. Can also be provided via the `title` slot.
+   */
+  title?: string;
+}

package/scripts/test-plugins-build.sh

@@ -235,10 +235,11 @@ function clone_repo_test_extension_build() {
 
 # Here we just add the extension that we want to include as a check (all our official extensions should be included here)
 # Don't forget to add the unit tests exception to clone_repo_test_extension_build function if a new extension has those
-clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
-clone_repo_test_extension_build "rancher" "elemental-ui" "elemental"
+# TODO: ISSUE #16858 - Reenable the tests as packages migrate to node version 24
+# clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
+# clone_repo_test_extension_build "rancher" "elemental-ui" "elemental"
 clone_repo_test_extension_build "neuvector" "manager-ext" "neuvector-ui-ext"
-clone_repo_test_extension_build "StackVista" "rancher-extension-stackstate" "observability"
-clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
+# clone_repo_test_extension_build "StackVista" "rancher-extension-stackstate" "observability"
+# clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
 
 echo "All done"