feat: User menu trigger plugin slots. (#618)

Author: Kelketek

package.json

@@ -14,6 +14,7 @@
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "fedx-scripts jest --coverage",
+    "test:dev": "fedx-scripts jest --watchAll",
     "types": "tsc --noEmit"
   },
   "files": [
@@ -70,3 +71,4 @@
     "react-router-dom": "^6.14.2"
   }
 }
+

src/desktop-header/DesktopHeader.jsx

@@ -4,8 +4,9 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
+import DesktopUserMenuToggleSlot
+  from '../plugin-slots/DesktopUserMenuToggleSlot';
 import { Menu, MenuTrigger, MenuContent } from '../Menu';
-import Avatar from '../Avatar';
 import LogoSlot from '../plugin-slots/LogoSlot';
 import DesktopLoggedOutItemsSlot from '../plugin-slots/DesktopLoggedOutItemsSlot';
 import { desktopLoggedOutItemsDataShape } from './DesktopLoggedOutItems';
@@ -19,7 +20,6 @@ import { desktopUserMenuDataShape } from './DesktopHeaderUserMenu';
 import messages from '../Header.messages';
 
 // Assets
-import { CaretIcon } from '../Icons';
 
 class DesktopHeader extends React.Component {
   constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
@@ -51,8 +51,7 @@ class DesktopHeader extends React.Component {
           aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
           className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
         >
-          <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
-          {username} <CaretIcon role="img" aria-hidden focusable="false" />
+          <DesktopUserMenuToggleSlot avatar={avatar} label={username} />
         </MenuTrigger>
         <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
           <DesktopUserMenuSlot menu={userMenu} />
@@ -123,15 +122,15 @@ export const desktopHeaderDataShape = {
 
 DesktopHeader.propTypes = {
   mainMenu: desktopHeaderDataShape.mainMenu,
-  secondaryMenu: desktopHeaderDataShape.secondaryMenumainMenu,
-  userMenu: desktopHeaderDataShape.userMenumainMenu,
-  loggedOutItems: desktopHeaderDataShape.loggedOutItemsmainMenu,
-  logo: desktopHeaderDataShape.logomainMenu,
-  logoAltText: desktopHeaderDataShape.logoAltTextmainMenu,
-  logoDestination: desktopHeaderDataShape.logoDestinationmainMenu,
-  avatar: desktopHeaderDataShape.avatarmainMenu,
-  username: desktopHeaderDataShape.usernamemainMenu,
-  loggedIn: desktopHeaderDataShape.loggedInmainMenu,
+  secondaryMenu: desktopHeaderDataShape.secondaryMenu,
+  userMenu: desktopHeaderDataShape.userMenu,
+  loggedOutItems: desktopHeaderDataShape.loggedOutItems,
+  logo: desktopHeaderDataShape.logo,
+  logoAltText: desktopHeaderDataShape.logoAltText,
+  logoDestination: desktopHeaderDataShape.logoDestination,
+  avatar: desktopHeaderDataShape.avatar,
+  username: desktopHeaderDataShape.username,
+  loggedIn: desktopHeaderDataShape.loggedIn,
 
   // i18n
   intl: intlShape.isRequired,

src/desktop-header/DesktopUserMenuToggle.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CaretIcon } from '../Icons';
+import Avatar from '../Avatar';
+
+const DesktopUserMenuToggle = ({ avatar, label }) => (
+  <>
+    <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
+    {label} <CaretIcon role="img" aria-hidden focusable="false" />
+  </>
+);
+
+export const DesktopUserMenuTogglePropTypes = {
+  avatar: PropTypes.string,
+  label: PropTypes.string,
+};
+
+DesktopUserMenuToggle.propTypes = DesktopUserMenuTogglePropTypes;
+
+export default DesktopUserMenuToggle;

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';
 
+import LearningUserMenuToggleSlot from '../plugin-slots/LearningUserMenuToggleSlot';
 import LearningUserMenuSlot from '../plugin-slots/LearningUserMenuSlot';
 
 import messages from './messages';
@@ -38,10 +38,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
   return (
     <Dropdown className="user-dropdown ml-3">
       <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
-        <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-        <span data-hj-suppress className="d-none d-md-inline">
-          {username}
-        </span>
+        <LearningUserMenuToggleSlot label={username} icon={faUserCircle} />
       </Dropdown.Toggle>
       <Dropdown.Menu className="dropdown-menu-right">
         <LearningUserMenuSlot items={dropdownItems} />

src/learning-header/LearningUserMenuToggle.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+
+const LearningUserMenuToggle = ({
+  label,
+  icon,
+}) => (
+  <>
+    <FontAwesomeIcon icon={icon} className="d-md-none" size="lg" />
+    <span data-hj-suppress className="d-none d-md-inline">
+      {label}
+    </span>
+  </>
+);
+
+export const LearningUserMenuTogglePropTypes = {
+  label: PropTypes.string.isRequired,
+  // Full shape available by examining @fortawesome/fontawesome-common-types/index.d.ts.
+  icon: PropTypes.shape({
+    prefix: PropTypes.string.isRequired,
+    iconName: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+LearningUserMenuToggle.propTypes = LearningUserMenuTogglePropTypes;
+
+export default LearningUserMenuToggle;

src/mobile-header/MobileHeader.jsx

@@ -4,8 +4,8 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
+import MobileUserMenuToggleSlot from '../plugin-slots/MobileUserMenuToggleSlot';
 import { Menu, MenuTrigger, MenuContent } from '../Menu';
-import Avatar from '../Avatar';
 import LogoSlot from '../plugin-slots/LogoSlot';
 import MobileLoggedOutItemsSlot from '../plugin-slots/MobileLoggedOutItemsSlot';
 import { mobileHeaderLoggedOutItemsDataShape } from './MobileLoggedOutItems';
@@ -40,14 +40,17 @@ class MobileHeader extends React.Component {
     return <MobileLoggedOutItemsSlot items={loggedOutItems} />;
   }
 
+  renderUserMenuToggle() {
+    const { avatar, username } = this.props;
+    return <MobileUserMenuToggleSlot avatar={avatar} label={username} />;
+  }
+
   render() {
     const {
       logo,
       logoAltText,
       logoDestination,
       loggedIn,
-      avatar,
-      username,
       stickyOnMobile,
       intl,
       mainMenu,
@@ -98,7 +101,7 @@ class MobileHeader extends React.Component {
                 aria-label={intl.formatMessage(messages['header.label.account.menu'])}
                 title={intl.formatMessage(messages['header.label.account.menu'])}
               >
-                <Avatar size="1.5rem" src={avatar} alt={username} />
+                {this.renderUserMenuToggle()}
               </MenuTrigger>
               <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
                 {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}

src/mobile-header/MobileUserMenuToggle.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '../Avatar';
+
+const MobileUserMenuToggle = ({ avatar, username }) => <Avatar size="1.5rem" src={avatar} alt={username} />;
+
+export const MobileUserMenuTogglePropTypes = {
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+};
+
+MobileUserMenuToggle.propTypes = MobileUserMenuTogglePropTypes;
+
+export default MobileUserMenuToggle;

src/plugin-slots/DesktopHeaderSlot/README.md

@@ -41,4 +41,4 @@ const config = {
 }
 
 export default config;
-```
+```

src/plugin-slots/DesktopUserMenuToggleSlot/README.md

@@ -0,0 +1,74 @@
+# Desktop User Menu Toggle Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the contents of the user menu toggle button on desktop sized screens.
+
+## Examples
+
+### Modify Label Text
+
+The following `env.config.jsx` will modify the label text to be something more generic:
+
+![Screenshot of modified label](./images/desktop_user_menu_modified_toggle.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { faHouse } from '@fortawesome/free-solid-svg-icons';
+
+const modifyUserMenuToggle = ( widget ) => {
+  widget.content.label = "My Profile";
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyUserMenuToggle,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu toggle contents with Custom Component
+
+The following `env.config.jsx` will replace the contents of the learning user menu toggle button entirely (in this case with an emoji)
+
+![Screenshot of replaced with custom component](./images/desktop_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_desktop_user_menu_toggle',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <span>🦊</span>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```