@rancher/shell 3.0.10 → 3.0.12-rc.1

package/components/form/PrivateRegistry.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import Banner from '@components/Banner/Banner.vue';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+
+const props = defineProps<{
+  value?: string | null;
+  enabled?: boolean;
+  mode?: string;
+  rules?: Function[];
+  checkboxTestId?: string;
+  inputTestId?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:value': [val: string | null];
+  'update:enabled': [val: boolean];
+}>();
+
+const showInput = ref(!!props.value);
+
+watch(() => props.enabled, (neu) => {
+  if (typeof neu === 'boolean' && neu !== showInput.value) {
+    showInput.value = neu;
+  }
+});
+
+watch(showInput, (neu, old) => {
+  if (neu !== props.enabled) {
+    emit('update:enabled', neu);
+  }
+  if (!neu && old && props.value) {
+    emit('update:value', null);
+  }
+});
+
+watch(() => props.value, (neu) => {
+  if (!!neu && !showInput.value) {
+    showInput.value = true;
+  }
+});
+</script>
+
+<template>
+  <Banner
+    color="info"
+    class="mt-0"
+    label-key="cluster.privateRegistry.importedDescription"
+  />
+  <Checkbox
+    v-model:value="showInput"
+    class="mb-20"
+    :mode="mode"
+    :label="t('cluster.privateRegistry.label')"
+    :data-testid="checkboxTestId"
+  />
+  <LabeledInput
+    v-if="showInput"
+    :value="value as string"
+    :mode="mode"
+    :rules="rules"
+    :required="true"
+    label-key="catalog.chart.registry.custom.inputLabel"
+    :data-testid="inputTestId"
+    :placeholder="t('catalog.chart.registry.custom.placeholder')"
+    @update:value="(val) => emit('update:value', val)"
+  />
+</template>

package/components/form/ProjectMemberEditor.vue

@@ -61,11 +61,6 @@ export default {
           label: this.t('projectMembers.projectPermissions.ingressManage'),
           value: false,
         },
-        {
-          key:   'projectcatalogs-manage',
-          label: this.t('projectMembers.projectPermissions.projectcatalogsManage'),
-          value: false,
-        },
         {
           key:   'projectroletemplatebindings-manage',
           label: this.t('projectMembers.projectPermissions.projectroletemplatebindingsManage'),
@@ -111,11 +106,6 @@ export default {
           label: this.t('projectMembers.projectPermissions.monitoringUiView'),
           value: false,
         },
-        {
-          key:   'projectcatalogs-view',
-          label: this.t('projectMembers.projectPermissions.projectcatalogsView'),
-          value: false,
-        },
         {
           key:   'projectroletemplatebindings-view',
           label: this.t('projectMembers.projectPermissions.projectroletemplatebindingsView'),

package/components/form/__tests__/PrivateRegistry.test.ts

@@ -0,0 +1,133 @@
+import { shallowMount } from '@vue/test-utils';
+import PrivateRegistry from '@shell/components/form/PrivateRegistry.vue';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+
+const defaultMocks = {
+  $store: {
+    getters: {
+      'i18n/t': (text: string) => text,
+      t:        (text: string) => text,
+    }
+  }
+};
+
+const mountPrivateRegistry = (props = {}) => {
+  return shallowMount(PrivateRegistry, {
+    props: {
+      mode: 'edit',
+      ...props
+    },
+    global: { mocks: defaultMocks }
+  });
+};
+
+describe('privateRegistry', () => {
+  it('should render the info banner', () => {
+    const wrapper = mountPrivateRegistry();
+    const banner = wrapper.find('[color="info"]');
+
+    expect(banner.exists()).toBe(true);
+  });
+
+  it('should render the enable checkbox', () => {
+    const wrapper = mountPrivateRegistry();
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    expect(checkbox.exists()).toBe(true);
+  });
+
+  it('should not show the URL input when no value is provided', () => {
+    const wrapper = mountPrivateRegistry();
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(false);
+  });
+
+  it('should show the URL input when a value is provided', () => {
+    const wrapper = mountPrivateRegistry({ value: 'registry.example.com' });
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(true);
+  });
+
+  it('should show the URL input when checkbox is checked', async() => {
+    const wrapper = mountPrivateRegistry();
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(false);
+
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    await checkbox.vm.$emit('update:value', true);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(true);
+  });
+
+  it('should emit update:value with null when checkbox is unchecked', async() => {
+    const wrapper = mountPrivateRegistry({ value: 'registry.example.com' });
+
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    await checkbox.vm.$emit('update:value', false);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')![0]).toStrictEqual([null]);
+  });
+
+  it('should emit update:value when the URL input changes', async() => {
+    const wrapper = mountPrivateRegistry({ value: 'registry.example.com' });
+    const input = wrapper.findComponent(LabeledInput);
+
+    await input.vm.$emit('update:value', 'new-registry.example.com');
+
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')![0]).toStrictEqual(['new-registry.example.com']);
+  });
+
+  it('should auto-enable the checkbox when value changes from null to a string', async() => {
+    const wrapper = mountPrivateRegistry();
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(false);
+
+    await wrapper.setProps({ value: 'registry.example.com' });
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(true);
+  });
+
+  it('should pass rules to the URL input', () => {
+    const mockRule = jest.fn();
+    const wrapper = mountPrivateRegistry({
+      value: 'registry.example.com',
+      rules: [mockRule]
+    });
+    const input = wrapper.findComponent(LabeledInput);
+
+    expect(input.attributes('rules')).toBeDefined();
+  });
+
+  it('should apply custom data-testid to checkbox when provided', () => {
+    const wrapper = mountPrivateRegistry({ checkboxTestId: 'my-checkbox' });
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    expect(checkbox.attributes('data-testid')).toBe('my-checkbox');
+  });
+
+  it('should apply custom data-testid to input when provided', () => {
+    const wrapper = mountPrivateRegistry({
+      value:       'registry.example.com',
+      inputTestId: 'my-input'
+    });
+    const input = wrapper.findComponent(LabeledInput);
+
+    expect(input.attributes('data-testid')).toBe('my-input');
+  });
+
+  it('should not set data-testid when not provided', () => {
+    const wrapper = mountPrivateRegistry({ value: 'registry.example.com' });
+    const checkbox = wrapper.findComponent(Checkbox);
+    const input = wrapper.findComponent(LabeledInput);
+
+    expect(checkbox.attributes('data-testid')).toBeUndefined();
+    expect(input.attributes('data-testid')).toBeUndefined();
+  });
+});

package/components/formatter/WorkloadHealthScale.vue

@@ -67,7 +67,9 @@ export default {
           color: `bg-${ value.color }`,
           value: value.count || 0,
           label: ucFirst(name)
-        })).filter((x) => x.value > 0);
+        }))
+        .filter((x) => x.value > 0)
+        .sort((a, b) => a.label.localeCompare(b.label));
 
       return 5;
     },

package/components/nav/Group.vue

@@ -269,8 +269,9 @@ export default {
         @keyup.space="groupSelected()"
       >
         <slot name="header">
+          <!-- Group overview with link -->
           <router-link
-            v-if="hasOverview"
+            v-if="hasOverview && hasChildren"
             :to="headerRoute"
             :exact="group.children[0].exact"
             :tabindex="-1"
@@ -279,15 +280,32 @@ export default {
               <span v-clean-html="group.labelDisplay || group.label" />
             </h6>
           </router-link>
+          <!-- Non-linked group header -->
           <h6
-            v-else
+            v-else-if="hasChildren"
           >
             <span v-clean-html="group.labelDisplay || group.label" />
           </h6>
+          <!-- Simple child (nav item) -->
+          <ul
+            v-else
+            class="list-unstyled body root-depth"
+            v-bind="$attrs"
+          >
+            <Type
+
+              :key="id+'_' + group.name + '_type'"
+              :is-root="depth == 0 && !showHeader"
+              :type="group"
+              :depth="depth"
+              :highlight-route="highlightRoute"
+              @selected="selectType($event)"
+            />
+          </ul>
         </slot>
       </div>
       <i
-        v-if="!onlyHasOverview && canCollapse"
+        v-if="!onlyHasOverview && canCollapse && hasChildren"
         class="icon toggle toggle-accordion"
         :class="{'icon-chevron-right': !isExpanded, 'icon-chevron-down': isExpanded}"
         role="button"
@@ -377,6 +395,7 @@ export default {
       display: block;
       box-sizing:border-box;
       height: 100%;
+
       &:hover{
         text-decoration: none;
       }
@@ -484,6 +503,10 @@ export default {
           }
         }
       }
+
+      .root-depth :deep() > .child.nav-type a {
+        padding-left: 14px;
+      }
     }
 
     &.depth-1 {

package/components/nav/Header.vue

@@ -203,12 +203,6 @@ export default {
       return !!this.currentCluster?.actions?.apply;
     },
 
-    prod() {
-      const name = this.rootProduct.name;
-
-      return this.$store.getters['i18n/withFallback'](`product."${ name }"`, null, ucFirst(name));
-    },
-
     showSearch() {
       return this.rootProduct?.inStore === 'cluster';
     },
@@ -239,6 +233,30 @@ export default {
     isHarvester() {
       return this.$store.getters['currentProduct'].inStore === HARVESTER;
     },
+
+    productLabel() {
+      const name = this.rootProduct.name;
+
+      // single products do their own thing, which is the previous default behavior as per next line
+      if (this.isSingleProduct) {
+        return this.$store.getters['i18n/withFallback'](`product."${ name }"`, null, ucFirst(name));
+      } else {
+        if (this.rootProduct?.label) {
+          return this.rootProduct.label;
+        }
+        if (this.rootProduct?.labelKey) {
+          return this.$store.getters['i18n/t'](this.rootProduct.labelKey);
+        }
+
+        return this.$store.getters['i18n/withFallback'](`product."${ name }"`, null, ucFirst(name));
+      }
+    },
+
+    // Determine if we are on a route that shows the logo instead of the product label
+    // This is to enforce the logo display on certain routes like home, about, prefs, account, etc
+    isLogoRoute() {
+      return !this.$route.name.includes('c-cluster');
+    }
   },
 
   watch: {
@@ -518,7 +536,7 @@ export default {
           :alt="t('branding.logos.label')"
         >
         <div class="product-name">
-          {{ prod }}
+          {{ productLabel }}
         </div>
       </div>
     </div>
@@ -534,6 +552,13 @@ export default {
         {{ t(isSingleProduct.productNameKey) }}
       </div>
 
+      <div
+        v-else-if="productLabel && !isLogoRoute"
+        class="product-name"
+      >
+        {{ productLabel }}
+      </div>
+
       <div
         v-else
         class="side-menu-logo"

package/components/nav/TopLevelMenu.helper.ts

@@ -107,7 +107,6 @@ export interface TopLevelMenuHelper {
 
 export abstract class BaseTopLevelMenuHelper {
   protected $store: VuexStore;
-  protected hasProvCluster: boolean;
 
   /**
   * Filter mgmt clusters by
@@ -143,11 +142,9 @@ export abstract class BaseTopLevelMenuHelper {
     $store: VuexStore,
 }) {
     this.$store = $store;
-
-    this.hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
   }
 
-  protected convertToCluster(mgmtCluster: MgmtCluster, provCluster: ProvCluster): TopLevelMenuCluster {
+  protected convertToCluster(mgmtCluster: MgmtCluster, provCluster?: ProvCluster): TopLevelMenuCluster {
     return {
       id:              mgmtCluster.id,
       label:           mgmtCluster.nameDisplay,
@@ -173,7 +170,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
 
   private clustersPinnedWrapper: PaginationWrapper<any>;
   private clustersOthersWrapper: PaginationWrapper<any>;
-  private provClusterWrapper: PaginationWrapper<any>;
 
   private clusterCount = 0;
 
@@ -223,43 +219,10 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       },
       formatResponse: { classify: true },
     });
-    // Fetch all prov clusters for the mgmt clusters we have
-    this.provClusterWrapper = new PaginationWrapper({
-      $store,
-      id:       'top-level-menu-prov-clusters',
-      onChange: async({ forceWatch, revision }) => {
-        if (!this.args) {
-          return;
-        }
-        try {
-          await this.update({
-            ...this.args,
-            forceWatch,
-            provClusterRevision: revision,
-          });
-        } catch {
-          // Failures should be logged lower down, not much we can do here except catch to prevent whole ui page warnings in dev mode
-        }
-      },
-      enabledFor: {
-        store:    STORE.MANAGEMENT,
-        resource: {
-          id:      CAPI.RANCHER_CLUSTER,
-          context: 'side-bar',
-        }
-      },
-      formatResponse: { classify: true }
-    });
   }
 
   // ---------- requests ----------
   async update(args: UpdateArgs) {
-    if (!this.hasProvCluster) {
-      // We're filtering out mgmt clusters without prov clusters, so if the user can't see any prov clusters at all
-      // exit early
-      return;
-    }
-
     this.args = args;
     const promises = {
       pinned:    this.updatePinned(args),
@@ -271,22 +234,11 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       notPinned: MgmtCluster[]
     } = await allHash(promises) as any;
 
-    const provClusters = await this.updateProvCluster(res.notPinned, res.pinned, args);
-    const provClustersByMgmtId = provClusters.reduce((res: { [mgmtId: string]: ProvCluster}, provCluster: ProvCluster) => {
-      if (provCluster.mgmtClusterId) {
-        res[provCluster.mgmtClusterId] = provCluster;
-      }
-
-      return res;
-    }, {} as { [mgmtId: string]: ProvCluster});
-
     // Filter out mgmt clusters that don't have matching prov cluster and convert remaining to required format
     const _clustersNotPinned = res.notPinned
-      .filter((mgmtCluster) => !!provClustersByMgmtId[mgmtCluster.id])
-      .map((mgmtCluster) => this.convertToCluster(mgmtCluster, provClustersByMgmtId[mgmtCluster.id]));
+      .map((mgmtCluster) => this.convertToCluster(mgmtCluster));
     const _clustersPinned = res.pinned
-      .filter((mgmtCluster) => !!provClustersByMgmtId[mgmtCluster.id])
-      .map((mgmtCluster) => this.convertToCluster(mgmtCluster, provClustersByMgmtId[mgmtCluster.id]));
+      .map((mgmtCluster) => this.convertToCluster(mgmtCluster));
 
     this.clustersPinned.length = 0;
     this.clustersOthers.length = 0;
@@ -298,7 +250,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
   async destroy() {
     this.clustersPinnedWrapper.onDestroy();
     this.clustersOthersWrapper.onDestroy();
-    this.provClusterWrapper.onDestroy();
   }
 
   /**
@@ -445,41 +396,21 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       console.warn('Unable to set saved count for clusters', err); // eslint-disable-line no-console
     }
   }
-
-  /**
-   * Find all provisioning clusters associated with the displayed mgmt clusters
-   */
-  private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[], args: UpdateArgs): Promise<ProvCluster[]> {
-    return this.provClusterWrapper.request({
-      forceWatch: args.forceWatch,
-      pagination: {
-        filters: [
-          PaginationParamFilter.createMultipleFields(
-            [...notPinned, ...pinned]
-              .map((mgmtCluster) => ({
-                field: 'status.clusterName', value: mgmtCluster.id, equals: true, exact: true
-              }))
-          )
-        ],
-        page:                 1,
-        sort:                 [],
-        projectsOrNamespaces: []
-      },
-      revision: args.provClusterRevision
-    })
-      .then((r) => r.data);
-  }
 }
 
 /**
  * Helper designed to supply non-paginated results for the top level menu cluster resources
  */
 export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements TopLevelMenuHelper {
+  protected hasProvCluster: boolean;
+
   constructor({ $store }: {
     $store: VuexStore,
   }) {
     super({ $store });
 
+    this.hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
+
     if (this.hasProvCluster) {
       $store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
     }
@@ -664,9 +595,6 @@ class TopLevelMenuHelperService {
     const canPagination = $store.getters[`management/paginationEnabled`]({
       id:      MANAGEMENT.CLUSTER,
       context: 'side-bar',
-    }) && $store.getters[`management/paginationEnabled`]({
-      id:      CAPI.RANCHER_CLUSTER,
-      context: 'side-bar',
     });
 
     this._helper = canPagination ? new TopLevelMenuHelperPagination({ $store }) : new TopLevelMenuHelperLegacy({ $store });

package/components/nav/TopLevelMenu.vue

@@ -186,8 +186,22 @@ export default {
           to.params.product = p.name;
         }
 
+        let label;
+
+        // Allow product to specify its label (old DSL product() did not have "label" or "labelKey")
+        // new extensions product registration supports both "label" and "labelKey" (with "labelKey" taking precedence if both are provided)
+        if (p.labelKey) {
+          label = this.$store.getters['i18n/t'](p.labelKey);
+        } else if (p.label) {
+          label = p.label;
+        }
+
+        if (!label) {
+          label = this.$store.getters['i18n/withFallback'](`product.${ p.name }`, null, ucFirst(p.name));
+        }
+
         return {
-          label:             this.$store.getters['i18n/withFallback'](`product."${ p.name }"`, null, ucFirst(p.name)),
+          label,
           icon:              `icon-${ p.icon || 'copy' }`,
           svg:               p.svg,
           value:             p.name,

package/components/nav/__tests__/TopLevelMenu.helper.test.ts

@@ -102,7 +102,7 @@ describe('topLevelMenu.helper', () => {
     it('should initialize PaginationWrappers', () => {
       mockStore.getters['management/schemaFor'].mockReturnValue(true);
       new TopLevelMenuHelperPagination({ $store: mockStore });
-      expect(PaginationWrapper).toHaveBeenCalledTimes(3);
+      expect(PaginationWrapper).toHaveBeenCalledTimes(2);
     });
 
     it('should update clusters correctly', async() => {
@@ -113,19 +113,13 @@ describe('topLevelMenu.helper', () => {
       const mgmtOthers = [{
         id: 'c2', nameDisplay: 'Other', isReady: true, pinned: false, pin: jest.fn(), unpin: jest.fn()
       }];
-      const provClusters = [
-        { mgmtClusterId: 'c1' },
-        { mgmtClusterId: 'c2' }
-      ];
 
       const mockRequestPinned = jest.fn().mockResolvedValue({ data: mgmtPinned });
       const mockRequestOthers = jest.fn().mockResolvedValue({ data: mgmtOthers });
-      const mockRequestProv = jest.fn().mockResolvedValue({ data: provClusters });
 
       (PaginationWrapper as unknown as jest.Mock)
         .mockImplementationOnce(() => ({ request: mockRequestPinned, onDestroy: jest.fn() }))
-        .mockImplementationOnce(() => ({ request: mockRequestOthers, onDestroy: jest.fn() }))
-        .mockImplementationOnce(() => ({ request: mockRequestProv, onDestroy: jest.fn() }));
+        .mockImplementationOnce(() => ({ request: mockRequestOthers, onDestroy: jest.fn() }));
 
       const helper = new TopLevelMenuHelperPagination({ $store: mockStore });
 
@@ -169,57 +163,12 @@ describe('topLevelMenu.helper', () => {
         },
         revision: undefined
       });
-      expect(mockRequestProv).toHaveBeenCalledWith({
-        forceWatch: undefined,
-        pagination: {
-          filters: [{
-            equals: true,
-            fields: [{
-              equals: true, exact: true, field: 'status.clusterName', value: mgmtOthers[0].id
-            }, {
-              equals: true, exact: true, field: 'status.clusterName', value: mgmtPinned[0].id
-            }],
-            param: 'filter'
-          }],
-          page:                 1,
-          projectsOrNamespaces: [],
-          sort:                 []
-        },
-        revision: undefined
-      });
 
       expect(helper.clustersPinned).toHaveLength(1);
       expect(helper.clustersPinned[0].id).toBe('c1');
       expect(helper.clustersOthers).toHaveLength(1);
       expect(helper.clustersOthers[0].id).toBe('c2');
     });
-
-    it('should filter out mgmt clusters without matching prov clusters', async() => {
-      mockStore.getters['management/schemaFor'].mockReturnValue(true);
-      const mgmtOthers = [{
-        id: 'c2', nameDisplay: 'Other', isReady: true, pinned: false, pin: jest.fn(), unpin: jest.fn()
-      }];
-      // No prov cluster for c2
-      const provClusters: any[] = [];
-
-      const mockRequestPinned = jest.fn().mockResolvedValue({ data: [] });
-      const mockRequestOthers = jest.fn().mockResolvedValue({ data: mgmtOthers });
-      const mockRequestProv = jest.fn().mockResolvedValue({ data: provClusters });
-
-      (PaginationWrapper as unknown as jest.Mock)
-        .mockImplementationOnce(() => ({ request: mockRequestPinned, onDestroy: jest.fn() }))
-        .mockImplementationOnce(() => ({ request: mockRequestOthers, onDestroy: jest.fn() }))
-        .mockImplementationOnce(() => ({ request: mockRequestProv, onDestroy: jest.fn() }));
-
-      const helper = new TopLevelMenuHelperPagination({ $store: mockStore });
-
-      await helper.update({
-        searchTerm: '',
-        pinnedIds:  [],
-      });
-
-      expect(helper.clustersOthers).toHaveLength(0);
-    });
   });
 
   describe('class: TopLevelMenuHelperService', () => {

package/config/pagination-table-headers.js

@@ -4,7 +4,8 @@ import {
   EVENT_LAST_SEEN_TIME,
   EVENT_TYPE,
   SECRET_ORIGIN,
-  EVENT_FIRST_SEEN_TIME
+  EVENT_FIRST_SEEN_TIME,
+  WORKLOAD_HEALTH_SCALE
 } from '@shell/config/table-headers';
 
 // This file contains table headers
@@ -95,3 +96,9 @@ export const STEVE_SECRET_ORIGIN = {
   // So we sort by the 'UI_PROJECT_SECRET_COPY' annotation (management.cattle.io/project-scoped-secret-copy) which at least groups the copies.
   sort: `metadata.annotations[${ UI_PROJECT_SECRET_COPY }]:desc`,
 };
+
+export const STEVE_WORKLOAD_HEALTH_SCALE = {
+  ...WORKLOAD_HEALTH_SCALE,
+  sort:   false,
+  search: false,
+};

package/config/private-label.js

@@ -1,5 +1,6 @@
 import { SETTING } from './settings';
 import { CURRENT_RANCHER_VERSION } from './version';
+import { requireAsset } from '@shell/utils/require-asset';
 
 export const ANY = 0;
 export const STANDARD = 1;
@@ -78,7 +79,7 @@ export function setTitle() {
   const v = getVendor();
 
   if (v === 'Harvester') {
-    const ico = require(`~shell/assets/images/pl/harvester.png`);
+    const ico = requireAsset(`~shell/assets/images/pl/harvester.png`);
 
     document.title = 'Harvester';
     const link = document.createElement('link');