@rancher/shell 3.0.2-rc.5 → 3.0.2

package/components/form/SchedulingCustomization.vue

@@ -0,0 +1,85 @@
+<script>
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import Banner from '@components/Banner/Banner.vue';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+export default {
+  name:       'SchedulingCustomization',
+  components: { Checkbox, Banner },
+  emits:      ['scheduling-customization-changed'],
+  props:      {
+    value: {
+      type:    Object,
+      default: () => {},
+    },
+    mode: {
+      type:    String,
+      default: _CREATE
+    },
+    feature: {
+      type:     Boolean,
+      required: true
+    },
+    defaultPC: {
+      type:    Object,
+      default: () => {},
+    },
+    defaultPDB: {
+      type:    Object,
+      default: () => {},
+    }
+  },
+  data() {
+    return { applyGlobal: false };
+  },
+  computed: {
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+    enabled() {
+      return !!this.value;
+    },
+    settingMissmatch() {
+      const pdbMaxUnavailableMismatch = this.value?.podDisruptionBudget.maxUnavailable !== this.defaultPDB.maxUnavailable;
+      const pdbMinAvailableMismatch = this.value?.podDisruptionBudget.minAvailable !== this.defaultPDB.minAvailable;
+      const pcValueMismatch = this.value?.priorityClass.value !== this.defaultPC.value;
+      const pcPreemptionMismatch = this.value?.priorityClass.preemptionPolicy !== this.defaultPC.preemptionPolicy;
+      const pdbMismatch = !!this.value?.podDisruptionBudget && ( pdbMaxUnavailableMismatch || pdbMinAvailableMismatch);
+      const pcMismatch = !!this.value?.priorityClass && ( pcValueMismatch || pcPreemptionMismatch);
+
+      return pdbMismatch || pcMismatch;
+    },
+  }
+};
+</script>
+
+<template>
+  <div
+    class="mt-20"
+  >
+    <Checkbox
+      :value="enabled"
+      :mode="mode"
+      label-key="cluster.agentConfig.subGroups.schedulingCustomization.label"
+      descriptionKey="cluster.agentConfig.subGroups.schedulingCustomization.description"
+      data-testid="scheduling-customization-checkbox"
+      @update:value="$emit('scheduling-customization-changed', $event)"
+    >
+      <template
+        v-if="feature && isEdit && settingMissmatch"
+        #extra
+      >
+        <Banner
+          class="mt-10 mb-10"
+          color="info"
+          label-key="cluster.agentConfig.subGroups.schedulingCustomization.banner"
+        />
+        <Checkbox
+          :value="applyGlobal"
+          :mode="mode"
+          label-key="cluster.agentConfig.subGroups.schedulingCustomization.innerCheckbox"
+          @update:value="$emit('scheduling-customization-changed', feature)"
+        />
+      </template>
+    </Checkbox>
+  </div>
+</template>

package/components/form/Select.vue

@@ -256,7 +256,8 @@ export default {
     }"
     :tabindex="disabled || isView ? -1 : 0"
     @click="focusSearch"
-    @keydown.enter.down="focusSearch"
+    @keydown.enter="focusSearch"
+    @keydown.down.prevent="focusSearch"
     @keydown.space.prevent="focusSearch"
   >
     <v-select
@@ -281,7 +282,7 @@ export default {
       :modelValue="value != null ? value : ''"
       :dropdownShouldOpen="handleDropdownOpen"
       :tabindex="-1"
-
+      role="listbox"
       @update:modelValue="$emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"

package/components/form/SelectOrCreateAuthSecret.vue

@@ -147,7 +147,7 @@ export default {
 
     showSshKnownHosts: {
       type:    Boolean,
-      default: true,
+      default: false,
     },
   },
 
@@ -632,6 +632,7 @@ export default {
         >
           <SSHKnownHosts
             v-model:value="sshKnownHosts"
+            data-testid="auth-secret-known-ssh-hosts"
             :mode="mode"
           />
         </div>

package/components/form/UnitInput.vue

@@ -206,7 +206,7 @@ export default {
       }
 
       if (this.outputModifier) {
-        out = out === null ? null : `${ inputValue }${ this.unit }`;
+        out = out === null ? null : `${ parseInt(inputValue) }${ this.unit }`;
       } else if ( this.outputAs === 'string' ) {
         out = out === null ? '' : `${ inputValue }`;
       } else if (out) {
@@ -235,7 +235,7 @@ export default {
     :required="required"
     :placeholder="placeholder"
     :hide-arrows="hideArrows"
-    @change="update($event.target.value)"
+    @update:value="update"
     @blur="update($event.target.value)"
   >
     <template #suffix>
@@ -252,7 +252,6 @@ export default {
 
 <style lang="scss" scoped>
   .addon.with-tooltip {
-    position: relative;
-    right: 30px;
+    padding-right: 42px;
   }
 </style>

package/components/form/__tests__/ArrayList.test.ts

@@ -47,19 +47,22 @@ describe('the ArrayList', () => {
     expect(arrayListBoxes).toHaveLength(2);
   });
 
-  it('contracts when a delete button is clicked', async() => {
+  it('should remove the correct item, emit the removed item and the updated values', async() => {
     const wrapper = mount(ArrayList, {
       props: {
-        value: ['string 1', 'string 2'],
+        value: ['string 0', 'string 1', 'string 2'],
         mode:  _EDIT,
       },
     });
-    const deleteButton = wrapper.get('[data-testid^="remove-item"]').element as HTMLElement;
 
-    await deleteButton.click();
-    const arrayListBoxes = wrapper.findAll('[data-testid^="array-list-box"]');
+    jest.useFakeTimers();
+    await (wrapper.get('[data-testid="remove-item-1"]').element as HTMLElement).click();
+    jest.advanceTimersByTime(50);
+    jest.useRealTimers();
 
-    expect(arrayListBoxes).toHaveLength(1);
+    expect(wrapper.find('[data-testid="remove-item-2"]').exists()).toBe(false);
+    expect((wrapper.emitted('remove')![0][0] as any).row.value).toStrictEqual('string 1');
+    expect(wrapper.emitted('update:value')![0][0]).toStrictEqual(['string 0', 'string 2']);
   });
 
   it('add button is hidden in read-only mode', () => {

package/components/form/__tests__/LabeledSelect.test.ts

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { defineComponent } from 'vue';
 
@@ -137,6 +138,42 @@ describe('component: LabeledSelect', () => {
     });
   });
 
+  describe(`given {'disabled', 'mode', 'loading'} options`, () => {
+    it.each([
+      ['open', false, _EDIT, false, true],
+      ['open', false, _CREATE, false, true],
+      ['not open', false, _VIEW, false, false],
+      ['not open', false, _EDIT, true, false],
+      ['not open', true, _EDIT, false, false],
+    ])('should %p dropdown element if options are { disabled: %p, mode: %p, loading: %p }', async(
+      _,
+      disabled,
+      mode,
+      loading,
+      isOpen
+    ) => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(LabeledSelect, {
+        props: {
+          value,
+          options: [
+            { label, value },
+          ],
+          disabled,
+          mode,
+          loading
+        }
+      });
+
+      await wrapper.trigger('click');
+
+      const dropdownOpen = wrapper.find('.vs--open');
+
+      expect(dropdownOpen.exists()).toBe(isOpen);
+    });
+  });
+
   describe('given attributes from parent element', () => {
     it('should not pass classes to the select element', () => {
       const customClass = 'bananas';

package/components/form/__tests__/SelectOrCreateAuthSecret.test.ts

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+import { AUTH_TYPE } from '@shell/config/types';
+import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret.vue';
+
+const requiredSetup = () => {
+  return { global: { mocks: { $fetchState: {} } } };
+};
+
+describe('component: SelectOrCreateAuthSecret', () => {
+  it.each([
+    ['display', true],
+    ['not display', false],
+    ['not display', undefined], // prop's default value is used
+  ])('mode edit: should %p sshKnownHosts field if enabled and auth type is SSH', (_, showSshKnownHosts) => {
+    const wrapper = mount(SelectOrCreateAuthSecret, {
+      ...requiredSetup(),
+      props: {
+        mode:               _EDIT,
+        namespace:          'default',
+        value:              {},
+        showSshKnownHosts,
+        registerBeforeHook: () => {},
+      },
+      data() {
+        return { selected: AUTH_TYPE._SSH } as any;
+      }
+    });
+
+    const knownSshHosts = wrapper.find('[data-testid="auth-secret-known-ssh-hosts"]');
+
+    expect(knownSshHosts.exists()).toBe(showSshKnownHosts || false);
+  });
+});

package/components/form/__tests__/UnitInput.test.ts

@@ -11,7 +11,7 @@ describe('component: UnitInput', () => {
     expect(wrapper.isVisible()).toBe(true);
   });
 
-  it.each(['blur', 'change'])('should emit input event when "%p" is fired', async(event) => {
+  it.each(['blur', 'update:value'])('should emit input event when "%p" is fired', async(event) => {
     const wrapper = mount(UnitInput, { props: { value: 1, delay: 0 } });
     const input = wrapper.find('input');
 
@@ -20,7 +20,7 @@ describe('component: UnitInput', () => {
     input.trigger(event);
 
     expect(wrapper.emitted('update:value')).toBeTruthy();
-    expect(wrapper.emitted('update:value')[2]).toStrictEqual([4]);
+    expect(wrapper.emitted('update:value')[1]).toStrictEqual([4]);
   });
 
   it.each([
@@ -184,7 +184,7 @@ describe('component: UnitInput', () => {
     input.trigger('blur');
 
     expect(wrapper.emitted('update:value')).toBeTruthy();
-    expect(wrapper.emitted('update:value')[3][0]).toBe(value);
+    expect(wrapper.emitted('update:value')[0][0]).toBe(value);
   });
 
   describe.each([
@@ -207,7 +207,7 @@ describe('component: UnitInput', () => {
       expect(inputElement.value).toBe('123');
     });
 
-    it.each(['input', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
+    it.each(['update:value', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
       const wrapper = mount(UnitInput, {
         props: {
           value: '0',
@@ -248,7 +248,6 @@ describe('component: UnitInput', () => {
       const input = wrapper.find('input');
 
       await input.trigger('update:value');
-      await input.trigger('input');
 
       expect(input.element.value).toBe('123');
     });

package/components/formatter/LiveDate.vue

@@ -151,7 +151,9 @@ export default {
   </span>
   <span
     v-else-if="showTooltip"
-    v-clean-tooltip="{content: title, placement: tooltipPlacement}"
+    v-clean-tooltip="{content: title, placement: tooltipPlacement, triggers: ['hover', 'touch', 'focus'] }"
+    v-stripped-aria-label="title"
+    tabindex="0"
     class="live-date"
   >
     {{ suffixedLabel }}

package/components/formatter/ServiceType.vue

@@ -16,11 +16,19 @@ export default {
       default: () => {}
     },
   },
-  data() {
-    const cloned = this.getLabel(this.value.toLowerCase());
-    const headless = this.value === 'ClusterIP' && this.row?.spec?.clusterIP === 'None' ? this.getLabel('headless') : undefined;
 
-    return { translated: cloned, headless };
+  computed: {
+    translated() {
+      const value = this.value;
+
+      return this.getLabel(value.toLocaleLowerCase());
+    },
+    clusterIp() {
+      return this.row?.spec?.clusterIP;
+    },
+    headless() {
+      return this.value === 'ClusterIP' && this.clusterIp === 'None' ? this.getLabel('headless') : undefined;
+    }
   },
 
   methods: {

package/components/formatter/WorkloadHealthScale.vue

@@ -189,7 +189,8 @@ export default {
       :aria-label="t('workload.healthScaleToggle')"
       :aria-expanded="expanded"
       @click="expanded = !expanded"
-      @keyup.enter.space="expanded = !expanded"
+      @keyup.enter="expanded = !expanded"
+      @keydown.space.prevent="expanded = !expanded"
     >
       <ProgressBarMulti
         v-if="parts"

package/components/nav/Header.vue

@@ -81,7 +81,7 @@ export default {
       extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
       ctx:                    this,
       showImportModal:        false,
-      showSearchModal:        false,
+      showSearchModal:        false
     };
   },
 
@@ -403,6 +403,7 @@ export default {
     <div>
       <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
     </div>
+
     <div
       class="menu-spacer"
       :class="{'isSingleProduct': isSingleProduct }"
@@ -410,20 +411,25 @@ export default {
       <router-link
         v-if="isSingleProduct && !isRancherInHarvester"
         :to="singleProductLogoRoute"
+        role="link"
+        :alt="t('branding.logos.home')"
       >
         <BrandImage
           v-if="isSingleProduct.supportCustomLogo && isHarvester"
           class="side-menu-logo"
           file-name="harvester.svg"
           :support-custom-logo="true"
+          :alt="t('branding.logos.label')"
         />
         <img
           v-else
           class="side-menu-logo"
           :src="isSingleProduct.logo"
+          :alt="t('branding.logos.label')"
         >
       </router-link>
     </div>
+
     <div
       v-if="!simple"
       ref="product"
@@ -450,6 +456,7 @@ export default {
             v-if="currentCluster"
             :cluster="currentCluster"
             class="mr-10"
+            :alt="t('branding.logos.label')"
           />
           <div
             v-if="currentCluster"
@@ -462,6 +469,7 @@ export default {
             v-if="currentCluster"
             :cluster="currentCluster"
             class="ml-10"
+            :alt="t('branding.logos.label')"
           />
           <div
             v-if="!currentCluster"
@@ -470,6 +478,7 @@ export default {
             <BrandImage
               class="side-menu-logo-img"
               file-name="rancher-logo.svg"
+              :alt="t('branding.logos.label')"
             />
           </div>
         </template>
@@ -484,12 +493,14 @@ export default {
           :src="currentProduct.iconHeader"
           class="cluster-os-logo mr-10"
           style="width: 44px; height: 36px;"
+          :alt="t('branding.logos.label')"
         >
         <div class="product-name">
           {{ prod }}
         </div>
       </div>
     </div>
+
     <div
       v-else
       class="simple-title"
@@ -507,8 +518,9 @@ export default {
       >
         <BrandImage
           class="side-menu-logo-img"
-          data-testid="header-side-menu__brand-img"
+          data-testid="header__brand-img"
           file-name="rancher-logo.svg"
+          :alt="t('branding.logos.label')"
         />
       </div>
     </div>
@@ -536,6 +548,9 @@ export default {
             type="button"
             class="btn header-btn role-tertiary"
             data-testid="header-action-import-yaml"
+            role="button"
+            tabindex="0"
+            :aria-label="t('nav.import')"
             @click="openImport()"
           >
             <i class="icon icon-upload icon-lg" />
@@ -563,6 +578,9 @@ export default {
             :disabled="!shellEnabled"
             type="button"
             class="btn header-btn role-tertiary"
+            role="button"
+            tabindex="0"
+            :aria-label="t('nav.shellShortcut', {key:''})"
             @shortkey="currentCluster.openShell()"
             @click="currentCluster.openShell()"
           >
@@ -576,6 +594,9 @@ export default {
             type="button"
             class="btn header-btn role-tertiary"
             data-testid="btn-download-kubeconfig"
+            role="button"
+            tabindex="0"
+            :aria-label="t('nav.kubeconfig.download')"
             @click="currentCluster.downloadKubeConfig()"
           >
             <i class="icon icon-file icon-lg" />
@@ -588,6 +609,9 @@ export default {
             type="button"
             class="btn header-btn role-tertiary"
             data-testid="btn-copy-kubeconfig"
+            role="button"
+            tabindex="0"
+            :aria-label="t('nav.kubeconfig.copy')"
             @click="copyKubeConfig($event)"
           >
             <i
@@ -603,11 +627,15 @@ export default {
 
         <button
           v-if="showSearch"
+          id="header-btn-search"
           v-clean-tooltip="t('nav.resourceSearch.toolTip', {key: searchShortcut})"
           v-shortkey="{windows: ['ctrl', 'k'], mac: ['meta', 'k']}"
           type="button"
           class="btn header-btn role-tertiary"
           data-testid="header-resource-search"
+          role="button"
+          tabindex="0"
+          :aria-label="t('nav.resourceSearch.toolTip', {key: ''})"
           @shortkey="openSearch()"
           @click="openSearch()"
         >
@@ -619,6 +647,8 @@ export default {
           name="searchModal"
           width="50%"
           height="auto"
+          :trigger-focus-trap="true"
+          return-focus-selector="#header-btn-search"
           @close="hideSearch()"
         >
           <Jump @closeSearch="hideSearch()" />
@@ -639,6 +669,9 @@ export default {
           type="button"
           class="btn header-btn role-tertiary"
           :data-testid="`extension-header-action-${ action.labelKey || action.label }`"
+          role="button"
+          tabindex="0"
+          :aria-label="action.label"
           @shortkey="handleExtensionAction(action, $event)"
           @click="handleExtensionAction(action, $event)"
         >

package/components/nav/HeaderPageActionMenu.vue

@@ -1,51 +1,22 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useStore } from 'vuex';
-import {
-  RcDropdown,
-  RcDropdownItem,
-  RcDropdownSeparator,
-  RcDropdownTrigger
-} from '@components/RcDropdown';
-
-const isPageActionMenuOpen = ref(false);
-
-const showPageActionsMenu = (show: boolean) => {
-  isPageActionMenuOpen.value = show;
-};
+import { RcDropdownMenu } from '@components/RcDropdown';
 
 const store = useStore();
 const pageActions = computed(() => store.getters.pageActions);
-const pageAction = (action: string) => {
+const pageAction = (_event: Event, action: string) => {
   store.dispatch('handlePageAction', action);
-  showPageActionsMenu(false);
 };
 </script>
 
 <template>
-  <rc-dropdown :aria-label="t('nav.actionMenu.label')">
-    <rc-dropdown-trigger
-      tertiary
-      data-testid="page-actions-menu"
-      :aria-label="t('nav.actionMenu.button.label')"
-    >
-      <i class="icon icon-actions" />
-    </rc-dropdown-trigger>
-    <template #dropdownCollection>
-      <template
-        v-for="(a) in pageActions"
-        :key="a.label"
-      >
-        <rc-dropdown-item
-          v-if="!a.separator"
-          @click="pageAction(a)"
-        >
-          {{ a.labelKey ? t(a.labelKey) : a.label }}
-        </rc-dropdown-item>
-        <rc-dropdown-separator
-          v-else
-        />
-      </template>
-    </template>
-  </rc-dropdown>
+  <rc-dropdown-menu
+    :options="pageActions"
+    :button-aria-label="t('nav.actionMenu.label')"
+    :dropdown-aria-label="t('nav.actionMenu.button.label')"
+    data-testid="page-actions-menu-action-button"
+    button-role="tertiary"
+    @select="pageAction"
+  />
 </template>

package/components/nav/Jump.vue

@@ -64,7 +64,7 @@ export default {
 
         g.hidden = !!hidden;
       });
-    },
+    }
   },
 };
 </script>
@@ -76,6 +76,8 @@ export default {
       v-model="value"
       :placeholder="t('nav.resourceSearch.placeholder')"
       class="search"
+      role="textbox"
+      :aria-label="t('nav.resourceSearch.label')"
       @keyup.esc="$emit('closeSearch')"
     >
     <div class="results">
@@ -103,13 +105,17 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .search, .search:hover, .search:focus {
+  .search, .search:hover {
     position: relative;
     background-color: var(--dropdown-bg);
     border-radius: 0;
     box-shadow: none;
   }
 
+  .search:focus-visible {
+    outline-offset: -2px;
+  }
+
   .results {
     margin-top: -1px;
     overflow-y: auto;

package/components/nav/NamespaceFilter.vue

@@ -894,12 +894,13 @@ export default {
     display: inline-block;
 
     .ns-glass {
-      height: 100vh;
+      top: 0;
+      bottom: 0;
       left: 0;
+      right: 0;
       opacity: 0;
-      position: absolute;
-      top: 0;
-      width: 100vw;
+      position: fixed;
+
       z-index: z-index('overContent');
     }
 

package/components/nav/Pinned.vue

@@ -37,7 +37,7 @@ export default {
     class="pin icon"
     :class="{'icon-pin-outlined': !pinned, 'icon-pin': pinned}"
     aria-role="button"
-    :aria-label="`${t('nav.ariaLabel.pinCluster')} ${ cluster.label }`"
+    :aria-label="t('nav.ariaLabel.pinCluster', { cluster: cluster.label })"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"
     @keydown.space.prevent="toggle"

package/components/nav/TopLevelMenu.helper.ts

@@ -37,7 +37,7 @@ type ProvCluster = {
 }
 
 /**
- * Order
+ * Order of v1 mgmt clusters
  * 1. local cluster - https://github.com/rancher/dashboard/issues/10975
  * 2. working clusters
  * 3. name
@@ -47,10 +47,10 @@ const DEFAULT_SORT: Array<PaginationSort> = [
     asc:   false,
     field: 'spec.internal',
   },
-  // {
-  //   asc:   true,
-  //   field: 'status.conditions[0].status' // Pending API changes https://github.com/rancher/rancher/issues/48092
-  // },
+  {
+    asc:   false,
+    field: 'status.connected'
+  },
   {
     asc:   true,
     field: 'spec.displayName',