@rancher/shell 0.1.3 → 0.1.4

package/pages/c/_cluster/settings/brand.vue

@@ -17,7 +17,6 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { setFavIcon } from '@shell/utils/favicon';
 
 const Color = require('color');
-const parse = require('url-parse');
 
 export default {
   layout: 'authenticated',
@@ -29,12 +28,10 @@ export default {
   async fetch() {
     const hash = await allHash({
       uiPLSetting:            this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),
-      uiIssuesSetting:        this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES }),
       uiLogoDarkSetting:      fetchOrCreateSetting(this.$store, SETTING.LOGO_DARK, ''),
       uiLogoLightSetting:     fetchOrCreateSetting(this.$store, SETTING.LOGO_LIGHT, ''),
       uiColorSetting:         fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
       uiLinkColorSetting:     fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
-      uiCommunitySetting:     fetchOrCreateSetting(this.$store, SETTING.COMMUNITY_LINKS, 'true'),
       uiFaviconSetting:       fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
     });
 
@@ -75,8 +72,6 @@ export default {
       vendor:      getVendor(),
       uiPLSetting: {},
 
-      uiIssuesSetting: {},
-
       uiLogoDarkSetting:  {},
       uiLogoDark:         '',
       uiLogoLightSetting: {},
@@ -94,8 +89,6 @@ export default {
       uiLinkColor:        null,
       customizeLinkColor: false,
 
-      uiCommunitySetting: {},
-
       errors: [],
 
     };
@@ -134,22 +127,7 @@ export default {
       this.errors.push(e);
     },
 
-    validateUrl(url) {
-      const parsed = parse(url, {});
-
-      if (!parsed.protocol) {
-        this.errors.push(this.t('branding.uiIssues.invalidUrl'));
-
-        return false;
-      }
-
-      return true;
-    },
-
     async save(btnCB) {
-      if (this.uiIssuesSetting.value && !this.validateUrl(this.uiIssuesSetting.value)) {
-        return btnCB(false);
-      }
       this.uiPLSetting.value = this.uiPLSetting.value.replaceAll(/[\<>&=#()"]/gm, '');
 
       if (this.customizeLogo) {
@@ -183,12 +161,10 @@ export default {
       try {
         await Promise.all([
           this.uiPLSetting.save(),
-          this.uiIssuesSetting.save(),
           this.uiLogoDarkSetting.save(),
           this.uiLogoLightSetting.save(),
           this.uiColorSetting.save(),
           this.uiLinkColorSetting.save(),
-          this.uiCommunitySetting.save(),
           this.uiFaviconSetting.save()
         ]);
         if (this.uiPLSetting.value !== this.vendor) {
@@ -219,22 +195,6 @@ export default {
           <LabeledInput v-model="uiPLSetting.value" :label="t('branding.uiPL.label')" :mode="mode" :maxlength="100" />
         </div>
       </div>
-
-      <h3 class="mt-20 mb-5 pb-5">
-        {{ t('branding.uiIssues.label') }}
-      </h3>
-      <label class="text-label">
-        {{ t(`advancedSettings.descriptions.${ 'ui-issues' }`, {}, true) }}
-      </label>
-      <div :style="{'align-items':'center'}" class="row mt-10">
-        <div class="col span-6 pb-5">
-          <LabeledInput v-model="uiIssuesSetting.value" :label="t('branding.uiIssues.issuesUrl')" :mode="mode" />
-        </div>
-        <div class="col span-6">
-          <Checkbox :value="uiCommunitySetting.value === 'true'" :label="t('branding.uiIssues.communityLinks')" :mode="mode" @input="e=>$set(uiCommunitySetting, 'value', e.toString())" />
-        </div>
-      </div>
-
       <h3 class="mt-20 mb-5 pb-5">
         {{ t('branding.logos.label') }}
       </h3>

package/pages/c/_cluster/settings/links.vue

@@ -0,0 +1,200 @@
+<script>
+import Loading from '@shell/components/Loading';
+import AsyncButton from '@shell/components/AsyncButton';
+import Banner from '@components/Banner/Banner.vue';
+import { MANAGEMENT } from '@shell/config/types';
+import { fetchOrCreateSetting, SETTING } from '@shell/config/settings';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import KeyValue from '@shell/components/form/KeyValue';
+import { allHash } from '@shell/utils/promise';
+import { mapGetters } from 'vuex';
+
+const DEFAULT_CUSTOM_LINKS = [
+  {
+    order: 1,
+    key:   'customLinks.defaults.docs',
+    value: 'https://rancher.com/docs/rancher/v2.6/en'
+  },
+  {
+    order: 2,
+    key:   'customLinks.defaults.forums',
+    value: 'https://forums.rancher.com/'
+
+  },
+  {
+    order: 3,
+    key:   'customLinks.defaults.slack',
+    value: 'https://slack.rancher.io/'
+  },
+  {
+    order: 5,
+    key:   'customLinks.defaults.getStarted',
+    value: '/docs/getting-started'
+  }
+
+];
+
+const DEFAULT_SUPPORT_LINK = {
+  order: 4,
+  key:   'customLinks.defaults.issues',
+  value: 'https://github.com/rancher/dashboard/issues/new'
+};
+
+const COMMUNITY_LINKS = [
+  {
+    order: 99,
+    key:   'customLinks.defaults.commercialSupport',
+    value: '/support'
+  }
+];
+
+export default {
+  layout:     'authenticated',
+  components: {
+    KeyValue,
+    Loading,
+    AsyncButton,
+    Banner,
+  },
+  async fetch() {
+    try {
+      const { uiIssuesSetting, uiCommunitySetting } = await allHash({
+        uiIssuesSetting:    this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES }),
+        uiCommunitySetting: this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.COMMUNITY_LINKS })
+      });
+
+      this.uiIssuesSetting = uiIssuesSetting;
+      this.uiCommunitySetting = uiCommunitySetting;
+    } catch {}
+
+    try {
+      const defaultIssueLink = !!this.uiIssuesSetting.value ? { key: this.t('customLinks.defaults.issues'), value: this.uiIssuesSetting.value } : DEFAULT_SUPPORT_LINK;
+      const defaultLinks = this.multiWithFallback([...DEFAULT_CUSTOM_LINKS, defaultIssueLink, ...COMMUNITY_LINKS]);
+
+      this.uiCustomLinks = await fetchOrCreateSetting(this.$store, SETTING.UI_CUSTOM_LINKS, JSON.stringify(defaultLinks));
+
+      await this.deprecateIssueLinks();
+    } catch {}
+
+    const sValue = this.uiCustomLinks?.value || JSON.stringify(this.multiWithFallback([...DEFAULT_CUSTOM_LINKS]));
+
+    this.value = JSON.parse(sValue);
+  },
+
+  data() {
+    return {
+      uiCustomLinks:      {},
+      defaultValues:      undefined,
+      bannerVal:          {},
+      value:              {},
+      errors:             [],
+      showRestoredBanner: false
+    };
+  },
+  computed: {
+    ...mapGetters({ multiWithFallback: 'i18n/multiWithFallback' }),
+
+    mode() {
+      const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
+
+      return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
+    },
+  },
+  methods: {
+    useDefaults() {
+      const nonCommercialRancherLinks = this.isCommercial ? [] : COMMUNITY_LINKS;
+
+      this.defaultValues = this.multiWithFallback([...DEFAULT_CUSTOM_LINKS, DEFAULT_SUPPORT_LINK, ...nonCommercialRancherLinks]);
+
+      this.showRestoredBanner = true;
+
+      setTimeout(() => {
+        this.showRestoredBanner = false;
+      }, 10000);
+    },
+
+    deprecateIssueLinks() {
+      if (this.uiIssuesSetting.value || this.uiIssuesSetting.value) {
+        this.uiIssuesSetting.value = '';
+        this.uiCommunitySetting.value = '';
+
+        return this.uiIssuesSetting.save();
+      }
+    },
+
+    async save(btnCB) {
+      this.uiCustomLinks.value = JSON.stringify(this.value);
+      this.errors = [];
+      try {
+        await this.uiCustomLinks.save();
+        btnCB(true);
+      } catch (err) {
+        this.errors.push(err);
+        btnCB(false);
+      }
+    },
+  }
+};
+</script>
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Banner v-if="showRestoredBanner" :color="'success'" label="Default restored" :closable="true" :label-key="'customLinks.restoreSuccess'" />
+    <h1
+      class="mb-20"
+    >
+      {{ t("customLinks.label") }}
+    </h1>
+    <div>
+      <label class="text-label">
+        {{ t(`customLinks.description`, {}, true) }}
+      </label>
+      <div class="ui-links-setting mt-20">
+        <KeyValue
+          v-model="value"
+          :default-value="defaultValues"
+          :as-map="false"
+          :key-label="t('customLinks.settings.keyLabel')"
+          :value-label="t('customLinks.settings.valueLabel')"
+          :add-label="t('customLinks.addLink')"
+          :mode="mode"
+          :read-allowed="false"
+          :protip="false"
+        />
+      </div>
+    </div>
+    <template v-for="err in errors">
+      <Banner :key="err" color="error" :label="err" />
+    </template>
+    <div v-if="mode === 'edit'" class="mt-20">
+      <AsyncButton class="pull-right" mode="apply" @click="save" />
+      <button class="pull-right btn role-secondary mr-10" @click="useDefaults">
+        {{ t('customLinks.restoreDefaults') }}
+      </button>
+    </div>
+  </div>
+</template>
+<style scoped lang='scss'>
+.overlay {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--overlay-bg);
+  z-index: 1;
+}
+.ui-links-setting {
+  P {
+    line-height: 1.25;
+    margin-bottom: 10px;
+  }
+
+  .underline {
+    text-decoration: underline;
+  }
+}
+.input {
+  max-width: 25%;
+}
+</style>

package/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue

@@ -0,0 +1,232 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { UI_PLUGIN } from '@shell/config/types';
+import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+
+export default {
+  components: {
+    AsyncButton,
+    Checkbox,
+    LabeledInput,
+  },
+
+  data() {
+    return {
+      name:              '',
+      location:          '',
+      persist:           false,
+      canModifyName:     true,
+      canModifyLocation: true,
+    };
+  },
+
+  watch: {
+    name(neu, old) {
+      if (this.canModifyLocation) {
+        this.location = `/pkg/${ neu }/${ neu }.umd.min.js`;
+      }
+    },
+    location(neu, old) {
+      if (this.canModifyName) {
+        const names = neu.split('/');
+        let last = names[names.length - 1];
+        let index = last.indexOf('.umd.min.js');
+
+        if (index !== -1) {
+          last = last.substr(0, index);
+        } else {
+          index = last.indexOf('.umd.js');
+          if (index !== -1) {
+            last = last.substr(0, index);
+          }
+        }
+
+        this.name = last;
+      }
+    }
+  },
+
+  methods: {
+    showDialog() {
+      this.$modal.show('developerInstallPluginDialog');
+    },
+    closeDialog(result) {
+      this.$modal.hide('developerInstallPluginDialog');
+      this.$emit('closed', result);
+    },
+
+    updateName(v) {
+      this.canModifyName = v.length === 0;
+    },
+
+    updateLocation(v) {
+      this.canModifyLocation = v.length === 0;
+    },
+
+    async loadPlugin(btnCb) {
+      let name = this.name;
+      const url = this.location;
+
+      if (!name) {
+        const parts = url.split('/');
+        const n = parts[parts.length - 1];
+
+        // Split on '.'
+        name = n.split('.')[0];
+      }
+
+      // Try and parse version number from the name
+      let version = '0.0.1';
+      let crdName = name;
+
+      const parts = name.split('-');
+
+      if (parts.length === 2) {
+        crdName = parts[0];
+        version = parts[1];
+      }
+
+      if (this.persist) {
+        const pluginCR = await this.$store.dispatch('management/create', {
+          type:     UI_PLUGIN,
+          metadata: {
+            name,
+            namespace: UI_PLUGIN_NAMESPACE
+          },
+          spec:     {
+            plugin: {
+              name:     crdName,
+              version,
+              endpoint: url,
+              noCache:  true,
+              metadata: {
+                developer: 'true',
+                direct:    'true'
+              }
+            }
+          }
+        });
+
+        try {
+          await pluginCR.save({ url: `/v1/${ UI_PLUGIN }`, method: 'POST' });
+        } catch (e) {
+          console.error('Could not create CRD for plugin', e); // eslint-disable-line no-console
+          btnCb(false);
+        }
+      }
+
+      this.$plugin.loadAsync(name, url).then(() => {
+        this.closeDialog(true);
+        this.$store.dispatch('growl/success', {
+          title:   this.t('plugins.success.title', { name }),
+          message: this.t('plugins.success.message'),
+          timeout: 3000,
+        }, { root: true });
+        btnCb(true);
+      }).catch((error) => {
+        btnCb(false);
+        // this.closeDialog(false);
+        const message = typeof error === 'object' ? this.t('plugins.error.message') : error;
+
+        this.$store.dispatch('growl/error', {
+          title:   this.t('plugins.error.title'),
+          message,
+          timeout: 5000
+        }, { root: true });
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <modal
+    name="developerInstallPluginDialog"
+    height="auto"
+    :scrollable="true"
+  >
+    <div class="plugin-install-dialog">
+      <h4>
+        {{ t('plugins.developer.title') }}
+      </h4>
+      <p>
+        {{ t('plugins.developer.prompt') }}
+      </p>
+      <div class="custom mt-10">
+        <div class="fields">
+          <LabeledInput v-model="location" v-focus label-key="plugins.developer.fields.url" @input="updateLocation" />
+        </div>
+      </div>
+      <div class="custom mt-10">
+        <div class="fields">
+          <LabeledInput v-model="name" label-key="plugins.developer.fields.name" @input="updateName" />
+        </div>
+        <div class="fields mt-10">
+          <Checkbox v-model="persist" label-key="plugins.developer.fields.persist" />
+        </div>
+        <div class="dialog-buttons mt-20">
+          <button class="btn role-secondary" @click="closeDialog()">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="load"
+            @click="loadPlugin"
+          />
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<style lang="scss" scoped>
+  .plugin-install-dialog {
+    padding: 10px;
+
+    h4 {
+      font-weight: bold;
+    }
+
+    .dialog-panel {
+      display: flex;
+      flex-direction: column;
+      min-height: 100px;
+
+      p {
+        margin-bottom: 5px;
+      }
+
+      .dialog-info {
+        flex: 1;
+      }
+
+      .toggle-advanced {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin: 10px 0;
+
+        &:hover {
+          text-decoration: none;
+          color: var(--link);
+        }
+      }
+
+      .version-selector {
+        margin: 0 10px 10px 10px;
+        width: auto;
+      }
+    }
+
+    .dialog-buttons {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+</style>