@rancher/shell 3.0.4 → 3.0.5-rc.2

package/components/form/WorkloadPorts.vue

@@ -44,25 +44,9 @@ export default {
   },
 
   data() {
-    const rows = clone(this.value || []).map((row) => {
-      row._showHost = false;
-      row._serviceType = row._serviceType || '';
-      row._name = row.name ? `${ row.name }` : `${ row.containerPort }${ row.protocol.toLowerCase() }${ row.hostPort || row._listeningPort || '' }`;
-      if (row.hostPort || row.hostIP) {
-        row._showHost = true;
-      }
-
-      row._ipam = '';
-
-      return row;
-    });
-
-    // show host port column if existing port data has any host ports defined
-    const showHostPorts = !!rows.some((row) => !!row.hostPort);
-
     return {
-      rows,
-      showHostPorts,
+      rows:                [],
+      showHostPorts:       false,
       workloadPortOptions: ['TCP', 'UDP']
     };
   },
@@ -168,6 +152,22 @@ export default {
   },
 
   created() {
+    const rows = clone(this.value || []).map((row) => {
+      row._showHost = false;
+      row._serviceType = row._serviceType || '';
+      row._name = row.name ? `${ row.name }` : `${ row.containerPort }${ row.protocol.toLowerCase() }${ row.hostPort || row._listeningPort || '' }`;
+      if (row.hostPort || row.hostIP) {
+        row._showHost = true;
+      }
+
+      row._ipam = '';
+
+      return row;
+    });
+
+    this.rows = rows;
+    // show host port column if existing port data has any host ports defined
+    this.showHostPorts = !!rows.some((row) => !!row.hostPort);
     this.queueUpdate = debounce(this.update, 500);
     this.rows.map((row) => {
       this.setServiceType(row);

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

@@ -4,6 +4,8 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 import { DefaultProps } from 'vue/types/options';
 
+jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
+
 describe('the ArrayList', () => {
   it('is empty', () => {
     const wrapper = mount(ArrayList, {
@@ -56,12 +58,13 @@ describe('the ArrayList', () => {
     });
 
     jest.useFakeTimers();
-    await (wrapper.get('[data-testid="remove-item-1"]').element as HTMLElement).click();
+    await (wrapper.get('[data-testid="array-list-remove-item-1"]').element as HTMLElement).click();
     jest.advanceTimersByTime(50);
     jest.useRealTimers();
 
-    expect(wrapper.find('[data-testid="remove-item-2"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="array-list-remove-item-2"]').exists()).toBe(false);
     expect((wrapper.emitted('remove')![0][0] as any).row.value).toStrictEqual('string 1');
+    expect(wrapper.vm.rows).toStrictEqual([{ value: 'string 0' }, { value: 'string 2' }]);
     expect(wrapper.emitted('update:value')![0][0]).toStrictEqual(['string 0', 'string 2']);
   });
 

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

@@ -24,4 +24,39 @@ describe('colorInput.vue', () => {
     expect(colorWrapper.classes()).not.toContain('disabled');
     expect(Object.keys(colorInput.attributes())).not.toContain('disabled');
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const label = 'some-label';
+    const describeById = 'some-id';
+
+    const wrapper = shallowMount(ColorInput, {
+      props: { label },
+      attrs: { 'aria-describedby': describeById }
+    });
+
+    const colorInput = wrapper.find('input');
+    const ariaDisabled = colorInput.attributes('aria-disabled');
+    const ariaLabel = colorInput.attributes('aria-label');
+    const ariaDescribedBy = colorInput.attributes('aria-describedby');
+
+    expect(ariaDisabled).toBe('false');
+    expect(ariaLabel).toBe(label);
+    expect(ariaDescribedBy).toBe(describeById);
+  });
+
+  it('a11y: adding aria-label ($attrs) from parent should override label-based aria-label', () => {
+    const inputLabel = 'some-label';
+    const overrideLabel = 'some-override-label';
+
+    const wrapper = shallowMount(ColorInput, {
+      props: { label: inputLabel },
+      attrs: { 'aria-label': overrideLabel }
+    });
+
+    const colorInput = wrapper.find('input');
+    const ariaLabel = colorInput.attributes('aria-label');
+
+    expect(ariaLabel).toBe(overrideLabel);
+    expect(ariaLabel).not.toBe(inputLabel);
+  });
 });

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

@@ -214,4 +214,44 @@ describe('component: LabeledSelect', () => {
       expect(wrapper.vm.$data.myValue).toStrictEqual(expectation);
     });
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const label = 'Foo';
+    const value = 'foo';
+    const ariaDescribedById = 'some-described-by-id';
+    const itemLabel = 'some-label';
+
+    const wrapper = mount(LabeledSelect, {
+      props: {
+        value,
+        label:   itemLabel,
+        options: [
+          { label, value },
+        ],
+        required: true
+      },
+      attrs: { 'aria-describedby': ariaDescribedById }
+    });
+
+    const labeledSelectContainer = wrapper.find('.labeled-select');
+    const ariaExpanded = labeledSelectContainer.attributes('aria-expanded');
+    const ariaDescribedBy = labeledSelectContainer.attributes('aria-describedby');
+    const ariaRequired = labeledSelectContainer.attributes('aria-required');
+    const containerId = labeledSelectContainer.attributes('id');
+    const labelFor = wrapper.find('label').attributes('for');
+
+    const vSelectInput = wrapper.find('.v-select');
+
+    expect(ariaExpanded).toBe('false');
+    expect(ariaDescribedBy).toBe(ariaDescribedById);
+    expect(ariaRequired).toBe('true');
+    expect(containerId).toBe(wrapper.vm.labeledSelectLabelId);
+    expect(labelFor).toBe(wrapper.vm.labeledSelectLabelId);
+
+    // make sure it's hardcoded to a "neutral" value so that
+    // in the current architecture of the component
+    // screen readers won't pick up the default "Select option" aria-label
+    // from the library
+    expect(vSelectInput.attributes('aria-label')).toBe('-');
+  });
 });

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

@@ -6,9 +6,9 @@ import { nextTick } from 'vue';
 describe('component: MatchExpressions', () => {
   it('should display all the inputs', () => {
     const wrapper = mount(MatchExpressions, {
-      props: { mode: _CREATE },
-      data:  () => ({
-        rules: [
+      props: {
+        mode:  _CREATE,
+        value: [
           {
             id:       '123',
             key:      '123',
@@ -16,7 +16,7 @@ describe('component: MatchExpressions', () => {
             values:   '123'
           }
         ]
-      })
+      },
     });
 
     const inputWraps = wrapper.findAll('[data-testid^=input-match-expression-]');
@@ -29,9 +29,9 @@ describe('component: MatchExpressions', () => {
     'values',
   ])('should emit an update on %p input', async(field) => {
     const wrapper = mount(MatchExpressions, {
-      props: { mode: _CREATE },
-      data:  () => ({
-        rules: [
+      props: {
+        mode:  _CREATE,
+        value: [
           {
             id:       '123',
             key:      '123',
@@ -39,7 +39,7 @@ describe('component: MatchExpressions', () => {
             values:   '123'
           }
         ]
-      })
+      },
     });
     const input = wrapper.find(`[data-testid="input-match-expression-${ field }-0"]`).find('input');
     const newValue = 123;
@@ -54,9 +54,9 @@ describe('component: MatchExpressions', () => {
     'operator',
   ])('should emit an update on %p selection change', async(field) => {
     const wrapper = mount(MatchExpressions, {
-      props: { mode: _CREATE },
-      data:  () => ({
-        rules: [
+      props: {
+        mode:  _CREATE,
+        value: [
           {
             id:       '123',
             key:      '123',
@@ -64,7 +64,7 @@ describe('component: MatchExpressions', () => {
             values:   '123'
           }
         ]
-      })
+      },
     });
 
     const select = wrapper.find(`[data-testid="input-match-expression-${ field }-0"]`);

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

@@ -1,10 +1,18 @@
 import { mount } from '@vue/test-utils';
 import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
+import { createStore } from 'vuex';
 
 describe('component: NameNsDescription', () => {
   // Accessing to computed value due code complexity
   it('should map namespaces to options', () => {
     const namespaceName = 'test';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({ [namespaceName]: true }),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const result = [
       {
         label: namespaceName,
@@ -13,20 +21,21 @@ describe('component: NameNsDescription', () => {
     ];
     const wrapper = mount(NameNsDescription, {
       props: {
-        value:   {},
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      {}
+        },
         mode:    'create',
         cluster: {},
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $store: {
             dispatch: jest.fn(),
             getters:  {
-              namespaces:          jest.fn(),
-              allowedNamespaces:   () => ({ [namespaceName]: true }),
-              currentStore:        () => 'cluster',
-              'cluster/schemaFor': jest.fn(),
-              'i18n/t':            jest.fn(),
+              namespaces: jest.fn(),
+              'i18n/t':   jest.fn(),
             },
           },
         },
@@ -38,27 +47,35 @@ describe('component: NameNsDescription', () => {
 
   it('should emit in case of new namespace', () => {
     const namespaceName = 'test';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({ [namespaceName]: true }),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const newNamespaceName = 'bananas';
     const wrapper = mount(NameNsDescription, {
       props: {
-        value: { metadata: {} },
-        mode:  'create',
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      {}
+        },
+        mode: 'create',
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $store: {
             dispatch: jest.fn(),
             getters:  {
               namespaces:                         jest.fn(),
-              allowedNamespaces:                  () => ({ [namespaceName]: true }),
               'customizations/getPreviewCluster': {
                 ready:   true,
                 isLocal: false,
                 badge:   {},
               },
-              currentStore:        () => 'cluster',
-              'cluster/schemaFor': jest.fn(),
-              'i18n/t':            jest.fn(),
+              'i18n/t': jest.fn(),
             },
           },
         },
@@ -69,4 +86,88 @@ describe('component: NameNsDescription', () => {
 
     expect(wrapper.emitted().isNamespaceNew?.[0][0]).toBe(true);
   });
+
+  it('renders the name input with the expected value', () => {
+    const namespaceName = 'test';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({ [namespaceName]: true }),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
+    const wrapper = mount(NameNsDescription, {
+      props: {
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      { name: 'Default' }
+        },
+        mode: 'create',
+      },
+      global: {
+        provide: { store },
+        mocks:   {
+          $store: {
+            dispatch: jest.fn(),
+            getters:  {
+              namespaces:                         jest.fn(),
+              'customizations/getPreviewCluster': {
+                ready:   true,
+                isLocal: false,
+                badge:   {},
+              },
+              'i18n/t': jest.fn(),
+            },
+          },
+        },
+      },
+    });
+
+    const nameInput = wrapper.find('[data-testid="NameNsDescriptionNameInput"]');
+
+    expect(nameInput.element.value).toBe('Default');
+  });
+
+  it('sets the name using the nameKey prop', () => {
+    const namespaceName = 'test';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({ [namespaceName]: true }),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
+    const wrapper = mount(NameNsDescription, {
+      props: {
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      {},
+          spec:          { displayName: 'Default' }
+        },
+        mode:    'create',
+        nameKey: 'spec.displayName'
+      },
+      global: {
+        provide: { store },
+        mocks:   {
+          $store: {
+            dispatch: jest.fn(),
+            getters:  {
+              namespaces:                         jest.fn(),
+              'customizations/getPreviewCluster': {
+                ready:   true,
+                isLocal: false,
+                badge:   {},
+              },
+              'i18n/t': jest.fn(),
+            },
+          },
+        },
+      },
+    });
+
+    const nameInput = wrapper.find('[data-testid="NameNsDescriptionNameInput"]');
+
+    expect(nameInput.element.value).toBe('Default');
+  });
 });

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

@@ -6,18 +6,20 @@ import { DefaultProps } from 'vue/types/options';
 
 describe('component: Probe', () => {
   describe.each([
-    ['HTTPS', ['port', 'path']],
-    ['tcp', ['socket']],
-    ['exec', ['command']],
-  ])('given kind %p', (kind, extraFields) => {
+    [{ httpGet: { scheme: 'https' } }, ['port', 'path']],
+    [{ tcpSocket: {} }, ['socket']],
+    [{ exec: {} }, ['command']],
+  ])('given kind %p', (value, extraFields) => {
     it.each([
       ...extraFields,
       'successThreshold',
       'failureThreshold',
     ])('should emit an update on %p input', (field) => {
       const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-        props: { mode: _EDIT },
-        data:  () => ({ kind })
+        props: {
+          mode: _EDIT,
+          value,
+        },
       });
       const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
       const newValue = 123;
@@ -33,8 +35,10 @@ describe('component: Probe', () => {
       'timeoutSeconds',
     ])('should emit an update on %p input and blur', (field) => {
       const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-        props: { mode: _EDIT },
-        data:  () => ({ kind })
+        props: {
+          mode: _EDIT,
+          value
+        },
       });
       const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
       const newValue = 123;

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

@@ -1,6 +1,18 @@
 import { mount } from '@vue/test-utils';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import SSHKnownHosts from '@shell/components/form/SSHKnownHosts/index.vue';
+import { createStore } from 'vuex';
+
+jest.mock('focus-trap', () => {
+  return {
+    createFocusTrap: jest.fn().mockImplementation(() => {
+      return {
+        activate:   jest.fn(),
+        deactivate: jest.fn(),
+      };
+    }),
+  };
+});
 
 describe('component: SSHKnownHosts', () => {
   it.each([
@@ -42,18 +54,26 @@ describe('component: SSHKnownHosts', () => {
   });
 
   it('mode edit: should open edit dialog', async() => {
+    const actions = { 'management/promptModal': jest.fn() };
+
     const wrapper = mount(SSHKnownHosts, {
       props: {
         mode:  _EDIT,
         value: '',
+      },
+      global: {
+        mocks: {
+          $store:      createStore({ actions }),
+          $fetchState: {}
+        },
+        stubs: { transition: false }
       }
     });
 
     const knownSshHostsOpenDialog = wrapper.find('[data-testid="input-known-ssh-hosts_open-dialog"]');
-    const editDialog = wrapper.vm.$refs['editDialog'] as any;
 
     await knownSshHostsOpenDialog.trigger('click');
 
-    expect(editDialog.showModal).toBe(true);
+    expect(actions['management/promptModal']).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ component: 'KnownHostsEditDialog' }));
   });
 });

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

@@ -27,4 +27,41 @@ describe('select.vue', () => {
     // eslint-disable-next-line no-console
     expect(console.warn).not.toHaveBeenCalled();
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const label = 'Foo';
+    const value = 'foo';
+    const ariaDescribedById = 'some-described-by-id';
+    const ariaLabelText = 'some-aria-label';
+
+    const wrapper = shallowMount(SelectComponent, {
+      props: {
+        value,
+        options: [
+          { label, value },
+        ],
+      },
+      attrs: {
+        'aria-describedby': ariaDescribedById,
+        'aria-label':       ariaLabelText,
+      }
+    });
+
+    const labeledSelectContainer = wrapper.find('.unlabeled-select');
+    const ariaExpanded = labeledSelectContainer.attributes('aria-expanded');
+    const ariaDescribedBy = labeledSelectContainer.attributes('aria-describedby');
+    const ariaLabel = labeledSelectContainer.attributes('aria-label');
+
+    const vSelectInput = wrapper.find('.inline');
+
+    expect(ariaExpanded).toBe('false');
+    expect(ariaDescribedBy).toBe(ariaDescribedById);
+    expect(ariaLabel).toBe(ariaLabelText);
+
+    // make sure it's hardcoded to a "neutral" value so that
+    // in the current architecture of the component
+    // screen readers won't pick up the default "Select option" aria-label
+    // from the library
+    expect(vSelectInput.attributes('aria-label')).toBe('-');
+  });
 });

package/components/formatter/InternalExternalIP.vue

@@ -28,6 +28,7 @@ export default {
   <span>
     <template v-if="isIp(row.externalIp)">
       {{ row.externalIp }} <CopyToClipboard
+        :aria-label="t('internalExternalIP.copyExternalIp')"
         label-as="tooltip"
         :text="row.externalIp"
         class="icon-btn"
@@ -43,6 +44,7 @@ export default {
     </template>
     <template v-else-if="isIp(row.internalIp)">
       {{ row.internalIp }}<CopyToClipboard
+        :aria-label="t('internalExternalIP.copyInternalIp')"
         label-as="tooltip"
         :text="row.internalIp"
         class="icon-btn"

package/components/formatter/SecretData.vue

@@ -13,17 +13,25 @@ export default {
     },
   },
 
-  data() {
+  beforeMount() {
     if (this.value.issuer) {
       const { cn, notAfter, sans = [] } = this.value;
 
-      return {
-        cn, expiration: notAfter, sans, isTLS: true
-      };
-    } else {
-      return { isTLS: false };
+      this.expiration = notAfter;
+      this.sans = sans;
+      this.cn = cn;
+      this.isTLS = true;
     }
   },
+
+  data() {
+    return {
+      isTLS:      false,
+      cn:         null,
+      sans:       [],
+      expiration: null,
+    };
+  },
   computed: {
     // use 'text-warning' or 'text-error' classes if the cert is <8 days from expiring or expired respectively
     dateClass() {
@@ -43,7 +51,12 @@ export default {
 
 <template>
   <div v-if="isTLS">
-    <t k="secret.certificate.cn" /> {{ cn }} <span v-if="row.unrepeatedSans && row.unrepeatedSans.length">{{ t('secret.certificate.plusMore', {n:row.unrepeatedSans.length}) }}</span><br>
+    <t k="secret.certificate.cn" />
+    {{ cn }}
+    <span v-if="row.unrepeatedSans && row.unrepeatedSans.length">
+      {{ t('secret.certificate.plusMore', {n:row.unrepeatedSans.length}) }}
+    </span>
+    <br>
     <t k="secret.certificate.expires" />: <DateComponent
       :class="dateClass"
       :value="expiration"

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;
@@ -158,6 +163,17 @@ export default {
         items = this.group;
       }
 
+      let parentPath = '';
+      const cluster = this.$route.params?.cluster;
+
+      // Where we use nested route configuration, consider the parent route when trying to identify the nav location
+      if (this.$route.matched.length > 1) {
+        const parentRoute = this.$route.matched[this.$route.matched.length - 2];
+
+        parentPath = parentRoute.path.replace(':cluster', cluster);
+        parentPath = parentPath === '/' ? undefined : parentPath;
+      }
+
       for (const item of items.children) {
         if (item.children && this.hasActiveRoute(item)) {
           return true;
@@ -166,8 +182,11 @@ export default {
           const matchesNavLevel = navLevels.filter((param) => !this.$route.params[param] || this.$route.params[param] !== item.route.params[param]).length === 0;
           const withoutHash = this.$route.hash ? this.$route.fullPath.slice(0, this.$route.fullPath.indexOf(this.$route.hash)) : this.$route.fullPath;
           const withoutQuery = withoutHash.split('?')[0];
+          const itemFullPath = this.$router.resolve(item.route).fullPath;
 
-          if (matchesNavLevel || this.$router.resolve(item.route).fullPath === withoutQuery) {
+          if (matchesNavLevel || itemFullPath === withoutQuery) {
+            return true;
+          } else if (parentPath && itemFullPath === parentPath) {
             return true;
           }
         }
@@ -205,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()"
@@ -260,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
@@ -358,6 +377,9 @@ export default {
       &:hover:not(.active) {
         background-color: var(--nav-hover);
       }
+      &:hover:not(.active).noHover {
+        background-color: inherit;
+      }
     }
   }