@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.3

package/pages/c/_cluster/fleet/index.vue

@@ -2,7 +2,12 @@
 import { mapState } from 'vuex';
 import { FLEET } from '@shell/config/types';
 import { WORKSPACE } from '@shell/store/prefs';
-import { STATES_ENUM, STATES, getStateLabel } from '@shell/plugins/dashboard-store/resource-class';
+import {
+  getStateLabel,
+  primaryDisplayStatusFromCount,
+  STATES,
+  STATES_ENUM,
+} from '@shell/plugins/dashboard-store/resource-class';
 import Loading from '@shell/components/Loading';
 import CollapsibleCard from '@shell/components/CollapsibleCard.vue';
 import ResourceTable from '@shell/components/ResourceTable';
@@ -37,10 +42,15 @@ export default {
         inStoreType: 'management',
         type:        FLEET.CLUSTER_GROUP
       },
+      allBundleDeployments: {
+        inStoreType: 'management',
+        type:        FLEET.BUNDLE_DEPLOYMENT,
+      },
       allBundles: {
         inStoreType: 'management',
         type:        FLEET.BUNDLE,
         opt:         { excludeFields: ['metadata.managedFields', 'spec.resources'] },
+        skipWait:    true,
       },
       gitRepos: {
         inStoreType: 'management',
@@ -98,7 +108,6 @@ export default {
         }
       ],
       schema:              {},
-      allBundles:          [],
       gitRepos:            [],
       fleetWorkspacesData: [],
       isCollapsed:         {},
@@ -138,14 +147,24 @@ export default {
       });
     },
     workspacesData() {
-      return this.fleetWorkspaces.filter((ws) => ws.repos && ws.repos.length);
+      return this.fleetWorkspaces.filter((ws) => ws.counts.gitRepos > 0);
     },
     emptyWorkspaces() {
-      return this.fleetWorkspaces.filter((ws) => !ws.repos || !ws.repos.length);
+      return this.fleetWorkspaces.filter((ws) => ws.counts.gitRepos === 0);
     },
     areAllCardsExpanded() {
       return Object.keys(this.isCollapsed).every((key) => !this.isCollapsed[key]);
-    }
+    },
+    gitReposCounts() {
+      return this.gitRepos.reduce((prev, gitRepo) => {
+        prev[gitRepo.id] = {
+          bundles:   gitRepo.allBundlesStatuses,
+          resources: gitRepo.allResourceStatuses,
+        };
+
+        return prev;
+      }, {});
+    },
   },
   methods: {
     setWorkspaceFilterAndLinkToGitRepo(value) {
@@ -160,108 +179,71 @@ export default {
         },
       });
     },
-    getStatusInfo(area, row) {
+    getStatusInfo(area, row, rowCounts) {
       const defaultStatusInfo = {
         badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-default`,
         icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
       };
 
       // classes are defined in the themes SASS files...
-      return this.getBadgeClassAndIcon(area, row) || defaultStatusInfo;
+      return this.getBadgeClassAndIcon(area, row, rowCounts) || defaultStatusInfo;
     },
-    getBadgeClassAndIcon(area, row) {
-      let group;
-
+    getBadgeClassAndIcon(area, row, rowCounts) {
       if (!this.admissableAreas.includes(area)) {
         return false;
       }
 
+      let group;
+
       if (area === 'clusters') {
-        if (row.clusterInfo?.ready === row.clusterInfo?.total && row.clusterInfo?.ready) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
-          };
-        }
-      } else if (area === 'bundles') {
-        group = row.bundles;
-      } else if (area === 'resources') {
-        group = row.status?.resources;
-      }
+        const clusterInfo = row.clusterInfo;
+        const state = clusterInfo.ready === clusterInfo.total ? STATES_ENUM.ACTIVE : STATES_ENUM.NOT_READY;
 
-      if (group?.length && group?.every((item) => item.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
-        return {
-          badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-          icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-        };
-      }
-      if (group?.length && group?.some((item) => item.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
         return {
-          badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-          icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
+          badgeClass: `${ STATES[state].color } badge-class-area-${ area }`,
+          icon:       STATES[state].compoundIcon
         };
+      } else if (area === 'bundles') {
+        group = rowCounts[row.id].bundles;
+      } else if (area === 'resources') {
+        group = rowCounts[row.id].resources;
+      } else {
+        // unreachable
+        return false;
       }
-      if (group?.length && group?.some((item) => item.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
+
+      if (group.total === group.states.ready) {
         return {
-          badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
+          badgeClass: STATES[STATES_ENUM.ACTIVE].color,
+          icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon,
         };
       }
-
-      if (area === 'resources') {
-        if (row.status?.resourceCounts?.desiredReady === row.status?.resourceCounts?.ready && row.status?.resourceCounts?.desiredReady) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
-          };
-        }
-      }
+      const state = primaryDisplayStatusFromCount(group.states);
 
       return {
-        badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-${ area }`,
-        icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
+        badgeClass: STATES[state].color ? STATES[state].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+        icon:       STATES[state].compoundIcon ? STATES[state].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
       };
     },
-    getTooltipInfo(area, row) {
-      let group;
-
+    getTooltipInfo(area, row, rowCounts) {
       if (!this.admissableAreas.includes(area)) {
         return {};
       }
 
-      if (area === 'clusters') {
-        group = '';
-      } else if (area === 'bundles') {
-        group = row.bundles;
+      if (area === 'bundles') {
+        return this.generateTooltipData(rowCounts[row.id].bundles.states);
       } else if (area === 'resources') {
-        group = row.status?.resources;
-      }
-
-      if (group?.length) {
-        return this.generateTooltipData(group);
+        return this.generateTooltipData(rowCounts[row.id].resources.states);
       }
 
       return '';
     },
-    generateTooltipData(data) {
-      const infoObj = {};
-      let tooltipData = '';
-
-      data.forEach((item) => {
-        if (!infoObj[item.state]) {
-          infoObj[item.state] = 0;
-        }
-
-        infoObj[item.state]++;
-      });
-
-      Object.keys(infoObj).forEach((key) => {
-        tooltipData += `${ getStateLabel(key) }: ${ infoObj[key] }<br>`;
-      });
-
-      return tooltipData;
+    generateTooltipData(infoObj) {
+      return Object.keys(infoObj)
+        .filter((key) => infoObj[key] > 0) // filter zero values
+        .map((key) => `${ getStateLabel(key) }: ${ infoObj[key] }<br>`).join('');
     },
-    getBadgeValue(area, row) {
+    getBadgeValue(area, row, rowCounts) {
       let value;
 
       if (!this.admissableAreas.includes(area)) {
@@ -269,11 +251,15 @@ export default {
       }
 
       if (area === 'clusters') {
-        return `${ row.clusterInfo.ready }/${ row.clusterInfo.total }`;
+        value = `${ row.clusterInfo.ready }/${ row.clusterInfo.total }`;
       } else if (area === 'bundles') {
-        value = xOfy(row.bundlesReady?.length, row.bundles?.length);
+        const bundles = rowCounts[row.id].bundles;
+
+        value = xOfy(bundles.states.ready || 0, bundles.total);
       } else if (area === 'resources') {
-        value = xOfy(row.status?.resourceCounts?.ready, row.status?.resourceCounts?.desiredReady);
+        const resources = rowCounts[row.id].resources;
+
+        value = xOfy(resources.states.ready || 0, resources.total);
       }
 
       return value;
@@ -413,10 +399,10 @@ export default {
               <CompoundStatusBadge
                 v-else
                 data-testid="clusters-ready"
-                :tooltip-text="getTooltipInfo('clusters', row)"
-                :badge-class="getStatusInfo('clusters', row).badgeClass"
-                :icon="getStatusInfo('clusters', row).icon"
-                :value="getBadgeValue('clusters', row)"
+                :tooltip-text="getTooltipInfo('clusters', row, gitReposCounts)"
+                :badge-class="getStatusInfo('clusters', row, gitReposCounts).badgeClass"
+                :icon="getStatusInfo('clusters', row, gitReposCounts).icon"
+                :value="getBadgeValue('clusters', row, gitReposCounts)"
               />
             </template>
             <template #cell:bundlesReady="{row}">
@@ -424,19 +410,19 @@ export default {
               <CompoundStatusBadge
                 v-else
                 data-testid="bundles-ready"
-                :tooltip-text="getTooltipInfo('bundles', row)"
-                :badge-class="getStatusInfo('bundles', row).badgeClass"
-                :icon="getStatusInfo('bundles', row).icon"
-                :value="getBadgeValue('bundles', row)"
+                :tooltip-text="getTooltipInfo('bundles', row, gitReposCounts)"
+                :badge-class="getStatusInfo('bundles', row, gitReposCounts).badgeClass"
+                :icon="getStatusInfo('bundles', row, gitReposCounts).icon"
+                :value="getBadgeValue('bundles', row, gitReposCounts)"
               />
             </template>
             <template #cell:resourcesReady="{row}">
               <CompoundStatusBadge
                 data-testid="resources-ready"
-                :tooltip-text="getTooltipInfo('resources', row)"
-                :badge-class="getStatusInfo('resources', row).badgeClass"
-                :icon="getStatusInfo('resources', row).icon"
-                :value="getBadgeValue('resources', row)"
+                :tooltip-text="getTooltipInfo('resources', row, gitReposCounts)"
+                :badge-class="getStatusInfo('resources', row, gitReposCounts).badgeClass"
+                :icon="getStatusInfo('resources', row, gitReposCounts).icon"
+                :value="getBadgeValue('resources', row, gitReposCounts)"
               />
             </template>
 

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

@@ -10,7 +10,7 @@ import KeyValue from '@shell/components/form/KeyValue';
 import { mapGetters } from 'vuex';
 import { isRancherPrime } from '@shell/config/version';
 import DefaultLinksEditor from './DefaultLinksEditor';
-import { CUSTOM_LINKS_COLLECTIVE_VERSION, fetchLinks } from '@shell/config/home-links';
+import { CUSTOM_LINKS_APP_CO_VERSION, fetchLinks } from '@shell/config/home-links';
 import TabTitle from '@shell/components/TabTitle';
 
 export default {
@@ -47,7 +47,7 @@ export default {
 
     allValues() {
       return {
-        version:  CUSTOM_LINKS_COLLECTIVE_VERSION,
+        version:  CUSTOM_LINKS_APP_CO_VERSION,
         defaults: this.value.defaults.filter((obj) => obj.enabled).map((obj) => obj.key),
         custom:   this.value.custom
       };

package/pages/diagnostic.vue

@@ -346,21 +346,23 @@ export default {
           class="full-width"
         >
           <thead @click="toggleTable(cluster.id)">
-            <th colspan="4">
-              <div class="cluster-row">
-                <span>Cluster: <b>{{ cluster.name }}</b></span>
-                <span>Namespace: <b>{{ cluster.namespace }}</b></span>
-                <span>Total Resources: <b>{{ sumResourceCount(cluster.counts) }}</b></span>
-                <span>Nodes: <b>{{ nodeCount(cluster.counts) }}</b></span>
-                <i
-                  class="icon"
-                  :class="{
-                    'icon-chevron-down': !cluster.isTableVisible,
-                    'icon-chevron-up': cluster.isTableVisible
-                  }"
-                />
-              </div>
-            </th>
+            <tr>
+              <th colspan="4">
+                <div class="cluster-row">
+                  <span>Cluster: <b>{{ cluster.name }}</b></span>
+                  <span>Namespace: <b>{{ cluster.namespace }}</b></span>
+                  <span>Total Resources: <b>{{ sumResourceCount(cluster.counts) }}</b></span>
+                  <span>Nodes: <b>{{ nodeCount(cluster.counts) }}</b></span>
+                  <i
+                    class="icon"
+                    :class="{
+                      'icon-chevron-down': !cluster.isTableVisible,
+                      'icon-chevron-up': cluster.isTableVisible
+                    }"
+                  />
+                </div>
+              </th>
+            </tr>
           </thead>
           <tbody v-show="cluster.isTableVisible">
             <tr>

package/pages/home.vue

@@ -4,7 +4,7 @@ import { mapPref, AFTER_LOGIN_ROUTE, READ_WHATS_NEW, HIDE_HOME_PAGE_CARDS } from
 import { Banner } from '@components/Banner';
 import BannerGraphic from '@shell/components/BannerGraphic.vue';
 import IndentedPanel from '@shell/components/IndentedPanel.vue';
-import PaginatedResourceTable, { FetchPageSecondaryResourcesOpts, FetchSecondaryResourcesOpts } from '@shell/components/PaginatedResourceTable.vue';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
 import { BadgeState } from '@components/BadgeState';
 import CommunityLinks from '@shell/components/CommunityLinks.vue';
 import SingleClusterInfo from '@shell/components/SingleClusterInfo.vue';
@@ -23,11 +23,12 @@ import { filterHiddenLocalCluster, filterOnlyKubernetesClusters, paginationFilte
 import TabTitle from '@shell/components/TabTitle.vue';
 import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
 
-import { RESET_CARDS_ACTION, SET_LOGIN_ACTION } from '@shell/config/page-actions';
+import { RESET_CARDS_ACTION, SET_LOGIN_ACTION, SHOW_HIDE_BANNER_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 '@shell/utils/array';
+import { PagTableFetchPageSecondaryResourcesOpts, PagTableFetchSecondaryResourcesOpts, PagTableFetchSecondaryResourcesReturns } from '@shell/types/components/paginatedResourceTable';
 
 export default defineComponent({
   name:       'Home',
@@ -56,6 +57,10 @@ export default defineComponent({
           action:   SET_LOGIN_ACTION
         },
         { separator: true },
+        {
+          labelKey: 'nav.header.showHideBanner',
+          action:   SHOW_HIDE_BANNER_ACTION
+        },
         {
           labelKey: 'nav.header.restoreCards',
           action:   RESET_CARDS_ACTION
@@ -238,9 +243,9 @@ export default defineComponent({
 
   methods: {
     /**
-     * Of type FetchSecondaryResources
+     * Of type PagTableFetchSecondaryResources
      */
-    fetchSecondaryResources(opts: FetchSecondaryResourcesOpts): Promise<any> {
+    fetchSecondaryResources(opts: PagTableFetchSecondaryResourcesOpts): PagTableFetchSecondaryResourcesReturns {
       if (opts.canPaginate) {
         return Promise.resolve({});
       }
@@ -271,7 +276,7 @@ export default defineComponent({
 
     async fetchPageSecondaryResources({
       canPaginate, force, page, pagResult
-    }: FetchPageSecondaryResourcesOpts) {
+    }: PagTableFetchPageSecondaryResourcesOpts) {
       if (!canPaginate || !page?.length) {
         this.clusterCount = 0;
 
@@ -367,6 +372,10 @@ export default defineComponent({
         this.resetCards();
         break;
 
+      case SHOW_HIDE_BANNER_ACTION:
+        this.toggleBanner();
+        break;
+
       case SET_LOGIN_ACTION:
         this.afterLoginRoute = 'home';
         break;
@@ -406,10 +415,27 @@ export default defineComponent({
     },
 
     async resetCards() {
-      await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value: {} });
+      const value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS) || {};
+
+      delete value.setLoginPage;
+
+      await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
+
       await this.$store.dispatch('prefs/set', { key: READ_WHATS_NEW, value: '' });
     },
 
+    async toggleBanner() {
+      const value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS) || {};
+
+      if (value.welcomeBanner) {
+        delete value.welcomeBanner;
+      } else {
+        value.welcomeBanner = true;
+      }
+
+      await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
+    },
+
     async closeSetLoginBanner(retry = 0) {
       let value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS);
 

package/plugins/clean-html.js

@@ -30,6 +30,8 @@ const ALLOWED_TAGS = [
   'blockquote'
 ];
 
+let linkInterceptors = [];
+
 // Allow 'A' tags to keep the target=_blank attribute if they have it
 DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
   if (node.tagName === 'A' && data.attrName === 'target' && data.attrValue === '_blank') {
@@ -46,8 +48,56 @@ DOMPurify.addHook('afterSanitizeAttributes', (node) => {
 
     node.setAttribute('rel', combined.join(' '));
   }
+
+  if (node.tagName === 'A' && linkInterceptors.length) {
+    let link = node.href;
+
+    // Allow each interceptor to modify the link href
+    link = processLink(link);
+
+    // If the link is different from the original update the href
+    if (link !== node.href) {
+      node.href = link;
+    }
+  }
 });
 
 export const purifyHTML = (value, options = { ALLOWED_TAGS }) => {
   return DOMPurify.sanitize(value, options);
 };
+
+// Link Interceptors are typically used to allow different doc links to be used
+
+export function addLinkInterceptor(fn, name) {
+  // Check the arg is not undefined and is a function
+  if (fn && typeof fn === 'function') {
+    linkInterceptors.push(fn);
+  } else {
+    if (name) {
+      console.error(`Invalid link interceptor function for ${ name }`); // eslint-disable-line no-console
+    } else {
+      console.error('Invalid link interceptor function'); // eslint-disable-line no-console
+    }
+  }
+}
+
+export function removeLinkInterceptor(fn) {
+  linkInterceptors = linkInterceptors.filter((item) => item !== fn);
+}
+
+/**
+ * Process a link through all of the link interceptors
+ */
+export function processLink(link) {
+  // Allow each interceptor to modify the link href
+  for (let i = 0; i < linkInterceptors.length; i++) {
+    const updated = linkInterceptors[i](link);
+
+    // If a value if returned, use that in place of the original value
+    if (updated) {
+      link = updated;
+    }
+  }
+
+  return link;
+}

package/plugins/dashboard-store/resource-class.js

@@ -604,6 +604,10 @@ export default class Resource {
     return this.$ctx.rootState;
   }
 
+  get '$plugin'() {
+    return this.$ctx.rootState?.$plugin;
+  }
+
   get customValidationRules() {
     return [
       /**

package/plugins/plugin.js

@@ -1,4 +1,4 @@
-// This plugin loads any UI Plugins at app load time
+// This plugin loads any UI Extensions at app load time
 import { allHashSettled } from '@shell/utils/promise';
 import { shouldNotLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 import { getKubeVersionData, getVersionData } from '@shell/config/version';
@@ -11,14 +11,14 @@ export default async function(context) {
 
   const hash = {};
 
-  // Provide a mechanism to load the UI without the plugins loaded - in case there is a problem
+  // Provide a mechanism to load the UI without the extensions loaded - in case there is a problem
   let loadPlugins = true;
 
   const queryKeys = Object.keys(context.route?.query || {}).map((q) => q.toLowerCase());
 
   if (queryKeys.includes('safemode')) {
     loadPlugins = false;
-    console.warn('Safe Mode - plugins will not be loaded'); // eslint-disable-line no-console
+    console.warn('Safe Mode - extensions will not be loaded'); // eslint-disable-line no-console
     setTimeout(() => {
       context.store.dispatch('growl/success', {
         title:   context.store.getters['i18n/t']('plugins.safeMode.title'),
@@ -27,62 +27,67 @@ export default async function(context) {
     }, 1000);
   }
 
+  const fetches = { versions: versions.fetch(context) };
+
+  // If we are loading extensions then add the API fetch for the list of extensions to the fetches we will make
   if (loadPlugins) {
-    // Fetch list of installed plugins from endpoint
-    try {
-      const res = await allHashSettled({
-        versions: versions.fetch(context),
-        plugins:  context.store.dispatch('management/request', {
-          url:                  `${ UI_PLUGIN_BASE_URL }`,
-          method:               'GET',
-          headers:              { accept: 'application/json' },
-          redirectUnauthorized: false,
-        })
-      });
-
-      if (res.plugins.status === 'rejected') {
-        throw new Error(res.reason);
-      }
+    fetches.plugins = context.store.dispatch('management/request', {
+      url:                  `${ UI_PLUGIN_BASE_URL }`,
+      method:               'GET',
+      headers:              { accept: 'application/json' },
+      redirectUnauthorized: false,
+    });
+  }
 
-      const kubeVersion = getKubeVersionData()?.gitVersion;
-      const rancherVersion = getVersionData().Version;
-
-      const plugins = res.plugins.value;
-      const entries = plugins.entries || plugins.Entries || {};
-
-      Object.values(entries).forEach((plugin) => {
-        const shouldNotLoad = shouldNotLoadPlugin(plugin, { rancherVersion, kubeVersion }, context.store.getters['uiplugins/plugins'] || []); // Error key string or boolean
-
-        if (!shouldNotLoad) {
-          hash[plugin.name] = context.$plugin.loadPluginAsync(plugin);
-        } else {
-          context.store.dispatch('uiplugins/setError', { name: plugin.name, error: shouldNotLoad });
-        }
-      });
-    } catch (e) {
-      if (e?.code === 404) {
-        // Not found, so extensions operator probably not installed
-        console.log('Could not load UI Extensions list (Extensions Operator may not be installed)'); // eslint-disable-line no-console
-      } else {
-        console.error('Could not load UI Extensions list', e); // eslint-disable-line no-console
-      }
+  // Fetch list of installed extensions from the extensions endpoint if needed and the version information
+  try {
+    const res = await allHashSettled(fetches);
+
+    // Initialize the built-in extensions now - this is now done here so that built-in extensions get the same, correct environment data (version etc)
+    context.$plugin.loadBuiltinExtensions();
+
+    if (res.plugins?.status === 'rejected') {
+      throw new Error(res.reason);
     }
 
-    // Load all of the plugins
-    const pluginLoads = await allHashSettled(hash);
+    const kubeVersion = getKubeVersionData()?.gitVersion;
+    const rancherVersion = getVersionData().Version;
 
-    // Some pluigns may have failed to load - store this
-    Object.keys(pluginLoads).forEach((name) => {
-      const res = pluginLoads[name];
+    const plugins = res.plugins?.value || {};
+    const entries = plugins.entries || plugins.Entries || {};
 
-      if (res?.status === 'rejected') {
-        console.error(`Failed to load plugin: ${ name }. `, res.reason || 'Unknown reason'); // eslint-disable-line no-console
+    Object.values(entries).forEach((plugin) => {
+      const shouldNotLoad = shouldNotLoadPlugin(plugin, { rancherVersion, kubeVersion }, context.store.getters['uiplugins/plugins'] || []); // Error key string or boolean
 
-        // Record error in the uiplugins store, so that we can show this to the user
-        context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' }); // i18n-uses plugins.error.load
+      if (!shouldNotLoad) {
+        hash[plugin.name] = context.$plugin.loadPluginAsync(plugin);
+      } else {
+        context.store.dispatch('uiplugins/setError', { name: plugin.name, error: shouldNotLoad });
       }
     });
+  } catch (e) {
+    if (e?.code === 404) {
+      // Not found, so extensions operator probably not installed
+      console.log('Could not load UI Extensions list (Extensions Operator may not be installed)'); // eslint-disable-line no-console
+    } else {
+      console.error('Could not load UI Extensions list', e); // eslint-disable-line no-console
+    }
   }
 
+  // Load all of the extensions
+  const pluginLoads = await allHashSettled(hash);
+
+  // Some extensions may have failed to load - store this
+  Object.keys(pluginLoads).forEach((name) => {
+    const res = pluginLoads[name];
+
+    if (res?.status === 'rejected') {
+      console.error(`Failed to load extension: ${ name }. `, res.reason || 'Unknown reason'); // eslint-disable-line no-console
+
+      // Record error in the uiplugins store, so that we can show this to the user
+      context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' }); // i18n-uses plugins.error.load
+    }
+  });
+
   return true;
 }

package/plugins/steve/mutations.js

@@ -31,7 +31,7 @@ function registerNamespace(state, namespace) {
 }
 
 /**
- * update the podsByNamespace cache with new or changed pods
+ * update the podsByNamespace cache with new or changed pods.
  */
 function updatePodsByNamespaceCache(state, ctx, pods, loadAll) {
   if (loadAll) {

package/plugins/steve/steve-class.js

@@ -2,6 +2,7 @@ import { DESCRIPTION } from '@shell/config/labels-annotations';
 import HybridModel from './hybrid-class';
 import { NEVER_ADD } from '@shell/utils/create-yaml';
 import { deleteProperty } from '@shell/utils/object';
+import { EXT_IDS } from '@shell/core/plugin';
 
 // Some fields that are removed for YAML (NEVER_ADD) are required via API
 const STEVE_ADD = [
@@ -41,6 +42,13 @@ export default class SteveModel extends HybridModel {
     this._description = value;
   }
 
+  /**
+   * Get all model extensions for this model
+   */
+  get modelExtensions() {
+    return this.$plugin.getDynamic(EXT_IDS.MODEL_EXTENSION, this.type) || [];
+  }
+
   cleanForSave(data, forNew) {
     const val = super.cleanForSave(data);