@rancher/shell 0.3.1 → 0.3.2

package/core/plugin-helpers.js

@@ -0,0 +1,171 @@
+import { ActionLocation, CardLocation, ExtensionPoint } from '@shell/core/types';
+import { isMac } from '@shell/utils/platform';
+import { ucFirst, randomStr } from '@shell/utils/string';
+import { _EDIT, _CONFIG, _DETAIL, _LIST } from '@shell/config/query-params';
+import { getProductFromRoute } from '@shell/middleware/authenticated';
+
+function checkRouteProduct({ name, params, query }, locationConfigParam) {
+  const product = getProductFromRoute({
+    name, params, query
+  });
+
+  // alias for the homepage
+  if (locationConfigParam === 'home' && name === 'home') {
+    return true;
+  } else if (locationConfigParam === product) {
+    return true;
+  }
+
+  return false;
+}
+
+function checkRouteMode({ name, query }, locationConfigParam) {
+  if (locationConfigParam === _EDIT && query.mode && query.mode === _EDIT) {
+    return true;
+  } else if (locationConfigParam === _CONFIG && query.as && query.as === _CONFIG) {
+    return true;
+  } else if (locationConfigParam === _DETAIL && name.includes('-id')) {
+    return true;
+    // alias to target all list views
+  } else if (locationConfigParam === _LIST && !name.includes('-id') && name.includes('-resource')) {
+    return true;
+  }
+
+  return false;
+}
+
+function checkExtensionRouteBinding($route, locationConfig) {
+  // if no configuration is passed, consider it as global
+  if (!Object.keys(locationConfig).length) {
+    return true;
+  }
+
+  const { params } = $route;
+
+  // "params" to be checked based on the locationConfig
+  const paramsToCheck = [
+    'product',
+    'resource',
+    'namespace',
+    'cluster',
+    'id',
+    'mode'
+  ];
+
+  let res = false;
+
+  for (let i = 0; i < paramsToCheck.length; i++) {
+    const param = paramsToCheck[i];
+
+    if (locationConfig[param]) {
+      for (let x = 0; x < locationConfig[param].length; x++) {
+        const locationConfigParam = locationConfig[param][x];
+
+        if (locationConfigParam) {
+          // handle "product" in a separate way...
+          if (param === 'product') {
+            res = checkRouteProduct($route, locationConfigParam);
+          // also handle "mode" in a separate way because it mainly depends on query params
+          } else if (param === 'mode') {
+            res = checkRouteMode($route, locationConfigParam);
+          } else if (locationConfigParam === params[param]) {
+            res = true;
+          } else {
+            res = false;
+          }
+        }
+
+        // If a single location config param is good then this is an param (aka ['pods', 'configmap'] = pods or configmaps)
+        if (res) {
+          break;
+        }
+      }
+
+      // If a single param (set of location config params) is bad then this is not an acceptable location
+      if (!res) {
+        break;
+      }
+    }
+  }
+
+  return res;
+}
+
+export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea, currRoute, translationCtx = pluginCtx) {
+  const extensionEnhancements = [];
+
+  const actions = pluginCtx.$plugin.getUIConfig(actionType, uiArea);
+
+  actions.forEach((action, i) => {
+    if (checkExtensionRouteBinding(currRoute, action.locationConfig)) {
+      // ADD CARD PLUGIN UI ENHANCEMENT
+      if (actionType === ExtensionPoint.CARD) {
+        // intercept to apply translation
+        if (uiArea === CardLocation.CLUSTER_DASHBOARD_CARD && action.labelKey) {
+          actions[i].label = translationCtx.t(action.labelKey);
+        }
+
+      // ADD ACTION PLUGIN UI ENHANCEMENT
+      } else if (actionType === ExtensionPoint.ACTION) {
+        // TABLE ACTION
+        if (uiArea === ActionLocation.TABLE) {
+          // intercept to apply translation
+          if (action.labelKey) {
+            actions[i].label = translationCtx.t(action.labelKey);
+          }
+
+          // sets the enabled flag to true if omitted on the config
+          if (!Object.keys(action).includes('enabled')) {
+            actions[i].enabled = true;
+          }
+
+          // bulkable flag
+          actions[i].bulkable = actions[i].multiple || actions[i].bulkable;
+
+          // populate action identifier to prevent errors
+          if (!actions[i].action) {
+            actions[i].action = `custom-table-action-${ randomStr(10).toLowerCase() }`;
+          }
+        }
+
+        // extract simplified shortcut definition on plugin - HEADER ACTION
+        if (uiArea === ActionLocation.HEADER && action.shortcut) {
+          // if it's a string, then assume CTRL for windows and META for mac
+          if (typeof action.shortcut === 'string') {
+            actions[i].shortcutLabel = () => {
+              return isMac ? `(\u2318-${ action.shortcut.toUpperCase() })` : `(Ctrl-${ action.shortcut.toUpperCase() })`;
+            };
+            actions[i].shortcutKey = { windows: ['ctrl', action.shortcut], mac: ['meta', action.shortcut] };
+          // correct check for an Object type in JS... handle the object passed
+          } else if (typeof action.shortcut === 'object' && !Array.isArray(action.shortcut) && action.shortcut !== null) {
+            actions[i].shortcutKey = action.shortcut;
+            const keyboardCombo = isMac ? actions[i].shortcut.mac : actions[i].shortcut.windows ? actions[i].shortcut.windows : [];
+            let scLabel = '';
+
+            keyboardCombo.forEach((key, i) => {
+              if (i < keyboardCombo.length - 1) {
+                if (key === 'meta') {
+                  key = '\u2318';
+                } else {
+                  key = ucFirst(key);
+                }
+                scLabel += `${ key }`;
+                scLabel += '-';
+              } else {
+                scLabel += `${ key.toUpperCase() }`;
+              }
+            });
+
+            actions[i].shortcutLabel = () => {
+              return `(${ scLabel })`;
+            };
+          }
+        }
+      }
+
+      extensionEnhancements.push(actions[i]);
+    }
+  });
+
+  return extensionEnhancements;
+}

package/core/plugin.ts

@@ -1,6 +1,16 @@
 import { RouteConfig } from 'vue-router';
 import { DSL as STORE_DSL } from '@shell/store/type-map';
-import { CoreStoreInit, IPlugin } from './types';
+import {
+  CoreStoreInit,
+  Action,
+  Tab,
+  Card,
+  Panel,
+  TableColumn,
+  IPlugin,
+  LocationConfig,
+  ExtensionPoint,
+} from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import {
   PluginRouteConfig, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
@@ -20,6 +30,8 @@ export class Plugin implements IPlugin {
   public onLeave: OnNavAwayFromPackage = () => Promise.resolve();
   public _onLogOut: OnLogOut = () => Promise.resolve();
 
+  public uiConfig: { [key: string]: any } = {};
+
   // Plugin metadata (plugin package.json)
   public _metadata: any = {};
 
@@ -34,6 +46,11 @@ export class Plugin implements IPlugin {
   constructor(id: string) {
     this.id = id;
     this.name = id;
+
+    // Initialize uiConfig for all of the possible enum values
+    Object.values(ExtensionPoint).forEach((v) => {
+      this.uiConfig[v] = {};
+    });
   }
 
   get metadata() {
@@ -108,6 +125,49 @@ export class Plugin implements IPlugin {
     this.routes.push({ parent, route });
   }
 
+  private _addUIConfig(type: string, where: string, when: LocationConfig | string, config: any) {
+    // For convenience 'when' can be a string to indicate a resource, so convert it to the LocationConfig format
+    const locationConfig = (typeof when === 'string') ? { resource: when } : when;
+
+    this.uiConfig[type][where] = this.uiConfig[type][where] || [];
+    this.uiConfig[type][where].push({ ...config, locationConfig });
+  }
+
+  /**
+   * Adds an action/button to the UI
+   */
+  addAction(where: string, when: LocationConfig | string, action: Action): void {
+    this._addUIConfig(ExtensionPoint.ACTION, where, when, action);
+  }
+
+  /**
+   * Adds a tab to the UI
+   */
+  addTab(where: string, when: LocationConfig | string, tab: Tab): void {
+    this._addUIConfig(ExtensionPoint.TAB, where, when, tab);
+  }
+
+  /**
+   * Adds a panel/component to the UI
+   */
+  addPanel(where: string, when: LocationConfig | string, panel: Panel): void {
+    this._addUIConfig(ExtensionPoint.PANEL, where, when, panel);
+  }
+
+  /**
+   * Adds a card to the to the UI
+   */
+  addCard( where: string, when: LocationConfig | string, card: Card): void {
+    this._addUIConfig(ExtensionPoint.CARD, where, when, card);
+  }
+
+  /**
+   * Adds a new column to a table on the UI
+   */
+  addTableColumn(where: string, when: LocationConfig | string, column: TableColumn): void {
+    this._addUIConfig(ExtensionPoint.TABLE_COL, where, when, column);
+  }
+
   setHomePage(component: any) {
     this.addRoute({
       name: 'home',

package/core/plugins.js

@@ -3,6 +3,7 @@ import { clearModelCache } from '@shell/plugins/dashboard-store/model-loader';
 import { Plugin } from './plugin';
 import { PluginRoutes } from './plugin-routes';
 import { UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
+import { ExtensionPoint } from './types';
 
 const MODEL_TYPE = 'models';
 
@@ -21,6 +22,12 @@ export default function({
 
   const pluginRoutes = new PluginRoutes(app.router);
 
+  const uiConfig = {};
+
+  for (const ep in ExtensionPoint) {
+    uiConfig[ExtensionPoint[ep]] = {};
+  }
+
   inject('plugin', {
     // Plugins should not use these - but we will pass them in for now as a 2nd argument
     // in case there are use cases not covered that require direct access - we may remove access later
@@ -251,6 +258,18 @@ export default function({
         });
       });
 
+      // UI Configuration - copy UI config from a plugin into the global uiConfig object
+      Object.keys(plugin.uiConfig).forEach((actionType) => {
+        Object.keys(plugin.uiConfig[actionType]).forEach((actionLocation) => {
+          plugin.uiConfig[actionType][actionLocation].forEach((action) => {
+            if (!uiConfig[actionType][actionLocation]) {
+              uiConfig[actionType][actionLocation] = [];
+            }
+            uiConfig[actionType][actionLocation].push(action);
+          });
+        });
+      });
+
       // l10n
       Object.keys(plugin.l10n).forEach((name) => {
         plugin.l10n[name].forEach((fn) => {
@@ -334,6 +353,20 @@ export default function({
       return validators[name];
     },
 
+    /**
+     * Return the UI configuration for the given type and location
+     */
+    getUIConfig(type, uiArea) {
+      return uiConfig[type][uiArea] || [];
+    },
+
+    /**
+     * Returns all UI Configuration (useful for debugging)
+     */
+    getAllUIConfig() {
+      return uiConfig;
+    },
+
     // Timestamp that a UI package was last loaded
     // Typically used to invalidate caches (e.g. i18n) when new plugins are loaded
     get lastLoad() {

package/core/types.ts

@@ -31,10 +31,111 @@ export type OnEnterLeavePackageConfig = {
   isExt: string,
   oldIsExt: string
 }
+
 export type OnNavToPackage = (store: any, config: OnEnterLeavePackageConfig) => Promise<void>;
 export type OnNavAwayFromPackage = (store: any, config: OnEnterLeavePackageConfig) => Promise<void>;
 export type OnLogOut = (store: any) => Promise<void>;
 
+/** Enum regarding the extensionable areas/places of the UI */
+export enum ExtensionPoint {
+  ACTION = 'Action', // eslint-disable-line no-unused-vars
+  TAB = 'Tab', // eslint-disable-line no-unused-vars
+  PANEL = 'Panel', // eslint-disable-line no-unused-vars
+  CARD = 'Card', // eslint-disable-line no-unused-vars
+  TABLE_COL = 'TableColumn', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding action locations that are extensionable in the UI */
+export enum ActionLocation {
+  HEADER = 'header-action', // eslint-disable-line no-unused-vars
+  TABLE = 'table-action', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding panel locations that are extensionable in the UI */
+export enum PanelLocation {
+  DETAILS_MASTHEAD = 'details-masthead', // eslint-disable-line no-unused-vars
+  DETAIL_TOP = 'detail-top', // eslint-disable-line no-unused-vars
+  RESOURCE_LIST = 'resource-list', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding tab locations that are extensionable in the UI */
+export enum TabLocation {
+  RESOURCE_DETAIL = 'tab', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding card locations that are extensionable in the UI */
+export enum CardLocation {
+  CLUSTER_DASHBOARD_CARD = 'cluster-dashboard-card', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding table col locations that are extensionable in the UI */
+export enum TableColumnLocation {
+  RESOURCE = 'resource-list', // eslint-disable-line no-unused-vars
+}
+
+/** Definition of the shortcut object (keyboard shortcuts) */
+export type ShortCutKey = {
+  windows?: string[];
+  mac?: string[];
+};
+
+/** Definition of the action options (table actions) */
+export type ActionOpts = {
+  event: any;
+  isAlt: boolean;
+  action: any;
+};
+
+/** Definition of an extension action (options that can be passed when setting an extension action) */
+export type Action = {
+  label?: string;
+  labelKey?: string;
+  tooltipKey?: string;
+  tooltip?: string;
+  shortcut?: string | ShortCutKey;
+  svg?: Function;
+  icon?: string;
+  multiple?: boolean;
+  enabled?: (ctx: any) => boolean;
+  invoke: (opts: ActionOpts, resources: any[]) => void | boolean | Promise<boolean>;
+};
+
+/** Definition of a panel (options that can be passed when defining an extension panel enhancement) */
+export type Panel = {
+  component: Function;
+};
+
+/** Definition of a card (options that can be passed when defining an extension card enhancement) */
+export type Card = {
+  label?: string;
+  labelKey?: string;
+  component: Function;
+};
+
+export type TableColumn = any;
+
+/** Definition of a tab (options that can be passed when defining an extension tab enhancement) */
+export type Tab = {
+  name: string;
+  label?: string;
+  labelKey?: string;
+  tooltipKey?: string;
+  tooltip?: string;
+  showHeader?: boolean;
+  weight?: number;
+  component: Function;
+};
+
+/** Definition of the locationConfig object (used in extensions) */
+export type LocationConfig = {
+  product?: string[],
+  resource?: string[],
+  namespace?: string[],
+  cluster?: string[],
+  id?: string[],
+  mode?: string[]
+};
+
 /**
  * Interface for a Dashboard plugin
  */
@@ -63,7 +164,7 @@ export interface IPlugin {
   validators: {[key: string]: Function};
 
   /**
-   * Add a module contains localisations for a specific locale
+   * Add a module containing localisations for a specific locale
    */
   addL10n(locale: string, fn: Function): void;
 
@@ -73,6 +174,31 @@ export interface IPlugin {
   addRoute(route: RouteConfig): void;
   addRoute(parent: string, route: RouteConfig): void;
 
+  /**
+   * Adds an action/button to the UI
+   */
+  addAction(where: ActionLocation | string, when: LocationConfig | string, action: Action): void;
+
+  /**
+   * Adds a tab to the UI (ResourceTabs component)
+   */
+  addTab(where: TabLocation | string, when: LocationConfig | string, action: Tab): void;
+
+  /**
+   * Adds a panel/component to the UI
+   */
+  addPanel(where: PanelLocation | string, when: LocationConfig | string, action: Panel): void;
+
+  /**
+   * Adds a card to the UI
+   */
+  addCard(where: CardLocation | string, when: LocationConfig | string, action: Card): void;
+
+  /**
+   * Adds a new column to the SortableTable component
+   */
+  addTableColumn(where: TableColumnLocation | string, when: LocationConfig | string, action: TableColumn): void;
+
   /**
    * Set the component to use for the landing home page
    * @param component Home page component
@@ -116,7 +242,7 @@ export interface IPlugin {
     onLogOut?: OnLogOut
   ): void;
 
-    /**
+  /**
    * Register 'something' that can be dynamically loaded - e.g. model, edit, create, list, i18n
    * @param {String} type type of thing to register, e.g. 'edit'
    * @param {String} name unique name of 'something'

package/edit/catalog.cattle.io.clusterrepo.vue

@@ -59,6 +59,7 @@ export default {
           :options="[false, true]"
           :labels="[t('catalog.repo.target.http'), t('catalog.repo.target.git')]"
           :mode="mode"
+          data-testid="clusterrepo-radio-input"
         />
       </div>
     </div>
@@ -74,6 +75,7 @@ export default {
           :label="t('catalog.repo.gitRepo.label')"
           :placeholder="t('catalog.repo.gitRepo.placeholder', null, true)"
           :mode="mode"
+          data-testid="clusterrepo-git-repo-input"
         />
       </div>
       <div class="col span-6">
@@ -83,6 +85,7 @@ export default {
           :label="t('catalog.repo.gitBranch.label')"
           :placeholder="t('catalog.repo.gitBranch.placeholder', null, true)"
           :mode="mode"
+          data-testid="clusterrepo-git-branch-input"
         />
       </div>
     </div>

package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -154,7 +154,7 @@ export default {
       view:           _VIEW,
       yamlError:      '',
       fvFormRuleSets: [
-        { path: 'name', rules: ['required'] }
+        { path: 'name', rules: ['required', 'duplicateName'] }
       ],
       fvReportedValidationPaths: ['value']
     };
@@ -183,7 +183,19 @@ export default {
     receiverNameDisabled() {
       return this.$route.query.mode === _VIEW;
     },
-
+    fvExtraRules() {
+      return {
+        duplicateName: () => {
+          const receiversArray = this.alertmanagerConfigResource.spec.receivers;
+          const receiverNamesArray = receiversArray.map(R => R.name);
+          const receiversSet = new Set(receiverNamesArray);
+
+          if (receiversArray.length !== receiversSet.size) {
+            return this.$store.getters['i18n/t']('monitoring.alerting.validation.duplicatedReceiverName', { name: this.value.name });
+          }
+        }
+      };
+    }
   },
 
   watch: {

package/edit/provisioning.cattle.io.cluster/__tests__/rke2.test.ts

@@ -6,6 +6,9 @@ describe('component: rke2', () => {
     'v1.25.0+rke2r1',
     'v1.24.0+rke2r1',
     'v1.23.0+rke2r1',
+    'v1.25.0+k3s1',
+    'v1.24.0+k3s1',
+    'v1.23.0+k3s1',
   ])('should display PSA option', () => {
     const label = 'whatever';
     const option = { label, value: label };

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -314,6 +314,7 @@ export default {
       harvesterVersionRange: {},
       lastDefaultPodSecurityPolicyTemplateName,
       previousKubernetesVersion,
+      harvesterVersion:      ''
     };
   },
 
@@ -356,11 +357,10 @@ export default {
      */
     needsPSA() {
       const release = this.value?.spec?.kubernetesVersion || '';
-      const isRKE2 = release.includes('rke2');
       const version = release.match(/\d+/g);
       const isRequiredVersion = version?.length ? +version[0] > 1 || +version[1] >= 23 : false;
 
-      return isRKE2 && isRequiredVersion;
+      return isRequiredVersion;
     },
 
     /**
@@ -903,6 +903,7 @@ export default {
     },
 
     isHarvesterIncompatible() {
+      const CompareVersion = '<v1.2';
       let ccmRke2Version = (this.chartVersions['harvester-cloud-provider'] || {})['version'];
       let csiRke2Version = (this.chartVersions['harvester-csi-driver'] || {})['version'];
 
@@ -918,8 +919,12 @@ export default {
       }
 
       if (ccmVersion && csiVersion) {
-        if (semver.satisfies(ccmRke2Version, ccmVersion) &&
-            semver.satisfies(csiRke2Version, csiVersion)) {
+        if (semver.satisfies(this.harvesterVersion, CompareVersion) || !(this.harvesterVersion || '').startsWith('v')) {
+          // When harveste version is less than `CompareVersion`, compatibility is not determined,
+          // At the same time, version numbers like this will not be checked: master-14bbee2c-head
+          return false;
+        } else if (semver.satisfies(ccmRke2Version, ccmVersion) &&
+          semver.satisfies(csiRke2Version, csiVersion)) {
           return false;
         } else {
           return true;
@@ -1752,7 +1757,10 @@ export default {
         const res = await this.$store.dispatch('cluster/request', { url: `${ url }/${ HCI.SETTING }s` });
 
         const version = (res?.data || []).find(s => s.id === 'harvester-csi-ccm-versions');
+        // get harvester server-version
+        const serverVersion = (res?.data || []).find(s => s.id === 'server-version');
 
+        this.harvesterVersion = serverVersion.value;
         if (version) {
           this.harvesterVersionRange = JSON.parse(version.value || version.default || '{}');
         } else {
@@ -1791,32 +1799,27 @@ export default {
         const major = parseInt(version?.[0] || 0);
         const minor = parseInt(version?.[1] || 0);
 
-        // If the new version is 1.25 or greater, set the PSP Policy to 'RKE2 Default' (empty string)
-        if (major === 1 && minor >= 25) {
+        // Reset PSA if not RKE2
+        if (!value.includes('rke2')) {
           set(this.value.spec, 'defaultPodSecurityPolicyTemplateName', '');
         } else {
-          const previous = VERSION.parse(this.previousKubernetesVersion);
-          const major = parseInt(previous?.[0] || 0);
-          const minor = parseInt(previous?.[1] || 0);
-
+          // Reset PSP if it's legacy due k8s version 1.25+
           if (major === 1 && minor >= 25) {
-            // Previous value was 1.25 or greater, so reset back
+            set(this.value.spec, 'defaultPodSecurityPolicyTemplateName', '');
+          } else {
             set(this.value.spec, 'defaultPodSecurityPolicyTemplateName', this.lastDefaultPodSecurityPolicyTemplateName);
           }
-        }
 
-        this.previousKubernetesVersion = value;
-        set(this.value.spec, 'defaultPodSecurityAdmissionConfigurationTemplateName', '');
+          this.previousKubernetesVersion = value;
+        }
       }
     },
 
     /**
-     * Handle PSP changes side effects, like PSA resets
+     * Keep last PSP value
      */
     handlePspChange(value) {
-      if (value) {
-        this.lastDefaultPodSecurityPolicyTemplateName = value;
-      }
+      this.lastDefaultPodSecurityPolicyTemplateName = value;
     },
 
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/c/_cluster/apps/charts/index.vue

@@ -21,6 +21,7 @@ import { CATALOG } from '@shell/config/labels-annotations';
 import { isUIPlugin } from '@shell/config/uiplugins';
 
 export default {
+  name:       'Charts',
   components: {
     AsyncButton,
     Banner,
@@ -53,6 +54,7 @@ export default {
       searchQuery:     null,
       showDeprecated:  null,
       showHidden:      null,
+      isPspLegacy:     false,
       chartOptions:    [
         {
           label: 'Browse',
@@ -239,6 +241,14 @@ export default {
     }
   },
 
+  created() {
+    const release = this.currentCluster?.status?.version.gitVersion || '';
+    const isRKE2 = release.includes('rke2');
+    const version = release.match(/\d+/g);
+
+    this.isPspLegacy = version?.length ? isRKE2 && (+version[0] === 1 && +version[1] < 25) : false;
+  },
+
   methods: {
     colorForChart(chart) {
       const repos = this.repoOptions;
@@ -363,6 +373,13 @@ export default {
         @clicked="(row) => selectChart(row)"
       />
     </div>
+
+    <Banner
+      v-if="isPspLegacy"
+      color="warning"
+      :label="t('catalog.chart.banner.legacy')"
+    />
+
     <TypeDescription resource="chart" />
     <div class="left-right-split">
       <Select