dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

package/components/SortableTable/selection.js

@@ -127,25 +127,38 @@ export default {
   },
 
   watch: {
-    // On page change
+    /**
+     * Handle changes to the page (SSP enabled)
+     */
+    externalPaginationResult() {
+      // Handle changes to the page (SSP enabled)
+      this.pageChanged(this.pagedRows);
+    },
+
+    /**
+     * Handle changes to the page (SSP disabled)
+     */
     pagedRows() {
-      // When the table contents changes:
-      // - Remove items that are in the selection but no longer in the table.
+      this.pageChanged(this.pagedRows);
+    }
+  },
 
-      const content = this.pagedRows;
+  methods: {
+    /**
+     * Remove items that are in the selection but no longer in the table.
+     */
+    pageChanged(page) {
       const toRemove = [];
 
       for (const node of this.selectedRows) {
-        if (!content.includes(node) ) {
+        if (!page.includes(node) ) {
           toRemove.push(node);
         }
       }
 
       this.update([], toRemove);
-    }
-  },
+    },
 
-  methods: {
     onToggleAll(value) {
       if ( value ) {
         this.update(this.pagedRows, []);
@@ -331,7 +344,6 @@ export default {
         return;
       }
 
-      e.preventDefault();
       e.stopPropagation();
 
       this.prevNode = node;
@@ -531,7 +543,7 @@ export default {
     },
 
     clearSelection() {
-      this.update([], this.selectedRows);
+      this.update([], [...this.selectedRows]);
     },
 
   }

package/components/StateDot/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+import { computed } from 'vue';
+
+interface Props {
+    color: StateColor;
+    size?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), { size: '8px' });
+const backgroundColor = computed(() => stateColorCssVar(props.color));
+</script>
+
+<template>
+  <span class="state-dot" />
+</template>
+
+<style lang="scss" scoped>
+.state-dot {
+    display: inline-block;
+
+    width: v-bind('props.size');
+    height: v-bind('props.size');
+
+    border-radius: 50%;
+    background-color: v-bind('backgroundColor');
+}
+</style>

package/components/StatusBadge.vue

@@ -19,11 +19,13 @@ const STATUS = {
   }
 };
 
+export interface Props {
+  status?: 'success' | 'warning' | 'info' | 'error',
+  label?: string
+}
+
 withDefaults(
-  defineProps<{
-    status?: 'success' | 'warning' | 'info' | 'error',
-    label?: string
-  }>(),
+  defineProps<Props>(),
   {
     status: 'success',
     label:  '',

package/components/SubtleLink.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { RouterLink, RouteLocationRaw } from 'vue-router';
+
+export interface Props {
+  to: RouteLocationRaw;
+}
+
+const { to } = defineProps<Props>();
+</script>
+
+<template>
+  <RouterLink
+    class="subtle-link"
+    :to="to"
+  >
+    <slot name="default" />
+  </RouterLink>
+</template>
+
+<style lang="scss" scoped>
+.subtle-link {
+    text-decoration: underline;
+    color: var(--body-text);
+}
+</style>

package/components/Tabbed/Tab.vue

@@ -118,7 +118,7 @@ export default {
 .tab-header {
   display: flex;
   justify-content: space-between;
-  /* margin-bottom: 15px; */
+  // margin-bottom: 15px;
   align-items: center;
 
   h2 {

package/components/Tabbed/index.vue

@@ -61,6 +61,24 @@ export default {
     tabsOnly: {
       type:    Boolean,
       default: false,
+    },
+
+    resource: {
+      type:    Object,
+      default: () => {}
+    },
+
+    showExtensionTabs: {
+      type:    Boolean,
+      default: true,
+    },
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'tabbed'
     }
   },
 
@@ -87,7 +105,7 @@ export default {
   },
 
   data() {
-    const extensionTabs = getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [];
+    const extensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [] : [];
 
     const parsedExtTabs = extensionTabs.map((item) => {
       return {
@@ -140,17 +158,10 @@ export default {
         this.select(activeTab.name);
       }
     },
-  },
-
-  mounted() {
-    if ( this.useHash ) {
-      window.addEventListener('hashchange', this.hashChange);
-    }
-  },
-
-  unmounted() {
-    if ( this.useHash ) {
-      window.removeEventListener('hashchange', this.hashChange);
+    '$route.hash'() {
+      if ( this.useHash ) {
+        this.hashChange();
+      }
     }
   },
 
@@ -159,7 +170,7 @@ export default {
       return tab.displayAlertIcon || (tab.error && !tab.active);
     },
     hashChange() {
-      if (!this.scrollOnChange) {
+      if (this.scrollOnChange) {
         const scrollable = document.getElementsByTagName('main')[0];
 
         if (scrollable) {
@@ -177,8 +188,9 @@ export default {
     select(name/* , event */) {
       const { sortedTabs } = this;
 
-      const selected = this.find(name);
-      const hashName = `#${ name }`;
+      const cleanName = name.replace('#', '');
+      const selected = this.find(cleanName);
+      const hashName = `#${ cleanName }`;
 
       if ( !selected || selected.disabled) {
         return;
@@ -250,7 +262,7 @@ export default {
 <template>
   <div
     :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }"
-    data-testid="tabbed"
+    :data-testid="componentTestid"
   >
     <ul
       v-if="!hideTabs"
@@ -258,7 +270,7 @@ export default {
       role="tablist"
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
-      data-testid="tabbed-block"
+      :data-testid="`${componentTestid}-block`"
       tabindex="0"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
@@ -278,10 +290,10 @@ export default {
       >
         <a
           :data-testid="`btn-${tab.name}`"
-          :aria-controls="'#' + tab.name"
+          :aria-controls="tab.name"
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
-          role="tab"  
+          role="tab"
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -313,6 +325,7 @@ export default {
             type="button"
             class="btn bg-transparent"
             data-testid="tab-list-add"
+            :aria-label="t('tabs.addItem')"
             @click="tabAddClicked"
           >
             <i class="icon icon-plus" />
@@ -322,6 +335,7 @@ export default {
             class="btn bg-transparent"
             :disabled="!sortedTabs.length"
             data-testid="tab-list-remove"
+            :aria-label="t('tabs.removeItem')"
             @click="tabRemoveClicked"
           >
             <i class="icon icon-minus" />
@@ -355,6 +369,7 @@ export default {
       >
         <component
           :is="tab.component"
+          :resource="resource"
         />
       </Tab>
     </div>
@@ -367,6 +382,15 @@ export default {
   margin: 0;
   padding: 0;
 
+  &:focus-visible {
+    outline: none;
+
+    .tab.active {
+      @include focus-outline;
+      outline-offset: -2px;
+    }
+  }
+
   &.horizontal {
     border-bottom: solid 1px var(--border);
     display: flex;
@@ -381,18 +405,13 @@ export default {
     }
   }
 
-  &:focus {
-    outline: none;
-
-    & .tab.active a span {
-      text-decoration: none;
-    }
+  &:focus .tab.active a span {
+    text-decoration: underline;
   }
 
   .tab {
     position: relative;
     float: left;
-    padding: 0 8px 0 0;
     cursor: pointer;
 
     A {
@@ -403,7 +422,7 @@ export default {
       &:hover {
         text-decoration: none;
         span {
-          text-decoration: none;
+          text-decoration: underline;
         }
       }
     }
@@ -473,71 +492,49 @@ export default {
 
 .side-tabs {
   display: flex;
-  flex-direction: column;
-  /* box-shadow: 0 0 20px var(--shadow);
-  border-radius: calc(var(--border-radius) * 2);
-  background-color: var(--tabbed-sidebar-bg); */
-margin: 0px -20px;
+  border: 1px solid var(--border);
+
   .tab-container {
     padding: 20px;
   }
 
   & .tabs {
-    /* width: $sideways-tabs-width; */
-    /* min-width: $sideways-tabs-width; */
+    width: $sideways-tabs-width;
+    min-width: $sideways-tabs-width;
     display: flex;
-    border-bottom:1px solid #d7d7d7;
-    padding: 0 0 0 20px;
-    /* flex: 1 0; */
-    /* flex-direction: column; */
+    flex: 1 0;
+    flex-direction: column;
+    border-right: 1px solid var(--border);
 
     // &.vertical {
     //   .tab.active {
     //     background-color: var(--tabbed-container-bg);
     //   }
     // }
+
     & .tab {
-      /* width: 100%; */
       min-width: 130px !important;
-      height: 36px;
-      /* border-top: solid 5px transparent; */
-      display: flex;
-      justify-content: center;
-      padding: 8px 16px;
-      box-sizing: border-box;
-      border: 1px solid #d7d7d7;
-      border-bottom: 0px;
-      margin-right: 5px;
-      border-radius: 2px;
 
       &.toggle A {
         color: var(--primary);
-        padding: 0px;
       }
 
       A {
-        color: var(--input-label);
-        padding: 0px;
+        color: var(--primary);
       }
 
       &.active {
-        background-color: var(--body-bg);
-        border-top: solid 2px var(--primary);
-        position: relative;
-        &.active::before{
-          position: absolute;
-          right: 0;
-          left: 0;
-          top: 34px;
-          border-bottom: 1px solid #fff;
-          content: '';
+        background-color: var(--nav-active);
 
-        }
         & A {
           color: var(--primary);
         }
       }
 
+      :hover {
+        background-color: var(--nav-active);
+      }
+
       &.disabled {
         background-color: var(--disabled-bg);
 
@@ -578,7 +575,7 @@ margin: 0px -20px;
   &
 
   .tab-container {
-    /* width: calc(100% - #{$sideways-tabs-width}); */
+    width: calc(100% - #{$sideways-tabs-width});
     flex-grow: 1;
     background-color: var(--body-bg);
   }

package/components/Wizard.vue

@@ -1,5 +1,5 @@
 <script>
-
+import { _CREATE, _VIEW } from '@shell/config/query-params';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
@@ -56,6 +56,11 @@ export default {
       required: true
     },
 
+    mode: {
+      type:    String,
+      default: _CREATE
+    },
+
     // Initial step to show when Wizard loads.
     initStepIndex: {
       type:    Number,
@@ -121,6 +126,11 @@ export default {
   },
 
   computed: {
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
     errorStrings() {
       return ( this.errors || [] ).map((x) => stringify(x));
     },
@@ -351,7 +361,7 @@ export default {
                     role="presentation"
                   >
                     <span
-                      :aria-controls="'step' + idx+1"
+                      :aria-controls="'step-container-' + step.name"
                       :aria-selected="step.name === activeStep.name"
                       role="tab"
                       class="controls"
@@ -366,7 +376,7 @@ export default {
                       </span>
                     </span>
                   </li>
-                  <div
+                  <li
                     v-if="idx!==visibleSteps.length-1"
                     :key="step.name"
                     class="divider"
@@ -387,7 +397,9 @@ export default {
           >
             <div
               v-if="step.name === activeStep.name || step.hidden"
+              :id="'step-container-' + step.name"
               :key="step.name"
+              role="tabpanel"
               class="step-container__step"
               :class="{'hide': step.name !== activeStep.name && step.hidden}"
             >
@@ -461,6 +473,7 @@ export default {
               :finish="finish"
             >
               <AsyncButton
+                v-if="!isView"
                 :disabled="!activeStep.ready"
                 :mode="finishMode"
                 @click="finish"

package/components/YamlEditor.vue

@@ -203,7 +203,7 @@ export default {
 
     updateValue(value) {
       this.curValue = value;
-      this.$refs.cm.updateValue(value);
+      this.$refs.cm?.updateValue(value);
     }
   }
 };
@@ -235,7 +235,6 @@ export default {
         >{{ t('generic.split') }}</button>
       </span>
     </div>
-
     <CodeMirror
       v-if="showCodeEditor"
       ref="cm"

package/components/__tests__/AsyncButton.test.ts

@@ -145,4 +145,43 @@ describe('component: AsyncButton', () => {
     expect(spyDone).toHaveBeenCalledWith('cancelled');
     expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.ACTION);
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const mockExists = jest.fn().mockReturnValue(true);
+    const mockT = jest.fn().mockReturnValue('some-string');
+    const ariaLabel = 'some-aria-label';
+    const ariaLabelledBy = 'some-aria-labelledby';
+
+    const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
+      props:  { icon: 'some-icon', disabled: true },
+      attrs:  { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy },
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/exists': mockExists,
+              'i18n/t':      mockT
+            }
+          },
+        }
+      },
+    });
+
+    const item = wrapper.find('button');
+
+    const itemRole = item.attributes('role');
+    const itemAriaLabel = item.attributes('aria-label');
+    const itemAriaLabelledBy = item.attributes('aria-labelledby');
+    const itemAriaDisabled = item.attributes('aria-disabled');
+
+    // let's check some attributes passing...
+    expect(itemAriaLabel).toBe(ariaLabel);
+    expect(itemAriaLabelledBy).toBe(ariaLabelledBy);
+
+    // rest of the checks
+    expect(itemRole).toBe('button');
+    expect(itemAriaDisabled).toBe('true');
+    expect(item.find('span[data-testid="async-btn-display-label"]').attributes('id')).toBe(wrapper.vm.describedbyId);
+    expect(item.find('i').attributes('alt')).toBeDefined();
+  });
 });