ENT-3181: Enables custom branding for enterprise customers in logo and user menu

src/course-header/CourseTabsNavigation.jsx

@@ -14,7 +14,7 @@ function CourseTabsNavigation({
       <div className="container-fluid">
         <Tabs
           className="nav-underline-tabs"
-          aria-label={intl.formatMessage(messages['learn.navigation.course.tabs.label'])}
+          aria-label={intl.formatMessage(messages.courseMaterial)}
         >
           {tabs.map(({ url, title, slug }) => (
             <a

src/course-header/Header.jsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@edx/paragon';
 import { useEnterpriseConfig } from '@edx/frontend-enterprise';
 import { getConfig } from '@edx/frontend-platform';
@@ -9,6 +10,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 
 import logo from './assets/logo.svg';
+import messages from './messages';
 
 function LinkedLogo({
   href,
@@ -29,26 +31,55 @@ LinkedLogo.propTypes = {
   alt: PropTypes.string.isRequired,
 };
 
-export default function Header({
-  courseOrg, courseNumber, courseTitle,
+function Header({
+  courseOrg, courseNumber, courseTitle, intl,
 }) {
   const { authenticatedUser } = useContext(AppContext);
 
-  const { enterpriseLearnerPortalLink } = useEnterpriseConfig(
+  const { enterpriseLearnerPortalLink, enterpriseCustomerBrandingConfig } = useEnterpriseConfig(
     authenticatedUser,
     getConfig().ENTERPRISE_LEARNER_PORTAL_HOSTNAME,
     getConfig().LMS_BASE_URL,
   );
 
+  let dashboardMenuItem = (
+    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+      {intl.formatMessage(messages.dashboard)}
+    </Dropdown.Item>
+  );
+  if (enterpriseLearnerPortalLink && Object.keys(enterpriseLearnerPortalLink).length > 0) {
+    dashboardMenuItem = (
+      <Dropdown.Item
+        href={enterpriseLearnerPortalLink.href}
+      >
+        {enterpriseLearnerPortalLink.content}
+      </Dropdown.Item>
+    );
+  }
+
+  let headerLogo = (
+    <LinkedLogo
+      className="logo"
+      href={`${getConfig().LMS_BASE_URL}/dashboard`}
+      src={logo}
+      alt={getConfig().SITE_NAME}
+    />
+  );
+  if (enterpriseCustomerBrandingConfig && Object.keys(enterpriseCustomerBrandingConfig).length > 0) {
+    headerLogo = (
+      <LinkedLogo
+        className="logo"
+        href={enterpriseCustomerBrandingConfig.logoDestination}
+        src={enterpriseCustomerBrandingConfig.logo}
+        alt={enterpriseCustomerBrandingConfig.logoAltText}
+      />
+    );
+  }
+
   return (
     <header className="course-header">
       <div className="container-fluid py-2 d-flex align-items-center ">
-        <LinkedLogo
-          className="logo"
-          href={`${getConfig().LMS_BASE_URL}/dashboard`}
-          src={logo}
-          alt={getConfig().SITE_NAME}
-        />
+        {headerLogo}
         <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
           <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
           <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
@@ -62,17 +93,25 @@ export default function Header({
             </span>
           </Dropdown.Toggle>
           <Dropdown.Menu className="dropdown-menu-right">
-            <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>Dashboard</Dropdown.Item>
-            <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${authenticatedUser.username}`}>Profile</Dropdown.Item>
-            <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>Account</Dropdown.Item>
+            {dashboardMenuItem}
+            <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${authenticatedUser.username}`}>
+              {intl.formatMessage(messages.profile)}
+            </Dropdown.Item>
+            <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
+              {intl.formatMessage(messages.account)}
+            </Dropdown.Item>
             {!enterpriseLearnerPortalLink && (
               // Users should only see Order History if they do not have an available
               // learner portal, because an available learner portal currently means
               // that they access content via Subscriptions, in which context an "order"
               // is not relevant.
-              <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>Order History</Dropdown.Item>
+              <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
+                {intl.formatMessage(messages.orderHistory)}
+              </Dropdown.Item>
             )}
-            <Dropdown.Item href={getConfig().LOGOUT_URL}>Sign Out</Dropdown.Item>
+            <Dropdown.Item href={getConfig().LOGOUT_URL}>
+              {intl.formatMessage(messages.signOut)}
+            </Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
       </div>
@@ -84,6 +123,7 @@ Header.propTypes = {
   courseOrg: PropTypes.string,
   courseNumber: PropTypes.string,
   courseTitle: PropTypes.string,
+  intl: intlShape.isRequired,
 };
 
 Header.defaultProps = {
@@ -91,3 +131,5 @@ Header.defaultProps = {
   courseNumber: null,
   courseTitle: null,
 };
+
+export default injectIntl(Header);

src/course-header/messages.js

@@ -1,11 +1,36 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'learn.navigation.course.tabs.label': {
+  courseMaterial: {
     id: 'learn.navigation.course.tabs.label',
     defaultMessage: 'Course Material',
     description: 'The accessible label for course tabs navigation',
   },
+  dashboard: {
+    id: 'header.menu.dashboard.label',
+    defaultMessage: 'Dashboard',
+    description: 'The text for the user menu Dashboard navigation link.',
+  },
+  profile: {
+    id: 'header.menu.profile.label',
+    defaultMessage: 'Profile',
+    description: 'The text for the user menu Profile navigation link.',
+  },
+  account: {
+    id: 'header.menu.account.label',
+    defaultMessage: 'Account',
+    description: 'The text for the user menu Account navigation link.',
+  },
+  orderHistory: {
+    id: 'header.menu.orderHistory.label',
+    defaultMessage: 'Order History',
+    description: 'The text for the user menu Order History navigation link.',
+  },
+  signOut: {
+    id: 'header.menu.signOut.label',
+    defaultMessage: 'Sign Out',
+    description: 'The label for the user menu Sign Out action.',
+  },
 });
 
 export default messages;