@rancher/shell 3.0.4 → 3.0.5-rc.2

package/assets/images/providers/sks.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66 57" fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><use xlink:href="#A" x=".5" y=".5"/><symbol id="A" overflow="visible"><path d="M32 0L0 55.426h4.44L32 7.963v7.8L9.033 55.426h4.593L32 23.733v7.962l-13.78 23.73h4.593L32 39.656v7.8l-4.593 7.962H64z" stroke="none" fill="#da291c" fill-rule="nonzero"/></symbol></svg>

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/base/_helpers.scss

@@ -131,6 +131,10 @@ $spacing-property-map: (
   color: var(--input-label);
 }
 
+.text-no-break {
+  white-space: nowrap;
+}
+
 .hide {
   display: none !important;
 }

package/assets/styles/base/_variables.scss

@@ -8,6 +8,7 @@ $min-width: 75% !default;
 $input-height: 61px;
 $unlabeled-input-height: 40px;
 $unlabaled-select-padding: 3px 0;
+$footer-height: 60px;
 
 $input-padding-lg: 18px;
 $input-padding-sm: 10px;

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

@@ -144,6 +144,7 @@ nav:
     localClusterIcon: Local Cluster icon
     clusterProvIcon: Cluster {cluster} provider icon
     topLevelMenu: Main menu
+    sideNav: Secondary menu
     homePage: Home page navigation menu
     cluster: Cluster menu item
     harvesterCluster: Harvester cluster menu item
@@ -158,6 +159,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
@@ -236,9 +238,10 @@ nav:
     clusters: clusters
     ariaLabel: Filter clusters on main menu
   resourceSearch:
-    label: Resource Search
-    toolTip: Resource Search {key}
-    placeholder: Type to search for a resource...
+    label: Resource Type Search
+    prompt: Search for a Kubernetes Resource/Custom Resource type
+    toolTip: Resource Type Search {key}
+    placeholder: Type to search for a resource type...
     filteringDescription: Using this input will immediately filter the results in the list below
   header:
     setLoginPage: Set as login page
@@ -319,6 +322,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 +391,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 +499,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 +510,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 +645,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 +678,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-----
@@ -851,13 +873,13 @@ asyncButton:
     success: Generated
     waiting: Generating&hellip;
 
-backupRestoreOperator: 
+backupRestoreOperator:
   backup:
     label: Resource Set
     description: The Resource Set determines which resources the backup-restore-operator collects in a backup
     enableEncryptionWarning: 'Enabling encryption is highly recommended when using <b><i>Full Rancher backup resource set</i></b>, otherwise sensitive information will be backed up as plain-text. <a target="_blank" rel="noopener noreferrer nofollow" href="https://ranchermanager.docs.rancher.com/reference-guides/backup-restore-configuration/backup-configuration#resourcesets">Read more</a>.'
     missingResourceSetWarning: The <b><i>{resourceSet}</i></b> resource set doesn't exist, it's possible it has been deleted. Please select a different option.
-    resourceSetOptions: 
+    resourceSetOptions:
       'rancher-resource-set-basic': 'Basic Rancher backup resource set'
       'rancher-resource-set-full': 'Full Rancher backup resource set'
       custom: Custom
@@ -1345,7 +1367,7 @@ cluster:
     registrationCommand:
       label: Registration Command
       linuxDetail: Run this command on each of the existing Linux machines you want to register.
-      windowsDetail: Run this command in PowerShell on each of the existing Windows machines you want to register. 
+      windowsDetail: Run this command in PowerShell on each of the existing Windows machines you want to register.
       windowsWorkersOnly: <b>Windows nodes can only be workers.</b>
       windowsNotReady: The cluster must be up and running with Linux etcd, control plane, and worker nodes before the registration command for adding Windows workers will display.<br /> <br /><b>Windows nodes can only be workers.</b>
       windowsWarning: Workload pods, including some deployed by Rancher charts, will be scheduled on both Linux and Windows nodes by default. Edit NodeSelector in the chart to direct them to be placed onto a compatible node.
@@ -1863,11 +1885,11 @@ cluster:
     subGroups:
       podAffinityAnti: Pod Affinity/Anti-Affinity
       nodeAffinity: Node Affinity
-      schedulingCustomization: 
+      schedulingCustomization:
         label: Prevent Rancher cluster agent pod eviction
         description: This ensures that the cluster agent pod is not evicted due to node pressure, resource constraints or scheduler policies.
         banner: This feature has been enabled with settings that are different from the global default settings.
-        innerCheckbox: Apply global settings for Priority Class and Pod Disruption Budget  
+        innerCheckbox: Apply global settings for Priority Class and Pod Disruption Budget
     banners:
       advanced: These are advanced configuration options. Generally, they should be left as-is.
       tolerations: Additional Pod Tolerations will be added to the default Tolerations applied by Rancher.
@@ -2036,6 +2058,7 @@ cluster:
     docker: Docker
     eks: Amazon EKS
     exoscale: Exoscale
+    sks: Exoscale SKS
     gcp: Google
     google: Google GCE
     googlegke: Google GKE
@@ -2097,7 +2120,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'
@@ -2193,7 +2217,7 @@ cluster:
       snapshotScheduleCron:
         label: Cron Schedule
       snapshotRetention:
-        label: Snapshot retention count 
+        label: Snapshot retention count
         tooltip: Each backup records 1 snapshot per etcd node. If you specify 3 snapshots and you have 3 etcd nodes you will only retain 1 full backup.
       exportMetric:
         label: Metrics
@@ -2398,8 +2422,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>'
@@ -2731,6 +2758,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.
@@ -2930,6 +2958,8 @@ ingress:
 
 internalExternalIP:
   none: None
+  copyInternalIp: Copy internal IP address to clipboard
+  copyExternalIp: Copy external IP address to clipboard
 
 istio:
   links:
@@ -3137,6 +3167,7 @@ labels:
     hide: Hide System Labels and Annotations
   annotations:
     title: Annotations
+    singular: Annotation
 
 labelSelect:
   noOptions:
@@ -3150,6 +3181,8 @@ labeledSelect:
   pressEnter: Press enter to add "{input}"
 
 landing:
+  bannerImage: Homepage banner image
+  homepage: Homepage
   clusters:
     title: Clusters
     provider: Provider
@@ -3473,8 +3506,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.
@@ -3911,6 +3946,10 @@ namespaceFilter:
       one {1 item selected}
       other {{total} items selected}
       }
+  input: Filter namespace options
+  button:
+    clear: Remove applied namespace filters
+    clearFilter: Clear namespace options filter 
 
 namespaceList:
   selectLabel: Namespace
@@ -4711,6 +4750,7 @@ prefs:
     allNamespaces: Show dynamic Namespaces managed by Rancher (not intended for editing or deletion)
     themeShortcut: Enable Dark/Light Theme keyboard shortcut toggle (shift+T)
     pluginDeveloper: Enable Extension developer features
+    pluginDeveloperTooltip: Enables the ability to perform a developer load of UI extensions
   hideDesc:
     label: Hide Type Description banners above resource lists
   helm:
@@ -4727,6 +4767,8 @@ principal:
   name: Name
   loginName: Username
   type: Type
+  alt:
+    avatar: User avatar image
 
 probe:
   checkInterval:
@@ -4879,6 +4921,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>"
 
@@ -5105,6 +5148,8 @@ rbac:
         label: Login Access
       clustertemplaterevisions-create:
         label: Create RKE Template Revisions
+  errors:
+    escalation: You cannot assign Global Permissions that are higher than your own. Please verify the permissions you are attempting to assign.
 
 resourceDetail:
   detailTop:
@@ -5181,6 +5226,7 @@ resourceTable:
     role: Group by Role
     cluster: Group by Cluster
     device: Group by Device
+    pool: Group by Pool
   groupLabel:
     cluster: "<span>Cluster:</span> {name}"
     notInACluster: Not in a Cluster
@@ -5490,6 +5536,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:
@@ -7537,6 +7584,9 @@ typeLabel:
     }
 
 action:
+  ariaLabel:
+    hidePass: Hide {area}
+    showPass: Reveal {area}
   clone: Clone
   disable: Disable
   download: Download YAML
@@ -7788,9 +7838,9 @@ performance:
 banner:
   label: Fixed Banners
   settingName: Banners
-  headerBanner: Header Banner
-  footerBanner: Footer Banner
-  loginScreenBanner: Login Screen Banner
+  bannerHeader: Header Banner
+  bannerFooter: Footer Banner
+  bannerConsent: Login Screen Banner
   text: Text
   buttonText: Accept Button Text
   textColor: Text Color
@@ -7941,12 +7991,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/assets/translations/zh-hans.yaml

@@ -1773,6 +1773,7 @@ cluster:
     docker: Docker
     eks: Amazon EKS
     exoscale: Exoscale
+    sks: Exoscale SKS
     gcp: Google
     google: Google GCE
     googlegke: Google GKE
@@ -7131,9 +7132,9 @@ performance:
 banner:
   label: 固定横幅
   settingName: 横幅
-  headerBanner: 标题横幅
-  footerBanner: 页脚横幅
-  loginScreenBanner: 登录屏幕横幅
+  bannerHeader: 标题横幅
+  bannerFooter: 页脚横幅
+  bannerConsent: 登录屏幕横幅
   text: 文本
   buttonText: 同意按钮文本
   textColor: 文本颜色

package/chart/monitoring/index.vue

@@ -72,7 +72,9 @@ export default {
     const { existing = false } = this.$attrs;
 
     // If needed, fetch all the workloads that have prometheus operator like containers
-    this.workloadTypes = !existing ? Object.values(WORKLOAD_TYPES) : [];
+    const { CRON_JOB, ...validWorkloads } = WORKLOAD_TYPES;
+
+    this.workloadTypes = !existing ? Object.values(validWorkloads) : [];
 
     this.workloadTypes.forEach((type) => {
       // We'll use a filter to fetch the results. Atm there's no neat way to differentiate between ALL results and JUST filtered

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/ActionDropdownShell.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
+type HiddenAction = {
+  action: string;
+  enabled: boolean;
+  icon: string;
+  label: string;
+  bulkable: boolean;
+  bulkAction: string;
+  allEnabled: boolean;
+  anyEnabled: boolean;
+}
+
+defineProps<{
+  disabled: boolean,
+  hiddenActions: HiddenAction[],
+  actionTooltip: unknown,
+}>();
+
+const emit = defineEmits(['click', 'mouseover', 'mouseleave']);
+
+const applyTableAction = (act: HiddenAction, args: unknown, event: Event) => {
+  emit('click', act, args, event);
+};
+
+const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' | 'mouseleave' = 'mouseover') => {
+  emit(event, act);
+};
+</script>
+
+<template>
+  <rc-dropdown
+    :distance="14"
+    placement="bottom"
+  >
+    <rc-dropdown-trigger
+      class="bulk-actions-dropdown"
+      :disabled="disabled"
+    >
+      <template #before>
+        <i class="icon icon-gear" />
+      </template>
+      <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
+      <template #after>
+        <i class="ml-10 icon icon-chevron-down" />
+      </template>
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <rc-dropdown-item
+        v-for="(act, i) in hiddenActions"
+        :key="i"
+        v-clean-tooltip="{
+          content: actionTooltip,
+          placement: 'right'
+        }"
+        :disabled="!act.enabled"
+        @click="applyTableAction(act, null, $event)"
+        @mouseover="setBulkActionOfInterest(act)"
+        @mouseleave="setBulkActionOfInterest(null, 'mouseleave')"
+      >
+        <template #before>
+          <i
+            v-if="act.icon"
+            :class="act.icon"
+          />
+        </template>
+        <span v-clean-html="act.label" />
+      </rc-dropdown-item>
+    </template>
+  </rc-dropdown>
+</template>

package/components/AppModal.vue

@@ -1,6 +1,10 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { DEFAULT_FOCUS_TRAP_OPTS, useBasicSetupFocusTrap, getFirstFocusableElement } from '@shell/composables/focusTrap';
+import { defineComponent, ref } from 'vue';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  getFirstFocusableElement,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
 
 export const DEFAULT_ITERABLE_NODE_SELECTOR = 'body;';
 
@@ -80,6 +84,13 @@ export default defineComponent({
     returnFocusFirstIterableNodeSelector: {
       type:    String,
       default: DEFAULT_ITERABLE_NODE_SELECTOR,
+    },
+    /**
+     * watcher-based focus trap variable to watch
+     */
+    focusTrapWatcherBasedVariable: {
+      type:    Boolean,
+      default: undefined,
     }
   },
   computed: {
@@ -107,7 +118,7 @@ export default defineComponent({
         width: this.modalWidth,
         ...this.stylesPropToObj,
       };
-    },
+    }
   },
   setup(props) {
     if (props.triggerFocusTrap) {
@@ -131,7 +142,10 @@ export default defineComponent({
         };
       }
 
-      useBasicSetupFocusTrap('#modal-container-element', opts);
+      // prop used to immediately trigger the focus trap when a proper watch variable is not required
+      const autoTriggerFocusTrapWatcher = ref(true);
+
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => props.focusTrapWatcherBasedVariable ?? autoTriggerFocusTrapWatcher, '#modal-container-element', opts, true);
     }
   },
   mounted() {

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