@rancher/shell 3.0.7 → 3.0.8-rc.2

package/store/ui-context.ts

@@ -0,0 +1,86 @@
+interface Context {
+  tag: string;
+  value: any;
+  hookId?: string;
+  description?: string;
+  icon?: string;
+}
+
+interface Element {
+  id: number;
+  context: Context
+}
+
+interface State {
+  idCounter: number;
+  elements: Record<string, Element>;
+}
+
+export const state = function(): State {
+  return {
+    idCounter: 0,
+    elements:  {}
+  };
+};
+
+export const getters = {
+  all: (state: State) => {
+    return Object.values(state.elements)
+      .map((e) => e.context)
+      .sort((a, b) => (a.tag || '').localeCompare(b.tag || '') || 0);
+  },
+};
+
+export const mutations = {
+  add(state: State, element: Element) {
+    state.elements[element.id] = element;
+  },
+
+  update(state: State, element: Element) {
+    const existingElement = state.elements[element.id];
+
+    if (existingElement) {
+      existingElement.context = element.context;
+    }
+  },
+
+  remove(state: State, element: Element) {
+    delete state.elements[element.id];
+  }
+};
+
+let id = null;
+
+export const actions = {
+  add({ commit, state }: { commit: Function, state: State }, context: Context) {
+    if (context?.value === undefined || !context?.tag) {
+      throw new Error(`[ui-context] context {{${ JSON.stringify(context) }}} is not valid`);
+    }
+
+    id = `ctx-${ state.idCounter++ }`;
+
+    commit('add', { id, context });
+
+    return id;
+  },
+
+  update({ commit, state }: { commit: Function, state: State }, element: Element) {
+    const old = state.elements[element.id];
+
+    if (!old) {
+      throw new Error(`[ui-context] element with id {{${ element.id }}} not found`);
+    }
+
+    commit('update', element);
+  },
+
+  remove({ commit, state }: { commit: Function, state: State }, id: number) {
+    const element = state.elements[id];
+
+    if (!element) {
+      throw new Error(`[ui-context] element with id {{${ id }}} not found`);
+    }
+
+    commit('remove', element);
+  }
+};

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 (!existing) {
+      if (tab.position === undefined) {
+        tab.position = (window.localStorage.getItem(STORAGE_KEY['pin']) || BOTTOM) as Position;
+      }
+
+      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/kube/kube-api.ts

@@ -30,5 +30,6 @@ export interface KubeMetadata {
 }
 
 export interface RancherKubeMetadata extends KubeMetadata {
-  namespace: string,
+  namespace?: string,
+  name: string
 }

package/types/rancher/index.d.ts

@@ -4,6 +4,7 @@ declare module '@rancher/auto-import' {
 
 declare module '@shell/store/type-map' {
   export function DSL(store: any, name: string): any;
+  export function isAdminUser(getters: any): boolean;
 }
 
 declare module '@shell/plugins/dashboard-store';

package/types/resources/settings.d.ts

@@ -20,14 +20,39 @@ export interface PaginationSettingsStore {
   }
 }
 
-/**
+/*
  * Determine which resources can utilise server-side pagination
  */
 export interface PaginationSettingsStores {
   [store: string]: PaginationSettingsStore
 }
 
-export type PaginationFeature = 'listAutoRefreshToggle' | 'listManualRefresh'
+/**
+ * Names of pagination features used in pagination settings (not featureflags)
+ */
+export type PaginationFeatureName = 'listAutoRefreshToggle' | 'listManualRefresh' | 'homePageCluster'
+
+export type PaginationFeatureHomePageClusterConfig = {
+  threshold: number,
+  results: number,
+  pagesPerRow: number
+}
+
+/**
+ * Details of a specific pagination feature
+ */
+export type PaginationFeature<Config = any> = {
+  version: number,
+  enabled: boolean,
+  configuration?: Config,
+}
+
+/**
+ * List of specific features that can be enabled / disabled
+ */
+export type PaginationSettingsFeatures = {
+  [key in PaginationFeatureName]?: PaginationFeature
+}
 
 /**
  * Settings to handle server side pagination
@@ -45,11 +70,7 @@ export interface PaginationSettings {
   /**
    * List of specific features that can be enabled / disabled
    */
-  features?: {
-    [key in PaginationFeature]: {
-      enabled: boolean,
-    }
-  },
+  features?: PaginationSettingsFeatures,
 
   /**
    * Debounce the amount of time between a resource changing and the backend sending a resource.changes message
@@ -82,6 +103,7 @@ type ManagedFields = {
   time: string;
 };
 
+// Note - this should now be @RancherKubeMetadata
 type Metadata = {
   creationTimestamp: string;
   fields: string[];

package/types/shell/index.d.ts

@@ -174,6 +174,7 @@ export const STEP: "step";
 export const LOGGED_OUT: "logged-out";
 export const IS_SSO: "is-sso";
 export const IS_SLO: "is-slo";
+export const IS_SESSION_IDLE: "is-session-idle";
 export const UPGRADED: "upgraded";
 export const TIMED_OUT: "timed-out";
 export const AUTH_TEST: "test";
@@ -2190,6 +2191,9 @@ export namespace MANAGEMENT {
     export let CLUSTER_PROXY_CONFIG: string;
     export let OIDC_CLIENT: string;
 }
+export namespace EXT {
+    let USER_ACTIVITY: string;
+}
 export namespace CAPI {
     let CAPI_CLUSTER: string;
     let MACHINE_DEPLOYMENT: string;
@@ -3671,6 +3675,7 @@ export const STEVE_CACHE: any;
 export const UIEXTENSION: any;
 export const PROVISIONING_PRE_BOOTSTRAP: any;
 export const SCHEDULING_CUSTOMIZATION: any;
+export const SCC: any;
 export namespace getters {
     function get(state: any, getters: any, rootState: any, rootGetters: any): (name: any) => any;
 }
@@ -3754,6 +3759,9 @@ export const _RKE2: "rke2";
 export const PROVISIONER: any;
 export const MENU_MAX_CLUSTERS: 10;
 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 function state(): {
     cookiesLoaded: boolean;
     data: {};
@@ -3980,6 +3988,57 @@ export function initSchedulingCustomization(value: any, features: any, store: an
     schedulingCustomizationOriginallyEnabled: boolean;
     errors: any[];
 }>;
+/**
+ * Recursively filters a `diffs` object to only include differences that are relevant to the user.
+ * A difference is considered relevant if the user has provided a custom value for that specific field.
+ *
+ * @param {object} diffs - The object representing the differences between two chart versions' default values.
+ * @param {object} userVals - The object containing the user's custom values.
+ * @returns {object} A new object containing only the relevant differences.
+ */
+export function _addonConfigPreserveFilter(diffs: object, userVals: object): object;
+/**
+ * @typedef {object} AddonPreserveContext
+ * @property {object} addonConfigDiffs - An object that stores the diffs.
+ * @property {string[]} addonNames - An array of addon names to check.
+ * @property {object} $store - The Vuex store.
+ * @property {object} userChartValues - The user's customized chart values.
+ *
+ * When the Kubernetes version is changed, this method is called to handle the add-on configurations
+ * for all enabled addons. It checks if an addon's version has changed and, if so, determines if the
+ * user's custom configurations should be preserved for the new version.
+ *
+ * The goal is to avoid showing a confirmation dialog for changes in default values that the user has not customized.
+ *
+ * @param {AddonPreserveContext} context The context object from the component.
+ * @param {object} oldCharts The charts object from the K8s release object being changed from.
+ * @param {object} newCharts The charts object from the K8s release object being changed to.
+ */
+export function addonConfigPreserve(context: AddonPreserveContext, oldCharts: object, newCharts: object): Promise<void>;
+export type AddonPreserveContext = {
+    /**
+     * - An object that stores the diffs.
+     */
+    addonConfigDiffs: object;
+    /**
+     * - An array of addon names to check.
+     */
+    addonNames: string[];
+    /**
+     * - The Vuex store.
+     */
+    $store: object;
+    /**
+     * - The user's customized chart values.
+     *
+     * When the Kubernetes version is changed, this method is called to handle the add-on configurations
+     * for all enabled addons. It checks if an addon's version has changed and, if so, determines if the
+     * user's custom configurations should be preserved for the new version.
+     *
+     * The goal is to avoid showing a confirmation dialog for changes in default values that the user has not customized.
+     */
+    userChartValues: object;
+};
 }
 
 // @shell/utils/color

package/types/window-manager.ts

@@ -0,0 +1,22 @@
+import { BOTTOM, CENTER, LEFT, RIGHT } from '@shell/utils/position';
+
+export const enum Layout {
+  default = 'default', // eslint-disable-line no-unused-vars
+  home = 'home', // eslint-disable-line no-unused-vars
+}
+
+export type Position = typeof BOTTOM | typeof LEFT | typeof RIGHT | typeof CENTER;
+
+export interface Tab {
+  id: string,
+  icon: string,
+  label: string,
+  component?: string,
+  extensionId?: string,
+  position: Position,
+  layouts: Layout[],
+  showHeader: boolean,
+  containerHeight: number | null,
+  containerWidth: number | null,
+  attrs?: Record<string, any>,
+}