@rancher/shell 3.0.2-rc.4 → 3.0.2-rc.5

package/assets/translations/en-us.yaml

@@ -17,6 +17,7 @@ generic:
   comma: ', '
   copy: Copy
   copyToClipboard: Copy text to Clipboard
+  copiedToClipboard: Text copied to Clipboard
   create: Create
   created: Created
   customize: Customize
@@ -950,6 +951,7 @@ catalog:
     experimentalWarning: '{chartName} has been marked as experimental. Use caution when installing this helm chart as it might not function as expected.'
     deprecatedAndExperimentalWarning: '{chartName} has been marked as deprecated and experimental. Use caution when installing this helm chart as it might be removed in the future and might not function as expected.'
   charts:
+    iconAlt: Icon for {app} card/grid item
     refresh: refresh charts
     all: All
     categories:
@@ -1133,6 +1135,7 @@ catalog:
       label: Refresh Interval
       placeholder: 'default: {hours}'
   tools:
+    iconAlt: Icon for {app} Cluster Tool
     header: Cluster Tools
     noTools: "No Cluster Tools found"
     action:
@@ -4376,6 +4379,7 @@ inactivity:
 
 # Rancher Extensions
 plugins:
+  altIcon: Icon for {extension} extension card
   incompatibleRancherVersion: "The latest version of this extension ({ version }) is not compatible with the current Rancher version ({ required })."
   incompatibleKubeVersion: "The latest version of this extension ({ version }) is not compatible with the current Kube version ({ required })."
   incompatibleUiExtensionsApiVersionMissing: 'The latest version of this extension ({ version }) is missing the mandatory annotation catalog.cattle.io/ui-extensions-version from Rancher 2.10 and onwards.'
@@ -4711,6 +4715,7 @@ projectMembers:
     workloadsView: View Workloads
 
 projectNamespaces:
+  tableActionsLabel: More actions for project { resource }
   createNamespace: Create Namespace
   createProject: Create Project
   label: Projects/Namespaces
@@ -5386,6 +5391,8 @@ setup:
   welcome: Welcome to {vendor}!
 
 sortableTable:
+  tableActionsLabel: More actions - { resource }
+  tableActionsImgAlt: More actions icon
   bulkActions:
     collapsed:
       label: Actions
@@ -6200,6 +6207,8 @@ wm:
     disconnected: Disconnected
     error: Error
   containerLogs:
+    options: Additional container logs options
+    expand: Expand additional container logs options
     clear: Clear
     containerName: "Container: {label}"
     download: Download
@@ -6226,6 +6235,9 @@ wm:
     timestamps: Show Timestamps
     wrap: Wrap Lines
   containerShell:
+    resizeShellWindow: Resize Shell window
+    tabIcon: Shell tab icon
+    closeShellTab: Close Shell tab - {tab}
     clear: Clear
     containerName: "Container: {label}"
     failed: "Unable to open a shell to the container (none of the shell commands succeeded)\n\r"
@@ -7498,6 +7510,7 @@ advancedSettings:
   none: None
   modified: Modified
   edit:
+    moreActions: More actions for setting - { setting }
     label: Edit Setting
     changeSetting: "Change Setting:"
     trueOption: "True"

package/components/ButtonGroup.vue

@@ -64,6 +64,12 @@ export default {
   methods: {
     change(value) {
       this.$emit('update:value', value);
+    },
+    actionDescription(opt) {
+      const tooltip = opt.tooltipKey ? this.t(opt.tooltipKey) : opt.tooltip;
+      const label = opt.labelKey ? this.t(opt.labelKey) : opt.label;
+
+      return tooltip || label || '';
     }
   }
 };
@@ -83,7 +89,7 @@ export default {
       :class="opt.class"
       :disabled="disabled || opt.disabled"
       role="button"
-      :aria-label="opt.labelKey ? t(opt.labelKey) : opt.label"
+      :aria-label="actionDescription(opt)"
       @click="change(opt.value)"
     >
       <slot
@@ -94,6 +100,7 @@ export default {
         <i
           v-if="opt.icon"
           :class="{icon: true, [opt.icon]: true, [`icon-${iconSize}`]: !!iconSize }"
+          :alt="actionDescription(opt)"
         />
         <t
           v-if="opt.labelKey"

package/components/ButtonMultiAction.vue

@@ -22,10 +22,14 @@ const buttonClass = computed(() => {
   <button
     type="button"
     class="btn btn-sm role-multi-action actions"
+    role="button"
     :class="buttonClass"
     @click="(e: Event) => $emit('click', e)"
   >
-    <i class="icon icon-actions" />
+    <i
+      class="icon icon-actions"
+      :alt="t('sortableTable.tableActionsImgAlt')"
+    />
   </button>
 </template>
 

package/components/CopyToClipboardText.vue

@@ -55,9 +55,11 @@ export default {
     @click="clicked"
     @keyup.space="clicked"
   >
-    {{ text }} <i
+    {{ text }}
+    <i
       class="icon"
       :class="{ 'icon-copy': !copied, 'icon-checkmark': copied}"
+      :alt="!copied ? t('generic.copyToClipboard') : t('generic.copiedToClipboard')"
     />
   </a>
 </template>

package/components/ExplorerProjectsNamespaces.vue

@@ -368,6 +368,12 @@ export default {
       return project?.description;
     },
 
+    projectResource(group) {
+      const row = group.rows[0];
+
+      return row.nameDisplay || row.id || '';
+    },
+
     clearSelection() {
       this.$refs.table.clearSelection();
     },
@@ -462,6 +468,7 @@ export default {
             <ButtonMultiAction
               class="project-action mr-10"
               :borderless="true"
+              :aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
               :invisible="!showProjectActionButton(group.group)"
               @click="showProjectAction($event, group.group)"
             />

package/components/ResourceTable.vue

@@ -190,20 +190,6 @@ export default {
     },
   },
 
-  mounted() {
-    /**
-     * v-shortkey prevents the event's propagation:
-     * https://github.com/fgr-araujo/vue-shortkey/blob/55d802ea305cadcc2ea970b55a3b8b86c7b44c05/src/index.js#L156-L157
-     *
-     * 'Enter' key press is handled via event listener in order to allow the event propagation
-     */
-    window.addEventListener('keyup', this.handleEnterKeyPress);
-  },
-
-  beforeUnmount() {
-    window.removeEventListener('keyup', this.handleEnterKeyPress);
-  },
-
   data() {
     // Confirm which store we're in, if schema isn't available we're probably showing a list with different types
     const inStore = this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined;
@@ -602,6 +588,7 @@ export default {
     :mandatory-sort="_mandatorySort"
     @clickedActionButton="handleActionButtonClick"
     @group-value-change="group = $event"
+    @enter="handleEnterKeyPress"
   >
     <template
       v-if="showGrouping"

package/components/SelectIconGrid.vue

@@ -148,10 +148,12 @@ export default {
         <i
           v-if="r.iconClass"
           :class="r.iconClass"
+          :alt="t('catalog.charts.iconAlt', { app: get(r, nameField) })"
         />
         <LazyImage
           v-else
           :src="get(r, iconField)"
+          :alt="t('catalog.charts.iconAlt', { app: get(r, nameField) })"
         />
       </div>
       <h4 class="name">

package/components/SortableTable/index.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, useTemplateRef, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
@@ -42,7 +42,14 @@ import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 export default {
   name: 'SortableTable',
 
-  emits: ['clickedActionButton', 'pagination-changed', 'group-value-change', 'selection', 'rowClick'],
+  emits: [
+    'clickedActionButton',
+    'pagination-changed',
+    'group-value-change',
+    'selection',
+    'rowClick',
+    'enter',
+  ],
 
   components: {
     THead,
@@ -518,6 +525,23 @@ export default {
       immediate: true
     },
   },
+  setup(_props, { emit }) {
+    const table = useTemplateRef('table');
+
+    const handleEnterKey = (event) => {
+      if (event.key === 'Enter' && !event.target?.classList?.contains('checkbox-custom')) {
+        emit('enter', event);
+      }
+    };
+
+    onMounted(() => {
+      table.value.addEventListener('keyup', handleEnterKey);
+    });
+
+    onBeforeUnmount(() => {
+      table.value.removeEventListener('keyup', handleEnterKey);
+    });
+  },
 
   created() {
     this.debouncedRefreshTableData = debounce(this.refreshTableData, 500);
@@ -1056,6 +1080,7 @@ export default {
                 :disabled="!act.enabled"
                 :data-testid="componentTestid + '-' + act.action"
                 @click="applyTableAction(act, null, $event)"
+                @keydown.enter.stop
                 @mouseover="setBulkActionOfInterest(act)"
                 @mouseleave="setBulkActionOfInterest(null)"
               >
@@ -1221,6 +1246,7 @@ export default {
       </div>
     </div>
     <table
+      ref="table"
       class="sortable-table"
       :class="classObject"
       width="100%"
@@ -1299,6 +1325,7 @@ export default {
         v-for="(groupedRows) in displayRows"
         v-else
         :key="groupedRows.key"
+        tabindex="-1"
         :class="{ group: groupBy }"
       >
         <slot
@@ -1350,7 +1377,8 @@ export default {
                   class="row-check"
                   align="middle"
                 >
-                  {{ row.mainRowKey }}<Checkbox
+                  {{ row.mainRowKey }}
+                  <Checkbox
                     class="selection-checkbox"
                     :data-node-id="row.key"
                     :data-testid="componentTestid + '-' + i + '-checkbox'"
@@ -1451,6 +1479,7 @@ export default {
                       :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)"

package/components/form/LabeledSelect.vue

@@ -291,7 +291,8 @@ export default {
     ]"
     :tabindex="isView || disabled ? -1 : 0"
     @click="focusSearch"
-    @keydown.enter.space.down="focusSearch"
+    @keydown.enter.down="focusSearch"
+    @keydown.space.prevent="focusSearch"
   >
     <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true }"

package/components/form/Select.vue

@@ -256,7 +256,8 @@ export default {
     }"
     :tabindex="disabled || isView ? -1 : 0"
     @click="focusSearch"
-    @keydown.enter.space.down="focusSearch"
+    @keydown.enter.down="focusSearch"
+    @keydown.space.prevent="focusSearch"
   >
     <v-select
       ref="select-input"

package/components/nav/WindowManager/ContainerLogs.vue

@@ -625,9 +625,19 @@ export default {
             placement="top"
             popperClass="containerLogsDropdown"
           >
-            <button class="btn bg-primary btn-cog">
-              <i class="icon icon-gear" />
-              <i class="icon icon-chevron-up" />
+            <button
+              class="btn bg-primary btn-cog"
+              role="button"
+              :aria-label="t('wm.containerLogs.options')"
+            >
+              <i
+                class="icon icon-gear"
+                :alt="t('wm.containerLogs.options')"
+              />
+              <i
+                class="icon icon-chevron-up"
+                :alt="t('wm.containerLogs.expand')"
+              />
             </button>
 
             <template #popper>

package/components/nav/WindowManager/index.vue

@@ -320,7 +320,10 @@ export default {
         @mousedown.prevent.stop="dragXStart($event)"
         @touchstart.prevent.stop="dragXStart($event)"
       >
-        <i class="icon icon-code" />
+        <i
+          class="icon icon-code"
+          :alt="t('wm.containerShell.resizeShellWindow')"
+        />
       </div>
       <div
         v-for="(tab, i) in tabs"
@@ -333,11 +336,13 @@ export default {
           v-if="tab.icon"
           class="icon"
           :class="{['icon-'+ tab.icon]: true}"
+          :alt="t('wm.containerShell.tabIcon')"
         />
         <span class="tab-label"> {{ tab.label }}</span>
         <i
           data-testid="wm-tab-close-button"
           class="closer icon icon-fw icon-x wm-closer-button"
+          :alt="t('wm.containerShell.closeShellTab', { tab: tab.label })"
           @click.stop="close(tab.id)"
         />
       </div>
@@ -348,7 +353,10 @@ export default {
         @touchstart.prevent.stop="dragYStart($event)"
         @click="toggle"
       >
-        <i class="icon icon-sort" />
+        <i
+          class="icon icon-sort"
+          :alt="t('wm.containerShell.resizeShellWindow')"
+        />
       </div>
       <div
         v-if="userPin == 'left'"
@@ -356,7 +364,10 @@ export default {
         @mousedown.prevent.stop="dragXStart($event)"
         @touchstart.prevent.stop="dragXStart($event)"
       >
-        <i class="icon icon-code" />
+        <i
+          class="icon icon-code"
+          :alt="t('wm.containerShell.resizeShellWindow')"
+        />
       </div>
     </div>
     <div

package/config/home-links.js

@@ -13,7 +13,7 @@ const DEFAULT_LINKS = [
   },
   {
     key:     'forums',
-    value:   'https://forums.rancher.com/',
+    value:   'https://forums.suse.com/',
     enabled: true,
   },
   {

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -173,7 +173,16 @@ export default {
   },
 
   data() {
-    const subType = this.$route.query[SUB_TYPE] || null;
+    let subType = null;
+
+    subType = this.$route.query[SUB_TYPE] || null;
+    if ( this.$route.query[SUB_TYPE]) {
+      subType = this.$route.query[SUB_TYPE];
+    } else if (this.value.isImported) {
+      subType = IMPORTED;
+    } else if (this.value.isLocal) {
+      subType = LOCAL;
+    }
     const rkeType = this.$route.query[RKE_TYPE] || null;
     const chart = this.$route.query[CHART] || null;
     const isImport = this.realMode === _IMPORT;
@@ -213,14 +222,6 @@ export default {
 
     emberLink() {
       if (this.value) {
-        // for imported and local clusters, set subtype using properties from prov cluster model
-        //
-        if (this.value.isImported) {
-          this.selectType(IMPORTED, false);
-        } else if (this.value.isLocal) {
-          this.selectType(LOCAL, false);
-        }
-
         // set subtype if editing EKS/GKE/AKS cluster -- this ensures that the component provided by extension is loaded instead of iframing old ember ui
         if (this.value.provisioner) {
           const matchingSubtype = this.subTypes.find((st) => DRIVER_TO_IMPORT[st.id.toLowerCase()] === this.value.provisioner.toLowerCase());
@@ -239,6 +240,7 @@ export default {
 
           return '';
         }
+
         // For custom RKE2 clusters, don't load an Ember page.
         // It should be the dashboard.
         if ( this.value.isRke2 && ((this.value.isCustom && this.mode === _EDIT) || (this.value.isCustom && this.as === _CONFIG && this.mode === _VIEW) || (this.subType || '').toLowerCase() === 'custom')) {

package/list/management.cattle.io.setting.vue

@@ -134,10 +134,13 @@ export default {
             type="button"
             class="btn btn-sm role-multi-action actions"
             role="button"
-            :aria-label="t('advancedSettings.edit.label')"
+            :aria-label="t('advancedSettings.edit.moreActions', { setting: setting.id })"
             @click="toggleActionMenu($event, setting)"
           >
-            <i class="icon icon-actions" />
+            <i
+              class="icon icon-actions"
+              :alt="t('advancedSettings.edit.moreActions', { setting: setting.id })"
+            />
           </button>
         </div>
       </div>

package/mixins/auth-config.js

@@ -166,7 +166,7 @@ export default {
               this.model.accessMode = 'unrestricted';
             }
             if (this.model.openLdapConfig && !this.showLdap) {
-              delete this.model.openLdapConfig;
+              this.model.openLdapConfig = null;
             }
             await this.model.save();
             await this.$store.dispatch('auth/test', { provider: this.model.id, body: this.model });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.2-rc.4",
+  "version": "3.0.2-rc.5",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/c/_cluster/apps/charts/chart.vue

@@ -169,6 +169,7 @@ export default {
             <LazyImage
               :src="chart.icon"
               class="logo"
+              :alt="t('catalog.charts.iconAlt', { app: chart.chartNameDisplay })"
             />
           </div>
           <h1>

package/pages/c/_cluster/explorer/tools/index.vue

@@ -309,9 +309,11 @@ export default {
             v-if="opt.chart.iconName"
             class="icon"
             :class="opt.chart.iconName"
+            :alt="t('catalog.tools.iconAlt', { app: opt.chart.chartNameDisplay })"
           />
           <LazyImage
             v-else
+            :alt="t('catalog.tools.iconAlt', { app: opt.chart.chartNameDisplay })"
             :src="opt.chart.icon"
           />
         </div>
@@ -347,6 +349,8 @@ export default {
           <template v-if="opt.blocked">
             <button
               v-clean-html="t('catalog.tools.action.install')"
+              role="button"
+              :aria-label="t('catalog.tools.action.install')"
               disabled="true"
               class="btn btn-sm role-primary"
             />
@@ -354,12 +358,19 @@ export default {
           <template v-else-if="opt.app">
             <button
               class="btn btn-sm role-secondary"
+              role="button"
+              :aria-label="t('catalog.tools.action.remove')"
               @click="remove(opt.app, $event)"
             >
-              <i class="icon icon-delete icon-lg" />
+              <i
+                class="icon icon-delete icon-lg"
+                :alt="t('catalog.tools.action.remove')"
+              />
             </button>
             <button
               v-clean-html="t('catalog.tools.action.edit')"
+              role="button"
+              :aria-label="t('catalog.tools.action.edit')"
               class="btn btn-sm role-secondary"
               @click="edit(opt.app)"
             />
@@ -367,6 +378,8 @@ export default {
           <template v-else>
             <button
               v-clean-html="t('catalog.tools.action.install')"
+              role="button"
+              :aria-label="t('catalog.tools.action.install')"
               class="btn btn-sm role-primary"
               @click="install(opt.chart)"
             />

package/pages/c/_cluster/uiplugins/index.vue

@@ -843,11 +843,13 @@ export default {
                   :error-src="defaultIcon"
                   :src="plugin.icon"
                   class="icon plugin-icon-img"
+                  :alt="t('plugins.altIcon', { extension: plugin.name })"
                 />
                 <img
                   v-else
                   :src="defaultIcon"
                   class="icon plugin-icon-img"
+                  :alt="t('plugins.altIcon', { extension: plugin.name })"
                 >
               </div>
               <!-- extension card -->

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -71,17 +71,6 @@ const handleActivate = (e: KeyboardEvent) => {
     e?.target?.click();
   }
 };
-
-/**
- * Handles keydown events to focus the dropdown item.
- * @param e - The Mouse event.
- */
-const handleMouseEnter = (e: MouseEvent) => {
-  if (e?.target instanceof HTMLElement) {
-    e?.target?.focus();
-  }
-};
-
 </script>
 
 <template>
@@ -95,7 +84,6 @@ const handleMouseEnter = (e: MouseEvent) => {
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
     @keydown.up.down.stop="handleKeydown"
-    @mouseenter="handleMouseEnter"
   >
     <slot name="default">
       <!--Empty slot content-->