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

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, getStandaloneReadmeUrl } 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,25 @@ 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,
+          [VERSION]:          this.query.versionName,
+          [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 +347,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);
@@ -220,6 +365,20 @@ export default {
           [VERSION]: version,
         }
       };
+    },
+    openReadme() {
+      const url = getStandaloneReadmeUrl(this.$router, {
+        cluster:              this.$route.params.cluster,
+        repoType:             this.query.repoType,
+        repoName:             this.query.repoName,
+        chartName:            this.query.chartName,
+        versionName:          this.query.versionName || this.targetVersion,
+        deprecated:           this.query.deprecated,
+        showAppReadme:        false,
+        hideReadmeFirstTitle: false,
+      });
+
+      window.open(url, '_blank');
     }
   },
 };
@@ -297,17 +456,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" />
@@ -359,13 +550,27 @@ export default {
     </div>
 
     <div class="chart-body">
-      <ChartReadme
+      <div
         v-if="hasReadme"
-        :version-info="versionInfo"
-        :show-app-readme="false"
-        :hide-readme-first-title="false"
-        class="chart-body__readme"
-      />
+        class="readme-wrapper"
+      >
+        <RcButton
+          v-clean-tooltip="t('catalog.chart.viewReadmeSeparately.tooltip')"
+          class="open-readme-button"
+          secondary
+          rightIcon="external-link"
+          @click="openReadme()"
+        >
+          {{ t('catalog.chart.viewReadmeSeparately.label') }}
+          <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
+        </RcButton>
+        <ChartReadme
+          :version-info="versionInfo"
+          :show-app-readme="false"
+          :hide-readme-first-title="false"
+          class="chart-body__readme"
+        />
+      </div>
       <div
         v-else
         class="chart-body__readme"
@@ -418,6 +623,7 @@ export default {
               />
             </div>
             <p
+              v-if="!isMissingDate(vers.created)"
               v-clean-tooltip="{ content: getVersionDateTooltip(vers.created), placement: 'left'}"
               class="version-date"
             >
@@ -624,9 +830,16 @@ export default {
       }
     }
 
-    .btn {
+    .header-actions {
       margin-left: auto;
-      height: 40px;
+      display: flex;
+      align-items: flex-start;
+      flex-shrink: 0;
+      gap: 16px;
+
+      .installed-apps-selector {
+        width: 340px;
+      }
     }
 
     .description {
@@ -643,6 +856,29 @@ export default {
 
   .chart-body {
     display: flex;
+    .readme-wrapper {
+      position: relative;
+      flex: 1;
+
+      .open-readme-button {
+        display: flex;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 100ms ease-in;
+        position: absolute;
+        top: 12px;
+        right: 24px;
+      }
+
+      &:hover,
+      &:focus-within {
+        .open-readme-button {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+
     &__readme {
       flex: 1;
       min-width: 400px;

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) }`;

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

@@ -30,7 +30,7 @@ import {
   AUTH_TYPE, NAMESPACE as NAMESPACE_TYPE
 } from '@shell/config/types';
 import {
-  CHART, FROM_CLUSTER, FROM_TOOLS, HIDE_SIDE_NAV, NAMESPACE, REPO, REPO_TYPE, VERSION, _FLAGGED
+  CHART, FROM_CLUSTER, FROM_TOOLS, HIDE_SIDE_NAV, NEW_APP_INSTANCE, NAMESPACE, REPO, REPO_TYPE, VERSION, _FLAGGED
 } from '@shell/config/query-params';
 import { CATALOG as CATALOG_ANNOTATIONS, PROJECT } from '@shell/config/labels-annotations';
 
@@ -41,7 +41,7 @@ import {
 import { ignoreVariables } from './install.helpers';
 import { findBy, insertAt } from '@shell/utils/array';
 import { saferDump } from '@shell/utils/create-yaml';
-import { LINUX, WINDOWS } from '@shell/store/catalog';
+import { WINDOWS, isRancherRepo, getPermittedOSs } from '@shell/store/catalog';
 import { SETTING } from '@shell/config/settings';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret.vue';
 import { generateRandomAlphaString } from '@shell/utils/string';
@@ -602,8 +602,11 @@ export default {
     },
 
     showSelectVersionOrChart() {
-      // Allow the user to choose a version if the app exists OR they've come from tools
-      return this.existing || (FROM_TOOLS in this.$route.query);
+      // Allow the user to choose a version if:
+      // - the app exists (editing/upgrading)
+      // - OR they've come from tools
+      // - OR they're installing a new instance of an already-installed chart
+      return this.existing || (FROM_TOOLS in this.$route.query) || (NEW_APP_INSTANCE in this.$route.query);
     },
 
     showNameEditor() {
@@ -763,14 +766,17 @@ export default {
     },
 
     windowsIncompatible() {
-      if (this.chart?.windowsIncompatible) {
-        return this.t('catalog.charts.windowsIncompatible');
-      }
       if (this.versionInfo) {
-        const incompatibleVersion = !(this.versionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.PERMITTED_OS] || LINUX).includes('windows');
+        const isRancher = isRancherRepo(this.repo, this.chart);
+        const permittedSystems = getPermittedOSs(this.versionInfo?.chart?.annotations, isRancher);
+        const incompatibleVersion = permittedSystems.length > 0 && !permittedSystems.includes('windows');
+
+        if (incompatibleVersion) {
+          if (!this.chart?.windowsIncompatible) {
+            return this.t('catalog.charts.versionWindowsIncompatible');
+          }
 
-        if (incompatibleVersion && !this.chart.windowsIncompatible) {
-          return this.t('catalog.charts.versionWindowsIncompatible');
+          return this.t('catalog.charts.windowsIncompatible');
         }
       }
 
@@ -1110,6 +1116,8 @@ export default {
         this.$router.replace(this.clusterToolsLocation());
       } else if (this.$route.query[FROM_CLUSTER] === _FLAGGED) {
         this.$router.replace(this.clustersLocation());
+      } else if (!this.chart) {
+        this.$router.replace(this.appLocation());
       } else {
         this.$router.replace(this.chartLocation(false));
       }