fix: add an explicit dependency on ts-jest to get tests passing

package.json

@@ -14,7 +14,6 @@
     "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": [
@@ -40,7 +39,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "^16.2.0",
-    "jest": "30.0.5",
+    "jest": "30.0.4",
     "jest-environment-jsdom": "^30.0.0",
     "prop-types": "15.8.1",
     "react": "^18.3.1",
@@ -49,7 +48,8 @@
     "react-router-dom": "6.30.1",
     "react-test-renderer": "^18.3.1",
     "redux": "4.2.1",
-    "redux-saga": "1.3.0"
+    "redux-saga": "1.3.0",
+    "ts-jest": "^29.4.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.7.2",
@@ -71,4 +71,3 @@
     "react-router-dom": "^6.14.2"
   }
 }
-

src/desktop-header/DesktopHeader.jsx

@@ -4,9 +4,8 @@ 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';
@@ -20,6 +19,7 @@ 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,7 +51,8 @@ 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"
         >
-          <DesktopUserMenuToggleSlot avatar={avatar} label={username} />
+          <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
+          {username} <CaretIcon role="img" aria-hidden focusable="false" />
         </MenuTrigger>
         <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
           <DesktopUserMenuSlot menu={userMenu} />
@@ -122,15 +123,15 @@ export const desktopHeaderDataShape = {
 
 DesktopHeader.propTypes = {
   mainMenu: desktopHeaderDataShape.mainMenu,
-  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,
+  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,
 
   // i18n
   intl: intlShape.isRequired,

src/desktop-header/DesktopUserMenuToggle.jsx

@@ -1,20 +0,0 @@
-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,7 +38,10 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
   return (
     <Dropdown className="user-dropdown ml-3">
       <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
-        <LearningUserMenuToggleSlot label={username} icon={faUserCircle} />
+        <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+        <span data-hj-suppress className="d-none d-md-inline">
+          {username}
+        </span>
       </Dropdown.Toggle>
       <Dropdown.Menu className="dropdown-menu-right">
         <LearningUserMenuSlot items={dropdownItems} />

src/learning-header/LearningUserMenuToggle.jsx

@@ -1,28 +0,0 @@
-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,17 +40,14 @@ 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,
@@ -101,7 +98,7 @@ class MobileHeader extends React.Component {
                 aria-label={intl.formatMessage(messages['header.label.account.menu'])}
                 title={intl.formatMessage(messages['header.label.account.menu'])}
               >
-                {this.renderUserMenuToggle()}
+                <Avatar size="1.5rem" src={avatar} alt={username} />
               </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

@@ -1,14 +0,0 @@
-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

@@ -1,74 +0,0 @@
-# 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;
-```

src/plugin-slots/DesktopUserMenuToggleSlot/index.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import DesktopUserMenuToggle, { DesktopUserMenuTogglePropTypes } from '../../desktop-header/DesktopUserMenuToggle';
-
-const DesktopUserMenuToggleSlot = ({
-  avatar,
-  label,
-}) => (
-  <PluginSlot
-    id="org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1"
-    slotOptions={{
-      mergeProps: true,
-    }}
-  >
-    <DesktopUserMenuToggle avatar={avatar} label={label} />
-  </PluginSlot>
-);
-
-DesktopUserMenuToggleSlot.propTypes = DesktopUserMenuTogglePropTypes;
-
-export default DesktopUserMenuToggleSlot;

src/plugin-slots/LearningUserMenuToggleSlot/README.md

@@ -1,74 +0,0 @@
-# Learning User Menu Toggle Slot
-
-### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu_toggle.v1`
-
-## Description
-
-This slot is used to replace/modify/hide the contents of the learning user menu toggle button.
-
-## Examples
-
-### Modify Icon
-
-The following `env.config.jsx` will modify the icon for the learning user menu toggle button. **Note:** The icon is only shown on mobile screens.
-
-![Screenshot of modified items](./images/learning_user_menu_toggle_modified_items.png)
-
-```jsx
-import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-import { faHouse } from '@fortawesome/free-solid-svg-icons';
-
-const modifyUserMenuToggle = ( widget ) => {
-  widget.content.icon = faHouse;
-  return widget;
-};
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_learning_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's contents entirely (in this case with an emoji)
-
-![Screenshot of replaced with custom component](./images/learning_user_menu_toggle_custom_component.png)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_learning_user_menu_toggle',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <span>🦊</span>
-            ),
-          },
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```

src/plugin-slots/LearningUserMenuToggleSlot/index.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import LearningUserMenuToggle, {
-  LearningUserMenuTogglePropTypes,
-} from '../../learning-header/LearningUserMenuToggle';
-
-const LearningUserMenuToggleSlot = ({
-  label, icon,
-}) => (
-  <PluginSlot
-    id="org.openedx.frontend.layout.header_learning_user_menu_toggle.v1"
-    slotOptions={{
-      mergeProps: true,
-    }}
-  >
-    <LearningUserMenuToggle label={label} icon={icon} />
-  </PluginSlot>
-);
-
-LearningUserMenuToggleSlot.propTypes = LearningUserMenuTogglePropTypes;
-
-export default LearningUserMenuToggleSlot;

src/plugin-slots/MobileUserMenuToggleSlot/README.md

@@ -1,74 +0,0 @@
-# Mobile User Menu Toggle Slot
-
-### Slot ID: `org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`
-
-## Description
-
-This slot is used to replace/modify/hide the contents of the user menu toggle button on mobile screens.
-
-## Examples
-
-### Modify Avatar
-
-The following `env.config.jsx` will modify the icon for the user menu toggle button on mobile.
-
-![Screenshot of modified items](./images/mobile_user_menu_toggle_modified_items.png)
-
-```jsx
-import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const modifyUserMenuToggle = ( widget ) => {
-  // Shows a dummy image with the resolution marker '30x30'.
-  widget.content.avatar = "https://dummyimage.com/30x30"
-  return widget;
-};
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_mobile_user_menu_trigger.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 user menu toggle button's contents entirely (in this case with an emoji).
-
-![Screenshot of replaced with custom component](./images/mobile_user_menu_toggle_custom_component.png)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_mobile_user_menu_toggle',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <span>🦊</span>
-            ),
-          },
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```

src/plugin-slots/MobileUserMenuToggleSlot/index.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import MobileUserMenuToggle, {
-  MobileUserMenuTogglePropTypes,
-} from '../../mobile-header/MobileUserMenuToggle';
-
-const MobileUserMenuToggleSlot = ({
-  avatar,
-  label,
-}) => (
-  <PluginSlot
-    id="org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1"
-    slotOptions={{
-      mergeProps: true,
-    }}
-  >
-    <MobileUserMenuToggle avatar={avatar} label={label} />
-  </PluginSlot>
-);
-
-MobileUserMenuToggleSlot.propTypes = MobileUserMenuTogglePropTypes;
-
-export default MobileUserMenuToggleSlot;

src/plugin-slots/README.md

@@ -9,18 +9,15 @@
 * [`org.openedx.frontend.layout.header_desktop_main_menu.v1`](./DesktopMainMenuSlot/)
 * [`org.openedx.frontend.layout.header_desktop_secondary_menu.v1`](./DesktopSecondaryMenuSlot/)
 * [`org.openedx.frontend.layout.header_desktop_user_menu.v1`](./DesktopUserMenuSlot/)
-* [`org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`](./DesktopUserMenuToggleSlot/)
 
 ### Learning Header
 * [`org.openedx.frontend.layout.header_learning_course_info.v1`](./CourseInfoSlot/)
 * [`org.openedx.frontend.layout.header_learning_help.v1`](./LearningHelpSlot/)
 * [`org.openedx.frontend.layout.header_learning_logged_out_items.v1`](./LearningLoggedOutItemsSlot/)
 * [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
-* [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
 
 ### Mobile Header
 * [`org.openedx.frontend.layout.header_mobile.v1`](./MobileHeaderSlot/)
 * [`org.openedx.frontend.layout.header_mobile_logged_out_items.v1`](./MobileLoggedOutItemsSlot/)
 * [`org.openedx.frontend.layout.header_mobile_main_menu.v1`](./MobileMainMenuSlot/)
 * [`org.openedx.frontend.layout.header_mobile_user_menu.v1`](./MobileUserMenuSlot/)
-* [`org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`](./MobileUserMenuToggleSlot/)