@rancher/shell 3.0.4 → 3.0.5-rc.2

package/pages/home.vue

@@ -49,6 +49,21 @@ export default defineComponent({
   mixins: [PageHeaderActions],
 
   data() {
+    const options = this.$store.getters[`type-map/optionsFor`](CAPI.RANCHER_CLUSTER)?.custom || {};
+    const params = {
+      product:  MANAGER,
+      cluster:  BLANK_CLUSTER,
+      resource: CAPI.RANCHER_CLUSTER
+    };
+    const defaultCreateLocation = {
+      name: 'c-cluster-product-resource-create',
+      params,
+    };
+    const defaultImportLocation = {
+      ...defaultCreateLocation,
+      query: { [MODE]: _IMPORT }
+    };
+
     return {
       HIDE_HOME_PAGE_CARDS,
       fullVersion: getVersionInfo(this.$store).fullVersion,
@@ -87,24 +102,9 @@ export default defineComponent({
         },
       },
 
-      createLocation: {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  MANAGER,
-          cluster:  BLANK_CLUSTER,
-          resource: CAPI.RANCHER_CLUSTER
-        },
-      },
+      createLocation: options.createLocation ? options.createLocation(params) : defaultCreateLocation,
 
-      importLocation: {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  MANAGER,
-          cluster:  BLANK_CLUSTER,
-          resource: CAPI.RANCHER_CLUSTER
-        },
-        query: { [MODE]: _IMPORT }
-      },
+      importLocation: options.importLocation ? options.importLocation(params) : defaultImportLocation,
 
       headers: [
         STATE,
@@ -512,7 +512,7 @@ export default defineComponent({
       :show-child="false"
       :breadcrumb="false"
     >
-      {{ vendor }}
+      {{ `${vendor} - ${t('landing.homepage')}` }}
     </TabTitle>
     <BannerGraphic
       :small="true"
@@ -805,6 +805,12 @@ export default defineComponent({
     .cluster-name {
       display: flex;
       align-items: center;
+
+      // Ensure long cluster names truncate with ellipsis
+      > A {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     .cluster-description {

package/pages/prefs.vue

@@ -225,7 +225,7 @@ export default {
       v-if="!isSingleProduct"
       class="mt-10 mb-10"
     >
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.landing.label'" />
       <LandingPagePreference
         data-testid="prefs__landingPagePreference"
@@ -233,7 +233,7 @@ export default {
     </div>
     <!-- Display Settings -->
     <div class="mt-10 mb-10">
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.displaySettings.title'" />
       <p class="set-landing-leadin">
         {{ t('prefs.displaySettings.detail', {}, raw=true) }}
@@ -277,7 +277,7 @@ export default {
       v-if="!isSingleProduct"
       class="col adv-features mt-10 mb-10"
     >
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.confirmationSetting.title'" />
       <Checkbox
         v-model:value="scalingDownPrompt"
@@ -288,7 +288,7 @@ export default {
     </div>
     <!-- Advanced Features -->
     <div class="col adv-features mt-10 mb-10">
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.advFeatures.title'" />
       <Checkbox
         v-model:value="viewInApi"
@@ -325,13 +325,14 @@ export default {
         <Checkbox
           v-model:value="pluginDeveloper"
           :label="t('prefs.advFeatures.pluginDeveloper', {}, true)"
+          :tooltip="t('prefs.advFeatures.pluginDeveloperTooltip')"
           class="mt-20"
         />
       </template>
     </div>
     <!-- YAML editor key mapping -->
     <div class="col mt-10 mb-10">
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.keymap.label'" />
       <ButtonGroup
         v-model:value="keymap"
@@ -344,7 +345,7 @@ export default {
       v-if="!isSingleProduct"
       class="col mt-10 mb-40"
     >
-      <hr>
+      <hr role="none">
       <h4 v-t="'prefs.helm.label'" />
       <ButtonGroup
         v-model:value="showPreRelease"

package/pages/support/index.vue

@@ -118,7 +118,10 @@ export default {
 </script>
 <template>
   <div>
-    <BannerGraphic :title="t(title, {}, true)" />
+    <BannerGraphic
+      :title="t(title, {}, true)"
+      :alt="t('support.bannerImage')"
+    />
 
     <IndentedPanel>
       <div class="content mt-20">

package/plugins/internal-api/index.ts

@@ -0,0 +1,37 @@
+import { Store } from 'vuex';
+
+interface PluginContext {
+  store: Store<any>;
+  [key: string]: any;
+}
+
+export default function(context: PluginContext, inject: (key: string, value: any) => void) {
+  const { store } = context;
+
+  // Load all API modules
+  const apiContext = (require as any).context(
+    '@shell/plugins/internal-api', // the base directory
+    true, // whether to search subdirectories
+    /\.api\.ts$/ // only .api.ts files
+  );
+
+  apiContext.keys().forEach((relativePath: string) => {
+    const mod = apiContext(relativePath);
+    const ApiClass = mod.default;
+
+    if (typeof ApiClass === 'function') {
+      // Check for a static `apiName` property, or fallback to filename
+      let apiName: string = ApiClass.apiName();
+
+      if (!apiName) {
+        // fallback to filename (strip leading ‘./’ and extension)
+        apiName = `$${ relativePath.replace(/^\.\//, '').replace(/\.\w+$/, '') }`;
+      }
+
+      const instance = new ApiClass(store);
+
+      // The inject() method automatically adds the `$` prefix
+      inject(apiName, instance);
+    }
+  });
+}

package/plugins/internal-api/shared/base-api.ts

@@ -0,0 +1,13 @@
+export abstract class BaseApi {
+  // The Vuex store, available to all API classes
+  protected $store: any;
+
+  // Documented requirement: each API should define its static apiName.
+  static apiName(): string {
+    throw new Error('apiName() static method has not been implemented');
+  }
+
+  constructor(store: any) {
+    this.$store = store;
+  }
+}

package/plugins/internal-api/shell/shell.api.ts

@@ -0,0 +1,108 @@
+import { GrowlConfig } from '@shell/types/internal-api/shell/growl';
+import { ModalConfig } from '@shell/types/internal-api/shell/modal';
+import { SlideInConfig } from '@shell/types/internal-api/shell/slideIn';
+
+import { BaseApi } from '@shell/plugins/internal-api/shared/base-api';
+
+export default class ShellApi extends BaseApi {
+  static apiName() {
+    return 'shell';
+  }
+
+  /**
+   * Dispatches a growl notification.
+   *
+   * @param config - Configuration for the growl notification.
+   * - If `message` is a string, it is treated as the main content of the notification.
+   * - If `message` is a `DetailedMessage` object, `title` and `description` are extracted.
+   *
+   * Example:
+   * ```ts
+   * this.$shell.growl({ message: 'Operation successful!', type: 'success' });
+   * this.$shell.growl({ message: { title: 'Warning', description: 'Check your input.' }, type: 'warning' });
+   * ```
+   */
+  protected growl(config: GrowlConfig): void {
+    const { type = 'error', timeout = 5000 } = config;
+
+    let title = '';
+    let description = '';
+
+    if (typeof config.message === 'string') {
+      description = config.message;
+    } else {
+      title = config.message.title || '';
+      description = config.message.description;
+    }
+
+    this.$store.dispatch(
+      `growl/${ type }`,
+      {
+        title,
+        message: description,
+        timeout,
+      },
+      { root: true }
+    );
+  }
+
+  /**
+   * Opens a modal by committing to the Vuex store.
+   *
+   * This method updates the store's `modal` module to show a modal with the
+   * specified configuration. The modal is rendered using the `ModalManager` component,
+   * and its content is dynamically loaded based on the `component` field in the configuration.
+   *
+   * @param config A `ModalConfig` object defining the modal’s content and behavior.
+   *
+   * Example:
+   * ```ts
+   * this.$shell.modal({
+   *   component: MyCustomModal,
+   *   componentProps: { title: 'Hello Modal' },
+   *   resources: [someResource],
+   *   modalWidth: '800px',
+   *   closeOnClickOutside: false
+   * });
+   * ```
+   */
+  protected modal(config: ModalConfig): void {
+    this.$store.commit('modal/openModal', {
+      component:           config.component,
+      componentProps:      config.componentProps || {},
+      resources:           config.resources || [],
+      modalWidth:          config.modalWidth || '600px',
+      closeOnClickOutside: config.closeOnClickOutside ?? true,
+      // modalSticky:         config.modalSticky ?? false // Not implemented yet
+    });
+  }
+
+  /**
+   * Opens the slide-in panel with the specified component and props.
+   *
+   * This method commits the `open` mutation to the `slideInPanel` Vuex module,
+   * which sets the current component to be rendered and its associated props.
+   * The slide-in panel becomes visible after the mutation.
+   *
+   * @param config - The configuration object for the slide-in panel.
+   *
+   * Example Usage:
+   * ```ts
+   * import MyComponent from '@/components/MyComponent.vue';
+   *
+   * this.$shell.slideInPanel({
+   *   component: MyComponent,
+   *   componentProps: { foo: 'bar' }
+   * });
+   * ```
+   *
+   * @param config.component - A Vue component (imported SFC, functional component, etc.) to be rendered in the panel.
+   * @param config.componentProps - (Optional) Props to pass to the component. These should align with the component's defined props.
+   */
+  protected slideInPanel(config: SlideInConfig): void {
+    this.$store.commit('slideInPanel/open', {
+      component:      config.component,
+      componentProps: config.componentProps || {}
+    });
+  }
+}

package/plugins/steve/actions.js

@@ -196,18 +196,10 @@ export default {
     }
   },
 
-  promptMove({ commit, state }, resources) {
-    commit('action-menu/togglePromptMove', resources, { root: true });
-  },
-
   promptRestore({ commit, state }, resources ) {
     commit('action-menu/togglePromptRestore', resources, { root: true });
   },
 
-  assignTo({ commit, state }, resources = []) {
-    commit('action-menu/toggleAssignTo', resources, { root: true });
-  },
-
   async resourceAction({ getters, dispatch }, {
     resource, actionName, body, opt,
   }) {
@@ -234,10 +226,6 @@ export default {
     }
   },
 
-  promptUpdate({ commit, state }, resources = []) {
-    commit('action-menu/togglePromptUpdate', resources, { root: true });
-  },
-
   async collectionAction({ getters, dispatch }, {
     type, actionName, body, opt
   }) {

package/public/index.html

@@ -16,6 +16,7 @@
         </div>
     </div>
     <div id="modals"><!--Portal content here--></div>
+    <div id="slides"></div>
 
     <script>
         (() => {

package/rancher-components/Card/Card.vue

@@ -89,7 +89,7 @@ export default defineComponent({
           {{ title }}
         </slot>
       </div>
-      <hr>
+      <hr role="none">
       <div
         class="card-body"
         data-testid="card-body-slot"

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

@@ -1,4 +1,4 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
+import { shallowMount, Wrapper, mount } from '@vue/test-utils';
 import { Checkbox } from './index';
 
 describe('checkbox.vue', () => {
@@ -65,4 +65,62 @@ describe('checkbox.vue', () => {
 
     expect(wrapper.emitted('update:value')[0][0]).toBeNull();
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const alternateLabel = 'some-alternate-aria-label';
+    const description = 'some-description';
+    const ariaDescribedById = 'some-external-id';
+
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = mount(
+      Checkbox,
+      {
+        propsData: {
+          value: false, alternateLabel, description
+        },
+        attrs: { 'aria-describedby': ariaDescribedById },
+      }
+    );
+
+    const field = wrapper.find('.checkbox-custom');
+    const ariaChecked = field.attributes('aria-checked');
+    const ariaLabel = field.attributes('aria-label');
+    const ariaLabelledBy = field.attributes('aria-labelledby');
+    const ariaDescribedBy = field.attributes('aria-describedby');
+
+    // validates type of input rendered
+    expect(ariaChecked).toBe('false');
+    expect(ariaLabelledBy).toBeUndefined();
+    expect(ariaLabel).toBe(alternateLabel);
+    expect(ariaDescribedBy).toBe(`${ ariaDescribedById } ${ wrapper.vm.describedById }`);
+  });
+
+  it('a11y: having a label should not render "aria-label" prop and have "aria-labelledby"', async() => {
+    const label = 'some-label';
+
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = mount(
+      Checkbox,
+      {
+        propsData: {
+          value: true, label, disabled: true
+        }
+      }
+    );
+
+    const field = wrapper.find('.checkbox-custom');
+    const ariaChecked = field.attributes('aria-checked');
+    const ariaLabel = field.attributes('aria-label');
+    const ariaLabelledBy = field.attributes('aria-labelledby');
+    const ariaDisabled = field.attributes('aria-disabled');
+    const tabIndex = field.attributes('tabindex');
+
+    // validates type of input rendered
+    expect(field.exists()).toBe(true);
+    expect(ariaChecked).toBe('true');
+    expect(ariaLabelledBy).toBe(wrapper.vm.idForLabel);
+    expect(ariaLabel).toBeUndefined();
+    expect(wrapper.find(`#${ wrapper.vm.idForLabel }`).text()).toBe(label);
+
+    expect(ariaDisabled).toBe('true');
+    expect(tabIndex).toBe('-1');
+  });
 });

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

@@ -124,6 +124,15 @@ export default defineComponent({
       type:    String,
       default: undefined
     },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'checkbox'
+    },
   },
 
   emits: ['update:value'],
@@ -133,6 +142,18 @@ export default defineComponent({
   },
 
   computed: {
+    ariaDescribedBy(): string | undefined {
+      const inheritedDescribedBy = this.$attrs['aria-describedby'];
+      const internalDescribedBy = this.descriptionKey || this.description ? this.describedById : undefined;
+
+      if (inheritedDescribedBy && internalDescribedBy) {
+        return `${ inheritedDescribedBy } ${ internalDescribedBy }`;
+      } else if (inheritedDescribedBy || internalDescribedBy) {
+        return `${ inheritedDescribedBy || internalDescribedBy }`;
+      }
+
+      return undefined;
+    },
     /**
      * Determines if the checkbox is disabled.
      * @returns boolean: True when the disabled prop is true or when mode is
@@ -167,7 +188,7 @@ export default defineComponent({
     },
 
     idForLabel():string {
-      return `${ this.id }-label`;
+      return `${ generateRandomAlphaString(12) }-checkbox-label`;
     }
   },
 
@@ -271,10 +292,11 @@ export default defineComponent({
         class="checkbox-custom"
         :class="{indeterminate: indeterminate}"
         :tabindex="isDisabled ? -1 : 0"
+        :aria-disabled="isDisabled"
         :aria-label="replacementLabel"
         :aria-checked="!!value"
         :aria-labelledby="labelKey || label ? idForLabel : undefined"
-        :aria-describedby="descriptionKey || description ? describedById : undefined"
+        :aria-describedby="ariaDescribedBy"
         role="checkbox"
       />
       <span
@@ -298,6 +320,7 @@ export default defineComponent({
             v-clean-tooltip="{content: t(tooltipKey), triggers: ['hover', 'touch', 'focus']}"
             v-stripped-aria-label="t(tooltipKey)"
             class="checkbox-info icon icon-info icon-lg"
+            :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
           />
           <i
@@ -305,6 +328,7 @@ export default defineComponent({
             v-clean-tooltip="{content: tooltip, triggers: ['hover', 'touch', 'focus']}"
             v-stripped-aria-label="tooltip"
             class="checkbox-info icon icon-info icon-lg"
+            :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
           />
         </slot>
@@ -374,7 +398,7 @@ $fontColor: var(--input-label);
 
   .checkbox-info {
     line-height: normal;
-    margin-left: 2px;
+    margin-left: 4px;
 
     &:focus-visible {
       @include focus-outline;

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

@@ -54,4 +54,51 @@ describe('component: LabeledInput', () => {
       expect(subLabel.text()).toBe(hint);
     });
   });
+
+  describe('a11y: adding ARIA props', () => {
+    const ariaLabelVal = 'some-aria-label';
+    const subLabelVal = 'some-sublabel';
+    const ariaDescribedByIdVal = 'some-external-id';
+    const ariaRequiredVal = 'true';
+
+    it.each([
+      ['text', 'input', ariaLabelVal, subLabelVal, ariaDescribedByIdVal],
+      ['cron', 'input', ariaLabelVal, subLabelVal, ariaDescribedByIdVal],
+      ['multiline', 'textarea', ariaLabelVal, subLabelVal, ariaDescribedByIdVal],
+      ['multiline-password', 'textarea', ariaLabelVal, subLabelVal, ariaDescribedByIdVal],
+    ])('for type %p should correctly fill out the appropriate fields on the component', (type, validationType, ariaLabel, subLabel, ariaDescribedById) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          value: '', type, ariaLabel, subLabel, required: true
+        },
+        attrs: { 'aria-describedby': ariaDescribedById },
+        mocks: { $store: { getters: { 'i18n/t': jest.fn() } } }
+      });
+
+      const field = wrapper.find(validationType);
+      const ariaLabelProp = field.attributes('aria-label');
+      const ariaDescribedBy = field.attributes('aria-describedby');
+      const ariaRequired = field.attributes('aria-required');
+
+      // validates type of input rendered
+      expect(field.exists()).toBe(true);
+      expect(ariaLabelProp).toBe(ariaLabel);
+      expect(ariaDescribedBy).toBe(`${ ariaDescribedById } ${ wrapper.vm.describedById }`);
+      expect(ariaRequired).toBe(ariaRequiredVal);
+    });
+  });
+
+  it('a11y: rendering a "label" should not render an "aria-label" prop', () => {
+    const label = 'some-label';
+
+    const wrapper = mount(LabeledInput, {
+      propsData: { type: 'text', label },
+      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
+    });
+
+    const mainInput = wrapper.find('input[type="text"]');
+
+    expect(mainInput.attributes('aria-label')).toBeUndefined();
+    expect(wrapper.find('label').text()).toBe(label);
+  });
 });

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

@@ -161,6 +161,19 @@ export default defineComponent({
       return this.isCompact ? false : !!this.label || !!this.labelKey || !!this.$slots.label;
     },
 
+    ariaDescribedBy(): string | undefined {
+      const inheritedDescribedBy = this.$attrs['aria-describedby'];
+      const internalDescribedBy = this.cronHint || this.subLabel ? this.describedById : undefined;
+
+      if (inheritedDescribedBy && internalDescribedBy) {
+        return `${ inheritedDescribedBy } ${ internalDescribedBy }`;
+      } else if (inheritedDescribedBy || internalDescribedBy) {
+        return `${ inheritedDescribedBy || internalDescribedBy }`;
+      }
+
+      return undefined;
+    },
+
     /**
      * Determines if the Labeled Input should display a tooltip.
      */
@@ -362,6 +375,7 @@ export default defineComponent({
         <span
           v-if="requiredField"
           class="required"
+          :aria-hidden="true"
         >*</span>
       </label>
     </slot>
@@ -377,11 +391,13 @@ export default defineComponent({
         v-stripped-aria-label="!hasLabel && ariaLabel ? ariaLabel : undefined"
         :maxlength="_maxlength"
         :disabled="isDisabled"
+        :aria-disabled="isDisabled"
         :value="value || ''"
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
-        :aria-describedby="cronHint || subLabel ? describedById : undefined"
+        :aria-describedby="ariaDescribedBy"
+        :aria-required="requiredField"
         @update:value="onInput"
         @focus="onFocus"
         @blur="onBlur"
@@ -396,13 +412,15 @@ export default defineComponent({
         v-bind="$attrs"
         :maxlength="_maxlength"
         :disabled="isDisabled"
+        :aria-disabled="isDisabled"
         :type="type === 'cron' ? 'text' : type"
         :value="value"
         :placeholder="_placeholder"
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
-        :aria-describedby="cronHint || subLabel ? describedById : undefined"
+        :aria-describedby="ariaDescribedBy"
+        :aria-required="requiredField"
         @input="onInput"
         @focus="onFocus"
         @blur="onBlur"

package/rancher-components/Form/Radio/RadioButton.test.ts

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import { RadioButton } from './index';
 
 describe('radioButton.vue', () => {
@@ -30,4 +30,39 @@ describe('radioButton.vue', () => {
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label - Slot');
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const val = 'foo';
+    const value = 'foo';
+    const description = 'some-description';
+    const itemLabel = 'some-label';
+    const radioOptionId = 'some-id-from-parent';
+
+    const wrapper = mount(
+      RadioButton,
+      {
+        propsData: {
+          label: itemLabel,
+          val,
+          value,
+          description,
+          radioOptionId
+        }
+      });
+
+    const radioInputElem = wrapper.find('span[role="radio"]');
+    const role = radioInputElem.attributes('role');
+    const ariaLabel = radioInputElem.attributes('aria-label');
+    const ariaChecked = radioInputElem.attributes('aria-checked');
+    const ariaDisabled = radioInputElem.attributes('aria-disabled');
+    const ariaDescribedBy = radioInputElem.attributes('aria-describedby');
+    const itemId = radioInputElem.attributes('id');
+
+    expect(role).toBe('radio');
+    expect(ariaLabel).toBe(itemLabel);
+    expect(ariaChecked).toBe('true');
+    expect(ariaDisabled).toBe('false');
+    expect(ariaDescribedBy).toBe(wrapper.vm.describeById);
+    expect(itemId).toBe(radioOptionId);
+  });
 });