@rancher/shell 3.0.10 → 3.0.12-rc.1

package/assets/styles/base/_mixins.scss

@@ -161,3 +161,34 @@
   // we need to use !important because it needs to superseed other classes that might impact outlines
   outline: 2px solid var(--primary-keyboard-focus);
 }
+
+// -------------------------------------------------------------------------------------------------
+// Extension dialog styles
+
+@mixin extension-dialog {
+  padding: 8px 16px 16px 16px;
+
+  h4 {
+    font-weight: bold;
+  }
+
+  .dialog-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 96px;
+
+    .dialog-info {
+      flex: 1;
+    }
+  }
+
+  .dialog-buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 24px;
+
+    > *:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}

package/assets/styles/base/_variables.scss

@@ -42,6 +42,8 @@ $z-indexes: (
 
   cruFooter: 19,
 
+  copyToClipboard: 20,
+
   loadingMain: 51,
 
   slide-in: 52,

package/assets/styles/themes/_modern.scss

@@ -74,6 +74,7 @@ $contrasted-light: $lightest !default;
 $selected: rgba(#3D98D3, .5);
 
 $drag-over: #DCDEE7;
+$body-bg  : $lightest;
 
 BODY, .theme-light {
 
@@ -418,7 +419,7 @@ BODY, .theme-light {
   }
 
 
-  --body-bg                    : #{$lightest};
+  --body-bg                    : #{$body-bg};
   --body-text                  : #{$darkest};
   --body-text-hover            : var(--body-text);
   --scrollbar-thumb            : #{$dark};
@@ -724,8 +725,8 @@ BODY, .theme-light {
   --rc-disabled-background: #{$gray001};
   --rc-disabled-text-color: #{$gray004};
 
-  --rc-section-background-primary: #{$lightest};
-  --rc-section-background-secondary: #{$lighter};
+  --rc-section-background-primary: #{$body-bg};
+  --rc-section-background-secondary: #{$grey-5};
   --rc-section-action-color: #{$gray009};
 
   --rc-image-bg: #{$lightest};
@@ -1072,8 +1073,8 @@ BODY, .theme-dark {
   --rc-disabled-background: #{$gray005};
   --rc-disabled-text-color: #{$gray004};
 
-  --rc-section-background-primary: #{$gray007};
-  --rc-section-background-secondary: #{$gray008};
+  --rc-section-background-primary: #{$body-bg};
+  --rc-section-background-secondary: #{$darkest};
   --rc-section-action-color: #{$gray010};
 
   --rc-image-bg: #{$lightest};

package/assets/translations/en-us.yaml

@@ -1018,6 +1018,11 @@ asyncButton:
     waiting: Generating…
 
 backupRestoreOperator:
+  monitoring:
+    label: Monitoring
+    enableMetrics: Enable Metrics
+    enableServiceMonitor: Enable ServiceMonitor
+    serviceMonitorTooltip: Requires rancher-monitoring to be installed before this can be enabled.
   backup:
     label: Resource Set
     description: The Resource Set determines which resources the backup-restore-operator collects in a backup
@@ -1374,6 +1379,7 @@ catalog:
       releaseName: Release Name
       releaseNamespace: Release Namespace
   repo:
+    add: Add Repository
     action:
       refresh: Refresh
     all: All
@@ -2719,8 +2725,6 @@ 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:
@@ -2985,7 +2989,7 @@ fleet:
       add: Add Selector
     tolerations:
       label: Tolerations
-      description: "List of node taints to tolerate (requires Kubernetes >= 1.6)"
+      description: "List of node taints to tolerate."
       add: Add Toleration
     priorityClassName:
       label: Priority Class Name
@@ -5029,6 +5033,7 @@ node:
         cpu: CPU
         memory: MEMORY
         pods: PODS
+        running: Running
       diskPressure: Disk Pressure
       kubelet: kubelet
       memoryPressure: Memory Pressure
@@ -5573,6 +5578,9 @@ plugins:
     prompt: "Are you sure that you want to install this extension?"
     version: Version
     warnNotCertified: Please ensure that you are aware of the risks of installing Extensions from untrusted authors
+    alreadyInstalledTitle: This extension is already installed from another source
+    alreadyInstalledPrompt: To install it from this source, you need to uninstall the existing version first and reload the page (required). Would you like to continue?
+    uninstallExisting: Uninstall existing version
   upgrade:
     label: Upgrade
     title: Upgrade extension {name}
@@ -5773,7 +5781,6 @@ projectMembers:
     createNs: Create Namespaces
     configmapsManage: Manage Config Maps
     ingressManage: Manage Ingress
-    projectcatalogsManage: Manage Project Catalogs
     projectroletemplatebindingsManage: Manage Project Members
     secretsManage: Manage Secrets
     serviceaccountsManage: Manage Service Accounts
@@ -5783,7 +5790,6 @@ projectMembers:
     configmapsView: View Config Maps
     ingressView: View Ingress
     monitoringUiView: View Monitoring
-    projectcatalogsView: View Project Catalogs
     projectroletemplatebindingsView: View Project Members
     secretsView: View Secrets
     serviceaccountsView: View Service Accounts
@@ -6985,6 +6991,7 @@ tableHeaders:
   progress: Progress
   podImages: Image
   podRestarts: Restarts
+  podLastRestart: Last Restart
   pods: Pods
   pod-Selector: Pod-Selector
   providers: Providers
@@ -8042,10 +8049,7 @@ typeDescription:
   monitoring.coreos.com.prometheus: A Prometheus server is a Prometheus deployment whose scrape configuration and rules are determined by selected ServiceMonitors, PodMonitors, and PrometheusRules and whose alerts will be sent to all selected Alertmanagers with the custom resource's configuration.
   monitoring.coreos.com.alertmanager: An alert manager is deployment whose configuration will be specified by a secret in the same namespace, which determines which alerts should go to which receiver.
   node: The base Kubernetes Node resource represents a virtual or physical machine which hosts deployments. To manage the machine lifecycle, if available, go to Cluster Management.
-  catalog.cattle.io.clusterrepo: 'A chart repository is a Helm repository or {vendor} git based application catalog. It provides the list of available charts in the cluster.'
-  catalog.cattle.io.clusterrepo.local: ' A chart repository is a Helm repository or {vendor} git based application catalog. It provides the list of available charts in the cluster. Cluster Templates are deployed via Helm charts.'
   catalog.cattle.io.operation: An operation is the list of recent Helm operations that have been applied to the cluster.
-  catalog.cattle.io.app: An installed application is a Helm 3 chart that was installed either via our charts or through the Helm CLI.
   logging.banzaicloud.io.clusterflow: Logs from the cluster will be collected and logged to the selected Cluster Output.
   logging.banzaicloud.io.clusteroutput: A cluster output defines which logging providers that logs can be sent to and is only effective when deployed in the namespace that the logging operator is in.
   logging.banzaicloud.io.flow: A flow defines which logs to collect and filter as well as which output to send the logs. The flow is a namespaced resource, which means logs will only be collected from the namespace that the flow is deployed in.
@@ -8946,7 +8950,6 @@ performance:
     label: Server-side Pagination
     description: By default Lists will fetch all resources and paginate (create the page given sort and filter settings) locally in the browser. Server-Side Pagination moves this out from the browser to the server. This improves performance of the UI, especially in systems with lots of resources.
     applicable: "Server-side pagination applies to Resource Types"
-    featureFlag: Enabling/Disabling <i class="mr-5">"Server-side Pagination"</i> is now solely done so via the <i class="mr-5">ui-sql-cache</i>&nbsp;<a href="{ffUrl}">Feature Flag</a>
     resources:
       generic: most resources in the cluster's 'More Resources' section
       all: All Resources

package/assets/translations/zh-hans.yaml

@@ -6339,10 +6339,7 @@ typeDescription:
   monitoring.coreos.com.prometheus: Prometheus server 是一个 Prometheus deployment，其抓取的配置和规则由选定的 ServiceMonitor、PodMonitor 和 PrometheusRule 决定。它将其告警信息发送给所有选择的具有定制资源配置的 AlertManager。
   monitoring.coreos.com.alertmanager: Alertmanager 是一个 deployment。其配置由同一命名空间中的密文指定，该密文决定了告警的接收器。
   node: Kubernetes 节点资源展示了承载 Deployment 的虚拟机或物理机。请进入"集群管理"页面管理可用节点的生命周期。
-  catalog.cattle.io.clusterrepo: 'Chart 仓库是一个 Helm 仓库或 {vendor} 基于 Git 的应用商店。此处列出了集群中可用的 Chart。'
-  catalog.cattle.io.clusterrepo.local: ' Chart 仓库是一个 Helm 仓库或 {vendor} 基于 Git 的应用商店。此处列出了集群中可用的 Chart。集群模板是通过 Helm Chart 部署的。'
   catalog.cattle.io.operation: 最近的操作指的是最近应用于集群的一系列 Helm 操作。
-  catalog.cattle.io.app: 已安装的应用指的是通过我们的 Chart 或 Helm CLI 安装的 Helm 3 Chart。
   logging.banzaicloud.io.clusterflow: 集群日志将被收集并投递到选定的 ClusterOutput 中。
   logging.banzaicloud.io.clusteroutput: ClusterOutput 定义了日志可以发送到哪些日志提供程序。只有部署在 Logging operator 所在的命名空间中时，ClusterOutput 才生效。
   logging.banzaicloud.io.flow: Flow 定义了要收集和过滤的日志，以及日志的输出目标。Flow 是一个命名空间资源。换言之，只有部署了该 Flow 的命名空间日志才能被该 Flow 收集。

package/chart/__tests__/rancher-backup-index.test.ts

@@ -0,0 +1,248 @@
+import { shallowMount } from '@vue/test-utils';
+import RancherBackup from '@shell/chart/rancher-backup/index.vue';
+import { set } from '@shell/utils/object';
+
+describe('rancher-backup: index', () => {
+  const defaultMocks = {
+    $store: {
+      dispatch: jest.fn().mockResolvedValue([]),
+      getters:  {
+        'i18n/t':                    (text: string) => text,
+        t:                           (text: string) => text,
+        'cluster/all':               () => [],
+        'cluster/paginationEnabled': () => false,
+        currentStore:                () => 'cluster',
+        currentCluster:              () => ({ id: 'local' }),
+        getStoreNameByProductId:     'cluster',
+      }
+    },
+    $fetchState: { pending: false }
+  };
+
+  const defaultStubs = {
+    Tab:           { template: '<div><slot /></div>' },
+    Tabbed:        { template: '<div><slot /></div>' },
+    S3:            true,
+    RadioGroup:    true,
+    LabeledInput:  true,
+    LabeledSelect: true,
+    Banner:        true,
+    Checkbox:      true
+  };
+
+  const createWrapper = (propsData = {}, mocks = {}, monitoringInstalled = false) => {
+    return shallowMount(RancherBackup, {
+      props: {
+        value: {},
+        mode:  'create',
+        ...propsData
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          ...mocks
+        },
+        stubs: defaultStubs
+      },
+      computed: {
+        monitoringStatus: () => ({ installed: monitoringInstalled }),
+        radioOptions:     () => ({
+          options: ['none', 's3', 'pickSC', 'pickPV'],
+          labels:  ['None', 'S3', 'Storage Class', 'Persistent Volume']
+        })
+      }
+    });
+  };
+
+  describe('monitoring section initialization', () => {
+    it('should initialize monitoring object with default values when not present', async() => {
+      const value: Record<string, any> = {};
+
+      // Call set directly to test the initialization logic
+      set(value, 'monitoring', {
+        metrics:        { enabled: false },
+        serviceMonitor: { enabled: false }
+      });
+
+      expect(value).toHaveProperty('monitoring');
+      expect(value).toHaveProperty('monitoring.metrics.enabled', false);
+      expect(value).toHaveProperty('monitoring.serviceMonitor.enabled', false);
+    });
+
+    it('should not overwrite existing monitoring values when already set', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: true },
+          serviceMonitor: { enabled: true }
+        }
+      };
+
+      // The fetch logic only sets monitoring if it doesn't exist
+      // Since value.monitoring already exists, it should NOT be overwritten
+      // This test validates the conditional check in the component's fetch()
+      expect(value.monitoring).toBeDefined();
+      expect(value.monitoring.metrics.enabled).toBe(true);
+      expect(value.monitoring.serviceMonitor.enabled).toBe(true);
+    });
+  });
+
+  describe('monitoring checkboxes rendering', () => {
+    it('should render both monitoring checkboxes', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+
+      expect(checkboxes).toHaveLength(2);
+    });
+
+    it('should pass correct props to metrics checkbox', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: true },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const metricsCheckbox = checkboxes[0];
+
+      // The t() mock wraps strings in %, so we check for containment
+      expect(metricsCheckbox.attributes('label')).toContain('backupRestoreOperator.monitoring.enableMetrics');
+      expect(metricsCheckbox.attributes('value')).toBe('true');
+    });
+
+    it('should pass correct props to serviceMonitor checkbox', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: true }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('label')).toContain('backupRestoreOperator.monitoring.enableServiceMonitor');
+      expect(serviceMonitorCheckbox.attributes('value')).toBe('true');
+    });
+  });
+
+  describe('serviceMonitor checkbox disabled state', () => {
+    it('should set disabled to true when monitoring is not installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, false);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('disabled')).toBe('true');
+    });
+
+    it('should not set disabled when monitoring is installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, true);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      // When monitoring is installed, disabled should be 'false' (string)
+      expect(serviceMonitorCheckbox.attributes('disabled')).toBe('false');
+    });
+  });
+
+  describe('serviceMonitor checkbox tooltip', () => {
+    it('should show tooltip when monitoring is not installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, false);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('tooltip')).toContain('backupRestoreOperator.monitoring.serviceMonitorTooltip');
+    });
+
+    it('should not show tooltip when monitoring is installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, true);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('tooltip')).toBeFalsy();
+    });
+  });
+
+  describe('metrics checkbox', () => {
+    it('should never be disabled regardless of monitoring status', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+
+      // Test with monitoring not installed
+      const wrapperNotInstalled = createWrapper({ value }, {}, false);
+      const checkboxesNotInstalled = wrapperNotInstalled.findAllComponents({ name: 'Checkbox' });
+      const metricsCheckboxNotInstalled = checkboxesNotInstalled[0];
+
+      // The metrics checkbox does not have a disabled prop bound, so it should be 'false' or undefined
+      const disabledAttr = metricsCheckboxNotInstalled.attributes('disabled');
+
+      expect(disabledAttr === 'false' || disabledAttr === undefined).toBe(true);
+
+      // Test with monitoring installed
+      const wrapperInstalled = createWrapper({ value }, {}, true);
+      const checkboxesInstalled = wrapperInstalled.findAllComponents({ name: 'Checkbox' });
+      const metricsCheckboxInstalled = checkboxesInstalled[0];
+      const disabledAttrInstalled = metricsCheckboxInstalled.attributes('disabled');
+
+      expect(disabledAttrInstalled === 'false' || disabledAttrInstalled === undefined).toBe(true);
+    });
+  });
+
+  describe('monitoring section heading', () => {
+    it('should render the monitoring section heading', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const heading = wrapper.find('h3');
+
+      expect(heading.exists()).toBe(true);
+      expect(heading.text()).toContain('backupRestoreOperator.monitoring.label');
+    });
+  });
+});

package/chart/rancher-backup/index.vue

@@ -6,11 +6,13 @@ import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
-import { get } from '@shell/utils/object';
+import { get, set } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS, PV } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import { STORAGE } from '@shell/config/labels-annotations';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { monitoringStatus } from '@shell/utils/monitoring';
 
 export default {
   emits: ['valid'],
@@ -22,7 +24,8 @@ export default {
     S3,
     LabeledInput,
     LabeledSelect,
-    Banner
+    Banner,
+    Checkbox
   },
 
   props: {
@@ -39,6 +42,16 @@ export default {
     }
   },
 
+  created() {
+    // Initialize monitoring before template renders to avoid undefined access
+    if (!this.value.monitoring) {
+      set(this.value, 'monitoring', {
+        metrics:        { enabled: false },
+        serviceMonitor: { enabled: false }
+      });
+    }
+  },
+
   async  fetch() {
     const hash = await allHash({
       storageClasses:    this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS }),
@@ -64,6 +77,8 @@ export default {
   },
 
   computed: {
+    ...monitoringStatus(),
+
     defaultStorageClass() {
       return this.storageClasses.filter((sc) => sc.metadata.annotations?.[STORAGE.DEFAULT_STORAGE_CLASS] && sc.metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS] !== 'false' )[0] || '';
     },
@@ -248,6 +263,24 @@ export default {
             </div>
           </div>
         </template>
+
+        <h3 class="mb-10 mt-10">
+          {{ t('backupRestoreOperator.monitoring.label') }}
+        </h3>
+        <div class="row monitoring-options">
+          <Checkbox
+            v-model:value="value.monitoring.metrics.enabled"
+            :label="t('backupRestoreOperator.monitoring.enableMetrics')"
+            :mode="mode"
+          />
+          <Checkbox
+            v-model:value="value.monitoring.serviceMonitor.enabled"
+            :label="t('backupRestoreOperator.monitoring.enableServiceMonitor')"
+            :disabled="!monitoringStatus.installed"
+            :tooltip="!monitoringStatus.installed ? t('backupRestoreOperator.monitoring.serviceMonitorTooltip') : null"
+            :mode="mode"
+          />
+        </div>
       </Tab>
     </Tabbed>
   </div>
@@ -257,4 +290,10 @@ export default {
 :deep() .radio-group.label>SPAN {
   font-size: 1em;
 }
+
+.monitoring-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
 </style>

package/components/BrandImage.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
+import { requireAsset } from '@shell/utils/require-asset';
 
 export default {
   props: {
@@ -72,9 +73,9 @@ export default {
       const themePrefix = this.theme === 'dark' ? 'dark/' : '';
 
       try {
-        return require(`~shell/assets/images/pl/${ themePrefix }${ this.fileName }`);
+        return requireAsset(`~shell/assets/images/pl/${ themePrefix }${ this.fileName }`);
       } catch {
-        return require(`~shell/assets/images/pl/${ this.fileName }`);
+        return requireAsset(`~shell/assets/images/pl/${ this.fileName }`);
       }
     },
 
@@ -95,7 +96,7 @@ export default {
         // csp, rgs, and federal map to SUSE, but have their own custom logos
         if (this.brandBase !== this.brand) {
           try {
-            return require(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
+            return requireAsset(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
           } catch { }
         }
       }
@@ -125,11 +126,11 @@ export default {
       } else {
         if (this.isDark || this.dark) {
           try {
-            return require(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
+            return requireAsset(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
           } catch {}
         }
         try {
-          return require(`~shell/assets/brand/${ this.brand }/${ this.fileName }`);
+          return requireAsset(`~shell/assets/brand/${ this.brand }/${ this.fileName }`);
         } catch {}
 
         return this.defaultPathToBrandedImage;

package/components/ConsumptionGauge.vue

@@ -54,11 +54,19 @@ export default {
     },
 
     /**
-     * Reduce the vertial height by changed 'Used' for the resource name
+     * Reduce the vertical height by replacing 'Used'/usedLabel with the resource name
      */
     usedAsResourceName: {
-      type:   Boolean,
-      defaut: false
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * Override the default "Used" label text (e.g. "Running" for pods).
+     */
+    usedLabel: {
+      type:    String,
+      default: null
     }
   },
   computed: {
@@ -105,7 +113,7 @@ export default {
         <h4 v-if="usedAsResourceName">
           {{ resourceName }}
         </h4>
-        <span v-else>{{ t('node.detail.glance.consumptionGauge.used') }}</span>
+        <span v-else>{{ usedLabel || t('node.detail.glance.consumptionGauge.used') }}</span>
         <span class="numbers-stats">
           {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
           <span class="percentage"><i>/&nbsp;</i>{{ formattedPercentage }}</span>

package/components/DynamicContent/DynamicContentIcon.vue

@@ -7,6 +7,7 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 import { AnnouncementNotificationIconData } from '@shell/utils/dynamic-content/types';
+import { requireAsset } from '@shell/utils/require-asset';
 
 type KeyValues = {
   [key: string]: string;
@@ -49,9 +50,9 @@ const src = computed(() => {
     const themePrefix = theme.value === 'dark' ? 'dark/' : '';
 
     try {
-      return require(`~shell/assets/images/content/${ themePrefix }${ img }`);
+      return requireAsset(`~shell/assets/images/content/${ themePrefix }${ img }`);
     } catch {
-      return require(`~shell/assets/images/content/${ img }`);
+      return requireAsset(`~shell/assets/images/content/${ img }`);
     }
   }