@rancher/shell 3.0.3 → 3.0.5-rc.1

package/assets/styles/base/_basic.scss

@@ -144,3 +144,9 @@ HR.vertical {
 .force-wrap       { @include force-wrap }
 .bordered-section { @include bordered-section }
 .section-divider  { @include section-divider }
+
+fieldset {
+  border: 0;
+  padding: 0;
+  margin-inline: 0;
+}

package/assets/styles/global/_button.scss

@@ -215,6 +215,7 @@ fieldset[disabled] .btn {
     }
   }
 
+  .btn-disabled,
   .btn[disabled] {
     // Ensure disabled button's border remains as-is, otherwise button appears vertically shorter than others in group
     border: inherit;

package/assets/translations/en-us.yaml

@@ -158,6 +158,7 @@ nav:
   alt:
     mainMenuIcon: Main menu icon
     mainMenuRancherLogo: Main menu Rancher logo
+    userAvatar: User avatar image
   expandCollapseAppBar: Expand/Collapse the Application Bar
   harvesterDashboard: Harvester Dashboard
   backToRancher: Cluster Manager
@@ -319,6 +320,15 @@ suffix:
 ##############################
 # Components & Pages
 ##############################
+layouts:
+  home: home layout
+  plain: plain layout
+  default: default layout
+  blank: blank layout
+  unauthenticated: unauthenticated layout
+  logout: logout layout
+  verify: verify layout
+  
 windowmanager:
   closeTab: Close tab {tabId}
 about:
@@ -379,11 +389,15 @@ accountAndKeys:
     title: API Keys
     notAllowed: You do not have permission to manage API Keys
     apiEndpoint: "API Endpoint:"
+    copyApiEnpoint: Copy API Endpoint to clipboard
     add:
       description:
         label: Description
         placeholder: Optionally enter a description to help you identify this API Key
       label: Create API Key
+      ariaLabel:
+        expiration: Expiration duration - number input
+        expirationUnits: Expiration unit - time unit
       expiry:
         label: Automatically expire
         options:
@@ -483,6 +497,9 @@ authConfig:
          4: 'Under Scopes for Google APIs, enable "email", "profile", and "openid".'
          5: 'Click on "Save".'
         topPrivateDomain: 'Top private domain of:'
+        ariaLabel: 
+          hostname: Copy Hostname to clipboard
+          serverUrl: Copy Server URL to clipboard
       2:
         title: 'Navigate to the "Credentials" tab to create your OAuth client ID'
         body:
@@ -491,6 +508,8 @@ authConfig:
           3: 'Authorized redirect URIs:'
           4: 'Click "Create", and then click on the "Download JSON" button.'
           5: 'Upload the downloaded JSON file in the OAuth credentials box.'
+        ariaLabel: 
+          serverUrlVerify: Copy Server Auth Verfication URL to clipboard
       3:
         title: 'Create Service Account credentials'
         introduction: 'Follow <a href="{docsBase}/how-to-guides/new-user-guides/authentication-permissions-and-global-configuration/authentication-config/configure-google-oauth#3-creating-service-account-credentials" target="_blank" rel="noopener noreferrer nofollow">this</a> guide to:'
@@ -624,6 +643,7 @@ authConfig:
     reply:
       info: 'Azure AD requires a whitelisted URL for your Rancher server before beginning this setup. Please ensure that the following URL is set in the Reply URL section of your Azure Portal. Please note that it may take up to 5 minutes for the whitelisted URL to propagate.'
       label: Reply URL
+      ariaLabel: Copy Reply URL to clipboard
     updateEndpoint:
       button: Update Endpoint
       banner:
@@ -656,7 +676,7 @@ authConfig:
     scope:
       label: Scopes
       placeholder: openid
-      protip: The <code>openid</code> scope is required. If you are using custom scopes, ensure that it is included.
+      protip: The <code>openid</code>, <code>profile</code>, and <code>email</code> scopes are required and cannot be removed.
     cert:
       label: Certificate
       placeholder: Paste in the certificate, starting with -----BEGIN CERTIFICATE-----
@@ -2097,7 +2117,8 @@ cluster:
         title: Save Machine Configurations
         body: Machine Configurations define how machines in Pools are deployed.<br><br> They will be saved upfront to ensure valid Cluster YAML can be saved.
     snapshots:
-      suffix: Snapshots
+      suffix: Snapshots per node
+      s3Suffix: Snapshots
     systemService:
       rke2-coredns: 'CoreDNS'
       rke2-ingress-nginx: 'NGINX Ingress'
@@ -2398,8 +2419,11 @@ drivers:
       =1 { {warningDrivers} Resources in the corresponding provider will not be automatically removed.}
       other { {warningDrivers} Resources in the corresponding providers will not be automatically removed.}
       }
+  error:
+    activate: Failed to activate { name } driver
 
 detailText:
+  copyAriaLabel: Copy {item} value to clipboard
   collapse: Hide
   binary: '<Binary Data: {n, number} bytes>'
   empty: '<Empty>'
@@ -2521,6 +2545,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.
@@ -2730,6 +2755,7 @@ clusterBadge:
     iconText: Icon Text
     buttonAction: Apply
     badgeBgColor: Badge background color
+    badgeBgColorInput: Badge background color selector input
     badgeTextColor: Badge text color
     badgeAsIcon: Use custom badge
     maxCharsTooltip: Overwrites the default cluster name abbreviation.
@@ -2929,6 +2955,8 @@ ingress:
 
 internalExternalIP:
   none: None
+  copyInternalIp: Copy internal IP address to clipboard
+  copyExternalIp: Copy external IP address to clipboard
 
 istio:
   links:
@@ -3136,6 +3164,7 @@ labels:
     hide: Hide System Labels and Annotations
   annotations:
     title: Annotations
+    singular: Annotation
 
 labelSelect:
   noOptions:
@@ -3149,6 +3178,8 @@ labeledSelect:
   pressEnter: Press enter to add "{input}"
 
 landing:
+  bannerImage: Homepage banner image
+  homepage: Homepage
   clusters:
     title: Clusters
     provider: Provider
@@ -3472,8 +3503,10 @@ neuvector:
         na: Resource Unavailable
 
 login:
+  login: Login
   howdy: Howdy!
   welcome: Welcome to {vendor}
+  landscapeAlt: Landscape image
   loggedOut: You have been logged out.
   loggedOutFromSso: You've been logged out of Rancher, however you may still be logged in to your single sign-on identity provider.
   loggedOutFromSlo: You've been logged out of Rancher and from your single sign-on identity provider.
@@ -4878,6 +4911,7 @@ promptForceRemove:
   modalTitle: Are you sure?
   removeWarning: "There was an issue with deleting underlying infrastructure. If you proceed with this action, the Machine <b>{nameToMatch}</b> will be deleted from Rancher only. It's highly recommended to manually delete any referenced infrastructure."
   forceDelete: Force Delete
+  ariaLabel: Copy Machine name to clipboard
   confirmName: "Enter in the pool name below to confirm:"
   podRemoveWarning: "Force deleting pods does not wait for confirmation that the pod's processes have been terminated. This may result in <strong>data corruption or inconsistencies</strong>"
 
@@ -5489,6 +5523,7 @@ setup:
   setPassword: The first order of business is to set a strong password for the default <code>{username}</code> user. We suggest using this random one generated just for you, but enter your own if you like.
   useManual: Set a specific password to use
   useRandom: Use a randomly generated password
+  copyRandom: Copy random password to clipboard
   welcome: Welcome to {vendor}!
 
 sortableTable:
@@ -7940,12 +7975,12 @@ customLinks:
     commercialSupport: Commercial Support
     appCo: SUSE Application Collection
 
-
 ##############################
 ### Support Page
 ##############################
 
 support:
+  bannerImage: Support page banner image
   community:
     title: SUSE Rancher provides world-class support
     linksTitle: Community Support

package/cloud-credential/aws.vue

@@ -78,6 +78,7 @@ export default {
       :rules="fvGetAndReportPathRules('decodedData.accessKey')"
       :mode="mode"
       :required="true"
+      data-testid="access-key"
       @update:value="$emit('valueChanged', 'accessKey', $event)"
     />
     <LabeledInput
@@ -89,6 +90,7 @@ export default {
       :rules="fvGetAndReportPathRules('decodedData.secretKey')"
       :mode="mode"
       :required="true"
+      data-testid="secret-key"
       @update:value="$emit('valueChanged', 'secretKey', $event)"
     />
     <LabeledSelect

package/components/AssignTo.vue

@@ -115,6 +115,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
@@ -157,17 +158,20 @@ export default {
       </template>
 
       <template #actions>
-        <button
-          class="btn role-secondary"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-
-        <AsyncButton
-          mode="apply"
-          @click="apply"
-        />
+        <div class="actions-container">
+          <button
+            class="btn role-secondary"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+
+          <AsyncButton
+            class="apply-btn"
+            mode="apply"
+            @click="apply"
+          />
+        </div>
       </template>
     </Card>
   </app-modal>
@@ -181,5 +185,15 @@ export default {
     & ::-webkit-scrollbar-corner {
       background: rgba(0,0,0,0);
     }
+
+    .actions-container {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+
+      .apply-btn {
+        margin-left: 20px;
+      }
+    }
   }
 </style>

package/components/AsyncButton.vue

@@ -11,6 +11,7 @@ export const ASYNC_BUTTON_STATES = {
 
 const TEXT = 'text';
 const TOOLTIP = 'tooltip';
+const DISABLED_CLASS_STYLE = 'btn-disabled';
 
 export type AsyncButtonCallback = (success: boolean) => void;
 
@@ -152,9 +153,29 @@ export default defineComponent({
         out[`btn-${ this.size }`] = true;
       }
 
+      // while we are waiting for the async button to get
+      // it's callback we want to the button to appear as disabled
+      // but not being actually disabled as need it to be
+      // able to return the keyboard navigation focus back to it
+      // which can't be done while actually disabled, as per
+      // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols
+      if (this.phase === ASYNC_BUTTON_STATES.WAITING) {
+        out[DISABLED_CLASS_STYLE] = true;
+      }
+
+      // used to assist e2e testing mostly when waiting for button to return
+      // to it's normal state/phase
+      if (this.phase === ASYNC_BUTTON_STATES.ACTION) {
+        out['ready-for-action'] = true;
+      }
+
       return out;
     },
 
+    appearsDisabled(): boolean {
+      return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
+    },
+
     displayIcon(): string {
       const exists = this.$store.getters['i18n/exists'];
       const t = this.$store.getters['i18n/t'];
@@ -204,10 +225,6 @@ export default defineComponent({
       return this.phase === ASYNC_BUTTON_STATES.WAITING;
     },
 
-    isDisabled(): boolean {
-      return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
-    },
-
     isManualRefresh() {
       return this.mode === 'manual-refresh';
     },
@@ -232,7 +249,7 @@ export default defineComponent({
 
   methods: {
     clicked() {
-      if ( this.isDisabled ) {
+      if ( this.appearsDisabled ) {
         return;
       }
 
@@ -283,8 +300,8 @@ export default defineComponent({
     :class="classes"
     :name="name"
     :type="type"
-    :disabled="isDisabled"
-    :aria-disabled="isDisabled"
+    :disabled="disabled"
+    :aria-disabled="appearsDisabled"
     :tab-index="tabIndex"
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"

package/components/BannerGraphic.vue

@@ -36,6 +36,7 @@ export default {
         data-testid="banner-brand__img"
         file-name="banner.svg"
         :draggable="false"
+        :alt="t('landing.bannerImage')"
       />
     </div>
     <div

package/components/CommunityLinks.vue

@@ -140,7 +140,7 @@ export default {
           :aria-label="t('footer.wechat.title')"
           role="link"
           @click="show"
-          @keyup.enter="show"
+          @keydown.enter="show"
         >
           {{ t('footer.wechat.title') }}
         </a>
@@ -151,6 +151,7 @@ export default {
       name="wechat-modal"
       height="auto"
       :width="640"
+      :trigger-focus-trap="true"
       @close="close"
     >
       <div class="wechat-modal">
@@ -164,8 +165,7 @@ export default {
             :aria-label="t('generic.close')"
             role="button"
             @click="close"
-            @keyup.enter="close"
-            @keyup.space="close"
+            @keydown.enter.stop
           >
             {{ t('generic.close') }}
           </button>

package/components/CopyToClipboardText.vue

@@ -49,9 +49,10 @@ export default {
     v-if="text"
     class="copy-to-clipboard-text"
     role="button"
-    :aria-label="t('generic.copyToClipboard')"
     :class="{ 'copied': copied, 'plain': plain}"
     href="#"
+    :aria-label="t('generic.copyToClipboard')"
+    v-bind="$attrs"
     @click="clicked"
     @keyup.space="clicked"
   >

package/components/DetailText.vue

@@ -58,6 +58,10 @@ export default {
   },
 
   computed: {
+    itemLabel() {
+      return this.labelKey ? this.t(this.labelKey) : this.label ? this.label : this.t('labels.annotations.singular');
+    },
+
     isBinary() {
       if ( this.binary === null ) {
         return typeof this.value === 'string' && !asciiLike(this.value);
@@ -186,6 +190,7 @@ export default {
       :text="value"
       class="role-tertiary"
       action-color=""
+      :aria-label="t('detailText.copyAriaLabel', {item: itemLabel })"
     />
   </div>
 </template>

package/components/DisableAuthProviderModal.vue

@@ -44,6 +44,7 @@ export default {
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card

package/components/ExplorerMembers.vue

@@ -63,7 +63,7 @@ export default {
     }
 
     if (projectRoleTemplateBindingSchema) {
-      this.$store.dispatch('rancher/findAll', { type: NORMAN.PROJECT_ROLE_TEMPLATE_BINDING }, { root: true })
+      this.$store.dispatch('rancher/findAll', { type: NORMAN.PROJECT_ROLE_TEMPLATE_BINDING, opt: { force: true } }, { root: true })
         .then((bindings) => {
           this['projectRoleTemplateBindings'] = bindings;
           this.loadingProjectBindings = false;

package/components/ExplorerProjectsNamespaces.vue

@@ -1,5 +1,5 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, useStore } from 'vuex';
 import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
 import { STATE, AGE, NAME, NS_SNAPSHOT_QUOTA } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
@@ -11,11 +11,13 @@ import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES, DEV } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
-
+import { escapeHtml } from '@shell/utils/string';
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import DOMPurify from 'dompurify';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
 export default {
   name:       'ListProjectNamespace',
@@ -25,6 +27,7 @@ export default {
     MoveModal,
     ResourceTable,
     ButtonMultiAction,
+    ActionMenu,
   },
   mixins: [ResourceFetch],
 
@@ -58,6 +61,13 @@ export default {
     this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT, opt: { force: true } });
   },
 
+  setup() {
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return { featureDropdownMenu };
+  },
+
   data() {
     return {
       loadResources:                [NAMESPACE],
@@ -155,7 +165,7 @@ export default {
     rowsWithFakeNamespaces() {
       const fakeRows = this.projectsWithoutNamespaces.map((project) => {
         return {
-          groupByLabel:     `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
+          groupById:        `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
           isFake:           true,
           mainRowKey:       project.id,
           nameDisplay:      project.spec?.displayName, // Enable filtering by the project name
@@ -166,8 +176,8 @@ export default {
 
       if (this.showMockNotInProjectGroup) {
         fakeRows.push( {
-          groupByLabel: this.t('resourceTable.groupLabel.notInAProject'), // Same as the groupByLabel for the namespace model
-          mainRowKey:   'fake-empty',
+          groupById:  this.t('resourceTable.groupLabel.notInAProject'),
+          mainRowKey: 'fake-empty',
         });
       }
 
@@ -273,6 +283,9 @@ export default {
     },
     showCreateNsButton() {
       return this.groupPreference !== 'namespace';
+    },
+    projectGroupBy() {
+      return this.groupPreference === 'none' ? null : 'groupById';
     }
   },
   methods: {
@@ -336,6 +349,10 @@ export default {
       return location;
     },
 
+    getProjectActions(group) {
+      return group.rows[0].project;
+    },
+
     showProjectAction(event, group) {
       const project = group.rows[0].project;
 
@@ -359,7 +376,13 @@ export default {
         );
       }
 
-      return row.groupByLabel;
+      if ( row.groupById === this.notInProjectKey) {
+        return this.t('resourceTable.groupLabel.notInAProject');
+      }
+
+      const project = row.project?.nameDisplay || row.project?.id || '';
+
+      return this.t('resourceTable.groupLabel.project', { name: escapeHtml(project) }, true);
     },
 
     projectDescription(group) {
@@ -431,6 +454,7 @@ export default {
       :schema="schema"
       :headers="headers"
       :rows="filteredRows"
+      :group-by="projectGroupBy"
       :groupable="true"
       :sort-generation-fn="sortGenerationFn"
       :loading="loading"
@@ -457,7 +481,7 @@ export default {
               {{ projectDescription(group.group) }}
             </div>
           </div>
-          <div class="right">
+          <div class="right mr-10">
             <router-link
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
               class="create-namespace btn btn-sm role-secondary mr-5"
@@ -465,13 +489,26 @@ export default {
             >
               {{ t('projectNamespaces.createNamespace') }}
             </router-link>
-            <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)"
-            />
+            <template v-if="featureDropdownMenu">
+              <ActionMenu
+                v-if="showProjectActionButton(group.group)"
+                :resource="getProjectActions(group.group)"
+                :button-aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+              />
+              <div
+                v-else
+                class="invisible"
+              />
+            </template>
+            <template v-else>
+              <ButtonMultiAction
+                class="project-action"
+                :borderless="true"
+                :aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+                :invisible="!showProjectActionButton(group.group)"
+                @click="showProjectAction($event, group.group)"
+              />
+            </template>
           </div>
         </div>
       </template>
@@ -536,6 +573,11 @@ export default {
   </div>
 </template>
 <style lang="scss" scoped>
+.invisible {
+  display: inline-block;
+  min-width: 28px;
+}
+
 .project-namespaces {
   & :deep() {
     .project-namespaces-table table {

package/components/LandingPagePreference.vue

@@ -103,9 +103,6 @@ export default {
 
 <template>
   <div>
-    <p class="set-landing-leadin">
-      {{ t('landing.landingPrefs.body') }}
-    </p>
     <RadioGroup
       id="login-route"
       :value="afterLoginRoute"
@@ -113,6 +110,11 @@ export default {
       :options="routeRadioOptions"
       @update:value="updateLoginRoute"
     >
+      <template #label>
+        <p class="set-landing-leadin">
+          {{ t('landing.landingPrefs.body') }}
+        </p>
+      </template>
       <template #2="{option}">
         <div class="custom-page">
           <RadioButton