@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.12

package/store/wm.ts

@@ -0,0 +1,244 @@
+import { STORAGE_KEY } from '@shell/components/nav/WindowManager/constants';
+import { Layout, Position, Tab } from '@shell/types/window-manager';
+import { addObject, removeObject } from '@shell/utils/array';
+import { BOTTOM, LEFT, RIGHT } from '@shell/utils/position';
+
+/**
+ * This module defines the Vuex store for the window manager, managing tabs, their positions,
+ * active states, panel dimensions, and user preferences.
+ *
+ * The store can be used to add, switch, and close tabs, as well as manage panel dimensions and locked positions.
+ * The store can be accessed also by Rancher extensions to integrate to handle the window manager.
+ */
+export interface State {
+  tabs: Array<Tab>;
+  active: Record<Position | string, string>;
+  open: Record<Position | string, boolean>;
+  panelHeight: Record<Position | string, number | null>;
+  panelWidth: Record<Position | string, number | null>;
+  userPin: Position | string | null;
+  lockedPositions: Position[];
+}
+
+function moveTabByReference(tabs: Tab[], fromPosition: Position | undefined, toPosition: Position, tabId: string) {
+  const idx = tabs.findIndex((t) => t.id === tabId && t.position === fromPosition);
+
+  if (idx === -1) return;
+  const [tab] = tabs.splice(idx, 1);
+
+  tab.position = toPosition;
+
+  tabs.push(tab);
+}
+
+export const state = function() {
+  return {
+    tabs:        [],
+    active:      {},
+    open:        {},
+    panelHeight: { [BOTTOM]: window.localStorage.getItem(STORAGE_KEY[BOTTOM]) },
+    panelWidth:  {
+      [LEFT]:  window.localStorage.getItem(STORAGE_KEY[LEFT]),
+      [RIGHT]: window.localStorage.getItem(STORAGE_KEY[RIGHT]),
+    },
+    userPin:         null,
+    lockedPositions: [],
+  };
+};
+
+export const getters = {
+  byId:            (state: State) => (id: string) => state.tabs.find((x) => x.id === id),
+  tabs:            (state: State) => state.tabs,
+  isOpen:          (state: State) => (position: string) => state.open[position],
+  panelWidth:      (state: State) => state.panelWidth,
+  panelHeight:     (state: State) => state.panelHeight,
+  userPin:         (state: State) => state.userPin,
+  lockedPositions: (state: State) => state.lockedPositions,
+};
+
+export const mutations = {
+  /**
+   * Adds a new tab to the window manager.
+   *
+   * Usage:
+   *
+   * store.dispatch('wm/open', {
+   *   id:            PRODUCT_NAME,
+   *   extensionId:   PRODUCT_NAME,
+   *   label:         'Label',
+   *   component:     'LabelComponent',
+   *   position:      'bottom',
+   *   layouts:       [
+   *     Layout.default,
+   *     Layout.home
+   *   ],
+   *   showHeader: false,
+   * }, { root: true });
+   *
+   * This will add a new tab with the specified properties to the window manager and set it as active.
+   */
+  addTab(state: State, tab: Tab) {
+    const existing = state.tabs.find((x) => x.id === tab.id);
+
+    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;
+      }
+
+      if (tab.layouts === undefined) {
+        tab.layouts = [Layout.default];
+      }
+
+      if (tab.showHeader === undefined) {
+        tab.showHeader = true;
+      }
+
+      addObject(state.tabs, tab);
+    }
+
+    state.active[tab.position] = tab.id;
+    state.open = { ...state.open, [tab.position]: true };
+
+    state.userPin = tab.position;
+    window.localStorage.setItem(STORAGE_KEY['pin'], tab.position);
+  },
+
+  /**
+   * Switches a tab to a different position within the window manager.
+   *
+   * Usage:
+   * store.commit('wm/switchTab', { tabId: 'tab1', targetPosition: LEFT });
+   *
+   * This will move the tab with ID 'tab1' to the LEFT position and update the active tab accordingly.
+   */
+  switchTab(state: State, { tabId, targetPosition }: { tabId: string, targetPosition: Position }) {
+    const current = { ...(state.tabs.find((x) => x.id === tabId) || {}) };
+
+    if (current) {
+      moveTabByReference(state.tabs, current.position, targetPosition, tabId);
+
+      state.active[targetPosition] = tabId;
+      state.open = { ...state.open, [targetPosition]: true };
+
+      if (current.position !== targetPosition) {
+        const oldPositionTabs = state.tabs.filter((t) => t.position === current.position);
+
+        if (current.position) {
+          state.active[current.position] = oldPositionTabs[0]?.id || '';
+          state.open[current.position] = oldPositionTabs.length > 0;
+        }
+      }
+    }
+
+    state.userPin = targetPosition;
+    window.localStorage.setItem(STORAGE_KEY['pin'], targetPosition);
+  },
+
+  closeTab(state: State, { id }: { id: string }) {
+    const tab = state.tabs.find((x) => x.id === id);
+
+    if ( !tab ) {
+      return;
+    }
+
+    let idx = state.tabs.indexOf(tab);
+
+    removeObject(state.tabs, tab);
+    if ( idx >= state.tabs.length ) {
+      idx = state.tabs.length - 1;
+    }
+
+    if ( idx >= 0 ) {
+      state.active[tab.position] = state.tabs[idx].id;
+    } else {
+      state.open[tab.position] = false;
+    }
+
+    const oldPositionTabs = state.tabs.filter((t) => t.position === tab.position);
+
+    if (tab.position) {
+      state.active[tab.position] = oldPositionTabs[0]?.id || '';
+      state.open[tab.position] = oldPositionTabs.length > 0;
+    }
+  },
+
+  removeTab(state: State, tab: Tab) {
+    removeObject(state.tabs, tab);
+  },
+
+  setOpen(state: State, { position, open }: { position: string, open: boolean }) {
+    state.open = { ...state.open, [position]: open };
+  },
+
+  setActive(state: State, { position, id }: { position: string, id: string }) {
+    state.active[position] = id;
+  },
+
+  setPanelHeight(state: State, { position, height }: { position: string, height: number | null }) {
+    state.panelHeight[position] = height;
+    window.localStorage.setItem(STORAGE_KEY[BOTTOM], `${ height }`);
+
+    for (const tab of state.tabs) {
+      if (tab.position === position) {
+        tab.containerHeight = height;
+      }
+    }
+  },
+
+  setPanelWidth(state: State, { position, width }: { position: Position, width: number | null }) {
+    state.panelWidth[position] = width;
+    window.localStorage.setItem(STORAGE_KEY[position as keyof typeof STORAGE_KEY], `${ width }`);
+
+    for (const tab of state.tabs) {
+      if (tab.position === position) {
+        tab.containerWidth = width;
+      }
+    }
+  },
+
+  /**
+   * Sets the user's preferred pin position for tabs in the window manager.
+   *
+   * Usage:
+   * store.commit('wm/setUserPin', LEFT);
+   *
+   * This will set the user's preferred pin position to LEFT and store it in local storage.
+   */
+  setUserPin(state: State, pin: string) {
+    state.userPin = pin;
+    window.localStorage.setItem(STORAGE_KEY['pin'], pin);
+  },
+
+  /**
+   * Sets the locked positions for tabs in the window manager.
+   *
+   * Usage:
+   * store.commit('wm/setLockedPositions', [LEFT, RIGHT]);
+   *
+   * This will lock tabs to the specified positions, preventing them from being moved elsewhere.
+   */
+  setLockedPositions(state: State, positions: Position[]) {
+    state.lockedPositions = positions;
+  }
+};
+
+export const actions = {
+  close({ commit }: { state: State, getters: any, commit: any }, id: string) {
+    if ( !id ) {
+      throw new Error('[wm] id is not provided');
+    }
+    commit('closeTab', { id });
+  },
+
+  open({ commit }: { commit: any }, tab: Tab) {
+    if ( !tab.id ) {
+      throw new Error('[wm] id is not provided');
+    }
+
+    commit('addTab', tab);
+  }
+};

package/types/notifications/index.ts

@@ -14,6 +14,7 @@ export enum NotificationLevel {
   Success, // eslint-disable-line no-unused-vars
   Warning, // eslint-disable-line no-unused-vars
   Error, // eslint-disable-line no-unused-vars
+  Hidden, // eslint-disable-line no-unused-vars
 }
 
 /**
@@ -29,7 +30,7 @@ export type NotificationAction = {
  * Defines the User Preference linked to a notification
  */
 export type NotificationPreference = {
-  key: string; // User preference key to use when setting the preference when the notification is marked as read
+  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
 };
@@ -47,6 +48,13 @@ export type EncryptedNotification = {
   primaryAction?: NotificationAction;
   // Secondary to be shown in the notification (optional)
   secondaryAction?: NotificationAction;
+  // User Preference tied to the notification (optional) (the preference will be updated when the notification is marked read)
+  preference?: NotificationPreference;
+  // Handler to be associated with this notification that can invoke additional behaviour when the notification changes
+  // This is the name of the handler (the handlers are added as extensions). Notifications are persisted in the store, so can't use functions.
+  handlerName?: string;
+  // Additional data to be stored with the notification (optional)
+  data?: any;
 };
 
 /**
@@ -57,8 +65,6 @@ export type Notification = {
   id: string;
   // Progress (0-100) for notifications of type `Task` (optional)
   progress?: number;
-  // User Preference tied to the notification (optional) (the preference will be updated when the notification is marked read)
-  preference?: NotificationPreference;
 } & EncryptedNotification;
 
 /**
@@ -72,3 +78,21 @@ export type StoredNotification = {
   created: Date;
   read: Boolean;
 } & Notification;
+
+/**
+ * Name to use when registering a custom notification handler
+ */
+export const NotificationHandlerExtensionName = 'notification-handler';
+
+/**
+ * Interface for notification handler
+ */
+export interface NotificationHandler {
+  /**
+   * Called when a notification with this handler has its read status is updated (read or unread)
+   *
+   * @param notification Notification that was marked read or unread
+   * @param read Indicates whether the notification was updated to be read or unread
+   */
+  onReadUpdated(notification: Notification, read: boolean): void;
+}

package/types/shell/index.d.ts

@@ -70,12 +70,16 @@ export namespace CAPI {
     let SECRET_AUTH: string;
     let SECRET_WILL_DELETE: string;
     let UI_CUSTOM_PROVIDER: string;
+    let AUTOSCALER_CLUSTER_PAUSE: string;
+    let AUTOSCALER_MACHINE_POOL_MIN_SIZE: string;
+    let AUTOSCALER_MACHINE_POOL_MAX_SIZE: string;
 }
 export namespace CATALOG {
     let CERTIFIED: string;
     let _RANCHER: string;
     let _PARTNER: string;
     let _OTHER: string;
+    let PRIME_ONLY: string;
     let EXPERIMENTAL: string;
     let NAMESPACE: string;
     let RELEASE_NAME: string;
@@ -2000,6 +2004,18 @@ export namespace PROJECT {
     let labelKey_124: string;
     export { labelKey_124 as labelKey };
 }
+export namespace AUTOSCALER_ENABLED {
+    let name_128: string;
+    export { name_128 as name };
+    let labelKey_125: string;
+    export { labelKey_125 as labelKey };
+    let value_127: string;
+    export { value_127 as value };
+    let sort_116: string[];
+    export { sort_116 as sort };
+    let formatter_71: string;
+    export { formatter_71 as formatter };
+}
 }
 
 // @shell/config/types
@@ -2191,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;
 }
@@ -2322,6 +2344,8 @@ export const ZERO_TIME: "0001-01-01T00:00:00Z";
 export const DEFAULT_GRAFANA_STORAGE_SIZE: "10Gi";
 export const DEPRECATED: "Deprecated";
 export const EXPERIMENTAL: "Experimental";
+export const AUTOSCALER_CONFIG_MAP_ID: "kube-system/cluster-autoscaler-status";
+export const HOSTED_PROVIDER: "hostedprovider";
 }
 
 // @shell/config/version
@@ -2336,7 +2360,7 @@ export function getVersionData(): {
 export function setVersionData(v: any): void;
 export function getKubeVersionData(): {};
 export function setKubeVersionData(v: any): void;
-export const CURRENT_RANCHER_VERSION: "2.12";
+export const CURRENT_RANCHER_VERSION: "2.13";
 }
 
 // @shell/mixins/components/ResourceList/resource-list.config
@@ -2425,6 +2449,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: any;
     };
+    defaultTab: {
+        type: StringConstructor;
+        default: any;
+    };
 }>, {}, {
     errors: any[];
 }, {
@@ -2482,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;
 }>, {
@@ -2492,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;
 }
@@ -3222,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;
@@ -3298,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;
@@ -3616,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' {
@@ -3676,6 +3730,7 @@ export const UIEXTENSION: any;
 export const PROVISIONING_PRE_BOOTSTRAP: any;
 export const SCHEDULING_CUSTOMIZATION: any;
 export const SCC: any;
+export const AUTOSCALER: any;
 export namespace getters {
     function get(state: any, getters: any, rootState: any, rootGetters: any): (name: any) => any;
 }
@@ -3762,6 +3817,7 @@ export const SCALE_POOL_PROMPT: any;
 export const READ_NEW_RELEASE: any;
 export const READ_SUPPORT_NOTICE: any;
 export const READ_UPCOMING_SUPPORT_NOTICE: any;
+export const READ_ANNOUNCEMENTS: any;
 export function state(): {
     cookiesLoaded: boolean;
     data: {};
@@ -3931,6 +3987,19 @@ export function getIndividualBanners(store: any): {};
 export function overlayIndividualBanners(parsedBanner: any, banners: any): void;
 }
 
+// @shell/utils/chart
+
+declare module '@shell/utils/chart' {
+/**
+ * Get the latest chart version that is compatible with the cluster's OS and user's pre-release preference.
+ * @param {Object} chart - The chart object.
+ * @param {Array<string>} workerOSs - The list of worker OSs for the cluster.
+ * @param {boolean} showPrerelease - Whether to include pre-release versions.
+ * @returns {Object} The latest compatible chart version object.
+ */
+export function getLatestCompatibleVersion(chart: any, workerOSs: Array<string>, showPrerelease: boolean): any;
+}
+
 // @shell/utils/clipboard
 
 declare module '@shell/utils/clipboard' {
@@ -4051,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;
@@ -4495,7 +4564,7 @@ export function isEmpty(obj: any): boolean;
 export function isSimpleKeyValue(obj: any): boolean;
 export function cleanUp(obj: any): any;
 export function definedKeys(obj: any): any;
-export function diff(from: any, to: any): any;
+export function diff(from: any, to: any, preventNull?: boolean): any;
 export function changeset(from: any, to: any, parentPath?: any[]): {};
 export function changesetConflicts(a: any, b: any): any[];
 export function applyChangeset(obj: any, changeset: any): any;
@@ -4735,6 +4804,12 @@ export function routeRequiresAuthentication(to: any): boolean;
 export function routeRequiresInstallRedirect(to: any): boolean;
 }
 
+// @shell/utils/scroll
+
+declare module '@shell/utils/scroll' {
+export function scrollToBottom(): void;
+}
+
 // @shell/utils/select
 
 declare module '@shell/utils/select' {
@@ -5219,6 +5294,7 @@ export function parse(str: any): any;
 export function sortable(str: any): any;
 export function compare(in1: any, in2: any): any;
 export function isPrerelease(version?: string): boolean;
+export function isUpgradeFromPreToStable(currentVersion: any, targetVersion: any): any;
 export function isDevBuild(version: any): boolean;
 export function getVersionInfo(store: any): {
     displayVersion: any;

package/types/store/__tests__/pagination.types.spec.ts

@@ -0,0 +1,137 @@
+import { PaginationFilterEquality, PaginationFilterField } from '@shell/types/store/pagination.types';
+
+describe('pagination-types', () => {
+  describe('class: PaginationFilterField', () => {
+    describe('constructor', () => {
+      it('should set properties correctly with default values', () => {
+        const field = 'testField';
+        const value = 'testValue';
+        const filterField = new PaginationFilterField({ field, value });
+
+        expect(filterField.field).toBe(field);
+        expect(filterField.value).toBe(value);
+        expect(filterField.equals).toBe(true);
+        expect(filterField.exact).toBe(true);
+        expect(filterField.exists).toBe(false);
+        expect(filterField.equality).toBe(PaginationFilterEquality.EQUALS);
+      });
+
+      it('should handle deprecated `equals` and `exact` to set `equality`', () => {
+      // equals: true, exact: true
+        let ff = new PaginationFilterField({
+          field: 'f', value: 'v', equals: true, exact: true
+        });
+
+        expect(ff.equality).toBe(PaginationFilterEquality.EQUALS);
+
+        // equals: true, exact: false
+        ff = new PaginationFilterField({
+          field: 'f', value: 'v', equals: true, exact: false
+        });
+        expect(ff.equality).toBe(PaginationFilterEquality.CONTAINS);
+
+        // equals: false, exact: true
+        ff = new PaginationFilterField({
+          field: 'f', value: 'v', equals: false, exact: true
+        });
+        expect(ff.equality).toBe(PaginationFilterEquality.NOT_EQUALS);
+
+        // equals: false, exact: false
+        ff = new PaginationFilterField({
+          field: 'f', value: 'v', equals: false, exact: false
+        });
+        expect(ff.equality).toBe(PaginationFilterEquality.NOT_CONTAINS);
+      });
+
+      it('should prioritize `equality` over `equals` and `exact`', () => {
+        const filterField = new PaginationFilterField({
+          field:    'f',
+          value:    'v',
+          equals:   false,
+          exact:    false,
+          equality: PaginationFilterEquality.GREATER_THAN
+        });
+
+        expect(filterField.equality).toBe(PaginationFilterEquality.GREATER_THAN);
+      });
+
+      it('should throw an error if no equality can be determined', () => {
+        expect(() => new PaginationFilterField({
+          field:  'f',
+          value:  'v',
+          equals: null,
+          exact:  null
+        })).toThrow('A pagination filter must have either equals or equality set');
+      });
+
+      it('should set `exists` property', () => {
+        const filterField = new PaginationFilterField({ field: 'f', exists: true });
+
+        expect(filterField.exists).toBe(true);
+      });
+    });
+
+    describe('safeEquality', () => {
+      it('should return EQUALS for equals=true, exact=true', () => {
+        const equality = PaginationFilterField.safeEquality({ equals: true, exact: true });
+
+        expect(equality).toBe(PaginationFilterEquality.EQUALS);
+      });
+
+      it('should return CONTAINS for equals=true, exact=false', () => {
+        const equality = PaginationFilterField.safeEquality({ equals: true, exact: false });
+
+        expect(equality).toBe(PaginationFilterEquality.CONTAINS);
+      });
+
+      it('should return NOT_EQUALS for equals=false, exact=true', () => {
+        const equality = PaginationFilterField.safeEquality({ equals: false, exact: true });
+
+        expect(equality).toBe(PaginationFilterEquality.NOT_EQUALS);
+      });
+
+      it('should return NOT_CONTAINS for equals=false, exact=false', () => {
+        const equality = PaginationFilterField.safeEquality({ equals: false, exact: false });
+
+        expect(equality).toBe(PaginationFilterEquality.NOT_CONTAINS);
+      });
+
+      it('should return equality if it is provided', () => {
+        const equality = PaginationFilterField.safeEquality({ equality: PaginationFilterEquality.IN });
+
+        expect(equality).toBe(PaginationFilterEquality.IN);
+      });
+
+      it('should prioritize equality over equals/exact', () => {
+        const equality = PaginationFilterField.safeEquality({
+          equals:   true,
+          exact:    false,
+          equality: PaginationFilterEquality.LESS_THAN
+        });
+
+        expect(equality).toBe(PaginationFilterEquality.LESS_THAN);
+      });
+
+      it('should return undefined if no equality can be determined', () => {
+        const equality = PaginationFilterField.safeEquality({});
+
+        expect(equality).toBeUndefined();
+      });
+
+      it('should work with an instance of PaginationFilterField', () => {
+        const ff = new PaginationFilterField({
+          field:    'f',
+          value:    'v',
+          equals:   false,
+          exact:    false,
+          equality: PaginationFilterEquality.GREATER_THAN
+        });
+
+        // safeEquality will prioritize the `equality` property on the instance
+        const equality = PaginationFilterField.safeEquality(ff);
+
+        expect(equality).toBe(PaginationFilterEquality.GREATER_THAN);
+      });
+    });
+  });
+});