@rancher/shell 3.0.8-rc.9 → 3.0.9-rc.1

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 };

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/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

@@ -3255,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;
@@ -4048,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;
@@ -4796,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;

package/types/store/dashboard-store.types.ts

@@ -48,11 +48,6 @@ export interface ActionFindAllArgs extends ActionCoreFindArgs {
   depaginate?: boolean,
 }
 
-export interface ActionFindPageTransientResult<T> {
-  pagination: StorePagination,
-  data: T[],
-}
-
 /**
  * Args used for findPage action
  */
@@ -81,19 +76,46 @@ export interface ActionFindPageArgs extends ActionCoreFindArgs {
    * If true don't persist the http response to the store, just pass it back
    */
   transient?: boolean,
+  /**
+   * The target minimum revision for the resource.
+   *
+   * If this is higher than the latest revision known to rancher then an error will be returned
+   */
+  revision?: string
 }
 
-export type ActionFindPageResponse<T = any> = {
+/**
+ * Response to a transient (not stored in cache) findPage action
+ */
+export type ActionFindPageTransientResponse<T = any> = {
   data: T[],
   pagination?: StorePagination
-} | T[];
+};
+
+/**
+ * Response to the findPage action
+ *
+ * If the request was transient (not stored in cache) this will be an object contain all the details of the request
+ *
+ * If the request was not transient this will just be the array of resources
+ */
+export type ActionFindPageResponse<T = any> = ActionFindPageTransientResponse | T[];
 
+/**
+ * Args used for findPage action
+ */
 export interface ActionFindMatchingArgs extends ActionCoreFindArgs {
   labelSelector: KubeLabelSelector,
   namespaced?: string,
   depaginate?: boolean
 }
 
+/**
+ * Response to the findMatching action
+ */
 export type ActionFindMatchingResponse<T = any> = ActionFindPageResponse<T>
 
+/**
+ * Args used for findLabelSelector action
+ */
 export type ActionFindLabelSelectorArgs = ActionFindPageArgs | ActionFindMatchingArgs;

package/types/vue-shim.d.ts

@@ -1,7 +1,9 @@
 /* eslint-disable */
-import type ShellApi from '@shell/plugins/internal-api/shell/shell.api';
 import { VuexStore } from '@shell/types/store/vuex';
 
+// Include the types for the APIs
+/// <reference path="../apis/vue-shim.d.ts" />
+
 export {};
 
 declare module 'vue' {
@@ -14,7 +16,6 @@ declare module 'vue' {
       (key: string, args?: Record<string, any>, raw?: boolean): string;
       (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
     },
-    $store: VuexStore,
-    $shell: ShellApi,
+    $store: VuexStore
   }
-}
+}