@rancher/shell 0.1.3 → 0.1.4

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,101 +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.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"
-        />
+    <!-- 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="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 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') }}
-        </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/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/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';
@@ -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() {

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;
+});

package/plugins/plugin.js

@@ -1,10 +1,11 @@
-// This plugin loads any extensions at app load time
-
-import { allHash } from '@shell/utils/promise';
+// This plugin loads any UI Plugins at app load time
+import { allHashSettled } from '@shell/utils/promise';
+import { shouldLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 
 const META_NAME_PREFIX = 'app-autoload-';
 
 export default async(context) => {
+  // UI Plugins declared in the HTML head
   const meta = context.app?.head?.meta || [];
   const hash = {};
 
@@ -18,5 +19,56 @@ export default async(context) => {
     }
   });
 
-  await allHash(hash);
+  // Provide a mechanism to load the UI without the plugins loaded - in case there is a problem
+  let loadPlugins = true;
+
+  if (context.route?.path.endsWith('/safeMode')) {
+    loadPlugins = false;
+    console.warn('Safe Mode - plugins will not be loaded'); // eslint-disable-line no-console
+  }
+
+  if (loadPlugins) {
+    const { store, $plugin } = context;
+
+    // Fetch list of installed plugins from endpoint
+    try {
+      const res = await store.dispatch('management/request', {
+        url:     `${ UI_PLUGIN_BASE_URL }/index.json`,
+        headers: { accept: 'application/json' }
+      });
+
+      if (res) {
+        const entries = res.entries || res.Entries || {};
+
+        Object.values(entries).forEach((plugin) => {
+          if (shouldLoadPlugin(plugin)) {
+            let url;
+
+            if (plugin?.metadata?.['direct'] === 'true') {
+              url = plugin.endpoint;
+            }
+
+            hash[plugin.name] = $plugin.loadAsyncByNameAndVersion(plugin.name, plugin.version, url);
+          }
+        });
+      }
+    } catch (e) {
+      console.error('Could not load UI Plugin list', e); // eslint-disable-line no-console
+    }
+
+    // Load all of the plugins
+    const pluginLoads = await allHashSettled(hash);
+
+    // Some pluigns may have failed to load - store this
+    Object.keys(pluginLoads).forEach((name) => {
+      const res = pluginLoads[name];
+
+      if (res?.status === 'rejected') {
+        console.error(`Failed to load plugin: ${ name }`); // eslint-disable-line no-console
+
+        // Record error in the uiplugins store, so that we can show this to the user
+        context.store.dispatch('uiplugins/setError', { name, error: true });
+      }
+    });
+  }
 };

package/plugins/steve/mutations.js

@@ -64,7 +64,7 @@ export default {
 
       if (worker) {
         // Store raw json objects, not the proxies
-        worker.loadSchema(data);
+        worker.postMessage({ loadSchemas: data });
       }
     }
   },