@rancher/shell 3.0.8-rc.9 → 3.0.9-rc.1

package/models/provisioning.cattle.io.cluster.js

@@ -277,7 +277,7 @@ export default class ProvCluster extends SteveModel {
       dispatch:   this.$dispatch,
       getters:    this.$getters,
       axios:      this.$axios,
-      $extension: this.$plugin,
+      $extension: this.$extension,
       t:          (...args) => this.t.apply(this, args),
     };
 
@@ -326,8 +326,16 @@ export default class ProvCluster extends SteveModel {
 
     // imported rke2 and k3s have status.driver === rke2 and k3s respectively
     // Provisioned rke2 and k3s have status.driver === imported
-    if (this.mgmt?.status?.provider === 'k3s' || this.mgmt?.status?.provider === 'rke2') {
-      return this.mgmt?.status?.driver === this.mgmt?.status?.provider;
+    const provider = this.mgmt?.status?.provider;
+    const driver = this.mgmt?.status?.driver;
+
+    // The main case
+    if (provider === 'k3s' || provider === 'rke2') {
+      return driver === provider;
+    }
+    // The 'waiting' case
+    if (!provider && (driver === 'k3s' || driver === 'rke2')) {
+      return true;
     }
 
     // imported KEv2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.8-rc.9",
+  "version": "3.0.9-rc.1",
   "description": "Rancher Dashboard Shell",
-  "repository": "https://github.com/rancherlabs/dashboard",
+  "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",
   "author": "SUSE",
   "private": false,
@@ -39,7 +39,7 @@
     "@babel/preset-typescript": "7.16.7",
     "@novnc/novnc": "1.2.0",
     "@popperjs/core": "2.11.8",
-    "@rancher/icons": "2.0.53",
+    "@rancher/icons": "2.0.54",
     "@types/is-url": "1.2.30",
     "@types/node": "20.10.8",
     "@types/semver": "^7.5.8",
@@ -53,12 +53,12 @@
     "add": "2.0.6",
     "ansi_up": "5.0.0",
     "axios-retry": "3.1.9",
-    "axios": "1.12.2",
+    "axios": "1.13.2",
     "babel-eslint": "10.1.0",
-    "babel-plugin-module-resolver": "4.0.0",
+    "babel-plugin-module-resolver": "5.0.2",
     "babel-preset-vue": "2.0.2",
     "cache-loader": "4.1.0",
-    "chart.js": "4.4.8",
+    "chart.js": "4.5.1",
     "clipboard-polyfill": "4.0.1",
     "codemirror-editor-vue3": "2.8.0",
     "codemirror": ">=5.64.0 <6",
@@ -140,7 +140,7 @@
     "vuedraggable": "4.1.0",
     "vuex": "4.1.0",
     "webpack-bundle-analyzer": "4.10.2",
-    "webpack-virtual-modules": "0.4.3",
+    "webpack-virtual-modules": "0.6.2",
     "worker-loader": "3.0.8",
     "xterm-addon-canvas": "0.5.0",
     "xterm-addon-fit": "0.8.0",

package/pages/auth/login.vue

@@ -315,9 +315,9 @@ export default {
         // so we manually load them here - other SSO auth providers bounce out and back to the Dashboard, so on the bounce-back
         // the plugins will load via the boot-time plugin
         await loadPlugins({
-          app:     this.$store.app,
-          store:   this.$store,
-          $plugin: this.$store.$plugin
+          app:        this.$store.app,
+          store:      this.$store,
+          $extension: this.$store.$extension,
         });
 
         if (this.firstLogin || user[0]?.mustChangePassword) {

package/pages/auth/setup.vue

@@ -209,7 +209,7 @@ export default {
       const promises = [];
 
       try {
-        await applyProducts(this.$store, this.$plugin);
+        await applyProducts(this.$store, this.$extension);
         await this.$store.dispatch('loadManagement');
 
         if ( this.mustChangePassword ) {

package/pages/auth/verify.vue

@@ -119,9 +119,9 @@ export default {
 
         // Load plugins
         await loadPlugins({
-          app:     this.$store.app,
-          store:   this.$store,
-          $plugin: this.$store.$plugin
+          app:        this.$store.app,
+          store:      this.$store,
+          $extension: this.$store.$extension,
         });
 
         this.$router.replace(backTo);

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/fleet/index.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import debounce from 'lodash/debounce';
 import { getVersionData } from '@shell/config/version';
 import { mapState, mapGetters } from 'vuex';
@@ -321,17 +321,14 @@ export default {
 
       this.selectedCard = selected;
 
-      this.$shell.slideInPanel({
-        component:      ResourceDetails,
-        componentProps: {
+      this.$shell.slideIn.open(ResourceDetails, {
+        showHeader: false,
+        width:      window.innerWidth / 3 > 530 ? `${ window.innerWidth / 3 }px` : '530px',
+        props:      {
           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/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/pkg/auto-import.js

@@ -15,7 +15,7 @@ function registerFile(file, type, pkg, f) {
   const importType = (f === 'models') ? 'require' : 'import';
   const chunkName = (f === 'l10n') ? '' : `/* webpackChunkName: "${ f }" */`;
 
-  return `  $plugin.register('${ f }', '${ type }', () => ${ importType }(${ chunkName }'${ pkg }/${ f }/${ file }'));\n`;
+  return `  $extension.register('${ f }', '${ type }', () => ${ importType }(${ chunkName }'${ pkg }/${ f }/${ file }'));\n`;
 }
 
 function register(file, pkg, f) {
@@ -29,7 +29,7 @@ function register(file, pkg, f) {
 // This ensures that the webpackChunkName is respected (require.context does not support this) - so when build as a library
 // the code splitting will be respected
 function generateTypeImport(pkg, dir) {
-  let content = 'export function importTypes($plugin) { \n';
+  let content = 'export function importTypes($extension) { \n';
 
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
@@ -77,7 +77,7 @@ function generateTypeImport(pkg, dir) {
 // and then restart the dev server for it to be picked up.
 function generateDynamicTypeImport(pkg, dir) {
   const template = fs.readFileSync(path.join(__dirname, 'import.js'), { encoding: 'utf8' });
-  let content = 'export function importTypes($plugin) { \n';
+  let content = 'export function importTypes($extension) { \n';
 
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {

package/pkg/dynamic-importer.lib.js

@@ -41,7 +41,7 @@ export function listProducts() {
   return [];
 }
 
-export function loadProduct(name, $plugin) {
+export function loadProduct(name, $extension) {
   return () => undefined;
 }
 

package/pkg/import.js

@@ -6,5 +6,5 @@ _NAME.forEach((f) => {
 
   name = name.substr(0, ext);
 
-  $plugin.register('DIR', name, () => REQUIRE(CHUNK`BASE/DIR/${ name }EXT`)); // eslint-disable-line no-undef
+  $extension.register('DIR', name, () => REQUIRE(CHUNK`BASE/DIR/${ name }EXT`)); // eslint-disable-line no-undef
 });