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

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

@@ -52,4 +52,97 @@ describe('page: Charts Index', () => {
       expect(hasExtensionCategory).toBe(false);
     });
   });
+
+  describe('method: loadMore', () => {
+    const createContext = (overrides: Record<string, any> = {}) => ({
+      isLoadingMore:             false,
+      visibleChartsCount:        30,
+      initialVisibleChartsCount: 30,
+      filteredCharts:            new Array(100),
+      _loadMoreTimer:            null,
+      $nextTick:                 (cb: () => void) => cb(),
+      ...overrides,
+    });
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should set isLoadingMore, then increment visibleChartsCount and clear the flag after the delay', () => {
+      const ctx = createContext();
+
+      (Charts.methods!.loadMore as () => void).call(ctx);
+
+      expect(ctx.isLoadingMore).toBe(true);
+      expect(ctx.visibleChartsCount).toBe(30);
+      expect(ctx._loadMoreTimer).not.toBeNull();
+
+      jest.runAllTimers();
+
+      expect(ctx.visibleChartsCount).toBe(60);
+      expect(ctx.isLoadingMore).toBe(false);
+      expect(ctx._loadMoreTimer).toBeNull();
+    });
+
+    it('should do nothing when already loading', () => {
+      const ctx = createContext({ isLoadingMore: true });
+
+      (Charts.methods!.loadMore as () => void).call(ctx);
+
+      expect(ctx._loadMoreTimer).toBeNull();
+      expect(ctx.visibleChartsCount).toBe(30);
+    });
+
+    it('should do nothing when all charts are already visible', () => {
+      const ctx = createContext({ visibleChartsCount: 100 });
+
+      (Charts.methods!.loadMore as () => void).call(ctx);
+
+      expect(ctx.isLoadingMore).toBe(false);
+      expect(ctx._loadMoreTimer).toBeNull();
+    });
+  });
+
+  describe('method: resetLazyLoadState', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should reset state and cancel a pending loadMore so visibleChartsCount is not incremented after reset', () => {
+      const ctx: Record<string, any> = {
+        isLoadingMore:             false,
+        visibleChartsCount:        30,
+        initialVisibleChartsCount: 30,
+        observerInitialized:       true,
+        hasOverflow:               true,
+        filteredCharts:            new Array(100),
+        _loadMoreTimer:            null,
+        $nextTick:                 (cb: () => void) => cb(),
+      };
+
+      (Charts.methods!.loadMore as () => void).call(ctx);
+      expect(ctx._loadMoreTimer).not.toBeNull();
+
+      (Charts.methods!.resetLazyLoadState as () => void).call(ctx);
+
+      expect(ctx.visibleChartsCount).toBe(30);
+      expect(ctx.observerInitialized).toBe(false);
+      expect(ctx.hasOverflow).toBe(false);
+      expect(ctx.isLoadingMore).toBe(false);
+      expect(ctx._loadMoreTimer).toBeNull();
+
+      jest.runAllTimers();
+
+      // The cancelled timer must not have fired — count stays at the reset value.
+      expect(ctx.visibleChartsCount).toBe(30);
+    });
+  });
 });

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

@@ -859,6 +859,7 @@ export default {
     .readme-wrapper {
       position: relative;
       flex: 1;
+      min-width: 0;
 
       .open-readme-button {
         display: flex;
@@ -881,7 +882,7 @@ export default {
 
     &__readme {
       flex: 1;
-      min-width: 400px;
+      min-width: 0;
       padding: 12px 24px;
     }
     &__info {

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

@@ -25,6 +25,7 @@ import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCard
 import AddRepoLink from '@shell/pages/c/_cluster/apps/charts/AddRepoLink';
 import StatusLabel from '@shell/pages/c/_cluster/apps/charts/StatusLabel';
 import RichTranslation from '@shell/components/RichTranslation.vue';
+import SubtleLink from '@shell/components/SubtleLink.vue';
 import { getLatestCompatibleVersion } from '@shell/utils/chart';
 import Select from '@shell/components/form/Select';
 import { getVersionData } from '@shell/config/version';
@@ -36,6 +37,8 @@ const createInitialFilters = () => ({
   tags:       []
 });
 
+const LOAD_MORE_DELAY_MS = 500;
+
 export default {
   name:       'Charts',
   components: {
@@ -47,7 +50,8 @@ export default {
     AppChartCardSubHeader,
     AppChartCardFooter,
     Select,
-    RichTranslation
+    RichTranslation,
+    SubtleLink,
   },
 
   async fetch() {
@@ -84,6 +88,10 @@ export default {
     if (this.observer) {
       this.observer.disconnect();
     }
+    if (this._loadMoreTimer) {
+      clearTimeout(this._loadMoreTimer);
+      this._loadMoreTimer = null;
+    }
   },
 
   data() {
@@ -145,6 +153,7 @@ export default {
       canCreateRepos:            false,
       showAppCollectionBanner:   true,
       isPrime:                   getVersionData().RancherPrime === 'true',
+      isLoadingMore:             false,
     };
   },
 
@@ -482,6 +491,11 @@ export default {
       this.visibleChartsCount = this.initialVisibleChartsCount;
       this.observerInitialized = false;
       this.hasOverflow = false;
+      this.isLoadingMore = false;
+      if (this._loadMoreTimer) {
+        clearTimeout(this._loadMoreTimer);
+        this._loadMoreTimer = null;
+      }
     },
 
     // The lazy loading implementation has two parts
@@ -529,10 +543,17 @@ export default {
     },
 
     loadMore() {
-      if (this.visibleChartsCount >= this.filteredCharts.length) {
+      if (this.isLoadingMore || this.visibleChartsCount >= this.filteredCharts.length) {
         return;
       }
-      this.visibleChartsCount += this.initialVisibleChartsCount;
+      this.isLoadingMore = true;
+      this._loadMoreTimer = setTimeout(() => {
+        this._loadMoreTimer = null;
+        this.visibleChartsCount += this.initialVisibleChartsCount;
+        this.$nextTick(() => {
+          this.isLoadingMore = false;
+        });
+      }, LOAD_MORE_DELAY_MS);
     },
 
     initIntersectionObserver() {
@@ -683,16 +704,13 @@ export default {
             tag="span"
           >
             <template #docsUrl="{ content }">
-              <a
+              <SubtleLink
                 :href="`${DOCS_BASE}/how-to-guides/new-user-guides/helm-charts-in-rancher`"
-                class="secondary-text-link"
-                tabindex="0"
                 target="_blank"
-                rel="noopener noreferrer nofollow"
+                :open-in-new-tab-label="t('generic.opensInNewTab')"
               >
-                <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
-                {{ content }} <i class="icon icon-external-link" />
-              </a>
+                {{ content }}
+              </SubtleLink>
             </template>
           </RichTranslation>
         </div>
@@ -785,6 +803,16 @@ export default {
             </template>
           </rc-item-card>
         </div>
+        <div
+          v-if="isLoadingMore"
+          class="loading-more"
+          role="status"
+          aria-live="polite"
+          data-testid="charts-loading-more"
+        >
+          <i class="icon icon-spinner icon-spin" />
+          {{ t('catalog.charts.loadingMore') }}
+        </div>
         <div
           ref="sentinel"
           class="sentinel-charts"
@@ -838,6 +866,16 @@ export default {
   .sentinel-charts {
     height: 1px;
   }
+
+  .loading-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap);
+    padding: 16px;
+    font-size: 14px;
+    color: var(--muted);
+  }
 }
 
 .total-and-sort {

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

@@ -22,7 +22,6 @@ import Tabbed from '@shell/components/Tabbed';
 import UnitInput from '@shell/components/form/UnitInput';
 import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
 import Wizard from '@shell/components/Wizard';
-import TypeDescription from '@shell/components/TypeDescription';
 import ChartMixin from '@shell/mixins/chart';
 import ChildHook, { BEFORE_SAVE_HOOKS, AFTER_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import {
@@ -41,7 +40,7 @@ import {
 import { ignoreVariables } from './install.helpers';
 import { findBy, insertAt } from '@shell/utils/array';
 import { saferDump } from '@shell/utils/create-yaml';
-import { WINDOWS, isRancherRepo, getPermittedOSs } from '@shell/store/catalog';
+import { WINDOWS } from '@shell/store/catalog';
 import { SETTING } from '@shell/config/settings';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret.vue';
 import { generateRandomAlphaString } from '@shell/utils/string';
@@ -96,7 +95,6 @@ export default {
     UnitInput,
     YamlEditor,
     Wizard,
-    TypeDescription,
     SelectOrCreateAuthSecret
   },
 
@@ -601,6 +599,10 @@ export default {
       return out;
     },
 
+    selectedVersionOption() {
+      return this.filteredVersions?.find((v) => v.id === this.query.versionName) || this.query.versionName;
+    },
+
     showSelectVersionOrChart() {
       // Allow the user to choose a version if:
       // - the app exists (editing/upgrading)
@@ -680,7 +682,7 @@ export default {
     },
 
     stepperSubtext() {
-      return this.existing && this.currentVersion !== this.targetVersion ? `${ this.currentVersion } > ${ this.targetVersion }` : this.targetVersion;
+      return this.mappedVersions?.find((v) => v.id === this.targetVersion)?.label || this.targetVersion;
     },
 
     readmeWindowName() {
@@ -765,24 +767,6 @@ export default {
       return { name: 'c-cluster-legacy-project' };
     },
 
-    windowsIncompatible() {
-      if (this.versionInfo) {
-        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');
-          }
-
-          return this.t('catalog.charts.windowsIncompatible');
-        }
-      }
-
-      return null;
-    },
-
     /**
      * Check if the chart contains `systemDefaultRegistry` properties.
      * If not we shouldn't apply the setting, because if the option
@@ -1554,10 +1538,9 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div
     v-else-if="!legacyApp && !mcapp"
-    class="install-steps pt-20"
+    class="install-steps"
     :class="{ 'isPlainLayout': isPlainLayout}"
   >
-    <TypeDescription resource="chart" />
     <Wizard
       v-if="value"
       :steps="steps"
@@ -1567,25 +1550,45 @@ export default {
       :banner-title-subtext="stepperSubtext"
       :finish-mode="action.name"
       :header-mode="action.tKey"
+      :show-step-header="false"
       class="wizard"
-      :class="{'windowsIncompatible': windowsIncompatible}"
       @cancel="cancel"
       @finish="finish"
     >
-      <template #bannerTitleImage>
-        <div>
-          <div class="logo-bg">
-            <LazyImage
-              :src="chart ? chart.icon : ''"
-              class="logo"
-            />
+      <template #bannerTitle>
+        <div class="chart-title-container">
+          <div class="logo-container">
+            <div class="logo-box">
+              <LazyImage
+                :src="chart ? chart.icon : ''"
+                class="logo"
+              />
+            </div>
+          </div>
+          <div class="chart-title">
+            <h1>
+              <router-link
+                v-if="chart"
+                :to="chartLocation()"
+                data-testid="chart-install-name-link"
+              >
+                {{ stepperName }}
+              </router-link>
+              <span v-else>
+                {{ stepperName }}
+              </span>: {{ t(`wizard.${action.tKey}`) }}
+            </h1>
+            <span
+              v-if="stepperSubtext"
+              class="subtext"
+            >
+              <i
+                v-clean-tooltip="t('tableHeaders.version')"
+                class="icon icon-version-alt"
+              />
+              {{ stepperSubtext }}
+            </span>
           </div>
-          <label
-            v-if="windowsIncompatible"
-            class="os-label"
-          >
-            {{ windowsIncompatible }}
-          </label>
         </div>
       </template>
       <template #basics>
@@ -1629,20 +1632,26 @@ export default {
             v-if="showSelectVersionOrChart"
             class="row mb-20"
           >
-            <div class="col span-4">
-              <!-- We have a chart for the app, let the user select a new version -->
+            <!-- We have a chart for the app, let the user select a new version -->
+            <div
+              v-if="chart"
+              class="col span-4"
+            >
               <LabeledSelect
-                v-if="chart"
                 data-testid="chart-version-selector"
                 :label="t('catalog.install.version')"
-                :value="query.versionName"
+                :value="selectedVersionOption"
                 :options="filteredVersions"
                 :selectable="version => !version.disabled"
                 @update:value="selectVersion"
               />
-              <!-- Can't find the chart for the app, let the user try to select one -->
+            </div>
+            <!-- Can't find the chart for the app, let the user try to select one -->
+            <div
+              v-else
+              class="col span-4"
+            >
               <LabeledSelect
-                v-else
                 :label="t('catalog.install.chart')"
                 :value="chart"
                 :options="charts"
@@ -1791,7 +1800,7 @@ export default {
             <LabeledSelect
               v-if="chart"
               :label="t('catalog.install.version')"
-              :value="query.versionName"
+              :value="selectedVersionOption"
               :options="filteredVersions"
               :selectable="version => !version.disabled"
               @update:value="selectVersion"
@@ -2046,30 +2055,37 @@ export default {
     :class="{ 'isPlainLayout': isPlainLayout}"
   >
     <div class="outer-container">
-      <div class="header mb-20">
-        <div class="title">
-          <div class="top choice-banner">
-            <div class="title">
-              <!-- Logo -->
-              <slot name="bannerTitleImage">
-                <div class="round-image">
-                  <LazyImage
-                    :src="chart ? chart.icon : ''"
-                    class="logo"
-                  />
-                </div>
-              </slot>
-              <!-- Title with subtext -->
-              <div class="subtitle">
-                <h2 v-if="stepperName">
-                  {{ stepperName }}
-                </h2>
-                <span
-                  v-if="stepperSubtext"
-                  class="subtext"
-                >{{ stepperSubtext }}</span>
+      <div class="header mmt-6 mmb-6">
+        <div class="top choice-banner">
+          <div class="chart-title-container mmb-6">
+            <div class="logo-container">
+              <div class="logo-box">
+                <LazyImage
+                  :src="chart ? chart.icon : ''"
+                  class="logo"
+                />
               </div>
             </div>
+            <div class="chart-title">
+              <h2 v-if="stepperName">
+                <router-link
+                  :to="chartLocation()"
+                  data-testid="chart-install-name-link"
+                >
+                  {{ stepperName }}
+                </router-link>
+              </h2>
+              <span
+                v-if="stepperSubtext"
+                class="subtext"
+              >
+                <i
+                  v-clean-tooltip="t('tableHeaders.version')"
+                  class="icon icon-version-alt"
+                />
+                {{ stepperSubtext }}
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -2100,12 +2116,16 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .chart-version-footnote {
+    margin-top: 8px;
+    color: var(--input-label);
+  }
+
   $title-height: 50px;
   $padding: 5px;
   $slideout-width: 35%;
 
   .install-steps {
-    padding-top: 0;
     height: 0;
     position: relative;
     overflow: hidden;
@@ -2121,37 +2141,29 @@ export default {
     }
   }
 
-  .wizard {
-    .logo-bg {
-      margin-right: 10px;
-      height: $title-height;
-      width: $title-height;
-      background-color: white;
-      border: $padding solid white;
-      border-radius: calc( 3 * var(--border-radius));
-      position: relative;
-    }
+  .logo-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-    .logo {
-      max-height: $title-height - 2 * $padding;
-      max-width: $title-height - 2 * $padding;
-      position: absolute;
-      width: auto;
-      height: auto;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      margin: auto;
-    }
+    .logo-box {
+      width: 60px;
+      height: 60px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #fff;
+      border-radius: var(--border-radius);
 
-    // Hack - We're adding an absolute tag under the logo that we want to consume space without breaking vertical alignment of row.
-    // W  ith the slots available this isn't possible without adding tag specific styles to the root wizard classes
-    &.windowsIncompatible {
-      :deep() .header {
-        padding-bottom: 15px;
+      .logo {
+        width: 48px;
+        height: 48px;
+        object-fit: contain;
       }
     }
+  }
+
+  .wizard {
 
     .os-label {
       position: absolute;
@@ -2300,38 +2312,43 @@ export default {
 
   border-bottom: var(--header-border-size) solid var(--header-border);
 
-  & > .title {
+  & > .chart-title-container {
     flex: 1;
     min-height: 75px;
   }
 
   .choice-banner {
 
-    flex-basis: 40%;
+    flex-basis: 100%;
     display: flex;
     align-items: center;
 
     &.top {
 
-      H2 {
+      H1, H2 {
         margin: 0px;
       }
 
-      .title{
+      .chart-title-container {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-evenly;
-
-        & > .subtitle {
-          margin: 0 20px;
-        }
+        gap: 24px;
       }
 
-      .subtitle{
+      .chart-title {
         display: flex;
         flex-direction: column;
         & .subtext {
+          display: flex;
+          align-items: center;
+          gap: 8px;
           color: var(--input-label);
+          margin-top: 8px;
+
+          .icon-version-alt {
+            font-size: 19px;
+          }
         }
       }
 
@@ -2348,17 +2365,6 @@ export default {
       }
     }
 
-    & .round-image {
-      min-width: 50px;
-      height: 50px;
-      margin: 10px 10px 10px 0;
-      border-radius: 50%;
-      overflow: hidden;
-      .logo {
-        min-width: 50px;
-        height: 50px;
-      }
-    }
   }
 }
 

package/pages/c/_cluster/auth/roles/index.vue

@@ -7,6 +7,7 @@ import Loading from '@shell/components/Loading';
 import { SUBTYPE_MAPPING, CREATE_VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import { NAME } from '@shell/config/product/auth';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+import { RcButton } from '@components/RcButton';
 
 const GLOBAL = SUBTYPE_MAPPING.GLOBAL.key;
 const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
@@ -31,7 +32,7 @@ export default {
   name: 'Roles',
 
   components: {
-    Tab, Tabbed, ResourceTable, Loading
+    Tab, Tabbed, ResourceTable, Loading, RcButton
   },
 
   async fetch() {
@@ -162,13 +163,13 @@ export default {
       </div>
       <div class="actions-container">
         <div class="actions">
-          <router-link
+          <rc-button
             v-if="canCreate"
+            size="large"
             :to="createLocation"
-            class="btn role-primary"
           >
             {{ createLabel }}
-          </router-link>
+          </rc-button>
         </div>
       </div>
     </header>

package/pages/c/_cluster/explorer/workload-dashboard/ByNamespaceSection.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import WorkloadNamespaceCard from './WorkloadNamespaceCard.vue';
+import type { WorkloadDashboardByNamespaceCard, WorkloadDashboardNamespaceNavigateFn, WorkloadDashboardFilterByNamespaceFn } from './types';
+
+defineProps<{
+  cards: WorkloadDashboardByNamespaceCard[];
+  navigateToNamespace: WorkloadDashboardNamespaceNavigateFn;
+  filterByNamespace: WorkloadDashboardFilterByNamespaceFn;
+}>();
+</script>
+
+<template>
+  <div class="card-grid">
+    <WorkloadNamespaceCard
+      v-for="card in cards"
+      :key="card.title"
+      :title="card.title"
+      :rows="card.rows"
+      :navigate-to-namespace="navigateToNamespace"
+      :filter-by-namespace="filterByNamespace"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+</style>