@rancher/shell 3.0.8-rc.8 → 3.0.8

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

@@ -14,10 +14,8 @@ import ActionMenu from '@shell/components/ActionMenuShell';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import IconMessage from '@shell/components/IconMessage.vue';
-import { BadgeState } from '@components/BadgeState';
 import PluginInfoPanel from './PluginInfoPanel.vue';
 import SetupUIPlugins from './SetupUIPlugins.vue';
-import CatalogList from './CatalogList/index.vue';
 import Banner from '@components/Banner/Banner.vue';
 import {
   isUIPlugin,
@@ -48,9 +46,7 @@ const TABS_VALUES = {
 export default {
   components: {
     ActionMenu,
-    BadgeState,
     IconMessage,
-    CatalogList,
     Banner,
     PluginInfoPanel,
     Tab,
@@ -79,8 +75,7 @@ export default {
       hasFeatureFlag:                 true,
       defaultIcon:                    require('~shell/assets/images/generic-plugin.svg'),
       reloadRequired:                 false,
-      rancherVersion:                 null,
-      showCatalogList:                false
+      rancherVersion:                 null
     };
   },
 
@@ -175,14 +170,11 @@ export default {
         enabled: true
       });
 
-      // Only show Manage Extension Catalogs when on main charts view
-      if (!this.showCatalogList) {
-        menuActions.push({
-          action:  'manageExtensionView',
-          label:   this.t('plugins.manageCatalog.label'),
-          enabled: true
-        });
-      }
+      menuActions.push({
+        action:  'manageExtensionView',
+        label:   this.t('plugins.manageCatalog.label'),
+        enabled: true
+      });
 
       // Only show Developer Load action if the user has this enabled in preferences
       if (this.pluginDeveloper) {
@@ -204,7 +196,7 @@ export default {
       switch (this.activeTab) {
       case TABS_VALUES.INSTALLED:
         // We never show built-in extensions as installed - installed are just the ones the user has installed
-        return all.filter((p) => !p.builtin && (!!p.installed || !!p.installing) && p.installableVersions?.length > 0);
+        return all.filter((p) => !p.builtin && (!!p.installed || !!p.installing));
       case TABS_VALUES.AVAILABLE:
         return all.filter((p) => !p.installed);
       case TABS_VALUES.BUILTIN:
@@ -284,6 +276,7 @@ export default {
         const latestNotCompatible = item.versions.find((version) => !version.isVersionCompatible);
 
         if (latestCompatible) {
+          item.primeOnly = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true';
           item.experimental = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
           item.certified = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
 
@@ -292,6 +285,7 @@ export default {
           item.icon = latestCompatible.icon;
           item.created = latestCompatible.created;
         } else {
+          item.primeOnly = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.PRIME_ONLY, 'true');
           item.experimental = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true');
           item.certified = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER);
 
@@ -349,6 +343,7 @@ export default {
             installed:           true,
             installedVersion:    p.metadata?.version,
             builtin:             !!p.builtin,
+            primeOnly:           rancher?.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true',
             experimental:        rancher?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
             certified:           rancher?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER
           };
@@ -381,6 +376,7 @@ export default {
             const installedVersion = (chart.installableVersions || []).find((v) => (v.appVersion ?? v.version) === p.version);
 
             if (installedVersion) {
+              chart.primeOnly = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true';
               chart.experimental = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
               chart.certified = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
             }
@@ -397,6 +393,7 @@ export default {
             versions:            [],
             displayVersion:      p.version,
             displayVersionLabel: p.version || '-',
+            isDeveloper:         p.isDeveloper,
             installed:           true,
             installing:          false,
             builtin:             false,
@@ -593,37 +590,6 @@ export default {
       });
     },
 
-    showCatalogLoadDialog() {
-      this.$store.dispatch('management/promptModal', {
-        component:           'ExtensionCatalogInstallDialog',
-        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
-        componentProps:      {
-          refresh: () => {
-            this.reloadRequired = true;
-          },
-          closed: (res) => {
-            this.didInstall(res);
-          }
-        }
-      });
-    },
-
-    showCatalogUninstallDialog(ev) {
-      this.$store.dispatch('management/promptModal', {
-        component:           'ExtensionCatalogUninstallDialog',
-        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
-        componentProps:      {
-          catalog: ev,
-          refresh: () => {
-            this.reloadRequired = true;
-          },
-          closed: (res) => {
-            this.didUninstall(res);
-          }
-        }
-      });
-    },
-
     showInstallDialog(plugin, action, ev, initialVersion = null) {
       ev?.target?.blur();
       ev?.preventDefault?.();
@@ -731,7 +697,10 @@ export default {
     },
 
     manageExtensionView() {
-      this.showCatalogList = !this.showCatalogList;
+      this.$router.push({
+        name:   'c-cluster-uiplugins-catalogs',
+        params: { cluster: this.$route.params.cluster }
+      });
     },
 
     updateAddReposSetting() {
@@ -844,11 +813,20 @@ export default {
     getFooterItems(plugin) {
       const labels = [];
 
+      // "developer load" tag
+      if (plugin.isDeveloper) {
+        labels.push(this.t('plugins.labels.isDeveloper'));
+      }
+
+      if (plugin.primeOnly) {
+        labels.push(this.t('plugins.labels.primeOnly'));
+      }
+
       if (plugin.builtin) {
         labels.push(this.t('plugins.labels.builtin'));
       }
 
-      if (!plugin.builtin && !plugin.certified) {
+      if (!plugin.builtin && !plugin.certified && !plugin.isDeveloper) {
         labels.push(this.t('plugins.labels.third-party'));
       }
 
@@ -908,39 +886,12 @@ export default {
 <template>
   <div id="extensions-main-page">
     <div class="plugin-header">
-      <!-- catalog view header -->
-      <template v-if="showCatalogList">
-        <div class="catalog-title">
-          <h2
-            class="mb-0 mr-10"
-            data-testid="extensions-catalog-title"
-          >
-            <a
-              class="link"
-              role="link"
-              tabindex="0"
-              :aria-label="t('plugins.manageCatalog.title')"
-              @click="manageExtensionView()"
-            >
-              {{ t('plugins.manageCatalog.title') }}:
-            </a>
-            <t k="plugins.manageCatalog.subtitle" />
-          </h2>
-          <BadgeState
-            color="bg-warning"
-            :label="t('generic.experimental')"
-            class="badge"
-          />
-        </div>
-      </template>
       <!-- normal extensions view header -->
-      <template v-else>
-        <h2 data-testid="extensions-page-title">
-          <TabTitle breadcrumb="vendor-only">
-            {{ t('plugins.title') }}
-          </TabTitle>
-        </h2>
-      </template>
+      <h2 data-testid="extensions-page-title">
+        <TabTitle breadcrumb="vendor-only">
+          {{ t('plugins.title') }}
+        </TabTitle>
+      </h2>
       <div class="actions-container">
         <!-- extensions reload toast/notification -->
         <div
@@ -1005,112 +956,103 @@ export default {
       />
     </div>
     <div v-else>
-      <!-- Extension Catalog list view -->
-      <template v-if="showCatalogList">
-        <CatalogList
-          @showCatalogLoadDialog="showCatalogLoadDialog"
-          @showCatalogUninstallDialog="showCatalogUninstallDialog($event)"
-        />
-      </template>
-      <template v-else>
-        <Banner
-          v-if="!loading && showAddReposBanner"
-          color="warning"
-          class="add-repos-banner mb-20"
-          data-testid="extensions-new-repos-banner"
+      <Banner
+        v-if="!loading && showAddReposBanner"
+        color="warning"
+        class="add-repos-banner mb-20"
+        data-testid="extensions-new-repos-banner"
+      >
+        <span>{{ t('plugins.addRepos.banner', {}, true) }}</span>
+        <button
+          class="ml-10 btn btn-sm role-primary"
+          data-testid="extensions-new-repos-banner-action-btn"
+          role="button"
+          :aria-label="t('plugins.addRepos.bannerBtn')"
+          @click="showAddExtensionReposDialog()"
         >
-          <span>{{ t('plugins.addRepos.banner', {}, true) }}</span>
-          <button
-            class="ml-10 btn btn-sm role-primary"
-            data-testid="extensions-new-repos-banner-action-btn"
-            role="button"
-            :aria-label="t('plugins.addRepos.bannerBtn')"
-            @click="showAddExtensionReposDialog()"
+          {{ t('plugins.addRepos.bannerBtn') }}
+        </button>
+      </Banner>
+
+      <Tabbed
+        v-if="!loading"
+        ref="tabs"
+        :tabs-only="true"
+        data-testid="extension-tabs"
+        @changed="tabChanged"
+      >
+        <Tab
+          v-if="installed.length"
+          :name="TABS_VALUES.INSTALLED"
+          data-testid="extension-tab-installed"
+          label-key="plugins.tabs.installed"
+          :badge="installed.length"
+          :weight="20"
+        />
+        <Tab
+          :name="TABS_VALUES.AVAILABLE"
+          data-testid="extension-tab-available"
+          label-key="plugins.tabs.available"
+          :weight="19"
+        />
+        <Tab
+          v-if="pluginDeveloper"
+          :name="TABS_VALUES.BUILTIN"
+          label-key="plugins.tabs.builtin"
+          :weight="17"
+        />
+      </Tabbed>
+      <div
+        v-if="loading"
+        class="data-loading"
+      >
+        <i class="icon-spin icon icon-spinner" />
+        <t
+          k="generic.loading"
+          :raw="true"
+        />
+      </div>
+      <div
+        v-else
+        class="plugin-cards"
+        :class="{'v-margin': !list.length}"
+      >
+        <IconMessage
+          v-if="list.length === 0"
+          :vertical="true"
+          :subtle="true"
+          icon="icon-extension"
+          class="mmt-9"
+          :message="emptyMessage"
+        />
+        <template v-else>
+          <rc-item-card
+            v-for="card in pluginCards"
+            :id="card.id"
+            :key="card.id"
+            :class="{ 'single-card': pluginCards.length === 1 }"
+            :header="card.header"
+            :image="card.image"
+            :content="card.content"
+            :actions="card.actions"
+            :clickable="true"
+            @card-click="showPluginDetail(card.plugin)"
+            @uninstall="({event}) => showUninstallDialog(card.plugin, event)"
+            @upgrade="({event}) => showInstallDialog(card.plugin, 'upgrade', event)"
+            @downgrade="({event}) => showInstallDialog(card.plugin, 'downgrade', event)"
+            @install="({event}) => showInstallDialog(card.plugin, 'install', event)"
           >
-            {{ t('plugins.addRepos.bannerBtn') }}
-          </button>
-        </Banner>
-
-        <Tabbed
-          v-if="!loading"
-          ref="tabs"
-          :tabs-only="true"
-          data-testid="extension-tabs"
-          @changed="tabChanged"
-        >
-          <Tab
-            v-if="installed.length"
-            :name="TABS_VALUES.INSTALLED"
-            data-testid="extension-tab-installed"
-            label-key="plugins.tabs.installed"
-            :badge="installed.length"
-            :weight="20"
-          />
-          <Tab
-            :name="TABS_VALUES.AVAILABLE"
-            data-testid="extension-tab-available"
-            label-key="plugins.tabs.available"
-            :weight="19"
-          />
-          <Tab
-            v-if="pluginDeveloper"
-            :name="TABS_VALUES.BUILTIN"
-            label-key="plugins.tabs.builtin"
-            :weight="17"
-          />
-        </Tabbed>
-        <div
-          v-if="loading"
-          class="data-loading"
-        >
-          <i class="icon-spin icon icon-spinner" />
-          <t
-            k="generic.loading"
-            :raw="true"
-          />
-        </div>
-        <div
-          v-else
-          class="plugin-cards"
-          :class="{'v-margin': !list.length}"
-        >
-          <IconMessage
-            v-if="list.length === 0"
-            :vertical="true"
-            :subtle="true"
-            icon="icon-extension"
-            class="mmt-9"
-            :message="emptyMessage"
-          />
-          <template v-else>
-            <rc-item-card
-              v-for="card in pluginCards"
-              :id="card.id"
-              :key="card.id"
-              :class="{ 'single-card': pluginCards.length === 1 }"
-              :header="card.header"
-              :image="card.image"
-              :content="card.content"
-              :actions="card.actions"
-              :clickable="true"
-              @card-click="showPluginDetail(card.plugin)"
-              @uninstall="({event}) => showUninstallDialog(card.plugin, event)"
-              @upgrade="({event}) => showInstallDialog(card.plugin, 'upgrade', event)"
-              @downgrade="({event}) => showInstallDialog(card.plugin, 'downgrade', event)"
-              @install="({event}) => showInstallDialog(card.plugin, 'install', event)"
-            >
-              <template #item-card-sub-header>
-                <AppChartCardSubHeader
-                  :items="card.subHeaderItems"
-                />
-              </template>
-              <template #item-card-footer>
-                <AppChartCardFooter :items="card.footerItems" />
-              </template>
-            </rc-item-card>
-          </template>
-        </div>
-      </template>
+            <template #item-card-sub-header>
+              <AppChartCardSubHeader
+                :items="card.subHeaderItems"
+              />
+            </template>
+            <template #item-card-footer>
+              <AppChartCardFooter :items="card.footerItems" />
+            </template>
+          </rc-item-card>
+        </template>
+      </div>
     </div>
   </div>
 </template>

package/pkg/auto-import.js

@@ -15,7 +15,7 @@ function registerFile(file, type, pkg, f) {
   const importType = (f === 'models') ? 'require' : 'import';
   const chunkName = (f === 'l10n') ? '' : `/* webpackChunkName: "${ f }" */`;
 
-  return `  $plugin.register('${ f }', '${ type }', () => ${ importType }(${ chunkName }'${ pkg }/${ f }/${ file }'));\n`;
+  return `  $extension.register('${ f }', '${ type }', () => ${ importType }(${ chunkName }'${ pkg }/${ f }/${ file }'));\n`;
 }
 
 function register(file, pkg, f) {
@@ -29,7 +29,7 @@ function register(file, pkg, f) {
 // This ensures that the webpackChunkName is respected (require.context does not support this) - so when build as a library
 // the code splitting will be respected
 function generateTypeImport(pkg, dir) {
-  let content = 'export function importTypes($plugin) { \n';
+  let content = 'export function importTypes($extension) { \n';
 
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
@@ -77,7 +77,7 @@ function generateTypeImport(pkg, dir) {
 // and then restart the dev server for it to be picked up.
 function generateDynamicTypeImport(pkg, dir) {
   const template = fs.readFileSync(path.join(__dirname, 'import.js'), { encoding: 'utf8' });
-  let content = 'export function importTypes($plugin) { \n';
+  let content = 'export function importTypes($extension) { \n';
 
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {

package/pkg/dynamic-importer.lib.js

@@ -41,7 +41,7 @@ export function listProducts() {
   return [];
 }
 
-export function loadProduct(name, $plugin) {
+export function loadProduct(name, $extension) {
   return () => undefined;
 }
 

package/pkg/import.js

@@ -6,5 +6,5 @@ _NAME.forEach((f) => {
 
   name = name.substr(0, ext);
 
-  $plugin.register('DIR', name, () => REQUIRE(CHUNK`BASE/DIR/${ name }EXT`)); // eslint-disable-line no-undef
+  $extension.register('DIR', name, () => REQUIRE(CHUNK`BASE/DIR/${ name }EXT`)); // eslint-disable-line no-undef
 });

package/plugins/__tests__/mutations.tests.ts

@@ -0,0 +1,179 @@
+import mutations from '@shell/plugins/dashboard-store/mutations';
+import getters from '@shell/plugins/steve/getters';
+import { StorePagination } from '@shell/types/store/pagination.types';
+import { VuexStore } from '@shell/types/store/vuex';
+import Pod from '@shell/models/pod';
+
+describe('mutations', () => {
+  jest.mock('vue', () => ({ reactive: jest.fn((arr) => arr) }));
+
+  // Import the function we are testing
+  const { loadPage } = mutations;
+
+  let state: any;
+  let ctx: Partial<VuexStore>;
+  let resourceType: string;
+  let pagination: Partial<StorePagination>;
+  let revision: string;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    state = { types: {} };
+    ctx = {
+      getters: {
+        keyFieldForType: jest.fn(() => 'id'),
+        cleanResource:   getters.cleanResource()
+      }
+    };
+    resourceType = 'pod';
+    pagination = { request: undefined, result: undefined };
+    revision = 'abc-123';
+    ctx.getters.classify = () => Pod;
+  });
+
+  describe('loadPage', () => {
+    it('should perform an initial load into an empty cache', () => {
+      const data = [
+        {
+          id: 'a', name: 'pod-a', type: resourceType
+        },
+        {
+          id: 'b', name: 'pod-b', type: resourceType
+        }
+      ];
+
+      loadPage(state, {
+        type: resourceType, data, ctx, pagination, revision
+      });
+
+      // Get the cache created by the *real* 'registerType'
+      const cache = state.types[resourceType];
+
+      // Check cache metadata
+      expect(cache.generation).toBe(1);
+      expect(cache.havePage).toBe(pagination);
+      expect(cache.revision).toBe(revision);
+
+      // Check 'list' (should contain classified proxies)
+      expect(cache.list).toHaveLength(2);
+      expect(cache.list[0]).toStrictEqual(expect.objectContaining({ id: 'a' }));
+      expect(cache.list[1]).toStrictEqual(expect.objectContaining({ id: 'b' }));
+
+      // Check 'map'
+      expect(cache.map.size).toBe(2);
+      expect(cache.map.get('a')).toBe(cache.list[0]); // Map and list must reference the *same* objects
+      expect(cache.map.get('b')).toBe(cache.list[1]);
+    });
+
+    it('should update existing resources in-place (tests "replaceResource" effect)', () => {
+      const v1Resource = new Pod({ id: 'a', metadata: { a: 'v1-a' } }, ctx);
+
+      state.types[resourceType] = {
+        list:       [v1Resource],
+        map:        new Map([['a', v1Resource]]),
+        generation: 1,
+      };
+
+      // Keep a reference to the *original list array* and *original resource object*
+      const originalListRef = state.types[resourceType].list;
+      const originalResourceRef = v1Resource;
+
+      const newData = [
+        { id: 'a', metadata: { a: 'v2-a' } }, // This is the update
+      ];
+      const newRevision = 'rev-2';
+
+      loadPage(state, {
+        type: resourceType, data: newData, ctx, pagination, revision: newRevision
+      });
+
+      const cache = state.types[resourceType];
+
+      expect(cache.list).toBe(originalListRef);
+      expect(cache.list).toHaveLength(1);
+
+      expect(cache.list[0]).toBe(originalResourceRef);
+
+      expect(originalResourceRef.metadata.a).toBe('v2-a');
+
+      expect(cache.map.get('a')).toBe(originalResourceRef);
+
+      expect(cache.generation).toBe(2);
+      expect(cache.revision).toBe(newRevision);
+    });
+
+    it('should remove stale data from list and map (paging)', () => {
+      const page1Proxy = new Pod({ id: 'a', name: 'stale-pod' }, ctx);
+
+      state.types[resourceType] = {
+        list:       [page1Proxy],
+        map:        new Map([['a', page1Proxy]]),
+        generation: 1,
+      };
+
+      const listRef = state.types[resourceType].list;
+
+      const page2Data = [
+        { id: 'b', name: 'new-pod' },
+      ];
+
+      loadPage(state, {
+        type: resourceType, data: page2Data, ctx, pagination, revision
+      });
+
+      const cache = state.types[resourceType];
+
+      expect(cache.list).toBe(listRef); // List reference must be preserved
+
+      expect(cache.list).toHaveLength(1);
+      expect(cache.list[0].id).toBe('b');
+
+      expect(cache.map.size).toBe(1);
+      expect(cache.map.has('a')).toBe(false); // Stale 'a' is gone
+      expect(cache.map.has('b')).toBe(true);
+    });
+
+    it('should handle partial overlaps (update, remove stale, add new)', () => {
+      // 1. Pre-load cache
+      const staleResource = new Pod({ id: 'a', prop: 'stale-pod' }, ctx);
+      const v1Resource = new Pod({ id: 'b', prop: 'v1-pod-b' }, ctx);
+
+      state.types[resourceType] = {
+        list:       [staleResource, v1Resource],
+        map:        new Map([['a', staleResource], ['b', v1Resource]]),
+        generation: 1,
+      };
+
+      const listRef = state.types[resourceType].list;
+      const v1ResourceRef = v1Resource;
+
+      const newData = [
+        { id: 'b', prop: 'v2-pod-b' }, // Updated
+        { id: 'c', prop: 'new-pod-c' }, // New
+      ];
+
+      loadPage(state, {
+        type: resourceType, data: newData, ctx, pagination, revision
+      });
+
+      const cache = state.types[resourceType];
+
+      expect(cache.list).toBe(listRef); // List reference preserved
+
+      expect(cache.list).toHaveLength(2);
+      expect(cache.list[0].id).toBe('b');
+      expect(cache.list[1].id).toBe('c');
+
+      expect(cache.list[0]).toBe(v1ResourceRef);
+      expect(v1ResourceRef.prop).toBe('v2-pod-b');
+
+      expect(cache.list[1]).toStrictEqual(expect.objectContaining({ id: 'c' }));
+
+      expect(cache.map.size).toBe(2);
+      expect(cache.map.has('a')).toBe(false); // Stale, removed
+      expect(cache.map.get('b')).toBe(v1ResourceRef); // Updated
+      expect(cache.map.get('c')).toBe(cache.list[1]); // Added
+    });
+  });
+});

package/plugins/dashboard-client-init.js

@@ -0,0 +1,3 @@
+export default async(context) => {
+  await context.store.dispatch('dashboardClientInit', context);
+};