@rancher/shell 3.0.8-rc.8 → 3.0.8

package/store/i18n.js

@@ -285,8 +285,8 @@ export const actions = {
       return;
     }
 
-    const lastLoad = rootState.$plugin?.lastLoad;
-    const i18nExt = rootState.$plugin?.getDynamic('l10n', locale);
+    const lastLoad = rootState.$extension?.lastLoad;
+    const i18nExt = rootState.$extension?.getDynamic('l10n', locale);
     const reload = lastLoaded < lastLoad;
 
     lastLoaded = lastLoad;
@@ -314,7 +314,7 @@ export const actions = {
 
         // load all of the default locales from the plugins for fallback
         if (locale !== DEFAULT_LOCALE) {
-          const defaultI18nExt = rootState.$plugin?.getDynamic('l10n', DEFAULT_LOCALE);
+          const defaultI18nExt = rootState.$extension?.getDynamic('l10n', DEFAULT_LOCALE);
 
           if (defaultI18nExt && defaultI18nExt.length) {
             defaultI18nExt.forEach((fn) => {

package/store/index.js

@@ -233,7 +233,7 @@ const updateActiveNamespaceCache = (state, activeNamespaceCache) => {
  * Are we in the vai enabled world where mgmt clusters are paginated?
  */
 const paginateClusters = ({ rootGetters, state }) => {
-  return paginationUtils.isEnabled({ rootGetters, $plugin: state.$plugin }, { store: 'management', resource: { id: MANAGEMENT.CLUSTER, context: 'side-bar' } });
+  return paginationUtils.isEnabled({ rootGetters, $extension: state.$extension }, { store: 'management', resource: { id: MANAGEMENT.CLUSTER, context: 'side-bar' } });
 };
 
 export const state = () => {
@@ -262,6 +262,7 @@ export const state = () => {
     $router:                 markRaw({}),
     $route:                  markRaw({}),
     $plugin:                 markRaw({}),
+    $extension:              markRaw({}),
     showWorkspaceSwitcher:   true,
     localCluster:            null,
   };
@@ -775,6 +776,7 @@ export const mutations = {
   },
 
   setPlugin(state, pluginDefinition) {
+    state.$extension = markRaw(pluginDefinition || {});
     state.$plugin = markRaw(pluginDefinition || {});
   },
 
@@ -1195,7 +1197,7 @@ export const actions = {
 
     store.dispatch('gcStopIntervals');
 
-    Object.values(this.$plugin.getPlugins()).forEach((p) => {
+    Object.values(this.$extension.getPlugins()).forEach((p) => {
       if (p.onLogOut) {
         p.onLogOut(store);
       }
@@ -1251,10 +1253,10 @@ export const actions = {
     }
   },
 
-  nuxtClientInit({ dispatch, commit, rootState }, nuxt) {
-    commit('setRouter', nuxt.app.router);
-    commit('setRoute', nuxt.route);
-    commit('setPlugin', nuxt.app.$plugin);
+  dashboardClientInit({ dispatch, commit, rootState }, context) {
+    commit('setRouter', context.app.router);
+    commit('setRoute', context.route);
+    commit('setPlugin', context.app.$extension);
 
     dispatch('management/rehydrateSubscribe');
     dispatch('cluster/rehydrateSubscribe');

package/store/notifications.ts

@@ -299,6 +299,8 @@ export const actions = {
 
     // Show a growl for the notification if necessary
     dispatch('growl/notification', notification, { root: true });
+
+    return notification.id;
   },
 
   async fromGrowl( { commit, getters }: any, notification: Notification) {

package/store/prefs.js

@@ -233,13 +233,13 @@ export const getters = {
       }
       const clusterPref = getters['get'](CLUSTER);
 
-      return { name: 'c-cluster-explorer', params: { product: 'explorer', cluster: clusterPref } };
+      return { name: 'c-cluster-explorer', params: { cluster: clusterPref } };
     }
     case (!!afterLoginRoutePref.match(/.+-dashboard$/)):
     {
       const clusterId = afterLoginRoutePref.split('-dashboard')[0];
 
-      return { name: 'c-cluster-explorer', params: { product: 'explorer', cluster: clusterId } };
+      return { name: 'c-cluster-explorer', params: { cluster: clusterId } };
     }
     default:
       return { name: afterLoginRoutePref };
@@ -523,15 +523,14 @@ export const actions = {
   setBrandStyle({ rootState, rootGetters }, dark = false) {
     if (rootState.managementReady) {
       try {
-        const brandSetting = rootGetters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+        const brandSetting = rootGetters['management/brand'];
 
-        if (brandSetting && brandSetting.value && brandSetting.value !== '') {
-          const brand = brandSetting.value;
-          const brandMeta = getBrandMeta(brand);
+        if (brandSetting !== '') {
+          const brandMeta = getBrandMeta(brandSetting);
           const hasStylesheet = brandMeta.hasStylesheet === 'true';
 
           if (hasStylesheet) {
-            document.body.classList.add(brand);
+            document.body.classList.add(brandMeta);
           } else {
             // TODO option apply color at runtime
           }

package/store/type-map.js

@@ -35,6 +35,7 @@
 //   ifHave,                  -- Show this product only if the given capability is available
 //   ifHaveGroup,             -- Show this product only if the given group exists in the store [inStore]
 //   ifHaveType,              -- Show this product only if the given type exists in the store [inStore], This can also be specified as an object { type: TYPE, store: 'management' } if the type isn't in the current [inStore]
+//   ifNotHaveType,           -- Hide this product if the given type exists in the store [inStore] (opposite of ifHaveType)
 //   ifHaveVerb,              -- In combination with ifHaveTYpe, show it only if the type also has this collectionMethod
 //   inStore,                 -- Which store to look at for if* above and the left-nav, defaults to "cluster"
 //   rootProduct,             -- Optional root (parent) product - if set, used to optimize navigation when product changes stays within root product
@@ -152,6 +153,7 @@ import { haveV2Monitoring } from '@shell/utils/monitoring';
 import { NEU_VECTOR_NAMESPACE } from '@shell/config/product/neuvector';
 import { createHeaders, rowValueGetter } from '@shell/store/type-map.utils';
 import { defineAsyncComponent } from 'vue';
+import { filterLocationValidParams } from '@shell/utils/router';
 
 export const NAMESPACED = 'namespaced';
 export const CLUSTER_LEVEL = 'cluster';
@@ -238,7 +240,7 @@ export function DSL(store, product, module = 'type-map') {
       };
 
       // Convert strings to regex's - we do this once here for efficiency
-      for ( const k of ['ifHaveGroup', 'ifHaveType'] ) {
+      for ( const k of ['ifHaveGroup', 'ifHaveType', 'ifNotHaveType'] ) {
         if ( opt[k] ) {
           if (Array.isArray(opt[k])) {
             opt[k] = opt[k].map((r) => regexToString(ensureRegex(r)));
@@ -365,7 +367,7 @@ export function DSL(store, product, module = 'type-map') {
 
 let called = false;
 
-export async function applyProducts(store, $plugin) {
+export async function applyProducts(store, $extension) {
   if (called) {
     return;
   }
@@ -379,7 +381,7 @@ export async function applyProducts(store, $plugin) {
     }
   }
   // Load the products from all plugins
-  $plugin.loadProducts();
+  $extension.loadProducts();
 }
 
 export function productsLoaded() {
@@ -694,7 +696,7 @@ export const getters = {
             }
           };
 
-          typeObj.route = route;
+          typeObj.route = filterLocationValidParams(rootState.$router, route);
         }
 
         // Cluster ID and Product should always be set
@@ -711,7 +713,7 @@ export const getters = {
           exact:        typeObj.exact || false,
           'exact-path': typeObj['exact-path'] || false,
           namespaced,
-          route,
+          route:        filterLocationValidParams(rootState.$router, route),
           name:         typeObj.name,
           weight:       typeObj.weight || getters.typeWeightFor(typeObj.schema?.id || label, isBasic),
           overview:     !!typeObj.overview,
@@ -1419,6 +1421,14 @@ export const getters = {
         }
       }
 
+      if ( p.ifNotHaveType ) {
+        const haveIds = knownTypes[module].filter((t) => t.match(stringToRegex(p.ifNotHaveType)) );
+
+        if ( haveIds.length ) {
+          return false;
+        }
+      }
+
       if ( p.ifHaveGroup && !knownGroups[module].find((t) => t.match(stringToRegex(p.ifHaveGroup)) ) ) {
         return false;
       }
@@ -2026,7 +2036,7 @@ function hasCustom(state, rootState, kind, key, fallback) {
   }
 
   // Check to see if the custom kind is provided by a plugin (ignore booleans)
-  const pluginComponent = rootState.$plugin.getDynamic(kind, key);
+  const pluginComponent = rootState.$extension.getDynamic(kind, key);
 
   if (typeof pluginComponent !== 'boolean' && !!pluginComponent) {
     cache[key] = true;
@@ -2046,7 +2056,7 @@ function hasCustom(state, rootState, kind, key, fallback) {
 }
 
 function loadExtension(rootState, kind, key, fallback) {
-  const ext = rootState.$plugin.getDynamic(kind, key);
+  const ext = rootState.$extension.getDynamic(kind, key);
 
   if (ext) {
     if (typeof ext === 'function') {

package/store/wm.ts

@@ -80,11 +80,11 @@ export const mutations = {
   addTab(state: State, tab: Tab) {
     const existing = state.tabs.find((x) => x.id === tab.id);
 
-    if (!existing) {
-      if (tab.position === undefined) {
-        tab.position = (window.localStorage.getItem(STORAGE_KEY['pin']) || BOTTOM) as Position;
-      }
+    if (tab.position === undefined || tab.position as string === 'undefined') {
+      tab.position = (window.localStorage.getItem(STORAGE_KEY['pin']) || BOTTOM) as Position;
+    }
 
+    if (!existing) {
       if (state.lockedPositions.includes(BOTTOM)) {
         tab.position = BOTTOM;
       }

package/types/internal-api/shell/modal.d.ts

@@ -14,7 +14,7 @@ export interface ModalConfig {
    *
    * this.$shell.modal({
    *   component: MyCustomModal,
-   *   componentProps: { title: 'Hello Modal' }
+   *   props: { title: 'Hello Modal' }
    * });
    * ```
    */
@@ -25,10 +25,10 @@ export interface ModalConfig {
    *
    * Example:
    * ```ts
-   * componentProps: { title: 'Hello Modal', isVisible: true }
+   * props: { title: 'Hello Modal', isVisible: true }
    * ```
    */
-  componentProps?: Record<string, any>;
+  props?: Record<string, any>;
 
   /**
    * Optional array of resources that the modal component might need.
@@ -47,11 +47,11 @@ export interface ModalConfig {
    *
    * Examples:
    * ```ts
-   * modalWidth: '800px' // Width in pixels
-   * modalWidth: '75%'   // Width as a percentage
+   * width: '800px' // Width in pixels
+   * width: '75%'   // Width as a percentage
    * ```
    */
-  modalWidth?: string;
+  width?: string;
 
   /**
    * Determines if clicking outside the modal will close it. Defaults to `true`.

package/types/notifications/index.ts

@@ -4,36 +4,102 @@ import { RouteLocationRaw } from 'vue-router';
  * Type definitions for the Notification Center
  */
 
-/**
- * Notification Level for a notification in the Notification Center
- */
 export enum NotificationLevel {
+  /**
+   * An announcement. To be used when we want to inform on high-interest topics - news, updates, changes, scheduled maintenance, etc. E.g. “New version available!” <img class="svg-blue" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-announcement.svg" width="20" />
+   */
   Announcement = 0, // eslint-disable-line no-unused-vars
+  /**
+   * A task that is underway. To be used when we want to inform on a process taking place - on-going actions that might take a while. E.g. “Cluster provisioning in progress”. The progress bar will also be shown if the `progress` field is set <img class="svg-blue" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-busy.svg" width="20" />
+   */
   Task, // eslint-disable-line no-unused-vars
+  /**
+   * Information notification. To be used when we want to inform on low-interest topics. E.g. “Welcome to Rancher v2.8" <img class="svg-blue" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-info.svg"/>
+   */
   Info, // eslint-disable-line no-unused-vars
+  /**
+   * Notification that something has completed successfully. To be used when we want to confirm a successful action was completed. E.g. “Cluster provisioning completed” <img class="svg-green" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-tick.svg"/>
+   */
   Success, // eslint-disable-line no-unused-vars
+  /**
+   * Notification of a warning. To be used when we want to warn about a potential risk. E.g. “Nodes limitation warning” <img class="svg-orange" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-warning.svg"/>
+   */
   Warning, // eslint-disable-line no-unused-vars
+  /**
+   * Notification of an error. To be used when we want to alert on a confirmed risk. E.g. “Extension failed to load” <img class="svg-red" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-error.svg"/>
+   */
   Error, // eslint-disable-line no-unused-vars
   Hidden, // eslint-disable-line no-unused-vars
 }
 
 /**
- * An action that is shown as a button in the Notification Center
+ * Notification Action definition
  */
-export type NotificationAction = {
-  label: string; // Button label for the action
-  target?: string; // HREF target when the button is clicked
-  route?: RouteLocationRaw; // Route to navigate to when the button is clicked
-};
+export interface NotificationAction {
+  /**
+   * Button label for the action
+   */
+  label: string;
+  /**
+   * Href target when the button is clicked
+   */
+  target?: string;
+  /**
+   * Vue Route to navigate to when the button is clicked
+   */
+  route?: RouteLocationRaw;
+}
 
 /**
- * Defines the User Preference linked to a notification
+ * Notification Preference definition
  */
-export type NotificationPreference = {
-  key: string; // User preference key to use when setting the preference when the notification is marked as read/unread
-  value: string; // User preference value to use when setting the preference when the notification is marked as read
-  unsetValue?: string; // User preference value to use when setting the preference when the notification is marked as unread - defaults to empty string
-};
+export interface NotificationPreference {
+  /**
+   * User preference key to use when setting the preference when the notification is marked as read
+   */
+  key: string;
+  /**
+   * User preference value to use when setting the preference when the notification is marked as read
+   */
+  value: string;
+  /**
+   * User preference value to use when setting the preference when the notification is marked as unread - defaults to empty string
+   */
+  unsetValue?: string;
+}
+
+/**
+ * Configuration object for the Notification Center
+ *
+ */
+export interface NotificationConfig {
+  /**
+   * - **{@link NotificationAction}**
+   *
+   * Primary action to be shown in the notification
+   */
+  primaryAction?: NotificationAction;
+  /**
+   * - **{@link NotificationAction}**
+   *
+   * Secondary to be shown in the notification
+   */
+  secondaryAction?: NotificationAction;
+  /**
+   * Unique ID for the notification
+   */
+  id?: string;
+  /**
+   * Progress (0-100) for notifications of type `Task`
+   */
+  progress?: number;
+  /**
+   * - **{@link NotificationPreference}**
+   *
+   * User Preference tied to the notification (the preference will be updated when the notification is marked read)
+   */
+  preference?: NotificationPreference;
+}
 
 /**
  * Type for Encrypted Notification data that is stored in local storage
@@ -96,3 +162,48 @@ export interface NotificationHandler {
    */
   onReadUpdated(notification: Notification, read: boolean): void;
 }
+
+/**
+ * API for notifications in the Rancher UI Notification Center
+ * * ![notification Example](/img/notification.png)
+ */
+export interface NotificationApi {
+  /**
+   * Sends a notification to the Rancher UI Notification Center
+   *
+   * Example:
+   * ```ts
+   * import { NotificationLevel } from '@shell/types/notifications';
+   *
+   * this.$shell.notification.send(NotificationLevel.Success, 'Some notification title', 'Hello world! Success!', {})
+   * ```
+   *
+   * For usage with the Composition API check usage guide [here](../../shell-api#using-composition-api-in-vue).
+   *
+   * @param level The `level` specifies the importance of the notification and determines the icon that is shown in the notification
+   * @param title The notification title
+   * @param message The notification message to be displayed
+   * @param config Notifications configuration object
+   *
+   * @returns notification ID
+   *
+   */
+  send(level: NotificationLevel | NotificationLevel, title: string, message?:string, config?: NotificationConfig): Promise<string>;
+
+  /**
+   * Update notification progress (Only valid for notifications of type `Task`)
+   *
+   * Example:
+   * ```ts
+   * this.$shell.notification.updateProgress('some-notification-id', 80)
+   * ```
+   *
+   * For usage with the Composition API check usage guide [here](../../shell-api#using-composition-api-in-vue).
+   *
+   * @param notificationId Unique ID for the notification
+   * @param progress Progress (0-100) for notifications of type `Task`
+   *
+   */
+
+  updateProgress(notificationId: string, progress: number): void;
+}

package/types/rancher/index.d.ts

@@ -8,3 +8,12 @@ declare module '@shell/store/type-map' {
 }
 
 declare module '@shell/plugins/dashboard-store';
+
+declare module '@shell/config/query-params' {
+  export const _DETAIL: string;
+}
+
+declare module '@shell/config/version' {
+  export const CURRENT_RANCHER_VERSION: string;
+  export function getVersionData(): any;
+}

package/types/shell/index.d.ts

@@ -79,6 +79,7 @@ export namespace CATALOG {
     let _RANCHER: string;
     let _PARTNER: string;
     let _OTHER: string;
+    let PRIME_ONLY: string;
     let EXPERIMENTAL: string;
     let NAMESPACE: string;
     let RELEASE_NAME: string;
@@ -2206,6 +2207,12 @@ export namespace MANAGEMENT {
     export let CLUSTER_PROXY_CONFIG: string;
     export let OIDC_CLIENT: string;
 }
+export namespace BRAND {
+    let SUSE: string;
+    let CSP: string;
+    let FEDERAL: string;
+    let RGS: string;
+}
 export namespace EXT {
     let USER_ACTIVITY: string;
 }
@@ -2442,6 +2449,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: any;
     };
+    defaultTab: {
+        type: StringConstructor;
+        default: any;
+    };
 }>, {}, {
     errors: any[];
 }, {
@@ -2499,6 +2510,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: any;
     };
+    defaultTab: {
+        type: StringConstructor;
+        default: any;
+    };
 }>> & Readonly<{
     [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
 }>, {
@@ -2509,6 +2524,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     liveValue: Record<string, any>;
     realMode: string;
     useTabbedHash: boolean;
+    defaultTab: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 }
@@ -3239,6 +3255,7 @@ export default class Resource {
     get $state(): any;
     get $rootState(): any;
     get $plugin(): any;
+    get $extension(): any;
     get customValidationRules(): any[];
     get _key(): any;
     get schema(): any;
@@ -3315,7 +3332,7 @@ export default class Resource {
         weight: number;
         divider?: undefined;
     })[];
-    showConfiguration(returnFocusSelector: any): void;
+    showConfiguration(returnFocusSelector: any, defaultTab: any): void;
     get _availableActions(): ({
         action: string;
         label: any;
@@ -3633,6 +3650,26 @@ export default class Resource {
 }
 }
 
+// @shell/plugins/i18n
+
+declare module '@shell/plugins/i18n' {
+/**
+ * @param {import('vuex').Store<any>} store
+ * @param {string} key
+ * @param {Record<string, any>} [args]
+ * @param {boolean} [raw]
+ * @param {boolean} [escapehtml]
+ * @returns {string}
+ */
+export function stringFor(store: import("vuex").Store<any>, key: string, args?: Record<string, any>, raw?: boolean, escapehtml?: boolean): string;
+export function directiveSsr(vnode: any, binding: any): void;
+export default i18n;
+declare namespace i18n {
+    let name: string;
+    function install(vueApp: any, _options: any): void;
+}
+}
+
 // @shell/plugins/steve/hybrid-class
 
 declare module '@shell/plugins/steve/hybrid-class' {
@@ -4012,7 +4049,7 @@ export function filterHiddenLocalCluster(mgmtClusters: any, store: any): any;
 export function abbreviateClusterName(input: string): string;
 export function labelForAddon(store: any, name: any, configuration?: boolean): any;
 export function filterOutDeprecatedPatchVersions(allVersions: any, currentVersion: any): any;
-export function getAllOptionsAfterCurrentVersion(store: any, versions: any, currentVersion: any, defaultVersion: any): any;
+export function getAllOptionsAfterCurrentVersion(store: any, versions: any, currentVersion: any, defaultVersion: any, manual?: boolean): any;
 export function initSchedulingCustomization(value: any, features: any, store: any, mode: any): Promise<{
     clusterAgentDefaultPC: any;
     clusterAgentDefaultPDB: any;
@@ -4083,7 +4120,7 @@ export function contrastColor(color: any, contrastOptions?: {
     dark: string;
     light: string;
 }): string;
-export function parseColor(str: any): any;
+export function parseColor(str: any): import("color").ColorInstance;
 export function textColor(color: any): "black" | "white";
 export function hexToRgb(hex: any): {
     r: number;
@@ -4760,6 +4797,20 @@ export function queryParamsFor(current: any, qp: any, defaults?: {}): any;
 export function getClusterFromRoute(to: any): any;
 export function getProductFromRoute(to: any): any;
 export function findMeta(route: any, key: any): any;
+/**
+ * Find a route definition given a routeName
+ * @param {*} router VueRouter instance
+ * @param {*} routeName the name we want to look up
+ * @returns the route definition or undefined if it wasn't found
+ */
+export function findRouteDefinitionByName(router: any, routeName: any): any;
+/**
+ * Looks for the route definition and then ensures there's only valid params
+ * @param {*} router VueRouter instance
+ * @param {*} routeRecord an object conforming to the Route Record interface
+ * @returns the passed in routeLocation with only valid params.
+ */
+export function filterLocationValidParams(router: any, routeRecord: any): any;
 export function getPackageFromRoute(route: any): any;
 export function getResourceFromRoute(to: any): any;
 export function routeMatched(to: any, fn: any): boolean;