@rancher/shell 3.0.9-rc.5 → 3.0.9

package/assets/images/providers/oci-open-containers.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 576 576" style="enable-background:new 0 0 576 576;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#808184;}
+	.st1{fill:#262261;}
+</style>
+<g>
+	<g>
+		<g>
+			<polygon class="st0" points="326.6,212.6 326.6,132.6 128.6,132.6 128.6,444.6 326.6,444.6 326.6,364.6 208.6,364.6 208.6,212.6 
+							"/>
+			<g>
+				<rect x="366.5" y="132.6" class="st1" width="79.9" height="79.9"/>
+				<rect x="366.5" y="252.6" class="st1" width="79.9" height="192"/>
+			</g>
+		</g>
+		<path class="st1" d="M8.5,9.5v558.2h558.2V9.5H8.5z M486.4,484.7H88.7V92.6h397.8V484.7z"/>
+	</g>
+</g>
+</svg>

package/assets/styles/themes/_dark.scss

@@ -275,5 +275,7 @@
   
     --rc-disabled-background: #{$gray005};
     --rc-disabled-text-color: #{$gray004};
+    --rc-image-bg: #{$lightest};
+    --rc-image-color: #{$darkest};
   }
 }

package/assets/styles/themes/_light.scss

@@ -593,6 +593,8 @@
     --rc-inactive-disabled-border: #{$gray001};
     --rc-disabled-background: #{$gray001};
     --rc-disabled-text-color: #{$gray004};
+    --rc-image-bg: #{$lightest};
+    --rc-image-color: #{$darkest};
   
   }
 }

package/assets/styles/themes/_modern.scss

@@ -724,6 +724,9 @@ BODY, .theme-light {
   --rc-disabled-background: #{$gray001};
   --rc-disabled-text-color: #{$gray004};
 
+  --rc-image-bg: #{$lightest};
+  --rc-image-color: #{$darkest};
+
   --warning-badge    : #{$warning};
   --on-warning-banner : #{darken($warning, 60%)};
 
@@ -1065,6 +1068,9 @@ BODY, .theme-dark {
   --rc-disabled-background: #{$gray005};
   --rc-disabled-text-color: #{$gray004};
 
+  --rc-image-bg: #{$lightest};
+  --rc-image-color: #{$darkest};
+
   --error-text    : #FFAC99;
   --warning-text  : #{contrast-color($warning)};
 

package/assets/translations/en-us.yaml

@@ -164,8 +164,8 @@ generic:
   internalIps: Internal IPs
   opensInNewTab: Opens in a new tab
   autogeneratedCreated:
-    title: "{resource} created"
-    message: "{id} has been created."
+    title: "Created {resource}"
+    message: "{resource} {id} has been created."
 
 tabs:
   addItem: Add a new tab item
@@ -438,6 +438,7 @@ accountAndKeys:
     notAllowed: You do not have permission to manage API Keys
     apiEndpoint: "API Endpoint:"
     copyApiEnpoint: Copy API Endpoint to clipboard
+    normanTokenDeprecation: The API Keys feature is being migrated to a new API. Any existing API Keys from the legacy API will continue to work, but new API Keys will be created using the new API.
     add:
       description:
         label: Description
@@ -463,7 +464,9 @@ accountAndKeys:
           month: Months
           year: Years
       scope: Scope
+      userPrincipal: User Principal
       noScope: No Scope
+      enabled: Token enabled
     info:
       accessKey: Access Key
       secretKey: Secret Key
@@ -472,7 +475,7 @@ accountAndKeys:
       keyCreated: A new API Key has been created
       bearerTokenTip: "Access Key and Secret Key can be sent as the username and password for HTTP Basic auth to authorize requests. You can also combine them to use as a Bearer token:"
       ttlLimitedWarning: The Expiry time for this API Key was reduced due to system configuration
-
+      expiryOptionsWithNever: Since "auth-token-max-ttl-minutes" is set to <= 0, the API Key will not expire unless the "Automatically expire" option is set to "Custom" and a custom expiry time is set.
 addClusterMemberDialog:
   title: Add Cluster Member
 
@@ -1191,6 +1194,7 @@ catalog:
     statusFilterCautions:
       installation: Installation status cannot be determined with 100% accuracy
       upgradeable: Upgradeable status cannot be determined with 100% accuracy
+    appCollectionRepoMissing: The SUSE Application Collection repository is not currently configured. You can add it on the <repoCreate>Repository Create</repoCreate> page.
     totalChartsMessage: |-
         {count , plural,
           =1 { {count} chart in total }
@@ -1218,6 +1222,7 @@ catalog:
         repo: repository
         category: category
         tag: tag
+    isFromSuseAppCoRepository: From SUSE App Collection.
   install:
     action:
       goToUpgrade: Edit / Change Version
@@ -1332,6 +1337,11 @@ catalog:
           }. Start by setting some basic information used by {vendor} to manage the App.
         nsCreationDescription: "To install the app into a new namespace enter it's name in the Namespace field and select it."
         createNamespace: "Namespace <code>{namespace}</code> will be created."
+        requiresImagePullSecret: "This Chart requires an Image Pull Secret in order for images to be succesfully pulled."
+        dontUseDefaultImagePullSecret: "Manually select an Image Pull Secret or create a new one with Username/Password"
+        generatedNewImagePullSecret: "A new Image Pull Secret <b>{ imagePullSecretName }</b> will be generated"
+        generatedImagePullSecretBannerFromPreviousAuth: "A new Image Pull Secret <b>{ imagePullSecretName }</b> will be generated from the Repository secret <b>{ repoAuthenticationName }</b>."
+        usePreviouslyGeneratedImagePullSecretBanner: "Image Pull Secret <b>{ imagePullSecretName }</b> was already created previously from the Repository secret <b>{ repoAuthenticationName }</b> and will be used."
       clusterTplVersion:
         label: Version
         subtext: Select a version of the template
@@ -1381,11 +1391,21 @@ catalog:
       rancher-partner-charts: Partners
       rancher-rke2-charts: RKE2
       rancher-ui-plugins: Rancher Extensions
+      suse-application-collection: SUSE App Collection
 
     target:
-      git: Git repository containing Helm chart or cluster template definitions
-      http: http(s) URL to an index generated by Helm
-      oci: OCI Repository
+      git: 
+        title: Git Repository
+        description: Git repository containing Helm charts or cluster templates
+      http: 
+        title: Helm Repository
+        description: HTTP(S) URL pointing to a Helm chart repository index
+      oci: 
+        title: OCI Repository
+        description: OCI-compliant registry hosting Helm charts as artifacts
+      suseAppCollection: 
+        title: SUSE App Collection
+        description: Curated, enterprise-ready applications from SUSE Application Collection
       label: Target
     url:
       label: Index URL
@@ -1592,7 +1612,7 @@ cluster:
       nodeLabel:
         title: Node Labels
         label: Add Label
-      ipv6: "It looks like this cluster uses IPv6 networking: <code>Node Private IP</code> should be set to the cluster's IPV6 address."
+      ipv6: "It looks like this cluster uses IPv6 networking: <code>Node Private IP</code> should be set to the cluster's IPv6 address."
     registrationCommand:
       label: Registration Command
       linuxDetail: Run this command on each of the existing Linux machines you want to register.
@@ -2101,19 +2121,19 @@ cluster:
       httpTokens: Use tokens for metadata
       tagTitle: EC2 Tags
       enableIpv6:
-        label: Enable IPv6
-        description: "Checking this automatically sets your <a aria-label='scroll to the networking section in cluster configuration' href=\"#networking\">Network Stack Preference Order</a> to <b>DUAL</b> stack, enabling both IPv4 and IPv6. For an IPv6-only cluster, you can manually change that setting to <b>IPv6</b>."
+        label: Enable Dual-Stack
+        description: "To use dual-stack networking, you will need to update the <a aria-label='scroll to the networking section in cluster configuration' href=\"#networking\">Network Stack Preference Order</a> to <b>DUAL</b> stack. For an IPv6-only cluster, check \"Enable IPv6\" and update the stack preference to <b>IPv6</b>."
       ipv6AddressCount:
         label: IPv6 Address Count
         tooltip: Specifies the number of IPv6 addresses to assign to the network interface
         error: IPv6 Address Count must be greater than 0 when using an IPv6 vpc or subnet.
       enablePrimaryIpv6:
-        label: Enable Static Primary Ipv6
-        description: This allows IPv6 communication for components and workloads.
+        label: Enable Static Primary IPv6
+        description: This designates the first assigned IPv6 address as the primary address, ensuring a consistent, non-changing IPv6 address for the instance. This option does not control whether IPv6 addresses are assigned.
       ipv6AddressOnly:
-        label: Use IPv6 Only
+        label: Enable IPv6
       httpProtocolIpv6: 
-        label: Use IPv6 for instance metadata service
+        label: Enable IPv6 endpoint for instance metadata service
       ipv6ValidationWarning: When one pool uses an IPv6 or dual-stack subnet/vpc, all pools must use an IPv6 or dual-stack subnet/vpc.
     pnap:
       serverLocation:
@@ -2203,6 +2223,7 @@ cluster:
       tooltip: 'Additional Kubernetes Manifest YAML to be applied to the cluster on startup.'
   agentConfig:
     tabs:
+      agentsScheduling: Agents Scheduling
       cluster: Cluster Agent
       fleet: Fleet Agent
     groups:
@@ -2212,13 +2233,19 @@ cluster:
       podTolerations: Tolerations
       podRequestsAndLimits: Requests and Limits
       schedulingCustomization: Scheduling Customization
+      agentsScheduling:
+        text: Ensure that cluster- and/or fleet-agent pods are not evicted due to node pressure, resource constraints or scheduler policies When enabled, these settings may be configured in the 
+        textLink: Global Settings
+        label: 'Prevent agent pod eviction for:'
     subGroups:
       podAffinityAnti: Pod Affinity/Anti-Affinity
       nodeAffinity: Node Affinity
-      schedulingCustomization:
-        label: Prevent Rancher cluster agent pod eviction
-        description: This ensures that the cluster agent pod is not evicted due to node pressure, resource constraints or scheduler policies.
-        banner: This feature has been enabled with settings that are different from the global default settings.
+      agentsScheduling:
+        cluster: Cluster Agent
+        fleet: Fleet Agent
+        label: Prevent Rancher {agent} pod eviction
+        description: This ensures that the {agent} pod is not evicted due to node pressure, resource constraints or scheduler policies.
+        banner: This feature is currently configured with settings which differ to the default Global Settings. Enable the checkbox below to overwrite the current settings with the default Global Settings.
         innerCheckbox: Apply global settings for Priority Class and Pod Disruption Budget
     banners:
       advanced: These are advanced configuration options. Generally, they should be left as-is.
@@ -2267,6 +2294,7 @@ cluster:
         other { {pool_name}: The provided values for {fields} were not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
       }
     rke1DeprecationMessage: 'Rancher Kubernetes Engine (RKE / RKE1) has reached end of life and these clusters are no longer supported. We recommend replatforming RKE1 clusters to RKE2 to ensure continued support and security updates. Learn more about the transition <a href="https://www.suse.com/support/kb/doc/?id=000021518" target="_blank" rel="noopener noreferrer nofollow">here</a>.'
+    nginxDeprecated: The NGINX controller is deprecated and will be removed in upcoming versions
   rke1Unsupported: RKE1 Clusters are no longer supported
 
   architecture:
@@ -2454,6 +2482,16 @@ cluster:
       editYamlMachinePool:
         title: Save Machine Configurations
         body: Machine Configurations define how machines in Pools are deployed.<br><br> They will be saved upfront to ensure valid Cluster YAML can be saved.
+      ipv6Warning:
+        title: Verify IPv6 Settings
+        body: The machine pools in this cluster are configured to use IPv6 networks, but the cluster's networking settings may not support it. 
+        stackPrefInvalid: The <a href="{docsBase}/reference-guides/cluster-configuration/rancher-server-configuration/rke2-cluster-configuration#stack-preference" target="_blank" rel="noopener noreferrer nofollow" aria-label="rke2 documentation for the stack preference setting">Stack Preference</a> should be set to "Dual" or "IPv6" to use dual-stack or IPv6-only networking, respectively. 
+        flannelMasqInvalid: K3s uses the Flannel cni plugin by default. Enabling Flannel Masq is generally advised when using IPv6 networking.
+        cidrInvalidRke2: To enable dual-stack networking in RKE2 clusters, you must define valid dual-stack cluster and service CIDR ranges.
+        cidrInvalidK3s: To enable dual-stack or IPv6-only networking in K3s clusters, you must define valid dual-stack or IPv6 cluster and service CIDR ranges.
+        readMoreK3s: <a href="https://docs.k3s.io/networking/basic-network-options#dual-stack-ipv4--ipv6-networking" target="_blank" rel="noopener noreferrer nofollow" aria-label="k3s dual-stack networking documentation">Learn more about K3s networking</a>
+        readMoreRke2: <a href="https://docs.rke2.io/networking/basic_network_options#ipv6-setup" target="_blank" rel="noopener noreferrer nofollow" aria-label="rke2 ipv6 networking documentation">Learn more about RKE2 networking</a>
+        verifySettings: 'Before continuing, please verify the following settings:'
     snapshots:
       suffix: Snapshots per node
       s3Suffix: Snapshots
@@ -2580,12 +2618,11 @@ cluster:
           label: Endpoint CA Cert
     stackPreference:
       label: Stack Preference
-      description: "Stack preference determines the networking stack used by the cluster. The selected value configures the address used for health and readiness probes of calico, etcd, kube-apiserver, kube-scheduler, kube-controller-manager, and kubelet. It also defines the server URL in the <code>authentication-token-webhook-config-file</code> for the Authorized Cluster Endpoint and the advertise-client-urls for etcd during snapshot restore. When set to <code>dual</code>, the cluster uses <code>localhost</code>; when set to <code>ipv6</code>, it uses <code>[::1]</code>; and when set to <code>ipv4</code>, it uses <code>127.0.0.1</code>."
+      description: Stack preference determines the networking stack used by the cluster. IPv4 uses <code>127.0.0.1</code>, Dual-Stack uses <code>localhost</code> and IPv6 uses <code>[::1]</code>. Read more about <a href="https://ranchermanager.docs.rancher.com/reference-guides/cluster-configuration/rancher-server-configuration/rke2-cluster-configuration#stack-preference"  target="_blank" rel="noopener noreferrer nofollow" >RKE2</a> and <a href="https://ranchermanager.docs.rancher.com/reference-guides/cluster-configuration/rancher-server-configuration/k3s-cluster-configuration#stack-preference"  target="_blank" rel="noopener noreferrer nofollow" >K3s</a> networking in the Rancher documentation.
       options:
         ipv4: IPv4
         ipv6: IPv6
-        dual: Dual-Stack
-      errorNeedsIpv6: Stack preference must be set to dual-stack or ipv6 if using ipv6 networking in nodepools.
+        dual: Dual
   k3s:
     flannelMasq:
       title: IPv6 NAT
@@ -2614,6 +2651,48 @@ cluster:
     rke1:
       local: local
       s3: s3
+  ingress:
+    title: Ingress
+    enableIngress: Install Ingress controller to enable external routing
+    nginx:
+      header: Ingress-NGINX
+      content: Choose this only if your workloads are not yet ready for Traefik.
+    dual:
+      header: Dual Mode
+      content: Use this to safely test and migrate traffic from Ingress-NGINX to Traefik.
+    traefik:
+      header: Traefik
+      content: The new default provider for high-performance routing and modern feature support.
+    recommended: Recommended
+    legacy: Legacy
+    migration: Migration
+    learnMore:
+      label: Learn more
+    showAdvanced: Show advanced configuration
+    hideAdvanced: Hide advanced configuration
+    configurationOptions:
+      title: Configuration Options
+      compatibilityMode: Enable Traefik Ingress NGINX compatibility mode for annotations
+      traefik:
+        http: Traefik HTTP
+        https: Traefik HTTPS
+      nginx:
+        http: Ingress-NGINX HTTP
+        https: Ingress-NGINX HTTPS
+    banners:
+      transitioning:
+        label: Rancher is transitioning to Traefik as the default provider. While Ingress-NGINX remains available for migration purposes, we recommend moving workloads to Traefik to ensure long-term compatibility and support.
+      disabled:
+        label: Without an Ingress controller, services in this cluster will not be reachable via external URLs or hostnames. You will need to manually configure an alternative routing solution to expose your workloads.
+      selected:
+        ingress-nginx:
+          label: Ingress-NGINX is now deprecated and will be removed in a future release. To avoid service interruptions, please begin migrating your Ingress resources to Traefik. Please review our <docsUrl>migration documentation</docsUrl>.
+        traefik:
+          label: Before switching to Traefik, please review our <docsUrl>migration documentation</docsUrl> to ensure your Ingress resources are updated to support Traefik’s configuration requirements.
+        dual:
+          label: Please review our <docsUrl>migration documentation</docsUrl> to ensure your current workloads and annotations are compatible. Taking this step now helps prevent unexpected routing issues during the transition.
+    validation:
+      portsMatch: Traefik and Ingress-NGINX ports cannot match
   tabs:
     ace: Authorized Endpoint
     addOnAdditionalManifest: Additional Manifest
@@ -2642,6 +2721,8 @@ cluster:
     v2: RKE2/K3s
   validation:
     iamInstanceProfileName: If the Amazon cloud provider is selected the "IAM Instance Profile Name" must be defined for each Machine Pool
+  capi:
+    notSupported: Managing clusters provisioned using CAPI infrastructure providers via the UI is currently limited to Rancher Turtles provisioned clusters.
 
 clusterIndexPage:
   hardwareResourceGauge:
@@ -2754,7 +2835,7 @@ drivers:
   kontainer:
     title: Cluster Drivers
     emberDeprecationMessage: 'Support for UI Plugins (based on Ember) for cluster and node drivers was deprecated in Rancher 2.11.0 and will be removed in a future release. These need to be migrated to the new <a href="https://extensions.rancher.io" target="_blank" rel="noopener noreferrer nofollow">UI Extensions framework</a>.'
-
+    refreshError: 'Error refreshing cluster drivers: {error}'
   node:
     title: Node Drivers
   add:
@@ -5785,6 +5866,7 @@ promptForceRemove:
 
 promptScaleMachineDown:
   attemptingToRemove: "You are attempting to delete {count} {type}"
+  attemptingToScaleDown: "You are attempting to scale down {type}"
   retainedMachine1: At least one Machine must exist for roles Control Plane and Etcd.
   retainedMachine2: <b>{ name }</b> will remain
   scaling: |-
@@ -6154,6 +6236,13 @@ secret:
     warnings:
       expiring: "{count} {count, plural, =1 {Certificate expires soon} other {Certificates expire soon}}"
       expired: "{count} {count, plural, =1 {Certificate has expired} other {Certificates have expired}}"
+  projectScoped:
+    tooltip:
+      source: "Project Scoped Secret (for Project \"{project}\" in cluster \"{cluster}\")"
+      copy: "Managed via Project Scoped Secret (\"{secret}\" in Project \"{project}\")"
+    origin:
+      source: "Project Secret"
+      copy: "Via Project Secret"
   data: Data
   registry:
     address: Registry
@@ -6243,6 +6332,7 @@ secret:
 
 selectOrCreateAuthSecret:
   label: Authentication
+  imagePullSecret: Image Pull Secret
   options:
     none: None
     basic: HTTP Basic Auth
@@ -6267,6 +6357,8 @@ selectOrCreateAuthSecret:
   createBasic: Create an HTTP Basic Auth Secret
   createS3: Create an S3-Compatible Auth Secret
   createRKE: Create an RKE Auth Config Secret
+  createImagePullSecretBasedOnAuth: Create an Image Pull Secret based on Authentication Secret
+  createImagePullSecret: Create a new Image Pull Secret with new Username/Password
 
 serviceAccount:
   automount: Automount Service Account Token
@@ -6765,6 +6857,7 @@ storageClass:
       tooltip: By default the default storage class on the host Harvester cluster is used.
 
 tableHeaders:
+  isLegacy: Legacy
   assuredConcurrencyShares: Assured Concurrency Shares
   autoscaler: Autoscaler
   accessKey: Access Key
@@ -6924,6 +7017,7 @@ tableHeaders:
   reclaimPolicy: Reclaim Policy
   registrationNamespace: Registration Namespace
   repo: Repo
+  repoType: Repo Type
   repositories: Repositories
   repoName: Repository Name
   reposReady: Git Repos Ready
@@ -6946,10 +7040,8 @@ tableHeaders:
   selector: Selector
   secrets: Secrets
   secret:
-    project-clone: Created by Project Secret
-    project-clone-tooltip: Has a Project Scoped Secret created this Secret in this Namespace
-    project-scoped: Project Secret
-    project-scoped-tooltip: This Project Scoped Secret will create matching Secrets in the Namespaces it contains
+    origin: Origin
+    originTooltip: "Shows if a secret has been created or managed via another Project Scoped Secret. Read the Project Scoped Secret documentation to learn more about this Rancher concept"
   schedule: Schedule
   service: Service
   serviceAccounts: Service Accounts
@@ -8705,6 +8797,10 @@ advancedSettings:
     moreActions: More actions for setting - { setting }
     label: Edit Setting
     changeSetting: "Change Setting:"
+    agentConfigBanner: 
+      text: Editing this value will not change the value set in running clusters! In order to update a running cluster to use the new values, edit the cluster and click on “Apply global settings for Priority Class and Pod Disruption Budget” in the {agent} Agent configuration tab.
+      cluster: Cluster
+      fleet: Fleet
     trueOption: "True"
     falseOption: "False"
     value: Value
@@ -9005,6 +9101,13 @@ resourceQuota:
     namespace: 'This Namespace:'
     available: 'Available:'
     max: 'Total:'
+  ariaLabel:
+    grid: Resource Quotas
+    resourceType: 'Resource Type, row {row}'
+    resourceIdentifier: 'Resource Identifier, row {row}'
+    projectLimit: 'Project Limit, row {row}'
+    namespaceDefaultLimit: 'Namespace Default Limit, row {row}'
+    remove: 'Remove {identifier}'
 customLinks:
   displayTitle: Links
   label: Home Links
@@ -9260,6 +9363,7 @@ component:
         podsCard:
           title: Pods
           ariaResourceName: pods
+          noPods: There are no pods currently present.
         jobsCard:
           title: Jobs
           ariaResourceName: jobs

package/components/CruResource.vue

@@ -776,7 +776,9 @@ export default {
           class="resource-container cru__content"
           :style="[minHeight ? { 'min-height': minHeight } : {}]"
         >
-          <slot />
+          <slot name="single">
+            <slot />
+          </slot>
         </div>
         <slot name="form-footer">
           <CruResourceFooter

package/components/ExplorerProjectsNamespaces.vue

@@ -1,8 +1,8 @@
 <script>
 import { mapGetters, useStore } from 'vuex';
 import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
-import {
-  STATE, AGE, NAME, NS_SNAPSHOT_QUOTA, DESCRIPTION
+import {
+  STATE, AGE, NAME, NS_SNAPSHOT_QUOTA, DESCRIPTION, PROJECT_NAMESPACES_NAME
 } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES, HCI } from '@shell/config/types';
@@ -122,13 +122,11 @@ export default {
       return this.$store.getters['currentProduct'].inStore === HARVESTER;
     },
     headers() {
-      const headers = [
-        STATE,
-        NAME,
-        DESCRIPTION
-      ];
+      let headers;
 
       if (this.groupPreference === 'none') {
+        headers = [STATE, NAME, DESCRIPTION];
+
         const projectHeader = {
           name:  'project',
           label: this.t('tableHeaders.project'),
@@ -137,6 +135,8 @@ export default {
         };
 
         headers.push(projectHeader);
+      } else {
+        headers = [STATE, PROJECT_NAMESPACES_NAME, DESCRIPTION];
       }
 
       if (this.isHarvester && this.harvesterResourceQuotaSchema) {
@@ -178,12 +178,12 @@ export default {
     rowsWithFakeNamespaces() {
       const fakeRows = this.projectsWithoutNamespaces.map((project) => {
         return {
-          groupById:        `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
-          isFake:           true,
-          mainRowKey:       project.id,
-          nameDisplay:      project.spec?.displayName, // Enable filtering by the project name
+          groupById:          `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
+          isFake:             true,
+          mainRowKey:         project.id,
+          projectNameDisplay: project.spec?.displayName, // Enable filtering by the project name
           project,
-          availableActions: []
+          availableActions:   []
         };
       });
 

package/components/IconOrSvg.vue

@@ -18,9 +18,9 @@
  */
 import { Solver } from '@shell/utils/svg-filter';
 import { colorToRgb, mapStandardColors, normalizeHex } from '@shell/utils/color';
+import { mapGetters } from 'vuex';
 
 const filterCache = {};
-const cssCache = {};
 
 const colors = {
   header: {
@@ -33,7 +33,7 @@ const colors = {
   },
   primary: {
     color:          '--on-tertiary',
-    hover:          '--link',
+    hover:          '--tertiary-hover-app-bar',
     colorFallback:  '--on-tertiary',
     hoverFallback:  '--primary-hover-text',
     active:         '--on-active',
@@ -63,7 +63,12 @@ export default {
   },
 
   data() {
-    return { className: '' };
+    return {
+      className:    '',
+      mainFilter:   null,
+      hoverFilter:  null,
+      activeFilter: null,
+    };
   },
 
   created() {
@@ -72,6 +77,18 @@ export default {
     }
   },
 
+  computed: {
+    ...mapGetters({
+      brand: 'management/brand',
+      theme: 'prefs/theme',
+    })
+  },
+
+  watch: {
+    brand: 'recomputeColor',
+    theme: 'recomputeColor',
+  },
+
   methods: {
     getComputedStyleFor(cssVar, fallback) {
       const value = window.getComputedStyle(document.body).getPropertyValue(cssVar).trim();
@@ -86,11 +103,11 @@ export default {
 
       const solver = new Solver(rgb);
       const res = solver.solve();
-      const filter = res?.filter;
+      const filterVal = res?.filterVal;
 
-      filterCache[cacheKey] = filter;
+      filterCache[cacheKey] = filterVal;
 
-      return filter;
+      return filterVal;
     },
 
     setColor() {
@@ -111,43 +128,23 @@ export default {
 
       const className = `svg-icon-${ uiColorStr }-${ hoverColorStr }`;
 
-      if (!cssCache[className]) {
-        const hoverFilter = this.resolveColorFilter(hoverColor, hoverColorRGB);
-        const mainFilter = this.resolveColorFilter(uiColor, uiColorRGB);
-        const activeFilter = this.resolveColorFilter(activeColor, activeColorRGB);
-
-        // Add stylesheet (added as global styles)
-        const styles = `
-          img.${ className } {
-            ${ mainFilter };
-          }
-          img.${ className }:hover {
-            ${ hoverFilter };
-          }
-          button:hover > img.${ className } {
-            ${ hoverFilter };
-          }
-          li:hover > img.${ className } {
-            ${ hoverFilter };
-          }
-          a.option:hover > img.${ className } {
-            ${ hoverFilter };
-          }
-          a.option.active-menu-link > img.${ className } {
-            ${ activeFilter };
-          }
-        `;
-
-        const styleSheet = document.createElement('style');
-
-        styleSheet.innerText = styles;
-        document.head.appendChild(styleSheet);
-
-        cssCache[className] = true;
-      }
+      this.hoverFilter = this.resolveColorFilter(hoverColor, hoverColorRGB);
+      this.mainFilter = this.resolveColorFilter(uiColor, uiColorRGB);
+      this.activeFilter = this.resolveColorFilter(activeColor, activeColorRGB);
 
       this['className'] = className;
-    }
+    },
+
+    recomputeColor() {
+      if (!this.src) {
+        return;
+      }
+
+      this.mainFilter = null;
+      this.hoverFilter = null;
+      this.activeFilter = null;
+      this.setColor();
+    },
   }
 };
 </script>
@@ -172,8 +169,30 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .svg-icon {
+  img.svg-icon {
+    filter: v-bind(mainFilter);
+  }
+
+  button:hover > img.svg-icon,
+  li:hover > img.svg-icon {
+    filter: v-bind(hoverFilter);
+  }
+
+  .side-menu .category div a > img.svg-icon {
     height: 24px;
     width: 24px;
+    filter: v-bind(mainFilter);
+  }
+
+  .side-menu .category div a:hover > img.svg-icon {
+    filter: v-bind(hoverFilter);
+  }
+
+  .side-menu .category div a.active-menu-link > img.svg-icon {
+    filter: v-bind(activeFilter);
+
+    &:hover {
+      filter: v-bind(activeFilter);
+    }
   }
 </style>