@rancher/shell 0.1.2 → 0.1.4

package/pages/index.vue

@@ -2,21 +2,35 @@
 import { SEEN_WHATS_NEW } from '@shell/store/prefs';
 import { getVersionInfo } from '@shell/utils/version';
 
+const validRoute = (route, router) => {
+  return !!route && !!router.resolve(route)?.resolved?.matched?.length;
+};
+
 export default {
-  middleware({ redirect, store } ) {
+  middleware({ redirect, store, app } ) {
     const seenWhatsNew = store.getters['prefs/get'](SEEN_WHATS_NEW);
     const versionInfo = getVersionInfo(store);
     const isSingleProduct = store.getters['isSingleProduct'];
+    const dashboardHome = { name: 'home' };
 
     // If this is a new version, then take the user to the home page to view the release notes
     if (versionInfo.fullVersion !== seenWhatsNew && !isSingleProduct) {
-      return redirect({ name: 'home' });
+      return redirect(dashboardHome);
     }
 
-    // Take the user to the configured login route
     const afterLoginRouteObject = store.getters['prefs/afterLoginRoute'];
 
-    return redirect(afterLoginRouteObject);
+    // Confirm this is a valid route (it could have come from an uninstalled plugin)
+    if (validRoute(afterLoginRouteObject, app.router)) {
+      // Take the user to the configured login route
+      return redirect(afterLoginRouteObject);
+    }
+
+    if (validRoute(isSingleProduct?.afterLoginRoute, app.router)) {
+      return redirect(isSingleProduct.afterLoginRoute);
+    }
+
+    return redirect(dashboardHome);
   }
 };
 </script>

package/pages/prefs.vue

@@ -1,32 +1,41 @@
 <script>
 import day from 'dayjs';
 import { mapGetters } from 'vuex';
+import { isAdminUser } from '@shell/store/type-map';
 import BackLink from '@shell/components/BackLink';
 import BackRoute from '@shell/mixins/back-link';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import { Checkbox } from '@components/Form/Checkbox';
 import LandingPagePreference from '@shell/components/LandingPagePreference';
 import {
-  mapPref, THEME, KEYMAP, DEV, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE, HIDE_DESC, SHOW_PRE_RELEASE, MENU_MAX_CLUSTERS
+  mapPref, THEME, KEYMAP, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE, HIDE_DESC, SHOW_PRE_RELEASE, MENU_MAX_CLUSTERS,
+  VIEW_IN_API, ALL_NAMESPACES, THEME_SHORTCUT, PLUGIN_DEVELOPER
 } from '@shell/store/prefs';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { addObject } from '@shell/utils/array';
+import LocaleSelector from '@shell/components/LocaleSelector';
 
 export default {
   layout:     'plain',
   components: {
-    BackLink, ButtonGroup, LabeledSelect, Checkbox, LandingPagePreference
+    BackLink, ButtonGroup, LabeledSelect, Checkbox, LandingPagePreference, LocaleSelector
   },
-  mixins:     [BackRoute],
-  computed:   {
-    keymap:          mapPref(KEYMAP),
-    dev:             mapPref(DEV),
-    dateFormat:      mapPref(DATE_FORMAT),
-    timeFormat:      mapPref(TIME_FORMAT),
-    perPage:         mapPref(ROWS_PER_PAGE),
-    hideDesc:        mapPref(HIDE_DESC),
-    showPreRelease:  mapPref(SHOW_PRE_RELEASE),
-    menuMaxClusters: mapPref(MENU_MAX_CLUSTERS),
+  mixins: [BackRoute],
+  data() {
+    return { admin: isAdminUser(this.$store.getters) };
+  },
+  computed: {
+    keymap:           mapPref(KEYMAP),
+    viewInApi:        mapPref(VIEW_IN_API),
+    allNamespaces:    mapPref(ALL_NAMESPACES),
+    themeShortcut:    mapPref(THEME_SHORTCUT),
+    dateFormat:       mapPref(DATE_FORMAT),
+    timeFormat:       mapPref(TIME_FORMAT),
+    perPage:          mapPref(ROWS_PER_PAGE),
+    hideDesc:         mapPref(HIDE_DESC),
+    showPreRelease:   mapPref(SHOW_PRE_RELEASE),
+    menuMaxClusters:  mapPref(MENU_MAX_CLUSTERS),
+    pluginDeveloper:  mapPref(PLUGIN_DEVELOPER),
 
     ...mapGetters(['isSingleProduct']),
 
@@ -137,99 +146,112 @@ export default {
         this.hideDesc = val;
       }
     },
-  },
+  }
 };
 </script>
 
 <template>
   <div>
     <BackLink :link="backLink" />
-    <h1 v-t="'prefs.title'" />
-
-    <h4 v-t="'prefs.theme.label'" />
-    <div>
-      <ButtonGroup v-model="theme" :options="themeOptions" />
+    <h1 v-t="'prefs.title'" class="mb-20" />
+    <!-- Language -->
+    <div class="mt-10 mb-10">
+      <h4 v-t="'prefs.language'" />
+      <div class="row">
+        <div class="col span-4">
+          <LocaleSelector />
+        </div>
+      </div>
     </div>
-    <div class="mt-10">
-      <t k="prefs.theme.autoDetail" :pm="pm" :am="am" />
+    <!-- Theme -->
+    <div class="mt-10 mb-10">
+      <hr />
+      <h4 v-t="'prefs.theme.label'" />
+      <ButtonGroup v-model="theme" :options="themeOptions" />
+      <div class="mt-10">
+        <t k="prefs.theme.autoDetail" :pm="pm" :am="am" />
+      </div>
     </div>
-    <div v-if="!isSingleProduct">
+    <!-- Login landing page -->
+    <div v-if="!isSingleProduct" class="mt-10 mb-10">
       <hr />
       <h4 v-t="'prefs.landing.label'" />
       <LandingPagePreference />
     </div>
-    <hr />
-    <h4 v-t="'prefs.formatting'" />
-    <div class="row">
-      <div class="col span-4">
-        <LabeledSelect
-          v-model="dateFormat"
-          :label="t('prefs.dateFormat.label')"
-          :options="dateOptions"
-        />
-      </div>
-      <div class="col span-4">
-        <LabeledSelect
-          v-model="timeFormat"
-          :label="t('prefs.timeFormat.label')"
-          :options="timeOptions"
-        />
-      </div>
-
-      <div class="col span-4">
-        <LabeledSelect
-          v-model.number="perPage"
-          :label="t('prefs.perPage.label')"
-          :options="perPageOptions"
-          option-key="value"
-          option-label="label"
-          placeholder="Select a row count"
-        />
+    <!-- Display Settings -->
+    <div class="mt-10 mb-10">
+      <hr />
+      <h4 v-t="'prefs.displaySettings.title'" />
+      <p class="set-landing-leadin">
+        {{ t('prefs.displaySettings.detail', {}, raw=true) }}
+      </p>
+      <div class="row mt-20">
+        <div class="col span-4">
+          <LabeledSelect
+            v-model="dateFormat"
+            :label="t('prefs.dateFormat.label')"
+            :options="dateOptions"
+          />
+        </div>
+        <div class="col span-4">
+          <LabeledSelect
+            v-model="timeFormat"
+            :label="t('prefs.timeFormat.label')"
+            :options="timeOptions"
+          />
+        </div>
       </div>
-    </div>
 
-    <div class="row mt-20">
-      <div class="col span-4">
-        <LabeledSelect
-          v-model.number="menuMaxClusters"
-          :label="t('prefs.clusterToShow.label')"
-          :options="menuClusterOptions"
-          option-key="value"
-          option-label="label"
-          placeholder="Select a row count"
-        />
+      <div class="row mt-20">
+        <div class="col span-4">
+          <LabeledSelect
+            v-model.number="perPage"
+            :label="t('prefs.perPage.label')"
+            :options="perPageOptions"
+            option-key="value"
+            option-label="label"
+            placeholder="Select a row count"
+          />
+        </div>
+        <div class="col span-4">
+          <LabeledSelect
+            v-model.number="menuMaxClusters"
+            :label="t('prefs.clusterToShow.label')"
+            :options="menuClusterOptions"
+            option-key="value"
+            option-label="label"
+            placeholder="Select a row count"
+          />
+        </div>
       </div>
     </div>
-
-    <hr />
-    <div class="row">
-      <div class="col prefs-advanced">
-        <h4 v-t="'prefs.advanced'" />
-        <Checkbox v-model="dev" :label="t('prefs.dev.label', {}, true)" />
-        <p class="wrap-text">
-          {{ t('prefs.advancedTooltip', {}, raw=true) }}
-        </p>
-        <br>
-        <Checkbox v-if="!isSingleProduct" v-model="hideDescriptions" :label="t('prefs.hideDesc.label')" class="mt-10" />
-      </div>
+    <!-- Advanced Features -->
+    <div class="col adv-features mt-10 mb-10">
+      <hr />
+      <h4 v-t="'prefs.advFeatures.title'" />
+      <Checkbox v-model="viewInApi" :label="t('prefs.advFeatures.viewInApi', {}, true)" class="mt-10" />
+      <br />
+      <Checkbox v-model="allNamespaces" :label="t('prefs.advFeatures.allNamespaces', {}, true)" class="mt-20" />
+      <br />
+      <Checkbox v-model="themeShortcut" :label="t('prefs.advFeatures.themeShortcut', {}, true)" class="mt-20" />
+      <br />
+      <Checkbox v-if="!isSingleProduct" v-model="hideDescriptions" :label="t('prefs.hideDesc.label')" class="mt-20" />
+      <template v-if="admin">
+        <br />
+        <Checkbox v-model="pluginDeveloper" :label="t('prefs.advFeatures.pluginDeveloper', {}, true)" class="mt-20" />
+      </template>
     </div>
-
-    <hr />
-    <div class="row">
-      <div class="col span-12">
-        <h4 v-t="'prefs.keymap.label'" />
-        <ButtonGroup v-model="keymap" :options="keymapOptions" />
-      </div>
+    <!-- YAML editor key mapping -->
+    <div class="col mt-10 mb-10">
+      <hr />
+      <h4 v-t="'prefs.keymap.label'" />
+      <ButtonGroup v-model="keymap" :options="keymapOptions" />
     </div>
-
-    <div v-if="!isSingleProduct">
+    <!-- Helm Charts -->
+    <div v-if="!isSingleProduct" class="col mt-10 mb-40">
       <hr />
-      <div class="row mb-20">
-        <div class="col span-12">
-          <h4 v-t="'prefs.helm.label'" />
-          <ButtonGroup v-model="showPreRelease" :options="helmOptions" />
-        </div>
-      </div>
+      <h4 v-t="'prefs.helm.label'" />
+      <ButtonGroup v-model="showPreRelease" :options="helmOptions" />
     </div>
   </div>
 </template>

package/pages/safeMode.vue

@@ -0,0 +1,17 @@
+<script>
+export default {
+  middleware({ redirect, store } ) {
+    const dashboardHome = { name: 'home' };
+    const t = store.getters['i18n/t'];
+
+    setTimeout(() => {
+      store.dispatch('growl/success', {
+        title:   t('plugins.safeMode.title'),
+        message: t('plugins.safeMode.message')
+      }, { root: true });
+    }, 1000);
+
+    return redirect(dashboardHome);
+  }
+};
+</script>

package/pages/support/index.vue

@@ -52,7 +52,6 @@ export default {
     }
     this.supportSetting = await fetchOrCreateSetting('has-support', 'false');
     this.brandSetting = await fetchOrCreateSetting(SETTING.BRAND, '');
-    this.communitySetting = await fetchOrCreateSetting(SETTING.COMMUNITY_LINKS, 'true');
     this.serverUrlSetting = await fetchOrCreateSetting(SETTING.SERVER_URL, '');
     this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
   },
@@ -65,7 +64,6 @@ export default {
       supportSetting:       null,
       brandSetting:         null,
       uiIssuesSetting:      null,
-      communitySetting:     null,
       serverSetting:        null,
       promos:               [
         'support.promos.one',
@@ -104,11 +102,17 @@ export default {
     },
 
     hasSupport() {
-      return (this.supportSetting?.value && this.supportSetting?.value !== 'false') || this.hasAWSSupport;
+      // NB: This is temporary until API implemented
+      return false;
     },
 
     options() {
-      return options( this.uiIssuesSetting?.value, this.communitySetting?.value === 'false');
+      if (!this.uiIssuesSetting?.value) {
+        return;
+      }
+
+      // Load defaults for suppoet page
+      return options(true, this.uiIssuesSetting?.value);
     },
 
     title() {
@@ -194,11 +198,7 @@ export default {
               <div>{{ t(`${key}.text`) }}</div>
             </div>
           </div>
-          <div v-if="!hasSupport" class="external">
-            <a href="https://rancher.com/support-maintenance-terms" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.learnMore') }} <i class="icon icon-external-link" /></a>
-            or
-            <a href="https://rancher.com/pricing" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.pricing') }} <i class="icon icon-external-link" /></a>
-          </div>
+
           <div v-if="!hasSupport" class="register row">
             <div>
               {{ t('support.subscription.haveSupport') }}
@@ -214,7 +214,16 @@ export default {
           </div>
         </div>
         <div class="community">
-          <CommunityLinks />
+          <CommunityLinks :link-options="options">
+            <div v-if="!hasSupport" class="external support-links" :class="{ 'mt-15': !!options}">
+              <div class="support-link">
+                <a class="support-link" href="https://rancher.com/support-maintenance-terms" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.learnMore') }}</a>
+              </div>
+              <div class="support-link">
+                <a class="support-link" href="https://rancher.com/pricing" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.pricing') }}</a>
+              </div>
+            </div>
+          </CommunityLinks>
         </div>
       </div>
     </IndentedPanel>
@@ -279,13 +288,12 @@ export default {
     font-weight: 300;
     margin-bottom: 20px;
   }
-  .support-link {
-    margin: 10px 0;
-  }
 }
-.external {
-  margin-top: 20px;
+
+.support-link:not(:first-child) {
+  margin: 15px 0 0 0;
 }
+
 .register {
   display: flex;
   align-items: center;

package/pkg/auto-import.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'formatters'];
+const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters'];
 const contextMap = contextFolders.reduce((map, obj) => {
   map[obj] = true;
 
@@ -11,6 +11,19 @@ function replaceAll(str, find, replace) {
   return str.split(find).join(replace);
 }
 
+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`;
+}
+
+function register(file, pkg, f) {
+  const name = file.replace(/\.[^/.]+$/, '');
+
+  return registerFile(file, name, pkg, f);
+}
+
 // This function is used to generate the code to register models, edit, detail, list etc for a type
 // This is used when building as a library - it does not use require.context - it scans the file system and build time.
 // This ensures that the webpackChunkName is respected (require.context does not support this) - so when build as a library
@@ -20,13 +33,34 @@ function generateTypeImport(pkg, dir) {
 
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
-    if (fs.existsSync(path.join(dir, f))) {
+    const filePath = path.join(dir, f);
+
+    if (fs.existsSync(filePath)) {
       fs.readdirSync(path.join(dir, f)).forEach((file) => {
-        const name = file.replace(/\.[^/.]+$/, '');
-        const importType = (f === 'models') ? 'require' : 'import';
-        const chunkName = (f === 'l10n') ? '' : `/* webpackChunkName: "${ f }" */`;
+        const fileStat = fs.lstatSync(path.join(filePath, file));
+
+        // Directories are special cases
+        if (fileStat.isDirectory()) {
+          // This might be a <type>/index.vue (aka nested component)
+          const indexFilePath = path.join(file, 'index.vue');
+          const fullIndexFilePath = path.join(filePath, indexFilePath);
 
-        content += `  $plugin.register('${ f }', '${ name }', () => ${ importType }(${ chunkName }'${ pkg }/${ f }/${ file }'));\n`;
+          if (fs.existsSync(fullIndexFilePath)) {
+            content += registerFile(indexFilePath, file, pkg, f);
+
+            return;
+          }
+
+          // This might be a <store name>/<model name|type>.js file (aka nested model)
+          if (f === 'models') {
+            fs.readdirSync(path.join(filePath, file)).forEach((store) => {
+              content += register(path.join(file, store), pkg, f);
+            });
+          }
+        } else {
+          // This is a simple <resource type>.<file type> file
+          content += register(file, pkg, f);
+        }
       });
     }
   });
@@ -48,7 +82,10 @@ function generateDynamicTypeImport(pkg, dir) {
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
     if (fs.existsSync(path.join(dir, f))) {
-      let genImport = replaceAll(template, 'NAME', f);
+      const safeName = f.replace(/\/|-/g, '_');
+      let genImport = replaceAll(template, 'NAME', safeName);
+
+      genImport = replaceAll(genImport, 'DIR', f );
       const importType = (f === 'models') ? 'require' : 'import';
       // Ensure i18n chunks are named with the request name (which will be the locale)
       const chunk = (f === 'l10n') ? '[request]' : f;

package/pkg/dynamic-importer.lib.js

@@ -53,6 +53,10 @@ export function resolveList(key) {
   return undefined;
 }
 
+export function resolveChart(key) {
+  return undefined;
+}
+
 export function resolveEdit(key) {
   return undefined;
 }

package/pkg/dynamic-plugin-loader.js

@@ -0,0 +1,28 @@
+
+/**
+ * Some plugins won't be bundled with the dashboard build but loaded on demand at run time.
+ * This file allows 'manager' style plugins to defined how to determine if a unknown route
+ * belongs to one of their associated plugins and how that plugin can be loaded
+ */
+class DynamicPluginLoader {
+  dynamicPluginLoaders = [];
+
+  register(reg) {
+    this.dynamicPluginLoaders.push(reg);
+  }
+
+  async check({ route, store }) {
+    for (const dpl of this.dynamicPluginLoaders) {
+      // Check that the route is valid and then load the plugin associated with it
+      const res = await dpl.load({ route, store });
+
+      if (res) {
+        return res;
+      }
+    }
+  }
+}
+
+const dynamicPluginLoader = new DynamicPluginLoader();
+
+export default dynamicPluginLoader;

package/pkg/import.js

@@ -1,4 +1,4 @@
-const _NAME = require.context('BASE/NAME', true, /\.(vue|js|yaml)$/).keys();
+const _NAME = require.context('BASE/DIR', true, /\.(vue|js|yaml)$/).keys();
 
 _NAME.forEach((f) => {
   let name = f.substr(2);
@@ -6,5 +6,5 @@ _NAME.forEach((f) => {
 
   name = name.substr(0, ext);
 
-  $plugin.register('NAME', name, () => REQUIRE(CHUNK`BASE/NAME/${ name }EXT`)); // eslint-disable-line no-undef
+  $plugin.register('DIR', name, () => REQUIRE(CHUNK`BASE/DIR/${ name }EXT`)); // eslint-disable-line no-undef
 });

package/pkg/model-loader-require.lib.js

@@ -0,0 +1,3 @@
+export default function modelLoaderRequire(type) {
+  return null;
+}

package/pkg/vue.config.js

@@ -46,20 +46,23 @@ module.exports = function(dir) {
       config.resolve.alias['~pkg'] = dir;
       delete config.resolve.alias['@'];
 
-      // Prevent the dynamic importer and the model-loader from importing anything dynamically - we don't want all of the
+      // Prevent the dynamic importer and the model-loader-require from importing anything dynamically - we don't want all of the
       // models etc when we build as a library
-      const dynamicImporterOveride = new webpack.NormalModuleReplacementPlugin(/dynamic-importer$/, (resource) => {
+      const dynamicImporterOverride = new webpack.NormalModuleReplacementPlugin(/dynamic-importer$/, (resource) => {
         resource.request = path.join(__dirname, 'dynamic-importer.lib.js');
       });
-      const modelLoaderImporterOveride = new webpack.NormalModuleReplacementPlugin(/model-loader$/, (resource) => {
-        resource.request = path.join(__dirname, 'model-loader.lib.js');
+      const modelLoaderImporterOverride = new webpack.NormalModuleReplacementPlugin(/model-loader-require$/, (resource) => {
+        const fileName = 'model-loader-require.lib.js';
+        const pkgModelLoaderRequire = path.join(dir, fileName);
+
+        resource.request = fs.existsSync(pkgModelLoaderRequire) ? pkgModelLoaderRequire : path.join(__dirname, fileName);
       });
 
       // Auto-generate module to import the types (model, detail, edit etc)
       const autoImportPlugin = new VirtualModulesPlugin({ 'node_modules/@rancher/auto-import': generateTypeImport('@pkg', dir) });
 
-      config.plugins.unshift(dynamicImporterOveride);
-      config.plugins.unshift(modelLoaderImporterOveride);
+      config.plugins.unshift(dynamicImporterOverride);
+      config.plugins.unshift(modelLoaderImporterOverride);
       config.plugins.unshift(autoImportPlugin);
       // config.plugins.unshift(debug);
 

package/plugins/dashboard-store/model-loader-require.js

@@ -0,0 +1,12 @@
+/**
+ * Fetch a model from the dashboard's local model's folder
+ *
+ * Splitting this out into a separate function means packages can
+ * override this to ensure dashboard models aren't bundled with it
+ *
+ * @param {string} type
+ * @returns Model for the given type
+ */
+export default function modelLoaderRequire(type) {
+  return require(`@shell/models/${ type }`);
+}

package/plugins/dashboard-store/model-loader.js

@@ -1,4 +1,5 @@
 import { normalizeType } from './normalize';
+import modelLoaderRequire from './model-loader-require';
 
 const cache = {};
 
@@ -16,7 +17,9 @@ function find(cache, type, rootState) {
     let base;
 
     if (!pluginModel) {
-      base = require(`@shell/models/${ type }`);
+      // Model hasn't come from a plugin, fall back on something reasonable
+      // by default this is the dashboard's local models folder
+      base = modelLoaderRequire(type);
     } else if (typeof pluginModel === 'function') {
       // pluginModel could be an object in the case the plugin is built-in
       base = pluginModel();

package/plugins/dashboard-store/resource-class.js

@@ -9,7 +9,7 @@ import {
   AS,
   MODE
 } from '@shell/config/query-params';
-import { DEV } from '@shell/store/prefs';
+import { VIEW_IN_API } from '@shell/store/prefs';
 import { addObject, addObjects, findBy, removeAt } from '@shell/utils/array';
 import CustomValidators from '@shell/utils/custom-validators';
 import { downloadFile, generateZip } from '@shell/utils/download';
@@ -24,7 +24,7 @@ import {
   validateDnsLikeTypes,
   validateLength,
 } from '@shell/utils/validators';
-import formRulesGenerator from '@shell/utils/validators/formRules';
+import formRulesGenerator from '@shell/utils/validators/formRules/index';
 import jsyaml from 'js-yaml';
 import compact from 'lodash/compact';
 import forIn from 'lodash/forIn';
@@ -966,7 +966,7 @@ export default class Resource {
   }
 
   get canViewInApi() {
-    return this.hasLink('self') && this.$rootGetters['prefs/get'](DEV);
+    return this.hasLink('self') && this.$rootGetters['prefs/get'](VIEW_IN_API);
   }
 
   get canYaml() {
@@ -1587,8 +1587,15 @@ export default class Resource {
           if (!isEmpty(validatorName) && validatorExists) {
             CustomValidators[validatorName](pathValue, this.$rootGetters, errors, validatorArgs, displayKey, data);
           } else if (!isEmpty(validatorName) && !validatorExists) {
-            // eslint-disable-next-line
-            console.warn(this.t('validation.custom.missing', { validatorName }));
+            // Check if validator is imported from plugin
+            const pluginValidator = this.$rootState.$plugin?.getValidator(validatorName);
+
+            if (pluginValidator) {
+              pluginValidator(pathValue, this.$rootGetters, errors, validatorArgs, displayKey, data);
+            } else {
+              // eslint-disable-next-line
+              console.warn(this.t('validation.custom.missing', { validatorName }));
+            }
           }
         });
       });

package/plugins/formatters.js

@@ -0,0 +1,15 @@
+// This registers all of the built-in formatters into the SortableTable cache
+
+// We do it here to keep it away from plugins
+// It was in SortableTable itself, but this causes plugins to pull in all formatters and their dependencies
+
+import { FORMATTERS } from '@shell/components/SortableTable';
+
+const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
+
+components.keys().forEach((fileName) => {
+  const componentConfig = components(fileName);
+  const componentName = fileName.split('/').pop().split('.')[0];
+
+  FORMATTERS[componentName] = componentConfig.default || componentConfig;
+});