@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.3

package/components/form/KeyValue.vue

@@ -603,39 +603,63 @@ export default {
     </div>
     <div
       class="kv-container"
+      role="grid"
+      :aria-rowcount="rows.length"
+      :aria-colcount="extraColumns.length + 2"
       :style="containerStyle"
     >
       <template v-if="rows.length || isView">
-        <label class="text-label">
-          {{ _keyLabel }}
-          <i
-            v-if="_protip && !isView && addAllowed"
-            v-clean-tooltip="_protip"
-            class="icon icon-info"
-          />
-        </label>
-        <label class="text-label">
-          {{ _valueLabel }}
-        </label>
-        <label
-          v-for="(c, i) in extraColumns"
-          :key="i"
-        >
-          <slot :name="'label:'+c">{{ c }}</slot>
-        </label>
-        <slot
-          v-if="canRemove"
-          name="remove"
-        >
-          <span />
-        </slot>
+        <div class="rowgroup">
+          <div class="row">
+            <label
+              class="text-label"
+              role="columnheader"
+            >
+              {{ _keyLabel }}
+              <i
+                v-if="_protip && !isView && addAllowed"
+                v-clean-tooltip="_protip"
+                class="icon icon-info"
+              />
+            </label>
+            <label
+              class="text-label"
+              role="columnheader"
+            >
+              {{ _valueLabel }}
+            </label>
+            <label
+              v-for="(c, i) in extraColumns"
+              :key="i"
+              role="columnheader"
+            >
+              <slot :name="'label:'+c">{{ c }}</slot>
+            </label>
+            <slot
+              v-if="canRemove"
+              name="remove"
+            >
+              <span />
+            </slot>
+          </div>
+        </div>
       </template>
       <template v-if="!rows.length && isView">
-        <div class="kv-item key text-muted">
-          &mdash;
-        </div>
-        <div class="kv-item key text-muted">
-          &mdash;
+        <div class="rowgroup">
+          <div class="row">
+            <div
+              class="kv-item key text-muted"
+              role="gridcell"
+            >
+              &mdash;
+            </div>
+            <div
+              class="kv-item key text-muted"
+              role="gridcell"
+            >
+              &mdash;
+            </div>
+          </div>
         </div>
       </template>
       <template
@@ -643,146 +667,172 @@ export default {
         v-else
         :key="i"
       >
-        <!-- Key -->
-        <div
-          class="kv-item key"
-        >
-          <slot
-            name="key"
-            :row="row"
-            :mode="mode"
-            :keyName="keyName"
-            :valueName="valueName"
-            :queueUpdate="queueUpdate"
-            :disabled="disabled"
-          >
-            <Select
-              v-if="keyOptions"
-              ref="key"
-              v-model:value="row[keyName]"
-              :searchable="true"
-              :disabled="disabled || isProtected(row.key)"
-              :clearable="false"
-              :taggable="keyTaggable"
-              :options="calculateOptions(row[keyName])"
-              :data-testid="`select-kv-item-key-${i}`"
-              @update:value="queueUpdate"
-            />
-            <input
-              v-else
-              ref="key"
-              v-model="row[keyName]"
-              :disabled="isView || disabled || !keyEditable || isProtected(row.key)"
-              :placeholder="_keyPlaceholder"
-              :data-testid="`input-kv-item-key-${i}`"
-              @input="queueUpdate"
-              @paste="onPaste(i, $event)"
+        <div class="rowgroup">
+          <div class="row">
+            <!-- Key -->
+            <div
+              class="kv-item key"
+              role="gridcell"
+              :aria-rowindex="i+1"
+              :aria-colindex="1"
             >
-          </slot>
-        </div>
-
-        <!-- Value -->
-        <div
-          :data-testid="`kv-item-value-${i}`"
-          class="kv-item value"
-        >
-          <slot
-            name="value"
-            :row="row"
-            :mode="mode"
-            :keyName="keyName"
-            :valueName="valueName"
-            :queueUpdate="queueUpdate"
-          >
-            <div v-if="!row.supported">
-              {{ t('detailText.unsupported', null, true) }}
-            </div>
-            <div v-else-if="row.binary">
-              {{ binaryTextSize(row.value) }}
+              <slot
+                name="key"
+                :row="row"
+                :mode="mode"
+                :keyName="keyName"
+                :valueName="valueName"
+                :queueUpdate="queueUpdate"
+                :disabled="disabled"
+              >
+                <Select
+                  v-if="keyOptions"
+                  ref="key"
+                  v-model:value="row[keyName]"
+                  :searchable="true"
+                  :disabled="disabled || isProtected(row.key)"
+                  :clearable="false"
+                  :taggable="keyTaggable"
+                  :options="calculateOptions(row[keyName])"
+                  :data-testid="`select-kv-item-key-${i}`"
+                  :aria-label="t('generic.ariaLabel.key', {index: i})"
+                  @update:value="queueUpdate"
+                />
+                <input
+                  v-else
+                  ref="key"
+                  v-model="row[keyName]"
+                  :disabled="isView || disabled || !keyEditable || isProtected(row.key)"
+                  :placeholder="_keyPlaceholder"
+                  :data-testid="`input-kv-item-key-${i}`"
+                  :aria-label="t('generic.ariaLabel.key', {index: i})"
+                  @input="queueUpdate"
+                  @paste="onPaste(i, $event)"
+                >
+              </slot>
             </div>
+
+            <!-- Value -->
             <div
-              v-else
-              class="value-container"
-              :class="{ 'upload-button': parseValueFromFile }"
+              :data-testid="`kv-item-value-${i}`"
+              class="kv-item value"
+              role="gridcell"
+              :aria-rowindex="i+1"
+              :aria-colindex="2"
             >
-              <CodeMirror
-                v-if="valueMarkdownMultiline"
-                ref="cm"
-                data-testid="code-mirror-multiline-field"
-                :class="{['focus']: codeMirrorFocus[i]}"
-                :value="row[valueName]"
-                :as-text-area="true"
-                :mode="mode"
-                @onInput="onInputMarkdownMultiline(i, $event)"
-                @onFocus="onFocusMarkdownMultiline(i, $event)"
-              />
-              <TextAreaAutoGrow
-                v-else-if="valueMultiline && row[valueName] !== undefined"
-                v-model:value="row[valueName]"
-                data-testid="value-multiline"
-                :class="{'conceal': valueConcealed}"
-                :disabled="disabled || isProtected(row.key)"
+              <slot
+                name="value"
+                :row="row"
                 :mode="mode"
-                :placeholder="_valuePlaceholder"
-                :min-height="40"
-                :spellcheck="false"
-                @update:value="queueUpdate"
-              />
-              <input
-                v-else
-                v-model="row[valueName]"
-                :disabled="isView || disabled || isProtected(row.key)"
-                :type="valueConcealed ? 'password' : 'text'"
-                :placeholder="_valuePlaceholder"
-                autocorrect="off"
-                autocapitalize="off"
-                spellcheck="false"
-                :data-testid="`input-kv-item-value-${i}`"
-                @input="queueUpdate"
+                :keyName="keyName"
+                :valueName="valueName"
+                :queueUpdate="queueUpdate"
               >
-              <FileSelector
-                v-if="parseValueFromFile && readAllowed && !isView && isValueFieldEmpty(row[valueName])"
-                class="btn btn-sm role-secondary file-selector"
-                :label="t('generic.upload')"
-                :include-file-name="true"
-                @selected="onValueFileSelected(i, $event)"
+                <div v-if="!row.supported">
+                  {{ t('detailText.unsupported', null, true) }}
+                </div>
+                <div v-else-if="row.binary">
+                  {{ binaryTextSize(row.value) }}
+                </div>
+                <div
+                  v-else
+                  class="value-container"
+                  :class="{ 'upload-button': parseValueFromFile }"
+                >
+                  <CodeMirror
+                    v-if="valueMarkdownMultiline"
+                    ref="cm"
+                    data-testid="code-mirror-multiline-field"
+                    :class="{['focus']: codeMirrorFocus[i]}"
+                    :value="row[valueName]"
+                    :as-text-area="true"
+                    :mode="mode"
+                    :options="{
+                      screenReaderLabel: t('generic.ariaLabel.value', { index: i })
+                    }"
+                    @onInput="onInputMarkdownMultiline(i, $event)"
+                    @onFocus="onFocusMarkdownMultiline(i, $event)"
+                  />
+                  <TextAreaAutoGrow
+                    v-else-if="valueMultiline && row[valueName] !== undefined"
+                    v-model:value="row[valueName]"
+                    data-testid="value-multiline"
+                    :class="{'conceal': valueConcealed}"
+                    :disabled="disabled || isProtected(row.key)"
+                    :mode="mode"
+                    :placeholder="_valuePlaceholder"
+                    :min-height="40"
+                    :spellcheck="false"
+                    :aria-label="t('generic.ariaLabel.value', {index: i})"
+                    @update:value="queueUpdate"
+                  />
+                  <input
+                    v-else
+                    v-model="row[valueName]"
+                    :disabled="isView || disabled || isProtected(row.key)"
+                    :type="valueConcealed ? 'password' : 'text'"
+                    :placeholder="_valuePlaceholder"
+                    autocorrect="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                    :data-testid="`input-kv-item-value-${i}`"
+                    :aria-label="t('generic.ariaLabel.value', {index: i})"
+                    @input="queueUpdate"
+                  >
+                  <FileSelector
+                    v-if="parseValueFromFile && readAllowed && !isView && isValueFieldEmpty(row[valueName])"
+                    class="btn btn-sm role-secondary file-selector"
+                    :label="t('generic.upload')"
+                    :include-file-name="true"
+                    :aria-label="t('generic.ariaLabel.value', {index: i})"
+                    @selected="onValueFileSelected(i, $event)"
+                  />
+                </div>
+              </slot>
+            </div>
+            <div
+              v-for="(c, j) in extraColumns"
+              :key="`${i}-${j}`"
+              class="kv-item extra"
+              role="gridcell"
+              :aria-rowindex="i+1"
+              :aria-colindex="j+3"
+            >
+              <slot
+                :name="'col:' + c"
+                :row="row"
+                :queue-update="queueUpdate"
+                :i="i"
               />
             </div>
-          </slot>
-        </div>
-        <div
-          v-for="(c, j) in extraColumns"
-          :key="`${i}-${j}`"
-          class="kv-item extra"
-        >
-          <slot
-            :name="'col:' + c"
-            :row="row"
-            :queue-update="queueUpdate"
-            :i="i"
-          />
-        </div>
-        <div
-          v-if="canRemove"
-          :key="i"
-          class="kv-item remove"
-          :data-testid="`remove-column-${i}`"
-        >
-          <slot
-            name="removeButton"
-            :remove="remove"
-            :row="row"
-            :i="i"
-          >
-            <button
-              type="button"
-              :disabled="isView || isProtected(row.key) || disabled"
-              class="btn role-link"
-              @click="remove(i)"
+            <div
+              v-if="canRemove"
+              :key="i"
+              class="kv-item remove"
+              role="gridcell"
+              :aria-rowindex="i+1"
+              :aria-colindex="extraColumns.length+3"
+              :data-testid="`remove-column-${i}`"
             >
-              {{ removeLabel || t('generic.remove') }}
-            </button>
-          </slot>
+              <slot
+                name="removeButton"
+                :remove="remove"
+                :row="row"
+                :i="i"
+              >
+                <button
+                  type="button"
+                  role="button"
+                  :disabled="isView || isProtected(row.key) || disabled"
+                  :aria-label="removeLabel || t('generic.remove')"
+                  class="btn role-link"
+                  @click="remove(i)"
+                >
+                  {{ removeLabel || t('generic.remove') }}
+                </button>
+              </slot>
+            </div>
+          </div>
         </div>
       </template>
     </div>
@@ -797,9 +847,11 @@ export default {
         <button
           v-if="addAllowed"
           type="button"
+          role="button"
           class="btn role-tertiary add"
-          data-testid="add_link_button"
+          data-testid="add_row_item_button"
           :disabled="loading || disabled || (keyOptions && filteredKeyOptions.length === 0)"
+          :aria-label="_addLabel"
           @click="add()"
         >
           <i
@@ -861,6 +913,24 @@ export default {
       }
     }
   }
+
+  .rowgroup {
+    display: grid;
+    grid-column-start: 1;
+    grid-column-end: span end;
+    grid-template-columns: subgrid;
+  }
+
+  .row {
+    &::before {
+      display: none;
+    }
+    display: grid;
+    grid-column-start: 1;
+    grid-column-end: span end;
+    grid-template-columns: subgrid;
+  }
+
   .remove {
     text-align: center;
     BUTTON {

package/components/form/LabeledSelect.vue

@@ -396,7 +396,7 @@ export default {
 
       <template #list-footer>
         <div
-          v-if="canPaginate && totalResults"
+          v-if="canPaginate && totalResults && pages > 1"
           class="pagination-slot"
         >
           <div class="load-more">

package/components/form/PlusMinus.vue

@@ -54,11 +54,17 @@ export default {
     <button
       v-clean-tooltip="minusTooltip"
       :disabled="disabled || !canMinus"
+      :aria-disabled="disabled || !canMinus"
       type="button"
+      role="button"
+      :aria-label="t('workload.plus')"
       class="btn btn-sm role-secondary"
       @click="$emit('minus')"
     >
-      <i class="icon icon-sm icon-minus" />
+      <i
+        class="icon icon-sm icon-minus"
+        :alt="t('workload.plus')"
+      />
     </button>
     <div class="value">
       {{ value }}
@@ -66,11 +72,17 @@ export default {
     <button
       v-clean-tooltip="plusTooltip"
       :disabled="disabled || !canPlus"
+      :aria-disabled="disabled || !canPlus"
       type="button"
+      role="button"
+      :aria-label="t('workload.minus')"
       class="btn btn-sm role-secondary"
       @click="$emit('plus')"
     >
-      <i class="icon icon-sm icon-plus" />
+      <i
+        class="icon icon-sm icon-plus"
+        :alt="t('workload.minus')"
+      />
     </button>
   </div>
 </template>

package/components/form/ResourceLabeledSelect.vue

@@ -3,53 +3,8 @@ import { PropType, defineComponent } from 'vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { labelSelectPaginationFunction, LabelSelectPaginationFunctionOptions } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
-import { LabelSelectPaginateFn, LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '@shell/types/components/labeledSelect';
-
-type PaginateTypeOverridesFn = (opts: LabelSelectPaginationFunctionOptions) => LabelSelectPaginationFunctionOptions;
-
-interface SharedSettings {
-  /**
-   * Provide specific LabelSelect options for this mode (paginated / not paginated)
-   */
-  labelSelectOptions?: { [key: string]: any },
-  /**
-   * Map the resources shown in LabelSelect
-   */
-  mapResult?: (resources: any[]) => any[]
-}
-
-/**
- * Settings to use when the LabelSelect is paginating
- */
-export interface ResourceLabeledSelectPaginateSettings extends SharedSettings {
-  /**
-   * Override the convience function which fetches a page of results
-   */
-  overrideRequest?: LabelSelectPaginateFn,
-  /**
-   * Override the default settings used in the convenience function to fetch a page of results
-   */
-  requestSettings?: PaginateTypeOverridesFn,
-}
-
-/**
- * Settings to use when the LabelSelect is fetching all resources (not paginating)
- */
-export type ResourceLabeledSelectSettings = SharedSettings
-
-/**
- * Force a specific mode
- */
-export enum RESOURCE_LABEL_SELECT_MODE {
-  /**
-   * Fetch all resources
-   */
-  ALL_RESOURCES = 'ALL', // eslint-disable-line no-unused-vars
-  /**
-   * Determine if all resources are fetched given system settings
-   */
-  DYNAMIC = 'DYNAMIC', // eslint-disable-line no-unused-vars
-}
+import { LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '@shell/types/components/labeledSelect';
+import { RESOURCE_LABEL_SELECT_MODE, ResourceLabeledSelectPaginateSettings, ResourceLabeledSelectSettings } from '@shell/types/components/resourceLabeledSelect';
 
 /**
  * Convenience  wrapper around the LabelSelect component to support pagination
@@ -66,6 +21,8 @@ export default defineComponent({
 
   components: { LabeledSelect },
 
+  emits: ['update:value'],
+
   props: {
     /**
      * Resource to show
@@ -89,7 +46,7 @@ export default defineComponent({
     },
 
     /**
-     * Specific settings to use when we're showing all results
+     * Specific settings to use when we're showing all results in the drop down
      */
     allResourcesSettings: {
       type:    Object as PropType<ResourceLabeledSelectSettings>,
@@ -97,7 +54,7 @@ export default defineComponent({
     },
 
     /**
-     * Specific settings to use when we're showing paginated results
+     * Specific settings to use when we're showing paginated results in the drop down
      */
     paginatedResourceSettings: {
       type:    Object as PropType<ResourceLabeledSelectPaginateSettings>,
@@ -120,6 +77,7 @@ export default defineComponent({
     }
 
     if (!this.paginate) {
+      // The resource won't be paginated and component expects everything up front
       await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.resourceType });
     }
   },
@@ -148,13 +106,14 @@ export default defineComponent({
 
       const all = this.$store.getters[`${ this.inStore }/all`](this.resourceType);
 
-      return this.allResourcesSettings?.mapResult ? this.allResourcesSettings.mapResult(all) : all;
+      return this.allResourcesSettings?.updateResources ? this.allResourcesSettings.updateResources(all) : all;
     }
   },
 
   methods: {
     /**
-     * Typeof LabelSelectPaginateFn
+     * Make the request to fetch the resource given the state of the label select (filter, page, page size, etc see LabelSelectPaginateFn)
+     * opts: Typeof LabelSelectPaginateFn
      */
     async paginateType(opts: LabelSelectPaginateFnOptions): Promise<LabelSelectPaginateFnResponse> {
       if (this.paginatedResourceSettings?.overrideRequest) {
@@ -175,9 +134,9 @@ export default defineComponent({
       const options = this.paginatedResourceSettings?.requestSettings ? this.paginatedResourceSettings.requestSettings(defaultOptions) : defaultOptions;
       const res = await labelSelectPaginationFunction(options);
 
-      return this.paginatedResourceSettings?.mapResult ? {
+      return this.paginatedResourceSettings?.updateResources ? {
         ...res,
-        page: this.paginatedResourceSettings.mapResult(res.page)
+        page: this.paginatedResourceSettings.updateResources(res.page)
       } : res;
     },
   },
@@ -190,5 +149,6 @@ export default defineComponent({
     :loading="$fetchState.pending"
     :options="allOfType"
     :paginate="paginateType"
+    @update:value="$emit('update:value', $event)"
   />
 </template>

package/components/form/ResourceSelector.vue

@@ -36,6 +36,7 @@ export default {
   },
 
   async fetch() {
+    // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
     const hash = await allHash({ allResources: this.$store.dispatch('cluster/findAll', { type: this.type }) });
 
     this.allResources = hash.allResources;