@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.4

package/rancher-components/RcButton/RcButton.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * A button element used for performing actions, such as submitting forms or
+ * opening dialogs.
+ *
+ * Example:
+ *
+ * <rc-button primary @click="doAction">Perform an Action</rc-button>
+ */
+import { computed, ref, defineExpose } from 'vue';
+import { ButtonRoleProps, ButtonSizeProps } from './types';
+
+const buttonRoles: { role: keyof ButtonRoleProps, className: string }[] = [
+  { role: 'primary', className: 'role-primary' },
+  { role: 'secondary', className: 'role-secondary' },
+  { role: 'tertiary', className: 'role-tertiary' },
+  { role: 'link', className: 'role-link' },
+  { role: 'ghost', className: 'role-ghost' },
+];
+
+const buttonSizes: { size: keyof ButtonSizeProps, className: string }[] = [
+  { size: 'small', className: 'btn-sm' },
+];
+
+const props = defineProps<ButtonRoleProps & ButtonSizeProps>();
+
+const buttonClass = computed(() => {
+  const activeRole = buttonRoles.find(({ role }) => props[role]);
+  const isButtonSmall = buttonSizes.some(({ size }) => props[size]);
+
+  return {
+    btn: true,
+
+    [activeRole?.className || 'role-primary']: true,
+
+    'btn-sm': isButtonSmall,
+  };
+});
+
+const RcFocusTarget = ref<HTMLElement | null>(null);
+
+const focus = () => {
+  RcFocusTarget?.value?.focus();
+};
+
+defineExpose({ focus });
+</script>
+
+<template>
+  <button
+    ref="RcFocusTarget"
+    role="button"
+    :class="{ ...buttonClass, ...($attrs.class || { }) }"
+  >
+    <slot name="before">
+      <!-- Empty Content -->
+    </slot>
+    <slot>
+      <!-- Empty Content -->
+    </slot>
+    <slot name="after">
+      <!-- Empty Content -->
+    </slot>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.role-link {
+   &:focus, &.focused {
+    outline: var(--outline-width) solid var(--border);
+    box-shadow: 0 0 0 var(--outline-width) var(--outline);
+   }
+}
+
+button {
+  &.role-ghost {
+    padding: 0;
+    background-color: transparent;
+
+    &:focus, &.focused {
+      outline: 2px solid var(--primary-keyboard-focus);
+      outline-offset: 0;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--primary-keyboard-focus);
+      outline-offset: 0;
+    }
+  }
+}</style>

package/rancher-components/RcButton/index.ts

@@ -0,0 +1,2 @@
+export { default as RcButton } from './RcButton.vue';
+export type { RcButtonType } from './types';

package/rancher-components/RcButton/types.ts

@@ -0,0 +1,17 @@
+// TODO: 13211 Investigate why `InstanceType<typeof RcButton>` fails prod builds
+// export type RcButtonType = InstanceType<typeof RcButton>
+export type RcButtonType = {
+  focus: () => void;
+}
+
+export type ButtonRoleProps = {
+  primary?: boolean;
+  secondary?: boolean;
+  tertiary?: boolean;
+  link?: boolean;
+  ghost?: boolean;
+}
+
+export type ButtonSizeProps = {
+  small?: boolean;
+}

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+/**
+ * Offers a list of choices to the user, such as a set of actions or functions.
+ * Opened by activating RcDropdownTrigger.
+ *
+ * Example:
+ *
+ *  <rc-dropdown :aria-label="t('nav.actionMenu.label')">
+ *    <rc-dropdown-trigger tertiary>
+ *      <i class="icon icon-actions" />
+ *    </rc-dropdown-trigger>
+ *    <template #dropdownCollection>
+ *      <rc-dropdown-item @click="performAction()">
+ *        Action 1
+ *      </rc-dropdown-item>
+ *      <rc-dropdown-separator />
+ *      <rc-dropdown-item @click="performAction()">
+ *        Action 2
+ *      </rc-dropdown-item>
+ *    </template>
+ *  </rc-dropdown>
+ */
+import { useTemplateRef } from 'vue';
+import { useClickOutside } from '@shell/composables/useClickOutside';
+import { useDropdownContext } from '@components/RcDropdown/useDropdownContext';
+
+defineProps<{
+  ariaLabel?: string
+}>();
+
+const {
+  isMenuOpen,
+  showMenu,
+  returnFocus,
+  setFocus,
+  provideDropdownContext,
+  registerDropdownCollection,
+  handleKeydown,
+} = useDropdownContext();
+
+provideDropdownContext();
+
+const popperContainer = useTemplateRef<HTMLElement>('popperContainer');
+const dropdownTarget = useTemplateRef<HTMLElement>('dropdownTarget');
+
+useClickOutside(dropdownTarget, () => showMenu(false));
+
+const applyShow = () => {
+  registerDropdownCollection(dropdownTarget.value);
+  setFocus();
+};
+
+</script>
+
+<template>
+  <v-dropdown
+    no-auto-focus
+    :triggers="[]"
+    :shown="isMenuOpen"
+    :auto-hide="false"
+    :container="popperContainer"
+    :placement="'bottom-end'"
+    @apply-show="applyShow"
+  >
+    <slot name="default">
+      <!--Empty slot content Trigger-->
+    </slot>
+
+    <template #popper>
+      <div
+        ref="dropdownTarget"
+        class="dropdownTarget"
+        tabindex="-1"
+        role="menu"
+        aria-orientation="vertical"
+        dropdown-menu-collection
+        :aria-label="ariaLabel || 'Dropdown Menu'"
+        @keydown="handleKeydown"
+        @keydown.down="setFocus()"
+      >
+        <slot name="dropdownCollection">
+          <!--Empty slot content-->
+        </slot>
+      </div>
+    </template>
+  </v-dropdown>
+  <div
+    ref="popperContainer"
+    class="popperContainer"
+    @keydown.tab="showMenu(false)"
+    @keydown.escape="returnFocus"
+  >
+    <!--Empty container for mounting popper content-->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .popperContainer {
+    display: contents;
+    &:deep(.v-popper__popper) {
+
+      .v-popper__wrapper {
+        box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
+        border-radius: var(--border-radius-lg);
+
+        .v-popper__arrow-container {
+          display: none;
+        }
+
+        .v-popper__inner {
+          padding: 10px 0 10px 0;
+        }
+      }
+    }
+  }
+
+  .dropdownTarget {
+    &:focus-visible, &:focus {
+      outline: none;
+    }
+  }
+</style>

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
+import { inject } from 'vue';
+import { DropdownContext, defaultContext } from './types';
+
+const props = defineProps({ disabled: Boolean });
+const emits = defineEmits(['click']);
+
+const { close, dropdownItems } = 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;
+};
+
+const handleClick = () => {
+  if (props.disabled) {
+    return;
+  }
+
+  emits('click');
+  close();
+};
+
+/**
+ * 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();
+  }
+};
+
+/**
+ * Handles keydown events to focus the dropdown item.
+ * @param e - The Mouse event.
+ */
+const handleMouseEnter = (e: MouseEvent) => {
+  if (e?.target instanceof HTMLElement) {
+    e?.target?.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.stop="handleKeydown"
+    @mouseenter="handleMouseEnter"
+  >
+    <slot name="default">
+      <!--Empty slot content-->
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  [dropdown-menu-item] {
+    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/RcDropdownSeparator.vue

@@ -0,0 +1,6 @@
+<template>
+  <hr
+    role="separator"
+    aria-orientation="horizontal"
+  >
+</template>

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/**
+ * A button that opens a menu. Used in conjunction with `RcDropdown.vue`.
+ */
+import { inject, onMounted, useTemplateRef } from 'vue';
+import { RcButton, RcButtonType } from '@components/RcButton';
+import { DropdownContext, defaultContext } from './types';
+
+const {
+  showMenu,
+  registerTrigger,
+  isMenuOpen,
+  handleKeydown,
+} = inject<DropdownContext>('dropdownContext') || defaultContext;
+
+const dropdownTrigger = useTemplateRef<RcButtonType>('dropdownTrigger');
+
+onMounted(() => {
+  registerTrigger(dropdownTrigger.value);
+});
+
+const focus = () => {
+  dropdownTrigger?.value?.focus();
+};
+
+defineExpose({ focus });
+</script>
+
+<template>
+  <RcButton
+    ref="dropdownTrigger"
+    role="button"
+    aria-haspopup="menu"
+    :aria-expanded="isMenuOpen"
+    @keydown.enter.space="handleKeydown"
+    @click="showMenu(true)"
+  >
+    <slot name="default">
+      <!--Empty slot content-->
+    </slot>
+  </RcButton>
+</template>

package/rancher-components/RcDropdown/index.ts

@@ -0,0 +1,4 @@
+export { default as RcDropdown } from './RcDropdown.vue';
+export { default as RcDropdownItem } from './RcDropdownItem.vue';
+export { default as RcDropdownSeparator } from './RcDropdownSeparator.vue';
+export { default as RcDropdownTrigger } from './RcDropdownTrigger.vue';

package/rancher-components/RcDropdown/types.ts

@@ -0,0 +1,22 @@
+import { Ref, ref } from 'vue';
+import type { RcButtonType } from '@components/RcButton';
+
+export type DropdownContext = {
+  handleKeydown: () => void;
+  showMenu: (show: boolean) => void;
+  registerTrigger: (triggerRef: RcButtonType | null) => void;
+  dropdownItems: Ref<Element[]>;
+  focusFirstElement: () => void;
+  isMenuOpen: Ref<boolean>;
+  close: () => void;
+}
+
+export const defaultContext: DropdownContext = {
+  handleKeydown:     () => null,
+  showMenu:          (_show: boolean | null) => null,
+  registerTrigger:   (_triggerRef: RcButtonType | null) => null,
+  dropdownItems:     ref([]),
+  focusFirstElement: () => null,
+  isMenuOpen:        ref(false),
+  close:             () => null,
+};

package/rancher-components/RcDropdown/useDropdownCollection.ts

@@ -0,0 +1,46 @@
+import { ref } from 'vue';
+
+/**
+ * Manages a collection of dropdown items. Includes methods for registering
+ * dropdown items and providing the collection to descendant components.
+ *
+ * @returns Dropdown collection methods and state.
+ */
+export const useDropdownCollection = () => {
+  const dropdownItems = ref<Element[]>([]);
+  const dropdownContainer = ref<HTMLElement | null>(null);
+  const firstDropdownItem = ref<HTMLElement | null>(null);
+
+  /**
+   * Registers the dropdown container and initializes dropdown items.
+   * @param target - The dropdown container element.
+   */
+  const registerDropdownCollection = (target: HTMLElement | null) => {
+    dropdownContainer.value = target;
+    if (dropdownContainer.value?.firstElementChild instanceof HTMLElement) {
+      registerDropdownItems();
+      if (dropdownItems.value[0] instanceof HTMLElement) {
+        firstDropdownItem.value = dropdownItems.value[0];
+      }
+    }
+  };
+
+  /**
+   * Registers dropdown items by querying the dropdown container for elements.
+   */
+  const registerDropdownItems = () => {
+    dropdownItems.value = [];
+    const dropdownNodeList = dropdownContainer.value?.querySelectorAll('[dropdown-menu-item]');
+
+    dropdownNodeList?.forEach((element) => {
+      dropdownItems.value.push(element);
+    });
+  };
+
+  return {
+    dropdownItems,
+    firstDropdownItem,
+    dropdownContainer,
+    registerDropdownCollection,
+  };
+};

package/rancher-components/RcDropdown/useDropdownContext.ts

@@ -0,0 +1,110 @@
+import { ref, provide, nextTick } from 'vue';
+import { useDropdownCollection } from './useDropdownCollection';
+import { RcButtonType } from '@components/RcButton';
+
+/**
+ * Composable that provides the context for a dropdown menu. Includes methods
+ * and state for managing the dropdown's visibility, focus, and keyboard
+ * interactions.
+ *
+ * @param firstDropdownItem - First item in the dropdown menu.
+ * @returns Dropdown context methods and state. Used for programmatic
+ * interactions and setting focus.
+ */
+export const useDropdownContext = () => {
+  const {
+    dropdownItems,
+    firstDropdownItem,
+    dropdownContainer,
+    registerDropdownCollection,
+  } = useDropdownCollection();
+
+  const isMenuOpen = ref(false);
+
+  /**
+   * Controls the visibility of the dropdown menu.
+   * @param show - Whether to show or hide the dropdown menu.
+   */
+  const showMenu = (show: boolean) => {
+    if (!show) {
+      didKeydown.value = false;
+    }
+    isMenuOpen.value = show;
+  };
+
+  /**
+  * A ref for the dropdown trigger element. Used for programmatic
+  * interactions and setting focus.
+  */
+  const dropdownTrigger = ref<RcButtonType | null>(null);
+
+  /**
+   * Registers the dropdown trigger element.
+   * @param triggerRef - The dropdown trigger element.
+   */
+  const registerTrigger = (triggerRef: RcButtonType) => {
+    dropdownTrigger.value = triggerRef;
+  };
+
+  /**
+   * Returns focus to the dropdown trigger and closes the menu.
+   */
+  const returnFocus = () => {
+    showMenu(false);
+    dropdownTrigger?.value?.focus();
+  };
+
+  /**
+     * Tracks if a keydown event has occurred. Important for distinguishing keyboard
+     * events from mouse events.
+     */
+  const didKeydown = ref(false);
+
+  const handleKeydown = () => {
+    didKeydown.value = true;
+  };
+
+  /**
+   * Sets focus to the first dropdown item if a keydown event has occurred.
+   */
+  const setFocus = () => {
+    nextTick(() => {
+      if (!didKeydown.value) {
+        dropdownContainer.value?.focus();
+
+        return;
+      }
+
+      firstDropdownItem.value?.focus();
+      didKeydown.value = false;
+    });
+  };
+
+  /**
+  * Provides Dropdown Context data and methods to descendants of RcDropdown.
+  * Accessed in descendents with the `inject()` function.
+  */
+  const provideDropdownContext = () => {
+    provide('dropdownContext', {
+      showMenu,
+      registerTrigger,
+      isMenuOpen,
+      dropdownItems,
+      close:             () => returnFocus(),
+      focusFirstElement: () => {
+        setFocus();
+      },
+      handleKeydown,
+    });
+  };
+
+  return {
+    isMenuOpen,
+    showMenu,
+    returnFocus,
+    setFocus,
+    provideDropdownContext,
+    registerDropdownCollection,
+    handleKeydown,
+  };
+};

package/scripts/test-plugins-build.sh

@@ -141,6 +141,8 @@ if [ "${SKIP_STANDALONE}" == "false" ]; then
   pushd test-app > /dev/null
 
   yarn install
+  # this is the "same" as doing a yarn dev (in a build sense)
+  # it's to make sure the dev environment is running properly
   FORCE_COLOR=true yarn build | cat
 
   # Add test list component to the test package

package/scripts/typegen.sh

@@ -21,10 +21,12 @@ ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/query-params.js --declarat
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/table-headers.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/types.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/labels-annotations.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/version.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
 
 # # store
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/features.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/prefs.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/plugins.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
 
 # # plugins
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/normalize.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null

package/store/catalog.js

@@ -57,7 +57,7 @@ export const getters = {
     const clustered = state.clusterRepos || [];
     const namespaced = state.namespacedRepos || [];
 
-    return [...clustered, ...namespaced];
+    return [...clustered, ...namespaced].filter((r) => r.spec?.enabled !== false);
   },
 
   // Raw charts

package/tsconfig.json

@@ -29,7 +29,8 @@
     "./**/*.ts",
     "./**/*.d.ts",
     "./**/*.tsx",
-    "./**/*.vue"
+    "./**/*.vue",
+    "../pkg/rancher-components/src/**/*"
   ],
   "exclude": [
     "node_modules",

package/types/components/paginatedResourceTable.ts

@@ -0,0 +1,25 @@
+import { StorePaginationResult } from '@shell/types/store/pagination.types';
+
+/**
+ * see {@link PagTableFetchSecondaryResources}
+ */
+export type PagTableFetchSecondaryResourcesOpts = { canPaginate: boolean }
+/**
+ * see {@link PagTableFetchSecondaryResources}
+ */
+export type PagTableFetchSecondaryResourcesReturns = Promise<any>
+/**
+ * Function to fetch resources that are required to supplement information needed by rows in a PaginatedResourceTable
+ *
+ * Used in scenarios where ALL resources are expected
+ */
+export type PagTableFetchSecondaryResources = (opts: PagTableFetchSecondaryResourcesOpts) => PagTableFetchSecondaryResourcesReturns
+
+/**
+ * see {@link PagTableFetchPageSecondaryResources}
+ */
+export type PagTableFetchPageSecondaryResourcesOpts = { canPaginate: boolean, force: boolean, page: any[], pagResult: StorePaginationResult }
+/**
+ * Function to fetch resources that are required to supplement information needed by a single page in a PaginatedResourceTable
+ */
+export type PagTableFetchPageSecondaryResources = (opts: PagTableFetchPageSecondaryResourcesOpts) => Promise<any>