@rancher/shell 3.0.1 → 3.0.2-rc.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);
   }
 }
 

package/assets/styles/base/_mixins.scss

@@ -158,5 +158,6 @@
 
 @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

@@ -106,6 +106,11 @@ button,
       border: 0;
     }
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 .role-tertiary {
@@ -180,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/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,26 @@ 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
@@ -196,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}
@@ -5169,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
@@ -5743,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
@@ -5818,6 +5840,7 @@ tableHeaders:
   resourcesReady: Resources Ready
   restarts: Restarts
   restart: Restart Required
+  restartSystem: Restart { vendor }
   restore: Restore
   role: Role
   roles: Roles
@@ -7409,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
@@ -7480,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.
@@ -7487,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
@@ -7496,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.
@@ -7565,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
@@ -7759,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

@@ -7310,7 +7310,7 @@ support:
       text: 我们的开发人员会快速解决问题，因此你可以放心使用 SUSE Rancher 的产品。
     three:
       title: 故障排除
-      text: 无论你使用的 Rancher Labs 产品、Kubernetes、Docker 还是底层基础架构出现问题，我们都会努力找到问题的根本原因。
+      text: 无论你使用的 SUSE 产品、Kubernetes、Docker 还是底层基础架构出现问题，我们都会努力找到问题的根本原因。
     four:
       title: 自由创新
       text: 基于我们与众多 Kubernetes 供应商、操作系统和开源软件认证的兼容性，实现自主创新。

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/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,12 +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="ml-5 mr-0"
+      :class="{icon: true, 'icon-lg': true, [displayIcon]: true, 'mr-0': isManualRefresh}"
     />
     <span
       v-if="labelAs === 'text' && displayLabel"

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"

package/components/GrowlManager.vue

@@ -106,7 +106,10 @@ export default {
             <div class="growl-text-title">
               {{ growl.title }}
             </div>
-            <p v-if="growl.message">
+            <p
+              v-if="growl.message"
+              :class="{ 'has-title': !!growl.title }"
+            >
               {{ growl.message }}
             </p>
           </div>
@@ -153,12 +156,16 @@ export default {
     word-break: break-all;
     box-shadow: 0 3px 5px 0px var(--shadow);
 
+    $growl-icon-size: 20px;
+
     .icon-container {
       align-self: center;
       flex-basis: 10%;
       padding: 10px 20px 10px 10px;
       i {
-        font-size: 24px;
+        font-size: $growl-icon-size;
+        width: $growl-icon-size;
+        height: $growl-icon-size;
       }
     }
 
@@ -183,11 +190,14 @@ export default {
         }
         .growl-text-title {
           font-size: 16px;
-          margin-bottom: 20px;
         }
 
         > P {
-          margin-top: 5px;
+          padding-top: 2px;
+
+          &.has-title {
+            margin-top: 5px;
+          }
         }
       }
     }

package/components/LocaleSelector.vue

@@ -11,7 +11,11 @@ export default {
     mode: {
       type:    String,
       default: ''
-    },
+    }
+  },
+
+  data() {
+    return { isLocaleSelectorOpen: false };
   },
 
   computed: {
@@ -40,8 +44,15 @@ export default {
   },
 
   methods: {
+    openLocaleSelector() {
+      this.isLocaleSelectorOpen = true;
+    },
+    closeLocaleSelector() {
+      this.isLocaleSelectorOpen = false;
+    },
     switchLocale($event) {
       this.$store.dispatch('i18n/switchTo', $event);
+      this.closeLocaleSelector();
     },
   }
 };
@@ -50,13 +61,28 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <div v-if="showLocale">
+      <div
+        v-if="showLocale"
+        role="menu"
+        :aria-label="t('locale.menu')"
+        class="locale-login-container"
+        tabindex="0"
+        @click="openLocaleSelector"
+        @blur.capture="closeLocaleSelector"
+        @keyup.enter="openLocaleSelector"
+        @keyup.space="openLocaleSelector"
+      >
         <v-dropdown
           popperClass="localeSelector"
+          :shown="isLocaleSelectorOpen"
           placement="top"
           distance="8"
           skidding="12"
-          :triggers="['click']"
+          :triggers="[]"
+          :autoHide="false"
+          :flip="false"
+          :container="false"
+          @focus.capture="openLocaleSelector"
         >
           <a
             data-testid="locale-selector"
@@ -74,13 +100,21 @@ export default {
                 v-if="showNone"
                 v-t="'locale.none'"
                 class="hand"
-                @click="switchLocale('none')"
+                tabindex="0"
+                role="menuitem"
+                @click.stop="switchLocale('none')"
+                @keyup.enter.stop="switchLocale('none')"
+                @keyup.space.stop="switchLocale('none')"
               />
               <li
                 v-for="(label, name) in availableLocales"
                 :key="name"
+                tabindex="0"
+                role="menuitem"
                 class="hand"
-                @click="switchLocale(name)"
+                @click.stop="switchLocale(name)"
+                @keyup.enter.stop="switchLocale(name)"
+                @keyup.space.stop="switchLocale(name)"
               >
                 {{ label }}
               </li>
@@ -114,6 +148,11 @@ export default {
   border-radius: 4px;
 }
 
+.hand:focus-visible {
+  @include focus-outline;
+  outline-offset: 4px;
+}
+
 .locale-chooser {
   cursor: pointer;
 
@@ -121,4 +160,9 @@ export default {
     text-decoration: none;
   }
 }
+
+.locale-login-container:focus-visible {
+  @include focus-outline;
+  outline-offset: 2px;
+}
 </style>

package/components/PaginatedResourceTable.vue

@@ -93,8 +93,8 @@ export default defineComponent({
   },
 
   computed: {
-    safeHeaders() {
-      const customHeaders = this.canPaginate ? this.paginationHeaders : this.headers;
+    safeHeaders(): any[] {
+      const customHeaders: any[] = this.canPaginate ? this.paginationHeaders : this.headers;
 
       return customHeaders || this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
     }
@@ -109,7 +109,7 @@ export default defineComponent({
       v-bind="$attrs"
       :schema="schema"
       :rows="rows"
-      :alt-loading="canPaginate"
+      :alt-loading="canPaginate && !isFirstLoad"
       :loading="loading"
       :groupable="groupable"
 
@@ -124,6 +124,7 @@ export default defineComponent({
       <template
         v-for="(_, slot) of $slots"
         v-slot:[slot]="scope"
+        :key="slot"
       >
         <slot
           :name="slot"

package/components/ResourceDetail/Masthead.vue

@@ -443,6 +443,9 @@ export default {
             <router-link
               v-if="location"
               :to="location"
+              role="link"
+              class="masthead-resource-list-link"
+              :aria-label="parent.displayName"
             >
               {{ parent.displayName }}:
             </router-link>
@@ -584,10 +587,10 @@ export default {
   }
 
   HEADER {
-    margin: 0;
+    margin: 0 0 0 -5px;
 
     .title {
-      overflow: hidden;
+      overflow-x: hidden;
     }
   }
 
@@ -598,7 +601,7 @@ export default {
 
     h1 {
       margin: 0;
-      overflow: hidden;
+      overflow-x: hidden;
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -606,9 +609,13 @@ export default {
       .masthead-resource-title {
         padding: 0 8px;
         text-overflow: ellipsis;
-        overflow: hidden;
+        overflow-x: hidden;
         white-space: nowrap;
       }
+
+      .masthead-resource-list-link {
+        margin: 5px;
+      }
     }
   }