@rancher/shell 3.0.9-rc.3 → 3.0.9-rc.4

package/assets/translations/en-us.yaml

@@ -1183,7 +1183,7 @@ catalog:
       subHeaderItem:
         missingVersionDate: Last updated date is not available for this chart
       footerItem:
-        ariaLabel: Apply filter
+        ariaLabel: 'Apply {filter} filter'
     statusFilterCautions:
       installation: Installation status cannot be determined with 100% accuracy
       upgradeable: Upgradeable status cannot be determined with 100% accuracy
@@ -2543,7 +2543,7 @@ cluster:
       snapshotScheduleCron:
         label: Cron Schedule
       snapshotRetention:
-        label: Snapshot retention count
+        label: Local snapshot retention count
         tooltip: Each backup records 1 snapshot per etcd node. If you specify 3 snapshots and you have 3 etcd nodes you will only retain 1 full backup.
       exportMetric:
         label: Metrics
@@ -2552,6 +2552,13 @@ cluster:
       s3backups:
         label: Save Backups to S3
       s3config:
+        snapshotRetention:
+          title: S3 Snapshot Retention
+          label: S3 Snapshot Retention Count
+          options:
+            manual: Set manually
+            localDefined: Same as local ({count} Snaphots)
+            localUndefined: Same as local
         bucket:
           label: Bucket
         folder:
@@ -6888,6 +6895,7 @@ tableHeaders:
   targetPort: Target
   template: Template
   totalSnapshotQuota: Total Snapshot Quota
+  ttl: TTL
   type: Type
   updated: Updated
   up-to-date: Up To Date
@@ -9308,3 +9316,7 @@ autoscaler:
       unavailable: Unavailable
   tab:
     title: Autoscaler
+
+ext.cattle.io.kubeconfig:
+  deleted: "{name} (deleted)"
+  moreClusterCount: " + {remainingCount} more"

package/components/formatter/KubeconfigClusters.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface ClusterReference {
+  label: string;
+  location?: object;
+}
+
+const MAX_DISPLAY = 25;
+
+const props = defineProps<{
+  row: { id: string; sortedReferencedClusters?: ClusterReference[] };
+  value?: unknown[];
+}>();
+
+const allClusters = computed<ClusterReference[]>(() => {
+  return props.row?.sortedReferencedClusters || [];
+});
+
+const clusters = computed<ClusterReference[]>(() => {
+  return allClusters.value.slice(0, MAX_DISPLAY);
+});
+
+const remainingCount = computed<number>(() => {
+  return Math.max(0, allClusters.value.length - MAX_DISPLAY);
+});
+</script>
+
+<template>
+  <span class="kubeconfig-clusters">
+    <template
+      v-for="(cluster, index) in clusters"
+    >
+      <template v-if="index > 0">,&nbsp;</template>
+      <router-link
+        v-if="cluster.location"
+        :key="`${row.id}-${cluster.label}`"
+        :to="cluster.location"
+      >
+        {{ cluster.label }}
+      </router-link>
+      <span
+        v-else
+        :key="`${row.id}-${cluster.label}-deleted`"
+        class="text-muted"
+      >
+        {{ cluster.label }}
+      </span>
+    </template>
+    <span
+      v-if="remainingCount > 0"
+      class="text-muted"
+    >
+      {{ t('ext.cattle.io.kubeconfig.moreClusterCount', { remainingCount: remainingCount }) }}
+    </span>
+    <span
+      v-if="allClusters.length === 0"
+      class="text-muted"
+    >
+      &mdash;
+    </span>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.kubeconfig-clusters {
+  display: block;
+  width: 0;
+  min-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/components/formatter/__tests__/KubeconfigClusters.test.ts

@@ -0,0 +1,125 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import KubeconfigClusters from '@shell/components/formatter/KubeconfigClusters.vue';
+
+describe('component: KubeconfigClusters', () => {
+  const MAX_DISPLAY = 25;
+
+  const createCluster = (label: string, hasLocation = true) => ({
+    label,
+    location: hasLocation ? { name: 'cluster-detail', params: { cluster: label } } : null
+  });
+
+  const createClusters = (count: number, hasLocation = true) => {
+    return Array.from({ length: count }, (_, i) => createCluster(`cluster-${ i + 1 }`, hasLocation));
+  };
+
+  const defaultMocks = { t: (key: string, args: Record<string, unknown>) => `+ ${ args.remainingCount } more` };
+
+  const mountComponent = (clusters: unknown[] = [], mocks = defaultMocks) => {
+    return mount(KubeconfigClusters, {
+      props:  { row: { id: 'test-row', sortedReferencedClusters: clusters } },
+      global: {
+        mocks,
+        stubs: { 'router-link': RouterLinkStub }
+      }
+    });
+  };
+
+  describe('displaying clusters', () => {
+    it('should display a dash when there are no clusters', () => {
+      const wrapper = mountComponent([]);
+      const emptySpan = wrapper.find('.text-muted');
+
+      expect(emptySpan.text()).toBe('—');
+    });
+
+    it('should display cluster labels with router-links when clusters have locations', () => {
+      const clusters = [createCluster('local'), createCluster('downstream')];
+      const wrapper = mountComponent(clusters);
+      const links = wrapper.findAllComponents(RouterLinkStub);
+
+      expect(links).toHaveLength(2);
+      expect(links[0].text()).toBe('local');
+      expect(links[1].text()).toBe('downstream');
+    });
+
+    it('should display cluster labels as text-muted spans when clusters have no location', () => {
+      const clusters = [createCluster('deleted-cluster', false)];
+      const wrapper = mountComponent(clusters);
+      const mutedSpan = wrapper.find('.text-muted');
+
+      expect(mutedSpan.text()).toBe('deleted-cluster');
+      expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(false);
+    });
+
+    it('should separate clusters with commas', () => {
+      const clusters = [createCluster('cluster-1'), createCluster('cluster-2')];
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.text()).toContain(',');
+    });
+  });
+
+  describe('max display limit', () => {
+    it('should display all clusters when count is at or below the limit', () => {
+      const clusters = createClusters(MAX_DISPLAY);
+      const wrapper = mountComponent(clusters);
+      const links = wrapper.findAllComponents(RouterLinkStub);
+
+      expect(links).toHaveLength(MAX_DISPLAY);
+      expect(wrapper.text()).not.toContain('more');
+    });
+
+    it('should limit displayed clusters to MAX_DISPLAY', () => {
+      const clusters = createClusters(MAX_DISPLAY + 10);
+      const wrapper = mountComponent(clusters);
+      const links = wrapper.findAllComponents(RouterLinkStub);
+
+      expect(links).toHaveLength(MAX_DISPLAY);
+    });
+
+    it('should show remaining count when clusters exceed the limit', () => {
+      const totalClusters = MAX_DISPLAY + 5;
+      const clusters = createClusters(totalClusters);
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.text()).toContain('+ 5 more');
+    });
+
+    it('should show correct remaining count for large cluster lists', () => {
+      const totalClusters = MAX_DISPLAY + 100;
+      const clusters = createClusters(totalClusters);
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.text()).toContain('+ 100 more');
+    });
+  });
+
+  describe('computed properties', () => {
+    it('should return empty array for allClusters when row has no sortedReferencedClusters', () => {
+      const wrapper = mount(KubeconfigClusters, {
+        props:  { row: { id: 'test-row' } },
+        global: {
+          mocks: defaultMocks,
+          stubs: { 'router-link': RouterLinkStub }
+        }
+      });
+
+      expect(wrapper.vm.allClusters).toStrictEqual([]);
+    });
+
+    it('should calculate remainingCount as 0 when clusters are at or below limit', () => {
+      const clusters = createClusters(MAX_DISPLAY);
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.vm.remainingCount).toBe(0);
+    });
+
+    it('should calculate correct remainingCount when clusters exceed limit', () => {
+      const clusters = createClusters(MAX_DISPLAY + 15);
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.vm.remainingCount).toBe(15);
+    });
+  });
+});

package/config/product/manager.js

@@ -2,6 +2,7 @@ import { AGE, NAME as NAME_COL, STATE } from '@shell/config/table-headers';
 import {
   CAPI,
   CATALOG,
+  EXT,
   NORMAN,
   HCI,
   MANAGEMENT,
@@ -125,14 +126,17 @@ export function init(store) {
   weightType(CAPI.MACHINE_DEPLOYMENT, 4, true);
   weightType(CAPI.MACHINE_SET, 3, true);
   weightType(CAPI.MACHINE, 2, true);
-  weightType(CATALOG.CLUSTER_REPO, 1, true);
+  configureType(EXT.KUBECONFIG, { canYaml: false });
+  weightType(EXT.KUBECONFIG, 1, true);
+  weightType(CATALOG.CLUSTER_REPO, 0, true);
   weightType(MANAGEMENT.PSA, 5, true);
-  weightType(VIRTUAL_TYPES.JWT_AUTHENTICATION, 0, true);
+  weightType(VIRTUAL_TYPES.JWT_AUTHENTICATION, -1, true);
 
   basicType([
     CAPI.MACHINE_DEPLOYMENT,
     CAPI.MACHINE_SET,
     CAPI.MACHINE,
+    EXT.KUBECONFIG,
     CATALOG.CLUSTER_REPO,
     MANAGEMENT.PSA,
     VIRTUAL_TYPES.JWT_AUTHENTICATION
@@ -192,4 +196,27 @@ export function init(store) {
     MACHINE_SUMMARY,
     AGE
   ]);
+
+  headers(EXT.KUBECONFIG, [
+    STATE,
+    {
+      name:      'clusters',
+      labelKey:  'tableHeaders.clusters',
+      value:     'spec.clusters',
+      sort:      ['referencedClustersSortable'],
+      search:    ['referencedClustersSortable'],
+      formatter: 'KubeconfigClusters',
+    },
+    {
+      name:          'ttl',
+      labelKey:      'tableHeaders.ttl',
+      value:         'expiresAt',
+      formatter:     'LiveDate',
+      formatterOpts: { isCountdown: true },
+    },
+    {
+      ...AGE,
+      defaultSort: true,
+    },
+  ]);
 }

package/config/router/routes.js

@@ -514,7 +514,10 @@ export default [
         name:      'c-cluster-product-resource-id',
         meta:      { asyncSetup: true }
       }, {
-        path:      `/c/:cluster/:product/${ VIRTUAL_TYPES.PROJECT_SECRETS }/:namespace/:id`,
+        // Used this regex syntax in order to strict match the 'projectsecret' path segment
+        // while simultaneously capturing it as the 'resource' parameter.
+        // This is required because the Side Navigation relies on route.params.resource to determine which menu item to highlight.
+        path:      `/c/:cluster/:product/:resource(${ VIRTUAL_TYPES.PROJECT_SECRETS })/:namespace/:id`,
         component: () => interopDefault(import(`@shell/pages/c/_cluster/explorer/${ VIRTUAL_TYPES.PROJECT_SECRETS }.vue`)),
         name:      `c-cluster-product-${ VIRTUAL_TYPES.PROJECT_SECRETS }-namespace-id`,
       }, {

package/edit/provisioning.cattle.io.cluster/defaults.ts

@@ -0,0 +1 @@
+export const RETENTION_DEFAULT = 5;

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -66,6 +66,7 @@ import { DEFAULT_COMMON_BASE_PATH, DEFAULT_SUBDIRS } from '@shell/edit/provision
 import ClusterAppearance from '@shell/components/form/ClusterAppearance';
 import AddOnAdditionalManifest from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnAdditionalManifest';
 import VsphereUtils, { VMWARE_VSPHERE } from '@shell/utils/v-sphere';
+import { RETENTION_DEFAULT } from '@shell/edit/provisioning.cattle.io.cluster/defaults';
 import { mapGetters } from 'vuex';
 const HARVESTER = 'harvester';
 const GOOGLE = 'google';
@@ -1061,7 +1062,7 @@ export default {
         this.rkeConfig.etcd = {
           disableSnapshots:     false,
           s3:                   null,
-          snapshotRetention:    5,
+          snapshotRetention:    RETENTION_DEFAULT,
           snapshotScheduleCron: '0 */5 * * *',
         };
       } else if (typeof this.rkeConfig.etcd.disableSnapshots === 'undefined') {

package/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config.vue

@@ -4,6 +4,10 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
 import { NORMAN } from '@shell/config/types';
 import FormValidation from '@shell/mixins/form-validation';
+import UnitInput from '@shell/components/form/UnitInput';
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import { _CREATE } from '@shell/config/query-params';
+import { RETENTION_DEFAULT } from '@shell/edit/provisioning.cattle.io.cluster/defaults';
 
 export default {
   emits: ['update:value', 'validationChanged'],
@@ -12,6 +16,8 @@ export default {
     LabeledInput,
     Checkbox,
     SelectOrCreateAuthSecret,
+    UnitInput,
+    RadioGroup
   },
   mixins: [FormValidation],
 
@@ -35,6 +41,10 @@ export default {
       type:     Function,
       required: true,
     },
+    localRetentionCount: {
+      type:    Number,
+      default: null,
+    }
   },
 
   data() {
@@ -47,9 +57,11 @@ export default {
         folder:              '',
         region:              '',
         skipSSLVerify:       false,
+        retention:           null,
         ...(this.value || {}),
       },
-      fvFormRuleSets: [
+      differentRetention: false,
+      fvFormRuleSets:     [
         {
           path: 'endpoint', rootObject: this.config, rules: ['awsStyleEndpoint']
         },
@@ -59,6 +71,9 @@ export default {
       ]
     };
   },
+  mounted() {
+    this.differentRetention = !(this.mode === _CREATE || this.value?.retention === this.localRetentionCount);
+  },
 
   computed: {
 
@@ -73,10 +88,25 @@ export default {
 
       return {};
     },
+
+    localCountToUse() {
+      return this.localRetentionCount === null || this.localRetentionCount === undefined ? RETENTION_DEFAULT : this.localRetentionCount;
+    },
+    retentionOptionsOptions() {
+      return [
+        { label: this.t('cluster.rke2.etcd.s3config.snapshotRetention.options.localDefined', { count: this.localCountToUse }), value: false }, { label: this.t('cluster.rke2.etcd.s3config.snapshotRetention.options.manual'), value: true }
+      ];
+    }
   },
   watch: {
     fvFormIsValid(newValue) {
       this.$emit('validationChanged', !!newValue);
+    },
+    localRetentionCount(neu) {
+      if (!this.differentRetention) {
+        this.config.retention = this.localCountToUse;
+        this.update();
+      }
     }
   },
 
@@ -86,6 +116,10 @@ export default {
 
       this.$emit('update:value', out);
     },
+    resetRetention() {
+      this.config.retention = this.localCountToUse;
+      this.update();
+    }
   },
 };
 </script>
@@ -150,7 +184,6 @@ export default {
         />
       </div>
     </div>
-
     <div
       v-if="!ccData.defaultSkipSSLVerify"
       class="mt-20"
@@ -172,5 +205,27 @@ export default {
         @update:value="update"
       />
     </div>
+    <div class="row mt-20">
+      <div class="col span-6">
+        <h4>{{ t('cluster.rke2.etcd.s3config.snapshotRetention.title') }}</h4>
+        <RadioGroup
+          v-model:value="differentRetention"
+          name="s3config-retention"
+          :mode="mode"
+          :options="retentionOptionsOptions"
+          :row="true"
+          @update:value="resetRetention"
+        />
+        <UnitInput
+          v-if="differentRetention"
+          v-model:value="config.retention"
+          :label="t('cluster.rke2.etcd.s3config.snapshotRetention.label')"
+          :mode="mode"
+          :suffix="t('cluster.rke2.snapshots.s3Suffix')"
+          class="mt-10"
+          @update:value="update"
+        />
+      </div>
+    </div>
   </div>
 </template>

package/edit/provisioning.cattle.io.cluster/tabs/etcd/__tests__/S3Config.test.ts

@@ -0,0 +1,109 @@
+import { shallowMount } from '@vue/test-utils';
+import S3Config from '@shell/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config.vue';
+
+describe('s3Config', () => {
+  const defaultProps = {
+    mode:                'create',
+    namespace:           'test-ns',
+    registerBeforeHook:  jest.fn(),
+    localRetentionCount: 5,
+    value:               {}
+  };
+
+  const mockStore = { getters: { 'rancher/byId': jest.fn() } };
+
+  const createWrapper = (props = {}) => {
+    return shallowMount(S3Config, {
+      propsData: {
+        ...defaultProps,
+        ...props
+      },
+      mocks: {
+        $store: mockStore,
+        t:      (key) => key,
+      },
+      stubs: {
+        LabeledInput:             true,
+        Checkbox:                 true,
+        SelectOrCreateAuthSecret: true,
+        UnitInput:                true,
+        RadioGroup:               true,
+      }
+    });
+  };
+
+  it('renders correctly', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('initializes config with default values', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.vm.config.bucket).toBe('');
+    expect(wrapper.vm.config.skipSSLVerify).toBe(false);
+  });
+
+  it('initializes config with provided value prop', () => {
+    const value = {
+      bucket:    'test',
+      region:    'us-east-1',
+      retention: 2
+    };
+    const wrapper = createWrapper({ value });
+
+    expect(wrapper.vm.config.bucket).toBe('test');
+    expect(wrapper.vm.config.region).toBe('us-east-1');
+    expect(wrapper.vm.config.retention).toBe(2);
+  });
+
+  describe('retention Logic', () => {
+    it('computes localCountToUse correctly', () => {
+      const wrapper = createWrapper({ localRetentionCount: 3 });
+
+      expect(wrapper.vm.localCountToUse).toBe(3);
+    });
+
+    it('uses default retention if localRetentionCount is null', () => {
+      const wrapper = createWrapper({ localRetentionCount: null });
+
+      expect(wrapper.vm.localCountToUse).toBe(5);
+    });
+
+    it('sets differentRetention to false in create mode', () => {
+      const wrapper = createWrapper({ mode: 'create' });
+
+      expect(wrapper.vm.differentRetention).toBe(false);
+    });
+
+    it('sets differentRetention to false in edit mode if retention matches', () => {
+      const wrapper = createWrapper({
+        mode:                'edit',
+        value:               { retention: 5 },
+        localRetentionCount: 5
+      });
+
+      expect(wrapper.vm.differentRetention).toBe(false);
+    });
+
+    it('sets differentRetention to true in edit mode if retention differs', () => {
+      const wrapper = createWrapper({
+        mode:                'edit',
+        value:               { retention: 2 },
+        localRetentionCount: 5
+      });
+
+      expect(wrapper.vm.differentRetention).toBe(true);
+    });
+
+    it('updates retention when localRetentionCount changes and differentRetention is false', async() => {
+      const wrapper = createWrapper({ localRetentionCount: 5 });
+
+      // differentRetention is false by default in create mode
+      await wrapper.setProps({ localRetentionCount: 10 });
+      expect(wrapper.vm.config.retention).toBe(10);
+      expect(wrapper.emitted('update:value')).toBeTruthy();
+    });
+  });
+});

package/edit/provisioning.cattle.io.cluster/tabs/etcd/index.vue

@@ -124,6 +124,7 @@ export default {
       <S3Config
         v-if="s3Backup"
         v-model:value="etcd.s3"
+        :local-retention-count="etcd.snapshotRetention"
         :namespace="value.metadata.namespace"
         :register-before-hook="registerBeforeHook"
         :mode="mode"

package/list/ext.cattle.io.kubeconfig.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
+import { CAPI, MANAGEMENT } from '@shell/config/types';
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PagTableFetchPageSecondaryResourcesOpts, PagTableFetchSecondaryResourcesOpts, PagTableFetchSecondaryResourcesReturns } from '@shell/types/components/paginatedResourceTable';
+
+defineProps({
+  schema: {
+    type:     Object,
+    required: true
+  },
+
+  useQueryParamsForSimpleFiltering: {
+    type:    Boolean,
+    default: false
+  }
+});
+
+const store = useStore();
+
+const canViewProvClusters = computed<boolean>(() => {
+  return !!store.getters['management/canList'](CAPI.RANCHER_CLUSTER);
+});
+
+const canViewMgmtClusters = computed<boolean>(() => {
+  return !!store.getters['management/canList'](MANAGEMENT.CLUSTER);
+});
+
+/**
+ * Fetch all clusters when not using pagination
+ */
+async function fetchSecondaryResources({ canPaginate }: PagTableFetchSecondaryResourcesOpts): PagTableFetchSecondaryResourcesReturns {
+  if (canPaginate) {
+    return;
+  }
+
+  const promises = [];
+
+  if (canViewProvClusters.value) {
+    promises.push(store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }));
+  }
+
+  if (canViewMgmtClusters.value) {
+    promises.push(store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }));
+  }
+
+  await Promise.all(promises);
+}
+
+/**
+ * Fetch only the clusters referenced by kubeconfigs on the current page
+ *
+ * NOTE: For the time being this isn't validated because ext.cattle.io.kubeconfig is not one of the indexed resources. I'm putting this in for future support since secondary resources are needed.
+ */
+async function fetchPageSecondaryResources({ force, page }: PagTableFetchPageSecondaryResourcesOpts) {
+  if (!page?.length) {
+    return;
+  }
+
+  const uniqueClusterIds = new Set<string>();
+
+  page.forEach((kubeconfig: any) => {
+    const ids = kubeconfig.spec?.clusters || [];
+
+    ids.forEach((id: string) => uniqueClusterIds.add(id));
+  });
+
+  if (uniqueClusterIds.size === 0) {
+    return;
+  }
+
+  const clusterIdArray = Array.from(uniqueClusterIds);
+
+  if (canViewProvClusters.value) {
+    const opt: ActionFindPageArgs = {
+      force,
+      pagination: new FilterArgs({
+        filters: PaginationParamFilter.createMultipleFields(
+          clusterIdArray.map((id) => new PaginationFilterField({
+            field: 'status.clusterName', // Verified it's one of the attribute fields listed in the schema, according to steve-pagination-utils that means it should be filterable
+            value: id
+          }))
+        )
+      })
+    };
+
+    store.dispatch('management/findPage', { type: CAPI.RANCHER_CLUSTER, opt });
+  }
+
+  if (canViewMgmtClusters.value) {
+    const opt: ActionFindPageArgs = {
+      force,
+      pagination: new FilterArgs({
+        filters: PaginationParamFilter.createMultipleFields(
+          clusterIdArray.map((id) => new PaginationFilterField({
+            field: 'metadata.name', // Verified it's one of the attribute fields listed in the schema, according to steve-pagination-utils that means it should be filterable
+            value: id
+          }))
+        )
+      })
+    };
+
+    store.dispatch('management/findPage', { type: MANAGEMENT.CLUSTER, opt });
+  }
+}
+</script>
+
+<template>
+  <PaginatedResourceTable
+    :schema="schema"
+    :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :fetch-secondary-resources="fetchSecondaryResources"
+    :fetch-page-secondary-resources="fetchPageSecondaryResources"
+  />
+</template>