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

package/assets/styles/base/_basic.scss

@@ -61,13 +61,13 @@ BODY {
 INPUT,
 SELECT,
 TEXTAREA,
-.labeled-input,
 .checkbox-custom {
   &:focus, &.focused {
     @include form-focus;
   }
 }
 
+.labeled-input,
 .radio-custom,
 .labeled-select,
 .unlabeled-select {
@@ -76,6 +76,7 @@ TEXTAREA,
   }
 }
 
+.labeled-input,
 .labeled-select,
 .unlabeled-select {
   &.focused {
@@ -83,14 +84,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/_form.scss

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

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%)};
@@ -68,7 +72,7 @@
   --banner-text-color          : #{$lightest};
 
   --nav-bg                     : #{$darkest};
-  --nav-active                 : var(--primary-active-bg);
+  --nav-active                 : #333;
   --nav-border                 : #{$medium};
   --nav-hover                  : var(--primary);
   --nav-expander-hover         : var(--primary-banner-bg);
@@ -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,12 +9,14 @@ generic:
   back: Back
   cancel: Cancel
   confirm: Confirm
+  colorPicker: Color picker
   clear: Clear
   clearAll: Clear All
   close: Close
   comingSoon: Coming Soon
   comma: ', '
   copy: Copy
+  copyToClipboard: Copy text to Clipboard
   create: Create
   created: Created
   customize: Customize
@@ -116,6 +118,10 @@ generic:
         }
   basic: Basic
 
+  ariaLabel:
+    key: Key {index}
+    value: Value {index}
+
 locale:
   menu: Locale selector menu
   en-us: English
@@ -134,6 +140,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 +229,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 +530,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 +950,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 +970,7 @@ catalog:
       all: All Operating Systems
       linux: Linux
       windows: Windows
-    search: Filter
+    search: Filter charts results
     deprecatedChartsFilter:
       label: Show deprecated apps
   install:
@@ -961,7 +981,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 +1081,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 +2094,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 +2130,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 +2403,9 @@ fleet:
   cluster:
     summary: Resource Summary
     nonReady: Non-Ready Bundles
+    labels: Labels
+    hideLabels: Show less
+    showLabels: Show more
   clusters:
     harvester: |-
       There {count, plural,
@@ -2416,6 +2441,7 @@ fleet:
       resources: Resources
       unready: Non-Ready
     auth:
+      title: Authentication
       label: Authentication
       git: Git Authentication
       helm: Helm Authentication
@@ -2426,20 +2452,20 @@ fleet:
       label: Paths
       placeholder: e.g. /directory/in/your/repo
       addLabel: Add Path
-      empty: The root of the repo is used by default.  To use one or more different directories, add them here.
+      empty: The root of the repo is used by default. Multiple different directories can be provided.
     repo:
+      title: Source
       label: Repository URL
       placeholder: e.g. https://github.com/rancher/fleet-examples.git or git@github.com:rancher/fleet-examples.git
       addRepo: Add Repository
       noRepos: No repositories have been added
       noWorkspaces: There are no workspaces. <br/> Please create a workspace before adding repositories
-      protocolBanner: Enter a valid HTTPS or SSH URL to a git repository.
     resources:
       label: 'Resource Handling'
       keepResources: Always Keep Resources
-      keepResourcesBanner: When enabled above, resources will be kept when deleting a GitRepo or Bundle - only Helm release secrets will be deleted.
+      keepResourcesTooltip: When enabled, resources will be kept when deleting a GitRepo or Bundle - only Helm release secrets will be deleted.
       correctDrift: Enable Self-Healing
-      correctDriftBanner: When enabled, Fleet will ensure that the cluster resources are kept in sync with the git repository. All resource changes made on the cluster will be lost.
+      correctDriftTooltip: When enabled, Fleet will ensure that the cluster resources are kept in sync with the git repository. All resource changes made on the cluster will be lost.
     add:
       steps:
         repoInfo:
@@ -2732,6 +2758,8 @@ hpa:
 
 import:
   title: Import YAML
+  editor:
+    label: YAML Editor
   defaultNamespace:
     label: Default Namespace
   success: |-
@@ -4354,6 +4382,8 @@ plugins:
   incompatibleUiExtensionsApiVersion: "The latest version of this extension ({ version }) is not compatible with the current Extensions API version ({ required })."
   incompatibleHost: 'The latest version of this extension ({ version }) has a host of "{ required }" which is not compatible with this application "{ mainHost }".'
   currentInstalledVersionBlockedByKubeVersion: "This version is not compatible with the current Kubernetes version ({ kubeVersion }  Vs  { kubeVersionToCheck })."
+  closePluginPanel: Close plugin description panel
+  viewVersionDetails: View extension {name} version {version} details/Readme
   labels:
     builtin: Built-in
     experimental: Experimental
@@ -4361,6 +4391,8 @@ plugins:
     image: Image
     installing: Installing ...
     uninstalling: Uninstalling ...
+    menu: Extensions menu
+    reloadRancher: Reload Rancher
   descriptions:
     experimental: This Extension is marked as experimental
     third-party: This Extension is provided by a Third-Party
@@ -5113,10 +5145,22 @@ secret:
     username: Username
   ssh:
     keys: Keys
+    keysAndHosts: Keys and Known Hosts
     public: Public Key
     publicPlaceholder: "Paste in your public key"
     private: Private Key
     privatePlaceholder: "Paste in your private key"
+    knownHosts: Known Hosts
+    knownHostsPlaceholder: "Known hosts metadata, one per line"
+    editKnownHosts:
+      title: SSH Known Hosts Configuration
+      entries:  |-
+        {entries, plural,
+          =0 {Empty}
+          =1 {1 Entry}
+          other {{entries} Entries}
+        }
+
   serviceAcct:
     ca: CA Certificate
     token: Token
@@ -5363,6 +5407,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 +6075,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 +6180,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 +6228,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 +6241,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 +7803,7 @@ customLinks:
     issues:     File an Issue
     getStarted: Get Started
     commercialSupport: Commercial Support
-    suseCollective: SUSE Collective
+    appCo: SUSE Application Collection
 
 
 ##############################

package/assets/translations/zh-hans.yaml

@@ -2153,13 +2153,12 @@ fleet:
       addRepo: 添加仓库
       noRepos: 未添加任何仓库
       noWorkspaces: 没有工作空间。<br/>请在添加仓库之前创建一个工作空间
-      protocolBanner: 输入指向 git 仓库的有效 HTTPS 或 SSH URL。
     resources:
       label: '资源处理'
       keepResources: 永远保留资源
-      keepResourcesBanner: 启用时，删除 GitRepo 或 Bundle 后将保留资源，只会删除 Helm Release Secret。
+      keepResourcesTooltip: 启用时，删除 GitRepo 或 Bundle 后将保留资源，只会删除 Helm Release Secret。
       correctDrift: 启用自我修复
-      correctDriftBanner: 启用后，Fleet 将确保集群资源与 Git 仓库保持同步。在 ecluster 上进行的所有资源更改都将丢失。
+      correctDriftTooltip: 启用后，Fleet 将确保集群资源与 Git 仓库保持同步。在 ecluster 上进行的所有资源更改都将丢失。
     add:
       steps:
         repoInfo:

package/components/AppModal.vue

@@ -1,5 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { DEFAULT_FOCUS_TRAP_OPTS, useBasicSetupFocusTrap, getFirstFocusableElement } from '@shell/composables/focusTrap';
+
+export const DEFAULT_ITERABLE_NODE_SELECTOR = 'body;';
 
 export default defineComponent({
   name: 'AppModal',
@@ -56,6 +59,27 @@ export default defineComponent({
     name: {
       type:    String,
       default: '',
+    },
+    /**
+     * trigger focus trap
+     */
+    triggerFocusTrap: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * forcefully set return focus element based on this selector
+     */
+    returnFocusSelector: {
+      type:    String,
+      default: '',
+    },
+    /**
+     * will return focus to the first iterable node of this container select
+     */
+    returnFocusFirstIterableNodeSelector: {
+      type:    String,
+      default: DEFAULT_ITERABLE_NODE_SELECTOR,
     }
   },
   computed: {
@@ -85,6 +109,31 @@ export default defineComponent({
       };
     }
   },
+  setup(props) {
+    if (props.triggerFocusTrap) {
+      let opts:any = DEFAULT_FOCUS_TRAP_OPTS;
+
+      // if we have a "returnFocusFirstIterableNodeSelector" on top of "returnFocusSelector"
+      // then we will use "returnFocusFirstIterableNodeSelector" as a fallback of "returnFocusSelector"
+      if (props.returnFocusFirstIterableNodeSelector && props.returnFocusFirstIterableNodeSelector !== DEFAULT_ITERABLE_NODE_SELECTOR && props.returnFocusSelector) {
+        opts = {
+          ...DEFAULT_FOCUS_TRAP_OPTS,
+          setReturnFocus: () => {
+            return document.querySelector(props.returnFocusSelector) ? props.returnFocusSelector : getFirstFocusableElement(document.querySelector(props.returnFocusFirstIterableNodeSelector));
+          }
+        };
+      // otherwise, if we are sure of permanent existance of "returnFocusSelector"
+      // we just return to that element
+      } else if (props.returnFocusSelector) {
+        opts = {
+          ...DEFAULT_FOCUS_TRAP_OPTS,
+          setReturnFocus: props.returnFocusSelector
+        };
+      }
+
+      useBasicSetupFocusTrap('#modal-container-element', opts);
+    }
+  },
   mounted() {
     document.addEventListener('keydown', this.handleEscapeKey);
   },
@@ -134,6 +183,7 @@ export default defineComponent({
       >
         <div
           v-bind="$attrs"
+          id="modal-container-element"
           ref="modalRef"
           :class="customClass"
           class="modal-container"

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']);