@rancher/shell 0.3.16 → 0.3.18

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

@@ -4,7 +4,9 @@ import { mapGetters } from 'vuex';
 import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
 import { allHash } from '@shell/utils/promise';
-import { CATALOG, UI_PLUGIN, SERVICE } from '@shell/config/types';
+import { CATALOG, UI_PLUGIN, SERVICE, MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { fetchOrCreateSetting } from '@shell/utils/settings';
 import { getVersionData } from '@shell/config/version';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { NAME as APP_PRODUCT } from '@shell/config/product/apps';
@@ -21,7 +23,9 @@ import DeveloperInstallDialog from './DeveloperInstallDialog.vue';
 import PluginInfoPanel from './PluginInfoPanel.vue';
 import SetupUIPlugins from './SetupUIPlugins';
 import RemoveUIPlugins from './RemoveUIPlugins';
+import AddExtensionRepos from './AddExtensionRepos';
 import CatalogList from './CatalogList/index.vue';
+import Banner from '@components/Banner/Banner.vue';
 import {
   isUIPlugin,
   uiPluginAnnotation,
@@ -31,11 +35,20 @@ import {
   isChartVersionHigher,
   UI_PLUGIN_NAMESPACE,
   UI_PLUGIN_CHART_ANNOTATIONS,
-  UI_PLUGIN_LABELS
+  UI_PLUGIN_LABELS,
+  UI_PLUGINS_REPO_URL,
+  UI_PLUGINS_PARTNERS_REPO_URL
 } from '@shell/config/uiplugins';
 
 const MAX_DESCRIPTION_LENGTH = 200;
 
+const TABS_VALUES = {
+  INSTALLED: 'installed',
+  UPDATES:   'updates',
+  AVAILABLE: 'available',
+  ALL:       'all'
+};
+
 export default {
   components: {
     ActionMenu,
@@ -43,6 +56,7 @@ export default {
     DeveloperInstallDialog,
     IconMessage,
     CatalogList,
+    Banner,
     CatalogLoadDialog,
     InstallDialog,
     LazyImage,
@@ -52,25 +66,29 @@ export default {
     UninstallDialog,
     SetupUIPlugins,
     RemoveUIPlugins,
+    AddExtensionRepos,
   },
 
   data() {
     return {
-      view:              '',
-      charts:            [],
-      installing:        {},
-      errors:            {},
-      plugins:           [], // The installed plugins
-      helmOps:           [], // Helm operations
-      loading:           true,
-      menuTargetElement: null,
-      menuTargetEvent:   null,
-      menuOpen:          false,
-      hasService:        false,
-      defaultIcon:       require('~shell/assets/images/generic-plugin.svg'),
-      reloadRequired:    false,
-      rancherVersion:    getVersionData()?.Version,
-      showCatalogList:   false
+      TABS_VALUES,
+      kubeVersion:                    null,
+      view:                           '',
+      charts:                         [],
+      installing:                     {},
+      errors:                         {},
+      plugins:                        [], // The installed plugins
+      helmOps:                        [], // Helm operations
+      addExtensionReposBannerSetting: undefined,
+      loading:                        true,
+      menuTargetElement:              null,
+      menuTargetEvent:                null,
+      menuOpen:                       false,
+      hasService:                     false,
+      defaultIcon:                    require('~shell/assets/images/generic-plugin.svg'),
+      reloadRequired:                 false,
+      rancherVersion:                 getVersionData()?.Version,
+      showCatalogList:                false
     };
   },
 
@@ -79,7 +97,7 @@ export default {
   async fetch() {
     const hash = {};
 
-    const isSetup = await this.updateInstallStatus();
+    const isSetup = await this.updateInstallStatus(true);
 
     if (isSetup) {
       if (this.$store.getters['management/schemaFor'](UI_PLUGIN)) {
@@ -89,6 +107,10 @@ export default {
 
     hash.load = await this.$store.dispatch('catalog/load', { reset: true });
 
+    if (this.$store.getters['management/schemaFor'](MANAGEMENT.CLUSTER)) {
+      hash.localCluster = await this.$store.dispatch('management/find', { type: MANAGEMENT.CLUSTER, id: 'local' });
+    }
+
     if (this.$store.getters['management/schemaFor'](CATALOG.OPERATION)) {
       hash.helmOps = await this.$store.dispatch('management/findAll', { type: CATALOG.OPERATION });
     }
@@ -100,7 +122,11 @@ export default {
     const res = await allHash(hash);
 
     this.plugins = res.plugins || [];
+    this.repos = res.repos || [];
     this.helmOps = res.helmOps || [];
+    this.kubeVersion = res.localCluster?.kubernetesVersionBase || [];
+
+    this.addExtensionReposBannerSetting = await fetchOrCreateSetting(this.$store, SETTING.ADD_EXTENSION_REPOS_BANNER_DISPLAY, 'true', true) || {};
 
     const c = this.$store.getters['catalog/rawCharts'];
 
@@ -108,7 +134,7 @@ export default {
 
     // If there are no plugins installed, default to the catalog view
     if (this.plugins.length === 0) {
-      this.$refs.tabs?.select('available');
+      this.$refs.tabs?.select(TABS_VALUES.AVAILABLE);
     }
 
     this.loading = false;
@@ -121,6 +147,10 @@ export default {
     ...mapGetters({ uiErrors: 'uiplugins/errors' }),
     ...mapGetters({ theme: 'prefs/theme' }),
 
+    showAddReposBanner() {
+      return this.addExtensionReposBannerSetting?.value === 'true' && (!this.repos.find((r) => r.urlDisplay === UI_PLUGINS_REPO_URL) || !this.repos.find((r) => r.urlDisplay === UI_PLUGINS_PARTNERS_REPO_URL));
+    },
+
     applyDarkModeBg() {
       if (this.theme === 'dark') {
         return { 'dark-mode': true };
@@ -139,6 +169,13 @@ export default {
         enabled: true
       });
 
+      // Add link to add extensions repositories (Official, Partners, etc)
+      menuActions.push({
+        action:  'addRancherRepos',
+        label:   this.t('plugins.addRancherRepos'),
+        enabled: true
+      });
+
       // Only show Manage Extension Catalogs when on main charts view
       if (!this.showCatalogList) {
         menuActions.push({
@@ -174,11 +211,11 @@ export default {
       const all = this.available;
 
       switch (this.view) {
-      case 'installed':
+      case TABS_VALUES.INSTALLED:
         return all.filter((p) => !!p.installed || !!p.installing);
-      case 'updates':
+      case TABS_VALUES.UPDATES:
         return this.updates;
-      case 'available':
+      case TABS_VALUES.AVAILABLE:
         return all.filter((p) => !p.installed);
       default:
         return all;
@@ -223,24 +260,32 @@ export default {
         item.chart = chart;
 
         // Filter the versions available to install (plugins-api version and current dashboard version)
-        item.installableVersions = item.versions.filter((version) => isSupportedChartVersion(version) && isChartVersionAvailableForInstall(version, this.rancherVersion));
+        item.installableVersions = item.versions.filter((version) => isSupportedChartVersion({ version, kubeVersion: this.kubeVersion }) && isChartVersionAvailableForInstall({
+          version, rancherVersion: this.rancherVersion, kubeVersion: this.kubeVersion
+        }));
 
         // add prop to version object if version is compatible with the current dashboard version
-        item.versions = item.versions.map((version) => isChartVersionAvailableForInstall(version, this.rancherVersion, true));
+        item.versions = item.versions.map((version) => isChartVersionAvailableForInstall({
+          version, rancherVersion: this.rancherVersion, kubeVersion: this.kubeVersion
+        }, true));
 
         const latestCompatible = item.installableVersions?.[0];
-        const latestNotCompatible = item.versions.find((version) => !version.isCompatibleWithUi);
+        const latestNotCompatible = item.versions.find((version) => !version.isCompatibleWithUi || !version.isCompatibleWithKubeVersion);
 
         if (latestCompatible) {
           item.displayVersion = latestCompatible.version;
           item.icon = latestCompatible.icon;
         } else {
           item.displayVersion = item.versions?.[0]?.version;
-          item.icon = chart.icon || latestCompatible.annotations['catalog.cattle.io/ui-icon'];
+          item.icon = chart.icon || latestCompatible?.annotations?.['catalog.cattle.io/ui-icon'];
         }
 
         if (latestNotCompatible && item.installableVersions.length && isChartVersionHigher(latestNotCompatible.version, item.installableVersions?.[0].version)) {
-          item.incompatibleDisclaimer = this.t('plugins.incompatibleDisclaimer', { version: latestNotCompatible.version, rancherVersion: latestNotCompatible.requiredUiVersion }, true);
+          if (!item.isCompatibleWithUi) {
+            item.incompatibleRancherVersion = this.t('plugins.incompatibleRancherVersion', { version: latestNotCompatible.version, rancherVersion: latestNotCompatible.requiredUiVersion }, true);
+          } else if (!item.isCompatibleWithKubeVersion) {
+            item.incompatibleKubeVersion = this.t('plugins.incompatibleKubeVersion', { version: latestNotCompatible.version, kubeVersion: latestNotCompatible.requiredKubeVersion }, true);
+          }
         }
 
         if (this.installing[item.name]) {
@@ -341,11 +386,25 @@ export default {
         }
       });
 
-      // Clamp the lengths of the descriptions
       all.forEach((plugin) => {
+        // Clamp the lengths of the descriptions
         if (plugin.description && plugin.description.length > MAX_DESCRIPTION_LENGTH) {
           plugin.description = `${ plugin.description.substr(0, MAX_DESCRIPTION_LENGTH) } ...`;
         }
+
+        // check if kube version compatibility is met for installed extension
+        if (plugin.uiplugin) {
+          const versionInstalled = plugin.uiplugin.spec?.plugin?.version;
+          const versionInstalledData = plugin.versions.find((v) => v.version === versionInstalled);
+
+          if (versionInstalledData) {
+            const kubeVersionToCheck = versionInstalledData.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.KUBE_VERSION];
+
+            if (this.kubeVersion && !isSupportedChartVersion({ version: versionInstalledData, kubeVersion: this.kubeVersion })) {
+              plugin.installedError = this.t('plugins.currentInstalledVersionBlockedByKubeVersion', { kubeVersion: this.kubeVersion, kubeVersionToCheck }, true);
+            }
+          }
+        }
       });
 
       // Sort by name
@@ -412,7 +471,7 @@ export default {
             changes++;
           }
           if (isCustomImage) {
-            this.refreshCharts();
+            this.refreshCharts(true);
           }
 
           this.updatePluginInstallStatus(plugin.name, false);
@@ -434,14 +493,16 @@ export default {
   },
 
   methods: {
-    async refreshCharts() {
-      await this.$store.dispatch('catalog/load', { reset: true });
+    async refreshCharts(forceChartsUpdate = false) {
+      // we might need to force the request, so that we know at all times if what's the status of the offical and partners repos (installed or not)
+      // tied to the SetupUIPlugins, AddExtensionRepos and RemoveUIPlugins checkboxes
+      await this.$store.dispatch('catalog/load', { reset: true, force: forceChartsUpdate });
       const c = this.$store.getters['catalog/rawCharts'];
 
       this.charts = Object.values(c);
     },
 
-    async updateInstallStatus() {
+    async updateInstallStatus(forceChartsUpdate = false) {
       let hasService;
 
       try {
@@ -456,8 +517,8 @@ export default {
         hasService = false;
       }
 
-      if (hasService) {
-        this.refreshCharts();
+      if (hasService || forceChartsUpdate) {
+        this.refreshCharts(forceChartsUpdate);
       }
 
       Vue.set(this, 'hasService', hasService);
@@ -470,6 +531,7 @@ export default {
     },
 
     removePluginSupport() {
+      this.refreshCharts(true);
       this.$refs.removeUIPlugins.showDialog();
     },
 
@@ -478,6 +540,12 @@ export default {
       this.$refs.developerInstallDialog.showDialog();
     },
 
+    showAddExtensionReposDialog() {
+      this.updateAddReposSetting();
+      this.refreshCharts(true);
+      this.$refs.addExtensionReposDialog.showDialog();
+    },
+
     showCatalogLoadDialog() {
       this.$refs.catalogLoadDialog.showDialog();
     },
@@ -514,7 +582,7 @@ export default {
     didInstall(plugin) {
       if (plugin) {
         // Change the view to installed if we started installing a plugin
-        this.$refs.tabs?.select('installed');
+        this.$refs.tabs?.select(TABS_VALUES.INSTALLED);
 
         // Clear the load error, if there was one previously
         this.$store.dispatch('uiplugins/setError', { name: plugin.name, error: false });
@@ -526,7 +594,6 @@ export default {
     },
 
     updatePluginInstallStatus(name, status) {
-      // console.log(`UPDATING PLUGIN STATUS: ${ name } ${ status }`);
       Vue.set(this.installing, name, status);
     },
 
@@ -559,6 +626,13 @@ export default {
 
     manageExtensionView() {
       this.showCatalogList = !this.showCatalogList;
+    },
+
+    updateAddReposSetting() {
+      if (this.addExtensionReposBannerSetting?.value === 'true') {
+        this.addExtensionReposBannerSetting.value = 'false';
+        this.addExtensionReposBannerSetting.save();
+      }
     }
   }
 };
@@ -634,6 +708,7 @@ export default {
           @devLoad="showDeveloperLoadDialog"
           @removePluginSupport="removePluginSupport"
           @manageRepos="manageRepos"
+          @addRancherRepos="showAddExtensionReposDialog"
           @manageExtensionView="manageExtensionView"
         />
       </div>
@@ -655,7 +730,8 @@ export default {
       <SetupUIPlugins
         v-else
         class="setup-message"
-        @done="updateInstallStatus"
+        @done="updateInstallStatus(true)"
+        @refreshCharts="refreshCharts(true)"
       />
     </div>
     <div v-else>
@@ -667,6 +743,22 @@ export default {
         />
       </template>
       <template v-else>
+        <Banner
+          v-if="showAddReposBanner"
+          color="warning"
+          class="add-repos-banner mb-20"
+          data-testid="extensions-new-repos-banner"
+        >
+          <span>{{ t('plugins.addRepos.banner', {}, true) }}</span>
+          <button
+            class="ml-10 btn btn-sm role-primary"
+            data-testid="extensions-new-repos-banner-action-btn"
+            @click="showAddExtensionReposDialog()"
+          >
+            {{ t('plugins.addRepos.bannerBtn') }}
+          </button>
+        </Banner>
+
         <Tabbed
           ref="tabs"
           :tabs-only="true"
@@ -674,25 +766,25 @@ export default {
           @changed="filterChanged"
         >
           <Tab
-            name="installed"
+            :name="TABS_VALUES.INSTALLED"
             data-testid="extension-tab-installed"
             label-key="plugins.tabs.installed"
             :weight="20"
           />
           <Tab
-            name="available"
+            :name="TABS_VALUES.AVAILABLE"
             data-testid="extension-tab-available"
             label-key="plugins.tabs.available"
             :weight="19"
           />
           <Tab
-            name="updates"
+            :name="TABS_VALUES.UPDATES"
             label-key="plugins.tabs.updates"
             :weight="18"
             :badge="updates.length"
           />
           <Tab
-            name="all"
+            :name="TABS_VALUES.ALL"
             label-key="plugins.tabs.all"
             :weight="17"
           />
@@ -767,9 +859,20 @@ export default {
                         v-clean-tooltip="t('plugins.upgradeAvailable')"
                       > -> {{ plugin.upgrade }}</span>
                       <p
-                        v-if="plugin.incompatibleDisclaimer"
+                        v-if="plugin.installedError"
+                        class="incompatible"
+                      >
+                        <i class="icon icon-warning icon-lg text-warning" />
+                        <span>{{ plugin.installedError }}</span>
+                      </p>
+                      <p
+                        v-else-if="plugin.incompatibleRancherVersion"
                         class="incompatible"
-                      >{{ plugin.incompatibleDisclaimer }}</p>
+                      >{{ plugin.incompatibleRancherVersion }}</p>
+                      <p
+                        v-else-if="plugin.incompatibleKubeVersion"
+                        class="incompatible"
+                      >{{ plugin.incompatibleKubeVersion }}</p>
                     </span>
                   </div>
                   <!-- plugin badges -->
@@ -863,7 +966,7 @@ export default {
                       </button>
                     </div>
                     <div
-                      v-else
+                      v-else-if="plugin.installableVersions && plugin.installableVersions.length"
                       class="plugin-buttons"
                     >
                       <button
@@ -905,6 +1008,10 @@ export default {
       ref="removeUIPlugins"
       @done="updateInstallStatus"
     />
+    <AddExtensionRepos
+      ref="addExtensionReposDialog"
+      @done="updateInstallStatus(true)"
+    />
   </div>
 </template>
 
@@ -1130,6 +1237,15 @@ export default {
       }
     }
   }
+  ::v-deep .checkbox-label {
+    font-weight: normal !important;
+  }
+
+  ::v-deep .add-repos-banner .banner__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
   @media screen and (max-width: 1200px) {
     .plugin-list {

package/pages/docs/_doc.vue

@@ -121,8 +121,14 @@ export default {
         const y = event.srcElement.scrollTop - top - 20;
         let found = false;
 
+        if (!this.doc?.toc || this.doc.toc.length === 0) {
+          this.selected = null;
+
+          return;
+        }
+
         // Debounce scroll events
-        this.doc.toc.forEach((item) => {
+        this.doc.toc?.forEach((item) => {
           const elm = document.getElementById(item.id);
           const tocElm = document.getElementById(`toc-link-${ item.id }`);
 
@@ -146,8 +152,8 @@ export default {
           }
         });
 
-        if (!found) {
-          const last = this.doc.toc[this.doc.toc.length - 1].id;
+        if (!found & this.doc.toc) {
+          const last = this.doc.toc[this.doc.toc.length - 1]?.id;
           const tocElm = document.getElementById(`toc-link-${ last }`);
 
           if ( tocElm ) {

package/pages/home.vue

@@ -17,7 +17,7 @@ import { getVersionInfo, readReleaseNotes, markReadReleaseNotes, markSeenRelease
 import PageHeaderActions from '@shell/mixins/page-actions';
 import { getVendor } from '@shell/config/private-label';
 import { mapFeature, MULTI_CLUSTER } from '@shell/store/features';
-import { BLANK_CLUSTER } from '@shell/store';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 
 import { RESET_CARDS_ACTION, SET_LOGIN_ACTION } from '@shell/config/page-actions';
@@ -86,7 +86,7 @@ export default {
 
   computed: {
     ...mapState(['managementReady']),
-    ...mapGetters(['currentCluster']),
+    ...mapGetters(['currentCluster', 'defaultClusterId', 'releaseNotesUrl']),
     mcm: mapFeature(MULTI_CLUSTER),
 
     provClusters() {
@@ -203,8 +203,6 @@ export default {
       ];
     },
 
-    ...mapGetters(['currentCluster', 'defaultClusterId']),
-
     kubeClusters() {
       return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.provClusters || [], this.$store), this.$store);
     }
@@ -266,7 +264,6 @@ export default {
     showWhatsNew() {
       // Update the value, so that the message goes away
       markReadReleaseNotes(this.$store);
-      this.$router.push({ name: 'docs-doc', params: { doc: 'whats-new' } });
     },
 
     showUserPrefs() {
@@ -323,7 +320,10 @@ export default {
             </div>
             <a
               class="hand"
-              @click.prevent.stop="showWhatsNew"
+              :href="releaseNotesUrl"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              @click.stop="showWhatsNew"
             ><span v-clean-html="t('landing.whatsNewLink')" /></a>
           </Banner>
         </div>

package/pages/support/index.vue

@@ -5,9 +5,9 @@ import CommunityLinks from '@shell/components/CommunityLinks';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { getVendor } from '@shell/config/private-label';
 import { SETTING } from '@shell/config/settings';
-import { findBy } from '@shell/utils/array';
 import { addParam } from '@shell/utils/url';
 import { isRancherPrime } from '@shell/config/version';
+import { hasCspAdapter } from 'mixins/brand';
 import { generateSupportLink } from '@shell/utils/version';
 
 export default {
@@ -71,7 +71,7 @@ export default {
 
   computed: {
     cspAdapter() {
-      return findBy(this.apps, 'metadata.name', 'rancher-csp-adapter' );
+      return hasCspAdapter(this.apps);
     },
 
     hasSupport() {
@@ -93,11 +93,17 @@ export default {
     },
 
     supportConfigLink() {
-      if (!this.cspAdapter) {
+      const adapter = this.cspAdapter;
+
+      if (!adapter) {
         return false;
       }
 
-      return `${ this.serverUrl }/v1/generateSUSERancherSupportConfig`;
+      if (adapter.metadata.name === 'rancher-csp-billing-adapter') {
+        return `${ this.serverUrl }/v1/generateSUSERancherSupportConfig?usePAYG=true`;
+      } else {
+        return `${ this.serverUrl }/v1/generateSUSERancherSupportConfig`;
+      }
     },
 
     title() {

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', 'dialog', 'formatters', 'login'];
+const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'layouts', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters', 'login'];
 const contextMap = contextFolders.reduce((map, obj) => {
   map[obj] = true;
 

package/plugins/clean-tooltip-directive.js

@@ -24,7 +24,7 @@ function bind(el, { value, oldValue, modifiers }) {
     });
 }
 
-const VCleanTooltip = {
+export const VCleanTooltip = {
   ...VTooltip,
   bind,
   update: bind,