feat: adding Career link to user menu (#375)

* feat: adding `Career` link to user menu

* feat: fixing lint issues

* feat: adding `Career` item to Learning Header

* fix: ensuring menu item is for non-enterprise only

* feat: adding 'new' alert

* fix: standardizing the text description to rest of file

* fix: addressing lint errors

* fix: correct string concat format

* feat: utilize Badge paragon component

* fix: correcting formatting of code

* fix: using shared component, per review request

* fix: remove non-breaking space chars

Author: krishatcher

src/Header.jsx

@@ -3,6 +3,7 @@ import Responsive from 'react-responsive';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { AppContext } from '@edx/frontend-platform/react';
+import { Badge } from '@edx/paragon';
 import {
   APP_CONFIG_INITIALIZED,
   ensureConfig,
@@ -91,8 +92,20 @@ const Header = ({ intl }) => {
     baseUserMenuDashboardLinks = [dashboardMenuItem];
   }
 
+  const careerItemContent = <>{intl.formatMessage(messages['header.user.menu.career'])}<Badge className="px-2 mx-2" variant="warning">{intl.formatMessage(messages['header.user.menu.newAlert'])}</Badge></>;
   let userMenu = authenticatedUser === null ? [] : [
     ...baseUserMenuDashboardLinks,
+    {
+      type: 'item',
+      href: 'https://careers.edx.org/',
+      content: careerItemContent,
+      onClick: () => {
+        sendTrackEvent(
+          'edx.bi.user.menu.career.clicked',
+          { category: 'header', label: 'header' },
+        );
+      },
+    },
     {
       type: 'item',
       href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,

src/Header.messages.jsx

@@ -21,6 +21,16 @@ const messages = defineMessages({
     defaultMessage: 'Schools & Partners',
     description: 'Link to the schools and partners landing page',
   },
+  'header.user.menu.career': {
+    id: 'header.user.menu.career',
+    defaultMessage: 'Career',
+    description: 'Link to the Career Resource Center',
+  },
+  'header.user.menu.newAlert': {
+    id: 'header.user.menu.newAlert',
+    defaultMessage: 'New',
+    description: 'The text announcing that an item is New',
+  },
   'header.user.menu.dashboard': {
     id: 'header.user.menu.dashboard',
     defaultMessage: 'Dashboard',

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -6,7 +6,7 @@ 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 '@edx/paragon';
+import { Dropdown, Badge } from '@edx/paragon';
 
 import messages from './messages';
 
@@ -16,6 +16,14 @@ const AuthenticatedUserDropdown = ({ enterpriseLearnerPortalLink, intl, username
       {intl.formatMessage(messages.dashboard)}
     </Dropdown.Item>
   );
+  let careersMenuItem = (
+    <Dropdown.Item href="https://careers.edx.org/">
+      {intl.formatMessage(messages.career)}
+      <Badge className="px-2 mx-2" variant="warning">
+        {intl.formatMessage(messages.newAlert)}
+      </Badge>
+    </Dropdown.Item>
+  );
   if (enterpriseLearnerPortalLink && Object.keys(enterpriseLearnerPortalLink).length > 0) {
     dashboardMenuItem = (
       <Dropdown.Item
@@ -24,6 +32,7 @@ const AuthenticatedUserDropdown = ({ enterpriseLearnerPortalLink, intl, username
         {enterpriseLearnerPortalLink.content}
       </Dropdown.Item>
     );
+    careersMenuItem = '';
   }
   return (
     <>
@@ -37,6 +46,7 @@ const AuthenticatedUserDropdown = ({ enterpriseLearnerPortalLink, intl, username
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right">
           {dashboardMenuItem}
+          {careersMenuItem}
           <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
             {intl.formatMessage(messages.profile)}
           </Dropdown.Item>

src/learning-header/messages.js

@@ -21,6 +21,16 @@ const messages = defineMessages({
     defaultMessage: 'Account',
     description: 'The text for the user menu Account navigation link.',
   },
+  career: {
+    id: 'header.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',
+  },
   orderHistory: {
     id: 'header.menu.orderHistory.label',
     defaultMessage: 'Order History',