@rancher/shell 3.0.8-rc.8 → 3.0.8

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

@@ -65,6 +65,19 @@ export default {
     this.installedApps = await this.$store.dispatch('cluster/findAll', { type: CATALOG_TYPES.APP });
   },
 
+  updated() {
+    if (!this.observerInitialized && this.filteredCharts.length > 0) {
+      this.initIntersectionObserver();
+    }
+    this.ensureOverflow();
+  },
+
+  beforeUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+
   data() {
     return {
       DOCS_BASE,
@@ -107,7 +120,6 @@ export default {
           }
         }
       ],
-      appCardsCache:      {},
       selectedSortOption: CATALOG_SORT_OPTIONS.RECOMMENDED,
       sortOptions:        [
         { kind: 'group', label: this.t('catalog.charts.sort.prefix') },
@@ -115,7 +127,10 @@ export default {
         { value: CATALOG_SORT_OPTIONS.LAST_UPDATED_DESC, label: this.t('catalog.charts.sort.lastUpdatedDesc') },
         { value: CATALOG_SORT_OPTIONS.ALPHABETICAL_ASC, label: this.t('catalog.charts.sort.alphaAscending') },
         { value: CATALOG_SORT_OPTIONS.ALPHABETICAL_DESC, label: this.t('catalog.charts.sort.alphaDescending') },
-      ]
+      ],
+      initialVisibleChartsCount: 30,
+      visibleChartsCount:        20,
+      hasOverflow:               false
     };
   },
 
@@ -262,26 +277,21 @@ export default {
     },
 
     appChartCards() {
-      return this.filteredCharts.map((chart) => {
-        if (!this.appCardsCache[chart.id]) {
-          // Cache the converted value. We're caching chart.cardContent anyway, so no need to worry about showing updates to state
-          this.appCardsCache[chart.id] = {
-            id:     chart.id,
-            pill:   chart.featured ? { label: { key: 'generic.shortFeatured' }, tooltip: { key: 'generic.featured' } } : undefined,
-            header: {
-              title:    { text: chart.chartNameDisplay },
-              statuses: chart.cardContent.statuses
-            },
-            subHeaderItems: chart.cardContent.subHeaderItems,
-            image:          { src: chart.latestCompatibleVersion.icon, alt: { text: this.t('catalog.charts.iconAlt', { app: get(chart, 'chartNameDisplay') }) } },
-            content:        { text: chart.chartDescription },
-            footerItems:    chart.cardContent.footerItems,
-            rawChart:       chart
-          };
-        }
-
-        return this.appCardsCache[chart.id];
-      });
+      const charts = this.filteredCharts.slice(0, this.visibleChartsCount);
+
+      return charts.map((chart) => ({
+        id:     chart.id,
+        pill:   chart.featured ? { label: { key: 'generic.shortFeatured' }, tooltip: { key: 'generic.featured' } } : undefined,
+        header: {
+          title:    { text: chart.chartNameDisplay },
+          statuses: chart.cardContent.statuses
+        },
+        subHeaderItems: chart.cardContent.subHeaderItems,
+        image:          { src: chart.latestCompatibleVersion.icon, alt: { text: this.t('catalog.charts.iconAlt', { app: get(chart, 'chartNameDisplay') }) } },
+        content:        { text: chart.chartDescription },
+        footerItems:    chart.cardContent.footerItems,
+        rawChart:       chart
+      }));
     },
 
     clusterId() {
@@ -293,7 +303,7 @@ export default {
     },
 
     totalMessage() {
-      const count = !this.isFilterUpdating ? this.appChartCards.length : '. . .';
+      const count = !this.isFilterUpdating ? this.filteredCharts.length : '. . .';
 
       if (this.noFiltersApplied) {
         return this.t('catalog.charts.totalChartsMessage', { count });
@@ -304,6 +314,10 @@ export default {
   },
 
   watch: {
+    debouncedSearchQuery() {
+      this.resetLazyLoadState();
+    },
+
     searchQuery: {
       handler: debounce(function(q) {
         this.debouncedSearchQuery = q;
@@ -315,6 +329,8 @@ export default {
     filters: {
       deep: true,
       handler(newFilters) {
+        this.resetLazyLoadState();
+
         const query = {
           [REPO]:     normalizeFilterQuery(newFilters.repos),
           [CATEGORY]: normalizeFilterQuery(newFilters.categories),
@@ -425,11 +441,80 @@ export default {
       });
     },
 
+    resetLazyLoadState() {
+      this.visibleChartsCount = this.initialVisibleChartsCount;
+      this.observerInitialized = false;
+      this.hasOverflow = false;
+    },
+
+    // The lazy loading implementation has two parts
+    // 1. Initial Load (ensureOverflow): Having a simple calculation of how many items to load
+    //    can fail in edge cases like browser zoom, where element sizing and viewport
+    //    height can lead to miscalculations. If not enough content is loaded, the page
+    //    won't be scrollable, breaking the IntersectionObserver. This method, called
+    //    iteratively by the `updated` lifecycle hook, adds batches of charts and
+    //    re-measures until the content height factually overflows the container,
+    //    guaranteeing a scrollbar. It then sets `hasOverflow = true` to stop itself.
+    // 2. Scroll-based Load (IntersectionObserver): Once the page is scrollable, a standard
+    //    IntersectionObserver (`initIntersectionObserver` and `loadMore`) takes care of
+    //    loading new batches of charts as the user scrolls to the bottom.
+    ensureOverflow() {
+      this.$nextTick(() => {
+        if (this.hasOverflow || !this.$refs.chartsContainer) {
+          return;
+        }
+
+        const mainLayout = document.querySelector('.main-layout');
+
+        if (!mainLayout) {
+          return;
+        }
+
+        const contentHeight = this.$refs.chartsContainer.offsetHeight;
+        const containerHeight = mainLayout.offsetHeight;
+
+        if (contentHeight > containerHeight) {
+          this.hasOverflow = true;
+        } else if (this.visibleChartsCount < this.filteredCharts.length) {
+          // Load another batch
+          this.visibleChartsCount += this.initialVisibleChartsCount;
+        } else {
+          // All charts are visible
+          this.hasOverflow = true;
+        }
+      });
+    },
+
     resetAllFilters() {
       this.internalFilters = createInitialFilters();
       this.filters = createInitialFilters();
       this.searchQuery = '';
     },
+
+    loadMore() {
+      if (this.visibleChartsCount >= this.filteredCharts.length) {
+        return;
+      }
+      this.visibleChartsCount += this.initialVisibleChartsCount;
+    },
+
+    initIntersectionObserver() {
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+      const mainLayout = document.querySelector('.main-layout');
+      const sentinel = this.$refs.sentinel;
+
+      if (sentinel && mainLayout) {
+        this.observer = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting) {
+            this.loadMore();
+          }
+        }, { mainLayout });
+        this.observer.observe(sentinel);
+        this.observerInitialized = true;
+      }
+    }
   },
 };
 </script>
@@ -552,7 +637,10 @@ export default {
       >
         <div class="total-and-sort">
           <div class="total">
-            <p class="total-message">
+            <p
+              class="total-message"
+              data-testid="charts-total-message"
+            >
               {{ totalMessage }}
             </p>
             <a
@@ -594,6 +682,7 @@ export default {
           </Select>
         </div>
         <div
+          ref="chartsContainer"
           class="app-chart-cards"
           data-testid="app-chart-cards-container"
         >
@@ -629,6 +718,11 @@ export default {
             </template>
           </rc-item-card>
         </div>
+        <div
+          ref="sentinel"
+          class="sentinel-charts"
+          data-testid="charts-lazy-load-sentinel"
+        />
       </div>
     </div>
   </div>
@@ -673,6 +767,10 @@ export default {
   flex-direction: column;
   gap: var(--gap-md);
   flex: 1;
+
+  .sentinel-charts {
+    height: 1px;
+  }
 }
 
 .total-and-sort {

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

@@ -310,6 +310,7 @@ export default {
           two different Helm chart versions is a "user value," or
           a user-selected customization.
         */
+        this.preserveCustomRegistryValue();
         userValues = diff(this.loadedVersionValues, this.chartValues);
       } else if ( this.existing ) {
         await this.existing.fetchValues(); // In theory this has already been called, but do again to be safe
@@ -824,6 +825,35 @@ export default {
   },
 
   methods: {
+    /**
+     * The custom registry UI fields (checkbox and input) are not directly bound to chartValues.
+     * Before calculating the diff to carry over user customizations, we must
+     * first synchronize the state of these UI fields with chartValues. This
+     * ensures any user changes to the custom registry settings are
+     * included in the diff and preserved when changing versions.
+     */
+    preserveCustomRegistryValue() {
+      if (!this.showCustomRegistry) {
+        return;
+      }
+
+      if (this.showCustomRegistryInput) {
+        set(this.chartValues, 'global.systemDefaultRegistry', this.customRegistrySetting);
+        set(this.chartValues, 'global.cattle.systemDefaultRegistry', this.customRegistrySetting);
+      } else {
+        // Note: Using `delete` here is safe because this is not a reactive property update
+        // that the UI needs to track. This is a one-time mutation before a diff.
+        if (get(this.chartValues, 'global.systemDefaultRegistry')) {
+          delete this.chartValues.global.systemDefaultRegistry;
+        }
+        if (get(this.chartValues, 'global.cattle.systemDefaultRegistry')) {
+          // It's possible `this.chartValues.global.cattle` doesn't exist,
+          // but `get` ensures we only proceed if the full path exists.
+          delete this.chartValues.global.cattle.systemDefaultRegistry;
+        }
+      }
+    },
+
     async getClusterRegistry() {
       const hasPermissionToSeeProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
 
@@ -1367,6 +1397,7 @@ export default {
               <!-- We have a chart for the app, let the user select a new version -->
               <LabeledSelect
                 v-if="chart"
+                data-testid="chart-version-selector"
                 :label="t('catalog.install.version')"
                 :value="query.versionName"
                 :options="filteredVersions"
@@ -1435,6 +1466,7 @@ export default {
             v-if="showCustomRegistry"
             v-model:value="showCustomRegistryInput"
             class="mb-20"
+            data-testid="custom-registry-checkbox"
             :label="t('catalog.chart.registry.custom.checkBoxLabel')"
             :tooltip="t('catalog.chart.registry.tooltip')"
           />
@@ -1443,6 +1475,7 @@ export default {
               <LabeledInput
                 v-if="showCustomRegistryInput"
                 v-model:value="customRegistrySetting"
+                data-testid="custom-registry-input"
                 label-key="catalog.chart.registry.custom.inputLabel"
                 placeholder-key="catalog.chart.registry.custom.placeholder"
                 :min-height="30"

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

@@ -211,7 +211,7 @@ describe('page: cluster dashboard', () => {
 
       expect(box.element).toBeDefined();
       expect(box.element.classList).toContain(status);
-      expect(!!(box.element as any).$_popper).toBe(clickable);
+      expect(!!(box.element as any).__tooltipOptions__?.content).toBe(clickable);
       expect(icon.element.classList).toContain(iconClass);
 
       await box.trigger('click');

package/pages/c/_cluster/explorer/index.vue

@@ -222,7 +222,7 @@ export default {
     displayProvider() {
       const other = 'other';
 
-      let provider = this.currentCluster?.status?.provider || other;
+      let provider = this.currentCluster?.status?.provider || this.currentCluster?.status?.driver.toLowerCase() || other;
 
       if (provider === 'rke.windows') {
         provider = 'rkeWindows';
@@ -484,6 +484,12 @@ export default {
     hasNodes() {
       return this.nodes?.length > 0;
     },
+    kubernetesVersion() {
+      const base = this.currentCluster?.kubernetesVersionBase || '';
+      const extension = this.currentCluster?.kubernetesVersionExtension || '';
+
+      return `${ base }${ extension }`;
+    }
   },
 
   methods: {
@@ -661,11 +667,7 @@ export default {
       </div>
       <div data-testid="kubernetesVersion__label">
         <label>{{ t('glance.version') }}: </label>
-        <span>{{ currentCluster.kubernetesVersionBase }}</span>
-        <span
-          v-if="currentCluster.kubernetesVersionExtension"
-          style="font-size: 0.75em"
-        >{{ currentCluster.kubernetesVersionExtension }}</span>
+        <span>{{ kubernetesVersion }}</span>
       </div>
       <div
         v-if="hasNodes"

package/pages/c/_cluster/fleet/index.vue

@@ -321,16 +321,13 @@ export default {
 
       this.selectedCard = selected;
 
-      this.$shell.slideInPanel({
-        component:      ResourceDetails,
+      this.$shell.slideIn.open(ResourceDetails, {
         componentProps: {
+          showHeader: false,
+          width:      window.innerWidth / 3 > 530 ? `${ window.innerWidth / 3 }px` : '530px',
           value,
           statePanel,
-          workspace,
-          showHeader:          false,
-          width:               window.innerWidth / 3 > 530 ? `${ window.innerWidth / 3 }px` : '530px',
-          triggerFocusTrap:    true,
-          returnFocusSelector: `[data-testid="resource-card-${ value.id }"]`
+          workspace
         }
       });
     },

package/pages/c/_cluster/manager/hostedprovider/index.vue

@@ -9,6 +9,7 @@ import RcStatusBadge from '@components/Pill/RcStatusBadge/RcStatusBadge.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { isRancherPrime } from '@shell/config/version';
 import { stateDisplay, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { getHostedProviders } from '@shell/utils/provider';
 
 export default {
   name:       'HostedProviders',
@@ -67,12 +68,9 @@ export default {
         axios:      this.$store.$axios,
         $extension: this.$store.app.$extension,
         t:          (...args) => this.t.apply(this, args),
-        isCreate:   this.isCreate,
-        isEdit:     this.isEdit,
-        isView:     this.isView,
       };
 
-      return this.$extension.getProviders(context);
+      return getHostedProviders(context);
     },
     getSettings() {
       this.settingResource = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.KEV2_OPERATORS );
@@ -107,7 +105,7 @@ export default {
       }
     },
     async generateRows() {
-      this.rows = this.allProviders.filter((p) => p.group === 'hosted').map((p) => {
+      this.rows = this.allProviders.map((p) => {
         const active = p.id in this.settings ? this.settings[p.id] : true;
         const canNotPrime = p.prime && !this.prime;
         const canNotChangeSettings = !this.settingResource?.canUpdate;
@@ -196,7 +194,8 @@ export default {
             <span class="mr-10">{{ row.name }}</span>
             <RcStatusBadge
               v-if="row.prime"
-              status="prime"
+              class="prime-badge"
+              status="success"
             >
               {{ t('providers.hosted.prime') }}
             </RcStatusBadge>
@@ -212,3 +211,10 @@ export default {
     </ResourceTable>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.prime-badge {
+  font-size: 10px;
+  line-height: 15px;
+}
+</style>

package/pages/c/_cluster/settings/brand.vue

@@ -18,7 +18,7 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { setFavIcon } from '@shell/utils/favicon';
 import TabTitle from '@shell/components/TabTitle';
 
-const Color = require('color');
+import Color from 'color';
 
 export default {
   components: {

package/pages/c/_cluster/settings/index.vue

@@ -1,8 +1,13 @@
 <script>
+import { h } from 'vue';
 import { NAME as SETTINGS } from '@shell/config/product/settings';
 import { MANAGEMENT } from '@shell/config/types';
 
 export default {
+  render() {
+    // Suppress warning: Component is missing template or render function
+    return h('div');
+  },
   beforeCreate() {
     const hasSettings = !!this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
 

package/pages/c/_cluster/uiplugins/__tests__/index.test.ts

@@ -164,6 +164,13 @@ describe('page: UI plugins/Extensions', () => {
   });
 
   describe('getFooterItems', () => {
+    it('should return "developer" label for isDeveloper plugins', () => {
+      const plugin = { isDeveloper: true };
+      const items = wrapper.vm.getFooterItems(plugin);
+
+      expect(items[0].labels).toContain('plugins.labels.isDeveloper');
+    });
+
     it('should return "builtin" label for builtin plugins', () => {
       const plugin = { builtin: true };
       const items = wrapper.vm.getFooterItems(plugin);

package/pages/c/_cluster/uiplugins/catalogs.vue

@@ -0,0 +1,147 @@
+
+<script>
+import CatalogList from './CatalogList/index.vue';
+
+export default {
+  name:       'ExtensionsAirgappedView',
+  components: { CatalogList },
+  data() {
+    return {
+      extensionsPageLink: {
+        name:   'c-cluster-uiplugins',
+        params: { cluster: this.$route.params.cluster }
+      },
+      reloadRequired: false
+    };
+  },
+  methods: {
+    returnToExtensionsPage() {
+      this.$router.push(this.extensionsPageLink);
+    },
+    reload() {
+      this.$router.go();
+    },
+    showCatalogLoadDialog() {
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogInstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          refresh: () => {
+            this.reloadRequired = true;
+          }
+        }
+      });
+    },
+    showCatalogUninstallDialog(ev) {
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogUninstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          catalog: ev,
+          refresh: () => {
+            this.reloadRequired = true;
+          }
+        }
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <div id="extensions-airgapped-main-page">
+    <div class="plugin-header">
+      <!-- catalog/airgapped header -->
+      <div class="catalog-title">
+        <h2
+          class="mb-0 mr-10"
+          data-testid="extensions-catalog-title"
+        >
+          <a
+            class="link"
+            role="link"
+            tabindex="0"
+            :aria-label="t('plugins.manageCatalog.title')"
+            @click="returnToExtensionsPage()"
+          >
+            {{ t('plugins.manageCatalog.title') }}:
+          </a>
+          <t k="plugins.manageCatalog.subtitle" />
+        </h2>
+      </div>
+      <div class="actions-container">
+        <!-- extensions reload toast/notification -->
+        <div
+          v-if="reloadRequired"
+          class="plugin-reload-banner mmr-6"
+          data-testid="extension-reload-banner"
+        >
+          <i class="icon icon-checkmark mr-10" />
+          <span>
+            {{ t('plugins.reload') }}
+          </span>
+          <button
+            class="ml-10 btn btn-sm role-primary"
+            data-testid="extension-reload-banner-reload-btn"
+            role="button"
+            :aria-label="t('plugins.labels.reloadRancher')"
+            @click="reload()"
+          >
+            {{ t('generic.reload') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div>
+      <!-- Catalog list view -->
+      <CatalogList
+        @showCatalogLoadDialog="showCatalogLoadDialog"
+        @showCatalogUninstallDialog="showCatalogUninstallDialog($event)"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .plugin-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .catalog-title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    > h2 {
+      flex: 1;
+      margin-bottom: 0;
+    }
+
+    .link {
+      cursor: pointer;
+    }
+  }
+
+  .plugin-reload-banner {
+    align-items: center;
+    background-color: var(--success-banner-bg);
+    display: flex;
+    padding: 4px 4px 4px 12px;
+    border-radius: 5px;
+    min-height: 36px;
+
+    > i {
+      color: var(--success);
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    > button {
+      line-height: 30px;
+      min-height: 30px;
+    }
+  }
+</style>