feat: add edx specific user menu

Author: syedsajjadkazmii

src/DesktopHeader.jsx

@@ -5,6 +5,8 @@ import { getConfig } from '@edx/frontend-platform';
 import { AvatarButton, Dropdown } from '@openedx/paragon';
 
 // Local Components
+import UserDashboardMenuGroup from './common/UserDashboardMenuGroup';
+import UserCareerMenuItem from './common/UserCareerMenuItem';
 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>
           )}
+          {getConfig().ENABLE_EDX_PERSONAL_DASHBOARD && <UserDashboardMenuGroup />}
           {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>}
+              {getConfig().CAREER_LINK_URL && index === 0 && (<UserCareerMenuItem />)}
               {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 UserDashboardMenuGroup from './common/UserDashboardMenuGroup';
+import UserCareerMenuItem from './common/UserCareerMenuItem';
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import { LinkedLogo, Logo } from './Logo';
 import UserMenuItem from './common/UserMenuItem';
@@ -97,7 +99,16 @@ class MobileHeader extends React.Component {
       ))
     ));
 
-    return userInfoItem ? [userInfoItem, ...userMenuItems] : userMenuItems;
+    const userDashboardMenuGroup = (
+      getConfig().ENABLE_EDX_PERSONAL_DASHBOARD ? <UserDashboardMenuGroup /> : null
+    );
+    const userCareerMenuItem = (
+      getConfig().CAREER_LINK_URL ? <UserCareerMenuItem /> : null
+    );
+
+    return userInfoItem
+      ? [userInfoItem, userDashboardMenuGroup, userCareerMenuItem, ...userMenuItems]
+      : [userDashboardMenuGroup, userCareerMenuItem, ...userMenuItems];
   }
 
   renderLoggedOutItems() {

src/common/UserCareerMenuItem.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { reduxHooks } from 'hooks'; // eslint-disable-line import/no-unresolved
+import {
+  Badge, breakpoints, Dropdown, useWindowSize,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import _ from 'lodash';
+import { getConfig } from '@edx/frontend-platform';
+import messages from './messages';
+
+const UserCareerMenuItem = () => {
+  const { formatMessage } = useIntl();
+  const { width } = useWindowSize();
+  const isMobile = width <= breakpoints.small.maxWidth;
+
+  const dashboard = reduxHooks.useEnterpriseDashboardData();
+
+  if (!_.isEmpty(dashboard)) {
+    return null;
+  }
+  if (isMobile) {
+    return (
+      <li className="nav-item" key="item-career">
+        <a href={`${getConfig().CAREER_LINK_URL}`} className="nav-link">
+          {formatMessage(messages.career)}
+          <Badge className="px-2 mx-2" variant="warning">
+            {formatMessage(messages.newAlert)}
+          </Badge>
+        </a>
+      </li>
+    );
+  }
+  return (
+    <Dropdown.Item href={`${getConfig().CAREER_LINK_URL}`} key="item-career">
+      {formatMessage(messages.career)}
+      <Badge className="px-2 mx-2" variant="warning">
+        {formatMessage(messages.newAlert)}
+      </Badge>
+    </Dropdown.Item>
+  );
+};
+
+export default UserCareerMenuItem;

src/common/UserDashboardMenuGroup.jsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { reduxHooks } from 'hooks'; // eslint-disable-line import/no-unresolved
+import { breakpoints, Dropdown, useWindowSize } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import _ from 'lodash';
+import messages from './messages';
+
+const UserDashboardMenuGroup = () => {
+  const { formatMessage } = useIntl();
+  const { width } = useWindowSize();
+  const isMobile = width <= breakpoints.small.maxWidth;
+
+  const dashboard = reduxHooks.useEnterpriseDashboardData();
+
+  if (isMobile) {
+    return (
+      <>
+        <li className="nav-item" key="item-dashboard">
+          <a href="/edx-dashboard" className="nav-link active">
+            {formatMessage(messages.dashboardPersonal)}
+          </a>
+        </li>
+        {!_.isEmpty(dashboard) && (
+        <li className="nav-item" key={dashboard.label}>
+          <a href={dashboard.url} className="nav-link active">
+            {dashboard.label} {formatMessage(messages.dashboard)}
+          </a>
+        </li>
+        )}
+      </>
+    );
+  }
+  return (
+    <>
+      <Dropdown.Header>{formatMessage(messages.dashboardSwitch)}</Dropdown.Header>
+      <Dropdown.Item as="a" href="/edx-dashboard" className="active" key="item-dashboard">
+        {formatMessage(messages.dashboardPersonal)}
+      </Dropdown.Item>
+      {!_.isEmpty(dashboard) && (
+        <Dropdown.Item as="a" href={dashboard.url} key={dashboard.label}>
+          {dashboard.label} {formatMessage(messages.dashboard)}
+        </Dropdown.Item>
+      )}
+      <Dropdown.Divider />
+    </>
+  );
+};
+
+export default UserDashboardMenuGroup;

src/common/hooks.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export const reduxHooks = {
+  useEnterpriseDashboardData: () => {},
+};

src/common/messages.jsx

@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  dashboard: {
+    id: 'learnerVariantDashboard.menu.dashboard.label',
+    defaultMessage: 'Dashboard',
+    description: 'The text for the user menu Dashboard navigation link.',
+  },
+  dashboardPersonal: {
+    id: 'learnerVariantDashboard.menu.dashboardPersonal.label',
+    defaultMessage: 'Personal',
+    description: 'Link to personal dashboard in user menu',
+  },
+  dashboardSwitch: {
+    id: 'learnerVariantDashboard.menu.dashboardSwitch.label',
+    defaultMessage: 'SWITCH DASHBOARD',
+    description: 'Switch Dashboard header in the user menu',
+  },
+  career: {
+    id: 'leanerDashboard.menu.career.label',
+    defaultMessage: 'Career',
+    description: 'The text for the user menu Career navigation link.',
+  },
+  newAlert: {
+    id: 'header.menu.new.label',
+    defaultMessage: 'New',
+    description: 'The text announcing that an item in the user menu is New',
+  },
+});
+
+export default messages;

webpack.dev.config.js

@@ -10,6 +10,7 @@ module.exports = createConfig('webpack-dev', {
   resolve: {
     alias: {
       '@edx/frontend-component-header': path.resolve(__dirname, 'src'),
+      hooks: path.resolve(__dirname, 'src/common/hooks'), // Adjust to the actual hooks path
     },
   },
 });