@rancher/shell 1.2.0 → 2.0.0

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

@@ -7,7 +7,7 @@ import ButtonGroup from '@shell/components/ButtonGroup';
 import SelectIconGrid from '@shell/components/SelectIconGrid';
 import TypeDescription from '@shell/components/TypeDescription';
 import {
-  REPO_TYPE, REPO, CHART, VERSION, SEARCH_QUERY, _FLAGGED, CATEGORY, DEPRECATED, HIDDEN, OPERATING_SYSTEM
+  REPO_TYPE, REPO, CHART, VERSION, SEARCH_QUERY, _FLAGGED, CATEGORY, DEPRECATED as DEPRECATED_QUERY, HIDDEN, OPERATING_SYSTEM
 } from '@shell/config/query-params';
 import { lcFirst } from '@shell/utils/string';
 import { sortBy } from '@shell/utils/sort';
@@ -19,6 +19,7 @@ import { removeObject, addObject, findBy } from '@shell/utils/array';
 import { compatibleVersionsFor, filterAndArrangeCharts } from '@shell/store/catalog';
 import { CATALOG } from '@shell/config/labels-annotations';
 import { isUIPlugin } from '@shell/config/uiplugins';
+import TabTitle from '@shell/components/TabTitle';
 
 export default {
   name:       'Charts',
@@ -31,16 +32,17 @@ export default {
     Checkbox,
     Select,
     SelectIconGrid,
-    TypeDescription
+    TypeDescription,
+    TabTitle
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load', { force: true, reset: true });
+    await this.$store.dispatch('catalog/load');
 
     const query = this.$route.query;
 
     this.searchQuery = query[SEARCH_QUERY] || '';
-    this.showDeprecated = query[DEPRECATED] === _FLAGGED;
+    this.showDeprecated = query[DEPRECATED_QUERY] === 'true' || query[DEPRECATED_QUERY] === _FLAGGED;
     this.showHidden = query[HIDDEN] === _FLAGGED;
     this.category = query[CATEGORY] || '';
     this.allRepos = this.areAllEnabled();
@@ -54,7 +56,6 @@ export default {
       searchQuery:     null,
       showDeprecated:  null,
       showHidden:      null,
-      isPspLegacy:     false,
       chartOptions:    [
         {
           label: 'Browse',
@@ -139,6 +140,11 @@ 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 ) {
@@ -149,10 +155,6 @@ export default {
           return false;
         }
 
-        if ( this.hideRepos.includes(c.repoKey) ) {
-          return false;
-        }
-
         if (isUIPlugin(c)) {
           return false;
         }
@@ -161,26 +163,26 @@ export default {
       });
     },
 
+    /**
+     * Filter enabled charts allll filters. These are what the user will see in the list
+     */
     filteredCharts() {
-      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),
+      return this.filterCharts({
+        category:    this.category,
+        searchQuery: this.searchQuery,
+        hideRepos:   this.hideRepos
       });
     },
 
-    getFeaturedCharts() {
-      const allCharts = (this.filteredCharts || []);
+    /**
+     * 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({});
 
-      const featuredCharts = allCharts.filter((value) => value.featured).sort((a, b) => a.featured - b.featured);
+      const featuredCharts = filteredCharts.filter((value) => value.featured).sort((a, b) => a.featured - b.featured);
 
       return featuredCharts.slice(0, 5);
     },
@@ -188,7 +190,13 @@ export default {
     categories() {
       const map = {};
 
-      for ( const chart of this.enabledCharts ) {
+      // Filter charts by everything except itself
+      const charts = this.filterCharts({
+        searchQuery: this.searchQuery,
+        hideRepos:   this.hideRepos
+      });
+
+      for ( const chart of charts ) {
         for ( const c of chart.categories ) {
           if ( !map[c] ) {
             const labelKey = `catalog.charts.categories.${ lcFirst(c) }`;
@@ -209,14 +217,14 @@ export default {
       out.unshift({
         label: this.t('catalog.charts.categories.all'),
         value: '',
-        count: this.enabledCharts.length
+        count: charts.length
       });
 
-      return out;
+      return sortBy(out, ['label']);
     },
 
     showCarousel() {
-      return this.chartMode === 'featured' && this.getFeaturedCharts.length;
+      return this.chartMode === 'featured' && this.featuredCharts.length;
     }
 
   },
@@ -233,6 +241,10 @@ export default {
     operatingSystem(os) {
       this.$router.applyQuery({ [OPERATING_SYSTEM]: os || undefined });
     },
+
+    showDeprecated(neu) {
+      this.$router.applyQuery({ [DEPRECATED_QUERY]: neu || undefined });
+    }
   },
 
   mounted() {
@@ -241,14 +253,6 @@ 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;
@@ -312,18 +316,24 @@ export default {
         version = versions[0].version;
       }
 
+      const query = {
+        [REPO_TYPE]: chart.repoType,
+        [REPO]:      chart.repoName,
+        [CHART]:     chart.chartName,
+        [VERSION]:   version
+      };
+
+      if (chart.deprecated && this.showDeprecated) {
+        query[DEPRECATED_QUERY] = 'true';
+      }
+
       this.$router.push({
         name:   'c-cluster-apps-charts-chart',
         params: {
           cluster: this.$route.params.cluster,
           product: this.$store.getters['productId'],
         },
-        query: {
-          [REPO_TYPE]: chart.repoType,
-          [REPO]:      chart.repoName,
-          [CHART]:     chart.chartName,
-          [VERSION]:   version,
-        }
+        query
       });
     },
 
@@ -343,6 +353,22 @@ 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>
@@ -356,11 +382,11 @@ export default {
           data-testid="charts-header-title"
           class="m-0"
         >
-          {{ t('catalog.charts.header') }}
+          <TabTitle>{{ t('catalog.charts.header') }}</TabTitle>
         </h1>
       </div>
       <div
-        v-if="getFeaturedCharts.length > 0"
+        v-if="featuredCharts.length > 0"
         class="actions-container"
       >
         <ButtonGroup
@@ -372,17 +398,12 @@ export default {
     <div v-if="showCarousel">
       <h3>{{ t('catalog.charts.featuredCharts') }}</h3>
       <Carousel
-        :sliders="getFeaturedCharts"
+        :sliders="featuredCharts"
+        data-testid="charts-carousel"
         @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
@@ -391,6 +412,7 @@ export default {
         :value="flattenedRepoNames"
         class="checkbox-select"
         :close-on-select="false"
+        data-testid="charts-filter-repos"
         @option:selecting="$event.all ? toggleAll(!$event.enabled) : toggleRepo($event, !$event.enabled) "
       >
         <template #selected-option="selected">
@@ -424,6 +446,7 @@ export default {
         label="label"
         style="min-width: 200px;"
         :reduce="opt => opt.value"
+        data-testid="charts-filter-category"
       >
         <template #option="opt">
           {{ opt.label }} ({{ opt.count }})
@@ -437,6 +460,7 @@ export default {
           type="search"
           class="input-sm"
           :placeholder="t('catalog.charts.search')"
+          data-testid="charts-filter-input"
         >
 
         <button
@@ -451,6 +475,14 @@ export default {
           @click="refresh"
         />
       </div>
+
+      <div class="mt-10">
+        <Checkbox
+          v-model="showDeprecated"
+          :label="t('catalog.charts.deprecatedChartsFilter.label')"
+          data-testid="charts-show-deprecated-filter"
+        />
+      </div>
     </div>
 
     <Banner
@@ -471,6 +503,8 @@ export default {
       </div>
       <SelectIconGrid
         v-else
+        data-testid="chart-selection-grid"
+        component-test-id="chart-selection"
         :rows="filteredCharts"
         name-field="chartNameDisplay"
         description-field="chartDescription"
@@ -529,22 +563,21 @@ 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 {
@@ -552,7 +585,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;
 
@@ -567,7 +600,7 @@ export default {
     }
   }
 
-  &:hover ::v-deep.checkbox-label {
+  &:hover ::v-deep .checkbox-label {
       color: var(--body-text);
     }
 
@@ -575,7 +608,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 {
@@ -587,7 +620,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 {
@@ -599,7 +632,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 {
@@ -610,10 +643,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)
     }
   }
@@ -621,7 +654,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 {
@@ -643,7 +676,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 {
@@ -654,7 +687,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 {
@@ -665,7 +698,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 {
@@ -676,9 +709,6 @@ 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 = (cluster, data) => {
+export const ignoreVariables = (data) => {
   const pspChartMap = {
     epinio:                     'global.rbac.pspEnabled',
     longhorn:                   'enablePSP',
@@ -11,16 +11,5 @@ export const ignoreVariables = (cluster, data) => {
   };
   const path = pspChartMap[data.chart.name];
 
-  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 [];
+  return [path];
 };

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

@@ -248,7 +248,7 @@ export default {
       return;
     }
 
-    if ( this.version && process.client ) {
+    if ( this.version ) {
       /*
         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.currentCluster, this.versionInfo);
+      return ignoreVariables(this.versionInfo);
     },
 
     namespaceIsNew() {
@@ -857,11 +857,9 @@ 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 = agentConfig?.['system-default-registry'] || '';
+          const clusterRegistry = provCluster.agentConfig?.['system-default-registry'] || '';
 
           if (clusterRegistry) {
             return clusterRegistry;
@@ -1603,6 +1601,7 @@ 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)"
@@ -1647,6 +1646,7 @@ 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)"
@@ -1847,17 +1847,17 @@ export default {
         </span>
         <template v-if="!legacyEnabled">
           <span v-clean-html="t('catalog.install.error.legacy.enableLegacy.prompt', true)" />
-          <nuxt-link :to="legacyFeatureRoute">
+          <router-link :to="legacyFeatureRoute">
             {{ t('catalog.install.error.legacy.enableLegacy.goto') }}
-          </nuxt-link>
+          </router-link>
         </template>
         <template v-else-if="mcapp">
           <span v-clean-html="t('catalog.install.error.legacy.mcmNotSupported')" />
         </template>
         <template v-else>
-          <nuxt-link :to="legacyAppRoute">
+          <router-link :to="legacyAppRoute">
             <span v-clean-html="t('catalog.install.error.legacy.navigate')" />
-          </nuxt-link>
+          </router-link>
         </template>
       </Banner>
     </div>

package/pages/c/_cluster/auth/config/_id.vue

@@ -19,12 +19,6 @@ export default {
       // Ensure we re-evaluate the redirect in case this auth provider has been disabled
       const authProvs = await authProvidersInfo(this.$store);
 
-      // Nuxt does not remove it's loading indicator - if we are not changing route, then hide it
-      // https://nuxtjs.org/docs/features/loading/
-      if (authProvs.enabledLocation) {
-        this.$nuxt.$loading.finish();
-      }
-
       next(!authProvs.enabledLocation);
     } else {
       next();

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

@@ -5,18 +5,22 @@ import { sortBy } from '@shell/utils/sort';
 import { MODE, _EDIT } from '@shell/config/query-params';
 import { authProvidersInfo } from '@shell/utils/auth';
 import { Banner } from '@components/Banner';
+import Loading from '@shell/components/Loading';
 
 export default {
-  components: { SelectIconGrid, Banner },
+  components: {
+    SelectIconGrid, Banner, Loading
+  },
 
-  async asyncData({ store, redirect }) {
-    const authProvs = await authProvidersInfo(store);
+  async fetch() {
+    const authProvs = await authProvidersInfo(this.$store);
 
     if (!!authProvs.enabledLocation) {
-      redirect(authProvs.enabledLocation);
+      return this.$router.replace(authProvs.enabledLocation);
     }
 
-    return { nonLocal: authProvs.nonLocal, enabled: authProvs.enabled };
+    this.$set(this, 'enabled', authProvs.enabled);
+    this.$set(this, 'nonLocal', authProvs.nonLocal);
   },
 
   data() {
@@ -33,7 +37,8 @@ export default {
       hasListComponent,
       hasEditComponent,
 
-      // Provided by asyncData later
+      // Provided by fetch later
+      enabled:  false,
       nonLocal: null,
     };
   },
@@ -82,7 +87,8 @@ export default {
 </script>
 
 <template>
-  <div>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
     <h1 class="m-0">
       {{ displayName }}
     </h1>
@@ -93,9 +99,9 @@ export default {
     >
       <div>
         {{ t('authConfig.localEnabled') }}
-        <nuxt-link :to="localUsersRoute">
+        <router-link :to="localUsersRoute">
           {{ t('authConfig.manageLocal') }}
-        </nuxt-link>
+        </router-link>
         <br>
         {{ t('authConfig.noneEnabled') }}
       </div>

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

@@ -36,14 +36,12 @@ export default {
     Tab, Tabbed, ResourceTable, Loading, Banner
   },
 
-  async asyncData({ store }) {
-    const globalRoleSchema = store.getters[`management/schemaFor`](MANAGEMENT.GLOBAL_ROLE);
-    const roleTemplatesSchema = store.getters[`management/schemaFor`](MANAGEMENT.ROLE_TEMPLATE);
+  async fetch() {
+    const globalRoleSchema = this.$store.getters[`management/schemaFor`](MANAGEMENT.GLOBAL_ROLE);
+    const roleTemplatesSchema = this.$store.getters[`management/schemaFor`](MANAGEMENT.ROLE_TEMPLATE);
 
-    return {
-      globalRoles:   globalRoleSchema ? await store.dispatch(`management/findAll`, { type: MANAGEMENT.GLOBAL_ROLE }) : [],
-      roleTemplates: roleTemplatesSchema ? await store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }) : [],
-    };
+    this.$set(this, 'globalRoles', globalRoleSchema ? await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.GLOBAL_ROLE }) : []);
+    this.$set(this, 'roleTemplates', roleTemplatesSchema ? await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }) : []);
   },
 
   data() {
@@ -158,7 +156,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="!globalRoles || !roleTemplates" />
+  <Loading v-if="$fetchState.pending" />
   <div v-else>
     <header>
       <div class="title">
@@ -168,13 +166,13 @@ export default {
       </div>
       <div class="actions-container">
         <div class="actions">
-          <n-link
+          <router-link
             v-if="canCreate"
             :to="createLocation"
             class="btn role-primary"
           >
             {{ createLabel }}
-          </n-link>
+          </router-link>
         </div>
       </div>
     </header>

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

@@ -1,8 +1,6 @@
 <script>
 
 export default {
-  layout: 'plain',
-
   mounted() {
     const link = this.$store.getters['backToRancherLink'];