@rancher/shell 3.0.5-rc.8 → 3.0.5-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.5-rc.8",
+  "version": "3.0.5-rc.9",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-ec2": "3.863.0",
-    "@aws-sdk/client-eks": "3.863.0",
+    "@aws-sdk/client-eks": "3.879.0",
     "@aws-sdk/client-iam": "3.863.0",
     "@aws-sdk/client-kms": "3.863.0",
     "@smithy/fetch-http-handler": "5.1.1",
@@ -52,7 +52,7 @@
     "add": "2.0.6",
     "ansi_up": "5.0.0",
     "axios-retry": "3.1.9",
-    "axios": "1.8.4",
+    "axios": "1.12.2",
     "babel-eslint": "10.1.0",
     "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-vue": "2.0.2",
@@ -64,7 +64,7 @@
     "color": "4.2.3",
     "cookie-universal": "2.2.2",
     "cookie": "0.7.0",
-    "core-js": "3.40.0",
+    "core-js": "3.45.0",
     "cron-validator": "1.4.0",
     "cronstrue": "2.53.0",
     "cross-env": "7.0.3",
@@ -74,7 +74,7 @@
     "cypress": "11.1.0",
     "d3-selection": "3.0.0",
     "d3": "7.3.0",
-    "dayjs": "1.8.29",
+    "dayjs": "1.11.18",
     "defu": "5.0.1",
     "diff2html": "3.4.24",
     "dompurify": "3.2.5",
@@ -84,7 +84,7 @@
     "eslint-import-resolver-node": "0.3.9",
     "eslint-module-utils": "2.6.1",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-n": "15.2.0",
     "eslint-plugin-vue": "9.32.0",
@@ -130,15 +130,15 @@
     "ufo": "0.7.11",
     "unfetch": "4.2.0",
     "url-parse": "1.5.10",
-    "vue-router": "4.5.0",
+    "vue-router": "4.5.1",
     "vue-select": "4.0.0-beta.6",
     "vue-server-renderer": "2.7.16",
-    "vue": "^3.2.13",
+    "vue": "3.5.18",
     "vue3-resize": "0.2.0",
     "vue3-virtual-scroll-list": "0.2.1",
     "vuedraggable": "4.1.0",
     "vuex": "4.1.0",
-    "webpack-bundle-analyzer": "4.5.0",
+    "webpack-bundle-analyzer": "4.10.2",
     "webpack-virtual-modules": "0.4.3",
     "worker-loader": "3.0.8",
     "xterm-addon-canvas": "0.5.0",
@@ -172,4 +172,4 @@
       ".vue"
     ]
   }
-}
+}

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

@@ -5,12 +5,15 @@ interface FooterItem {
   icon?: string;
   iconTooltip?: Record<{key?: string, text?: string}>;
   labels: string[];
+  labelTooltip?: string;
+  type?: string;
 }
 
 const emit = defineEmits<{(e: 'click:item', type: string, label: string): void; }>();
 
 defineProps<{
   items: FooterItem[];
+  clickable?: boolean;
 }>();
 
 function onClickItem(type: string, label: string) {
@@ -32,20 +35,32 @@ function onClickItem(type: string, label: string) {
         v-clean-tooltip="t(footerItem.iconTooltip?.key)"
         :class="['icon', 'app-chart-card-footer-item-icon', footerItem.icon]"
       />
-      <rc-item-card-action
+      <template
         v-for="(label, j) in footerItem.labels"
         :key="j"
-        v-clean-tooltip="footerItem.labelTooltip"
-        class="app-chart-card-footer-item-text secondary-text-link"
-        data-testid="app-chart-card-footer-item-text"
-        tabindex="0"
-        :aria-label="t('catalog.charts.appChartCard.footerItem.ariaLabel')"
-        @click="onClickItem(footerItem.type, label)"
-        @keydown.enter="onClickItem(footerItem.type, label)"
-        @keydown.space.prevent="onClickItem(footerItem.type, label)"
       >
-        {{ label }}<span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
-      </rc-item-card-action>
+        <rc-item-card-action
+          v-if="clickable && footerItem.type"
+          v-clean-tooltip="footerItem.labelTooltip"
+          class="app-chart-card-footer-item-text secondary-text-link"
+          data-testid="app-chart-card-footer-item-text"
+          tabindex="0"
+          :aria-label="t('catalog.charts.appChartCard.footerItem.ariaLabel')"
+          @click="onClickItem(footerItem.type, label)"
+        >
+          {{ label }}
+          <span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+        </rc-item-card-action>
+        <span
+          v-else
+          v-clean-tooltip="footerItem.labelTooltip"
+          class="app-chart-card-footer-item-text"
+          data-testid="app-chart-card-footer-item-text"
+        >
+          {{ label }}
+          <span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+        </span>
+      </template>
     </div>
   </div>
 </template>

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

@@ -6,7 +6,7 @@ import ChartReadme from '@shell/components/ChartReadme';
 import LazyImage from '@shell/components/LazyImage';
 import isEqual from 'lodash/isEqual';
 import {
-  CHART, REPO, REPO_TYPE, VERSION, SEARCH_QUERY, CATEGORY, TAG
+  CHART, REPO, REPO_TYPE, VERSION, SEARCH_QUERY, CATEGORY, TAG, DEPRECATED
 } from '@shell/config/query-params';
 import { DATE_FORMAT } from '@shell/store/prefs';
 import { ZERO_TIME } from '@shell/config/types';
@@ -50,7 +50,14 @@ export default {
     ...mapGetters(['currentCluster']),
 
     headerContent() {
-      return this.chart.cardContent;
+      return {
+        ...this.chart.cardContent,
+        subHeaderItems: this.chart.cardContent.subHeaderItems.map((item, i) => i === 0 ? ({
+          icon:        'icon-version-alt',
+          iconTooltip: { key: 'tableHeaders.version' },
+          label:       this.query.versionName
+        }) : item)
+      };
     },
 
     versions() {
@@ -144,10 +151,11 @@ 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,
+          [REPO_TYPE]:  this.query.repoType,
+          [REPO]:       this.query.repoName,
+          [CHART]:      this.query.chartName,
+          [VERSION]:    this.query.versionName,
+          [DEPRECATED]: this.query.deprecated,
         }
       });
     },
@@ -210,17 +218,6 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <main v-else>
-    <Banner
-      v-if="versionInfoError"
-      color="error"
-      :label="versionInfoError"
-    />
-    <Banner
-      v-if="warningMessage"
-      color="warning"
-      :label="warningMessage"
-      data-testid="deprecation-and-experimental-banner"
-    />
     <div
       v-if="chart"
       class="chart-header"
@@ -284,6 +281,7 @@ export default {
         </div>
         <div class="header-bottom">
           <AppChartCardFooter
+            :clickable="true"
             :items="headerContent.footerItems"
             @click:item="handleHeaderItemClick"
           />
@@ -296,15 +294,26 @@ export default {
         @click.prevent="install"
       >
         <i
-          v-if="action === 'upgrade'"
-          class="icon icon-upgrade-alt mmr-2"
+          :class="['icon', action.icon, 'mmr-2']"
         />
-        {{ t(`asyncButton.${action}.action` ) }}
+        {{ t(`catalog.chart.chartButton.action.${action.tKey}` ) }}
       </RcButton>
     </div>
 
     <div class="dashed-spacer" />
 
+    <Banner
+      v-if="versionInfoError"
+      color="error"
+      :label="versionInfoError"
+    />
+    <Banner
+      v-if="warningMessage"
+      color="warning"
+      :label="warningMessage"
+      data-testid="deprecation-and-experimental-banner"
+    />
+
     <div
       v-if="requires.length || warnings.length || targetedAppWarning || osWarning"
       class="chart-banners"

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

@@ -624,6 +624,7 @@ export default {
             >
               <AppChartCardFooter
                 :items="card.footerItems"
+                :clickable="true"
                 @click:item="handleFooterItemClick"
               />
             </template>

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

@@ -629,19 +629,19 @@ export default {
     step1Description() {
       const descriptionKey = this.steps.find((s) => s.name === 'basics').descriptionKey;
 
-      return this.$store.getters['i18n/withFallback'](descriptionKey, { action: this.action, existing: !!this.existing }, '');
+      return this.$store.getters['i18n/withFallback'](descriptionKey, { action: this.action.name, existing: !!this.existing }, '');
     },
 
     step2Description() {
       const descriptionKey = this.steps.find((s) => s.name === 'helmValues').descriptionKey;
 
-      return this.$store.getters['i18n/withFallback'](descriptionKey, { action: this.action, existing: !!this.existing }, '');
+      return this.$store.getters['i18n/withFallback'](descriptionKey, { action: this.action.name, existing: !!this.existing }, '');
     },
 
     step3Description() {
       const descriptionKey = this.steps.find((s) => s.name === 'helmCli').descriptionKey;
 
-      return this.$store.getters['i18n/withFallback'](descriptionKey, { action: this.action, existing: !!this.existing }, '');
+      return this.$store.getters['i18n/withFallback'](descriptionKey, { action: this.action.name, existing: !!this.existing }, '');
     },
 
     steps() {
@@ -1299,7 +1299,8 @@ export default {
       :edit-first-step="true"
       :banner-title="stepperName"
       :banner-title-subtext="stepperSubtext"
-      :finish-mode="action"
+      :finish-mode="action.name"
+      :header-mode="action.tKey"
       class="wizard"
       :class="{'windowsIncompatible': windowsIncompatible}"
       @cancel="cancel"
@@ -1427,7 +1428,7 @@ export default {
           <Checkbox
             v-model:value="showCommandStep"
             class="mb-20"
-            :label="t('catalog.install.steps.helmCli.checkbox', { action, existing: !!existing })"
+            :label="t('catalog.install.steps.helmCli.checkbox', { action: action.name, existing: !!existing })"
           />
 
           <Checkbox

package/pages/c/_cluster/explorer/tools/__tests__/index.test.ts

@@ -2,23 +2,29 @@ import { clone } from '@shell/utils/object';
 import ClusterTools from '@shell/pages/c/_cluster/explorer/tools/index.vue';
 import { shallowMount } from '@vue/test-utils';
 import { MANAGEMENT } from '@shell/config/types';
+import { RcItemCard } from '@components/RcItemCard';
+import { APP_UPGRADE_STATUS } from '@shell/store/catalog';
 
 describe('page: cluster tools', () => {
   const mountOptions = {
     computed: {
-      options: () => [
+      appChartCards: () => [
         {
-          chart: {
-            id:       'cluster/rancher-charts/rancher-alerting-drivers',
-            iconName: 'icon',
-          },
-          app: {}
+          id:             'cluster/rancher-charts/rancher-alerting-drivers',
+          header:         { title: { text: 'Rancher Alerting Drivers' } },
+          content:        { text: 'Some description' },
+          image:          { src: '' },
+          subHeaderItems: [],
+          installedApp:   { spec: { chart: { metadata: { version: '1.0.0' } } } },
+          rawChart:       { versions: [{ version: '1.0.0' }], blocked: false }
         }
       ]
     },
-    global: {
+    methods: { getCardActions: (ClusterTools as any).methods.getCardActions },
+    global:  {
       mocks: {
         $route:      { query: {} },
+        t:           (key: string) => key,
         $fetchState: {
           pending: false, error: true, timestamp: Date.now()
         },
@@ -36,7 +42,7 @@ describe('page: cluster tools', () => {
               }
             },
             currentCluster: { id: 'cluster', status: { provider: 'provider' } },
-            'i18n/t':       jest.fn(),
+            'i18n/t':       (key: string) => key,
           }
         }
       },
@@ -44,10 +50,10 @@ describe('page: cluster tools', () => {
   };
 
   it('should show apps catalog', async() => {
-    const wrapper = shallowMount(ClusterTools, mountOptions);
+    const wrapper = shallowMount(ClusterTools, { ...mountOptions, methods: { getCardActions: () => [] } });
 
     await (ClusterTools as any).fetch.call(wrapper.vm);
-    const cards = wrapper.find('[data-testid^="cluster-tools-app"]');
+    const cards = wrapper.findComponent(RcItemCard);
 
     expect(cards.exists()).toBe(true);
   });
@@ -61,11 +67,95 @@ describe('page: cluster tools', () => {
       }
     };
 
-    const wrapper = shallowMount(ClusterTools, options);
+    const wrapper = shallowMount(ClusterTools, { ...options, methods: { getCardActions: () => [] } });
 
     await (ClusterTools as any).fetch.call(wrapper.vm);
-    const cards = wrapper.find('[data-testid^="cluster-tools-app"]');
+    const cards = wrapper.findComponent(RcItemCard);
 
     expect(cards.exists()).toBe(true);
   });
+
+  describe('getCardActions', () => {
+    it('should return "install" action for an uninstalled chart', () => {
+      const wrapper = shallowMount(ClusterTools, mountOptions);
+      const card = {
+        installedApp: null,
+        rawChart:     { blocked: false }
+      };
+      const actions = wrapper.vm.getCardActions(card);
+
+      expect(actions).toHaveLength(1);
+      expect(actions[0]).toStrictEqual({
+        label:   'catalog.tools.action.install',
+        action:  'install',
+        icon:    'icon-plus',
+        enabled: true
+      });
+    });
+
+    it('should return all actions for an installed chart', () => {
+      const wrapper = shallowMount(ClusterTools, mountOptions);
+      const card = {
+        installedApp: {
+          spec:             { chart: { metadata: { version: '1.0.1' } } },
+          upgradeAvailable: APP_UPGRADE_STATUS.SINGLE_UPGRADE
+        },
+        rawChart: { versions: [{ version: '1.0.2' }, { version: '1.0.1' }, { version: '1.0.0' }] }
+      };
+      const actions = wrapper.vm.getCardActions(card);
+
+      expect(actions).toHaveLength(5); // Upgrade, Edit, Downgrade, separator, Remove
+      expect(actions[0]).toStrictEqual({
+        label:  'catalog.tools.action.upgrade',
+        icon:   'icon-upgrade-alt',
+        action: 'upgrade'
+      });
+      expect(actions[1]).toStrictEqual({
+        label:  'catalog.tools.action.edit',
+        icon:   'icon-edit',
+        action: 'edit'
+      });
+      expect(actions[2]).toStrictEqual({
+        label:  'catalog.tools.action.downgrade',
+        icon:   'icon-history',
+        action: 'downgrade'
+      });
+      expect(actions[3]).toStrictEqual({ divider: true });
+      expect(actions[4]).toStrictEqual({
+        label:  'catalog.tools.action.remove',
+        icon:   'icon-delete',
+        action: 'remove'
+      });
+    });
+
+    it('should not show upgrade if not available', () => {
+      const wrapper = shallowMount(ClusterTools, mountOptions);
+      const card = {
+        installedApp: {
+          spec:             { chart: { metadata: { version: '1.0.2' } } },
+          upgradeAvailable: APP_UPGRADE_STATUS.NO_UPGRADE
+        },
+        rawChart: { versions: [{ version: '1.0.2' }, { version: '1.0.1' }, { version: '1.0.0' }] }
+      };
+      const actions = wrapper.vm.getCardActions(card);
+
+      expect(actions.find((a) => a.action === 'upgrade')).toBeUndefined();
+      expect(actions).toHaveLength(4); // Edit, Downgrade, separator, Remove
+    });
+
+    it('should not show downgrade if not available', () => {
+      const wrapper = shallowMount(ClusterTools, mountOptions);
+      const card = {
+        installedApp: {
+          spec:             { chart: { metadata: { version: '1.0.0' } } },
+          upgradeAvailable: APP_UPGRADE_STATUS.SINGLE_UPGRADE
+        },
+        rawChart: { versions: [{ version: '1.0.1' }, { version: '1.0.0' }] }
+      };
+      const actions = wrapper.vm.getCardActions(card);
+
+      expect(actions.find((a) => a.action === 'downgrade')).toBeUndefined();
+      expect(actions).toHaveLength(4); // Upgrade, Edit, separator, Remove
+    });
+  });
 });