[ backport 2.13.6 ] chart multiple installation (#17242)

* backport chart multiple installation part 1

* backport required changes from issue 14817 - sorting versions

* backport required changes from issue 13553 - action menu

* latest ux/ui changes

* add suffix to tooltips for mulitple installed case

* backport changes for respecting version + styling + comment

* revert unnecessary backporting action-invoked logic

* add installNew event handler

---------

Co-authored-by: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>

Author: momesgin

cypress/e2e/po/pages/explorer/charts/chart.po.ts

@@ -37,7 +37,7 @@ export class ChartPage extends PagePo {
   }
 
   goToInstall() {
-    const btn = new AsyncButtonPo('.chart-header .btn.role-primary');
+    const btn = new AsyncButtonPo('[data-testid="btn-chart-install"]');
 
     btn.checkVisible(MEDIUM_TIMEOUT_OPT);
     btn.click(true);

shell/assets/translations/en-us.yaml

@@ -130,6 +130,7 @@ generic:
   deprecated: Deprecated
   upgradeable: Upgradeable
   installed: Installed
+  installedMultiple: Installed (multiple)
   featured: Featured
   shortFeatured: Feat
   category: Category
@@ -1135,12 +1136,15 @@ catalog:
     deprecatedWarning: '{chartName} has been marked as deprecated. Use caution when installing this helm chart as it might be removed in the future.'
     experimentalWarning: '{chartName} has been marked as experimental. Use caution when installing this helm chart as it might not function as expected.'
     deprecatedAndExperimentalWarning: '{chartName} has been marked as deprecated and experimental. Use caution when installing this helm chart as it might be removed in the future and might not function as expected.'
+    installedAppsSelector:
+      ariaLabel: Select an installed instance to edit or upgrade
     chartButton:
       action:
         install: Install this version
         edit: Edit the current version
         upgrade: Upgrade to this version
         downgrade: Downgrade to this version
+        installNew: Install as new instance
   charts:
     browseAriaLabel: Show only charts grid
     iconAlt: Icon for {app} card/grid item

shell/config/query-params.js

@@ -72,6 +72,7 @@ export const DEPRECATED = 'deprecated';
 export const HIDDEN = 'hidden';
 export const FROM_TOOLS = 'tools';
 export const FROM_CLUSTER = 'cluster';
+export const NEW_APP_INSTANCE = 'new-instance';
 export const HIDE_SIDE_NAV = 'hide-side-nav';
 
 // Cluster provisioning

shell/mixins/__tests__/chart.test.ts

@@ -322,5 +322,152 @@ describe('chartMixin', () => {
         icon: 'icon-upgrade-alt',
       });
     });
+
+    it('should return "upgrade" action when upgrading from a pre-release to a stable version with "up" build metadata', () => {
+      const wrapper = mount(DummyComponent, {
+        data: () => ({
+          existing: { spec: { chart: { metadata: { version: '108.0.0+up0.25.0-rc.4' } } } },
+          version:  { version: '108.0.0+up0.25.0' }
+        }),
+        global: {
+          mocks: {
+            $store: mockStore,
+            $route: { query: {} }
+          }
+        }
+      });
+
+      expect(wrapper.vm.action).toStrictEqual({
+        name: 'upgrade',
+        tKey: 'upgrade',
+        icon: 'icon-upgrade-alt',
+      });
+    });
+
+    it('should return "upgrade" action when upgrading with build metadata change', () => {
+      const wrapper = mount(DummyComponent, {
+        data: () => ({
+          existing: { spec: { chart: { metadata: { version: '1.0.0+1' } } } },
+          version:  { version: '1.0.0+2' }
+        }),
+        global: {
+          mocks: {
+            $store: mockStore,
+            $route: { query: {} }
+          }
+        }
+      });
+
+      expect(wrapper.vm.action).toStrictEqual({
+        name: 'upgrade',
+        tKey: 'upgrade',
+        icon: 'icon-upgrade-alt',
+      });
+    });
+  });
+
+  describe('mappedVersions', () => {
+    it('should return versions sorted by semver (descending)', () => {
+      const versions = [
+        { version: '0.1.0', created: '2026-01-01' },
+        { version: '0.2.0-rc1', created: '2026-01-01' },
+        { version: '0.2.0', created: '2026-01-01' },
+        { version: '1.2.3', created: '2026-01-01' },
+        { version: '1.2.3-dev', created: '2026-01-01' },
+        { version: '10.0.0', created: '2026-01-01' },
+        { version: '2.0.0', created: '2026-01-01' },
+        { version: '2.0.0-rc2', created: '2026-01-01' },
+        { version: '2.0.0-rc1', created: '2026-01-01' },
+        { version: '2.0.0-beta.1', created: '2026-01-01' },
+        { version: '2.0.0-alpha', created: '2026-01-01' },
+        { version: '3.0.0-rc.3', created: '2026-01-01' },
+        { version: '3.0.0-rc.2', created: '2026-01-01' },
+        { version: '3.0.0-rc.10', created: '2026-01-01' },
+        { version: '108.0.0+up0.25.0-rc.4', created: '2026-01-01' },
+        { version: '108.0.0+up0.25.0', created: '2026-01-01' },
+        { version: '1.0.0-alpha.beta', created: '2026-01-01' },
+        { version: '1.0.0-alpha.1', created: '2026-01-01' },
+        { version: '1.0.0-alpha.2', created: '2026-01-01' },
+        { version: '1.0.0-alpha', created: '2026-01-01' },
+        { version: '1.0.0-beta.11', created: '2026-01-01' },
+        { version: '1.0.0-beta.2', created: '2026-01-01' },
+        { version: '1.0.0-beta', created: '2026-01-01' },
+        { version: '1.0.0+build.1', created: '2026-01-01' },
+        { version: '1.0.0+build.2', created: '2026-01-01' },
+        { version: '1.0.0+up1.0.0', created: '2026-01-01' },
+        { version: '1.0.0+upFoo', created: '2026-01-01' },
+        { version: '108.0.0+up0.25.0-rc.5', created: '2026-01-01' },
+        { version: '108.0.0+up0.25.1', created: '2026-01-01' },
+        { version: '0.0.1', created: '2026-01-01' }
+      ];
+
+      const mockStore = {
+        dispatch: jest.fn(() => Promise.resolve()),
+        getters:  {
+          currentCluster:  () => {},
+          isRancher:       () => true,
+          'catalog/repo':  () => () => 'repo',
+          'catalog/chart': () => ({ versions }),
+          'prefs/get':     () => (key: string) => true,
+          'i18n/t':        () => jest.fn()
+        }
+      };
+
+      const DummyComponent = {
+        mixins:   [ChartMixin],
+        template: '<div></div>',
+      };
+
+      const wrapper = mount(
+        DummyComponent,
+        {
+          data() {
+            return { chart: { versions } };
+          },
+          global: {
+            mocks: {
+              $store: mockStore,
+              $route: { query: { version: '10.0.0' } }
+            }
+          }
+        });
+
+      // mappedVersions is a computed property, so we access it directly
+      const result = wrapper.vm.mappedVersions;
+      const resultVersions = result.map((v: any) => v.version);
+
+      expect(resultVersions).toStrictEqual([
+        '108.0.0+up0.25.1',
+        '108.0.0+up0.25.0',
+        '108.0.0+up0.25.0-rc.5',
+        '108.0.0+up0.25.0-rc.4',
+        '10.0.0',
+        '3.0.0-rc.10',
+        '3.0.0-rc.3',
+        '3.0.0-rc.2',
+        '2.0.0',
+        '2.0.0-rc2',
+        '2.0.0-rc1',
+        '2.0.0-beta.1',
+        '2.0.0-alpha',
+        '1.2.3',
+        '1.2.3-dev',
+        '1.0.0+up1.0.0',
+        '1.0.0+upFoo',
+        '1.0.0+build.2',
+        '1.0.0+build.1',
+        '1.0.0-beta.11',
+        '1.0.0-beta.2',
+        '1.0.0-beta',
+        '1.0.0-alpha.beta',
+        '1.0.0-alpha.2',
+        '1.0.0-alpha.1',
+        '1.0.0-alpha',
+        '0.2.0',
+        '0.2.0-rc1',
+        '0.1.0',
+        '0.0.1'
+      ]);
+    });
   });
 });

shell/mixins/chart.js

@@ -10,7 +10,8 @@ import { NAME as MANAGER } from '@shell/config/product/manager';
 import { OPA_GATE_KEEPER_ID } from '@shell/pages/c/_cluster/gatekeeper/index.vue';
 import { formatSi, parseSi } from '@shell/utils/units';
 import { CAPI, CATALOG } from '@shell/config/types';
-import { isPrerelease, compare, isUpgradeFromPreToStable } from '@shell/utils/version';
+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 { clone } from '@shell/utils/object';
@@ -27,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: [],
     };
   },
 
@@ -51,7 +63,12 @@ export default {
     },
 
     mappedVersions() {
-      const versions = this.chart?.versions || [];
+      const versions = (this.chart?.versions || []).slice();
+
+      versions.sort((a, b) => {
+        return compareChartVersions(b.version, a.version);
+      });
+
       const selectedVersion = this.targetVersion;
       const OSs = this.currentCluster?.workerOSs;
       const out = [];
@@ -240,13 +257,9 @@ export default {
         };
       }
 
-      if (isUpgradeFromPreToStable(this.currentVersion, this.targetVersion)) {
-        return {
-          name: 'upgrade', tKey: 'upgrade', icon: 'icon-upgrade-alt'
-        };
-      }
+      const diff = compareChartVersions(this.currentVersion, this.targetVersion);
 
-      if (compare(this.currentVersion, this.targetVersion) < 0) {
+      if (diff < 0) {
         return {
           name: 'upgrade', tKey: 'upgrade', icon: 'icon-upgrade-alt'
         };
@@ -374,6 +387,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,
@@ -398,6 +414,9 @@ export default {
           // 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,
@@ -408,19 +427,33 @@ export default {
             this.mode = _CREATE;
             this.existing = null;
           }
-        } 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

shell/models/__tests__/chart.test.ts

@@ -166,15 +166,15 @@ 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';
       ctx.rootGetters['cluster/all'] = () => [app, app];
 
       const chart = new Chart(base, ctx);
 
-      expect(chart.isInstalled).toBe(false);
+      expect(chart.isInstalled).toBe(true);
     });
   });
 
@@ -274,6 +274,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);