@rancher/shell 0.3.23 → 0.3.24

package/assets/styles/base/_variables.scss

@@ -2,6 +2,7 @@ $header-font: 'Poppins', sans-serif;
 $body-font: 'Lato', arial, helvetica, sans-serif;
 $mono-font: 'Roboto Mono', monospace;
 
+$app-bar-collapsed-width: 70px;
 $max-width: 1440px !default;
 $min-width: 75% !default;
 $input-height: 61px;

package/assets/styles/themes/_dark.scss

@@ -65,6 +65,7 @@
   --nav-border                 : #{$medium};
   --nav-hover                  : var(--primary);
   --nav-expander-hover         : var(--primary-banner-bg);
+  --nav-icon-badge-bg          : #{$dark};
 
   --disabled-bg                : #{darken($disabled, 10%)};
   --disabled-text              : #{$secondary};

package/assets/styles/themes/_light.scss

@@ -11,7 +11,7 @@ $dark      : #B6B6C2;
 //light border and buttons
 $medium    : #DCDEE7;
 
-//light inputs 
+//light inputs
 $light     : #EEEFF4;
 
 //light sidebar and box
@@ -84,9 +84,9 @@ BODY, .theme-light {
   --link-border             : #{$link};
   --link-banner-bg          : #{rgba($link, 0.15)};
   --link-light-bg           : #{rgba($link, 0.05)};
- 
 
-  
+
+
   .text-link {
     color: var(--link) !important;
   }
@@ -301,7 +301,7 @@ BODY, .theme-light {
       background: var(--error-active-bg);
       }
   }
-  
+
 
   --body-bg                    : #{$lightest};
   --body-text                  : #{$darkest};
@@ -320,13 +320,14 @@ BODY, .theme-light {
   --header-height              : 55px;
   --header-border              : #{$medium};
   --header-border-size         : 1px;
-  --nav-width                  : 230px;
+  --nav-width                  : 300px;
   --nav-bg                     : #{$lightest};
   --nav-active                 : #{$light};
   --nav-hover                  : #{$medium};
   --nav-expander-hover         : #{darken($medium, 10%)};
   --nav-border                 : #{$medium};
   --nav-border-size            : 1px;
+  --nav-icon-badge-bg          : #{$lightest};
 
   --footer-bg                  : transparent;
   --footer-height              : 0px;

package/assets/translations/en-us.yaml

@@ -139,6 +139,8 @@ nav:
   rotateEncryptionKeys: Rotate Encryption Keys
   saveAsRKETemplate: Save as RKE Template
   takeSnapshot: Take Snapshot
+  seeAllClusters: See all clusters
+  seeAllClustersCollapsed: See all
   group:
     cluster: Cluster
     inUse: More Resources
@@ -185,6 +187,7 @@ nav:
   search:
     placeholder: Type to search clusters
     noResults: No matching clusters
+    clusters: clusters
   resourceSearch:
     label: Resource Search
     toolTip: Resource Search {key}
@@ -1637,7 +1640,7 @@ cluster:
       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.
       limits: Pod Requests and Limits do not have a default configuration.
-      windowsCompatibility: "We do not recommended removing the Node Affinity rule that prevents the <b>agent</b> from running on Windows nodes as this is not a supported configuration."
+      windowsCompatibility: "We do not recommend removing the Node Affinity rule that prevents the <b>agent</b> from running on Windows nodes as this is not a supported configuration."
     affinity:
       default: Use default affinity rules defined by Rancher
       custom: Use custom affinity rules
@@ -1647,7 +1650,7 @@ cluster:
       machineSelector:
         label: Add Machine Selector
         listLabel: Add Argument
-        bannerLabel: 'Note: The last selector that matches wins and only args from it will be used.  Args from other matches above will not combined together or merged.'
+        bannerLabel: 'Note: The last selector that matches wins, and only args from it will be used.  Args from other matches above will not be combined together or merged.'
         title: 'For machines with labels matching:'
         subTitle: 'Use the Kubelet args:'
         titleAlt:  |-
@@ -1661,14 +1664,14 @@ cluster:
     agentArgs:
       label: Raise error if kernel parameters are different than the expected kubelet defaults
   banner:
-    warning: 'This cluster contains a machineSelectorConfig which this form does not fully support; use the YAML editor to manage the full configuration.'
-    os: 'You are attemping to add a {newOS} worker node to a cluster with one or more {existingOS} worker nodes: some installed apps may need to be upgraded or removed.'
+    warning: 'This cluster contains a machineSelectorConfig, which this form does not fully support; use the YAML editor to manage the full configuration.'
+    os: 'You are attempting to add a {newOS} worker node to a cluster with one or more {existingOS} worker nodes: some installed apps may need to be upgraded or removed.'
     rke2-k3-reprovisioning: 'Making changes to cluster configuration may result in nodes reprovisioning. For more information see the <a target="blank" href="{docsBase}/cluster-provisioning/rke-clusters/behavior-differences-between-rke1-and-rke2/" target="_blank" rel="noopener nofollow">documentation</a>.'
     desiredNodeGroupWarning: There are 0 nodes available to run the cluster agent. The cluster will not become active until at least one node is available.
     invalidPsps: You have one or more PodSecurityPolicy resource(s) in this cluster. Pod Security Policies are not available in Kubernetes v1.25 and will be automatically removed.
-    haveArgInfo: Configuration information is not available for the selected Kubernetes version.  The options available in this screen will be limited, you may want to use the YAML editor.
+    haveArgInfo: Configuration information is not available for the selected Kubernetes version.  The options available on this screen will be limited; you may want to use the YAML editor.
     deprecatedPsp: Pod Security Policies are deprecated as of Kubernetes v1.21, and have been removed in Kubernetes v1.25.
-    removedPsp: Pod Security Policies have been removed in Kubernetes v1.25, use Pod Security Admission instead.
+    removedPsp: Pod Security Policies have been removed in Kubernetes v1.25. Use Pod Security Admission instead.
   rkeTemplateUpgrade: Template revision {name} available for upgrade
 
   availabilityWarnings:
@@ -1830,7 +1833,7 @@ cluster:
     modal:
       pspChange:
         title: Pod Security Policy deprecation
-        body: Kubernetes has removed support for Pod Security Policies (PSPs) starting with version 1.25. If your cluster has PodSecurityPolicy admission controller enabled via "kube-apiserver-arg.enable-admission-plugins" in Cluster YAML, it has to be <i>manually</i> removed before proceeding with the upgrade. Additionally, any PSPs that may be present in the cluster will no longer be available/enforced. Do you want to proceed?
+        body: <p>Kubernetes has removed support for Pod Security Policies (PSPs) starting with version 1.25. If your cluster has PodSecurityPolicy admission controller enabled via "kube-apiserver-arg.enable-admission-plugins" in Cluster YAML, it has to be <i>manually</i> removed before proceeding with the upgrade. Additionally, any PSPs that may be present in the cluster will no longer be available/enforced. Do you want to proceed?</p>
     snapshots:
       suffix: Snapshots per node
     systemService:
@@ -1846,6 +1849,7 @@ cluster:
       header: Cloud Provider Config
       defaultValue:
         label: Default - RKE2 Embedded
+      unsupported: The current Cloud Provider is not supported by this version of Kubernetes. The Cloud Provider has been changed to External. Please use the Cloud Provider Config to supply an out-of-tree configuration as needed.
     security:
       header: Security
     cis:
@@ -2162,7 +2166,7 @@ fleet:
       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.
       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 th ecluster will be lost.
+      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.
     add:
       steps:
         repoInfo:
@@ -2214,6 +2218,7 @@ fleet:
     workspace:
       label: Workspace
       addWorkspace: Create a workspace
+    helmRepoURLRegex: Helm Repos (URL Regex)
   clusterGroup:
     selector:
       label: Cluster Selectors
@@ -4090,14 +4095,14 @@ plugins:
     subtitle: Catalogs
     imageLoad:
       load: Import Extension Catalog
-      prompt: An Extension Catalog contains extension assets bundled into an image, importing will take the image and host a Helm repository to act as a catalog for custom built Extensions. 
+      prompt: An Extension Catalog contains extension assets bundled into an image, importing will take the image and host a Helm repository to act as a catalog for custom built Extensions.
       fields:
         image:
           label: Catalog Image Reference
           placeholder: "e.g. hub.docker.io/example-org/my-image:latest"
         secrets:
           banner: "If the registry that hosts the Catalog Image requires Pull Secrets, they must be created in the following namespace:<pre>cattle-ui-plugin-system</pre>"
-      banner: This will create an Deployment, Service, and Helm repository to serve the extension charts. 
+      banner: This will create an Deployment, Service, and Helm repository to serve the extension charts.
       imageVersion:
         title: Image Version Not Found
         message: Unable to determine image version from {image}, defaulting to latest

package/assets/translations/zh-hans.yaml

@@ -1838,7 +1838,7 @@ cluster:
     modal:
       pspChange:
         title: 弃用 Pod 安全策略
-        body: 从 v1.25 版开始，Kubernetes 已经取消了对 Pod 安全策略 (PSP) 的支持。如果你的集群通过集群 YAML 中的 “kube-apiserver-arg.enable-admission-plugins” 启用了 PodSecurityPolicy 准入控制器，你必须在继续升级之前<i>手动</i>删除它。此外，集群中存在的任何 PSP 将不再可用或强制执行。是否继续操作？
+        body: <p>从 v1.25 版开始，Kubernetes 已经取消了对 Pod 安全策略 (PSP) 的支持。如果你的集群通过集群 YAML 中的 “kube-apiserver-arg.enable-admission-plugins” 启用了 PodSecurityPolicy 准入控制器，你必须在继续升级之前<i>手动</i>删除它。此外，集群中存在的任何 PSP 将不再可用或强制执行。是否继续操作？</p>
     snapshots:
       suffix: 每个节点的快照
     systemService:

package/components/ClusterProviderIconMenu.vue

@@ -0,0 +1,161 @@
+<script>
+export default {
+  props: {
+    cluster: {
+      type:     Object,
+      required: true,
+    },
+  },
+  computed: {
+    isEnabled() {
+      return !!this.cluster?.ready;
+    },
+  },
+  methods: {
+    /**
+     * Shortens an input string based on the number of segments it contains.
+     * @param {string} input - The input string to be shortened.
+     * @returns {string} - The shortened string.
+     * @example smallIdentifier('local') => 'lcl'
+     * @example smallIdentifier('word-wide-web') => 'www'
+     */
+    smallIdentifier(input) {
+      if (this.cluster.badge?.iconText) {
+        return this.cluster.badge?.iconText;
+      }
+
+      if (!input) {
+        return '';
+      }
+
+      if (input.length <= 3) {
+        return input;
+      }
+
+      const segments = input.match(/([A-Za-z]+|\d+)/g);
+
+      if (!segments) return ''; // In case no valid segments are found
+
+      let result = '';
+
+      switch (segments.length) {
+      case 1:
+        // eslint-disable-next-line no-case-declarations
+        const word = segments[0];
+
+        result = `${ word[0] }${ word[Math.floor(word.length / 2)] }${ word[word.length - 1] }`;
+        break;
+      case 2:
+        result = `${ segments[0][0] }${ segments[1][0] }${ segments[1][segments[1].length - 1] }`;
+        break;
+      default:
+        result = segments.slice(0, 3).map((segment) => segment[0]).join('');
+      }
+
+      return result;
+    },
+
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="cluster"
+    class="cluster-icon-menu"
+  >
+    <div
+      class="cluster-badge-logo"
+      :class="{ 'disabled': !isEnabled }"
+      :style="{borderBottom: cluster.badge?.color ? `4px solid ${cluster.badge?.color}` : ''}"
+    >
+      <span
+        class="cluster-badge-logo-text"
+      >
+        {{ smallIdentifier(cluster.label) }}
+      </span>
+      <!-- {{ cluster.badge.iconText }} -->
+    </div>
+    <!-- eslint-enable -->
+    <svg
+      v-if="cluster.isLocal && !cluster.isHarvester"
+      id="local-cluster-icon-menu"
+      class="cluster-os-logo"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 100 100"
+      style="enable-background:new 0 0 100 100;"
+    >
+      <g>
+        <g>
+          <path
+            class="rancher-icon-fill"
+            d="M26.0862026,44.4953918H8.6165142c-5.5818157,0-9.3979139-4.6252708-8.4802637-10.1311035l2.858391-17.210701
+            C3.912292,11.6477556,6.1382647,7.1128125,7.8419709,7.1128125s3.1788611,4.5368752,3.1788611,10.1186218v4.4837742
+            c0,5.5817471,4.4044495,9.5409164,9.9862652,9.5409164h5.0791054V44.4953918z"
+          />
+        </g>
+        <path
+          class="rancher-icon-fill"
+          d="M63.0214729,92.8871841H37.0862045c-6.0751343,0-11.0000019-4.9248657-11.0000019-11V30.3864384
+          c0-6.0751324,4.9248676-11,11.0000019-11h25.9352684c6.0751305,0,11.0000038,4.9248676,11.0000038,11v51.5007477
+          C74.0214767,87.9623184,69.0966034,92.8871841,63.0214729,92.8871841z"
+        />
+        <g>
+          <path
+            class="rancher-icon-fill"
+            d="M73.9137955,44.4953918h17.4696884c5.5818176,0,9.3979187-4.6252708,8.4802628-10.1311035
+            l-2.8583908-17.210701c-0.9176483-5.5058317-3.1436234-10.0407753-4.8473282-10.0407753
+            s-3.1788635,4.5368752-3.1788635,10.1186218v4.4837742c0,5.5817471-4.4044418,9.5409164-9.9862595,9.5409164h-5.0791092
+            V44.4953918z"
+          />
+        </g>
+      </g>
+    </svg>
+    <img
+      v-else
+      class="cluster-os-logo"
+      :src="cluster.providerNavLogo"
+    >
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+  .cluster-icon-menu {
+    position: relative;
+    align-items: center;
+    display: flex;
+    height: 28px;
+    justify-content: center;
+    width: 42px;
+  }
+  .cluster-os-logo {
+    position: absolute;
+    top: -6px;
+    right: -4px;
+    width: 14px;
+  }
+
+  .cluster-badge-logo {
+    width: 42px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--default-active-text);
+    font-weight: bold;
+    background: var(--nav-icon-badge-bg);
+    border: 1px solid var(--default-border);
+    border-radius: 5px;
+    padding-top: 2px;
+    font-size: 12px;
+    text-transform: uppercase;
+
+    &.disabled {
+      filter: grayscale(1);
+      color: var(--muted);
+    }
+  }
+</style>

package/components/Loading.vue

@@ -75,7 +75,7 @@ export default {
     }
 
     &-content-mode {
-      left: var(--nav-width);
+      left: calc(var(--nav-width));
       top: var(--header-height);
     }
   }

package/components/SideNav.vue

@@ -552,7 +552,7 @@ export default {
     ::v-deep h6 {
       margin: 0;
       letter-spacing: normal;
-      line-height: initial;
+      line-height: 15px;
 
       A { padding-left: 0; }
     }

package/components/form/SelectOrCreateAuthSecret.vue

@@ -477,6 +477,7 @@ export default {
       <div :class="firstCol">
         <LabeledSelect
           v-model="selected"
+          data-testid="auth-secret-select"
           :mode="mode"
           :label-key="labelKey"
           :loading="$fetchState.pending"
@@ -488,6 +489,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
+            data-testid="auth-secret-ssh-public-key"
             :mode="mode"
             type="multiline"
             label-key="selectOrCreateAuthSecret.ssh.publicKey"
@@ -496,6 +498,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="privateKey"
+            data-testid="auth-secret-ssh-private-key"
             :mode="mode"
             type="multiline"
             label-key="selectOrCreateAuthSecret.ssh.privateKey"
@@ -506,6 +509,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
+            data-testid="auth-secret-basic-public-key"
             :mode="mode"
             label-key="selectOrCreateAuthSecret.basic.username"
           />
@@ -513,6 +517,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="privateKey"
+            data-testid="auth-secret-basic-private-key"
             :mode="mode"
             type="password"
             label-key="selectOrCreateAuthSecret.basic.password"
@@ -523,6 +528,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
+            data-testid="auth-secret-s3-public-key"
             :mode="mode"
             label-key="selectOrCreateAuthSecret.s3.accessKey"
           />
@@ -530,6 +536,7 @@ export default {
         <div :class="moreCols">
           <LabeledInput
             v-model="privateKey"
+            data-testid="auth-secret-s3-private-key"
             :mode="mode"
             type="password"
             label-key="selectOrCreateAuthSecret.s3.secretKey"

package/components/nav/Group.vue

@@ -69,7 +69,7 @@ export default {
         if (overviewRoute && grp.overview) {
           const route = this.$router.resolve(overviewRoute || {});
 
-          return this.$route.fullPath === route?.route?.fullPath;
+          return this.$route.fullPath.split('#')[0] === route?.route?.fullPath;
         }
       }
 
@@ -96,8 +96,14 @@ export default {
       // Don't auto-select first group entry if we're already expanded and contain the currently-selected nav item
       if (this.hasActiveRoute() && this.isExpanded) {
         return;
-      }
+      } else {
+        // Remove all active class if click on group header and not active route
+        const headerEl = document.querySelectorAll('.header');
 
+        headerEl.forEach((el) => {
+          el.classList.remove('active');
+        });
+      }
       this.expandGroup();
 
       const items = this.group[this.childrenKey];
@@ -132,6 +138,11 @@ export default {
 
     // User clicked on the expander icon, so toggle the expansion so the user can see inside the group
     peek($event) {
+      // Add active class to the current header if click on chevron icon
+      $event.target.parentElement.classList.remove('active');
+      if (this.hasActiveRoute()) {
+        $event.target.parentElement.classList.add('active');
+      }
       this.isExpanded = !this.isExpanded;
       $event.stopPropagation();
     },
@@ -212,7 +223,7 @@ export default {
       <i
         v-if="!onlyHasOverview && canCollapse"
         class="icon toggle"
-        :class="{'icon-chevron-down': !isExpanded, 'icon-chevron-up': isExpanded}"
+        :class="{'icon-chevron-right': !isExpanded, 'icon-chevron-down': isExpanded}"
         @click="peek($event, true)"
       />
     </div>
@@ -267,17 +278,18 @@ export default {
     position: relative;
     cursor: pointer;
     color: var(--body-text);
+    height: 33px;
 
-    > H6 {
+    H6 {
       color: var(--body-text);
       user-select: none;
       text-transform: none;
-      font-size: 14px;
+      font-size: 16px;
     }
 
     > A {
       display: block;
-      padding-left: 10px;
+      padding-left: 16px;
       &:hover{
           text-decoration: none;
         }
@@ -285,20 +297,14 @@ export default {
         outline:none;
       }
       > H6 {
-        font-size: 14px;
         text-transform: none;
       }
     }
-
     &.active {
       background-color: var(--nav-active);
     }
   }
 
-  .body {
-    margin-left: 10px;
-  }
-
   .accordion {
     .header {
       &:hover:not(.noHover) {
@@ -323,18 +329,21 @@ export default {
         }
 
         > H6 {
-          font-size: 14px;
           text-transform: none;
-          padding-left: 10px;
+          padding-left: 16px;
         }
 
         > I {
           position: absolute;
           right: 0;
           top: 0;
-          padding: 10px 7px 9px 7px;
+          padding: 10px 10px 9px 7px;
           user-select: none;
         }
+
+        &:has(> a.nuxt-link-active) {
+          background: var(--nav-active);
+        }
       }
 
       > .body {
@@ -344,20 +353,19 @@ export default {
 
     &.depth-1 {
       > .header {
+        padding-left: 20px;
         > H6 {
-          font-size: 13px;
-          line-height: 16px;
+          line-height: 18px;
           padding: 8px 0 7px 5px !important;
         }
         > I {
-          padding: 9px 7px 8px 7px !important;
+          padding: 10px 7px 9px 7px !important;
         }
       }
     }
 
     &:not(.depth-0) {
       > .header {
-        padding-left: 10px;
         > H6 {
           // Child groups that aren't linked themselves
           display: inline-block;
@@ -372,18 +380,29 @@ export default {
         }
       }
     }
+
+    &.expanded:has(> .active),
+    &.expanded:has(> ul li.nuxt-link-active) {
+      background: var(--nav-active);
+    }
+
+    &.expanded:has(> ul li.root) {
+      background: transparent;
+    }
   }
 
- .body ::v-deep > .child.nuxt-link-active,
- .header ::v-deep > .child.nuxt-link-exact-active {
+  .body ::v-deep > .child.nuxt-link-active,
+  .header ::v-deep > .child.nuxt-link-exact-active {
     padding: 0;
 
     A, A I {
-      color: var(--body-text);
+      color: var(--primary-hover-text);
     }
 
     A {
-      background-color: var(--nav-active);
+      color: var(--primary-hover-text);
+      background-color: var(--primary-hover-bg);
+      font-weight: bold;
     }
   }
 
@@ -391,11 +410,22 @@ export default {
     A {
       border-left: solid 5px transparent;
       line-height: 16px;
-      font-size: 13px;
+      font-size: 14px;
+      padding-left: 24px;
+      display: flex;
+      justify-content: space-between;
     }
 
     A:focus {
       outline: none;
     }
+
+    &.root {
+      background: transparent;
+      A {
+        padding-left: 14px;
+      }
+    }
   }
+
 </style>

package/components/nav/Header.vue

@@ -715,7 +715,7 @@ export default {
     }
 
     > .menu-spacer {
-      flex: 0 0 calc(var(--header-height) + 10px);
+      flex: 0 0 15px;
 
       &.isSingleProduct  {
         display: flex;