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

package/rancher-components/Pill/RcStatusBadge/RcStatusBadge.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { RcStatusBadgeProps } from '@components/Pill/RcStatusBadge/types';
+
+const props = defineProps<RcStatusBadgeProps>();
+</script>
+
+<template>
+  <div
+    class="rc-status-badge"
+    :class="{[props.status]: true}"
+  >
+    <slot name="default" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rc-status-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1px 7px;
+
+    border: 1px solid transparent;
+    border-radius: 30px;
+
+    font-family: Lato;
+    font-size: 12px;
+    line-height: 19px;
+
+    &.info {
+        background-color: var(--rc-info-secondary);
+        border-color: var(--rc-info-secondary);
+        color: var(--rc-info);
+    }
+
+    &.success {
+        background-color: var(--rc-success-secondary);
+        border-color: var(--rc-success-secondary);
+        color: var(--rc-success);
+    }
+
+    &.warning {
+        background-color: var(--rc-warning);
+        border-color: var(--rc-warning);
+        color: var(--rc-warning-secondary);
+    }
+
+    &.error {
+        background-color: var(--rc-error);
+        border-color: var(--rc-error);
+        color: var(--rc-error-secondary);
+    }
+
+    &.unknown {
+        background-color: var(--rc-unknown);
+        border-color: var(--rc-unknown);
+        color: var(--rc-unknown-secondary);
+    }
+
+    &.none {
+        border-color: var(--rc-none);
+        color: var(--rc-none-secondary);
+    }
+}
+</style>

package/rancher-components/Pill/RcStatusBadge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RcStatusBadge.vue';
+export type { Status } from '@components/Pill/types';

package/rancher-components/Pill/RcStatusBadge/types.ts

@@ -0,0 +1,5 @@
+import { Status } from '@components/Pill/types';
+
+export interface RcStatusBadgeProps {
+  status: Status;
+}

package/rancher-components/Pill/RcStatusIndicator/RcStatusIndicator.test.ts

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import RcStatusIndicator, { Shape } from './index';
+import { Status } from '@components/Pill/types';
+
+describe('component: RcStatusIndicator', () => {
+  const shapes: Shape[] = ['disc', 'horizontal-bar', 'vertical-bar'];
+  const statuses: Status[] = ['info', 'success', 'warning', 'error', 'unknown', 'none'];
+
+  const combinations: {shape: Shape, status: Status}[] = [];
+
+  shapes.forEach((shape) => {
+    statuses.forEach((status) => {
+      combinations.push({
+        shape,
+        status
+      });
+    });
+  });
+
+  it.each(combinations)('should apply correct classes for shape "$shape" and status "$status"', ({ shape, status }) => {
+    const wrapper = mount(RcStatusIndicator, {
+      props: {
+        shape,
+        status,
+      }
+    });
+
+    const shapeEl = wrapper.find('.shape');
+
+    expect(shapeEl.classes()).toContain(shape);
+    expect(shapeEl.classes()).toContain(status);
+  });
+});

package/rancher-components/Pill/RcStatusIndicator/RcStatusIndicator.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { RcStatusIndicatorProps } from '@components/Pill/RcStatusIndicator/types';
+
+const props = defineProps<RcStatusIndicatorProps>();
+</script>
+
+<template>
+  <div class="rc-status-indicator">
+    <div
+      class="shape"
+      :class="{[props.shape]: true, [props.status]: true}"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rc-status-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 21px;
+
+    .shape {
+        display: inline-block;
+        border: 1px solid transparent;
+
+        &.disc {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+        }
+
+        &.horizontal-bar {
+            width: 16px;
+            height: 4px;
+            border-radius: 2px;
+        }
+
+        &.vertical-bar {
+            width: 4px;
+            height: 16px;
+            border-radius: 2px;
+        }
+
+        &.info {
+            background-color: var(--rc-info);
+            border-color: var(--rc-info);
+        }
+
+        &.success {
+            background-color: var(--rc-success);
+            border-color: var(--rc-success);
+        }
+
+        &.warning {
+            background-color: var(--rc-warning);
+            border-color: var(--rc-warning);
+        }
+
+        &.error {
+            background-color: var(--rc-error);
+            border-color: var(--rc-error);
+        }
+
+        &.unknown {
+            background-color: var(--rc-unknown);
+            border-color: var(--rc-unknown);
+        }
+
+        &.none {
+            border-color: var(--rc-none);
+        }
+    }
+}
+</style>

package/rancher-components/Pill/RcStatusIndicator/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RcStatusIndicator.vue';
+export type { Shape } from './types';

package/rancher-components/Pill/RcStatusIndicator/types.ts

@@ -0,0 +1,7 @@
+import { Status } from '@components/Pill/types';
+export type Shape = 'disc' | 'horizontal-bar' | 'vertical-bar';
+
+export interface RcStatusIndicatorProps {
+  shape: Shape;
+  status: Status;
+}

package/rancher-components/Pill/types.ts

@@ -0,0 +1,2 @@
+export type Shape = 'disc' | 'horizontal-bar' | 'vertical-bar';
+export type Status = 'info' | 'success' | 'warning' | 'error' | 'unknown' | 'none';

package/rancher-components/RcButton/RcButton.vue

@@ -7,7 +7,7 @@
  *
  * <rc-button primary @click="doAction">Perform an Action</rc-button>
  */
-import { computed, ref, defineExpose } from 'vue';
+import { computed, ref } from 'vue';
 import { ButtonRoleProps, ButtonSizeProps } from './types';
 
 const buttonRoles: { role: keyof ButtonRoleProps, className: string }[] = [

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

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import { RcDropdown } from '@components/RcDropdown';
+
+const vDropdownMock = defineComponent({
+  template: `
+    <div class="popper">
+      <slot name="popper" />
+    </div>
+  `,
+});
+
+describe('component: RcDropdown.vue', () => {
+  it('should not change the height if the dropdown fits within the screen', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 800 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    200,
+        bottom: 600,
+        height: 400,
+      }),
+      writable: true,
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('');
+  });
+
+  it('should apply correct height if dropdown exceeds the top edge', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 800 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    2, // Exceeds (top - padding)
+        bottom: 300,
+        height: 298,
+      }),
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('268px');
+  });
+
+  it('should apply correct height if dropdown exceeds the bottom edge', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 925 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    200,
+        bottom: 920, // Exceeds (bottom + padding)
+        height: 720,
+      }),
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('693px');
+  });
+
+  it('should apply correct height if dropdown exceeds both top and bottom edges', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 400 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    -800, // Exceeds top
+        bottom: 800, // Exceeds bottom
+        height: 1600,
+      }),
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('368px');
+  });
+});

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -47,6 +47,7 @@ const {
   provideDropdownContext,
   registerDropdownCollection,
   handleKeydown,
+  setDropdownDimensions
 } = useDropdownContext(emit);
 
 provideDropdownContext();
@@ -57,6 +58,7 @@ const dropdownTarget = ref(null);
 useClickOutside(dropdownTarget, () => showMenu(false));
 
 const applyShow = () => {
+  setDropdownDimensions(dropdownTarget.value);
   registerDropdownCollection(dropdownTarget.value);
   setFocus('down');
 };
@@ -129,6 +131,9 @@ const applyShow = () => {
   }
 
   .dropdownTarget {
+    overflow: auto;
+    padding: 3px 0; // Need padding at top and bottom in order to show the focus border for the notification
+
     &:focus-visible, &:focus {
       outline: none;
     }

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -7,7 +7,12 @@ import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
 const props = defineProps({ disabled: Boolean });
 const emits = defineEmits(['click']);
 
-const { handleKeydown, close, handleActivate } = useDropdownItem();
+const {
+  handleKeydown,
+  close,
+  handleActivate,
+  scrollIntoView,
+} = useDropdownItem();
 
 const handleClick = (e: MouseEvent) => {
   if (props.disabled) {
@@ -31,6 +36,7 @@ const handleClick = (e: MouseEvent) => {
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
     @keydown.up.down.prevent.stop="handleKeydown"
+    @focusin="scrollIntoView"
   >
     <slot name="before">
       <!--Empty slot content-->

package/rancher-components/RcDropdown/RcDropdownItemCheckbox.vue

@@ -8,7 +8,7 @@ import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
 const props = defineProps({ modelValue: Boolean, disabled: Boolean });
 const emits = defineEmits(['click']);
 
-const { handleKeydown, handleActivate } = useDropdownItem();
+const { handleKeydown, handleActivate, scrollIntoView } = useDropdownItem();
 
 const handleClick = () => {
   if (props.disabled) {
@@ -30,6 +30,7 @@ const handleClick = () => {
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
     @keydown.up.down.prevent.stop="handleKeydown"
+    @focusin="scrollIntoView"
   >
     <rc-checkbox :value="modelValue">
       <template #label>

package/rancher-components/RcDropdown/RcDropdownItemSelect.vue

@@ -25,7 +25,7 @@ defineProps({
 });
 const emits = defineEmits(['click', 'select']);
 
-const { handleKeydown, handleActivate } = useDropdownItem();
+const { handleKeydown, handleActivate, scrollIntoView } = useDropdownItem();
 
 const dropdownMenuItem = ref<HTMLDivElement | null>(null);
 const menuItemSelect = ref<LabeledSelectComponent | null>(null);
@@ -50,6 +50,7 @@ const focusMenuItem = () => {
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
     @keydown.up.down.prevent.stop="handleKeydown"
+    @focusin="scrollIntoView"
   >
     <LabeledSelect
       ref="menuItemSelect"

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

@@ -57,7 +57,36 @@ export const useDropdownItem = () => {
     }
   };
 
+  /**
+   * 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
+    handleKeydown,
+    close,
+    handleActivate,
+    scrollIntoView,
   };
 };

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

@@ -186,4 +186,24 @@ describe('rcItemCard', () => {
 
     expect(icon.attributes('style')).toContain('color: red');
   });
+
+  it('emits custom action events correctly', async() => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        actions: [
+          { action: 'myActionA', label: 'Edit' },
+          { action: 'myActionB', label: 'Delete' }
+        ]
+      }
+    });
+
+    const listeners = wrapper.vm.$.setupState.actionListeners;
+
+    listeners.myActionA('payload-1');
+    listeners.myActionB('payload-2');
+
+    expect(wrapper.emitted('myActionA')?.[0]).toStrictEqual(['payload-1']);
+    expect(wrapper.emitted('myActionB')?.[0]).toStrictEqual(['payload-2']);
+  });
 });

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -5,6 +5,7 @@ import { useI18n } from '@shell/composables/useI18n';
 import LazyImage from '@shell/components/LazyImage.vue';
 import { DropdownOption } from '@components/RcDropdown/types';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import RcItemCardAction from './RcItemCardAction';
 
 const store = useStore();
 const { t } = useI18n(store);
@@ -79,7 +80,23 @@ interface RcItemCardProps {
   /** Optional image to show in card (position depends on variant). A slot is available for it too #item-card-image */
   image?: Image;
 
-  /** Optional actions that will be displayed inside an action-menu */
+  /** Optional actions that will be displayed inside an action-menu
+   *
+   * Each action should include an `action` name, which is emitted as a custom event when selected.
+   * To respond to the event, you must also register a matching event listener using the `@` syntax.
+   *
+   * Example:
+   * <rc-item-card
+   *   :actions="[
+   *     {
+   *       action: 'focusSearch',
+   *       label: t('catalog.charts.search'),
+   *       enabled: true
+   *     }
+   *   ]"
+   *   @focusSearch="focusSearch"
+   * />
+   */
   actions?: DropdownOption[];
 
   /** Text content inside the card body. A slot is available for it too #item-card-content */
@@ -98,9 +115,25 @@ interface RcItemCardProps {
 const props = defineProps<RcItemCardProps>();
 
 /**
- * Emits 'card-click' when card is clicked or activated via keyboard.
+ * Emits:
+ * - 'card-click' when card is clicked or activated via keyboard.
+ * - custom events defined in the `actions` prop, but only if the corresponding event listener is explicitly declared on the component.
  */
-const emit = defineEmits<{( e: 'card-click', value: ItemValue): void; }>();
+const emit = defineEmits<{(e: 'card-click', value: ItemValue): void; (e: string, payload: unknown): void;}>();
+
+const actionListeners = computed(() => {
+  if (!props.actions) return {};
+
+  const listeners: Record<string, (payload: unknown) => void> = {};
+
+  for (const a of props.actions) {
+    if (a.action) {
+      listeners[a.action] = (payload: unknown) => emit(a.action, payload);
+    }
+  }
+
+  return listeners;
+});
 
 /**
  * Handles the card click while avoiding nested interactive elements
@@ -245,12 +278,13 @@ const cardMeta = computed(() => ({
               </div>
             </template>
             <template v-else-if="actions">
-              <div class="item-card-header-action-menu">
+              <rc-item-card-action class="item-card-header-action-menu">
                 <ActionMenu
                   data-testid="item-card-header-action-menu"
                   :custom-actions="actions"
+                  v-on="actionListeners"
                 />
-              </div>
+              </rc-item-card-action>
             </template>
           </div>
         </div>
@@ -370,7 +404,7 @@ $image-medium-box-width: 48px;
     }
 
     &-action-menu {
-      margin-left: 12px;
+      margin-left: 8px;
     }
   }
 

package/store/__tests__/catalog.test.ts

@@ -1,5 +1,7 @@
 import { CATALOG } from '@shell/config/types';
-import { state, getters, actions, mutations } from '../catalog';
+import {
+  state, getters, actions, mutations, filterAndArrangeCharts
+} from '../catalog';
 import { createStore } from 'vuex';
 
 const clusterRepo = { _key: 'testClusterRepo' };
@@ -204,4 +206,94 @@ describe('catalog', () => {
       expect(store.state[catalogStoreName].versionInfos).toStrictEqual({ });
     });
   });
+
+  describe('filterAndArrangeCharts', () => {
+    const mockCharts = [
+      {
+        chartName:        'chart-a',
+        chartNameDisplay: 'Chart Alpha',
+        chartDescription: 'Description for Alpha',
+        keywords:         ['keyword1', 'keyword2'],
+        versions:         [{ annotations: {}, version: '1.0.0' }],
+        deprecated:       false,
+        hidden:           false,
+        repoKey:          'repo1',
+        chartType:        'app',
+        categories:       [],
+        tags:             [],
+      },
+      {
+        chartName:        'chart-b',
+        chartNameDisplay: 'Chart Beta',
+        chartDescription: 'Description for Beta',
+        keywords:         ['keyword2', 'keyword3'],
+        versions:         [{ annotations: {}, version: '1.0.0' }],
+        deprecated:       false,
+        hidden:           false,
+        repoKey:          'repo1',
+        chartType:        'app',
+        categories:       [],
+        tags:             [],
+      },
+      {
+        chartName:        'chart-c',
+        chartNameDisplay: 'Chart Gamma',
+        chartDescription: 'Description for Gamma',
+        keywords:         ['keyword3', 'keyword4'],
+        versions:         [{ annotations: {}, version: '1.0.0' }],
+        deprecated:       false,
+        hidden:           false,
+        repoKey:          'repo1',
+        chartType:        'app',
+        categories:       [],
+        tags:             [],
+      },
+    ];
+
+    it('should return all charts when no search query is provided', () => {
+      const result = filterAndArrangeCharts(mockCharts, {});
+
+      expect(result).toHaveLength(mockCharts.length);
+    });
+
+    it('should filter charts by name', () => {
+      const result = filterAndArrangeCharts(mockCharts, { searchQuery: 'Chart Alpha' });
+
+      expect(result).toHaveLength(1);
+      expect(result[0].chartNameDisplay).toBe('Chart Alpha');
+    });
+
+    it('should filter charts by description', () => {
+      const result = filterAndArrangeCharts(mockCharts, { searchQuery: 'Description for Beta' });
+
+      expect(result).toHaveLength(1);
+      expect(result[0].chartNameDisplay).toBe('Chart Beta');
+    });
+
+    it('should filter charts by keyword', () => {
+      const result = filterAndArrangeCharts(mockCharts, { searchQuery: 'keyword1' });
+
+      expect(result).toHaveLength(1);
+      expect(result[0].chartNameDisplay).toBe('Chart Alpha');
+    });
+
+    it('should handle multiple search tokens', () => {
+      const result = filterAndArrangeCharts(mockCharts, { searchQuery: 'Chart, keyword2' });
+
+      expect(result).toHaveLength(2);
+    });
+
+    it('should be case-insensitive', () => {
+      const result = filterAndArrangeCharts(mockCharts, { searchQuery: 'chart alpha' });
+
+      expect(result).toHaveLength(1);
+      expect(result[0].chartNameDisplay).toBe('Chart Alpha');
+    });
+
+    it('should return an empty array if no charts match', () => {
+      const result = filterAndArrangeCharts(mockCharts, { searchQuery: 'nonexistent' });
+
+      expect(result).toHaveLength(0);
+    });
+  });
 });