@cccsaurora/howler-ui 2.14.0-dev.217 → 2.14.0-dev.220

package/components/hooks/useMyPreferences.js

@@ -3,6 +3,7 @@ import { Api, Article, Book, Code, Dashboard, Description, Edit, ExitToApp, Form
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import Classification from '@cccsaurora/howler-ui/components/elements/display/Classification';
 import DocumentationButton from '@cccsaurora/howler-ui/components/elements/display/DocumentationButton';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useMemo } from 'react';
 // This is your App Name that will be displayed in the left drawer and the top navbar
 const APP_NAME = 'howler';
@@ -197,26 +198,36 @@ const useMyPreferences = () => {
     // prettier-ignore
     []);
     // This is the basic user menu, it is a menu that shows up in account avatar popover.
-    const USER_MENU_ITEMS = useMemo(() => [
-        {
-            i18nKey: 'usermenu.settings',
-            route: '/settings',
-            icon: _jsx(Settings, {})
-        },
-        {
-            i18nKey: 'usermenu.logout',
-            route: '/logout',
-            icon: _jsx(ExitToApp, {})
-        }
-    ], []);
+    const USER_MENU_ITEMS = useMemo(() => {
+        // Load plugin menu items first as Settings/Logout generally
+        // appear at the end of user menus.
+        const results = howlerPluginStore.userMenuItems;
+        results.push(...[
+            {
+                i18nKey: 'usermenu.settings',
+                route: '/settings',
+                icon: _jsx(Settings, {})
+            },
+            {
+                i18nKey: 'usermenu.logout',
+                route: '/logout',
+                icon: _jsx(ExitToApp, {})
+            }
+        ]);
+        return results;
+    }, []);
     // This is the basic administrator menu, it is a menu that shows up under the user menu in the account avatar popover.
-    const ADMIN_MENU_ITEMS = useMemo(() => [
-        {
-            i18nKey: 'adminmenu.users',
-            route: '/admin/users',
-            icon: _jsx(SupervisorAccount, {})
-        }
-    ], []);
+    const ADMIN_MENU_ITEMS = useMemo(() => {
+        const results = [
+            {
+                i18nKey: 'adminmenu.users',
+                route: '/admin/users',
+                icon: _jsx(SupervisorAccount, {})
+            }
+        ];
+        results.push(...howlerPluginStore.adminMenuItems);
+        return results;
+    }, []);
     // Return memoized config to prevent unnecessary re-renders.
     return useMemo(() => ({
         appName: '',

package/package.json

@@ -95,7 +95,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.14.0-dev.217",
+  "version": "2.14.0-dev.220",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/plugins/HowlerPlugin.d.ts

@@ -28,6 +28,24 @@ declare abstract class HowlerPlugin implements IPlugin {
     addLead(format: string, form: (props: LeadFormProps) => React.ReactNode, renderer: (content: string, metadata: any, hit?: Hit) => React.ReactNode): void;
     addPivot(format: string, form: (props: PivotFormProps) => React.ReactNode, renderer: (props: PivotLinkProps) => React.ReactNode): void;
     addOperation(format: string, form: (props: CustomActionProps) => React.ReactNode, documentation: PluginDocumentation): void;
+    /**
+     * Adds a single menu item to the User Menu group under the Avatar Menu,
+     * items are added before the 'Settings' and 'Logout' menu items.
+     *
+     * @param i18nKey Translation Key or Title
+     * @param route Route to navigate to, '/settings' for example
+     * @param icon JSX Icon element, <Settings/> for example
+     */
+    addUserMenuItem(i18nKey: string, route: string, icon: JSX.Element): void;
+    /**
+     * Adds a single menu item to the Admin Menu group under the Avatar Menu,
+     * items are added to the end of the existing Admin menu items.
+     *
+     * @param i18nKey Translation Key or Title
+     * @param route Route to navigate to, '/settings' for example
+     * @param icon JSX Icon element, <Settings/> for example
+     */
+    addAdminMenuItem(i18nKey: string, route: string, icon: JSX.Element): void;
     on(_event: string, _hit: Hit): any;
     provider(): React.FC<PropsWithChildren<{}>> | null;
     setup(): void;

package/plugins/HowlerPlugin.js

@@ -72,6 +72,36 @@ class HowlerPlugin {
         // eslint-disable-next-line no-console
         console.debug(`Operation ${format} enabled for plugin ${this.getPluginName()}`);
     }
+    /**
+     * Adds a single menu item to the User Menu group under the Avatar Menu,
+     * items are added before the 'Settings' and 'Logout' menu items.
+     *
+     * @param i18nKey Translation Key or Title
+     * @param route Route to navigate to, '/settings' for example
+     * @param icon JSX Icon element, <Settings/> for example
+     */
+    addUserMenuItem(i18nKey, route, icon) {
+        howlerPluginStore.addUserMenuItem({
+            i18nKey: i18nKey,
+            route: route,
+            icon: icon
+        });
+    }
+    /**
+     * Adds a single menu item to the Admin Menu group under the Avatar Menu,
+     * items are added to the end of the existing Admin menu items.
+     *
+     * @param i18nKey Translation Key or Title
+     * @param route Route to navigate to, '/settings' for example
+     * @param icon JSX Icon element, <Settings/> for example
+     */
+    addAdminMenuItem(i18nKey, route, icon) {
+        howlerPluginStore.addAdminMenuItem({
+            i18nKey: i18nKey,
+            route: route,
+            icon: icon
+        });
+    }
     on(_event, _hit) {
         return null;
     }

package/plugins/store.d.ts

@@ -11,14 +11,48 @@ declare class HowlerPluginStore {
     private _leadFormats;
     private _pivotFormats;
     private _operations;
+    private _userMenuItems;
+    private _adminMenuItems;
     install(plugin: HowlerPlugin): void;
     addLead(format: string): boolean;
     addPivot(format: string): boolean;
     addOperation(format: string): boolean;
+    /**
+     * Adds a single menu item to the User Menu group under the Avatar Menu,
+     * items are added before the 'Settings' and 'Logout' menu items.
+     *
+     * @param menuItem Menu Item {i18nKey, route, icon}
+     */
+    addUserMenuItem(menuItem: {
+        i18nKey: string;
+        route: string;
+        icon: JSX.Element;
+    }): void;
+    /**
+     * Adds a single menu item to the Admin Menu group under the Avatar Menu,
+     * items are added to the end of the existing Admin menu items.
+     *
+     * @param menuItem Menu Item {i18nKey, route, icon}
+     */
+    addAdminMenuItem(menuItem: {
+        i18nKey: string;
+        route: string;
+        icon: JSX.Element;
+    }): void;
     get leadFormats(): string[];
     get pivotFormats(): string[];
     get operations(): string[];
     get pluginStore(): import("react-pluggable").PluginStore;
+    get userMenuItems(): {
+        i18nKey: string;
+        route: string;
+        icon: JSX.Element;
+    }[];
+    get adminMenuItems(): {
+        i18nKey: string;
+        route: string;
+        icon: JSX.Element;
+    }[];
 }
 declare const howlerPluginStore: HowlerPluginStore;
 export default howlerPluginStore;

package/plugins/store.js

@@ -12,6 +12,8 @@ class HowlerPluginStore {
     _leadFormats = [];
     _pivotFormats = [];
     _operations = [];
+    _userMenuItems = [];
+    _adminMenuItems = [];
     install(plugin) {
         console.log(`Installing plugin ${plugin.getPluginName()} by ${plugin.author}`);
         this.plugins.push(plugin.name);
@@ -38,6 +40,24 @@ class HowlerPluginStore {
         this._operations.push(format);
         return true;
     }
+    /**
+     * Adds a single menu item to the User Menu group under the Avatar Menu,
+     * items are added before the 'Settings' and 'Logout' menu items.
+     *
+     * @param menuItem Menu Item {i18nKey, route, icon}
+     */
+    addUserMenuItem(menuItem) {
+        this._userMenuItems.push(menuItem);
+    }
+    /**
+     * Adds a single menu item to the Admin Menu group under the Avatar Menu,
+     * items are added to the end of the existing Admin menu items.
+     *
+     * @param menuItem Menu Item {i18nKey, route, icon}
+     */
+    addAdminMenuItem(menuItem) {
+        this._adminMenuItems.push(menuItem);
+    }
     get leadFormats() {
         return this._leadFormats;
     }
@@ -50,6 +70,12 @@ class HowlerPluginStore {
     get pluginStore() {
         return this._pluginStore;
     }
+    get userMenuItems() {
+        return this._userMenuItems;
+    }
+    get adminMenuItems() {
+        return this._adminMenuItems;
+    }
 }
 const howlerPluginStore = new HowlerPluginStore();
 export default howlerPluginStore;