@rancher/shell 3.0.4 → 3.0.5-rc.2

package/components/__tests__/SlideInPanelManager.spec.ts

@@ -0,0 +1,166 @@
+import { mount } from '@vue/test-utils';
+import { createStore, Store } from 'vuex';
+import { nextTick } from 'vue';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager.vue';
+
+const MockComponent = {
+  template: '<div data-testid="slide-in-panel-component">Mock Panel Content</div>',
+  props:    ['width', 'title', 'extraProp']
+};
+
+describe('slideInPanelManager.vue with Teleport', () => {
+  let store: Store<any>;
+  let getters: Record<string, () => any>;
+  let slidesDiv: HTMLDivElement;
+
+  beforeEach(() => {
+    // Create teleport target container
+    slidesDiv = document.createElement('div');
+    slidesDiv.setAttribute('id', 'slides');
+    document.body.appendChild(slidesDiv);
+
+    getters = {
+      'slideInPanel/isOpen':         () => true,
+      'slideInPanel/component':      () => MockComponent,
+      'slideInPanel/componentProps': () => ({
+        width: '40%', title: 'Test Title', extraProp: 'extra'
+      })
+    };
+
+    store = createStore({
+      getters,
+      mutations: { 'slideInPanel/close': jest.fn() }
+    });
+  });
+
+  afterEach(() => {
+    // Clean up the teleport container
+    document.body.removeChild(slidesDiv);
+  });
+
+  const factory = () => {
+    return mount(SlideInPanelManager, {
+      attachTo: document.body, // attach to document so Teleport renders
+      global:   { plugins: [store] }
+    });
+  };
+
+  it('renders slide in panel with proper style when open', async() => {
+    factory();
+    await nextTick();
+
+    const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
+    const slideGlass = document.querySelector('[data-testid="slide-in-glass"]') as HTMLElement;
+    const slideComponent = document.querySelector('[data-testid="slide-in-panel-component"]') as HTMLElement;
+    const headerTitle = document.querySelector('#slides .slide-in .header .title') as HTMLElement;
+
+    expect(slidePanel).toBeTruthy();
+    expect(slideGlass).toBeTruthy();
+    expect(slideComponent).toBeTruthy();
+    expect(headerTitle.textContent?.trim()).toBe('Test Title');
+
+    const styleAttr = slidePanel.getAttribute('style') || '';
+
+    expect(styleAttr).toContain('width: 40%');
+    expect(styleAttr).toContain('top: 55px');
+    expect(styleAttr).toContain('height: calc(100vh - 55px)');
+    expect(styleAttr).toContain('right: 0');
+  });
+
+  it('renders default panel title when no title is provided', async() => {
+    // Update getter so that no title is provided
+    getters['slideInPanel/componentProps'] = () => ({ width: '40%' });
+    store = createStore({
+      getters,
+      mutations: { 'slideInPanel/close': jest.fn() }
+    });
+    factory();
+    await nextTick();
+
+    const headerTitle = document.querySelector('#slides #slide-in-panel-manager .header .title') as HTMLElement;
+
+    expect(headerTitle.textContent?.trim()).toBe('Details');
+  });
+
+  it('computes panelTop correctly when a banner exists', async() => {
+    // Create a banner element with a simulated clientHeight.
+    const banner = document.createElement('div');
+
+    banner.setAttribute('id', 'banner-header');
+    document.body.appendChild(banner);
+    // Simulate a banner with a clientHeight of 100.
+    Object.defineProperty(banner, 'clientHeight', { value: 100, configurable: true });
+
+    factory();
+    await nextTick();
+
+    const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
+    const styleAttr = slidePanel.getAttribute('style') || '';
+
+    // Expected panelTop = HEADER_HEIGHT (55) + banner.clientHeight (100) = "155px"
+    expect(styleAttr).toContain('top: 155px');
+    expect(styleAttr).toContain('height: calc(100vh - 155px)');
+
+    document.body.removeChild(banner);
+  });
+
+  it('renders slide in glass as hidden and panel with negative right when closed', async() => {
+    // Set isOpen to false.
+    getters['slideInPanel/isOpen'] = () => false;
+    store = createStore({
+      getters,
+      mutations: { 'slideInPanel/close': jest.fn() }
+    });
+    factory();
+    await nextTick();
+
+    const slideGlass = document.querySelector('[data-testid="slide-in-glass"]') as HTMLElement;
+
+    expect(slideGlass).toBeTruthy();
+    expect(slideGlass.style.display).toBe('none');
+
+    const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
+    const styleAttr = slidePanel.getAttribute('style') || '';
+
+    // With currentProps width "40%", panelRight should be "-40%" when closed.
+    expect(styleAttr).toContain('right: -40%');
+  });
+
+  it('calls store commit when clicking on the slide-in glass overlay', async() => {
+    const closeMutation = jest.fn();
+
+    getters['slideInPanel/isOpen'] = () => true;
+    store = createStore({
+      getters,
+      mutations: { 'slideInPanel/close': closeMutation }
+    });
+    factory();
+    await nextTick();
+
+    const slideGlass = document.querySelector('[data-testid="slide-in-glass"]') as HTMLElement;
+
+    slideGlass.click();
+    await nextTick();
+
+    expect(closeMutation).toHaveBeenCalledWith({}, undefined);
+  });
+
+  it('calls store commit when clicking on the slide-in close icon', async() => {
+    const closeMutation = jest.fn();
+
+    getters['slideInPanel/isOpen'] = () => true;
+    store = createStore({
+      getters,
+      mutations: { 'slideInPanel/close': closeMutation }
+    });
+    factory();
+    await nextTick();
+
+    const closeIcon = document.querySelector('[data-testid="slide-in-close"]') as HTMLElement;
+
+    closeIcon.click();
+    await nextTick();
+
+    expect(closeMutation).toHaveBeenCalledWith({}, undefined);
+  });
+});

package/components/auth/AuthBanner.vue

@@ -1,13 +1,9 @@
 
 <script>
 import { Banner } from '@components/Banner';
-import DisableAuthProviderModal from '@shell/components/DisableAuthProviderModal';
 
 export default {
-  components: {
-    Banner,
-    DisableAuthProviderModal
-  },
+  components: { Banner },
 
   props: {
     tArgs: {
@@ -35,7 +31,18 @@ export default {
 
   methods: {
     showDisableModal() {
-      this.$refs.disableAuthProviderModal.show();
+      this.$store.dispatch('management/promptModal', {
+        component:      'DisableAuthProviderDialog',
+        customClass:    'remove-modal',
+        modalWidth:     '400',
+        height:         'auto',
+        styles:         'max-height: 100vh;',
+        componentProps: {
+          disableCb: () => {
+            this.disable();
+          }
+        }
+      });
     }
   },
 };
@@ -78,11 +85,6 @@ export default {
       v-if="$slots.footer"
       name="footer"
     />
-
-    <DisableAuthProviderModal
-      ref="disableAuthProviderModal"
-      @disable="disable"
-    />
   </div>
 </template>
 

package/components/auth/Principal.vue

@@ -90,6 +90,7 @@ export default {
         <img
           :src="principal.avatarSrc"
           :class="{'round': principal.roundAvatar}"
+          :alt="t('principal.alt.avatar')"
         >
       </div>
       <div

package/components/auth/__tests__/RoleDetailEdit.test.ts

@@ -51,8 +51,9 @@ describe('component: RoleDetailEdit', () => {
     const wrapper = mount(RoleDetailEdit, {
       props: {
         value: {
-          rules:   [{ verbs }],
-          subtype: 'GLOBAL'
+          rules:    [{ verbs }],
+          subtype:  'GLOBAL',
+          metadata: { name: 'global-role-with-inherited' },
         },
       },
 

package/components/auth/login/ldap.vue

@@ -54,7 +54,7 @@ export default {
 </script>
 
 <template>
-  <form>
+  <form @submit.prevent>
     <template v-if="open">
       <div class="span-6 offset-3">
         <div class="mb-20">

package/components/fleet/FleetResources.vue

@@ -1,5 +1,17 @@
 <script>
 import SortableTable from '@shell/components/SortableTable';
+import { colorForState, stateDisplay, stateSort } from '@shell/plugins/dashboard-store/resource-class';
+
+function stateDisplayProperties(state) {
+  const color = colorForState(state).replace('text-', 'bg-');
+  const display = stateDisplay(state);
+
+  return {
+    stateBackground: color,
+    stateDisplay:    display,
+    stateSort:       stateSort(color, display),
+  };
+}
 
 export default {
   name: 'FleetResources',
@@ -7,8 +19,8 @@ export default {
   components: { SortableTable },
 
   props: {
-    value: {
-      type:     Object,
+    rows: {
+      type:     Array,
       required: true,
     },
     clusterId: {
@@ -19,10 +31,13 @@ export default {
   },
 
   computed: {
-    computedResources() {
-      return this.value.resourcesStatuses;
+    resources() {
+      return (this.rows || []).map((r) => ({
+        tableKey: r.key,
+        ...stateDisplayProperties(r.state),
+        ...r,
+      }));
     },
-
     resourceHeaders() {
       return [
         {
@@ -72,7 +87,7 @@ export default {
 
 <template>
   <SortableTable
-    :rows="computedResources"
+    :rows="resources"
     :headers="resourceHeaders"
     :table-actions="false"
     :row-actions="false"

package/components/form/ArrayList.vue

@@ -1,4 +1,5 @@
 <script>
+import { ref, watch, computed } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { removeAt } from '@shell/utils/array';
@@ -98,22 +99,83 @@ export default {
       type:    String,
       default: '',
     },
+    componentTestid: {
+      type:    String,
+      default: 'array-list',
+    }
   },
-  data() {
-    const input = (Array.isArray(this.value) ? this.value : []).slice();
-    const rows = [];
+
+  setup(props, { emit }) {
+    const input = (Array.isArray(props.value) ? props.value : []).slice();
+    const rows = ref([]);
 
     for ( const value of input ) {
-      rows.push({ value });
+      rows.value.push({ value });
     }
-    if ( !rows.length && this.initialEmptyRow ) {
-      const value = this.defaultAddValue ? clone(this.defaultAddValue) : '';
+    if ( !rows.value.length && props.initialEmptyRow ) {
+      const value = props.defaultAddValue ? clone(props.defaultAddValue) : '';
 
-      rows.push({ value });
+      rows.value.push({ value });
     }
 
-    return { rows, lastUpdateWasFromValue: false };
+    const isView = computed(() => {
+      return props.mode === _VIEW;
+    });
+
+    /**
+     * Cleanup rows and emit input
+     */
+    const update = () => {
+      if ( isView.value ) {
+        return;
+      }
+      const out = [];
+
+      for ( const row of rows.value ) {
+        const trim = !props.valueMultiline && (typeof row.value === 'string');
+        const value = trim ? row.value.trim() : row.value;
+
+        if ( typeof value !== 'undefined' ) {
+          out.push(value);
+        }
+      }
+      emit('update:value', out);
+    };
+
+    const lastUpdateWasFromValue = ref(false);
+    const queueUpdate = debounce(update, 50);
+
+    watch(
+      rows,
+      () => {
+        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
+        // this was called which then forced rows to updated again
+        if (!lastUpdateWasFromValue.value) {
+          queueUpdate();
+        }
+        lastUpdateWasFromValue.value = false;
+      },
+      { deep: true }
+    );
+
+    watch(
+      () => props.value,
+      () => {
+        lastUpdateWasFromValue.value = true;
+        rows.value = (props.value || []).map((v) => ({ value: v }));
+      },
+      { deep: true }
+    );
+
+    return {
+      rows,
+      lastUpdateWasFromValue,
+      queueUpdate,
+      isView,
+      update,
+    };
   },
+
   computed: {
     _addLabel() {
       return this.addLabel || this.t('generic.add');
@@ -121,10 +183,6 @@ export default {
     _removeLabel() {
       return this.removeLabel || this.t('generic.remove');
     },
-
-    isView() {
-      return this.mode === _VIEW;
-    },
     showAdd() {
       return this.addAllowed;
     },
@@ -145,29 +203,7 @@ export default {
       return !this.valueMultiline && this.protip;
     }
   },
-  watch: {
-    value: {
-      deep: true,
-      handler() {
-        this.lastUpdateWasFromValue = true;
-        this.rows = (this.value || []).map((v) => ({ value: v }));
-      }
-    },
-
-    rows: {
-      deep: true,
-      handler(newValue, oldValue) {
-        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
-        // this was called which then forced rows to updated again
-        if (!this.lastUpdateWasFromValue) {
-          this.queueUpdate();
-        }
-        this.lastUpdateWasFromValue = false;
-      }
-    }
-  },
   created() {
-    this.queueUpdate = debounce(this.update, 50);
   },
   methods: {
     add() {
@@ -193,26 +229,6 @@ export default {
       this.queueUpdate();
     },
 
-    /**
-     * Cleanup rows and emit input
-     */
-    update() {
-      if ( this.isView ) {
-        return;
-      }
-      const out = [];
-
-      for ( const row of this.rows ) {
-        const trim = !this.valueMultiline && (typeof row.value === 'string');
-        const value = trim ? row.value.trim() : row.value;
-
-        if ( typeof value !== 'undefined' ) {
-          out.push(value);
-        }
-      }
-      this.$emit('update:value', out);
-    },
-
     /**
      * Handle paste event, e.g. split multiple lines in rows
      */
@@ -270,7 +286,7 @@ export default {
       <div
         v-for="(row, idx) in rows"
         :key="idx"
-        :data-testid="`array-list-box${ idx }`"
+        :data-testid="`${componentTestid}-box${ idx }`"
         class="box"
       >
         <slot
@@ -294,7 +310,7 @@ export default {
                 v-if="valueMultiline"
                 ref="value"
                 v-model:value="row.value"
-                :data-testid="`textarea-${idx}`"
+                :data-testid="`${componentTestid}-textarea-${idx}`"
                 :placeholder="valuePlaceholder"
                 :mode="mode"
                 :disabled="disabled"
@@ -305,7 +321,7 @@ export default {
                 v-else-if="rules.length > 0"
                 ref="value"
                 v-model:value="row.value"
-                :data-testid="`labeled-input-${idx}`"
+                :data-testid="`${componentTestid}-labeled-input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
                 :rules="rules"
@@ -317,7 +333,7 @@ export default {
                 v-else
                 ref="value"
                 v-model="row.value"
-                :data-testid="`input-${idx}`"
+                :data-testid="`${componentTestid}-input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
                 :aria-label="a11yLabel ? a11yLabel : undefined"
@@ -340,7 +356,7 @@ export default {
               type="button"
               :disabled="isView"
               class="btn role-link"
-              :data-testid="`remove-item-${idx}`"
+              :data-testid="`${componentTestid}-remove-item-${idx}`"
               :aria-label="`${_removeLabel} ${idx + 1}`"
               role="button"
               @click="remove(row, idx)"
@@ -374,7 +390,7 @@ export default {
           type="button"
           class="btn role-tertiary add"
           :disabled="loading || disableAdd"
-          data-testid="array-list-button"
+          :data-testid="`${componentTestid}-button`"
           :aria-label="_addLabel"
           role="button"
           @click="add()"

package/components/form/BannerSettings.vue

@@ -42,7 +42,8 @@ export default ({
       themeVars:               {
         bannerBgColor:   getComputedStyle(document.body).getPropertyValue('--default'),
         bannerTextColor: getComputedStyle(document.body).getPropertyValue('--banner-text-color')
-      }
+      },
+      bannerTitleId: `describe-banners-${ this.bannerType }-id`
     };
   },
 
@@ -107,12 +108,19 @@ export default ({
   <div class="row mb-20">
     <div class="col span-12">
       <div class="row">
+        <p
+          :id="bannerTitleId"
+          class="sr-only"
+        >
+          {{ t(`banner.${bannerType}`) }}
+        </p>
         <div class="col span-6">
           <LabeledInput
             v-model:value="value[bannerType].text"
             :disabled="isUiDisabled"
             :label="t('banner.text')"
             type="multiline"
+            :aria-describedby="bannerTitleId"
           />
           <p
             v-if="isConsentBanner"
@@ -131,11 +139,13 @@ export default ({
               :mode="mode"
               :label="t('banner.showAsDialog.label')"
               :tooltip="t('banner.showAsDialog.tooltip')"
+              :aria-describedby="bannerTitleId"
             />
             <LabeledInput
               v-model:value="buttonText"
               :disabled="!showAsDialog || isUiDisabled"
               :label="t('banner.buttonText')"
+              :aria-describedby="bannerTitleId"
             />
           </div>
         </div>
@@ -148,10 +158,11 @@ export default ({
             :options="radioOptions.options"
             :labels="radioOptions.labels"
             :mode="mode"
+            :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.bannerAlignment.label')}`"
           />
         </div>
         <div class="col span-2">
-          <h3>
+          <h3 id="decoration-banner-title-id">
             {{ t('banner.bannerDecoration.label') }}
           </h3>
           <div
@@ -165,6 +176,7 @@ export default ({
               class="banner-decoration-checkbox"
               :mode="mode"
               :label="o.label"
+              :aria-describedby="`${bannerTitleId} decoration-banner-title-id`"
             />
           </div>
         </div>
@@ -175,6 +187,7 @@ export default ({
             :disabled="isUiDisabled"
             :label="t('banner.bannerFontSize.label')"
             :options="uiBannerFontSizeOptions"
+            :aria-describedby="bannerTitleId"
           />
         </div>
       </div>
@@ -185,6 +198,7 @@ export default ({
             :default-value="themeVars.bannerTextColor"
             :label="t('banner.textColor')"
             :mode="mode"
+            :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.textColor')}`"
           />
         </div>
         <div class="col span-6">
@@ -193,6 +207,7 @@ export default ({
             :default-value="themeVars.bannerBgColor"
             :label="t('banner.background')"
             :mode="mode"
+            :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.background')}`"
           />
         </div>
       </div>

package/components/form/ColorInput.vue

@@ -4,6 +4,8 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 export default {
   emits: ['update:value'],
 
+  inheritAttrs: false,
+
   props: {
     value: {
       type:    String,
@@ -67,6 +69,23 @@ export default {
       const disabled = this.disabled;
 
       return this.mode !== this.editMode || disabled;
+    },
+
+    ariaLabel() {
+      // We allow override with $attrs['aria-label'] for more control
+      if (this.$attrs['aria-label']) {
+        return this.$attrs['aria-label'];
+      } else if (this.labelKey) {
+        return this.t(this.labelKey);
+      } else if (this.label) {
+        return this.label;
+      } else {
+        return this.t('generic.colorPicker');
+      }
+    },
+
+    ariaDescribedBy() {
+      return this.$attrs['aria-describedby'] || undefined;
     }
   },
 
@@ -100,11 +119,20 @@ export default {
     @keydown.space.prevent
     @keyup.enter.space.stop="handleKeyup($event)"
   >
-    <label class="text-label"><t
-      v-if="labelKey"
-      :k="labelKey"
-      :raw="true"
-    />{{ label }}</label>
+    <!-- let make "label" not to be picked up by screen readers -->
+    <!-- because it's already included in aria-label (sr's announced it twice) -->
+    <label
+      v-if="labelKey || label"
+      class="text-label"
+      aria-hidden="true"
+    >
+      <t
+        v-if="labelKey"
+        :k="labelKey"
+        :raw="true"
+      />
+      <template v-else-if="label">{{ label }}</template>
+    </label>
     <div
       :data-testid="componentTestid + '-color-input_preview-container'"
       class="preview-container"
@@ -117,7 +145,8 @@ export default {
         <input
           ref="input"
           :aria-disabled="isDisabled ? 'true' : 'false'"
-          :aria-label="t('generic.colorPicker')"
+          :aria-label="ariaLabel"
+          :aria-describedby="ariaDescribedBy"
           type="color"
           :disabled="isDisabled"
           tabindex="-1"