@rancher/shell 3.0.1 → 3.0.2-rc.2

package/components/ResourceList/index.vue

@@ -54,8 +54,10 @@ export default {
         this.customTypeDisplay = component.typeDisplay.apply(this);
       }
 
-      // If your list page has a fetch then it's responsible for populating rows itself
-      if ( component?.fetch ) {
+      // Is the custom component responsible fetching the resources?
+      // - Component has a fetch method - legacy method. fetch will handle the requests
+      // - Component contains the PaginatedResourceTable component - go forward method. PaginatedResourceTable owns fetching the resources
+      if ( component?.fetch || component?.components?.['PaginatedResourceTable']) {
         this.componentWillFetch = true;
       }
 
@@ -269,7 +271,7 @@ export default {
       v-else
       :schema="schema"
       :rows="rows"
-      :alt-loading="canPaginate"
+      :alt-loading="canPaginate && !isFirstLoad"
       :loading="loading"
       :headers="headers"
       :group-by="groupBy"

package/components/ResourceTable.vue

@@ -167,7 +167,7 @@ export default {
       default: false
     },
     /**
-     * Manaul force the update of live and delayed cells. Change this number to kick off the update
+     * Manual force the update of live and delayed cells. Change this number to kick off the update
      */
     forceUpdateLiveAndDelayed: {
       type:    Number,

package/components/SortableTable/THead.vue

@@ -162,6 +162,14 @@ export default {
       return col.name === this.sortBy;
     },
 
+    ariaSort(col) {
+      if (this.isCurrent(col)) {
+        return this.descending ? this.t('generic.descending') : this.t('generic.ascending');
+      }
+
+      return this.t('generic.none');
+    },
+
     tableColsOptionsClick(ev) {
       // set menu position
       const menu = document.querySelector('.table-options-container');
@@ -235,7 +243,12 @@ export default {
         :align="col.align || 'left'"
         :width="col.width"
         :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}"
+        :tabindex="col.sort ? 0 : -1"
+        class="sortable-table-head-element"
+        :aria-sort="ariaSort(col)"
         @click.prevent="changeSort($event, col)"
+        @keyup.enter="changeSort($event, col)"
+        @keyup.space="changeSort($event, col)"
       >
         <div
           class="table-header-container"
@@ -415,10 +428,7 @@ export default {
         background-color: var(--sortable-table-header-bg);
         color: var(--body-text);
         text-align: left;
-
-        &:not(.loading) {
-          border-bottom: 1px solid var(--sortable-table-top-divider);
-        }
+        border-bottom: 1px solid var(--sortable-table-top-divider);
       }
     }
 
@@ -428,6 +438,11 @@ export default {
       border: 0;
       color: var(--body-text);
 
+      &.sortable-table-head-element:focus-visible {
+        @include focus-outline;
+        outline-offset: -4px;
+      }
+
       .table-header-container {
         display: inline-flex;
 

package/components/SortableTable/index.vue

@@ -380,8 +380,10 @@ export default {
       eventualSearchQuery = this.$route.query?.q;
     }
 
+    const isLoading = this.loading || false;
+
     return {
-      refreshButtonPhase:         ASYNC_BUTTON_STATES.WAITING,
+      refreshButtonPhase:         isLoading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION,
       expanded:                   {},
       searchQuery,
       eventualSearchQuery,
@@ -392,7 +394,7 @@ export default {
       /**
        * The is the bool the DOM uses to show loading state. it's proxied from `loading` to avoid blipping the indicator (see usages)
        */
-      isLoading:                  false,
+      isLoading
     };
   },
 
@@ -504,7 +506,7 @@ export default {
           if (neu) {
             this._altLoadingDelayTimer = setTimeout(() => {
               this.isLoading = true;
-            }, 200); // this should be higher than the targetted quick response
+            }, 200); // this should be higher than the targeted quick response
           } else {
             clearTimeout(this._altLoadingDelayTimer);
             this.isLoading = false;
@@ -536,9 +538,6 @@ export default {
     manualRefreshLoadingFinished() {
       const res = !!(!this.isLoading && this._didinit && this.rows?.length && !this.isManualRefreshLoading);
 
-      // Always ensure the Refresh button phase aligns with loading state (regardless of if manualRefreshLoadingFinished has changed or not)
-      this.refreshButtonPhase = !res || this.loading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
-
       return res;
     },
 
@@ -575,11 +574,13 @@ export default {
     },
 
     showHeaderRow() {
+      // All of these are used to show content in the header
       return this.search ||
         this.tableActions ||
-        this.$slots['header-left']?.() ||
-        this.$slots['header-middle']?.() ||
-        this.$slots['header-right']?.();
+        this.$slots['header-left'] ||
+        this.$slots['header-middle'] ||
+        this.$slots['header-right'] ||
+        this.isTooManyItemsToAutoUpdate;
     },
 
     columns() {
@@ -1222,6 +1223,7 @@ export default {
       class="sortable-table"
       :class="classObject"
       width="100%"
+      role="table"
     >
       <THead
         v-if="showHeaders"
@@ -1451,6 +1453,8 @@ export default {
                       :data-testid="componentTestid + '-' + i + '-action-button'"
                       :borderless="true"
                       @click="handleActionButtonClick(i, $event)"
+                      @keyup.enter="handleActionButtonClick(i, $event)"
+                      @keyup.space="handleActionButtonClick(i, $event)"
                     />
                   </slot>
                 </td>

package/components/SortableTable/selection.js

@@ -1,3 +1,4 @@
+import { mapGetters } from 'vuex';
 import { isMore, isRange, suppressContextMenu, isAlternate } from '@shell/utils/platform';
 import { get } from '@shell/utils/object';
 import { filterBy } from '@shell/utils/array';
@@ -29,6 +30,13 @@ export default {
   },
 
   computed: {
+    ...mapGetters({
+      // Use either these Vuex getters
+      // OR the props to set the action menu state,
+      // but don't use both.
+      targetElem: 'action-menu/elem',
+      shouldShow: 'action-menu/showing',
+    }),
     // Used for the table-level selection check-box to show checked (all selected)/intermediate (some selected)/unchecked (none selected)
     howMuchSelected() {
       const total = this.pagedRows.length;
@@ -270,11 +278,17 @@ export default {
           }
         }
 
-        this.$store.commit(`action-menu/show`, {
-          resources,
-          event: e,
-          elem:  actionElement
-        });
+        if (!this.targetElem && !this.shouldShow) {
+          this.$store.commit(`action-menu/show`, {
+            resources,
+            event: e,
+            elem:  actionElement
+          });
+        } else if (this.targetElem === actionElement && this.shouldShow) {
+          // this condition is needed so that we can "toggle" the action menu with
+          // the keyboard for accessibility (row action menu)
+          this.$store.commit('action-menu/hide');
+        }
 
         return;
       }

package/components/YamlEditor.vue

@@ -13,7 +13,7 @@ export const EDITOR_MODES = {
 };
 
 export default {
-  emits: ['update:value', 'newObject', 'onInput', 'onReady', 'onChanges'],
+  emits: ['update:value', 'newObject', 'onInput', 'onReady', 'onChanges', 'validationChanged'],
 
   components: {
     CodeMirror,
@@ -236,6 +236,7 @@ export default {
       @onInput="onInput"
       @onReady="onReady"
       @onChanges="onChanges"
+      @validationChanged="$emit('validationChanged', $event)"
     />
     <FileDiff
       v-else

package/components/auth/SelectPrincipal.vue

@@ -127,7 +127,7 @@ export default {
       }
     },
 
-    onSearch(str, loading, vm) {
+    onSearch(str, loading) {
       str = (str || '').trim();
 
       this.searchStr = str;

package/components/fleet/FleetBundles.vue

@@ -127,7 +127,8 @@ export default {
             class="text-warning"
           >
             {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
-          <span v-else-if="row.status">{{ row.status.summary.desiredReady }}</span>
+          <span v-else-if="row.status && row.status.summary">{{ row.status.summary.desiredReady }}</span>
+          <span v-else>-</span>
         </template>
       </ResourceTable>
     </div>

package/components/form/LabeledSelect.vue

@@ -22,7 +22,7 @@ export default {
     LabeledSelectPagination
   ],
 
-  emits: ['on-open', 'on-close', 'selecting', 'deselecting', 'update:validation', 'update:value'],
+  emits: ['on-open', 'on-close', 'selecting', 'deselecting', 'search', 'update:validation', 'update:value'],
 
   props: {
     appendToBody: {
@@ -147,18 +147,29 @@ export default {
 
     // update placeholder text to inform user they can add their own opts when none are found
     showTagPrompts() {
-      return !this.options.length && this.$attrs.taggable;
+      return !this.options.length && this.$attrs.taggable && this.isSearchable;
     }
   },
 
   methods: {
     // resizeHandler = in mixin
     focusSearch() {
-      const blurredAgo = Date.now() - this.blurred;
+      // we need this override as in a "closeOnSelect" type of component
+      // if we don't have this override, it would open again
+      if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
+        this.$nextTick(() => {
+          const el = this.$refs['select'];
+
+          if ( el ) {
+            el.focus();
+          }
+
+          this.overridesMixinPreventDoubleTriggerKeysOpen = false;
+        });
 
-      if (!this.focused && blurredAgo < 250) {
         return;
       }
+      this.$refs['select-input'].open = true;
 
       this.$nextTick(() => {
         const el = this.$refs['select-input']?.searchEl;
@@ -238,7 +249,7 @@ export default {
       return noDrop ? false : open && shouldOpen && !mutableLoading;
     },
 
-    onSearch(newSearchString) {
+    onSearch(newSearchString, loading) {
       if (this.canPaginate) {
         this.setPaginationFilter(newSearchString);
       } else {
@@ -246,6 +257,7 @@ export default {
           this.dropdownShouldOpen(this.$refs['select-input'], true);
         }
       }
+      this.$emit('search', newSearchString, loading);
     },
 
     getOptionKey(opt) {
@@ -277,8 +289,9 @@ export default {
         'no-label': !hasLabel
       }
     ]"
+    :tabindex="isView || disabled ? -1 : 0"
     @click="focusSearch"
-    @focus="focusSearch"
+    @keyup.enter.space.down="focusSearch"
   >
     <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
@@ -318,7 +331,7 @@ export default {
       :selectable="selectable"
       :modelValue="value != null && !loading ? value : ''"
       :dropdown-should-open="dropdownShouldOpen"
-
+      :tabindex="-1"
       @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"

package/components/form/NodeScheduling.vue

@@ -32,6 +32,7 @@ export default {
       type:    String,
       default: 'create'
     },
+
     loading: {
       default: false,
       type:    Boolean
@@ -169,6 +170,7 @@ export default {
         name="selectNode"
         :options="selectNodeOptions"
         :mode="mode"
+        :data-testid="'node-scheduling-selectNode'"
         @input="update"
       />
     </div>
@@ -182,7 +184,8 @@ export default {
             :mode="mode"
             :multiple="false"
             :loading="loading"
-            @input="update"
+            :data-testid="'node-scheduling-nodeSelector'"
+            @update:value="update"
           />
         </div>
       </div>
@@ -191,6 +194,7 @@ export default {
       <NodeAffinity
         v-model:value="nodeAffinity"
         :mode="mode"
+        :data-testid="'node-scheduling-nodeAffinity'"
         @input="update"
       />
     </template>

package/components/form/Password.vue

@@ -41,7 +41,7 @@ export default {
     mode: {
       type:    String,
       default: _CREATE,
-    },
+    }
   },
   data() {
     return { reveal: false };
@@ -68,6 +68,9 @@ export default {
       }
 
       return attributes;
+    },
+    hideShowLabel() {
+      return this.reveal ? this.t('action.hide') : this.t('action.show');
     }
   },
   watch: {
@@ -92,6 +95,9 @@ export default {
     },
     focus() {
       this.$refs.input.$refs.value.focus();
+    },
+    hideShowFn() {
+      this.reveal ? this.reveal = false : this.reveal = true;
     }
   }
 };
@@ -127,17 +133,15 @@ export default {
           class="addon"
         >
           <a
-            v-if="reveal"
-            tabindex="-1"
             href="#"
-            @click.prevent.stop="reveal = false"
-          >{{ t('action.hide') }}</a>
-          <a
-            v-else
-            tabindex="-1"
-            href="#"
-            @click.prevent.stop="reveal=true"
-          >{{ t('action.show') }}</a>
+            tabindex="0"
+            class="hide-show"
+            role="button"
+            @click.prevent.stop="hideShowFn"
+            @keyup.space.prevent.stop="hideShowFn"
+          >
+            {{ hideShowLabel }}
+          </a>
         </div>
       </template>
     </LabeledInput>
@@ -157,10 +161,16 @@ export default {
   .password {
     display: flex;
     flex-direction: column;
+
     .labeled-input {
       .addon {
-          padding-left: 12px;
-          min-width: 65px;
+        padding-left: 12px;
+        min-width: 65px;
+
+        .hide-show:focus-visible {
+          @include focus-outline;
+          outline-offset: 4px;
+        }
       }
     }
     .genPassword {

package/components/form/ResourceLabeledSelect.vue

@@ -27,7 +27,7 @@ export interface ResourceLabeledSelectPaginateSettings extends SharedSettings {
    */
   overrideRequest?: LabelSelectPaginateFn,
   /**
-   * Override the default settings used in the convience function to fetch a page of results
+   * Override the default settings used in the convenience function to fetch a page of results
    */
   requestSettings?: PaginateTypeOverridesFn,
 }

package/components/form/Select.vue

@@ -114,11 +114,24 @@ export default {
       calculatePosition(dropdownList, component, width, this.placement);
     },
 
-    focus() {
-      this.focusSearch();
-    },
-
     focusSearch() {
+      // we need this override as in a "closeOnSelect" type of component
+      // if we don't have this override, it would open again
+      if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
+        this.$nextTick(() => {
+          const el = this.$refs['select'];
+
+          if ( el ) {
+            el.focus();
+          }
+
+          this.overridesMixinPreventDoubleTriggerKeysOpen = false;
+        });
+
+        return;
+      }
+      this.$refs['select-input'].open = true;
+
       this.$nextTick(() => {
         const el = this.$refs['select-input']?.searchEl;
 
@@ -176,6 +189,11 @@ export default {
     },
     report(e) {
       alert(e);
+    },
+    handleDropdownOpen(args) {
+      // function that prevents the "opening dropdown on focus"
+      // default behaviour of v-select
+      return args.noDrop || args.disabled ? false : args.open;
     }
   },
   computed: {
@@ -227,7 +245,7 @@ export default {
     ref="select"
     class="unlabeled-select"
     :class="{
-      disabled: disabled && !isView,
+      disabled: disabled || isView,
       focused,
       [mode]: true,
       [status]: status,
@@ -236,7 +254,9 @@ export default {
       'compact-input': compact,
       [$attrs.class]: $attrs.class
     }"
-    @focus="focusSearch"
+    :tabindex="disabled || isView ? -1 : 0"
+    @click="focusSearch"
+    @keyup.enter.space.down="focusSearch"
   >
     <v-select
       ref="select-input"
@@ -258,6 +278,8 @@ export default {
       :searchable="isSearchable"
       :selectable="selectable"
       :modelValue="value != null ? value : ''"
+      :dropdownShouldOpen="handleDropdownOpen"
+      :tabindex="-1"
 
       @update:modelValue="$emit('update:value', $event)"
       @search:blur="onBlur"

package/components/form/SelectOrCreateAuthSecret.vue

@@ -1,5 +1,6 @@
 <script>
 import { _EDIT } from '@shell/config/query-params';
+import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
@@ -19,6 +20,7 @@ export default {
   emits: ['inputauthval', 'update:value'],
 
   components: {
+    Banner,
     LabeledInput,
     LabeledSelect,
   },
@@ -118,7 +120,7 @@ export default {
     },
 
     /**
-     * This component is used in MultiStep Priocess
+     * This component is used in MultiStep Process
      * So when user click through to final step and submit the form
      * This component get recreated therefore register `doCreate` as a hook each time
      * Also, the parent step component is not aware that credential is created
@@ -194,6 +196,7 @@ export default {
       SSH:   AUTH_TYPE._SSH,
       BASIC: AUTH_TYPE._BASIC,
       S3:    AUTH_TYPE._S3,
+      RKE:   AUTH_TYPE._RKE,
     };
   },
 
@@ -308,7 +311,7 @@ export default {
         });
       }
 
-      if (this.allowSsh || this.allowS3 || this.allowBasic) {
+      if (this.allowSsh || this.allowS3 || this.allowBasic || this.allowRke) {
         out.unshift({
           label:    'divider',
           disabled: true,
@@ -340,6 +343,15 @@ export default {
         });
       }
 
+      // Note here about order
+      if ( this.allowRke ) {
+        out.unshift({
+          label: this.t('selectOrCreateAuthSecret.createRKE'),
+          value: AUTH_TYPE._RKE,
+          kind:  'highlighted'
+        });
+      }
+
       return out;
     },
 
@@ -348,7 +360,7 @@ export default {
         return '';
       }
 
-      if ( this.selected === AUTH_TYPE._SSH || this.selected === AUTH_TYPE._BASIC || this.selected === AUTH_TYPE._S3 ) {
+      if ( this.selected === AUTH_TYPE._SSH || this.selected === AUTH_TYPE._BASIC || this.selected === AUTH_TYPE._RKE || this.selected === AUTH_TYPE._S3 ) {
         return 'col span-4';
       }
 
@@ -448,7 +460,7 @@ export default {
     },
 
     updateKeyVal() {
-      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected) ) {
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE].includes(this.selected) ) {
         this.privateKey = '';
         this.publicKey = '';
       }
@@ -461,7 +473,7 @@ export default {
     },
 
     update() {
-      if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._NONE].includes(this.selected))) {
+      if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE, AUTH_TYPE._NONE].includes(this.selected))) {
         this.$emit('update:value', null);
       } else if ( this.selected.includes(':') ) {
         // Cloud creds
@@ -485,7 +497,7 @@ export default {
     },
 
     async doCreate() {
-      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected) || this.delegateCreateToParent ) {
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE].includes(this.selected) || this.delegateCreateToParent ) {
         return;
       }
 
@@ -521,15 +533,24 @@ export default {
           publicField = 'username';
           privateField = 'password';
           break;
+        case AUTH_TYPE._RKE:
+          type = SECRET_TYPES.RKE_AUTH_CONFIG;
+          // Set the 'auth' key to be the base64 of the username and password concatenated with a ':' character
+          secret.data = { auth: base64Encode(`${ this.publicKey }:${ this.privateKey }`) };
+          break;
         default:
           throw new Error('Unknown type');
         }
 
         secret._type = type;
-        secret.data = {
-          [publicField]:  base64Encode(this.publicKey),
-          [privateField]: base64Encode(this.privateKey),
-        };
+
+        // Set the data if not set by one of the specific cases above
+        if (!secret.data) {
+          secret.data = {
+            [publicField]:  base64Encode(this.publicKey),
+            [privateField]: base64Encode(this.privateKey),
+          };
+        }
       }
 
       await secret.save();
@@ -583,7 +604,14 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === BASIC">
+      <template v-else-if="selected === BASIC || selected === RKE">
+        <Banner
+          v-if="selected === RKE"
+          color="info"
+          :class="moreCols"
+        >
+          {{ t('selectOrCreateAuthSecret.rke.info', {}, true) }}
+        </Banner>
         <div :class="moreCols">
           <LabeledInput
             v-model:value="publicKey"

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

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import NodeScheduling from '@shell/components/form/NodeScheduling.vue';
+import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
+
+const requiredSetup = () => {
+  return {
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            currentProduct: { inStore: 'cluster' },
+            'i18n/t':       (text: string) => text,
+            t:              (text: string) => text,
+          }
+        }
+      },
+    }
+  };
+};
+
+describe('component: NodeScheduling', () => {
+  const value = { nodeName: 'node-1' };
+
+  const nodes = ['node-0', 'node-1'];
+
+  it.each([
+    _VIEW,
+    _CREATE,
+    _EDIT
+  ])('should show NodeName option', (mode) => {
+    const wrapper = mount(
+      NodeScheduling,
+      {
+        props: {
+          mode, loading: false, value, nodes
+        },
+        ...requiredSetup(),
+      }
+    );
+
+    expect(wrapper.find('[data-testid="node-scheduling-selectNode"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-testid="node-scheduling-nodeSelector"]').element.textContent).toContain(value.nodeName);
+  });
+});