@rancher/shell 3.0.9 → 3.0.10

package/rancher-components/RcSection/RcSection.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+/**
+ * A section container used for grouping and organizing content, with an
+ * optional header that supports title, badges, actions, and expandability.
+ *
+ * Example:
+ *
+ * <RcSection title="Section title" type="secondary" mode="with-header" :expandable="false" background="secondary">
+ *   <p>Section content here</p>
+ * </RcSection>
+ *
+ * <RcSection title="Section title" type="secondary" mode="with-header" expandable v-model:expanded="expanded" background="secondary">
+ *   <template #counter>
+ *     <RcCounterBadge :count="99" type="inactive" />
+ *   </template>
+ *   <template #errors>
+ *     <RcIcon v-clean-tooltip="'3 validation errors'" type="error" size="large" status="error" />
+ *   </template>
+ *   <template #badges>
+ *     <RcSectionBadges :badges="[
+ *       { label: 'Status', status: 'success', tooltip: 'All systems operational' },
+ *       { label: 'Status', status: 'warning', tooltip: 'Degraded performance' },
+ *       { label: 'Status', status: 'error', tooltip: 'Service unavailable' },
+ *     ]" />
+ *   </template>
+ *   <template #actions>
+ *     <RcSectionActions :actions="[
+ *       { label: 'Action', icon: 'chevron-left', action: () => {} },
+ *       { icon: 'copy', ariaLabel: 'Copy', action: () => {} },
+ *       { icon: 'trash', label: 'Delete', action: () => {} },
+ *     ]" />
+ *   </template>
+ *   <p>Section content here</p>
+ * </RcSection>
+ */
+import { computed, inject, provide, type Ref } from 'vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+import type { RcSectionProps, SectionBackground } from './types';
+
+const RC_SECTION_BG_KEY = 'rc-section-background';
+
+const props = withDefaults(defineProps<RcSectionProps>(), { title: '' });
+
+const parentBackground = inject<Ref<SectionBackground> | null>(RC_SECTION_BG_KEY, null);
+
+const resolvedBackground = computed<SectionBackground>(() => {
+  if (props.background) {
+    return props.background;
+  }
+
+  const parent = parentBackground?.value ?? null;
+
+  return parent === 'primary' ? 'secondary' : 'primary';
+});
+
+provide(RC_SECTION_BG_KEY, resolvedBackground);
+
+const expanded = defineModel<boolean>('expanded', { default: true });
+
+const hasHeader = computed(() => {
+  return props.mode === 'with-header';
+});
+
+const sectionClass = computed(() => ({
+  'rc-section':     true,
+  'type-primary':   props.type === 'primary',
+  'type-secondary': props.type === 'secondary',
+  'bg-primary':     resolvedBackground.value === 'primary',
+  'bg-secondary':   resolvedBackground.value === 'secondary',
+}));
+
+const contentClass = computed(() => ({
+  'section-content':    true,
+  'no-header':          !hasHeader.value,
+  'expandable-content': props.expandable,
+}));
+
+function toggle() {
+  if (props.expandable) {
+    expanded.value = !expanded.value;
+  }
+}
+</script>
+
+<template>
+  <div :class="sectionClass">
+    <div
+      v-if="hasHeader"
+      class="section-header"
+      :class="{ expandable: props.expandable, collapsed: !expanded }"
+      @click="toggle"
+    >
+      <div class="left-wrapper">
+        <RcButton
+          v-if="props.expandable"
+          class="toggle-button"
+          variant="ghost"
+          :aria-expanded="expanded"
+          :aria-label="expanded ? 'Collapse section' : 'Expand section'"
+          @click.stop="toggle"
+        >
+          <RcIcon
+            :type="expanded ? 'chevron-down' : 'chevron-right'"
+            size="medium"
+          />
+        </RcButton>
+        <div class="title">
+          <slot name="title">
+            {{ props.title }}
+          </slot>
+          <slot name="counter" />
+          <slot name="errors" />
+        </div>
+      </div>
+      <div
+        v-if="$slots.badges || $slots.actions"
+        class="right-wrapper"
+      >
+        <div
+          v-if="$slots.badges"
+          class="status-badges"
+        >
+          <slot name="badges" />
+        </div>
+        <div
+          v-if="$slots.actions"
+          class="actions"
+          @click.stop
+        >
+          <slot name="actions" />
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="expanded"
+      :class="contentClass"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rc-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &.type-primary {
+    .title {
+      font-weight: 700;
+    }
+  }
+
+  &.type-secondary {
+    padding: 0 16px;
+    border-radius: 8px;
+
+    .title {
+      font-weight: 600;
+    }
+  }
+
+  &.bg-primary {
+    background-color: var(--rc-section-background-primary);
+  }
+
+  &.bg-secondary {
+    background-color: var(--rc-section-background-secondary);
+  }
+}
+
+.section-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 24px;
+  height: 56px;
+
+  &.expandable {
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
+.left-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+
+  .toggle-button + .title {
+    margin-left: -4px;
+  }
+}
+
+.title {
+  display: inline-flex;
+  gap: 12px;
+  font-size: 18px;
+  line-height: 1.2;
+  color: var(--body-text, inherit);
+}
+
+button.btn-medium.toggle-button {
+  flex-shrink: 0;
+  font-size: 16px;
+  color: var(--body-text, inherit);
+  padding: 0;
+  min-height: initial;
+}
+
+.right-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 24px;
+  margin-left: auto;
+}
+
+.status-badges {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+}
+
+.section-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0 0 16px;
+  color: var(--body-text);
+
+  &.expandable-content {
+    padding: 0 0 16px 24px;
+  }
+
+  &.no-header {
+    padding: 16px 0;
+  }
+}
+</style>

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();
+    });
+  });
+});