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

package/plugins/steve/steve-pagination-utils.ts

@@ -157,6 +157,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: '_type' },
       { field: 'reason' },
       { field: 'involvedObject.kind' },
+      // { field: 'involvedObject.uid' }, // Pending API Support - https://github.com/rancher/rancher/issues/48603
       { field: 'message' },
     ],
     [CATALOG.CLUSTER_REPO]: [
@@ -431,7 +432,8 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               // Check if the API supports filtering by this field
               this.validateField(validateFields, schema, field.field);
 
-              const exactPartial = field.exact ? `'${ field.value }'` : field.value;
+              const value = encodeURIComponent(field.value);
+              const exactPartial = field.exact ? `'${ value }'` : value;
 
               return `${ this.convertArrayPath(field.field) }${ field.equals ? '=' : '!=' }${ exactPartial }`;
             }

package/rancher-components/Accordion/Accordion.vue

@@ -47,12 +47,12 @@ export default defineComponent({
         data-testid="accordion-chevron"
       />
       <slot name="header">
-        <h4
+        <h2
           data-testid="accordion-title-slot-content"
           class="mb-0"
         >
           {{ titleKey ? t(titleKey) : title }}
-        </h4>
+        </h2>
       </slot>
     </div>
     <div
@@ -70,7 +70,7 @@ export default defineComponent({
   border: 1px solid var(--border)
 }
 .accordion-header {
-  padding: 5px;
+  padding: 16px 16px 16px 11px;
   display: flex;
   align-items: center;
   &>*{
@@ -81,6 +81,6 @@ export default defineComponent({
   }
 }
 .accordion-body {
-  padding: 10px;
+  padding: 0px 16px 16px;
 }
 </style>

package/rancher-components/BadgeState/BadgeState.vue

@@ -94,6 +94,13 @@ export default defineComponent({
       background: transparent;
       border-color: var(--success);
     }
+
+    // Added badge-disabled instead of bg-disabled since bg-disabled is used in other places with !important styling, an investigation is needed to make the naming consistent
+    &.badge-disabled {
+      color: var(--badge-state-disabled-text);
+      background-color: var( --badge-state-disabled-bg);
+      border: 1px solid var(--badge-state-disabled-border);
+    }
   }
 </style>
 <style lang="scss">

package/rancher-components/Card/Card.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
+import { createFocusTrap, FocusTrap } from 'focus-trap';
 
 export default defineComponent({
   name:  'Card',
@@ -50,12 +51,37 @@ export default defineComponent({
       type:    Boolean,
       default: false,
     },
-  }
+    triggerFocusTrap: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return { focusTrapInstance: {} as FocusTrap };
+  },
+  mounted() {
+    if (this.triggerFocusTrap) {
+      this.focusTrapInstance = createFocusTrap(this.$refs.cardContainer as HTMLElement, {
+        escapeDeactivates: true,
+        allowOutsideClick: true,
+      });
+
+      this.$nextTick(() => {
+        this.focusTrapInstance.activate();
+      });
+    }
+  },
+  beforeUnmount() {
+    if (this.focusTrapInstance && this.triggerFocusTrap) {
+      this.focusTrapInstance.deactivate();
+    }
+  },
 });
 </script>
 
 <template>
   <div
+    ref="cardContainer"
     class="card-container"
     :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -264,13 +264,15 @@ export default defineComponent({
           <template v-else-if="label">{{ label }}</template>
           <i
             v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
+            v-clean-tooltip="{content: t(tooltipKey), triggers: ['hover', 'touch', 'focus']}"
             class="checkbox-info icon icon-info icon-lg"
+            :tabindex="isDisabled ? -1 : 0"
           />
           <i
             v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
+            v-clean-tooltip="{content: tooltip, triggers: ['hover', 'touch', 'focus']}"
             class="checkbox-info icon icon-info icon-lg"
+            :tabindex="isDisabled ? -1 : 0"
           />
         </slot>
       </span>
@@ -329,6 +331,11 @@ $fontColor: var(--input-label);
   .checkbox-info {
     line-height: normal;
     margin-left: 2px;
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+    }
   }
 
  .checkbox-custom {

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -20,7 +20,7 @@ describe('component: LabeledInput', () => {
     expect(wrapper.emitted('update:value')![0][0]).toBe(value);
   });
 
-  it('using mode "multiline" should emit input value correctly', () => {
+  it('using type "multiline" should emit input value correctly', () => {
     const value = 'any-string';
     const delay = 1;
     const wrapper = mount(LabeledInput, {
@@ -37,4 +37,21 @@ describe('component: LabeledInput', () => {
     expect(wrapper.emitted('update:value')).toHaveLength(1);
     expect(wrapper.emitted('update:value')![0][0]).toBe(value);
   });
+
+  describe('using type "chron"', () => {
+    it.each([
+      ['0 * * * *', 'Every hour, every day'],
+      ['@daily', 'At 12:00 AM, every day'],
+      ['You must fail! Go!', '%generic.invalidCron%'],
+    ])('passing value %p should display hint %p', (value, hint) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { value, type: 'cron' },
+        mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
+      });
+
+      const subLabel = wrapper.find('[data-testid="sub-label"]');
+
+      expect(subLabel.text()).toBe(hint);
+    });
+  });
 });

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -179,14 +179,28 @@ export default defineComponent({
       if (this.type !== 'cron' || !this.value) {
         return;
       }
+
+      // TODO - #13202: This is required due use of 2 libraries and 3 different libraries through the code.
+      const predefined = [
+        '@yearly',
+        '@annually',
+        '@monthly',
+        '@weekly',
+        '@daily',
+        '@midnight',
+        '@hourly'
+      ];
+      const isPredefined = predefined.includes(this.value as string);
+
       // refer https://github.com/GuillaumeRochat/cron-validator#readme
-      if (!isValidCron(this.value as string, {
+      if (!isPredefined && !isValidCron(this.value as string, {
         alias:              true,
         allowBlankDay:      true,
         allowSevenAsSunday: true,
       })) {
         return this.t('generic.invalidCron');
       }
+
       try {
         const hint = cronstrue.toString(this.value as string || '', { verbose: true });
 
@@ -382,9 +396,12 @@ export default defineComponent({
     <div
       v-if="cronHint || subLabel"
       class="sub-label"
+      data-testid="sub-label"
     >
       <div
         v-if="cronHint"
+        role="alert"
+        :aria-label="cronHint"
       >
         {{ cronHint }}
       </div>

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
 
 type StateType = boolean | 'true' | 'false' | undefined;
 
@@ -33,6 +33,29 @@ export default defineComponent({
 
   emits: ['update:value'],
 
+  setup() {
+    const switchChrome = useTemplateRef<HTMLElement>('switchChrome');
+    const focus = () => {
+      switchChrome.value?.classList.add('focus');
+    };
+
+    const blur = () => {
+      switchChrome.value?.classList.remove('focus');
+    };
+
+    const switchInput = useTemplateRef<HTMLInputElement>('switchInput');
+
+    onMounted(() => {
+      switchInput.value?.addEventListener('focus', focus);
+      switchInput.value?.addEventListener('blur', blur);
+    });
+
+    onBeforeUnmount(() => {
+      switchInput.value?.removeEventListener('focus', focus);
+      switchInput.value?.removeEventListener('blur', blur);
+    });
+  },
+
   data() {
     return { state: false as StateType };
   },
@@ -64,11 +87,18 @@ export default defineComponent({
     >{{ offLabel }}</span>
     <label class="switch hand">
       <input
+        ref="switchInput"
         type="checkbox"
+        role="switch"
         :checked="state"
+        :aria-label="onLabel"
         @input="toggle(null)"
+        @keydown.enter="toggle(null)"
       >
-      <span class="slider round" />
+      <span
+        ref="switchChrome"
+        class="slider round"
+      />
     </label>
     <span
       class="label no-select hand"
@@ -118,6 +148,13 @@ $toggle-height: 16px;
   background-color: var(--checkbox-disabled-bg);
   -webkit-transition: .4s;
   transition: .4s;
+
+  &.focus {
+    @include focus-outline;
+    outline-offset: 2px;
+    -webkit-transition: 0s;
+    transition: 0s;
+  }
 }
 
 .slider:before {

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,111 @@
+<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,
+} = 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"
+        role="menu"
+        aria-orientation="vertical"
+        dropdown-menu-collection
+        :aria-label="ariaLabel || 'Dropdown Menu'"
+      >
+        <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;
+        }
+      }
+    }
+  }
+</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,43 @@
+<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,
+  focusFirstElement,
+  isMenuOpen,
+} = 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.down="focusFirstElement"
+    @keydown.escape="showMenu(false)"
+    @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';