@rancher/shell 3.0.12-rc.2 → 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

@@ -14,7 +14,7 @@ import { isMissingDate } from '@shell/utils/time';
 import { escapeHtml } from '@shell/utils/string';
 import { mapGetters } from 'vuex';
 import { APP_UPGRADE_STATUS, compatibleVersionsFor } from '@shell/store/catalog';
-import { compareChartVersions } from '@shell/utils/chart';
+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';
@@ -306,6 +306,7 @@ export default {
           [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,
         }
@@ -364,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');
     }
   },
 };
@@ -535,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"
@@ -806,7 +835,7 @@ export default {
       display: flex;
       align-items: flex-start;
       flex-shrink: 0;
-      gap: 8px;
+      gap: 16px;
 
       .installed-apps-selector {
         width: 340px;
@@ -827,9 +856,33 @@ export default {
 
   .chart-body {
     display: flex;
+    .readme-wrapper {
+      position: relative;
+      flex: 1;
+      min-width: 0;
+
+      .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;
+      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 {