@rancher/shell 3.0.1 → 3.0.2-rc.1

package/pages/c/_cluster/settings/performance.vue

@@ -103,17 +103,17 @@ export default {
           resources.push(this.t('performance.serverPagination.resources.all'));
         } else {
           settings.resources.enableSome.enabled.forEach((resource) => {
-            resources.push(resource);
+            resources.push(!!resource.length ? resource : `${ resource.resource } (${ resource.context })`);
           });
           if (settings.resources.enableSome.generic) {
             resources.push(this.t('performance.serverPagination.resources.generic', {}, true));
           }
         }
 
-        storeResources.push(`${ store }: ${ resources.join(', ') }`);
+        storeResources.push(`Resources in store '${ store }': ${ resources.join(', ') }`);
       });
 
-      return storeResources.join('. ');
+      return storeResources.join('<br><br>');
     }
   },
 
@@ -187,6 +187,13 @@ export default {
           body:  this.t(`performance.${ l10n[property] }.incompatibleDescription`, {}, true),
         },
       });
+    },
+
+    setPaginationDefaults() {
+      this.value = {
+        ...this.value,
+        serverPagination: { ...DEFAULT_PERF_SETTING.serverPagination }
+      };
     }
   },
 };
@@ -202,7 +209,9 @@ export default {
       <div class="ui-perf-setting">
         <!-- Server Side Pagination -->
         <div class="mt-40">
-          <h2>{{ t('performance.serverPagination.label') }}</h2>
+          <h2 id="ssp-setting">
+            {{ t('performance.serverPagination.label') }}
+          </h2>
           <p>{{ t('performance.serverPagination.description') }}</p>
           <Banner
             color="error"
@@ -225,9 +234,17 @@ export default {
           <p :class="{ 'text-muted': !value.serverPagination.enabled }">
             {{ t('performance.serverPagination.applicable') }}
           </p>
-          <p :class="{ 'text-muted': !value.serverPagination.enabled }">
-            {{ steveCacheApplicableResources }}
-          </p>
+          <p
+            v-clean-html="steveCacheApplicableResources"
+            :class="{ 'text-muted': !value.serverPagination.enabled }"
+          />
+          <button
+            class="btn btn-sm role-primary"
+            style="width: fit-content;"
+            @click.prevent="setPaginationDefaults()"
+          >
+            {{ t('performance.serverPagination.populateDefaults') }}
+          </button>
         </div>
         <!-- Inactivity -->
         <div class="mt-20">
@@ -273,6 +290,11 @@ export default {
         <!-- Incremental Loading -->
         <div class="mt-40">
           <h2>{{ t('performance.incrementalLoad.label') }}</h2>
+          <Banner
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.incrementalLoad.label') }, true)" />
+          </Banner>
           <p>{{ t('performance.incrementalLoad.description') }}</p>
           <Checkbox
             :value="value.incrementalLoading.enabled"
@@ -300,11 +322,12 @@ export default {
         <!-- Enable manual refresh list views -->
         <div class="mt-40">
           <h2 v-t="'performance.manualRefresh.label'" />
-          <p>{{ t('performance.manualRefresh.description') }}</p>
           <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.manualRefresh.label') }, true)" />
+          </Banner>
+          <p>{{ t('performance.manualRefresh.description') }}</p>
           <Checkbox
             :value="value.manualRefresh.enabled"
             :mode="mode"
@@ -331,11 +354,12 @@ export default {
         <!-- Enable GC of resources from store -->
         <div class="mt-40">
           <h2 v-t="'performance.gc.label'" />
-          <p>{{ t('performance.gc.description') }}</p>
           <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.gc.label') }, true)" />
+          </Banner>
+          <p>{{ t('performance.gc.description') }}</p>
           <Checkbox
             v-model:value="value.garbageCollection.enabled"
             :mode="mode"
@@ -411,11 +435,12 @@ export default {
         <!-- Force NS filter -->
         <div class="mt-40">
           <h2>{{ t('performance.nsFiltering.label') }}</h2>
-          <p>{{ t('performance.nsFiltering.description') }}</p>
           <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.nsFiltering.label') }, true)" />
+          </Banner>
+          <p>{{ t('performance.nsFiltering.description') }}</p>
           <Checkbox
             :value="value.forceNsFilterV2.enabled"
             :mode="mode"
@@ -428,11 +453,12 @@ export default {
         <!-- Advanced Websocket Worker -->
         <div class="mt-40">
           <h2>{{ t('performance.advancedWorker.label') }}</h2>
-          <p>{{ t('performance.advancedWorker.description') }}</p>
           <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedForSSP`, { setting: t('performance.advancedWorker.label') }, true)" />
+          </Banner>
+          <p>{{ t('performance.advancedWorker.description') }}</p>
           <Checkbox
             v-model:value="value.advancedWorker.enabled"
             :mode="mode"

package/pages/home.vue

@@ -27,7 +27,7 @@ import { RESET_CARDS_ACTION, SET_LOGIN_ACTION } from '@shell/config/page-actions
 import { STEVE_NAME_COL, STEVE_STATE_COL } from '@shell/config/pagination-table-headers';
 import { PaginationParamFilter, FilterArgs, PaginationFilterField, PaginationArgs } from '@shell/types/store/pagination.types';
 import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
-import { sameContents } from 'utils/array';
+import { sameContents } from '@shell/utils/array';
 
 export default defineComponent({
   name:       'Home',
@@ -504,16 +504,18 @@ export default defineComponent({
               {{ t('landing.seeWhatsNew') }}
             </div>
             <a
-              class="hand"
+              class="hand banner-link"
               :href="releaseNotesUrl"
+              role="link"
               target="_blank"
               rel="noopener noreferrer nofollow"
+              :aria-label="t('landing.whatsNewLink')"
               @click.stop="showWhatsNew"
+              @keyup.stop.enter="showWhatsNew"
             ><span v-clean-html="t('landing.whatsNewLink')" /></a>
           </Banner>
         </div>
       </div>
-
       <div class="row home-panels">
         <div class="col main-panel">
           <div
@@ -532,7 +534,11 @@ export default defineComponent({
                 </div>
                 <a
                   class="hand mr-20"
+                  tabindex="0"
+                  :aria-label="t('landing.landingPrefs.userPrefs')"
                   @click.prevent.stop="showUserPrefs"
+                  @keyup.prevent.stop.enter="showUserPrefs"
+                  @keyup.prevent.stop.space="showUserPrefs"
                 ><span v-clean-html="t('landing.landingPrefs.userPrefs')" /></a>
               </Banner>
             </div>
@@ -583,6 +589,9 @@ export default defineComponent({
                       :to="manageLocation"
                       class="btn btn-sm role-secondary"
                       data-testid="cluster-management-manage-button"
+                      role="button"
+                      :aria-label="t('cluster.manageAction')"
+                      @keyup.space="$router.push(manageLocation)"
                     >
                       {{ t('cluster.manageAction') }}
                     </router-link>
@@ -591,6 +600,9 @@ export default defineComponent({
                       :to="importLocation"
                       class="btn btn-sm role-primary"
                       data-testid="cluster-create-import-button"
+                      role="button"
+                      :aria-label="t('cluster.importAction')"
+                      @keyup.space="$router.push(importLocation)"
                     >
                       {{ t('cluster.importAction') }}
                     </router-link>
@@ -599,6 +611,9 @@ export default defineComponent({
                       :to="createLocation"
                       class="btn btn-sm role-primary"
                       data-testid="cluster-create-button"
+                      role="button"
+                      :aria-label="t('generic.create')"
+                      @keyup.space="$router.push(createLocation)"
                     >
                       {{ t('generic.create') }}
                     </router-link>
@@ -614,6 +629,8 @@ export default defineComponent({
                         <router-link
                           v-if="row.mgmt.isReady && !row.hasError"
                           :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
+                          role="link"
+                          :aria-label="row.nameDisplay"
                         >
                           {{ row.nameDisplay }}
                         </router-link>
@@ -687,6 +704,10 @@ export default defineComponent({
 </template>
 
 <style lang='scss' scoped>
+  .banner-link:focus-visible {
+    @include focus-outline;
+  }
+
   .home-panels {
     display: flex;
     align-items: stretch;

package/pages/support/index.vue

@@ -7,7 +7,7 @@ import { getVendor } from '@shell/config/private-label';
 import { SETTING } from '@shell/config/settings';
 import { addParam } from '@shell/utils/url';
 import { isRancherPrime } from '@shell/config/version';
-import { hasCspAdapter } from 'mixins/brand';
+import { hasCspAdapter } from '@shell/mixins/brand';
 import TabTitle from '@shell/components/TabTitle';
 
 export default {

package/plugins/floating-vue.js

@@ -1 +1 @@
-export const floatingVueOptions = { themes: { tooltip: { html: true } } };
+export const floatingVueOptions = { themes: { tooltip: { html: true, triggers: ['hover', 'touch'] } } };

package/plugins/steve/steve-pagination-utils.ts

@@ -5,9 +5,16 @@ import Namespace from '@shell/models/namespace';
 import { uniq } from '@shell/utils/array';
 import {
   CAPI,
-  CONFIG_MAP, MANAGEMENT, NAMESPACE, NODE, POD
+  CATALOG,
+  CONFIG_MAP, MANAGEMENT, EVENT, NAMESPACE, NODE, POD, PVC,
+  PV,
+  STORAGE_CLASS,
+  SERVICE,
+  INGRESS,
+  WORKLOAD_TYPES,
+  HPA
 } from '@shell/config/types';
-import { CAPI as CAPI_LABELS } from '@shell/config/labels-annotations';
+import { CAPI as CAPI_LABELS, CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { Schema } from '@shell/plugins/steve/schema';
 
 class NamespaceProjectFilters {
@@ -133,8 +140,8 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     [MANAGEMENT.CLUSTER]: [
       { field: 'spec.internal' },
       { field: 'spec.displayName' },
-      // { field: `status.provider` }, // Pending API Support - https://github.com/rancher/rancher/issues/48256
-      // { field: `metadata.labels."${ CAPI_LABELS.PROVIDER }"` }, // Pending API Support - https://github.com/rancher/rancher/issues/48256
+      { field: `status.provider` },
+      { field: `metadata.labels."${ CAPI_LABELS.PROVIDER }"` },
 
     ],
     [CONFIG_MAP]: [
@@ -146,11 +153,71 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     [CAPI.MACHINE]: [
       { field: 'spec.clusterName' }
     ],
+    [EVENT]: [
+      { field: '_type' },
+      { field: 'reason' },
+      { field: 'involvedObject.kind' },
+      { field: 'message' },
+    ],
+    [CATALOG.CLUSTER_REPO]: [
+      { field: 'spec.gitRepo' },
+      { field: 'spec.gitBranch' },
+      { field: `metadata.annotations[clusterrepo.cattle.io/hidden]` }
+    ],
+    [CATALOG.OPERATION]: [
+      { field: 'status.action' },
+      { field: 'status.namespace' },
+      { field: 'status.releaseName' },
+    ],
     [CAPI.RANCHER_CLUSTER]: [
       { field: `metadata.labels."${ CAPI_LABELS.PROVIDER }"` },
       { field: `status.provider` },
       { field: 'status.clusterName' },
+    ],
+    [SERVICE]: [
+      { field: 'spec.type' },
+      // { field: 'spec.clusterIP' }, // Pending API support  (blocked https://github.com/rancher/rancher/issues/48473 (index fields)
+    ],
+    [INGRESS]: [
+      // { field: 'spec.rules.host' }, // Pending API support  (blocked https://github.com/rancher/rancher/issues/48473 (index fields)
+      // { field: 'spec.ingressClassName' }, // Pending API support  (blocked https://github.com/rancher/rancher/issues/48473 (index fields)
+    ],
+    [HPA]: [
+      // { field: 'spec.scaleTargetRef.name' }, // Pending API support https://github.com/rancher/rancher/issues/48473 (hpa filtering fix)
+      // { field: 'spec.minReplicas' }, // Pending API support https://github.com/rancher/rancher/issues/48473 (hpa filtering fix)
+      // { field: 'spec.maxReplicas' }, // Pending API support https://github.com/rancher/rancher/issues/48473 (hpa filtering fix)
+      // { field: 'spec.currentReplicas' }, // Pending API support https://github.com/rancher/rancher/issues/48473 (hpa filtering fix)
+    ],
+    [PVC]: [
+      { field: 'spec.volumeName' },
+    ],
+    [PV]: [
+      { field: 'status.reason' },
+      { field: 'spec.persistentVolumeReclaimPolicy' },
+    ],
+    [STORAGE_CLASS]: [
+      { field: 'provisioner' },
+      // { field: `metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS]` }, // Pending API Support - https://github.com/rancher/rancher/issues/48453
+    ],
+    [CATALOG.APP]: [
+      { field: 'spec.chart.metadata.name' }
+    ],
+    [WORKLOAD_TYPES.CRON_JOB]: [
+      { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` }
+    ],
+    [WORKLOAD_TYPES.DAEMON_SET]: [
+      { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` }
+    ],
+    [WORKLOAD_TYPES.DEPLOYMENT]: [
+      { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` }
+    ],
+    [WORKLOAD_TYPES.JOB]: [
+      { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` }
+    ],
+    [WORKLOAD_TYPES.STATEFUL_SET]: [
+      { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` }
     ]
+
   }
 
   private convertArrayPath(path: string): string {
@@ -318,18 +385,21 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     state.checked.push(field);
 
     // First check in our hardcoded list of supported filters
-    if ([
-      StevePaginationUtils.VALID_FIELDS[''], // Global
-      StevePaginationUtils.VALID_FIELDS[schema.id], // Type specific
-    ].find((fields) => fields?.find((f) => {
-      if (f.startsWith) {
-        if (field.startsWith(f.field)) {
-          return true;
+    if (
+      process.env.NODE_ENV === 'dev' &&
+      [
+        StevePaginationUtils.VALID_FIELDS[''], // Global
+        StevePaginationUtils.VALID_FIELDS[schema.id], // Type specific
+      ].find((fields) => fields?.find((f) => {
+        if (f.startsWith) {
+          if (field.startsWith(f.field)) {
+            return true;
+          }
+        } else {
+          return field === f.field;
         }
-      } else {
-        return field === f.field;
-      }
-    }))) {
+      }))
+    ) {
       return;
     }
 

package/rancher-components/Banner/Banner.vue

@@ -67,6 +67,7 @@ export default defineComponent({
     :class="{
       [color]: true,
     }"
+    role="banner"
   >
     <div
       v-if="icon"
@@ -102,7 +103,12 @@ export default defineComponent({
       <div
         v-if="closable"
         class="banner__content__closer"
+        tabindex="0"
+        role="button"
+        :aria-label="t('generic.close')"
         @click="$emit('close')"
+        @keyup.enter="$emit('close')"
+        @keyup.space="$emit('close')"
       >
         <i
           data-testid="banner-close"
@@ -226,6 +232,7 @@ $icon-size: 24px;
       width: $icon-size;
       line-height: $icon-size;
       text-align: center;
+      outline: none;
 
       .closer-icon {
         opacity: 0.7;
@@ -235,6 +242,11 @@ $icon-size: 24px;
           color: var(--link);
         }
       }
+
+      &:focus-visible i {
+        @include focus-outline;
+        outline-offset: 2px;
+      }
     }
 
     &.icon {

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -113,7 +113,7 @@ export default defineComponent({
     primary: {
       type:    Boolean,
       default: false
-    },
+    }
   },
 
   emits: ['update:value'],
@@ -135,7 +135,14 @@ export default defineComponent({
      */
     isChecked(): boolean {
       return this.isMulti(this.value) ? this.findTrueValues(this.value) : this.value === this.valueWhenTrue;
-    }
+    },
+
+    /**
+     * Determines if the Labeled Input should display a tooltip.
+     */
+    hasTooltip(): boolean {
+      return !!this.tooltip || !!this.tooltipKey;
+    },
   },
 
   methods: {
@@ -214,6 +221,9 @@ export default defineComponent({
   <div
     class="checkbox-outer-container"
     data-checkbox-ctrl
+    :class="{
+      'v-popper--has-tooltip': hasTooltip,
+    }"
   >
     <label
       class="checkbox-container"
@@ -227,9 +237,10 @@ export default defineComponent({
         :checked="isChecked"
         :value="valueWhenTrue"
         type="checkbox"
-        :tabindex="-1"
+        tabindex="-1"
         :name="id"
         @click.stop.prevent
+        @keyup.enter.stop.prevent
       >
       <span
         class="checkbox-custom"
@@ -240,7 +251,7 @@ export default defineComponent({
         role="checkbox"
       />
       <span
-        v-if="$slots.label || label || labelKey || tooltipKey || tooltip"
+        v-if="$slots.label || label || labelKey || hasTooltip"
         class="checkbox-label"
         :class="{ 'checkbox-primary': primary }"
       >
@@ -325,9 +336,14 @@ $fontColor: var(--input-label);
     width: 14px;
     background-color: var(--body-bg);
     border-radius: var(--border-radius);
-    transition: all 0.3s ease-out;
     border: 1px solid var(--border);
     flex-shrink: 0;
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+      border-radius: 0;
+    }
   }
 
   input {
@@ -337,6 +353,12 @@ $fontColor: var(--input-label);
     z-index: -1;
   }
 
+  input:focus-visible ~ .checkbox-custom {
+    @include focus-outline;
+    outline-offset: 2px;
+    border-radius: 0;
+  }
+
   input:checked ~ .checkbox-custom {
     background-color:var(--primary);
     -webkit-transform: rotate(0deg) scale(1);

package/rancher-components/Form/Radio/RadioButton.vue

@@ -243,14 +243,8 @@ $fontColor: var(--input-label);
     min-width: 14px;
     background-color: var(--input-bg);
     border-radius: 50%;
-    transition: all 0.3s ease-out;
     border: 1.5px solid var(--border);
     margin-top: 5px;
-
-    &:focus {
-      outline: none;
-      border-radius: 50%;
-    }
   }
 
   input {

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -145,6 +145,9 @@ export default defineComponent({
      */
     isDisabled(): boolean {
       return (this.disabled || this.isView);
+    },
+    radioGroupLabel(): string {
+      return this.labelKey ? this.t(this.labelKey) : this.label ? this.label : '';
     }
   },
 
@@ -202,9 +205,10 @@ export default defineComponent({
 
     <!-- Group -->
     <div
+      role="radiogroup"
+      :aria-label="radioGroupLabel"
       class="radio-group"
       :class="{'row':row}"
-      tabindex="0"
       @keyup.down.stop="clickNext(1)"
       @keyup.up.stop="clickNext(-1)"
     >

package/scripts/.gitlab/workflows/build-extension-catalog.gitlab-ci.yml

@@ -1,7 +1,7 @@
 variables:
-  NODE_VERSION: "v16.20.2"
+  NODE_VERSION: "v20.17.0"
   NODE_DISTRO: "node-${NODE_VERSION}-linux-x64"
-  YQ_VERSION: "v4.44.1"
+  YQ_VERSION: "v4.44.6"
   YQ_URL: "https://github.com/mikefarah/yq/releases/download/${YQ_VERSION}/yq_linux_amd64"
 
 .podman-setup: &podman-setup

package/scripts/test-plugins-build.sh

@@ -93,6 +93,19 @@ update_version_in_package_json "${SHELL_DIR}/package.json" "${SHELL_VERSION}"
 update_version_in_package_json "${BASE_DIR}/pkg/rancher-components/package.json" "${SHELL_VERSION}"
 update_version_in_package_json "${BASE_DIR}/creators/extension/package.json" "${SHELL_VERSION}"
 
+
+createTestComponent() {
+  # Add test list component to the test package
+  # Validates rancher-components imports
+
+  # NOTE - This fails if importing some components with TS imports...
+  # cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue pkg/test-pkg/list
+  # See https://github.com/rancher/dashboard/issues/12918
+
+  # Use a basic list instead
+  cp ${SHELL_DIR}/list/namespace.vue pkg/test-pkg/list
+}
+
 # Publish shell pkg (tag is needed as publish-shell is optimized to work with release-shell-pkg workflow)
 echo "Publishing Shell package to local registry"
 yarn install
@@ -133,7 +146,7 @@ if [ "${SKIP_STANDALONE}" == "false" ]; then
   # Add test list component to the test package
   # Validates rancher-components imports
   mkdir -p pkg/test-pkg/list
-  cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue pkg/test-pkg/list
+  createTestComponent
 
   FORCE_COLOR=true yarn build-pkg test-pkg | cat
 
@@ -159,7 +172,7 @@ if [ "${TEST_PERSIST_BUILD}" != "true" ]; then
 fi
 
 yarn create @rancher/extension test-pkg -i
-cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue ./pkg/test-pkg/list
+createTestComponent
 FORCE_COLOR=true yarn build-pkg test-pkg | cat
 
 if [ "${TEST_PERSIST_BUILD}" != "true" ]; then
@@ -223,9 +236,11 @@ function clone_repo_test_extension_build() {
 # Don't forget to add the unit tests exception to clone_repo_test_extension_build function if a new extension has those
 clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
 clone_repo_test_extension_build "rancher" "elemental-ui" "elemental"
-clone_repo_test_extension_build "neuvector" "manager-ext" "neuvector-ui-ext"
-clone_repo_test_extension_build "rancher" "capi-ui-extension" "capi"
-clone_repo_test_extension_build "StackVista" "rancher-extension-stackstate" "observability"
-clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
+# TODO #13141: Enable neuvector tests after issues have been resolved
+# clone_repo_test_extension_build "neuvector" "manager-ext" "neuvector-ui-ext"
+# TODO: #13173: Enable capi, stackstate, and harvester after `entities` resolution has been set
+# clone_repo_test_extension_build "rancher" "capi-ui-extension" "capi"
+# clone_repo_test_extension_build "StackVista" "rancher-extension-stackstate" "observability"
+# clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
 
 echo "All done"

package/scripts/typegen.sh

@@ -40,6 +40,7 @@ ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/mixins/resource-fetch.js --declar
 # # models
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/models/namespace.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/models/ > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/models/networking.k8s.io.ingress.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/models/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/models/catalog.cattle.io.clusterrepo.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/models/ > /dev/null
 
 #./node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store
 

package/store/index.js

@@ -259,6 +259,10 @@ export const state = () => {
     $router:                 markRaw({}),
     $route:                  markRaw({}),
     $plugin:                 markRaw({}),
+    /**
+     * Cache state of side nav clusters. This avoids flickering when the user changes pages and the side nav component re-renders
+     */
+    sideNavCache:            undefined,
   };
 };
 
@@ -613,6 +617,10 @@ export const getters = {
     return `${ base }/latest`;
   },
 
+  sideNavCache(state) {
+    return state.sideNavCache;
+  },
+
   ...gcGetters
 };
 
@@ -751,6 +759,10 @@ export const mutations = {
 
   setPlugin(state, pluginDefinition) {
     state.$plugin = markRaw(pluginDefinition || {});
+  },
+
+  setSideNavCache(state, sideNavCache) {
+    state.sideNavCache = sideNavCache;
   }
 };
 
@@ -1270,5 +1282,9 @@ export const actions = {
     });
   },
 
+  setSideNavCache({ commit }, sideNavCache) {
+    commit('setSideNavCache', sideNavCache);
+  },
+
   ...gcActions
 };