@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.3

package/mixins/__tests__/chart.test.ts

@@ -214,6 +214,72 @@ describe('chartMixin', () => {
         id:   'custom-ns/custom-name'
       });
     });
+
+    it('should fall back to matchingInstalledApps when version namespace lookup fails', async() => {
+      const installedApp = {
+        id:   'other-ns/custom-name',
+        spec: { chart: { metadata: { version: '0.9.0' } } }
+      };
+
+      const mockStore = {
+        dispatch: jest.fn((action, payload) => {
+          if (action === 'cluster/find') {
+            return Promise.reject(new Error('not found'));
+          }
+
+          return Promise.resolve();
+        }),
+        getters: {
+          currentCluster: () => {},
+          isRancher:      () => true,
+          'catalog/repo': () => {
+            return () => 'repo';
+          },
+          'catalog/chart': () => {
+            return {
+              id:                    'chart-id',
+              versions:              [{ version: '1.0.0' }],
+              matchingInstalledApps: [installedApp]
+            };
+          },
+          'catalog/version': () => ({
+            version:     '1.0.0',
+            annotations: {
+              [CATALOG_ANNOTATIONS.NAMESPACE]:    'custom-ns',
+              [CATALOG_ANNOTATIONS.RELEASE_NAME]: 'custom-name',
+            }
+          }),
+          'prefs/get': () => {},
+          'i18n/t':    () => jest.fn()
+        }
+      };
+
+      const DummyComponent = {
+        mixins:   [ChartMixin],
+        template: '<div></div>',
+      };
+
+      const wrapper = mount(
+        DummyComponent,
+        {
+          global: {
+            mocks: {
+              $store: mockStore,
+              $route: {
+                query: {
+                  chart:       'chart_name',
+                  versionName: '1.0.0'
+                }
+              }
+            }
+          }
+        });
+
+      await wrapper.vm.fetchChart();
+
+      expect(wrapper.vm.existing).toStrictEqual(installedApp);
+      expect(wrapper.vm.mode).toStrictEqual('edit');
+    });
   });
 
   describe('action', () => {
@@ -366,6 +432,52 @@ describe('chartMixin', () => {
     });
   });
 
+  describe('isChartTargeted', () => {
+    const DummyComponent = {
+      mixins:   [ChartMixin],
+      template: '<div></div>',
+    };
+
+    const mockStore = {
+      dispatch: jest.fn(() => Promise.resolve()),
+      getters:  { 'i18n/t': (key: string) => key }
+    };
+
+    it('should return truthy when version annotations have both namespace and release-name', () => {
+      const wrapper = mount(DummyComponent, {
+        data: () => ({
+          version: {
+            annotations: {
+              [CATALOG_ANNOTATIONS.NAMESPACE]:    'custom-ns',
+              [CATALOG_ANNOTATIONS.RELEASE_NAME]: 'custom-name',
+            }
+          }
+        }),
+        global: { mocks: { $store: mockStore } }
+      });
+
+      expect(wrapper.vm.isChartTargeted).toBeTruthy();
+    });
+
+    it('should return falsy when version annotations are missing', () => {
+      const wrapper = mount(DummyComponent, {
+        data:   () => ({ version: { annotations: {} } }),
+        global: { mocks: { $store: mockStore } }
+      });
+
+      expect(wrapper.vm.isChartTargeted).toBeFalsy();
+    });
+
+    it('should return falsy when version is null', () => {
+      const wrapper = mount(DummyComponent, {
+        data:   () => ({ version: null }),
+        global: { mocks: { $store: mockStore } }
+      });
+
+      expect(wrapper.vm.isChartTargeted).toBeFalsy();
+    });
+  });
+
   describe('mappedVersions', () => {
     it('should return versions sorted by semver (descending)', () => {
       const versions = [

package/mixins/brand.js

@@ -183,7 +183,8 @@ export default {
     },
     setBodyClass() {
       const body = document.getElementsByTagName('body')[0];
-      const cssClass = `overflow-hidden dashboard-body`;
+      const isStandalone = this.$route?.meta?.standalone;
+      const cssClass = isStandalone ? 'dashboard-body' : 'overflow-hidden dashboard-body';
       let bodyClass = `theme-${ this.theme } ${ cssClass }`;
 
       if ( this.brand ) {

package/mixins/chart.js

@@ -13,7 +13,7 @@ import { CAPI, CATALOG } from '@shell/config/types';
 import { isPrerelease } from '@shell/utils/version';
 import { compareChartVersions } from '@shell/utils/chart';
 import difference from 'lodash/difference';
-import { LINUX, APP_UPGRADE_STATUS } from '@shell/store/catalog';
+import { APP_UPGRADE_STATUS, isRancherRepo, getPermittedOSs } from '@shell/store/catalog';
 import { clone } from '@shell/utils/object';
 import { merge } from 'lodash';
 
@@ -28,6 +28,17 @@ export default {
       ignoreWarning: false,
 
       chart: null,
+
+      // Whether installing a new instance is allowed.
+      // This is false when the chart is targeted (has fixed namespace/name annotations)
+      // or when the URL query specifies a specific app to edit.
+      canInstallNew: true,
+
+      // Installed instances of this chart that can be selected for edit/upgrade
+      // on the chart detail page. When instances exist, `existing` is set to the
+      // first one by default, but the user can select a different instance or
+      // choose to install a new one.
+      installedInstances: [],
     };
   },
 
@@ -73,7 +84,8 @@ export default {
           keywords:        version.keywords
         };
 
-        const permittedSystems = (version?.annotations?.[CATALOG_ANNOTATIONS.PERMITTED_OS] || LINUX).split(',');
+        const isRancher = isRancherRepo(this.repo, this.chart);
+        const permittedSystems = getPermittedOSs(version?.annotations, isRancher);
 
         if (permittedSystems.length > 0 && difference(OSs, permittedSystems).length > 0) {
           nue.disabled = true;
@@ -260,7 +272,7 @@ export default {
     },
 
     isChartTargeted() {
-      return this.chart?.targetNamespace && this.chart?.targetName;
+      return this.version?.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE] && this.version?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME];
     },
 
     hasQuestions() {
@@ -376,6 +388,9 @@ export default {
         // If found, set the form to edit mode. If not, set the
         // form to create mode.
 
+        // This is a hard blocker - installing a new instance is NOT allowed.
+        this.canInstallNew = false;
+
         try {
           this.existing = await this.$store.dispatch('cluster/find', {
             type: CATALOG.APP,
@@ -396,10 +411,12 @@ export default {
         if ( targetNamespace && targetName ) {
           // If the app name and namespace values are not provided in the
           // query, fall back on target values defined in the Helm chart itself.
-
           // Ask to install a special chart with fixed namespace/name
           // or edit it if there's an existing install.
 
+          // This is a hard blocker - installing a new instance is NOT allowed.
+          this.canInstallNew = false;
+
           try {
             this.existing = await this.$store.dispatch('cluster/find', {
               type: CATALOG.APP,
@@ -407,22 +424,40 @@ export default {
             });
             this.mode = _EDIT;
           } catch (e) {
-            this.mode = _CREATE;
-            this.existing = null;
+            // Version targets a different namespace than where the app is installed.
+            // Fall back to matching installed apps (e.g. chart detail page).
+            const matching = this.chart?.matchingInstalledApps || [];
+
+            this.existing = matching[0] || null;
+            this.mode = this.existing ? _EDIT : _CREATE;
           }
-        } else if (this.chart) {
-          const matching = this.chart.matchingInstalledApps;
+        } else {
+          // Regular chart (not targeted) - check if there are installed instances.
+          // Installing new instances IS allowed (canInstallNew remains true).
+          const isChartDetailPage = this.$route.name === 'c-cluster-apps-charts-chart';
 
-          if (matching.length === 1) {
-            this.existing = matching[0];
-            this.mode = _EDIT;
+          if (isChartDetailPage) {
+            const matching = this.chart?.matchingInstalledApps || [];
+
+            // Always refresh the available instances so stale values are removed.
+            this.installedInstances = [];
+
+            if (matching.length >= 1) {
+              // Populate the instance selector and preserve the current selection
+              // when it is still one of the matching installed apps.
+              this.installedInstances = matching;
+              const hasExistingMatch = this.existing?.id && matching.some((instance) => instance.id === this.existing.id);
+
+              if (!hasExistingMatch) {
+                this.existing = matching[0];
+              }
+            } else {
+              this.existing = null;
+            }
           } else {
+            // Regular create
             this.mode = _CREATE;
           }
-        } else {
-          // Regular create
-
-          this.mode = _CREATE;
         }
       }
     }, // End of fetchChart

package/mixins/resource-fetch-api-pagination.js

@@ -1,5 +1,5 @@
 import { NAMESPACE_FILTER_NAMESPACED_YES, NAMESPACE_FILTER_NAMESPACED_NO, NAMESPACE_FILTER_ALL } from '@shell/utils/namespace-filter';
-import { NAMESPACE } from '@shell/config/types';
+import { MANAGEMENT, NAMESPACE } from '@shell/config/types';
 import { ALL_NAMESPACES } from '@shell/store/prefs';
 import { mapGetters } from 'vuex';
 import { ResourceListComponentName } from '../components/ResourceList/resource-list.config';
@@ -248,7 +248,7 @@ export default {
     namespaceFilters: {
       immediate: true,
       async handler(neu, old) {
-        if (!this.canPaginate || !this.isNamespaced) {
+        if (!this.canPaginate || !this.isNamespaced || !this.currentProduct?.showNamespaceFilter) {
           return;
         }
 
@@ -283,7 +283,7 @@ export default {
           allNamespaces:                 this.$store.getters[`${ this.currentProduct?.inStore }/all`](NAMESPACE),
           selection:                     neu,
           isAllNamespaces:               this.isAllNamespaces,
-          isLocalCluster:                this.$store.getters['currentCluster'].isLocal,
+          isLocalCluster:                this.$store.getters['currentCluster']?.isLocal,
           showReservedRancherNamespaces: this.showDynamicRancherNamespaces,
           productHidesSystemNamespaces:  this.productHidesSystemNamespaces,
         });
@@ -354,15 +354,51 @@ export default {
 
   async beforeUnmount() {
     if (this.havePaginated) {
+      const store = this.overrideInStore || this.inStore;
       // of type @STEVE_WATCH_PARAMS
       const watchArgs = {
         type: this.resource,
         mode: STEVE_WATCH_MODE.RESOURCE_CHANGES,
       };
 
-      await this.$store.dispatch(`${ this.overrideInStore || this.inStore }/forgetType`, this.resource, (watchParams) => {
-        return watchParams.type === watchArgs.type && watchParams.mode === watchArgs.type.mode;
+      // Ensure that a resource remains in the store... and it's the same reference as before
+      // We'll do this for the mgmt cluster if there's a currentCluster set, otherwise we become unstuck
+      // (on nav we ensure currentCluster exists, but beforeUnmount fires afterwards, removing the cluster from pages that are using it)
+      const retainResource = this.resource === MANAGEMENT.CLUSTER && this.currentCluster ? this.currentCluster : null;
+
+      // Forget (unwatch, clear from store) the list's resource
+      await this.$store.dispatch(`${ store }/forgetType`, {
+        type:           this.resource,
+        compareWatches: (watchParams) => {
+          return watchParams.type === watchArgs.type && watchParams.mode === watchArgs.mode;
+        },
+        unwatch: true,
+        forget:  !retainResource
       });
+
+      if (!!retainResource) {
+        // The end state should be just like we've dispatched `${store}/find`
+
+        try {
+          // Clone to ensure we can load each property of A into B without worrying about them being the same reference
+          const clone = await this.$store.dispatch(`${ store }/clone`, { resource: retainResource });
+
+          // Load the resource. It's already in the store but this makes sure any legacy state (like havePage) is reset
+          await this.$store.dispatch(`${ store }/load`, {
+            data:                clone,
+            existing:            retainResource,
+            invalidatePageCache: true,
+          });
+
+          // Watch the resource.
+          await this.$store.dispatch(`${ store }/watch`, {
+            type: this.resource,
+            id:   retainResource.id,
+          });
+        } catch (error) {
+          console.error('Error occurred whilst trying to retain the management cluster in cache and correctly watched', error); // eslint-disable-line no-console
+        }
+      }
     }
   }
 };

package/models/__tests__/catalog.cattle.io.app.test.ts

@@ -87,6 +87,19 @@ const certManagerOfficialMatchingChart2 = {
   }]
 };
 
+// Simulates the chart data fetched from the repository where the home URL has changed in newer versions
+// AND the older installed version has been dropped/replaced from the repository index.
+const certManagerOfficialMatchingChartNewHomeOnly = {
+  name:     chartName,
+  repoName: certManagerOfficial.repoName,
+  versions: [{
+    version:     latestVersion,
+    home:        certManagerOfficial.home,
+    repoName:    certManagerOfficial.repoName,
+    annotations: {},
+  }]
+};
+
 const installedCertManagerAppCoFromRancherUI = {
   metadata: {
     annotations: { [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: appCo.repoName },
@@ -130,7 +143,8 @@ describe('class CatalogApp', () => {
       [installedCertManagerOfficialFromRancherUI, [], APP_UPGRADE_STATUS.NO_UPGRADE],
       [installedCertManagerOfficialFromRancherUI, [certManagerOfficialMatchingChart1], APP_UPGRADE_STATUS.SINGLE_UPGRADE],
       [installedCertManagerOfficialFromRancherUI, [certManagerOfficialMatchingChart1, appCoMatchingChart1], APP_UPGRADE_STATUS.SINGLE_UPGRADE],
-      [installedCertManagerOfficialFromRancherUI, [certManagerOfficialMatchingChart1, certManagerOfficialMatchingChart2], APP_UPGRADE_STATUS.MULTIPLE_UPGRADES]
+      [installedCertManagerOfficialFromRancherUI, [certManagerOfficialMatchingChart1, certManagerOfficialMatchingChart2], APP_UPGRADE_STATUS.MULTIPLE_UPGRADES],
+      [installedCertManagerOfficialFromRancherUI, [certManagerOfficialMatchingChartNewHomeOnly], APP_UPGRADE_STATUS.SINGLE_UPGRADE]
     ];
 
     it.each(testCases)('should return the correct upgrade status', (installedChart: Object, matchingCharts: any, expected: any) => {

package/models/__tests__/catalog.cattle.io.clusterrepo.test.ts

@@ -0,0 +1,84 @@
+import ClusterRepo from '../catalog.cattle.io.clusterrepo';
+
+describe('clusterRepo', () => {
+  let model: any;
+
+  beforeEach(() => {
+    model = new ClusterRepo({
+      metadata: { name: 'test-repo' },
+      spec:     { url: 'https://test-url.com' }
+    }, {
+      getters:     {},
+      dispatch:    jest.fn(),
+      rootGetters: {}
+    });
+
+    jest.spyOn(model, '_key', 'get').mockReturnValue('test-key');
+    jest.spyOn(model, 'save').mockImplementation().mockResolvedValue(true);
+    jest.spyOn(model, 'waitForState').mockImplementation().mockResolvedValue(true);
+    jest.spyOn(model, '$dispatch', 'get').mockReturnValue(jest.fn());
+  });
+
+  describe('refresh', () => {
+    it('updates forceUpdate, saves, waits for active state, and dispatches load by default', async() => {
+      // Mock Date to ensure deterministic forceUpdate value
+      const mockDate = new Date('2023-01-01T12:00:00.000Z');
+      const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate as any);
+
+      await model.refresh();
+
+      expect(model.spec.forceUpdate).toBe('2023-01-01T12:00:00Z');
+      expect(model.save).toHaveBeenCalledWith();
+      expect(model.waitForState).toHaveBeenCalledWith('active', 10000, 1000);
+      expect(model.$dispatch).toHaveBeenCalledWith('catalog/load', { force: true, repoKeys: [model._key] }, { root: true });
+
+      spy.mockRestore();
+    });
+
+    it('updates forceUpdate, saves, waits for active state, but DOES NOT dispatch load if dispatchLoad is false', async() => {
+      await model.refresh(false);
+
+      expect(model.save).toHaveBeenCalledWith();
+      expect(model.waitForState).toHaveBeenCalledWith('active', 10000, 1000);
+      expect(model.$dispatch).not.toHaveBeenCalled();
+    });
+
+    it('dispatches error to growl if save or waitForState fails', async() => {
+      const error = new Error('waitForState timeout');
+
+      model.waitForState.mockRejectedValue(error);
+      jest.spyOn(model, 't', 'get').mockReturnValue(jest.fn().mockReturnValue('Error refreshing repository'));
+      jest.spyOn(model, 'nameDisplay', 'get').mockReturnValue('Test Repo');
+
+      await model.refresh();
+
+      expect(model.$dispatch).toHaveBeenCalledWith('growl/fromError', {
+        title: 'Error refreshing repository',
+        err:   error
+      }, { root: true });
+    });
+  });
+
+  describe('refreshBulk', () => {
+    it('calls refresh(false) on all items and then dispatches a single catalog/load with all repoKeys', async() => {
+      const mockItem1 = {
+        _key:    'repo-1',
+        refresh: jest.fn().mockResolvedValue(true)
+      };
+      const mockItem2 = {
+        _key:    'repo-2',
+        refresh: jest.fn().mockResolvedValue(true)
+      };
+
+      await model.refreshBulk([mockItem1, mockItem2]);
+
+      expect(mockItem1.refresh).toHaveBeenCalledWith(false);
+      expect(mockItem2.refresh).toHaveBeenCalledWith(false);
+
+      expect(model.$dispatch).toHaveBeenCalledWith('catalog/load', {
+        force:    true,
+        repoKeys: ['repo-1', 'repo-2']
+      }, { root: true });
+    });
+  });
+});

package/models/__tests__/chart.test.ts

@@ -17,7 +17,7 @@ type MockChartContext = {
 };
 
 interface CardContent {
-  subHeaderItems: { label: string, labelTooltip?: string}[];
+  subHeaderItems: { label: string, labelTooltip?: string, icon?: string, iconTooltip?: string }[];
   footerItems: { labels: string[]; icon?: string }[];
   statuses: { tooltip: { key?: string; text?: string }; color: string }[];
 }
@@ -166,7 +166,7 @@ describe('class Chart', () => {
       expect(chart.isInstalled).toBe(false);
     });
 
-    it('is false when multiple apps match', () => {
+    it('is true when multiple apps match', () => {
       const app = makeInstalledApp();
 
       app.spec.chart.metadata.version = '1.2.3';
@@ -174,7 +174,7 @@ describe('class Chart', () => {
 
       const chart = new Chart(base, ctx);
 
-      expect(chart.isInstalled).toBe(false);
+      expect(chart.isInstalled).toBe(true);
     });
   });
 
@@ -206,6 +206,58 @@ describe('class Chart', () => {
 
       expect(chart.upgradeable).toBe(false);
     });
+
+    it('is true when at least one of multiple installed apps is upgradeable', () => {
+      const app1 = makeInstalledApp(APP_UPGRADE_STATUS.NO_UPGRADE);
+      const app2 = makeInstalledApp(APP_UPGRADE_STATUS.SINGLE_UPGRADE);
+
+      ctx.rootGetters['cluster/all'] = () => [app1, app2];
+
+      const chart = new Chart(base, ctx);
+
+      expect(chart.upgradeable).toBe(true);
+    });
+
+    it('is false when none of multiple installed apps are upgradeable', () => {
+      const app1 = makeInstalledApp(APP_UPGRADE_STATUS.NO_UPGRADE);
+      const app2 = makeInstalledApp(APP_UPGRADE_STATUS.NO_UPGRADE);
+
+      ctx.rootGetters['cluster/all'] = () => [app1, app2];
+
+      const chart = new Chart(base, ctx);
+
+      expect(chart.upgradeable).toBe(false);
+    });
+  });
+
+  describe('installedCount', () => {
+    it('returns 0 when no apps are installed', () => {
+      const chart = new Chart(base, ctx);
+
+      expect(chart.installedCount).toBe(0);
+    });
+
+    it('returns 1 when one app is installed', () => {
+      const installedApp = makeInstalledApp();
+
+      ctx.rootGetters['cluster/all'] = () => [installedApp];
+
+      const chart = new Chart(base, ctx);
+
+      expect(chart.installedCount).toBe(1);
+    });
+
+    it('returns correct count when multiple apps are installed', () => {
+      const app1 = makeInstalledApp();
+      const app2 = makeInstalledApp();
+      const app3 = makeInstalledApp();
+
+      ctx.rootGetters['cluster/all'] = () => [app1, app2, app3];
+
+      const chart = new Chart(base, ctx);
+
+      expect(chart.installedCount).toBe(3);
+    });
   });
 
   describe('cardContent', () => {
@@ -274,6 +326,25 @@ describe('class Chart', () => {
       expect(installedStatus?.tooltip?.text).toContain(installedApp.spec.chart.metadata.version);
     });
 
+    it('does not include version in installed tooltip when multiple instances exist', () => {
+      const app1 = makeInstalledApp();
+      const app2 = makeInstalledApp();
+
+      app2.spec.chart.metadata.version = '1.2.0';
+      ctx.rootGetters['cluster/all'] = () => [app1, app2];
+
+      const chart = new Chart(base, ctx);
+
+      const result = chart.cardContent as CardContent;
+
+      const installedStatus = result.statuses.find((s) => s.tooltip?.text?.startsWith('generic.installedMultiple'));
+
+      expect(installedStatus).toBeDefined();
+      expect(installedStatus?.color).toBe('success');
+      // Should not contain version number when multiple instances
+      expect(installedStatus?.tooltip?.text).toBe('generic.installedMultiple');
+    });
+
     it('includes upgradeable status when upgrade is available', () => {
       const installedApp = makeInstalledApp(APP_UPGRADE_STATUS.SINGLE_UPGRADE);
 
@@ -332,10 +403,32 @@ describe('class Chart', () => {
       });
 
       const result = chart.cardContent as CardContent;
-      const lastUpdatedItem = result.subHeaderItems[1];
 
-      expect(lastUpdatedItem.label).toBe('generic.na');
-      expect(lastUpdatedItem.labelTooltip).toBe('catalog.charts.appChartCard.subHeaderItem.missingVersionDate');
+      expect(result.subHeaderItems).toHaveLength(1);
+      expect(result.subHeaderItems[0].icon).toBe('icon-version-alt');
+    });
+
+    it('handles falsy time for last updated date', () => {
+      const chartWithFalsyTime = {
+        ...base,
+        versions: [{
+          ...base.versions[0],
+          created: '',
+        }]
+      };
+      const chart = new Chart(chartWithFalsyTime, {
+        rootGetters: {
+          'cluster/all':  () => [],
+          'i18n/t':       (key: string) => key,
+          currentCluster: { workerOSs: [] },
+          'prefs/get':    () => false,
+        },
+      });
+
+      const result = chart.cardContent as CardContent;
+
+      expect(result.subHeaderItems).toHaveLength(1);
+      expect(result.subHeaderItems[0].icon).toBe('icon-version-alt');
     });
   });
 });