@rancher/shell 3.0.3 → 3.0.4

package/assets/translations/en-us.yaml

@@ -2521,6 +2521,7 @@ fleet:
       placeholder: "Paste in one or more certificates, starting with -----BEGIN CERTIFICATE----"
     paths:
       label: Paths
+      ariaLabel: Enter path for Git Repo
       placeholder: e.g. /directory/in/your/repo
       addLabel: Add Path
       empty: The root of the repo is used by default. Multiple different directories can be provided.

package/components/PromptRemove.vue

@@ -354,7 +354,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/SortableTable/index.vue

@@ -1,7 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
-import { defineAsyncComponent, useTemplateRef, onMounted, onBeforeUnmount } from 'vue';
+import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
+import semver from 'semver';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
 import { get, clone } from '@shell/utils/object';
@@ -24,6 +25,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 { getVersionInfo } from '@shell/utils/version';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -528,7 +530,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 +545,8 @@ export default {
     onBeforeUnmount(() => {
       table.value.removeEventListener('keyup', handleEnterKey);
     });
+
+    return { table };
   },
 
   created() {
@@ -763,6 +767,12 @@ export default {
       });
 
       return rows;
+    },
+
+    featureDropdownMenu() {
+      const { fullVersion } = getVersionInfo(this.$store);
+
+      return semver.gte(semver.coerce(fullVersion).version, '2.11.0');
     }
   },
 
@@ -1487,11 +1497,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/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/form/ArrayList.vue

@@ -94,6 +94,10 @@ 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();
@@ -316,6 +320,7 @@ export default {
                 :data-testid="`input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
+                :aria-label="a11yLabel ? a11yLabel : undefined"
                 @paste="onPaste(idx, $event)"
               >
             </slot>
@@ -336,6 +341,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 +375,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/KeyValue.vue

@@ -823,7 +823,7 @@ export default {
                   type="button"
                   role="button"
                   :disabled="isView || isProtected(row.key) || disabled"
-                  :aria-label="removeLabel || t('generic.remove')"
+                  :aria-label="`${removeLabel || t('generic.remove')} ${ i+1 }`"
                   class="btn role-link"
                   @click="remove(i)"
                 >

package/dialog/DeactivateDriverDialog.vue

@@ -31,12 +31,12 @@ export default {
   },
   computed: {
     formattedText() {
-      const namesSliced = this.drivers.map((obj) => obj.nameDisplay);
-      const count = namesSliced.length;
-      const remaining = namesSliced.length > 5 ? namesSliced.length - 5 : 0;
+      const driverNames = this.drivers.map((obj) => obj.nameDisplay);
+      const count = driverNames.length;
+      const remaining = driverNames.length > 5 ? driverNames.length - 5 : 0;
 
       const plusMore = this.t('drivers.deactivate.andOthers', { count: remaining });
-      const names = resourceNames(namesSliced, this.t, { plusMore, endString: false });
+      const names = resourceNames(driverNames, plusMore, this.t, false);
       const warningDrivers = this.t('drivers.deactivate.warningDrivers', { names, count });
 
       return this.t('drivers.deactivate.warning', { warningDrivers, count });

package/dialog/GitRepoForceUpdateDialog.vue

@@ -84,7 +84,7 @@ export default {
     <template #body>
       <div class="mb-20">
         {{ t('fleet.gitRepo.actions.forceUpdate.promptNames') }} <span
-          v-clean-html="resourceNames(names, t)"
+          v-clean-html="resourceNames(names, null, t)"
           class="body"
         />
       </div>

package/edit/fleet.cattle.io.gitrepo.vue

@@ -659,6 +659,7 @@ export default {
         :initial-empty-row="false"
         :value-placeholder="t('fleet.gitRepo.paths.placeholder')"
         :add-label="t('fleet.gitRepo.paths.addLabel')"
+        :a11y-label="t('fleet.gitRepo.paths.ariaLabel')"
         :add-icon="'icon-plus'"
         :protip="t('fleet.gitRepo.paths.empty')"
       />

package/machine-config/__tests__/vmwarevsphere.test.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import vmwarevsphere from '@shell/machine-config/vmwarevsphere.vue';
 import { DEFAULT_VALUES, SENTINEL } from '@shell/machine-config/vmwarevsphere-config';
 
@@ -172,12 +172,12 @@ describe('component: vmwarevsphere', () => {
         name:     'tag_name',
         category: 'tag_category',
       };
-      const expectedReslut = [{
+      const expectedResult = [{
         ...tag, label: `${ tag.category } / ${ tag.name }`, value: tag.id
       }];
       const wrapper = mount(vmwarevsphere, defaultCreateSetup);
 
-      expect(wrapper.vm.mapTagsToContent([tag])).toStrictEqual(expectedReslut);
+      expect(wrapper.vm.mapTagsToContent([tag])).toStrictEqual(expectedResult);
     });
   });
 
@@ -254,4 +254,49 @@ describe('component: vmwarevsphere', () => {
       });
     });
   });
+
+  describe('syncNetworkValueForLegacyLabels', () => {
+    it('should update the current network value properly', () => {
+      const legacyName = 'legacy_name';
+      const legacyValue = 'legacy_value';
+      const networkLabel = 'network_label';
+
+      const wrapper = shallowMount(vmwarevsphere, {
+        ...defaultEditSetup,
+        propsData: {
+          ...defaultEditSetup.propsData,
+          value: {
+            ...defaultEditSetup.propsData.value,
+            network: [legacyName]
+          }
+        },
+        computed: {
+          networks: () => [
+            {
+              name: legacyName, label: networkLabel, value: legacyValue
+            },
+            {
+              name: 'name1', label: 'label1', value: 'value1'
+            },
+            {
+              name: 'name2', label: 'label2', value: 'value2'
+            },
+            {
+              name: 'name3', label: 'label3', value: 'value3'
+            },
+            {
+              name: 'name4', label: 'label4', value: 'value4'
+            },
+          ]
+        }
+      });
+
+      // check the current network before updating
+      expect(wrapper.vm.value.network).toStrictEqual([legacyName]);
+
+      wrapper.vm.syncNetworkValueForLegacyLabels();
+
+      expect(wrapper.vm.value.network).toStrictEqual([legacyValue]);
+    });
+  });
 });

package/machine-config/vmwarevsphere.vue

@@ -558,6 +558,7 @@ export default {
       this.resetValueIfNecessary('network', content, options, true);
 
       set(this, 'networksResults', content);
+      this.syncNetworkValueForLegacyLabels();
       this.vappMode = this.getInitialVappMode(this.value);
     },
 
@@ -669,6 +670,21 @@ export default {
       }
     },
 
+    // Network labels have been updated to include the MOID.
+    // To ensure previously selected networks remain consistent with this change,
+    // we update the current network value to allow correct selection from the network list.
+    syncNetworkValueForLegacyLabels() {
+      const currentNetwork = this.value.network[0];
+
+      if (this.mode !== _CREATE && currentNetwork) {
+        const networkMatch = this.networks.find((network) => currentNetwork === network.name && currentNetwork !== network.label);
+
+        if (networkMatch) {
+          this.value.network = [networkMatch.value];
+        }
+      }
+    },
+
     mapPathOptionsToContent(pathOptions) {
       return (pathOptions || []).map((pathOption) => {
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "add": "2.0.6",
     "ansi_up": "5.0.0",
     "axios-retry": "3.1.9",
-    "axios": "0.21.4",
+    "axios": "1.8.4",
     "babel-eslint": "10.1.0",
     "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-vue": "2.0.2",

package/pages/about.vue

@@ -119,8 +119,12 @@ export default {
     <table>
       <thead>
         <tr>
-          <th>{{ t('about.versions.component') }}</th>
-          <th>{{ t('about.versions.version') }}</th>
+          <th class="custom-th">
+            {{ t('about.versions.component') }}
+          </th>
+          <th class="custom-th">
+            {{ t('about.versions.version') }}
+          </th>
         </tr>
       </thead>
       <tr v-if="rancherVersion">
@@ -210,11 +214,11 @@ export default {
           v-for="(d, i) in downloadImageList"
           :key="i"
         >
-          <td>
+          <th>
             <div class="os">
               <i :class="`icon ${d.icon} mr-5`" /> {{ t(d.label) }}
             </div>
-          </td>
+          </th>
           <td>
             <a
               v-if="d.imageList"
@@ -241,11 +245,11 @@ export default {
           :key="i"
           class="link"
         >
-          <td>
+          <th>
             <div class="os">
               <i :class="`icon ${d.icon} mr-5`" /> {{ t(d.label) }}
             </div>
-          </td>
+          </th>
           <td>
             <a
               v-if="d.cliLink"
@@ -273,7 +277,7 @@ export default {
     overflow: hidden;
     border-radius: var(--border-radius);
 
-    tr > td:first-of-type {
+    tr > th:first-of-type {
       width: 20%;
     }
 
@@ -284,11 +288,15 @@ export default {
       text-align: left;
     }
 
-    th {
+    th.custom-th {
       background-color: var(--sortable-table-top-divider);
       border-bottom: 1px solid var(--sortable-table-top-divider);
     }
 
+    th:not(.custom-th) {
+      font-weight: normal;
+    }
+
     a {
       cursor: pointer;
     }

package/promptRemove/management.cattle.io.fleetworkspace.vue

@@ -71,7 +71,7 @@ export default {
   <div class="mt-10">
     <div class="mb-10">
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-clean-html="resourceNames(names, t)"
+        v-clean-html="resourceNames(names, null, t)"
         class="description"
       />
     </div>

package/promptRemove/management.cattle.io.globalrole.vue

@@ -21,7 +21,7 @@ export default {
 
 <template>
   <div>
-    {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-clean-html="resourceNames(names, t)" />
+    {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-clean-html="resourceNames(names, null, t)" />
     <div
       v-if="info"
       class="text info mb-10 mt-20"

package/promptRemove/management.cattle.io.project.vue

@@ -94,7 +94,7 @@ export default {
         <template v-if="!canSeeProjectlessNamespaces">
           <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br>
           <div
-            v-clean-html="resourceNames(names, t)"
+            v-clean-html="resourceNames(names, null, t)"
             class="mt-10"
           />
         </template>
@@ -108,7 +108,7 @@ export default {
           :label="t('promptRemove.deleteAssociatedNamespaces')"
         />
         <div class="mt-10 ml-20">
-          <span v-clean-html="resourceNames(names, t)" />
+          <span v-clean-html="resourceNames(names, null, t)" />
         </div>
       </div>
     </div>

package/promptRemove/management.cattle.io.roletemplate.vue

@@ -22,7 +22,7 @@ export default {
 <template>
   <div>
     {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-      v-clean-html="resourceNames(names, t)"
+      v-clean-html="resourceNames(names, null, t)"
     />
     <div
       v-if="info"

package/promptRemove/pod.vue

@@ -98,7 +98,7 @@ export default {
   <div class="mt-10">
     <div class="mb-30">
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-clean-html="resourceNames(names, t)"
+        v-clean-html="resourceNames(names, null, t)"
         class="body"
       />
     </div>

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
+import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';
 
 type StateType = boolean | 'true' | 'false' | undefined;
 
@@ -34,7 +34,7 @@ export default defineComponent({
   emits: ['update:value'],
 
   setup() {
-    const switchChrome = useTemplateRef<HTMLElement>('switchChrome');
+    const switchChrome = ref<HTMLElement | null>(null);
     const focus = () => {
       switchChrome.value?.classList.add('focus');
     };
@@ -43,7 +43,7 @@ export default defineComponent({
       switchChrome.value?.classList.remove('focus');
     };
 
-    const switchInput = useTemplateRef<HTMLInputElement>('switchInput');
+    const switchInput = ref<HTMLInputElement | null>(null);
 
     onMounted(() => {
       switchInput.value?.addEventListener('focus', focus);

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -20,7 +20,7 @@
  *    </template>
  *  </rc-dropdown>
  */
-import { useTemplateRef } from 'vue';
+import { ref } from 'vue';
 import { useClickOutside } from '@shell/composables/useClickOutside';
 import { useDropdownContext } from '@components/RcDropdown/useDropdownContext';
 
@@ -42,8 +42,8 @@ const {
 
 provideDropdownContext();
 
-const popperContainer = useTemplateRef<HTMLElement>('popperContainer');
-const dropdownTarget = useTemplateRef<HTMLElement>('dropdownTarget');
+const popperContainer = ref(null);
+const dropdownTarget = ref(null);
 
 useClickOutside(dropdownTarget, () => showMenu(false));
 

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -8,8 +8,10 @@ import {
 import { RcDropdownMenuComponentProps, DropdownOption } from './types';
 import IconOrSvg from '@shell/components/IconOrSvg';
 
-// eslint-disable-next-line vue/no-setup-props-destructure
-const { buttonRole = 'primary', buttonSize = '' } = defineProps<RcDropdownMenuComponentProps>();
+withDefaults(defineProps<RcDropdownMenuComponentProps>(), {
+  buttonRole: 'primary',
+  buttonSize: undefined,
+});
 
 const emit = defineEmits(['update:open', 'select']);
 

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -2,7 +2,7 @@
 /**
  * A button that opens a menu. Used in conjunction with `RcDropdown.vue`.
  */
-import { inject, onMounted, useTemplateRef } from 'vue';
+import { inject, onMounted, ref } from 'vue';
 import { RcButton, RcButtonType } from '@components/RcButton';
 import { DropdownContext, defaultContext } from './types';
 
@@ -13,7 +13,7 @@ const {
   handleKeydown,
 } = inject<DropdownContext>('dropdownContext') || defaultContext;
 
-const dropdownTrigger = useTemplateRef<RcButtonType>('dropdownTrigger');
+const dropdownTrigger = ref<RcButtonType | null>(null);
 
 onMounted(() => {
   registerTrigger(dropdownTrigger.value);

package/types/shell/index.d.ts

@@ -4361,7 +4361,7 @@ export function random32(count: any): number | number[];
 export function randomStr(length?: number, chars?: string): any;
 export function formatPercent(value: any, maxPrecision?: number): string;
 export function pluralize(str: any): any;
-export function resourceNames(names: any, t: any, options?: {}): any;
+export function resourceNames(names: any, plusMore: any, t: any, endString: any): any;
 export function indent(lines: any, count?: number, token?: string, afterRegex?: any): any;
 export function decamelize(str: any): any;
 export function dasherize(str: any): any;

package/utils/__tests__/string.test.ts

@@ -81,9 +81,9 @@ describe('fx: resourceNames', () => {
     it.each(args)(`having: %p`, (
       names,
       expectation,
-      options,
+      options: any,
     ) => {
-      const result = resourceNames(names, t, options);
+      const result = resourceNames(names, options.plusMore, t, options.endString);
 
       expect(result).toStrictEqual(expectation);
     });

package/utils/string.js

@@ -151,11 +151,9 @@ export function pluralize(str) {
   }
 }
 
-export function resourceNames(names, t, options = {}) {
+export function resourceNames(names, plusMore, t, endString) {
   const MAX_NAMES_COUNT = 5;
 
-  let { plusMore, endString } = options;
-
   // plusMore default value
   if (!plusMore) {
     plusMore = t('promptRemove.andOthers', { count: names.length > MAX_NAMES_COUNT ? names.length - MAX_NAMES_COUNT : 0 });