@rancher/shell 3.0.3 → 3.0.5-rc.1

package/components/LocaleSelector.vue

@@ -1,11 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
 import Select from '@shell/components/form/Select.vue';
+import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
 
 export default {
   name: 'LocalSelector',
 
-  components: { Select },
+  components: {
+    Select,
+    RcDropdown,
+    RcDropdownItem,
+    RcDropdownTrigger,
+  },
 
   props: {
     mode: {
@@ -65,71 +71,37 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <div
-        v-if="showLocale"
-        role="menu"
-        :aria-label="t('locale.menu')"
-        class="locale-login-container"
-        tabindex="0"
-        @click="openLocaleSelector"
-        @blur.capture="closeLocaleSelector"
-        @keyup.enter="openLocaleSelector"
-        @keyup.space="openLocaleSelector"
-      >
-        <v-dropdown
-          popperClass="localeSelector"
-          :shown="isLocaleSelectorOpen"
-          placement="top"
-          distance="8"
-          skidding="12"
-          :triggers="[]"
-          :autoHide="false"
-          :flip="false"
-          :container="false"
-          @focus.capture="openLocaleSelector"
+      <rc-dropdown v-if="showLocale">
+        <rc-dropdown-trigger
+          data-testid="locale-selector"
+          link
+          class="baseline"
+          :aria-label="t('locale.menu')"
         >
-          <a
-            data-testid="locale-selector"
-            class="locale-chooser"
+          {{ selectedLocaleLabel }}
+          <template
+            v-if="showIcon"
+            #after
           >
-            {{ selectedLocaleLabel }}
-            <i
-              v-if="showIcon"
-              class="icon icon-fw icon-sort-down"
-            />
-          </a>
-          <template #popper>
-            <ul
-              class="list-unstyled dropdown"
-              style="margin: -1px;"
-            >
-              <li
-                v-if="showNone"
-                v-t="'locale.none'"
-                class="hand"
-                tabindex="0"
-                role="menuitem"
-                @click.stop="switchLocale('none')"
-                @keyup.enter.stop="switchLocale('none')"
-                @keyup.space.stop="switchLocale('none')"
-              />
-              <li
-                v-for="(label, name) in availableLocales"
-                :key="name"
-                tabindex="0"
-                role="menuitem"
-                class="hand"
-                :lang="name"
-                @click.stop="switchLocale(name)"
-                @keyup.enter.stop="switchLocale(name)"
-                @keyup.space.stop="switchLocale(name)"
-              >
-                {{ label }}
-              </li>
-            </ul>
+            <i class="icon icon-fw icon-sort-down" />
           </template>
-        </v-dropdown>
-      </div>
+        </rc-dropdown-trigger>
+        <template #dropdownCollection>
+          <rc-dropdown-item
+            v-if="showNone"
+            v-t="'locale.none'"
+            @click="switchLocale('none')"
+          />
+          <rc-dropdown-item
+            v-for="(label, name) in availableLocales"
+            :key="name"
+            :lang="name"
+            @click.stop="switchLocale(name)"
+          >
+            {{ label }}
+          </rc-dropdown-item>
+        </template>
+      </rc-dropdown>
     </div>
     <div v-else>
       <Select
@@ -142,36 +114,8 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped>
-.advanced {
-  user-select: none;
-  padding: 0 5px;
-  line-height: 40px;
-  font-size: 15px;
-  font-weight: 500;
-}
-.content {
-  background: var(--nav-active);
-  padding: 10px;
-  margin-top: 6px;
-  border-radius: 4px;
-}
-
-.hand:focus-visible {
-  @include focus-outline;
-  outline-offset: 4px;
-}
-
-.locale-chooser {
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: none;
+<style lang="scss">
+  .baseline {
+    align-items: baseline;
   }
-}
-
-.locale-login-container:focus-visible {
-  @include focus-outline;
-  outline-offset: 2px;
-}
 </style>

package/components/ModalWithCard.vue

@@ -65,6 +65,7 @@ export default {
     v-bind="$attrs"
     class="modal"
     data-testid="mvc__card"
+    :trigger-focus-trap="true"
     @close="$emit('finish', $event)"
   >
     <Card

package/components/MoveModal.vue

@@ -93,6 +93,7 @@ export default {
     :name="modalName"
     :width="440"
     height="auto"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Loading v-if="$fetchState.pending" />

package/components/PromptRemove.vue

@@ -339,6 +339,7 @@ export default {
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card
@@ -354,7 +355,7 @@ export default {
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-              v-clean-html="resourceNames(names, t)"
+              v-clean-html="resourceNames(names, null, t)"
             />
           </template>
 

package/components/PromptRestore.vue

@@ -213,6 +213,7 @@ export default {
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card

package/components/ResourceCancelModal.vue

@@ -56,6 +56,7 @@ export default {
     name="cancel-modal"
     :width="440"
     height="auto"
+    :trigger-focus-trap="true"
     @close="cancelCancel"
   >
     <div class="header">

package/components/SortableTable/index.vue

@@ -1,6 +1,6 @@
 <script>
-import { mapGetters } from 'vuex';
-import { defineAsyncComponent, useTemplateRef, onMounted, onBeforeUnmount } from 'vue';
+import { mapGetters, useStore } from 'vuex';
+import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
@@ -24,6 +24,7 @@ import { getParent } from '@shell/utils/dom';
 import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -528,7 +529,7 @@ export default {
     },
   },
   setup(_props, { emit }) {
-    const table = useTemplateRef('table');
+    const table = ref(null);
 
     const handleEnterKey = (event) => {
       if (event.key === 'Enter' && !event.target?.classList?.contains('checkbox-custom')) {
@@ -543,6 +544,14 @@ export default {
     onBeforeUnmount(() => {
       table.value.removeEventListener('keyup', handleEnterKey);
     });
+
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return {
+      table,
+      featureDropdownMenu,
+    };
   },
 
   created() {
@@ -763,7 +772,7 @@ export default {
       });
 
       return rows;
-    }
+    },
   },
 
   methods: {
@@ -1447,9 +1456,9 @@ export default {
                           :value="col.value"
                           :row="row.row"
                           :col="col.col"
+                          :get-custom-detail-link="getCustomDetailLink"
                           v-bind="col.col.formatterOpts"
                           :row-key="row.key"
-                          :get-custom-detail-link="getCustomDetailLink"
                         />
                         <component
                           :is="col.component"
@@ -1487,11 +1496,27 @@ export default {
                     :row="row.row"
                     :index="i"
                   >
-                    <ActionMenu
-                      :resource="row.row"
-                      :data-testid="componentTestid + '-' + i + '-action-button'"
-                      :button-aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
-                    />
+                    <template v-if="featureDropdownMenu">
+                      <ActionMenu
+                        :resource="row.row"
+                        :data-testid="componentTestid + '-' + i + '-action-button'"
+                        :button-aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
+                      />
+                    </template>
+                    <template v-else>
+                      <ButtonMultiAction
+                        :id="`actionButton+${i}+${(row.row && row.row.name) ? row.row.name : ''}`"
+                        :ref="`actionButton${i}`"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        :aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
+                        :data-testid="componentTestid + '-' + i + '-action-button'"
+                        :borderless="true"
+                        @click="handleActionButtonClick(i, $event)"
+                        @keyup.enter="handleActionButtonClick(i, $event)"
+                        @keyup.space="handleActionButtonClick(i, $event)"
+                      />
+                    </template>
                   </slot>
                 </td>
               </tr>

package/components/StatusBadge.vue

@@ -19,10 +19,16 @@ const STATUS = {
   }
 };
 
-const { status = 'success', label } = defineProps<{
-  status?: 'success' | 'warning' | 'info' | 'error',
-  label?: string
-}>();
+withDefaults(
+  defineProps<{
+    status?: 'success' | 'warning' | 'info' | 'error',
+    label?: string
+  }>(),
+  {
+    status: 'success',
+    label:  '',
+  }
+);
 
 </script>
 <template>

package/components/__tests__/AsyncButton.test.ts

@@ -42,7 +42,7 @@ describe('component: AsyncButton', () => {
     expect(span.text()).toBe('some-string');
   });
 
-  it('click on async button should emit click with a proper state of waiting, disabled and spinning ::: CB true', () => {
+  it('click on async button should emit click with a proper state of waiting, appear disabled and spinning ::: CB true', () => {
     jest.useFakeTimers();
 
     const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
@@ -65,7 +65,7 @@ describe('component: AsyncButton', () => {
     expect(wrapper.emitted('click')).toHaveLength(1);
     expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.WAITING);
     expect(wrapper.vm.isSpinning).toBe(true);
-    expect(wrapper.vm.isDisabled).toBe(true);
+    expect(wrapper.vm.appearsDisabled).toBe(true);
     // testing cb function has been emitted
     expect(typeof wrapper.emitted('click')![0][0]).toBe('function');
 

package/components/auth/Principal.vue

@@ -98,9 +98,9 @@ export default {
       >
         <table>
           <tbody>
-            <tr><td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td></tr>
-            <tr><td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td></tr>
-            <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
+            <tr><th>{{ t('principal.name') }}: </th><td>{{ principal.name || principal.loginName }}</td></tr>
+            <tr><th>{{ t('principal.loginName') }}: </th><td>{{ principal.loginName }}</td></tr>
+            <tr><th>{{ t('principal.type') }}: </th><td>{{ principal.displayType }}</td></tr>
           </tbody>
         </table>
       </div>
@@ -164,6 +164,12 @@ export default {
     grid-template-rows: auto math.div($size, 2);
     column-gap: 10px;
 
+    th {
+      text-align: left;
+      font-weight: normal;
+      padding-right: 10px;
+    }
+
     &.showLabels {
       grid-template-areas:
         "avatar name";

package/components/auth/__tests__/RoleDetailEdit.test.ts

@@ -51,8 +51,9 @@ describe('component: RoleDetailEdit', () => {
     const wrapper = mount(RoleDetailEdit, {
       props: {
         value: {
-          rules:   [{ verbs }],
-          subtype: 'GLOBAL'
+          rules:    [{ verbs }],
+          subtype:  'GLOBAL',
+          metadata: { name: 'global-role-with-inherited' },
         },
       },
 

package/components/form/ArrayList.vue

@@ -1,4 +1,5 @@
 <script>
+import { ref, watch, computed } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { removeAt } from '@shell/utils/array';
@@ -94,22 +95,83 @@ export default {
       // we only want functions in the rules array
       validator: (rules) => rules.every((rule) => ['function'].includes(typeof rule))
     },
+    a11yLabel: {
+      type:    String,
+      default: '',
+    },
   },
-  data() {
-    const input = (Array.isArray(this.value) ? this.value : []).slice();
-    const rows = [];
+
+  setup(props, { emit }) {
+    const input = (Array.isArray(props.value) ? props.value : []).slice();
+    const rows = ref([]);
 
     for ( const value of input ) {
-      rows.push({ value });
+      rows.value.push({ value });
     }
-    if ( !rows.length && this.initialEmptyRow ) {
-      const value = this.defaultAddValue ? clone(this.defaultAddValue) : '';
+    if ( !rows.value.length && props.initialEmptyRow ) {
+      const value = props.defaultAddValue ? clone(props.defaultAddValue) : '';
 
-      rows.push({ value });
+      rows.value.push({ value });
     }
 
-    return { rows, lastUpdateWasFromValue: false };
+    const isView = computed(() => {
+      return props.mode === _VIEW;
+    });
+
+    /**
+     * Cleanup rows and emit input
+     */
+    const update = () => {
+      if ( isView.value ) {
+        return;
+      }
+      const out = [];
+
+      for ( const row of rows.value ) {
+        const trim = !props.valueMultiline && (typeof row.value === 'string');
+        const value = trim ? row.value.trim() : row.value;
+
+        if ( typeof value !== 'undefined' ) {
+          out.push(value);
+        }
+      }
+      emit('update:value', out);
+    };
+
+    const lastUpdateWasFromValue = ref(false);
+    const queueUpdate = debounce(update, 50);
+
+    watch(
+      rows,
+      () => {
+        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
+        // this was called which then forced rows to updated again
+        if (!lastUpdateWasFromValue.value) {
+          queueUpdate();
+        }
+        lastUpdateWasFromValue.value = false;
+      },
+      { deep: true }
+    );
+
+    watch(
+      () => props.value,
+      () => {
+        lastUpdateWasFromValue.value = true;
+        rows.value = (props.value || []).map((v) => ({ value: v }));
+      },
+      { deep: true }
+    );
+
+    return {
+      rows,
+      lastUpdateWasFromValue,
+      queueUpdate,
+      isView,
+      update,
+    };
   },
+
   computed: {
     _addLabel() {
       return this.addLabel || this.t('generic.add');
@@ -117,10 +179,6 @@ export default {
     _removeLabel() {
       return this.removeLabel || this.t('generic.remove');
     },
-
-    isView() {
-      return this.mode === _VIEW;
-    },
     showAdd() {
       return this.addAllowed;
     },
@@ -141,29 +199,7 @@ export default {
       return !this.valueMultiline && this.protip;
     }
   },
-  watch: {
-    value: {
-      deep: true,
-      handler() {
-        this.lastUpdateWasFromValue = true;
-        this.rows = (this.value || []).map((v) => ({ value: v }));
-      }
-    },
-
-    rows: {
-      deep: true,
-      handler(newValue, oldValue) {
-        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
-        // this was called which then forced rows to updated again
-        if (!this.lastUpdateWasFromValue) {
-          this.queueUpdate();
-        }
-        this.lastUpdateWasFromValue = false;
-      }
-    }
-  },
   created() {
-    this.queueUpdate = debounce(this.update, 50);
   },
   methods: {
     add() {
@@ -189,26 +225,6 @@ export default {
       this.queueUpdate();
     },
 
-    /**
-     * Cleanup rows and emit input
-     */
-    update() {
-      if ( this.isView ) {
-        return;
-      }
-      const out = [];
-
-      for ( const row of this.rows ) {
-        const trim = !this.valueMultiline && (typeof row.value === 'string');
-        const value = trim ? row.value.trim() : row.value;
-
-        if ( typeof value !== 'undefined' ) {
-          out.push(value);
-        }
-      }
-      this.$emit('update:value', out);
-    },
-
     /**
      * Handle paste event, e.g. split multiple lines in rows
      */
@@ -316,6 +332,7 @@ export default {
                 :data-testid="`input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
+                :aria-label="a11yLabel ? a11yLabel : undefined"
                 @paste="onPaste(idx, $event)"
               >
             </slot>
@@ -336,6 +353,8 @@ export default {
               :disabled="isView"
               class="btn role-link"
               :data-testid="`remove-item-${idx}`"
+              :aria-label="`${_removeLabel} ${idx + 1}`"
+              role="button"
               @click="remove(row, idx)"
             >
               {{ _removeLabel }}
@@ -368,6 +387,8 @@ export default {
           class="btn role-tertiary add"
           :disabled="loading || disableAdd"
           data-testid="array-list-button"
+          :aria-label="_addLabel"
+          role="button"
           @click="add()"
         >
           <i

package/components/form/Command.vue

@@ -43,23 +43,14 @@ export default {
   },
 
   data() {
-    const {
-      command,
-      args,
-      workingDir,
-      stdin = false,
-      stdinOnce = false,
-      tty = false,
-    } = this.value;
-
     return {
-      args,
-      command,
+      args:           this.value.args,
+      command:        this.value.command,
       commandOptions: ['No', 'Once', 'Yes'],
-      stdin,
-      stdinOnce,
-      tty,
-      workingDir,
+      stdin:          this.value.stdin || false,
+      stdinOnce:      this.value.stdin || false,
+      tty:            this.value.tty || false,
+      workingDir:     this.value.workingDir,
     };
   },
 

package/components/form/EnvVars.vue

@@ -39,14 +39,10 @@ export default {
   },
 
   data() {
-    const { env = [], envFrom = [] } = this.value;
-
-    const allEnv = [...env, ...envFrom].map((row) => {
-      return { value: row, id: randomStr(4) };
-    });
-
     return {
-      env, envFrom, allEnv
+      env:     [],
+      envFrom: [],
+      allEnv:  [],
     };
   },
 
@@ -63,7 +59,18 @@ export default {
       }
     }
   },
+
   created() {
+    const { env = [], envFrom = [] } = this.value;
+
+    const allEnv = [...env, ...envFrom].map((row) => {
+      return { value: row, id: randomStr(4) };
+    });
+
+    this.env = env;
+    this.envFrom = envFrom;
+    this.allEnv = allEnv;
+
     this.queueUpdate = debounce(this.update, 500);
   },
 
@@ -107,7 +114,7 @@ export default {
   <div :style="{'width':'100%'}">
     <div
       v-for="(row, i) in allEnv"
-      :key="i"
+      :key="row.id"
     >
       <ValueFromResource
         v-model:value="row.value"

package/components/form/HealthCheck.vue

@@ -18,10 +18,10 @@ export default {
   },
 
   data() {
-    const { readinessProbe, livenessProbe, startupProbe } = this.value;
-
     return {
-      readinessProbe, livenessProbe, startupProbe
+      readinessProbe: this.value.readinessProbe,
+      livenessProbe:  this.value.livenessProbe,
+      startupProbe:   this.value.startupProbe,
     };
   },