@rancher/shell 3.0.5-rc.1 → 3.0.5-rc.3

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

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import { defineComponent } from 'vue';
 import Select from '@shell/components/form/Select.vue';
 
@@ -64,4 +64,37 @@ describe('select.vue', () => {
     // from the library
     expect(vSelectInput.attributes('aria-label')).toBe('-');
   });
+
+  it('pressing space key while focused on search should not prevent event propagation', async() => {
+    const value = 'value-1';
+    const options = [
+      { label: 'label-1', value: 'value-1' },
+      { label: 'label-2', value: 'value-2' },
+    ];
+
+    const wrapper = mount(SelectComponent, {
+      props: {
+        value,
+        label:      'some-label',
+        options,
+        searchable: true
+      }
+    });
+
+    const mockEvent = { preventDefault: jest.fn() };
+    const spyFocus = jest.spyOn(wrapper.vm, 'focusSearch');
+    const spyPreventDefault = jest.spyOn(mockEvent, 'preventDefault');
+
+    const input = wrapper.find('.unlabeled-select');
+
+    // open unlabeled-select first
+    await input.trigger('keydown.enter');
+
+    // mimic pressing space on search box inside v-select
+    await input.trigger('keydown.space', mockEvent);
+
+    // eslint-disable-next-line
+    expect(spyFocus).toHaveBeenCalled();
+    expect(spyPreventDefault).not.toHaveBeenCalled();
+  });
 });

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

@@ -5,12 +5,34 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { defineComponent } from 'vue';
 
 describe('component: UnitInput', () => {
-  it('should renders', () => {
+  it('should render the UnitInput component with basic config', () => {
     const wrapper = mount(UnitInput, { props: { value: 1 } });
 
     expect(wrapper.isVisible()).toBe(true);
   });
 
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const baseUnit = 'B';
+    const wrapper = mount(UnitInput,
+      {
+        props: {
+          value:    1,
+          baseUnit,
+          disabled: true
+        }
+      }
+    );
+
+    const inputElement = wrapper.find('input');
+    const unitDisplay = wrapper.find('.addon');
+
+    expect(wrapper.findComponent(LabeledInput as any).exists()).toBe(true);
+    expect(inputElement.attributes('aria-describedby')).toBe(wrapper.vm.describedById);
+    expect(unitDisplay.attributes('id')).toBe(wrapper.vm.describedById);
+    expect(inputElement.attributes('aria-disabled')).toBe('true');
+    expect(inputElement.attributes('disabled')).toBeDefined();
+  });
+
   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');

package/components/formatter/ClusterLink.vue

@@ -70,10 +70,10 @@ export default {
       data-testid="unavailable-machines-alert-icon"
     />
     <i
-      v-if="row.rkeTemplateUpgrade"
-      v-clean-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"
-      class="template-upgrade-icon icon-alert icon"
-      data-testid="rke-template-upgrade-alert-icon"
+      v-if="row.isRke1"
+      v-clean-tooltip="t('cluster.rke1Unsupported')"
+      class="rke1-unsupported-icon icon-warning icon"
+      data-testid="rke1-unsupported-icon"
     />
     <i
       v-if="row.hasError && statusErrorConditions.length > 0"
@@ -106,12 +106,9 @@ export default {
   .mytooltip ul {
     outline: 1px dashed red;
   }
-  .template-upgrade-icon {
-    border: 1px solid var(--warning);
-    border-radius: 50%;
+  .rke1-unsupported-icon {
     color: var(--warning);
     margin-left: 4px;
     font-size: 14px;
-    padding: 2px;
   }
 </style>

package/components/formatter/Description.vue

@@ -0,0 +1,30 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     String,
+      required: true,
+    }
+  },
+};
+</script>
+<template>
+  <span
+    v-clean-tooltip="{content: value, placement: 'auto', popperClass: ['description-tooltip']}"
+    class="description-text"
+  >
+    {{ value }}
+  </span>
+</template>
+<style lang="scss">
+  .description-text {
+    display: block;
+    width: inherit;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .description-tooltip {
+    overflow-wrap: break-word;
+  }
+</style>

package/components/formatter/__tests__/ClusterLink.test.ts

@@ -3,7 +3,6 @@ import ClusterLink from '@shell/components/formatter/ClusterLink.vue';
 
 describe('component: ClusterLink', () => {
   const UNAVAILABLE_MACHINES_ICON_SELECTOR = '[data-testid="unavailable-machines-alert-icon"]';
-  const TEMPLATE_UPGRADE_ICON_SELECTOR = '[data-testid="rke-template-upgrade-alert-icon"]';
   const CONDITION_HAS_ERROR_ICON_SELECTOR = '[data-testid="conditions-has-error-icon"]';
 
   describe('unavailable machines alert icon', () => {
@@ -20,10 +19,9 @@ describe('component: ClusterLink', () => {
         const wrapper = mount(ClusterLink, {
           props: {
             row: {
-              hasError:           false,
-              status:             {},
+              hasError: false,
+              status:   {},
               unavailableMachines,
-              rkeTemplateUpgrade: undefined
             },
             reference: 'any',
             value:     'any'
@@ -36,34 +34,6 @@ describe('component: ClusterLink', () => {
     );
   });
 
-  describe('template upgrade alert icon', () => {
-    const testCases = [
-      [undefined, false],
-      ['any', true],
-    ];
-
-    it.each(testCases)(
-      'should show/hide properly based on rkeTemplateUpgrade',
-      (rkeTemplateUpgrade, expected) => {
-        const wrapper = mount(ClusterLink, {
-          props: {
-            row: {
-              hasError:            false,
-              status:              {},
-              unavailableMachines: 0,
-              rkeTemplateUpgrade
-            },
-            reference: 'any',
-            value:     'any'
-          }
-        });
-        const el = wrapper.find(TEMPLATE_UPGRADE_ICON_SELECTOR);
-
-        expect(el.exists()).toBe(expected);
-      }
-    );
-  });
-
   describe('conditions has error icon', () => {
     const MOCKED_CONDITIONS_1 = [{
       status: '', type: 'Ready', reason: 'Waiting', error: true // When the only existing error has a type "Ready" and reason "Waiting"

package/components/nav/Group.vue

@@ -99,6 +99,11 @@ export default {
     },
 
     groupSelected() {
+      // Can not click on groups that are fixed open
+      if (this.fixedOpen) {
+        return;
+      }
+
       // Don't auto-select first group entry if we're already expanded and contain the currently-selected nav item
       if (this.hasActiveRoute() && this.isExpanded) {
         return;
@@ -219,14 +224,14 @@ export default {
 <template>
   <div
     class="accordion"
-    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive}"
+    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive }"
   >
     <div
       v-if="showHeader"
       class="header"
-      :class="{'active': isOverview, 'noHover': !canCollapse}"
+      :class="{'active': isOverview, 'noHover': !canCollapse || fixedOpen}"
       role="button"
-      tabindex="0"
+      :tabindex="fixedOpen ? -1 : 0"
       :aria-label="group.labelDisplay || group.label || ''"
       @click="groupSelected()"
       @keyup.enter="groupSelected()"
@@ -274,7 +279,7 @@ export default {
           v-if="child.divider"
           :key="idx"
         >
-          <hr>
+          <hr role="none">
         </li>
         <!-- <div v-else-if="child[childrenKey] && hideGroup(child[childrenKey])" :key="child.name">
           HIDDEN
@@ -372,6 +377,9 @@ export default {
       &:hover:not(.active) {
         background-color: var(--nav-hover);
       }
+      &:hover:not(.active).noHover {
+        background-color: inherit;
+      }
     }
   }
 

package/components/nav/Header.vue

@@ -5,7 +5,6 @@ import { MANAGEMENT, NORMAN, STEVE } from '@shell/config/types';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { ucFirst } from '@shell/utils/string';
 import { isAlternate, isMac } from '@shell/utils/platform';
-import Import from '@shell/components/Import';
 import BrandImage from '@shell/components/BrandImage';
 import { getProduct, getVendor } from '@shell/config/private-label';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
@@ -16,7 +15,6 @@ import NamespaceFilter from './NamespaceFilter';
 import WorkspaceSwitcher from './WorkspaceSwitcher';
 import TopLevelMenu from './TopLevelMenu';
 
-import Jump from './Jump';
 import { allHash } from '@shell/utils/promise';
 import { ActionLocation, ExtensionPoint } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
@@ -36,9 +34,7 @@ export default {
   components: {
     NamespaceFilter,
     WorkspaceSwitcher,
-    Import,
     TopLevelMenu,
-    Jump,
     BrandImage,
     ClusterBadge,
     ClusterProviderIcon,
@@ -79,9 +75,7 @@ export default {
       LOGGED_OUT,
       navHeaderRight:         null,
       extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
-      ctx:                    this,
-      showImportModal:        false,
-      showSearchModal:        false
+      ctx:                    this
     };
   },
 
@@ -316,19 +310,24 @@ export default {
     },
 
     openImport() {
-      this.showImportModal = true;
-    },
-
-    closeImport() {
-      this.showImportModal = false;
+      this.$store.dispatch('cluster/promptModal', {
+        component:      'ImportDialog',
+        modalWidth:     '75%',
+        height:         'auto',
+        styles:         'max-height: 90vh;',
+        componentProps: { cluster: this.currentCluster }
+      });
     },
 
     openSearch() {
-      this.showSearchModal = true;
-    },
-
-    hideSearch() {
-      this.showSearchModal = false;
+      this.$store.dispatch('cluster/promptModal', {
+        component:           'SearchDialog',
+        testId:              'search-modal',
+        modalWidth:          '50%',
+        height:              'auto',
+        styles:              'max-height: 90vh;',
+        returnFocusSelector: '#header-btn-search'
+      });
     },
 
     checkClusterName() {
@@ -555,20 +554,6 @@ export default {
           >
             <i class="icon icon-upload icon-lg" />
           </button>
-          <app-modal
-            v-if="showImportModal"
-            class="import-modal"
-            name="importModal"
-            width="75%"
-            height="auto"
-            styles="max-height: 90vh;"
-            @close="closeImport"
-          >
-            <Import
-              :cluster="currentCluster"
-              @close="closeImport"
-            />
-          </app-modal>
 
           <button
             v-if="showKubeShell"
@@ -641,18 +626,6 @@ export default {
         >
           <i class="icon icon-search icon-lg" />
         </button>
-        <app-modal
-          v-if="showSearch && showSearchModal"
-          class="search-modal"
-          name="searchModal"
-          width="50%"
-          height="auto"
-          :trigger-focus-trap="true"
-          return-focus-selector="#header-btn-search"
-          @close="hideSearch()"
-        >
-          <Jump @closeSearch="hideSearch()" />
-        </app-modal>
       </div>
 
       <!-- Extension header actions -->