feat: add user menu slots in header

README.rst

@@ -43,6 +43,12 @@ Usage
 
 ``import Header, { messages } from '@edx/frontend-component-header-edx';`` 
 
+Plugins
+=======
+This component can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this component that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Development
 ===========
 

package.json

@@ -61,6 +61,7 @@
  "@fortawesome/free-regular-svg-icons": "^6.6.0",
  "@fortawesome/free-solid-svg-icons": "^6.6.0",
  "@fortawesome/react-fontawesome": "^0.2.0",
+ "@openedx/frontend-plugin-framework": "^1.2.1",
  "@openedx/paragon": "^21.11.0",
  "@reduxjs/toolkit": "1.9.7",
  "axios-mock-adapter": "1.22.0",

src/DesktopHeader.jsx

@@ -5,6 +5,8 @@ import { getConfig } from '@edx/frontend-platform';
 import { AvatarButton, Dropdown } from '@openedx/paragon';
 
 // Local Components
+import UserMenuGroupItemSlot from './plugin-slots/UserMenuGroupItemSlot';
+import UserMenuGroupSlot from './plugin-slots/UserMenuGroupSlot';
 import UserMenuItem from './common/UserMenuItem';
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import { LinkedLogo, Logo } from './Logo';
@@ -104,10 +106,12 @@ class DesktopHeader extends React.Component {
  />
  </Dropdown.Item>
  )}
+ <UserMenuGroupSlot />
  {userMenu.map((group, index) => (
  // eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key
  <React.Fragment key={index}>
  {group.heading && <Dropdown.Header>{group.heading}</Dropdown.Header>}
+ {index === 0 && (<UserMenuGroupItemSlot />)}
  {group.items.map(({
  type, content, href, disabled, isActive, onClick,
  }) => (

src/MobileHeader.jsx

@@ -5,6 +5,8 @@ import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
 import { AvatarButton } from '@openedx/paragon';
+import UserMenuGroupSlot from './plugin-slots/UserMenuGroupSlot';
+import UserMenuGroupItemSlot from './plugin-slots/UserMenuGroupItemSlot';
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import { LinkedLogo, Logo } from './Logo';
 import UserMenuItem from './common/UserMenuItem';
@@ -97,7 +99,12 @@ class MobileHeader extends React.Component {
  ))
  ));
 
- return userInfoItem ? [userInfoItem, ...userMenuItems] : userMenuItems;
+ const userMenuGroupSlot = <UserMenuGroupSlot />;
+ const userMenuGroupItemSlot = <UserMenuGroupItemSlot />;
+
+ return userInfoItem
+ ? [userInfoItem, userMenuGroupSlot, userMenuGroupItemSlot, ...userMenuItems]
+ : [userMenuGroupSlot, userMenuGroupItemSlot, ...userMenuItems];
  }
 
  renderLoggedOutItems() {

src/plugin-slots/README.md

@@ -0,0 +1,4 @@
+# `frontend-component-header-edx` Plugin Slots
+
+* [`header_user_menu_group_slot`](./UserMenuGroupSlot/)
+* [`header_user_menu_group_item_slot`](./UserMenuGroupItemSlot/)

src/plugin-slots/UserMenuGroupItemSlot/README.md

@@ -0,0 +1,72 @@
+# Header User Menu Group Slot
+
+### Slot ID: `header_user_menu_group_item_slot`
+
+## Description
+
+This slot allows you to insert a user menu item into a group within the header's user menu for both desktop and mobile screens.
+
+Note: Ensure the slot is provided with appropriate JSX that can render smoothly on both desktop and mobile screens.
+
+## Example
+
+The following ``env.config.jsx`` demonstrates how to insert a user menu item into a group within the header's user menu
+for both desktop and mobile screens.
+
+**Default Behaviour:**
+
+Desktop:
+![Screenshot of Default Header_User_Menu](./images/default_user_menu_desktop.png)
+
+Mobile:
+![Screenshot of Default Header_User_Menu](./images/default_user_menu_mobile.png)
+
+**Inserted a user menu group:**
+
+Desktop:
+![Screenshot of Inserted_User_Menu_Group](./images/inserted_user_menu_item_desktop.png)
+
+Mobile:
+![Screenshot of Inserted_User_Menu_Group](./images/inserted_user_menu_item_mobile.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { breakpoints, Dropdown, useWindowSize } from '@openedx/paragon';
+
+const config = {
+ pluginSlots: {
+ header_user_menu_group_slot: {
+ plugins: [
+ {
+ // Insert some user menu group item
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'user_menu_group',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => {
+ const { width } = useWindowSize();
+ const isMobile = width <= breakpoints.small.maxWidth;
+ if (!isMobile) {
+ return (
+ <Dropdown.Item as="a" href="#">
+ User Menu Group Item
+ </Dropdown.Item>
+ );
+ }
+ return (
+ <li className="nav-item">
+ <a href="#" className="nav-link">
+ User Menu Group Item
+ </a>
+ </li>
+ );
+ },
+ },
+ },
+ ],
+ },
+ },
+}
+
+export default config;
+```

src/plugin-slots/UserMenuGroupItemSlot/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+const UserMenuGroupItemSlot = () => (
+ <PluginSlot
+ id="header_user_menu_group_item_slot"
+ />
+);
+
+export default UserMenuGroupItemSlot;

src/plugin-slots/UserMenuGroupSlot/README.md

@@ -0,0 +1,86 @@
+# Header User Menu Group Slot
+
+### Slot ID: `header_user_menu_group_slot`
+
+## Description
+
+This slot is used to insert a user menu group in the header's user menu for both desktop and mobile screens.
+
+Note: Ensure the slot is provided with appropriate JSX that can render smoothly on both desktop and mobile screens.
+
+## Example
+
+The following ``env.config.jsx`` demonstrates how to insert a user menu group into the header's user menu
+for both mobile and desktop screens.
+
+**Default Behaviour:**
+
+Desktop:
+![Screenshot of Default Header_User_Menu_Desktop](./images/default_user_menu_desktop.png)
+
+Mobile:
+![Screenshot of Default Header_User_Menu_Mobile](./images/default_user_menu_mobile.png)
+
+**Inserted a user menu group:**
+
+Desktop:
+![Screenshot of Inserted_User_Menu_Group_Desktop](./images/inserted_user_menu_desktop.png)
+
+Mobile:
+![Screenshot of Inserted_User_Menu_Group_Mobile](./images/inserted_user_menu_mobile.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { breakpoints, Dropdown, useWindowSize } from '@openedx/paragon';
+
+const config = {
+ pluginSlots: {
+ header_user_menu_group_slot: {
+ plugins: [
+ {
+ // Insert some user menu group
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'user_menu_group',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => {
+ const { width } = useWindowSize();
+ const isMobile = width <= breakpoints.small.maxWidth;
+ if (!isMobile) {
+ return (
+ <>
+ <Dropdown.Header>User Menu Group Header</Dropdown.Header>
+ <Dropdown.Item as="a" href="#" className="active">
+ User Menu Group Item - Active
+ </Dropdown.Item>
+ <Dropdown.Item as="a" href="#">
+ User Menu Group Item 2
+ </Dropdown.Item>
+ <Dropdown.Divider />
+ </>
+ );
+ }
+ return (
+ <>
+ <li className="nav-item">
+ <a href="#" className="nav-link active">
+ User Menu Group Item - Active
+ </a>
+ </li>
+ <li className="nav-item">
+ <a href="#" className="nav-link active">
+ User Menu Group Item 2
+ </a>
+ </li>
+ </>
+ );
+ },
+ },
+ },
+ ],
+ },
+ },
+}
+
+export default config;
+```

src/plugin-slots/UserMenuGroupSlot/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+const UserMenuGroupSlot = () => (
+ <PluginSlot
+ id="header_user_menu_group_slot"
+ />
+);
+
+export default UserMenuGroupSlot;