@rancher/shell 3.0.1-rc.4 → 3.0.2-rc.1

package/assets/data/aws-regions.json

@@ -10,6 +10,7 @@
   "ap-southeast-2",
   "ap-southeast-3",
   "ap-southeast-4",
+  "ap-southeast-5",
   "ca-central-1",
   "ca-west-1",
   "cn-north-1",

package/assets/styles/base/_basic.scss

@@ -62,12 +62,24 @@ INPUT,
 SELECT,
 TEXTAREA,
 .labeled-input,
-.labeled-select,
-.unlabeled-select,
-.checkbox-custom,
-.radio-custom {
+.checkbox-custom {
   &:focus, &.focused {
-    @include form-focus
+    @include form-focus;
+  }
+}
+
+.radio-custom,
+.labeled-select,
+.unlabeled-select {
+  &:focus-visible, &.focused {
+    @include focus-outline;
+  }
+}
+
+.labeled-select,
+.unlabeled-select {
+  &.focused {
+    border-color: var(--outline);
   }
 }
 
@@ -89,6 +101,11 @@ A {
     text-decoration: underline;
     color: var(--body-text);
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 HR {

package/assets/styles/base/_mixins.scss

@@ -147,8 +147,17 @@
   }
 }
 
+// -------------------------------------------------------------------------------------------------
+// Focus styles
+
 @mixin form-focus {
   // Focus for form like elements (not to be confused with basic :focus style)
   outline: none;
   border-color: var(--outline);
-}
+}
+
+@mixin focus-outline {
+  // Focus for form like elements (not to be confused with basic :focus style)
+  // we need to use !important because it needs to superseed other classes that might impact outlines
+  outline: 2px solid var(--primary-keyboard-focus);
+}

package/assets/styles/global/_button.scss

@@ -77,6 +77,11 @@ button,
     background-color: var(--primary-hover-bg);
     color: var(--primary-text);
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 .role-secondary {
@@ -101,6 +106,11 @@ button,
       border: 0;
     }
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 .role-tertiary {
@@ -175,6 +185,11 @@ fieldset[disabled] .btn {
       z-index: 1;
     }
 
+    &:focus-visible {
+      z-index: 1;
+      @include focus-outline;
+    }
+    
     &.active {
       @extend .bg-primary;
     }

package/assets/styles/global/_form.scss

@@ -27,8 +27,8 @@ TEXTAREA,
 
   @include input-status-color;
 
-  &:focus, &.focused {
-    @include form-focus
+  &:focus:not(.unlabeled-select):not(.labeled-select), &.focused:not(.unlabeled-select):not(.labeled-select) {
+    @include form-focus;
   }
 
   LABEL {

package/assets/styles/themes/_dark.scss

@@ -21,6 +21,7 @@
 
   // dark main text
   $lightest: #ffffff;
+  $keyboard-focus: #00ddff;
 
   // menu cluster description active+hover
   $desc-light: #EEEFF4;
@@ -45,6 +46,7 @@
   --default-light-bg           : #{rgba($dark, 0.05)};
   --slider-light-bg            : #{rgba($darker, 1)};
   --slider-light-bg-right      : #{rgba($darker, 0)};
+  --primary-keyboard-focus     : #{$keyboard-focus};
 
   --muted                      : #{$disabled};
 

package/assets/styles/themes/_light.scss

@@ -26,6 +26,7 @@ $disabled  : $medium;
 $primary         : #3D98D3;
 $secondary       : $darker;
 $link            : #3D98D3;
+$keyboard-focus  : #3300ff;
 
 // Status colors
 $success         : #5D995D;
@@ -53,6 +54,7 @@ BODY, .theme-light {
   --primary-border             : #{$primary};
   --primary-banner-bg          : #{rgba($primary, 0.15)};
   --primary-light-bg           : #{rgba($primary, 0.05)};
+  --primary-keyboard-focus     : #{$keyboard-focus};
 
 
   .text-primary {

package/assets/translations/en-us.yaml

@@ -4,6 +4,7 @@
 generic:
   add: Add
   all: All
+  ascending: ascending
   and: ' and '
   back: Back
   cancel: Cancel
@@ -19,6 +20,7 @@ generic:
   customize: Customize
   dashboard: Dashboard
   default: Default
+  descending: descending
   disabled: Disabled
   done: Done
   enabled: Enabled
@@ -115,11 +117,27 @@ generic:
   basic: Basic
 
 locale:
+  menu: Locale selector menu
   en-us: English
   zh-hans: 简体中文
   none: (None)
 
 nav:
+  ariaLabel:
+    topLevelMenu: Main menu
+    homePage: Home page navigation menu
+    cluster: Cluster menu item
+    harvesterCluster: Harvester cluster menu item
+    seeAll: See all clusters menu item
+    multiClusterApps: Main menu multi cluster app menu item
+    configurationApps: Main menu configuration app menu item
+    support: Support page link
+    about: About page link
+    pinCluster: Pin/Unpin cluster
+  alt:
+    mainMenuIcon: Main menu icon
+    mainMenuRancherLogo: Main menu Rancher logo
+  expandCollapseAppBar: Expand/Collapse the Application Bar
   harvesterDashboard: Harvester Dashboard
   backToRancher: Cluster Manager
   tools: Tools
@@ -195,6 +213,7 @@ nav:
     placeholder: Filter clusters by...
     noResults: No matching clusters
     clusters: clusters
+    ariaLabel: Filter clusters on main menu
   resourceSearch:
     label: Resource Search
     toolTip: Resource Search {key}
@@ -273,6 +292,9 @@ suffix:
 about:
   title: About
   versions:
+    downloadImages: "Download {listName} images list"
+    downloadCli: "Download CLI for {os}"
+    githubRepo: "Open GitHub repository for the {name} component"
     title: Versions
     component: Component
     version: Version
@@ -1079,14 +1101,17 @@ catalog:
       exponentialBackOff:
         label: Exponential Back Off
         minWait:
-          label: Min Wait Time (in Seconds)
-          placeholder: 1 (default)
+          label: Min Wait Time
+          placeholder: 'default: 1'
         maxWait:
-          label: Max Wait Time (in Seconds)
-          placeholder: 5 (default)
+          label: Max Wait Time
+          placeholder: 'default: 5'
         maxRetries:
           label: Max Number of Retries
-          placeholder: 5 (default)
+          placeholder: 'default: 5'
+    refreshInterval:
+      label: Refresh Interval
+      placeholder: 'default: {hours}'
   tools:
     header: Cluster Tools
     noTools: "No Cluster Tools found"
@@ -1921,7 +1946,7 @@ cluster:
     header: Registry for Rancher System Container Images
     label: Enable cluster scoped container registry for Rancher system container images
     description: "If enabled, Rancher will pull container images from this registry during cluster provisioning. By default, Rancher will also use this registry when installing Rancher's official Helm chart apps. If the cluster scoped registry is disabled, system images are pulled from the System Default Registry in the global settings."
-    docsLinkRke2: "For help configuring private registry mirrors, see the RKE2 <a href=\"https://docs.rke2.io/install/containerd_registry_configuration\" target=\"_blank\">documentation.</a>"
+    docsLinkRke2: "For help configuring private registry mirrors, see the RKE2 <a href=\"https://docs.rke2.io/install/private_registry\" target=\"_blank\">documentation.</a>"
     docsLinkK3s: "For help configuring private registry mirrors, see the K3s <a href=\"https://docs.k3s.io/installation/private-registry\" target=\"_blank\">documentation.</a>"
   provider:
     aliyunecs: Aliyun ECS
@@ -2198,11 +2223,20 @@ clusterIndexPage:
       label: Unhealthy Nodes
       noRows: There are no unhealthy nodes to show.
     componentStatus:
-      etcd: Etcd
-      scheduler: Scheduler
-      controller-manager: Controller Manager
-      cattle: Cattle
-      fleet: Fleet
+      component:
+        etcd:
+          label: Etcd
+        scheduler:
+          label: Scheduler
+        controller-manager:
+          label: Controller Manager
+        cattle:
+          label: Cattle
+        fleet:
+          label: Fleet
+      tooltip:
+        disconnected: Agent disconnected
+        unavailableReplicas: Replicas not available
     certs:
       label: Certificates
 
@@ -5153,11 +5187,14 @@ selectOrCreateAuthSecret:
   basic:
     username: Username
     password: Password
+  rke:
+    info: "An RKE Auth Config secret contains the username and password concatenated and base64 encoded into the secret's 'auth' key"
   namespaceGroup: "Namespace: {name}"
   chooseExisting: "Choose an existing secret:"
-  createSsh: Create a SSH Key Secret
-  createBasic: Create a HTTP Basic Auth Secret
-  createS3: Create a S3-Compatible Auth Secret
+  createSsh: Create an SSH Key Secret
+  createBasic: Create an HTTP Basic Auth Secret
+  createS3: Create an S3-Compatible Auth Secret
+  createRKE: Create an RKE Auth Config Secret
 
 serviceAccount:
   automount: Automount Service Account Token
@@ -5727,6 +5764,7 @@ tableHeaders:
   lastSchedule: Last Schedule
   lastSeen: Last Seen
   lastSeenTooltip: The time at which the most recent occurrence of this event was recorded
+  lastUsed: Last Used
   loggingOutputProviders: Provider
   machines: Machines
   machineNodeName: Node
@@ -5802,6 +5840,7 @@ tableHeaders:
   resourcesReady: Resources Ready
   restarts: Restarts
   restart: Restart Required
+  restartSystem: Restart { vendor }
   restore: Restore
   role: Role
   roles: Roles
@@ -7393,6 +7432,8 @@ registryConfig:
 ##############################
 
 advancedSettings:
+  setEnv: Set by Environment Variable
+  hideShow: Hide/show setting
   label: Settings
   subtext: Typical users will not need to change these. Proceed with caution, incorrect values can break your {appName} installation. Settings which have been customized from default settings are tagged 'Modified'.
   show: Show
@@ -7464,6 +7505,7 @@ advancedSettings:
 
 featureFlags:
   label: Feature Flags
+  title: "Are you sure?"
   warning: |-
     Feature flags allow {vendor} to gate certain features behind flags.
     Features that are off by default should be considered experimental functionality.
@@ -7471,7 +7513,7 @@ featureFlags:
     This will result in a short outage of the API and UI, but not affect running clusters or workloads.
   promptActivate: Please confirm that you want to activate the feature flag "{flag}"
   promptDeactivate: Please confirm that you want to deactivate the feature flag "{flag}"
-  restartRequired: "Note: Updating this feature flag requires a restart"
+  restartRequired: "Note: Updating this feature flag will restart {vendor}"
   restart:
     title: Waiting for Restart
     wait: This may take a few moments
@@ -7480,6 +7522,7 @@ performance:
   label: UI Performance Settings
   settingName: Performance
   experimental: This setting is experimental and may be removed or updated in future versions.
+  deprecatedForSSP: The <i class="mr-5">"{setting}"</i> setting is now deprecated and will be removed in a future release. Please use the <a href="#ssp-setting" class="ml-5 mr-5">Server-side Pagination</a> setting instead.
   incrementalLoad:
     label: Incremental Loading
     setting: You can configure the threshold above which incremental loading will be used.
@@ -7549,6 +7592,7 @@ performance:
     resources:
       generic: most resources in the cluster's 'More Resources' section
       all: All Resources
+    populateDefaults: Populate with latest pagination defaults
 banner:
   label: Fixed Banners
   settingName: Banners
@@ -7743,7 +7787,7 @@ support:
       text: Run SUSE Rancher products with confidence, knowing that the developers who built them are available to quickly resolve issues.
     three:
       title: Troubleshooting
-      text: We focus on uncovering the root cause of any issue, whether it is related to Rancher Labs products, Kubernetes, Docker or your underlying infrastructure.
+      text: We focus on uncovering the root cause of any issue, whether it is related to SUSE products, Kubernetes, Docker or your underlying infrastructure.
     four:
       title: Innovate with Freedom
       text: Take advantage of our certified compatibility with a wide range of Kubernetes providers, operating systems, and open source software.

package/assets/translations/zh-hans.yaml

@@ -1751,7 +1751,7 @@ cluster:
   privateRegistry:
     label: 为 Rancher 系统容器镜像启用集群级别的容器镜像仓库
     description: "如果启用，Rancher 将在集群配置期间从该镜像仓库中拉取容器镜像。默认情况下，Rancher 在安装 Rancher 的官方 Helm Chart 应用程序时也会使用此镜像仓库。如果集群级别的镜像仓库被禁用，将从全局设置中的系统默认镜像仓库中拉取系统镜像。"
-    docsLinkRke2: "如需配置私有镜像仓库 mirror 的帮助，请参阅 RKE2 <a href=\"https://docs.rke2.io/install/containerd_registry_configuration\" target=\"_blank\">文档</a>。"
+    docsLinkRke2: "如需配置私有镜像仓库 mirror 的帮助，请参阅 RKE2 <a href=\"https://docs.rke2.io/install/private_registry\" target=\"_blank\">文档</a>。"
     docsLinkK3s: "如需配置私有镜像仓库 mirror 的帮助，请参阅 K3s <a href=\"https://docs.k3s.io/installation/private-registry\" target=\"_blank\">文档</a>。"
   provider:
     aliyunecs: Aliyun ECS
@@ -7310,7 +7310,7 @@ support:
       text: 我们的开发人员会快速解决问题，因此你可以放心使用 SUSE Rancher 的产品。
     three:
       title: 故障排除
-      text: 无论你使用的 Rancher Labs 产品、Kubernetes、Docker 还是底层基础架构出现问题，我们都会努力找到问题的根本原因。
+      text: 无论你使用的 SUSE 产品、Kubernetes、Docker 还是底层基础架构出现问题，我们都会努力找到问题的根本原因。
     four:
       title: 自由创新
       text: 基于我们与众多 Kubernetes 供应商、操作系统和开源软件认证的兼容性，实现自主创新。

package/chart/monitoring/StorageClassSelector.vue

@@ -44,6 +44,6 @@ export default {
     :options="options"
     :push-tags="true"
     :taggable="true"
-    @input="updateName"
+    @update:value="updateName"
   />
 </template>

package/components/ActionMenu.vue

@@ -264,7 +264,10 @@ export default {
         :disabled="opt.disabled ? true : null"
         :class="{divider: opt.divider}"
         :data-testid="componentTestid + '-' + i + '-item'"
+        :tabindex="opt.divider ? -1 : 0"
         @click="execute(opt, $event)"
+        @keyup.enter="execute(opt, $event)"
+        @keyup.space="execute(opt, $event)"
       >
         <IconOrSvg
           v-if="opt.icon || opt.svg"
@@ -311,6 +314,11 @@ export default {
       padding: 8px 10px;
       margin: 0;
 
+      &:focus-visible {
+        @include focus-outline;
+        outline-offset: -2px;
+      }
+
       &[disabled] {
         cursor: not-allowed  !important;
         color: var(--disabled-text);

package/components/AssignTo.vue

@@ -132,6 +132,7 @@ export default {
           <form>
             <LabeledSelect
               v-model:value="moveTo"
+              data-testid="workspace_options"
               :label="t('assignTo.workspace')"
               :options="workspaceOptions"
               placement="bottom"

package/components/AsyncButton.vue

@@ -208,6 +208,10 @@ export default defineComponent({
       return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
     },
 
+    isManualRefresh() {
+      return this.mode === 'manual-refresh';
+    },
+
     tooltip(): { content: string, hideOnTargetClick: boolean} | null {
       if ( this.labelAs === TOOLTIP ) {
         return {
@@ -283,11 +287,14 @@ export default defineComponent({
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"
   >
-    <span v-if="mode === 'manual-refresh'">{{ t('action.refresh') }}</span>
+    <span
+      v-if="isManualRefresh"
+      :class="{'mr-10': displayIcon && size !== 'sm', 'mr-5': displayIcon && size === 'sm'}"
+    >{{ t('action.refresh') }}</span>
     <i
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
-      :class="{icon: true, 'icon-lg': true, [displayIcon]: true}"
+      :class="{icon: true, 'icon-lg': true, [displayIcon]: true, 'mr-0': isManualRefresh}"
     />
     <span
       v-if="labelAs === 'text' && displayLabel"

package/components/BackLink.vue

@@ -13,6 +13,8 @@ export default {
     v-if="link && link.name"
     :to="link"
     class="back-link"
+    role="link"
+    :aria-label="t('generic.back')"
   >
     <i class="icon icon-chevron-left" /> {{ t('generic.back') }}
   </router-link>
@@ -20,6 +22,7 @@ export default {
     v-else
     to="/"
     class="back-link"
+    :aria-label="t('nav.home')"
   >
     <i class="icon icon-chevron-left" /> {{ t('nav.home') }}
   </router-link>
@@ -30,9 +33,12 @@ export default {
     align-items: center;
     display: flex;
     font-size: 16px;
-    margin-bottom: 10px;
+    margin: 10px 0 20px 0;
     outline: 0;
-    padding: 10px 0;
     width: fit-content;
+
+    &:focus-visible {
+      @include focus-outline;
+    }
   }
 </style>

package/components/BannerGraphic.vue

@@ -55,7 +55,12 @@ export default {
       v-if="pref"
       class="close-button"
       data-testid="graphic-banner-close"
+      tabindex="0"
+      :aria-label="t('generic.close')"
+      role="button"
       @click="hide()"
+      @keyup.enter="hide()"
+      @keyup.space="hide()"
     >
       <i class="icon icon-close" />
     </div>
@@ -72,6 +77,11 @@ export default {
     .close-button {
       position: absolute;
       visibility: hidden;
+
+      &:focus-visible {
+        @include focus-outline;
+        outline-offset: 2px;
+      }
     }
 
     &:hover .close-button {

package/components/ButtonGroup.vue

@@ -82,6 +82,8 @@ export default {
       type="button"
       :class="opt.class"
       :disabled="disabled || opt.disabled"
+      role="button"
+      :aria-label="opt.labelKey ? t(opt.labelKey) : opt.label"
       @click="change(opt.value)"
     >
       <slot

package/components/ButtonMultiAction.vue

@@ -33,6 +33,12 @@ const buttonClass = computed(() => {
 .borderless {
   background-color: transparent;
   border: none;
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: -2px;
+  }
+
   &:hover, &:focus {
     background-color: var(--accent-btn);
     box-shadow: none;

package/components/ClusterIconMenu.vue

@@ -25,7 +25,7 @@ export default {
     },
 
     customColor() {
-      return !this.cluster.removePreviewColor && this.cluster.badge?.iconText ? this.cluster.badge?.color : '';
+      return this.cluster.iconColor || '';
     },
   },
 

package/components/CodeMirror.vue

@@ -5,7 +5,7 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 export default {
   name: 'CodeMirror',
 
-  emits: ['onReady', 'onInput', 'onChanges', 'onFocus'],
+  emits: ['onReady', 'onInput', 'onChanges', 'onFocus', 'validationChanged'],
 
   props: {
     /**
@@ -39,6 +39,7 @@ export default {
       codeMirrorRef:   null,
       loaded:          false,
       removeKeyMapBox: false,
+      hasLintErrors:   false,
     };
   },
 
@@ -65,6 +66,7 @@ export default {
         foldGutter:              true,
         styleSelectedText:       true,
         showCursorWhenSelecting: true,
+        autocorrect:             false,
       };
 
       if (this.asTextArea) {
@@ -76,6 +78,11 @@ export default {
 
       Object.assign(out, this.options);
 
+      // parent components control lint with a boolean; if linting is enabled, we need to override that boolean with a custom error handler to wire lint errors into dashboard validation
+      if (this.options?.lint) {
+        out.lint = { onUpdateLinting: this.handleLintErrors };
+      }
+
       return out;
     },
 
@@ -104,7 +111,25 @@ export default {
     }
   },
 
+  watch: {
+    hasLintErrors(neu) {
+      this.$emit('validationChanged', !neu);
+    }
+  },
+
   methods: {
+    /**
+     * Codemirror yaml linting uses js-yaml parse
+     * it does not distinguish between warnings and errors so we will treat all yaml lint messages as errors
+     * other codemirror linters (eg json) will report from, to, severity where severity may be 'warning' or 'error'
+     * only 'error' level linting will trigger a validation event from this component
+    */
+    handleLintErrors(diagnostics = []) {
+      const hasLintErrors = diagnostics.filter((d) => !d.severity || d.severity === 'error').length > 0;
+
+      this.hasLintErrors = hasLintErrors;
+    },
+
     focus() {
       if ( this.$refs.codeMirrorRef ) {
         this.$refs.codeMirrorRef.cminstance.focus();
@@ -118,6 +143,8 @@ export default {
     },
 
     onReady(codeMirrorRef) {
+      this.$emit('validationChanged', true);
+
       this.$nextTick(() => {
         codeMirrorRef.refresh();
         this.codeMirrorRef = codeMirrorRef;

package/components/CommunityLinks.vue

@@ -110,6 +110,8 @@ export default {
         <router-link
           v-if="link.value.startsWith('/') "
           :to="link.value"
+          role="link"
+          :aria-label="link.label"
         >
           {{ link.label }}
         </router-link>
@@ -118,6 +120,8 @@ export default {
           :href="link.value"
           rel="noopener noreferrer nofollow"
           target="_blank"
+          role="link"
+          :aria-label="link.label"
         > {{ link.label }} </a>
       </div>
       <slot />
@@ -127,7 +131,11 @@ export default {
       >
         <a
           class="link"
+          tabindex="0"
+          :aria-label="t('footer.wechat.title')"
+          role="link"
           @click="show"
+          @keyup.enter="show"
         >
           {{ t('footer.wechat.title') }}
         </a>
@@ -147,7 +155,12 @@ export default {
         <div>
           <button
             class="btn role-primary"
+            tabindex="0"
+            :aria-label="t('generic.close')"
+            role="button"
             @click="close"
+            @keyup.enter="close"
+            @keyup.space="close"
           >
             {{ t('generic.close') }}
           </button>

package/components/CruResource.vue

@@ -120,6 +120,11 @@ export default {
       default: () => []
     },
 
+    stepsOptions: {
+      type:    Object,
+      default: () => ({ editFirstStep: true })
+    },
+
     // The set of labels to display for the finish AsyncButton
     finishMode: {
       type:    String,
@@ -562,6 +567,7 @@ export default {
             ref="Wizard"
             :header-mode="mode"
             :steps="steps"
+            :edit-first-step="stepsOptions.editFirstStep"
             :errors="errors"
             :finish-mode="finishMode"
             class="wizard"