@rancher/shell 0.3.4 → 0.3.5

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

@@ -3,11 +3,15 @@ import { mapState } from 'vuex';
 import { FLEET } from '@shell/config/types';
 import { WORKSPACE } from '@shell/store/prefs';
 import { STATES_ENUM, STATES, getStateLabel } from '@shell/plugins/dashboard-store/resource-class';
-import { allHash } from '@shell/utils/promise';
 import Loading from '@shell/components/Loading';
 import CollapsibleCard from '@shell/components/CollapsibleCard.vue';
 import ResourceTable from '@shell/components/ResourceTable';
 import CompoundStatusBadge from '@shell/components/CompoundStatusBadge';
+import { checkPermissions, checkSchemasForFindAllHash } from '@shell/utils/auth';
+import { WORKSPACE_ANNOTATION } from '@shell/config/labels-annotations';
+import { filterBy } from '@shell/utils/array';
+import FleetNoWorkspaces from '@shell/components/fleet/FleetNoWorkspaces.vue';
+import { NAME } from '@shell/config/product/fleet';
 
 export default {
   name:       'ListGitRepo',
@@ -15,27 +19,38 @@ export default {
     Loading,
     ResourceTable,
     CollapsibleCard,
-    CompoundStatusBadge
+    CompoundStatusBadge,
+    FleetNoWorkspaces
   },
 
   async fetch() {
-    const hash = await allHash({
-      allBundles:      this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE }),
-      gitRepos:        this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO }),
-      fleetWorkspaces: this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE }),
-    });
+    const hash = await checkSchemasForFindAllHash({
+      fleetWorkspaces: {
+        inStoreType:     'management',
+        type:            FLEET.WORKSPACE,
+        schemaValidator: (schema) => {
+          return !!schema?.links?.collection;
+        }
+      },
+      allBundles: {
+        inStoreType: 'management',
+        type:        FLEET.BUNDLE,
+      },
+      gitRepos: {
+        inStoreType: 'management',
+        type:        FLEET.GIT_REPO,
+      }
+    }, this.$store);
 
-    this.allBundles = hash.allBundles;
     this.gitRepos = hash.gitRepos;
-    this.fleetWorkspaces = hash.fleetWorkspaces;
+    this.fleetWorkspacesData = hash.fleetWorkspaces || [];
 
-    // init cards collapse flags
-    const workspaces = this.fleetWorkspaces.filter(ws => ws.repos.length);
+    try {
+      const permissions = await checkPermissions({ workspaces: { type: FLEET.WORKSPACE }, gitRepos: { type: FLEET.GIT_REPO, schemaValidator: schema => schema.resourceMethods.includes('PUT') } }, this.$store.getters);
 
-    if (workspaces.length) {
-      workspaces.forEach((ws) => {
-        this.$set(this.isCollapsed, ws.id, false);
-      });
+      this.permissions = permissions;
+    } catch (e) {
+      console.error(e); // eslint-disable-line no-console
     }
   },
 
@@ -71,24 +86,49 @@ export default {
           sort:     'status.resourceCounts.ready',
         }
       ],
-      schema:          {},
-      allBundles:      null,
-      gitRepos:        null,
-      fleetWorkspaces: null,
-      isCollapsed:     {},
-      getStartedLink:  {
+      schema:              {},
+      allBundles:          [],
+      gitRepos:            [],
+      fleetWorkspacesData: [],
+      isCollapsed:         {},
+      permissions:         {},
+      getStartedLink:      {
         name:   'c-cluster-product-resource-create',
         params: {
-          product:  'fleet',
+          product:  NAME,
           resource: FLEET.GIT_REPO
         },
       }
     };
   },
   computed: {
-    ...mapState(['workspace']),
+    ...mapState(['workspace', 'allNamespaces']),
+    fleetWorkspaces() {
+      if (this.fleetWorkspacesData?.length) {
+        return this.fleetWorkspacesData;
+      }
+
+      // When user doesn't have access to the workspaces fall back to namespaces
+
+      return this.allNamespaces.filter((item) => {
+        return item.metadata.annotations[WORKSPACE_ANNOTATION] === WORKSPACE;
+      }).map(( obj ) => {
+        const repos = filterBy(this.gitRepos, 'metadata.namespace', obj.id);
+
+        return {
+          ...obj,
+          counts: {
+            clusters:      '-',
+            clusterGroups: '-',
+            gitRepos:      repos.length
+          },
+          repos,
+          nameDisplay: obj.id
+        };
+      });
+    },
     workspacesData() {
-      return this.fleetWorkspaces.filter(ws => ws.repos.length);
+      return this.fleetWorkspaces.filter(ws => ws.repos && ws.repos.length);
     },
     emptyWorkspaces() {
       return this.fleetWorkspaces.filter(ws => !ws.repos || !ws.repos.length);
@@ -105,7 +145,7 @@ export default {
       this.$router.push({
         name:   'c-cluster-product-resource',
         params: {
-          product:  'fleet',
+          product:  NAME,
           resource: FLEET.GIT_REPO
         },
       });
@@ -247,6 +287,14 @@ export default {
       });
     }
   },
+
+  watch: {
+    fleetWorkspaces(value) {
+      value?.filter(ws => ws.repos?.length).forEach((ws) => {
+        this.$set(this.isCollapsed, ws.id, false);
+      });
+    }
+  }
 };
 </script>
 
@@ -254,6 +302,10 @@ export default {
   <div class="fleet-dashboard">
     <Loading v-if="$fetchState.pending" />
     <!-- no git repos -->
+    <FleetNoWorkspaces
+      v-else-if="!fleetWorkspacesData.length"
+      :can-view="permissions.workspaces"
+    />
     <div
       v-else-if="!gitRepos.length"
       class="fleet-empty-dashboard"
@@ -270,15 +322,17 @@ export default {
           {{ t('fleet.dashboard.learnMore') }} <i class="icon icon-external-link" />
         </a>
       </p>
-      <h3 class="mb-30">
-        {{ t('fleet.dashboard.noRepo', null, true) }}
-      </h3>
-      <n-link
-        :to="getStartedLink"
-        class="btn role-secondary"
-      >
-        {{ t('fleet.dashboard.getStarted') }}
-      </n-link>
+      <template v-if="permissions.gitRepos">
+        <h3 class="mb-30">
+          {{ t('fleet.dashboard.noRepo', null, true) }}
+        </h3>
+        <n-link
+          :to="getStartedLink"
+          class="btn role-secondary"
+        >
+          {{ t('fleet.dashboard.getStarted') }}
+        </n-link>
+      </template>
     </div>
     <!-- fleet dashboard with repos -->
     <div
@@ -354,7 +408,9 @@ export default {
             v-on="$listeners"
           >
             <template #cell:clustersReady="{row}">
+              <span v-if="ws.type === 'namespace'"> - </span>
               <CompoundStatusBadge
+                v-else
                 :tooltip-text="getTooltipInfo('clusters', row)"
                 :badge-class="getStatusInfo('clusters', row).badgeClass"
                 :icon="getStatusInfo('clusters', row).icon"
@@ -362,7 +418,9 @@ export default {
               />
             </template>
             <template #cell:bundlesReady="{row}">
+              <span v-if="ws.type === 'namespace'"> - </span>
               <CompoundStatusBadge
+                v-else
                 :tooltip-text="getTooltipInfo('bundles', row)"
                 :badge-class="getStatusInfo('bundles', row).badgeClass"
                 :icon="getStatusInfo('bundles', row).icon"
@@ -389,6 +447,9 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.fleet-dashboard {
+  min-height: 100vh;
+}
 .fleet-empty-dashboard {
   flex: 1;
   display: flex;

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

@@ -27,7 +27,7 @@ export default {
             }
           }
         },
-        count: constraint.violations.length
+        count: constraint.totalViolations
       }));
   },
   data(ctx) {

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

@@ -72,7 +72,7 @@ export default {
 <template>
   <div>
     <h1>Overview</h1>
-    <h4 v-html="t('istio.poweredBy', {}, true)" />
+    <h4 v-clean-html="t('istio.poweredBy', {}, true)" />
     <div class="links">
       <div
         :class="{'disabled':!kialiUrl}"
@@ -99,7 +99,7 @@ export default {
             </a>
             <hr>
             <div class="description">
-              <span v-html="t('istio.links.kiali.description', {link: monitoringUrl}, true)" />
+              <span v-clean-html="t('istio.links.kiali.description', {link: monitoringUrl}, true)" />
             </div>
           </div>
         </span>
@@ -107,7 +107,7 @@ export default {
           v-if="!kialiUrl"
           class="disabled-msg"
         >
-          <span v-html="t('istio.links.disabled', {app: 'Kiali'})" />
+          <span v-clean-html="t('istio.links.disabled', {app: 'Kiali'})" />
         </div>
       </div>
       <div
@@ -135,7 +135,7 @@ export default {
             </a>
             <hr>
             <div class="description">
-              <span v-html="t('istio.links.jaeger.description', true)" />
+              <span v-clean-html="t('istio.links.jaeger.description', true)" />
             </div>
           </div>
         </span>
@@ -143,7 +143,7 @@ export default {
           v-if="!jaegerUrl"
           class="disabled-msg"
         >
-          <span v-html="t('istio.links.disabled', {app: 'Jaeger'})" />
+          <span v-clean-html="t('istio.links.disabled', {app: 'Jaeger'})" />
         </div>
       </div>
     </div>

package/pages/c/_cluster/manager/cloudCredential/index.vue

@@ -89,7 +89,7 @@ export default {
       <template #cell:apikey="{row}">
         <span
           v-if="row.publicData"
-          v-html="row.publicData"
+          v-clean-html="row.publicData"
         />
         <span
           v-else

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

@@ -214,3 +214,10 @@ export default {
     </div>
   </section>
 </template>
+
+<style lang="scss" scoped>
+  .create-resource-container .subtype-banner {
+    min-height: 80px;
+    padding: 10px;
+  }
+</style>

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

@@ -36,7 +36,7 @@ export default {
 
   computed: {
     showVersionSelector() {
-      return this.plugin?.versions.length > 1;
+      return this.versionOptions?.length > 1;
     },
 
     versionOptions() {
@@ -44,8 +44,8 @@ export default {
         return [];
       }
 
-      // Don't allow update/rollback to curent version
-      const versions = this.plugin.versions.filter((v) => {
+      // Don't allow update/rollback to current version
+      const versions = this.plugin?.installableVersions?.filter((v) => {
         if (this.currentVersion) {
           return v.version !== this.currentVersion;
         }
@@ -78,12 +78,12 @@ export default {
         this.currentVersion = plugin.displayVersion;
 
         // Update to latest version, so take the first version
-        if (plugin.versions.length > 0) {
-          this.version = plugin.versions[0].version;
+        if (plugin.installableVersions?.length > 0) {
+          this.version = plugin.installableVersions?.[0]?.version;
         }
       } else if (mode === 'rollback') {
         // Find the newest version once we remove the current version
-        const versionNames = plugin.versions.filter(v => v.version !== plugin.displayVersion);
+        const versionNames = plugin.installableVersions.filter(v => v.version !== plugin.displayVersion);
 
         this.currentVersion = plugin.displayVersion;
 
@@ -93,10 +93,10 @@ export default {
       }
 
       // Make sure we have the version available
-      const versionChart = plugin.versions?.find(v => v.version === this.version);
+      const versionChart = plugin.installableVersions?.find(v => v.version === this.version);
 
       if (!versionChart) {
-        this.version = plugin.versions[0].version;
+        this.version = plugin.installableVersions?.[0]?.version;
       }
 
       this.busy = false;

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

@@ -63,17 +63,19 @@ export default {
     },
 
     async loadPluginVersionInfo(version) {
-      this.versionError = false;
-      this.versionInfo = undefined;
-
       const versionName = version || this.info.displayVersion;
 
-      this.infoVersion = versionName;
+      const isVersionNotCompatibleWithUi = this.info.versions?.find(v => v.version === versionName && !v.isCompatibleWithUi);
 
-      if (!this.info.chart) {
+      if (!this.info.chart || isVersionNotCompatibleWithUi) {
         return;
       }
 
+      this.infoVersion = versionName;
+
+      this.versionError = false;
+      this.versionInfo = undefined;
+
       try {
         this.versionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
           repoType:  this.info.chart.repoType,
@@ -204,8 +206,9 @@ export default {
             :key="v.version"
           >
             <a
+              v-tooltip="v.requiredUiVersion ? t('plugins.info.requiresVersion', { version: v.requiredUiVersion }) : ''"
               class="version-link"
-              :class="{'version-active': v.version === infoVersion}"
+              :class="{'version-active': v.version === infoVersion, 'disabled': !v.isCompatibleWithUi}"
               @click="loadPluginVersionInfo(v.version)"
             >
               {{ v.version }}
@@ -337,6 +340,7 @@ export default {
 
       .plugin-versions {
         display: flex;
+        flex-wrap: wrap;
       }
 
       .plugin-description {
@@ -349,13 +353,22 @@ export default {
         padding: 2px 8px;
         border-radius: 5px;
         user-select: none;
-        margin-right: 5px;
+        margin: 0 5px 5px 0;
+        display: block;
 
         &.version-active {
           color: var(--link-text);
           background: var(--link);
         }
 
+        &.disabled {
+          cursor: not-allowed;
+          color: var(--disabled-text) !important;
+          background-color: var(--disabled-bg) !important;
+          border-color: var(--disabled-bg) !important;
+          text-decoration: none !important;
+        }
+
         &.version-builtin {
           display: inline-block;
         }

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

@@ -5,6 +5,7 @@ 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 { 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';
 import ActionMenu from '@shell/components/ActionMenu';
@@ -23,6 +24,8 @@ import {
   uiPluginAnnotation,
   uiPluginHasAnnotation,
   isSupportedChartVersion,
+  isChartVersionAvailableForInstall,
+  isChartVersionHigher,
   UI_PLUGIN_NAMESPACE,
   UI_PLUGIN_CHART_ANNOTATIONS
 } from '@shell/config/uiplugins';
@@ -59,6 +62,7 @@ export default {
       hasService:        false,
       defaultIcon:       require('~shell/assets/images/generic-plugin.svg'),
       reloadRequired:    false,
+      rancherVersion:    getVersionData()?.Version
     };
   },
 
@@ -183,27 +187,39 @@ export default {
         // Label can be overridden by chart annotation
         const label = uiPluginAnnotation(UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME) || chart.chartNameDisplay;
         const item = {
-          name:           chart.chartNameDisplay,
+          name:         chart.chartNameDisplay,
           label,
-          description:    chart.chartDescription,
-          id:             chart.id,
-          versions:       [],
-          displayVersion: chart.versions?.length > 0 ? chart.versions[0].version : '',
-          installed:      false,
-          builtin:        false,
-          experimental:   uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true'),
-          certified:      uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER),
+          description:  chart.chartDescription,
+          id:           chart.id,
+          versions:     [],
+          installed:    false,
+          builtin:      false,
+          experimental: uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true'),
+          certified:    uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER),
         };
 
-        this.latest = chart.versions[0];
         item.versions = [...chart.versions];
         item.chart = chart;
 
-        // Filter the versions, leaving only those that are compatible with this Rancher
-        item.versions = item.versions.filter(version => isSupportedChartVersion(version));
+        // 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));
 
-        if (this.latest) {
-          item.icon = chart.icon || this.latest.annotations['catalog.cattle.io/ui-icon'];
+        // 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));
+
+        const latestCompatible = item.installableVersions?.[0];
+        const latestNotCompatible = item.versions.find(version => !version.isCompatibleWithUi);
+
+        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'];
+        }
+
+        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 (this.installing[item.name]) {
@@ -253,8 +269,8 @@ export default {
           chart.installing = this.installing[chart.name];
 
           // Check for upgrade
-          if (chart.versions.length && p.version !== chart.versions[0].version) {
-            chart.upgrade = chart.versions[0].version;
+          if (chart.installableVersions?.length && p.version !== chart.installableVersions?.[0]?.version) {
+            chart.upgrade = chart.installableVersions[0].version;
           }
         } else {
           // No chart, so add a card for the plugin based on its Custom resource being present
@@ -619,6 +635,7 @@ export default {
             :data-testid="`extension-card-${plugin.name}`"
             @click="showPluginDetail(plugin)"
           >
+            <!-- plugin icon -->
             <div
               class="plugin-icon"
               :class="applyDarkModeBg"
@@ -636,7 +653,9 @@ export default {
                 class="icon plugin-icon-img"
               >
             </div>
+            <!-- plugin card -->
             <div class="plugin-metadata">
+              <!-- plugin basic info -->
               <div class="plugin-name">
                 {{ plugin.label }}
               </div>
@@ -654,8 +673,13 @@ export default {
                     v-if="plugin.upgrade"
                     v-tooltip="t('plugins.upgradeAvailable')"
                   > -> {{ plugin.upgrade }}</span>
+                  <p
+                    v-if="plugin.incompatibleDisclaimer"
+                    class="incompatible"
+                  >{{ plugin.incompatibleDisclaimer }}</p>
                 </span>
               </div>
+              <!-- plugin badges -->
               <div
                 v-if="plugin.builtin"
                 class="plugin-badges"
@@ -682,6 +706,7 @@ export default {
                 </div>
               </div>
               <div class="plugin-spacer" />
+              <!-- plugin badges -->
               <div class="plugin-actions">
                 <template v-if="plugin.error">
                   <div
@@ -691,6 +716,7 @@ export default {
                     <i class="icon icon-warning" />
                   </div>
                 </template>
+                <!-- plugin status -->
                 <div
                   v-if="plugin.helmError"
                   v-tooltip="t('plugins.helmError')"
@@ -713,6 +739,7 @@ export default {
                     {{ t('plugins.labels.uninstalling') }}
                   </div>
                 </div>
+                <!-- plugin buttons -->
                 <div
                   v-else-if="plugin.installed"
                   class="plugin-buttons"
@@ -734,7 +761,7 @@ export default {
                     {{ t('plugins.update.label') }}
                   </button>
                   <button
-                    v-if="!plugin.upgrade && plugin.versions.length > 1"
+                    v-if="!plugin.upgrade && plugin.installableVersions && plugin.installableVersions.length > 1"
                     class="btn role-secondary"
                     :data-testid="`extension-card-rollback-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'rollback', $event)"
@@ -942,6 +969,11 @@ export default {
         height: 16px;
         width: 16px;
       }
+
+      .incompatible {
+        margin: 10px 0;
+        font-weight: bold;
+      }
     }
 
     .plugin-installing {

package/pages/home.vue

@@ -38,8 +38,13 @@ export default {
   mixins: [PageHeaderActions],
 
   fetch() {
-    this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
-    this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+    if ( this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER) ) {
+      this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+    }
+
+    if ( this.$store.getters['management/schemaFor'](MANAGEMENT.CLUSTER) ) {
+      this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+    }
 
     if ( this.$store.getters['management/canList'](CAPI.MACHINE) ) {
       this.$store.dispatch('management/findAll', { type: CAPI.MACHINE });
@@ -307,7 +312,7 @@ export default {
             <a
               class="hand"
               @click.prevent.stop="showWhatsNew"
-            ><span v-html="t('landing.whatsNewLink')" /></a>
+            ><span v-clean-html="t('landing.whatsNewLink')" /></a>
           </Banner>
         </div>
       </div>
@@ -330,7 +335,7 @@ export default {
                 <a
                   class="hand mr-20"
                   @click.prevent.stop="showUserPrefs"
-                ><span v-html="t('landing.landingPrefs.userPrefs')" /></a>
+                ><span v-clean-html="t('landing.landingPrefs.userPrefs')" /></a>
               </Banner>
             </div>
           </div>

package/pages/index.vue

@@ -7,7 +7,9 @@ const validRoute = (route, router) => {
 };
 
 export default {
-  middleware({ redirect, store, app } ) {
+  middleware({
+    redirect, store, app, route
+  } ) {
     const seenWhatsNew = store.getters['prefs/get'](SEEN_WHATS_NEW);
     const versionInfo = getVersionInfo(store);
     const isSingleProduct = store.getters['isSingleProduct'];
@@ -19,6 +21,13 @@ export default {
     }
 
     const afterLoginRouteObject = store.getters['prefs/afterLoginRoute'];
+    const targetRoute = app.router.resolve(afterLoginRouteObject);
+
+    // If target route is /, then we will loop with endless redirect - so detect that here and
+    // redirect to /home, which is what we would do below, if there was no `afterLoginRouteObject`
+    if (targetRoute?.route?.fullPath === '/') {
+      return redirect(dashboardHome);
+    }
 
     // Confirm this is a valid route (it could have come from an uninstalled plugin)
     if (validRoute(afterLoginRouteObject, app.router)) {

package/plugins/clean-html-directive.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import DOMPurify from 'dompurify';
+
+const ALLOWED_TAGS = [
+  'code',
+  'li',
+  'a',
+  'p',
+  'b',
+  'br',
+  'ul',
+  'pre',
+  'span',
+  'div',
+  'i',
+  'em',
+  'strong',
+];
+
+const purifyHTML = value => DOMPurify.sanitize(value, { ALLOWED_TAGS });
+
+export const cleanHtmlDirective = {
+  inserted(el, binding) {
+    el.innerHTML = purifyHTML(binding.value);
+  },
+  componentUpdated(el, binding) {
+    el.innerHTML = purifyHTML(binding.value);
+  }
+};
+
+Vue.directive('clean-html', cleanHtmlDirective);