@rancher/shell 0.1.3 → 0.1.21

package/models/workload.js

@@ -218,7 +218,7 @@ export default class Workload extends WorkloadService {
         path:           'metadata.name',
         required:       true,
         translationKey: 'generic.name',
-        type:           'dnsLabel',
+        type:           'subDomain',
       },
       {
         nullable:       false,
@@ -405,7 +405,7 @@ export default class Workload extends WorkloadService {
     case WORKLOAD_TYPES.CRON_JOB:
       out.push(detailItem.endpoint);
       break;
-    case WORKLOAD_TYPES.POD:
+    case POD:
       out.push(detailItem.ready);
       break;
     default: break;
@@ -612,8 +612,10 @@ export default class Workload extends WorkloadService {
 
   async matchingPods() {
     const all = await this.$dispatch('findAll', { type: POD });
+    const allInNamespace = all.filter(pod => pod.metadata.namespace === this.metadata.namespace);
+
     const selector = convertSelectorObj(this.spec.selector);
 
-    return matching(all, selector);
+    return matching(allInNamespace, selector);
   }
 }

package/models/workload.service.js

@@ -123,6 +123,11 @@ export default class WorkloadService extends SteveModel {
 
       return containers;
     }
+
+    if ( this.spec.containers ) {
+      return this.spec.containers;
+    }
+
     const { spec:{ template:{ spec:{ containers } } } } = this;
 
     return containers;
@@ -135,6 +140,11 @@ export default class WorkloadService extends SteveModel {
 
       return initContainers;
     }
+
+    if (this.spec.initContainers) {
+      return this.spec.initContainers;
+    }
+
     const { spec:{ template:{ spec:{ initContainers } } } } = this;
 
     return initContainers;

package/nuxt.config.js

@@ -185,8 +185,6 @@ export default function(dir, _appConfig) {
 
   // Serve up the dist-pkg folder under /pkg
   serverMiddleware.push({ path: `/pkg/`, handler: serveStatic(`${ dir }/dist-pkg/`) });
-  // Endpoint to download and unpack a tgz from the local verdaccio rgistry (dev)
-  serverMiddleware.push(path.resolve(dir, SHELL, 'server', 'verdaccio-middleware'));
   // Add the standard dashboard server middleware after the middleware added to serve up UI packages
   serverMiddleware.push(path.resolve(dir, SHELL, 'server', 'server-middleware'));
 
@@ -202,6 +200,8 @@ export default function(dir, _appConfig) {
     process.env.DRONE_VERSION ||
     require('./package.json').version;
 
+  const prime = process.env.PRIME;
+
   const dev = (process.env.NODE_ENV !== 'production');
   const devPorts = dev || process.env.DEV_PORTS === 'true';
   const pl = process.env.PL || STANDARD;
@@ -496,7 +496,8 @@ export default function(dir, _appConfig) {
         plugins: [
           // TODO: Browser support
           // ['@babel/plugin-transform-modules-commonjs'],
-          ['@babel/plugin-proposal-private-property-in-object', { loose: true }]
+          ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+          'babel-plugin-istanbul'
         ],
       }
     },
@@ -554,7 +555,7 @@ export default function(dir, _appConfig) {
     plugins: [
       // Extensions
       path.relative(dir, path.join(SHELL, 'core/plugins.js')),
-      path.relative(dir, path.join(SHELL, 'core/plugins-loader.js')),
+      path.relative(dir, path.join(SHELL, 'core/plugins-loader.js')), // Load builtin plugins
 
       // Third-party
       path.join(NUXT_SHELL, 'plugins/axios'),
@@ -578,33 +579,34 @@ export default function(dir, _appConfig) {
       { src: path.join(NUXT_SHELL, 'plugins/nuxt-client-init'), ssr: false },
       path.join(NUXT_SHELL, 'plugins/replaceall'),
       path.join(NUXT_SHELL, 'plugins/back-button'),
-      { src: path.join(NUXT_SHELL, 'plugins/plugin'), ssr: false },
+      { src: path.join(NUXT_SHELL, 'plugins/plugin'), ssr: false }, // Load dyanmic plugins
       { src: path.join(NUXT_SHELL, 'plugins/codemirror-loader'), ssr: false },
+      { src: path.join(NUXT_SHELL, 'plugins/formatters'), ssr: false }, // Populate formatters cache for sorted table
+      { src: path.join(NUXT_SHELL, 'plugins/version'), ssr: false }, // Makes a fetch to the backend to get version metadata
     ],
 
     // Proxy: https://github.com/nuxt-community/proxy-module#options
     proxy: {
-      '/k8s':          proxyWsOpts(api), // Straight to a remote cluster (/k8s/clusters/<id>/)
-      '/pp':           proxyWsOpts(api), // For (epinio) standalone API
-      '/api':          proxyWsOpts(api), // Management k8s API
-      '/apis':         proxyWsOpts(api), // Management k8s API
-      '/v1':           proxyWsOpts(api), // Management Steve API
-      '/v3':           proxyWsOpts(api), // Rancher API
-      '/v3-public':    proxyOpts(api), // Rancher Unauthed API
-      '/api-ui':       proxyOpts(api), // Browser API UI
-      '/meta':         proxyMetaOpts(api), // Browser API UI
-      '/v1-*':         proxyOpts(api), // SAML, KDM, etc
+      '/k8s':            proxyWsOpts(api), // Straight to a remote cluster (/k8s/clusters/<id>/)
+      '/pp':             proxyWsOpts(api), // For (epinio) standalone API
+      '/api':            proxyWsOpts(api), // Management k8s API
+      '/apis':           proxyWsOpts(api), // Management k8s API
+      '/v1':             proxyWsOpts(api), // Management Steve API
+      '/v3':             proxyWsOpts(api), // Rancher API
+      '/v3-public':      proxyOpts(api), // Rancher Unauthed API
+      '/api-ui':         proxyOpts(api), // Browser API UI
+      '/meta':           proxyMetaOpts(api), // Browser API UI
+      '/v1-*':           proxyOpts(api), // SAML, KDM, etc
+      '/rancherversion': proxyPrimeOpts(api), // Rancher version endpoint
       // These are for Ember embedding
-      '/c/*/edit':     proxyOpts('https://127.0.0.1:8000'), // Can't proxy all of /c because that's used by Vue too
-      '/k/':           proxyOpts('https://127.0.0.1:8000'),
-      '/g/':           proxyOpts('https://127.0.0.1:8000'),
-      '/n/':           proxyOpts('https://127.0.0.1:8000'),
-      '/p/':           proxyOpts('https://127.0.0.1:8000'),
-      '/assets':       proxyOpts('https://127.0.0.1:8000'),
-      '/translations': proxyOpts('https://127.0.0.1:8000'),
-      '/engines-dist': proxyOpts('https://127.0.0.1:8000'),
-      // Plugin dev
-      '/verdaccio/':   proxyOpts('http://127.0.0.1:4873/-'),
+      '/c/*/edit':       proxyOpts('https://127.0.0.1:8000'), // Can't proxy all of /c because that's used by Vue too
+      '/k/':             proxyOpts('https://127.0.0.1:8000'),
+      '/g/':             proxyOpts('https://127.0.0.1:8000'),
+      '/n/':             proxyOpts('https://127.0.0.1:8000'),
+      '/p/':             proxyOpts('https://127.0.0.1:8000'),
+      '/assets':         proxyOpts('https://127.0.0.1:8000'),
+      '/translations':   proxyOpts('https://127.0.0.1:8000'),
+      '/engines-dist':   proxyOpts('https://127.0.0.1:8000'),
     },
 
     // Nuxt server
@@ -663,6 +665,49 @@ export default function(dir, _appConfig) {
     };
   }
 
+  // Intercept the /rancherversion API call wnad modify the 'RancherPrime' value
+  // if configured to do so by the environment variable PRIME
+  function proxyPrimeOpts(target) {
+    const opts = proxyOpts(target);
+
+    // Don't intercept if the PRIME environment variable is not set
+    if (!prime?.length) {
+      return opts;
+    }
+
+    opts.onProxyRes = (proxyRes, req, res) => {
+      const _end = res.end;
+      let body = '';
+
+      proxyRes.on( 'data', (data) => {
+        data = data.toString('utf-8');
+        body += data;
+      });
+
+      res.write = () => {};
+
+      res.end = () => {
+        let output = body;
+
+        try {
+          const out = JSON.parse(body);
+
+          out.RancherPrime = prime;
+          output = JSON.stringify(out);
+        } catch (err) {}
+
+        res.setHeader('content-length', output.length );
+        res.setHeader('content-type', 'application/json' );
+        res.setHeader('transfer-encoding', '');
+        res.setHeader('cache-control', 'no-cache');
+        res.writeHead(proxyRes.statusCode);
+        _end.apply(res, [output]);
+      };
+    };
+
+    return opts;
+  }
+
   function onProxyRes(proxyRes, req, res) {
     if (devPorts) {
       proxyRes.headers['X-Frame-Options'] = 'ALLOWALL';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.1.3",
+  "version": "0.1.21",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -32,125 +32,124 @@
     "e2e:dev": "start-server-and-test dev https://localhost:8005 cy:open"
   },
   "dependencies": {
-    "@aws-sdk/client-ec2": "^3.1.0",
-    "@aws-sdk/client-eks": "^3.1.0",
-    "@aws-sdk/client-kms": "^3.8.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-    "@babel/plugin-proposal-private-property-in-object": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@innologica/vue-dropdown-menu": "^0.1.3",
-    "@novnc/novnc": "^1.2.0",
+    "@aws-sdk/client-ec2": "3.1.0",
+    "@aws-sdk/client-eks": "3.1.0",
+    "@aws-sdk/client-kms": "3.8.1",
+    "@babel/plugin-proposal-optional-chaining": "7.14.5",
+    "@babel/plugin-proposal-private-property-in-object": "7.14.5",
+    "@babel/preset-typescript": "7.16.7",
+    "@innologica/vue-dropdown-menu": "0.1.3",
+    "@novnc/novnc": "1.2.0",
     "@nuxt/types": "2.14.6",
-    "@nuxt/typescript-build": "^2.1.0",
-    "@nuxtjs/axios": "^5.3.6",
-    "@nuxtjs/eslint-config-typescript": "^6.0.1",
-    "@nuxtjs/eslint-module": "^1.1.0",
-    "@nuxtjs/proxy": "^1.3.3",
-    "@nuxtjs/style-resources": "^1.2.1",
-    "@nuxtjs/webpack-profile": "^0.1.0",
-    "@popperjs/core": "^2.4.0",
-    "@types/node": "^16.4.3",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-typescript": "^4.5.15",
-    "@vue/cli-service": "^4.5.13",
+    "@nuxt/typescript-build": "2.1.0",
+    "@nuxtjs/axios": "5.12.0",
+    "@nuxtjs/eslint-config-typescript": "6.0.1",
+    "@nuxtjs/eslint-module": "1.2.0",
+    "@nuxtjs/proxy": "1.3.3",
+    "@nuxtjs/style-resources": "1.2.1",
+    "@nuxtjs/webpack-profile": "0.1.0",
+    "@popperjs/core": "2.4.4",
+    "@types/node": "16.4.3",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "@vue/cli-plugin-babel": "4.5.15",
+    "@vue/cli-plugin-typescript": "4.5.15",
+    "@vue/cli-service": "4.5.15",
     "@vue/test-utils": "1.2.1",
-    "@vue/vue2-jest": "^27.0.0",
-    "add": "^2.0.6",
-    "ansi_up": "^5.0.0",
-    "babel-eslint": "^10.0.1",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-vue": "^2.0.2",
-    "browser-env": "^3.2.6",
-    "comlink": "^4.3.1",
-    "cookie": "^0.4.0",
-    "cookie-universal-nuxt": "^2.0.17",
-    "core-js": "^3.20.3",
-    "cron-validator": "^1.2.0",
-    "cronstrue": "^1.92.0",
-    "cross-env": "^6.0.3",
+    "@vue/vue2-jest": "27.0.0",
+    "add": "2.0.6",
+    "ansi_up": "5.0.0",
+    "babel-eslint": "10.1.0",
+    "babel-plugin-module-resolver": "4.0.0",
+    "babel-preset-vue": "2.0.2",
+    "browser-env": "3.3.0",
+    "cookie": "0.5.0",
+    "cookie-universal-nuxt": "2.1.4",
+    "core-js": "3.21.1",
+    "cron-validator": "1.2.0",
+    "cronstrue": "1.95.0",
+    "cross-env": "6.0.3",
     "css-loader": "4.3.0",
-    "csv-loader": "^3.0.3",
-    "cypress": "8.4.1",
-    "d3": "^5.12.0",
-    "d3-selection": "^1.3.0",
-    "dagre-d3": "^0.6.3",
-    "dayjs": "^1.8.16",
-    "diff2html": "^2.11.2",
-    "dompurify": "^2.0.12",
+    "csv-loader": "3.0.3",
+    "cypress": "10.3.1",
+    "d3": "7.3.0",
+    "d3-selection": "1.4.1",
+    "dagre-d3": "0.6.4",
+    "dayjs": "1.8.29",
+    "diff2html": "2.11.2",
+    "dompurify": "2.0.12",
     "eslint": "7.32.0",
-    "eslint-config-standard": ">=12.0.0",
+    "eslint-config-standard": "16.0.3",
     "eslint-import-resolver-node": "0.3.4",
     "eslint-module-utils": "2.6.1",
-    "eslint-plugin-cypress": "^2.11.3",
+    "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-jest": "^23.6.0",
-    "eslint-plugin-n": "^15.2.0",
+    "eslint-plugin-jest": "24.4.0",
+    "eslint-plugin-n": "15.2.0",
     "eslint-plugin-vue": "7.14.0",
-    "event-target-shim": "^5.0.1",
-    "express": "^4.17.1",
-    "file-saver": "^2.0.2",
-    "frontmatter-markdown-loader": "^3.6.3",
-    "identicon.js": "^2.3.3",
-    "intl-messageformat": "^7.7.2",
-    "is-url": "^1.2.4",
-    "jest": "^27.5.1",
-    "jest-serializer-vue": "^2.0.2",
-    "jexl": "^2.2.2",
-    "jquery": "^3.5.0",
-    "js-cookie": "^2.2.0",
-    "js-yaml": "^4.1.0",
-    "js-yaml-loader": "^1.2.2",
-    "jsdiff": "^1.1.1",
-    "jsdom-global": "^3.0.2",
-    "jsonpath-plus": "^6.0.1",
-    "jsrsasign": "^10.2.0",
-    "jszip": "^3.7.0",
-    "lodash": "^4.17.21",
-    "marked": "^2.0.0",
-    "nodemon": "^2.0.2",
+    "event-target-shim": "5.0.1",
+    "express": "4.17.1",
+    "file-saver": "2.0.2",
+    "frontmatter-markdown-loader": "3.7.0",
+    "identicon.js": "2.3.3",
+    "intl-messageformat": "7.8.4",
+    "is-url": "1.2.4",
+    "jest": "27.5.1",
+    "jest-serializer-vue": "2.0.2",
+    "jexl": "2.2.2",
+    "jquery": "3.5.1",
+    "js-cookie": "2.2.1",
+    "js-yaml": "4.1.0",
+    "js-yaml-loader": "1.2.2",
+    "jsdiff": "1.1.1",
+    "jsdom-global": "3.0.2",
+    "jsonpath-plus": "6.0.1",
+    "jsrsasign": "10.2.0",
+    "jszip": "3.7.0",
+    "lodash": "4.17.21",
+    "marked": "4.0.17",
+    "nodemon": "2.0.4",
     "nuxt": "2.15.8",
-    "nyc": "^15.0.0",
-    "papaparse": "^5.3.0",
-    "portal-vue": "^2.1.5",
-    "rancher-icons": "rancher/icons#v2.0.0",
-    "require-extension-hooks": "^0.3.3",
-    "require-extension-hooks-babel": "^1.0.0-beta.1",
-    "require-extension-hooks-vue": "^3.0.0",
-    "sass": "^1.38.2",
-    "sass-loader": "10",
-    "serve-static": "^1.14.1",
-    "set-cookie-parser": "^2.4.0",
-    "shell-quote": "^1.7.2",
-    "sinon": "^8.0.4",
-    "start-server-and-test": "^1.13.1",
-    "style-loader": "^1.1.2",
-    "ts-node": "^8.3.0",
-    "typescript": "~4.1.5",
-    "url-parse": "^1.5.0",
-    "v-tooltip": "^2.0.2",
+    "nyc": "15.1.0",
+    "papaparse": "5.3.0",
+    "portal-vue": "2.1.7",
+    "rancher-icons": "rancher/icons#v2.0.3",
+    "require-extension-hooks": "0.3.3",
+    "require-extension-hooks-babel": "1.0.0",
+    "require-extension-hooks-vue": "3.0.0",
+    "sass": "1.51.0",
+    "sass-loader": "10.2.1",
+    "serve-static": "1.14.1",
+    "set-cookie-parser": "2.4.6",
+    "shell-quote": "1.7.3",
+    "sinon": "8.1.1",
+    "start-server-and-test": "1.13.1",
+    "style-loader": "1.2.1",
+    "ts-node": "8.10.2",
+    "typescript": "4.1.6",
+    "url-parse": "1.5.10",
+    "v-tooltip": "2.0.3",
     "vue": "2.6.14",
-    "vue-clipboard2": "^0.3.1",
-    "vue-codemirror": "^4.0.6",
-    "vue-js-modal": "^1.3.31",
-    "vue-resize": "^0.4.5",
-    "vue-select": "^3.13.0",
+    "vue-clipboard2": "0.3.1",
+    "vue-codemirror": "4.0.6",
+    "vue-js-modal": "1.3.35",
+    "vue-resize": "0.4.5",
+    "vue-select": "3.18.3",
     "vue-server-renderer": "2.6.14",
-    "vue-shortkey": "^3.1.7",
+    "vue-shortkey": "3.1.7",
     "vue-template-compiler": "2.6.14",
-    "vue2-transitions": "^0.3.0",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-virtual-modules": "^0.4.3",
-    "xterm": "^4.9.0",
-    "xterm-addon-fit": "^0.4.0",
-    "xterm-addon-search": "^0.7.0",
-    "xterm-addon-web-links": "^0.4.0",
-    "xterm-addon-webgl": "^0.9.0",
-    "worker-loader": "^3.0.8",
-    "yarn": "^1.22.11"
+    "vue2-transitions": "0.3.0",
+    "vuedraggable": "2.24.3",
+    "vuex": "3.6.2",
+    "webpack-bundle-analyzer": "4.5.0",
+    "webpack-virtual-modules": "0.4.3",
+    "xterm": "4.9.0",
+    "xterm-addon-fit": "0.4.0",
+    "xterm-addon-search": "0.7.0",
+    "xterm-addon-web-links": "0.4.0",
+    "xterm-addon-webgl": "0.9.0",
+    "worker-loader": "3.0.8",
+    "yarn": "1.22.18"
   },
   "nyc": {
     "extension": [
@@ -158,4 +157,4 @@
       ".vue"
     ]
   }
-}
+}

package/pages/auth/login.vue

@@ -26,6 +26,7 @@ import {
   setBrand,
   setVendor
 } from '@shell/config/private-label';
+import loadPlugins from '@shell/plugins/plugin';
 
 export default {
   name:       'Login',
@@ -255,6 +256,15 @@ export default {
           this.$cookies.remove(USERNAME);
         }
 
+        // User logged with local login - we don't do any redirect/reload, so the boot-time plugin will not run again to laod the plugins
+        // 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
+        });
+
         if (this.firstLogin || user[0]?.mustChangePassword) {
           this.$store.dispatch('auth/setInitialPass', this.password);
           this.$router.push({ name: 'auth-setup' });
@@ -395,7 +405,7 @@ export default {
             </a>
           </div>
           <div class="locale-elector">
-            <LocaleSelector></LocaleSelector>
+            <LocaleSelector mode="login" />
           </div>
         </template>
       </div>

package/pages/auth/verify.vue

@@ -2,6 +2,8 @@
 import { GITHUB_CODE, GITHUB_NONCE, BACK_TO } from '@shell/config/query-params';
 import { get } from '@shell/utils/object';
 import { base64Decode } from '@shell/utils/crypto';
+import loadPlugins from '@shell/plugins/plugin';
+
 const samlProviders = ['ping', 'adfs', 'keycloak', 'okta', 'shibboleth'];
 
 function reply(err, code) {
@@ -60,6 +62,13 @@ export default {
       if ( res._status === 200) {
         const backTo = route.query[BACK_TO] || '/';
 
+        // Load plugins
+        await loadPlugins({
+          app:     store.app,
+          store,
+          $plugin: store.$plugin
+        });
+
         redirect(backTo);
       } else {
         redirect(`/auth/login?err=${ escape(res) }`);

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

@@ -2,6 +2,8 @@
 import AsyncButton from '@shell/components/AsyncButton';
 import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
+import Carousel from '@shell/components/Carousel';
+import ButtonGroup from '@shell/components/ButtonGroup';
 import SelectIconGrid from '@shell/components/SelectIconGrid';
 import TypeDescription from '@shell/components/TypeDescription';
 import {
@@ -12,15 +14,18 @@ import { sortBy } from '@shell/utils/sort';
 import { mapGetters } from 'vuex';
 import { Checkbox } from '@components/Form/Checkbox';
 import Select from '@shell/components/form/Select';
-import { mapPref, HIDE_REPOS, SHOW_PRE_RELEASE } from '@shell/store/prefs';
+import { mapPref, HIDE_REPOS, SHOW_PRE_RELEASE, SHOW_CHART_MODE } from '@shell/store/prefs';
 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';
 
 export default {
   components: {
     AsyncButton,
     Banner,
+    Carousel,
+    ButtonGroup,
     Loading,
     Checkbox,
     Select,
@@ -48,6 +53,17 @@ export default {
       searchQuery:         null,
       showDeprecated:      null,
       showHidden:          null,
+      chartMode:           this.$store.getters['prefs/get'](SHOW_CHART_MODE),
+      chartOptions:    [
+        {
+          label:       'Browse',
+          value:       'browse',
+        },
+        {
+          label: 'Featured',
+          value: 'featured'
+        }
+      ]
     };
   },
 
@@ -134,6 +150,10 @@ export default {
           return false;
         }
 
+        if (isUIPlugin(c)) {
+          return false;
+        }
+
         return true;
       });
     },
@@ -154,6 +174,14 @@ export default {
       });
     },
 
+    getFeaturedCharts() {
+      const allCharts = (this.filteredCharts || []);
+
+      const featuredCharts = allCharts.filter(value => value.featured).sort((a, b) => a.featured - b.featured);
+
+      return featuredCharts.slice(0, 5);
+    },
+
     categories() {
       const map = {};
 
@@ -184,6 +212,10 @@ export default {
       return out;
     },
 
+    showCarousel() {
+      return this.chartMode === 'featured' && this.getFeaturedCharts.length;
+    }
+
   },
 
   watch: {
@@ -313,7 +345,20 @@ export default {
           {{ t('catalog.charts.header') }}
         </h1>
       </div>
+      <div v-if="getFeaturedCharts.length > 0" class="actions-container">
+        <ButtonGroup
+          v-model="chartMode"
+          :options="chartOptions"
+        />
+      </div>
     </header>
+    <div v-if="showCarousel">
+      <h3>Featured Charts</h3>
+      <Carousel
+        :sliders="getFeaturedCharts"
+        @clicked="(row) => selectChart(row)"
+      />
+    </div>
     <TypeDescription resource="chart" />
     <div class="left-right-split">
       <Select

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

@@ -632,10 +632,6 @@ export default {
       return { name: 'c-cluster-legacy-project' };
     },
 
-    mcmRoute() {
-      return { name: 'c-cluster-mcapps' };
-    },
-
     windowsIncompatible() {
       if (this.chart?.windowsIncompatible) {
         return this.t('catalog.charts.windowsIncompatible');
@@ -762,8 +758,10 @@ export default {
 
       // Load a values component for the UI if it is named in the Helm chart.
       if ( component ) {
-        if ( this.$store.getters['catalog/haveComponent'](component) ) {
-          this.valuesComponent = this.$store.getters['catalog/importComponent'](component);
+        const hasChartComponent = this.$store.getters['type-map/hasCustomChart'](component);
+
+        if ( hasChartComponent ) {
+          this.valuesComponent = this.$store.getters['type-map/importChart'](component);
           const loaded = await this.valuesComponent();
 
           this.showValuesComponent = true;
@@ -1537,7 +1535,7 @@ export default {
       </div>
 
       <Banner color="warning" class="description">
-        <span>
+        <span v-if="!mcapp">
           {{ t('catalog.install.error.legacy.label', { legacyType: mcapp ? legacyDefs.mcm : legacyDefs.legacy }, true) }}
         </span>
         <template v-if="!legacyEnabled">
@@ -1546,9 +1544,12 @@ export default {
             {{ t('catalog.install.error.legacy.enableLegacy.goto') }}
           </nuxt-link>
         </template>
+        <template v-else-if="mcapp">
+          <span v-html="t('catalog.install.error.legacy.mcmNotSupported')" />
+        </template>
         <template v-else>
-          <nuxt-link :to="mcapp ? mcmRoute : legacyAppRoute">
-            <span v-html="t('catalog.install.error.legacy.navigate', { legacyType: mcapp ? legacyDefs.mcm : legacyDefs.legacy }, true)" />
+          <nuxt-link :to="legacyAppRoute">
+            <span v-html="t('catalog.install.error.legacy.navigate')" />
           </nuxt-link>
         </template>
       </Banner>