Add simple API for adding a settings page

rancher · Feb 21, 2025 · a238149 · a238149
1 parent d669a7c
commit a238149
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 5 deletions.
diff --git a/shell/core/plugin.ts b/shell/core/plugin.ts
@@ -15,7 +15,8 @@ import {
   TabLocation,
   ModelExtensionConstructor,
   PluginRouteRecordRaw, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut,
-  ExtensionEnvironment
+  ExtensionEnvironment,
+  SettingsPage,
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import { defineAsyncComponent, markRaw, Component } from 'vue';
@@ -29,14 +30,16 @@ export const EXT_IDS = {
 
 export type ProductFunction = (plugin: IPlugin, store: any) => void;
 
+export type ProductModule = { init: ProductFunction };
+
 export class Plugin implements IPlugin {
   public id: string;
   public name: string;
   public types: any = {};
   public l10n: { [key: string]: Function[] } = {};
   public modelExtensions: { [key: string]: Function[] } = {};
   public locales: { locale: string, label: string}[] = [];
-  public products: ProductFunction[] = [];
+  public products: Promise<ProductModule>[] = [];
   public productNames: string[] = [];
   public routes: { parent?: string, route: RouteRecordRaw }[] = [];
   public stores: { storeName: string, register: RegisterStore, unregister: UnregisterStore }[] = [];
@@ -108,8 +111,14 @@ export class Plugin implements IPlugin {
     return storeDSL;
   }
 
-  addProduct(product: ProductFunction): void {
-    this.products.push(product);
+  addProduct(product: ProductFunction | Promise<ProductModule>): void {
+    if (typeof product === 'function') {
+      this.products.push(new Promise<ProductModule>((resolve) => {
+        resolve({ init: product as ProductFunction });
+      }));
+    } else {
+      this.products.push(product as Promise<ProductModule>);
+    }
   }
 
   addLocale(locale: string, label: string): void {
@@ -259,6 +268,41 @@ export class Plugin implements IPlugin {
     });
   }
 
+  /**
+   * Add a settings page to Global Settings
+   */
+  addSettingsPage(settings: SettingsPage) {
+    if (settings.name && settings.labelKey && settings.component) {
+      const name = settings.name.replaceAll('-', '_');
+      const routeName = `c-cluster-settings-${ name }`;
+
+      this.addRoute({
+        name:      routeName,
+        path:      `/c/:cluster/settings/${ name }`,
+        component: settings.component,
+      });
+
+      const updateSettingProduct = function init($plugin: IPlugin, store: any) {
+        const {
+          virtualType,
+          basicType
+        } = $plugin.DSL(store, 'settings');
+
+        virtualType({
+          name:     settings.name,
+          labelKey: settings.labelKey,
+          route:    { name: routeName },
+        });
+
+        basicType([settings.name]);
+      };
+
+      this.addProduct(updateSettingProduct);
+    } else {
+      console.error('Incomplete settings page configuration', settings); // eslint-disable-line no-console
+    }
+  }
+
   addUninstallHook(hook: Function) {
     this.uninstallHooks.push(hook);
   }

diff --git a/shell/core/types.ts b/shell/core/types.ts
@@ -1,5 +1,5 @@
 import { ProductFunction } from './plugin';
-import { RouteRecordRaw } from 'vue-router';
+import { RouteRecordRaw, RouteComponent } from 'vue-router';
 
 // Cluster Provisioning types
 export * from './types-provisioning';
@@ -166,6 +166,14 @@ export type ExtensionEnvironment = {
   docsVersion: string; /** e.g. 'v2.10' */
 };
 
+/**
+ * Settings Page metadata to add a new page into Global Settings
+ */
+export type SettingsPage = {
+  name: string;
+  labelKey: string;
+  component: RouteComponent;
+};
 export interface ProductOptions {
   /**
    * The category this product belongs under. i.e. 'config'
@@ -588,6 +596,12 @@ export interface IPlugin {
    */
   setHomePage(component: any): void;
 
+  /**
+   * Add a settings page to Global Settings
+   * @param settings Settings configuration
+   */
+  addSettingsPage(settings: SettingsPage): void;
+
   /**
    * Add routes to the Vue Router
    */