@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.3

package/assets/styles/base/_basic.scss

@@ -83,14 +83,12 @@ TEXTAREA,
   }
 }
 
-BUTTON,
-.btn {
-   &:focus, &.focused {
-    outline: none;
-    box-shadow: 0 0 0 var(--outline-width) var(--outline);
-    background: var(--primary-hover-bg);
-   }
+.unlabeled-select {
+  &:focus-visible, &.focused {
+    @include focus-outline;
+  }
 }
+
 A {
   @include link-color(var(--link), var(--body-text));
 

package/assets/styles/global/_button.scss

@@ -126,6 +126,11 @@ button,
   &.btn:not(.btn-sm) {
     line-height: $btn-height - 2px;
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 .role-link {
@@ -141,6 +146,11 @@ button,
     color: var(--link);
     box-shadow: none;
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 .role-multi-action {

package/assets/styles/global/_tooltip.scss

@@ -105,13 +105,13 @@
 .v-popper__popper {
   $color: var(--popover-bg);
   border: 1px solid var(--border);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-lg);
 
   .v-popper__inner {
     background: $color;
     color: var(--popover-text);
     padding: 10px;
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-lg);
     border: none;
 
     a {

package/assets/styles/themes/_dark.scss

@@ -35,6 +35,10 @@
 
   $drag-over: #DCDEE7;
 
+  $slate: #4B4F6B;
+
+  --slate: #{$slate};
+
   --default                    : #{$dark};
   --default-text               : #{$light};
   --default-hover-bg           : #{darken($dark, 10%)};
@@ -111,7 +115,7 @@
   --dropdown-active-text       : #{$lightest};
   --dropdown-active-bg         : #{$light};
   --dropdown-hover-text        : #{$lightest};
-  --dropdown-hover-bg          : var(--link);
+  --dropdown-hover-bg          : #{$slate};
   --dropdown-disabled-bg       : #{$disabled};
   --dropdown-disabled-text     : #{$disabled};
   --dropdown-group-text        : #{$disabled};
@@ -146,7 +150,7 @@
   --tag-primary                : #{$lightest};
   --tag-bg                     : #{$medium};
 
-  --popover-bg                 : var(--body-bg);
+  --popover-bg                 : #{$darker};
   --popover-border             : var(--border);
   --popover-text               : var(--body-text);
 
@@ -219,4 +223,12 @@
 
   --product-icon               : #{$lighter};
   --product-icon-active        : #{$lightest};
+
+  --badge-state-disabled-text  : #{$desc-light};
+  --badge-state-disabled-bg    : #{$medium};
+  --badge-state-disabled-border: #{$lighter};
+
+  $slate: #4B4F6B;
+
+  --slate: #{$slate};
 }

package/assets/styles/themes/_light.scss

@@ -347,6 +347,7 @@ BODY, .theme-light {
   --border                     : #{$medium};
   --border-width               : 1px;
   --border-radius              : 4px;
+  --border-radius-lg           : 8px;
   --outline                    : var(--primary);
   --outline-width              : 1px;
 
@@ -374,8 +375,8 @@ BODY, .theme-light {
   --dropdown-text              : #{$darkest};
   --dropdown-active-text       : #{$lightest};
   --dropdown-active-bg         : #{$dark};
-  --dropdown-hover-text        : #{$lightest};
-  --dropdown-hover-bg          : var(--link);
+  --dropdown-hover-text        : var(--body-text);
+  --dropdown-hover-bg          : #{$light};
   --dropdown-disabled-text     : var(--muted);
   --dropdown-disabled-bg       : #{$disabled};
   --dropdown-group-text        : #{$darker};
@@ -544,4 +545,8 @@ BODY, .theme-light {
 
   --product-icon               : #{$darker};
   --product-icon-active        : #{$darkest};
+
+  --badge-state-disabled-text  : #{$darker};
+  --badge-state-disabled-bg    : #{$lighter};
+  --badge-state-disabled-border: #{$medium};
 }

package/assets/styles/vendor/vue-select.scss

@@ -74,6 +74,10 @@
   color: var(--dropdown-text);
   white-space: nowrap;
   z-index: 1000;
+  overflow-y: auto;
+  // needs overflow-x hidden so that select for type of charts in cluster chart page
+  // doesn't show a horizontal scroll https://github.com/rancher/dashboard/pull/13139/files/9e6a8e64181de4525ad378d4d1b93c8efc2ed6d5#r1929296126
+  overflow-x: hidden;
 
   &:hover {
     cursor: pointer;

package/assets/translations/en-us.yaml

@@ -9,6 +9,7 @@ generic:
   back: Back
   cancel: Cancel
   confirm: Confirm
+  colorPicker: Color picker
   clear: Clear
   clearAll: Clear All
   close: Close
@@ -116,6 +117,10 @@ generic:
         }
   basic: Basic
 
+  ariaLabel:
+    key: Key {index}
+    value: Value {index}
+
 locale:
   menu: Locale selector menu
   en-us: English
@@ -134,6 +139,8 @@ nav:
     support: Support page link
     about: About page link
     pinCluster: Pin/Unpin cluster
+    collapseExpand: Collapse/Expand menu group
+    productAboutPage: Product about page link
   alt:
     mainMenuIcon: Main menu icon
     mainMenuRancherLogo: Main menu Rancher logo
@@ -221,10 +228,18 @@ nav:
   header:
     setLoginPage: Set as login page
     restoreCards: Restore hidden cards
+    showHideBanner: Show/Hide Banner
   userMenu:
     preferences: Preferences
     accountAndKeys: Account & API Keys
     logOut: Log Out
+    label: User menu
+    button:
+      label: Open user menu
+  actionMenu:
+    label: Page actions menu
+    button:
+      label: Open page actions menu
   failWhale:
     authMiddleware: Auth Middleware
     clusterNotFound: Cluster { clusterId } not found
@@ -514,6 +529,9 @@ authConfig:
     starttls:
       label: Start TLS
       tip: Upgrades non-encrypted connections by wrapping with TLS during the connection process. Can not be used in conjunction with TLS.
+    searchUsingServiceAccount: 
+      label: Enable Service Account Search
+      tip: When enabled, Rancher will use the service account instead of the user account to search for users and groups.
     tls: TLS
     userEnabledAttribute: User Enabled Attribute
     userMemberAttribute: User Member Attribute
@@ -931,6 +949,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:
+    refresh: refresh charts
     all: All
     categories:
       all: All Categories
@@ -950,7 +969,7 @@ catalog:
       all: All Operating Systems
       linux: Linux
       windows: Windows
-    search: Filter
+    search: Filter charts results
     deprecatedChartsFilter:
       label: Show deprecated apps
   install:
@@ -961,7 +980,7 @@ catalog:
     chart: Chart
     warning:
       managed:
-        Warning, Rancher manages deployment and upgrade of the {name} app. Upgrading this app is not supported.<br>
+        Warning, {manager} manages deployment and upgrade of the {name} app. Upgrading this app is not supported.<br>
         {version, select,
           null { }
           other { Under most circumstances, no user intervention should be needed to ensure that the {version} version is compatible with the version of Rancher that you are running.}
@@ -1061,7 +1080,7 @@ catalog:
       windows: '{ver} (Windows-only)'
   delete:
     warning:
-      managed: Warning, Rancher manages deployment and upgrade of the {name} app. Deleting this app is not supported.
+      managed: Warning, {manager} manages deployment and upgrade of the {name} app. Deleting this app is not supported.
   operation:
     tableHeaders:
       action: Action
@@ -2074,6 +2093,7 @@ cluster:
       label: Control Plane Concurrency
       toolTip: "This can be either a fixed number of nodes (e.g. 1) at a time or a percentage (e.g. 10%)"
     workerConcurrency:
+      header: Worker Nodes
       label: Worker Concurrency
       toolTip: "This can be either a fixed number of nodes (e.g. 1) at a time or a percentage (e.g. 10%)"
     drain:
@@ -2109,6 +2129,7 @@ cluster:
       tlsSan:
         label: TLS Alternate Names
       fqdn:
+        label: FQDN
         toolTip: A FQDN which will resolve to the healthy control plane nodes of the cluster.
       caCerts:
         label: CA Certificates
@@ -2381,6 +2402,9 @@ fleet:
   cluster:
     summary: Resource Summary
     nonReady: Non-Ready Bundles
+    labels: Labels
+    hideLabels: Show less
+    showLabels: Show more
   clusters:
     harvester: |-
       There {count, plural,
@@ -2732,6 +2756,8 @@ hpa:
 
 import:
   title: Import YAML
+  editor:
+    label: YAML Editor
   defaultNamespace:
     label: Default Namespace
   success: |-
@@ -5363,6 +5389,7 @@ sortableTable:
       =1 {{count} {count, plural, =1 {{singularLabel}} other {{pluralLabel}}}}
       other {{from} - {to} of {count} {pluralLabel}}}
   search: Filter
+  searchLabel: Filter table results
   in: in
   addFilter: Add Filter
   filterFor: Filter for...
@@ -6030,6 +6057,8 @@ validation:
   flowOutput:
     both: Requires "Output" or "Cluster Output" to be selected.
     global: Requires "Cluster Output" to be selected.
+  git:
+    repository: Repository URL must be a HTTP(s) or SSH url with no trailing spaces
   output:
     logdna:
       apiKey: Required an "Api Key" to be set.
@@ -6133,6 +6162,11 @@ validation:
       interval: '"{key}" must be of a format with digits followed by a unit i.e. 1h, 2m, 30s'
   tab: "One or more fields in this tab contain a form validation error"
 
+carousel:
+  previous: Previous
+  next: Next
+  controlItem: Go to slide nº {number}
+
 wizard:
   previous: Previous
   finish: Finish
@@ -6176,7 +6210,7 @@ wm:
   containerShell:
     clear: Clear
     containerName: "Container: {label}"
-    failed: "Unable to open a shell to the container (none of the shell commmands succeeded)\n\r"
+    failed: "Unable to open a shell to the container (none of the shell commands succeeded)\n\r"
     logLevel:
       info: INFO
       error: ERROR
@@ -6189,6 +6223,11 @@ wm:
     title: "Kubectl: {name}"
 
 workload:
+  scaleWorkloads: Scale workloads
+  healthWorkloads: Jobs/Pods health status
+  healthScaleToggle: Toggle/Expand workloads scaling/health
+  plus: Scale up workload
+  minus: Scale down workload
   container:
     command:
       addEnvVar: Add Variable
@@ -7746,7 +7785,7 @@ customLinks:
     issues:     File an Issue
     getStarted: Get Started
     commercialSupport: Commercial Support
-    suseCollective: SUSE Collective
+    appCo: SUSE Application Collection
 
 
 ##############################

package/components/BannerGraphic.vue

@@ -51,19 +51,6 @@ export default {
       data-testid="banner-title"
       class="title"
     />
-    <div
-      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>
   </div>
 </template>
 
@@ -74,35 +61,6 @@ export default {
   .banner-graphic {
     position: relative;
 
-    .close-button {
-      position: absolute;
-      visibility: hidden;
-
-      &:focus-visible {
-        @include focus-outline;
-        outline-offset: 2px;
-      }
-    }
-
-    &:hover .close-button {
-      visibility: visible;
-      position: absolute;
-      right: 4px;
-      top: 4px;
-      font-size: 16px;
-      padding: 4px;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      opacity: 0.4;
-
-      &:hover {
-        background-color: var(--accent-btn-hover);
-        color: var(--accent-btn-hover-text);
-        opacity: 1;
-      }
-    }
-
     .graphic {
       display: flex;
       flex-direction: column;

package/components/ButtonMultiAction.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineEmits } from 'vue';
+import { computed } from 'vue';
 
 defineEmits(['click']);
 

package/components/Carousel.vue

@@ -195,33 +195,51 @@ export default {
         </div>
       </component>
     </div>
-    <div
-      class="controls"
-      :class="{'disable': sliders.length === 1}"
-    >
-      <div
-        v-for="(slide, i) in slider"
-        :key="i"
-        class="control-item"
-        :class="{'active': activeItemId === i}"
-        @click="scrollSlide(i, slider.length)"
-      />
-    </div>
     <div
       ref="prev"
+      role="button"
       class="prev"
+      :aria-label="t('carousel.previous')"
+      :aria-disabled="sliders.length === 1"
       :class="{'disable': sliders.length === 1}"
+      tabindex="0"
       @click="nextPrev('prev')"
+      @keyup.enter.space="nextPrev('prev')"
     >
-      <i class="icon icon-chevron-left icon-4x" />
+      <i
+        class="icon icon-chevron-left icon-4x"
+      />
     </div>
     <div
       ref="next"
+      role="button"
       class="next"
+      :aria-label="t('carousel.next')"
+      :aria-disabled="sliders.length === 1"
       :class="{'disable': sliders.length === 1}"
+      tabindex="0"
       @click="nextPrev('next')"
+      @keyup.enter.space="nextPrev('next')"
+    >
+      <i
+        class="icon icon-chevron-right icon-4x"
+      />
+    </div>
+    <div
+      class="controls"
+      :class="{'disable': sliders.length === 1}"
     >
-      <i class="icon icon-chevron-right icon-4x" />
+      <div
+        v-for="(slide, i) in slider"
+        :key="i"
+        class="control-item"
+        :class="{'active': activeItemId === i}"
+        role="button"
+        tabindex="0"
+        :aria-label="t('carousel.controlItem', { number: i+1 })"
+        @click="scrollSlide(i, slider.length)"
+        @keyup.enter.space="scrollSlide(i, slider.length)"
+      />
     </div>
   </div>
 </template>
@@ -240,20 +258,6 @@ export default {
   &.disable::after {
     display: none;
   }
-
-  &.disable:hover {
-    .prev,
-    .next {
-      display: none;
-    }
-  }
-
-  &:hover {
-    .prev,
-    .next {
-      display: block;
-    }
-  }
 }
 
 .slide-track {
@@ -367,13 +371,16 @@ export default {
   position: absolute;
   z-index: 20;
   top: 90px;
-  display: none;
   cursor: pointer;
 
   &.disabled .icon {
     color: var(--disabled-bg);
     cursor: not-allowed;
   }
+
+  .icon:focus-visible {
+    @include focus-outline;
+  }
 }
 
 .next {

package/components/CommunityLinks.vue

@@ -7,6 +7,7 @@ import { SETTING } from '@shell/config/settings';
 import { mapGetters } from 'vuex';
 import { isRancherPrime } from '@shell/config/version';
 import { fetchLinks } from '@shell/config/home-links';
+import { processLink } from '@shell/plugins/clean-html';
 
 // i18n-ignore footer.wechat.title, footer.wechat.modalText, footer.wechat.modalText2
 export default {
@@ -77,7 +78,11 @@ export default {
         all.push(...this.links.defaults.filter((link) => link.enabled));
       }
 
-      return all;
+      // Process the links
+      return all.map((item) => ({
+        ...item,
+        value: processLink(item.value)
+      }));
     }
   },
   methods: {

package/components/GrowlManager.vue

@@ -87,7 +87,10 @@ export default {
     <div class="growl-list">
       <div
         v-for="(growl, idx) in stack"
-        :key="idx"
+        :key="growl.id"
+        role="alert"
+        :aria-labelledby="`growl-title-${ growl.id }`"
+        :aria-describedby="`growl-message-${ growl.id }`"
         :data-testid="`growl-list-item-${idx}`"
         :class="{'growl': true, ['bg-'+growl.color]: true}"
       >
@@ -103,11 +106,15 @@ export default {
               class="close hand icon icon-close"
               @click="close(growl)"
             />
-            <div class="growl-text-title">
+            <div
+              :id="`growl-title-${ growl.id }`"
+              class="growl-text-title"
+            >
               {{ growl.title }}
             </div>
             <p
               v-if="growl.message"
+              :id="`growl-message-${ growl.id }`"
               :class="{ 'has-title': !!growl.title }"
             >
               {{ growl.message }}

package/components/LocaleSelector.vue

@@ -11,6 +11,10 @@ export default {
     mode: {
       type:    String,
       default: ''
+    },
+    showIcon: {
+      type:    Boolean,
+      default: true
     }
   },
 
@@ -89,7 +93,10 @@ export default {
             class="locale-chooser"
           >
             {{ selectedLocaleLabel }}
-            <i class="icon icon-fw icon-sort-down" />
+            <i
+              v-if="showIcon"
+              class="icon icon-fw icon-sort-down"
+            />
           </a>
           <template #popper>
             <ul

package/components/PaginatedResourceTable.vue

@@ -2,13 +2,6 @@
 import { defineComponent } from 'vue';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import ResourceTable from '@shell/components/ResourceTable.vue';
-import { StorePaginationResult } from '@shell/types/store/pagination.types';
-
-export type FetchSecondaryResourcesOpts = { canPaginate: boolean }
-export type FetchSecondaryResources = (opts: FetchSecondaryResourcesOpts) => Promise<any>
-
-export type FetchPageSecondaryResourcesOpts = { canPaginate: boolean, force: boolean, page: any[], pagResult: StorePaginationResult }
-export type FetchPageSecondaryResources = (opts: FetchPageSecondaryResourcesOpts) => Promise<any>
 
 /**
  * This is meant to enable ResourceList like capabilities outside of List pages / components
@@ -57,6 +50,8 @@ export default defineComponent({
      * Information may be required from resources other than the primary one shown per row
      *
      * This will fetch them ALL and will be run in a non-server-side pagination world
+     *
+     * of type PagTableFetchSecondaryResources
      */
     fetchSecondaryResources: {
       type:    Function,
@@ -69,6 +64,8 @@ export default defineComponent({
      * This will fetch only those relevant to the current page using server-side pagination based filters
      *
      * called from shell/mixins/resource-fetch-api-pagination.js
+     *
+     * of type PagTableFetchPageSecondaryResources
      */
     fetchPageSecondaryResources: {
       type:    Function,

package/components/ProgressBarMulti.vue

@@ -90,6 +90,19 @@ export default {
 
       return out.filter((obj) => obj.percent);
     },
+    ariaLabelText() {
+      if (Array.isArray(this.values) && this.values.length) {
+        let ariaLabel = '';
+
+        this.values.forEach((val) => {
+          ariaLabel += `${ val.value } ${ val.value === 1 ? 'item' : 'items' } ${ val.label }`;
+        });
+
+        return ariaLabel;
+      }
+
+      return '';
+    }
   }
 };
 
@@ -108,6 +121,7 @@ function toPercent(value, min, max) {
   <div
     v-trim-whitespace
     :class="{progress: true, multi: pieces.length > 1}"
+    :aria-label="ariaLabelText"
   >
     <div
       v-for="(piece, idx) of pieces"