@rancher/shell 0.5.3 → 2.0.0

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

@@ -7,9 +7,11 @@ import LazyImage from '@shell/components/LazyImage';
 import DateFormatter from '@shell/components/formatter/Date';
 import isEqual from 'lodash/isEqual';
 import { CHART, REPO, REPO_TYPE, VERSION } from '@shell/config/query-params';
+import { ZERO_TIME } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import { compatibleVersionsFor } from '@shell/store/catalog';
 import TypeDescription from '@shell/components/TypeDescription';
+
 export default {
   components: {
     Banner,
@@ -30,6 +32,7 @@ export default {
 
   data() {
     return {
+      ZERO_TIME,
       showLastVersions: 10,
       showMoreVersions: false,
     };
@@ -51,8 +54,18 @@ export default {
       return this.isChartTargeted ? this.t('catalog.chart.errors.clusterToolExists', { url }, true) : '';
     },
 
+    appVersion() {
+      return this.version.appVersion || this.versionInfo?.chart?.appVersion;
+    },
+
+    home() {
+      return this.version.home || this.versionInfo?.chart?.home;
+    },
+
     maintainers() {
-      return this.version.maintainers.map((m) => {
+      const maintainers = this.version.maintainers || this.versionInfo?.chart?.maintainers || [];
+
+      return maintainers.map((m) => {
         return {
           id:   m.name,
           text: m.name,
@@ -79,6 +92,23 @@ export default {
       }
 
       return false;
+    },
+
+    warningMessage() {
+      const {
+        deprecated, experimental, chartName: name, chartNameDisplay
+      } = this.chart;
+      const chartName = chartNameDisplay || name;
+
+      if (deprecated && experimental) {
+        return this.t('catalog.chart.deprecatedAndExperimentalWarning', { chartName });
+      } else if (deprecated) {
+        return this.t('catalog.chart.deprecatedWarning', { chartName });
+      } else if (experimental) {
+        return this.t('catalog.chart.experimentalWarning', { chartName });
+      }
+
+      return '';
     }
 
   },
@@ -116,10 +146,21 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <TypeDescription resource="chart" />
+    <Banner
+      v-if="versionInfoError"
+      color="error"
+      :label="versionInfoError"
+    />
     <div
       v-if="chart"
       class="chart-header"
     >
+      <Banner
+        v-if="warningMessage"
+        color="warning"
+        :label="warningMessage"
+        data-testid="deprecation-and-experimental-banner"
+      />
       <div class="name-logo-install">
         <div class="name-logo">
           <div class="logo-bg">
@@ -129,9 +170,9 @@ export default {
             />
           </div>
           <h1>
-            <nuxt-link :to="{ name: 'c-cluster-apps-charts' }">
+            <router-link :to="{ name: 'c-cluster-apps-charts' }">
               {{ t('catalog.chart.header.charts') }}:
-            </nuxt-link>
+            </router-link>
             {{ chart.chartNameDisplay }} ({{ targetVersion }})
           </h1>
         </div>
@@ -230,6 +271,7 @@ export default {
               {{ vers.originalVersion === currentVersion ? t('catalog.install.versions.current', { ver: currentVersion }): vers.shortLabel }}
             </a>
             <DateFormatter
+              v-if="vers.created !== ZERO_TIME"
               :value="vers.created"
               :show-time="false"
             />
@@ -245,25 +287,28 @@ export default {
             </button>
           </div>
         </div>
-        <div class="chart-content__right-bar__section">
+        <div
+          v-if="appVersion"
+          class="chart-content__right-bar__section"
+        >
           <h3 t>
             {{ t('catalog.chart.info.appVersion') }}
           </h3>
-          {{ version.appVersion }}
+          {{ appVersion }}
         </div>
         <div
-          v-if="version.home"
+          v-if="home"
           class="chart-content__right-bar__section"
         >
           <h3>{{ t('catalog.chart.info.home') }}</h3>
           <a
-            :href="version.home"
+            :href="home"
             rel="nofollow noopener noreferrer"
             target="_blank"
-          >{{ version.home }}</a>
+          >{{ home }}</a>
         </div>
         <div
-          v-if="version.maintainers"
+          v-if="maintainers.length"
           class="chart-content__right-bar__section"
         >
           <h3>{{ t('catalog.chart.info.maintainers') }}</h3>

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();
@@ -180,8 +182,6 @@ export default {
     featuredCharts() {
       const filteredCharts = this.filterCharts({});
 
-      // debugger;
-
       const featuredCharts = filteredCharts.filter((value) => value.featured).sort((a, b) => a.featured - b.featured);
 
       return featuredCharts.slice(0, 5);
@@ -241,6 +241,10 @@ export default {
     operatingSystem(os) {
       this.$router.applyQuery({ [OPERATING_SYSTEM]: os || undefined });
     },
+
+    showDeprecated(neu) {
+      this.$router.applyQuery({ [DEPRECATED_QUERY]: neu || undefined });
+    }
   },
 
   mounted() {
@@ -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
       });
     },
 
@@ -372,7 +382,7 @@ export default {
           data-testid="charts-header-title"
           class="m-0"
         >
-          {{ t('catalog.charts.header') }}
+          <TabTitle>{{ t('catalog.charts.header') }}</TabTitle>
         </h1>
       </div>
       <div
@@ -389,6 +399,7 @@ export default {
       <h3>{{ t('catalog.charts.featuredCharts') }}</h3>
       <Carousel
         :sliders="featuredCharts"
+        data-testid="charts-carousel"
         @clicked="(row) => selectChart(row)"
       />
     </div>
@@ -401,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">
@@ -434,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 }})
@@ -447,6 +460,7 @@ export default {
           type="search"
           class="input-sm"
           :placeholder="t('catalog.charts.search')"
+          data-testid="charts-filter-input"
         >
 
         <button
@@ -461,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
@@ -481,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"

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

@@ -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>