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

package/pages/c/_cluster/apps/charts/__tests__/chart.test.ts

@@ -1,4 +1,5 @@
 import Chart from '@shell/pages/c/_cluster/apps/charts/chart.vue';
+import { APP_UPGRADE_STATUS } from '@shell/store/catalog';
 
 jest.mock('clipboard-polyfill', () => ({ writeText: () => {} }));
 
@@ -132,4 +133,192 @@ describe('page: Chart Detail', () => {
       });
     });
   });
+
+  describe('methods: computeSelectedAppStatuses', () => {
+    const defaultStatuses = [
+      {
+        icon: 'icon-alert-alt', color: 'error', tooltip: { key: 'generic.deprecated' }
+      },
+      {
+        icon: 'icon-upgrade-alt', color: 'info', tooltip: { key: 'generic.upgradeable' }
+      },
+      {
+        icon: 'icon-confirmation-alt', color: 'success', tooltip: { text: 'generic.installed (1.0.0)' }
+      }
+    ];
+
+    it('returns only deprecated status when no app is selected', () => {
+      const thisContext = {
+        selectedInstalledApp: null,
+        t:                    (key: string) => key
+      };
+
+      const result = (Chart.methods!.computeSelectedAppStatuses as (statuses: any[]) => any[]).call(thisContext, defaultStatuses);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].icon).toBe('icon-alert-alt');
+    });
+
+    it('returns empty array when no app is selected and chart is not deprecated', () => {
+      const thisContext = {
+        selectedInstalledApp: null,
+        t:                    (key: string) => key
+      };
+
+      const statusesWithoutDeprecated = [
+        {
+          icon: 'icon-upgrade-alt', color: 'info', tooltip: { key: 'generic.upgradeable' }
+        },
+        {
+          icon: 'icon-confirmation-alt', color: 'success', tooltip: { text: 'generic.installed (1.0.0)' }
+        }
+      ];
+
+      const result = (Chart.methods!.computeSelectedAppStatuses as (statuses: any[]) => any[]).call(thisContext, statusesWithoutDeprecated);
+
+      expect(result).toHaveLength(0);
+    });
+
+    it('returns installed status with version for selected app', () => {
+      const thisContext = {
+        selectedInstalledApp: {
+          upgradeAvailable: APP_UPGRADE_STATUS.NO_UPGRADE,
+          spec:             { chart: { metadata: { version: '2.0.0' } } }
+        },
+        t: (key: string) => key
+      };
+
+      const result = (Chart.methods!.computeSelectedAppStatuses as (statuses: any[]) => any[]).call(thisContext, defaultStatuses);
+
+      const installedStatus = result.find((s: any) => s.icon === 'icon-confirmation-alt');
+
+      expect(installedStatus).toBeDefined();
+      expect(installedStatus.tooltip.text).toContain('2.0.0');
+    });
+
+    it('returns upgradeable status when selected app is upgradeable', () => {
+      const thisContext = {
+        selectedInstalledApp: {
+          upgradeAvailable: APP_UPGRADE_STATUS.SINGLE_UPGRADE,
+          spec:             { chart: { metadata: { version: '1.5.0' } } }
+        },
+        t: (key: string) => key
+      };
+
+      const result = (Chart.methods!.computeSelectedAppStatuses as (statuses: any[]) => any[]).call(thisContext, defaultStatuses);
+
+      const upgradeableStatus = result.find((s: any) => s.icon === 'icon-upgrade-alt');
+
+      expect(upgradeableStatus).toBeDefined();
+    });
+
+    it('does not include upgradeable status when selected app is not upgradeable', () => {
+      const thisContext = {
+        selectedInstalledApp: {
+          upgradeAvailable: APP_UPGRADE_STATUS.NO_UPGRADE,
+          spec:             { chart: { metadata: { version: '1.5.0' } } }
+        },
+        t: (key: string) => key
+      };
+
+      const result = (Chart.methods!.computeSelectedAppStatuses as (statuses: any[]) => any[]).call(thisContext, defaultStatuses);
+
+      const upgradeableStatus = result.find((s: any) => s.icon === 'icon-upgrade-alt');
+
+      expect(upgradeableStatus).toBeUndefined();
+    });
+
+    it('includes all relevant statuses: deprecated, upgradeable, and installed', () => {
+      const thisContext = {
+        selectedInstalledApp: {
+          upgradeAvailable: APP_UPGRADE_STATUS.SINGLE_UPGRADE,
+          spec:             { chart: { metadata: { version: '1.5.0' } } }
+        },
+        t: (key: string) => key
+      };
+
+      const result = (Chart.methods!.computeSelectedAppStatuses as (statuses: any[]) => any[]).call(thisContext, defaultStatuses);
+
+      expect(result).toHaveLength(3);
+
+      const hasDeprecated = result.some((s: any) => s.icon === 'icon-alert-alt');
+      const hasUpgradeable = result.some((s: any) => s.icon === 'icon-upgrade-alt');
+      const hasInstalled = result.some((s: any) => s.icon === 'icon-confirmation-alt');
+
+      expect(hasDeprecated).toBe(true);
+      expect(hasUpgradeable).toBe(true);
+      expect(hasInstalled).toBe(true);
+    });
+  });
+
+  describe('computed: installedAppOptions', () => {
+    const makeApp = (namespace: string, name: string, upgradeStatus: string) => ({
+      id:               `${ namespace }/${ name }`,
+      metadata:         { namespace, name },
+      upgradeAvailable: upgradeStatus
+    });
+
+    it('returns empty array when no installed instances', () => {
+      const thisContext = {
+        installedInstances: [],
+        t:                  (key: string) => key
+      };
+
+      const result = (Chart.computed!.installedAppOptions as () => any[]).call(thisContext);
+
+      expect(result).toStrictEqual([]);
+    });
+
+    it('returns options without upgradeable suffix for non-upgradeable apps', () => {
+      const thisContext = {
+        installedInstances: [
+          makeApp('default', 'my-app', APP_UPGRADE_STATUS.NO_UPGRADE)
+        ],
+        t: (key: string) => key
+      };
+
+      const result = (Chart.computed!.installedAppOptions as () => any[]).call(thisContext);
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toStrictEqual({
+        value: 'default/my-app',
+        label: 'default/my-app'
+      });
+    });
+
+    it('adds upgradeable suffix for apps with available upgrade', () => {
+      const thisContext = {
+        installedInstances: [
+          makeApp('cattle-system', 'rancher-app', APP_UPGRADE_STATUS.SINGLE_UPGRADE)
+        ],
+        t: (key: string) => key
+      };
+
+      const result = (Chart.computed!.installedAppOptions as () => any[]).call(thisContext);
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toStrictEqual({
+        value: 'cattle-system/rancher-app',
+        label: 'cattle-system/rancher-app (generic.upgradeable)'
+      });
+    });
+
+    it('correctly labels mixed upgradeable and non-upgradeable apps', () => {
+      const thisContext = {
+        installedInstances: [
+          makeApp('default', 'app-one', APP_UPGRADE_STATUS.NO_UPGRADE),
+          makeApp('kube-system', 'app-two', APP_UPGRADE_STATUS.SINGLE_UPGRADE),
+          makeApp('monitoring', 'app-three', APP_UPGRADE_STATUS.NOT_APPLICABLE)
+        ],
+        t: (key: string) => key
+      };
+
+      const result = (Chart.computed!.installedAppOptions as () => any[]).call(thisContext);
+
+      expect(result).toHaveLength(3);
+      expect(result[0].label).toBe('default/app-one');
+      expect(result[1].label).toBe('kube-system/app-two (generic.upgradeable)');
+      expect(result[2].label).toBe('monitoring/app-three');
+    });
+  });
 });

package/pages/c/_cluster/apps/charts/__tests__/index.test.ts

@@ -0,0 +1,55 @@
+import Charts from '@shell/pages/c/_cluster/apps/charts/index.vue';
+import { UI_PLUGIN_ANNOTATION } from '@shell/config/uiplugins';
+
+describe('page: Charts Index', () => {
+  describe('computed: tagOptions', () => {
+    it('should gather tags exclusively from enabledCharts, omitting tags from hidden or extension charts present in allCharts (e.g., primeOnly)', () => {
+      const thisContext = {
+        // allCharts contains a UI plugin/extension chart with the 'primeOnly' tag.
+        allCharts: [
+          { tags: ['appTag1'] },
+          { tags: ['primeOnly'], annotations: { [UI_PLUGIN_ANNOTATION.NAME]: UI_PLUGIN_ANNOTATION.VALUE } },
+        ],
+        // enabledCharts has already filtered out the extension chart.
+        enabledCharts: [
+          { tags: ['appTag1'] },
+        ]
+      };
+
+      const result = (Charts.computed!.tagOptions as () => any[]).call(thisContext);
+
+      expect(result).toStrictEqual([
+        { value: 'apptag1', label: 'appTag1' },
+      ]);
+
+      const hasPrimeOnly = result.some((tag) => tag.value === 'primeonly');
+
+      expect(hasPrimeOnly).toBe(false);
+    });
+  });
+
+  describe('computed: categoryOptions', () => {
+    it('should gather categories exclusively from enabledCharts, omitting categories from hidden or extension charts present in allCharts', () => {
+      const thisContext = {
+        allCharts: [
+          { categories: ['category1'] },
+          { categories: ['categoryFromExtension1'], annotations: { [UI_PLUGIN_ANNOTATION.NAME]: UI_PLUGIN_ANNOTATION.VALUE } },
+        ],
+        enabledCharts: [
+          { categories: ['category1'] },
+        ],
+        $store: { getters: { 'i18n/withFallback': (key: string, fallback: any, c: string) => c } }
+      };
+
+      const result = (Charts.computed!.categoryOptions as () => any[]).call(thisContext);
+
+      expect(result).toStrictEqual([
+        { value: 'category1', label: 'category1' },
+      ]);
+
+      const hasExtensionCategory = result.some((cat) => cat.value === 'categoryFromExtension1');
+
+      expect(hasExtensionCategory).toBe(false);
+    });
+  });
+});

package/pages/c/_cluster/apps/charts/__tests__/install.test.ts

@@ -91,4 +91,57 @@ describe('page: Install', () => {
     expect(wrapper.vm.forceNamespace).toBe('custom-ns');
     expect(wrapper.vm.value.metadata.name).toBe('custom-name');
   });
+
+  describe('cancel()', () => {
+    it('should route to appLocation if chart is not defined and specific query flags are absent', () => {
+      const mockReplace = jest.fn();
+      const expectedLocation = { name: 'app-location' };
+
+      const wrapper = mount(Install, {
+        global: {
+          mocks: {
+            $store: {
+              getters: {
+                'i18n/t':     (key: string) => key,
+                'cluster/id': 'cluster-id',
+              }
+            },
+            $route:      { query: {} },
+            $router:     { replace: mockReplace },
+            $fetchState: { pending: false },
+          },
+          stubs: {
+            Loading:             true,
+            Wizard:              true,
+            Banner:              true,
+            Checkbox:            true,
+            LabeledInput:        true,
+            LabeledSelect:       true,
+            NameNsDescription:   true,
+            Tabbed:              true,
+            Questions:           true,
+            YamlEditor:          true,
+            ResourceCancelModal: true,
+            UnitInput:           true,
+            TypeDescription:     true,
+            LazyImage:           true,
+            ChartReadme:         true,
+            ButtonGroup:         true,
+          }
+        },
+        data() {
+          return {
+            existing: false,
+            chart:    null,
+          };
+        }
+      });
+
+      jest.spyOn((wrapper.vm as any), 'appLocation').mockReturnValue(expectedLocation);
+
+      (wrapper.vm as any).cancel();
+
+      expect(mockReplace).toHaveBeenCalledWith(expectedLocation);
+    });
+  });
 });

package/pages/c/_cluster/apps/charts/chart.vue

@@ -4,19 +4,23 @@ import ChartMixin from '@shell/mixins/chart';
 import { Banner } from '@components/Banner';
 import ChartReadme from '@shell/components/ChartReadme';
 import LazyImage from '@shell/components/LazyImage';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 import isEqual from 'lodash/isEqual';
 import {
-  CHART, REPO, REPO_TYPE, VERSION, SEARCH_QUERY, CATEGORY, TAG, DEPRECATED
+  CHART, REPO, REPO_TYPE, VERSION, SEARCH_QUERY, CATEGORY, TAG, DEPRECATED, NAMESPACE, NAME, NEW_APP_INSTANCE, _FLAGGED
 } from '@shell/config/query-params';
 import { DATE_FORMAT } from '@shell/store/prefs';
-import { ZERO_TIME } from '@shell/config/types';
+import { isMissingDate } from '@shell/utils/time';
 import { escapeHtml } from '@shell/utils/string';
 import { mapGetters } from 'vuex';
-import { compatibleVersionsFor } from '@shell/store/catalog';
+import { APP_UPGRADE_STATUS, compatibleVersionsFor } from '@shell/store/catalog';
+import { compareChartVersions } from '@shell/utils/chart';
 import AppChartCardSubHeader from '@shell/pages/c/_cluster/apps/charts/AppChartCardSubHeader';
 import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCardFooter';
 import day from 'dayjs';
 import { RcButton } from '@components/RcButton';
+import { RcButtonSplit } from '@components/RcButtonSplit';
+import { RcDropdownItem } from '@components/RcDropdown';
 
 export default {
   components: {
@@ -24,9 +28,12 @@ export default {
     ChartReadme,
     LazyImage,
     Loading,
+    LabeledSelect,
     AppChartCardSubHeader,
     AppChartCardFooter,
-    RcButton
+    RcButton,
+    RcButtonSplit,
+    RcDropdownItem
   },
 
   mixins: [
@@ -40,9 +47,9 @@ export default {
   data() {
     return {
       SEARCH_QUERY,
-      ZERO_TIME,
-      showLastVersions: 7,
-      showMoreVersions: false,
+      showLastVersions:       7,
+      showMoreVersions:       false,
+      selectedInstalledAppId: null,
     };
   },
 
@@ -50,9 +57,15 @@ export default {
     ...mapGetters(['currentCluster']),
 
     headerContent() {
+      const cardContent = this.chart.cardContent;
+
+      // Override statuses based on selected installed app for the detail page
+      const statuses = this.computeSelectedAppStatuses(cardContent.statuses);
+
       return {
-        ...this.chart.cardContent,
-        subHeaderItems: this.chart.cardContent.subHeaderItems.map((item, i) => i === 0 ? ({
+        ...cardContent,
+        statuses,
+        subHeaderItems: cardContent.subHeaderItems.map((item, i) => i === 0 ? ({
           icon:        'icon-version-alt',
           iconTooltip: { key: 'tableHeaders.version' },
           label:       this.query.versionName
@@ -138,6 +151,57 @@ export default {
       }
 
       return '';
+    },
+
+    /**
+     * Returns the currently selected installed app.
+     * Falls back to this.existing (set by the mixin for targeted charts or URL query params).
+     */
+    selectedInstalledApp() {
+      if (this.selectedInstalledAppId) {
+        return this.installedInstances?.find((app) => app.id === this.selectedInstalledAppId) || null;
+      }
+
+      return this.existing || null;
+    },
+
+    /**
+     * Returns the action for the current state based on the selected app and target version.
+     */
+    currentAction() {
+      const app = this.selectedInstalledApp;
+
+      if (!app) {
+        return { tKey: 'install', icon: 'plus' };
+      }
+
+      const installedVersion = app.spec?.chart?.metadata?.version;
+
+      if (installedVersion === this.targetVersion) {
+        return { tKey: 'edit', icon: 'edit' };
+      }
+
+      if (compareChartVersions(installedVersion, this.targetVersion) < 0) {
+        return { tKey: 'upgrade', icon: 'upgrade-alt' };
+      }
+
+      return { tKey: 'downgrade', icon: 'downgrade-alt' };
+    },
+
+    /**
+     * Returns options for the installed apps selector dropdown.
+     * Adds "(Upgradeable)" suffix to apps that have an upgrade available.
+     */
+    installedAppOptions() {
+      return (this.installedInstances || []).map((app) => {
+        const isUpgradeable = app.upgradeAvailable === APP_UPGRADE_STATUS.SINGLE_UPGRADE;
+        const baseName = `${ app?.metadata?.namespace }/${ app?.metadata?.name }`;
+
+        return {
+          value: app.id,
+          label: isUpgradeable ? `${ baseName } (${ this.t('generic.upgradeable').toLowerCase() })` : baseName
+        };
+      });
     }
 
   },
@@ -153,7 +217,85 @@ export default {
   },
 
   methods: {
-    install() {
+    isMissingDate,
+    /**
+     * Computes statuses for the chart detail page based on the selected installed app.
+     * When an app is selected, shows instance-specific installed/upgradeable status.
+     * When no app is selected (fresh install), returns only deprecated status if applicable.
+     *
+     * @param {Array} defaultStatuses - The default statuses from chart.cardContent
+     * @returns {Array} Statuses array for the selected app context
+     */
+    computeSelectedAppStatuses(defaultStatuses) {
+      const statuses = [];
+
+      // Always include deprecated status if present
+      const deprecatedStatus = defaultStatuses.find((s) => s.icon === 'icon-alert-alt');
+
+      if (deprecatedStatus) {
+        statuses.push(deprecatedStatus);
+      }
+
+      const selectedApp = this.selectedInstalledApp;
+
+      if (!selectedApp) {
+        // No app selected - fresh install, no installed/upgradeable status
+        return statuses;
+      }
+
+      // Check if the selected app is upgradeable
+      const isUpgradeable = selectedApp.upgradeAvailable === APP_UPGRADE_STATUS.SINGLE_UPGRADE;
+
+      if (isUpgradeable) {
+        statuses.push({
+          icon: 'icon-upgrade-alt', color: 'info', tooltip: { key: 'generic.upgradeable' }
+        });
+      }
+
+      // Add installed status with version for the selected app
+      const installedVersion = selectedApp.spec?.chart?.metadata?.version;
+
+      statuses.push({
+        icon: 'icon-confirmation-alt', color: 'success', tooltip: { text: `${ this.t('generic.installed') } (${ installedVersion })` }
+      });
+
+      return statuses;
+    },
+
+    /**
+     * Navigate to install page for the currently selected installed app (edit/upgrade/downgrade).
+     */
+    executeAction() {
+      const app = this.selectedInstalledApp;
+      const query = {
+        [REPO_TYPE]:  this.query.repoType,
+        [REPO]:       this.query.repoName,
+        [CHART]:      this.query.chartName,
+        [VERSION]:    this.query.versionName,
+        [DEPRECATED]: this.query.deprecated,
+      };
+
+      // If editing an existing app, include namespace and name in query
+      if (app) {
+        query[NAMESPACE] = app.metadata.namespace;
+        query[NAME] = app.metadata.name;
+      }
+
+      this.$router.push({
+        name:   'c-cluster-apps-charts-install',
+        params: {
+          cluster: this.$route.params.cluster,
+          product: this.$store.getters['productId'],
+        },
+        query
+      });
+    },
+
+    /**
+     * Navigate to install page to create a new instance of this chart.
+     * Uses NEW_APP_INSTANCE flag to enable version selection in the install wizard.
+     */
+    installNewInstance() {
       this.$router.push({
         name:   'c-cluster-apps-charts-install',
         params: {
@@ -161,14 +303,24 @@ export default {
           product: this.$store.getters['productId'],
         },
         query: {
-          [REPO_TYPE]:  this.query.repoType,
-          [REPO]:       this.query.repoName,
-          [CHART]:      this.query.chartName,
-          [VERSION]:    this.query.versionName,
-          [DEPRECATED]: this.query.deprecated,
+          [REPO_TYPE]:        this.query.repoType,
+          [REPO]:             this.query.repoName,
+          [CHART]:            this.query.chartName,
+          [DEPRECATED]:       this.query.deprecated,
+          [NEW_APP_INSTANCE]: _FLAGGED,
         }
       });
     },
+
+    /**
+     * Handle installed app selection from the dropdown.
+     * Updates selectedInstalledAppId and this.existing so the page reflects the current installed app and displays the correct information for the selected instance.
+     */
+    handleInstalledAppSelect(id) {
+      this.selectedInstalledAppId = id;
+      this.existing = this.installedInstances?.find((app) => app.id === id) ?? null;
+    },
+
     handleHeaderItemClick(type, value) {
       const params = {
         cluster: this.$route.params.cluster,
@@ -194,17 +346,9 @@ export default {
       }
     },
     formatVersionDate(date) {
-      if (date === ZERO_TIME) {
-        return this.t('generic.na');
-      }
-
       return day(date).format('MMM D, YYYY');
     },
     getVersionDateTooltip(date) {
-      if (date === ZERO_TIME) {
-        return this.t('catalog.chart.info.chartVersions.missingVersionDate');
-      }
-
       const dateFormat = escapeHtml(this.$store.getters['prefs/get'](DATE_FORMAT));
 
       return day(date).format(dateFormat);
@@ -297,17 +441,49 @@ export default {
           />
         </div>
       </div>
-      <RcButton
+      <div
         v-if="!requires.length"
-        data-testid="btn-chart-install"
-        class="btn role-primary"
-        @click.prevent="install"
+        class="header-actions"
       >
-        <i
-          :class="['icon', action.icon, 'mmr-2']"
+        <LabeledSelect
+          v-if="installedInstances.length > 1 && canInstallNew"
+          :value="selectedInstalledApp?.id"
+          :options="installedAppOptions"
+          :clearable="false"
+          :aria-label="t('catalog.chart.installedAppsSelector.ariaLabel')"
+          class="installed-apps-selector"
+          data-testid="installed-apps-selector"
+          @update:value="handleInstalledAppSelect"
         />
-        {{ t(`catalog.chart.chartButton.action.${action.tKey}` ) }}
-      </RcButton>
+        <!-- Split button: shown when chart is installed AND can be re-installed -->
+        <RcButtonSplit
+          v-if="selectedInstalledApp && canInstallNew"
+          data-testid="btn-chart-install"
+          size="large"
+          :left-icon="currentAction.icon"
+          @click="executeAction"
+        >
+          {{ t(`catalog.chart.chartButton.action.${currentAction.tKey}` ) }}
+          <template #dropdownCollection>
+            <RcDropdownItem @click="installNewInstance">
+              <template #before>
+                <i class="icon icon-plus" />
+              </template>
+              {{ t('catalog.chart.chartButton.action.installNew') }}
+            </RcDropdownItem>
+          </template>
+        </RcButtonSplit>
+        <!-- Simple button: shown when chart is not installed OR cannot be re-installed -->
+        <RcButton
+          v-else
+          data-testid="btn-chart-install"
+          size="large"
+          :left-icon="currentAction.icon"
+          @click.prevent="executeAction"
+        >
+          {{ t(`catalog.chart.chartButton.action.${currentAction.tKey}` ) }}
+        </RcButton>
+      </div>
     </div>
 
     <div class="dashed-spacer" />
@@ -418,6 +594,7 @@ export default {
               />
             </div>
             <p
+              v-if="!isMissingDate(vers.created)"
               v-clean-tooltip="{ content: getVersionDateTooltip(vers.created), placement: 'left'}"
               class="version-date"
             >
@@ -624,9 +801,16 @@ export default {
       }
     }
 
-    .btn {
+    .header-actions {
       margin-left: auto;
-      height: 40px;
+      display: flex;
+      align-items: flex-start;
+      flex-shrink: 0;
+      gap: 8px;
+
+      .installed-apps-selector {
+        width: 340px;
+      }
     }
 
     .description {

package/pages/c/_cluster/apps/charts/index.vue

@@ -200,7 +200,7 @@ export default {
     tagOptions() {
       const outSet = new Set();
 
-      this.allCharts.forEach((chart) => {
+      this.enabledCharts.forEach((chart) => {
         if (Array.isArray(chart.tags)) {
           chart.tags.forEach((tag) => outSet.add(tag));
         }
@@ -270,7 +270,7 @@ export default {
     categoryOptions() {
       const map = {};
 
-      for ( const chart of this.allCharts ) {
+      for ( const chart of this.enabledCharts ) {
         for ( const c of chart.categories ) {
           if ( !map[c] ) {
             const labelKey = `catalog.charts.categories.${ lcFirst(c) }`;