@rancher/shell 0.5.2 → 1.2.0

package/pages/c/_cluster/apps/charts/__tests__/install.helper.test.ts

@@ -2,15 +2,30 @@ import { ignoreVariables } from '@shell/pages/c/_cluster/apps/charts/install.hel
 
 describe('fX: ignoreVariables', () => {
   describe.each([['epinio', 'global.rbac.pspEnabled']])('given chart %p with path %p', (name, path) => {
+    it.each([
+      ['v1.24.11+rke2r1'],
+    ])('should not return variable path list if cluster has k8s version %p', (version) => {
+      const cluster = { kubernetesVersion: version };
+      const data = {
+        chart:  { name },
+        values: { global: { rbac: { pspEnabled: undefined } } }
+      };
+
+      const paths = ignoreVariables(cluster, data);
+
+      expect(paths).toStrictEqual([]);
+    });
+
     it.each([
       ['v1.25.11+rke2r1'],
-    ])('should return questions', () => {
+    ])('should return questions if cluster has k8s version %p', (version) => {
+      const cluster = { kubernetesVersion: version };
       const data = {
         chart:  { name },
         values: { global: { rbac: { pspEnabled: undefined } } }
       };
 
-      const paths = ignoreVariables(data);
+      const paths = ignoreVariables(cluster, data);
 
       expect(paths).toStrictEqual([path]);
     });

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

@@ -54,6 +54,7 @@ export default {
       searchQuery:     null,
       showDeprecated:  null,
       showHidden:      null,
+      isPspLegacy:     false,
       chartOptions:    [
         {
           label: 'Browse',
@@ -138,11 +139,6 @@ export default {
       return reducedRepos;
     },
 
-    /**
-     * Filter allll charts by invalid entries (deprecated, hidden and ui plugin).
-     *
-     * This does not include any user provided filters (like selected repos, categories and text query)
-     */
     enabledCharts() {
       return (this.allCharts || []).filter((c) => {
         if ( c.deprecated && !this.showDeprecated ) {
@@ -153,6 +149,10 @@ export default {
           return false;
         }
 
+        if ( this.hideRepos.includes(c.repoKey) ) {
+          return false;
+        }
+
         if (isUIPlugin(c)) {
           return false;
         }
@@ -161,28 +161,26 @@ export default {
       });
     },
 
-    /**
-     * Filter enabled charts allll filters. These are what the user will see in the list
-     */
     filteredCharts() {
-      return this.filterCharts({
-        category:    this.category,
-        searchQuery: this.searchQuery,
-        hideRepos:   this.hideRepos
+      const enabledCharts = (this.enabledCharts || []);
+      const clusterProvider = this.currentCluster.status.provider || 'other';
+
+      return filterAndArrangeCharts(enabledCharts, {
+        clusterProvider,
+        category:       this.category,
+        searchQuery:    this.searchQuery,
+        showDeprecated: this.showDeprecated,
+        showHidden:     this.showHidden,
+        hideRepos:      this.hideRepos,
+        hideTypes:      [CATALOG._CLUSTER_TPL],
+        showPrerelease: this.$store.getters['prefs/get'](SHOW_PRE_RELEASE),
       });
     },
 
-    /**
-     * Filter valid charts (alll filters minus user provided ones) by whether they are featured or not
-     *
-     * This will power the carousel
-     */
-    featuredCharts() {
-      const filteredCharts = this.filterCharts({});
+    getFeaturedCharts() {
+      const allCharts = (this.filteredCharts || []);
 
-      // debugger;
-
-      const featuredCharts = filteredCharts.filter((value) => value.featured).sort((a, b) => a.featured - b.featured);
+      const featuredCharts = allCharts.filter((value) => value.featured).sort((a, b) => a.featured - b.featured);
 
       return featuredCharts.slice(0, 5);
     },
@@ -190,13 +188,7 @@ export default {
     categories() {
       const map = {};
 
-      // Filter charts by everything except itself
-      const charts = this.filterCharts({
-        searchQuery: this.searchQuery,
-        hideRepos:   this.hideRepos
-      });
-
-      for ( const chart of charts ) {
+      for ( const chart of this.enabledCharts ) {
         for ( const c of chart.categories ) {
           if ( !map[c] ) {
             const labelKey = `catalog.charts.categories.${ lcFirst(c) }`;
@@ -217,14 +209,14 @@ export default {
       out.unshift({
         label: this.t('catalog.charts.categories.all'),
         value: '',
-        count: charts.length
+        count: this.enabledCharts.length
       });
 
-      return sortBy(out, ['label']);
+      return out;
     },
 
     showCarousel() {
-      return this.chartMode === 'featured' && this.featuredCharts.length;
+      return this.chartMode === 'featured' && this.getFeaturedCharts.length;
     }
 
   },
@@ -249,6 +241,14 @@ export default {
     }
   },
 
+  created() {
+    const release = this.currentCluster?.status?.version?.gitVersion || '';
+    const isRKE2 = release.includes('rke2');
+    const version = release.match(/\d+/g);
+
+    this.isPspLegacy = version?.length ? isRKE2 && (+version[0] === 1 && +version[1] < 25) : false;
+  },
+
   methods: {
     colorForChart(chart) {
       const repos = this.repoOptions;
@@ -343,22 +343,6 @@ export default {
         btnCb(false);
       }
     },
-
-    filterCharts({ category, searchQuery, hideRepos }) {
-      const enabledCharts = (this.enabledCharts || []);
-      const clusterProvider = this.currentCluster.status.provider || 'other';
-
-      return filterAndArrangeCharts(enabledCharts, {
-        clusterProvider,
-        category,
-        searchQuery,
-        showDeprecated: this.showDeprecated,
-        showHidden:     this.showHidden,
-        hideRepos,
-        hideTypes:      [CATALOG._CLUSTER_TPL],
-        showPrerelease: this.$store.getters['prefs/get'](SHOW_PRE_RELEASE),
-      });
-    }
   },
 };
 </script>
@@ -376,7 +360,7 @@ export default {
         </h1>
       </div>
       <div
-        v-if="featuredCharts.length > 0"
+        v-if="getFeaturedCharts.length > 0"
         class="actions-container"
       >
         <ButtonGroup
@@ -388,11 +372,17 @@ export default {
     <div v-if="showCarousel">
       <h3>{{ t('catalog.charts.featuredCharts') }}</h3>
       <Carousel
-        :sliders="featuredCharts"
+        :sliders="getFeaturedCharts"
         @clicked="(row) => selectChart(row)"
       />
     </div>
 
+    <Banner
+      v-if="isPspLegacy"
+      color="warning"
+      :label="t('catalog.chart.banner.legacy')"
+    />
+
     <TypeDescription resource="chart" />
     <div class="left-right-split">
       <Select
@@ -539,21 +529,22 @@ export default {
         }
       }
     }
-}
+  }
 
 .checkbox-select {
-  .vs__search {
+   .vs__search {
     position: absolute;
     right: 0
   }
 
-  .vs__selected-options  {
+ .vs__selected-options  {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     display: inline-block;
     line-height: 2.4rem;
   }
+
 }
 
 .checkbox-outer-container.in-select {
@@ -561,7 +552,7 @@ export default {
   padding: 7px 0 6px 13px;
   width: calc(100% + 10px);
 
-  ::v-deep .checkbox-label {
+  ::v-deep.checkbox-label {
     display: flex;
     align-items: center;
 
@@ -576,7 +567,7 @@ export default {
     }
   }
 
-  &:hover ::v-deep .checkbox-label {
+  &:hover ::v-deep.checkbox-label {
       color: var(--body-text);
     }
 
@@ -584,7 +575,7 @@ export default {
       &:hover {
       background: var(--app-rancher-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover ::v-deep.checkbox-label {
       color: var(--app-rancher-accent-text);
     }
     & i {
@@ -596,7 +587,7 @@ export default {
       &:hover {
       background: var(--app-partner-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover ::v-deep.checkbox-label {
       color: var(--app-partner-accent-text);
     }
     & i {
@@ -608,7 +599,7 @@ export default {
     &:hover {
       background: var(--app-color1-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover ::v-deep.checkbox-label {
       color: var(--app-color1-accent-text);
     }
     & i {
@@ -619,10 +610,10 @@ export default {
     &:hover {
       background: var(--app-color2-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover ::v-deep.checkbox-label {
       color: var(--app-color2-accent-text);
     }
-    & i {
+        & i {
       color: var(--app-color2-accent)
     }
   }
@@ -630,7 +621,7 @@ export default {
     &:hover {
       background: var(--app-color3-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover ::v-deep.checkbox-label {
       color: var(--app-color3-accent-text);
     }
     & i {
@@ -652,7 +643,7 @@ export default {
     &:hover {
       background: var(--app-color5-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover ::v-deep.checkbox-label {
       color: var(--app-color5-accent-text);
     }
     & i {
@@ -663,7 +654,7 @@ export default {
     &:hover {
       background: var(--app-color6-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover ::v-deep.checkbox-label {
       color: var(--app-color6-accent-text);
     }
     & i {
@@ -674,7 +665,7 @@ export default {
     &:hover {
       background: var(--app-color7-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover ::v-deep.checkbox-label {
       color: var(--app-color7-accent-text);
     }
     & i {
@@ -685,6 +676,9 @@ export default {
     &:hover {
       background: var(--app-color8-accent);
     }
+    &:hover ::v-deep.checkbox-label {
+      color: var(--app-color8-accent-text);
+    }
     & i {
       color: var(--app-color8-accent)
     }

package/pages/c/_cluster/apps/charts/install.helpers.js

@@ -1,7 +1,7 @@
 /**
  * Return list of variables to filter chart questions
  */
-export const ignoreVariables = (data) => {
+export const ignoreVariables = (cluster, data) => {
   const pspChartMap = {
     epinio:                     'global.rbac.pspEnabled',
     longhorn:                   'enablePSP',
@@ -11,5 +11,16 @@ export const ignoreVariables = (data) => {
   };
   const path = pspChartMap[data.chart.name];
 
-  return [path];
+  if (path) {
+    const clusterVersion = cluster?.kubernetesVersion || '';
+    const version = clusterVersion.match(/\d+/g);
+    const isRequiredVersion = version?.length ? +version[0] === 1 && +version[1] < 25 : false;
+
+    // Provide path as question variable to be ignored
+    if (!isRequiredVersion) {
+      return [path];
+    }
+  }
+
+  return [];
 };

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

@@ -248,7 +248,7 @@ export default {
       return;
     }
 
-    if ( this.version ) {
+    if ( this.version && process.client ) {
       /*
         Check if the Helm chart has provided the name
         of a Vue component to use for configuring
@@ -473,7 +473,7 @@ export default {
      * Return list of variables to filter chart questions
      */
     ignoreVariables() {
-      return ignoreVariables(this.versionInfo);
+      return ignoreVariables(this.currentCluster, this.versionInfo);
     },
 
     namespaceIsNew() {
@@ -857,9 +857,11 @@ export default {
         }
 
         if (provCluster?.isRke2) { // isRke2 returns true for both RKE2 and K3s clusters.
+          const agentConfig = provCluster.spec?.rkeConfig?.machineSelectorConfig?.find((x) => !x.machineLabelSelector).config;
+
           // If a cluster scoped registry exists,
           // it should be used by default.
-          const clusterRegistry = provCluster.agentConfig?.['system-default-registry'] || '';
+          const clusterRegistry = agentConfig?.['system-default-registry'] || '';
 
           if (clusterRegistry) {
             return clusterRegistry;
@@ -1601,7 +1603,6 @@ export default {
                 v-if="componentHasTabs"
                 ref="tabs"
                 :side-tabs="true"
-                :hide-single-tab="true"
                 :class="{'with-name': showNameEditor}"
                 class="step__values__content"
                 @changed="tabChanged($event)"
@@ -1646,7 +1647,6 @@ export default {
               v-else-if="hasQuestions && showQuestions"
               ref="tabs"
               :side-tabs="true"
-              :hide-single-tab="true"
               :class="{'with-name': showNameEditor}"
               class="step__values__content"
               @changed="tabChanged($event)"

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

@@ -2,6 +2,8 @@
 import { NAME as APPS } from '@shell/config/product/apps';
 
 export default {
+  layout: 'plain',
+
   middleware({ redirect, route } ) {
     return redirect({
       name:   'c-cluster-apps-charts',

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

@@ -3,6 +3,8 @@ import { NAME as AUTH } from '@shell/config/product/auth';
 import { MANAGEMENT } from '@shell/config/types';
 
 export default {
+  layout: 'plain',
+
   middleware({ redirect, route } ) {
     return redirect({
       name:   'c-cluster-product-resource',