feat: added laber for header dropdown btn

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -9,9 +9,6 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18, 20]
     steps:
     - name: Checkout
       uses: actions/checkout@v4
@@ -20,7 +17,7 @@ jobs:
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.gitignore

@@ -9,4 +9,4 @@ module.config.js
 .idea/
 
 .vscode
-src/i18n/messages
+src/i18n/messages

catalog-info.yaml

@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-component-header"
+  description: "A generic header for the Open edX micro-frontend applications."
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:committers-frontend
+  type: "library"
+  lifecycle: "production"

example/index.scss

@@ -1,6 +1,4 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@openedx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
+@use "@openedx/paragon/dist/core.min.css" as paragonCore;
+@use "@openedx/paragon/dist/light.min.css" as paragonLight;
 
 @import "@edx/frontend-component-header/index";

openedx.yaml

@@ -1,8 +0,0 @@
-# openedx.yaml
-
----
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react

package.json

@@ -35,22 +35,22 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.1.2",
+    "@edx/frontend-platform": "^8.3.1",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.1.5",
-    "@openedx/paragon": "22.9.0",
-    "@testing-library/dom": "10.4.0",
+    "@openedx/frontend-build": "^14.3.2",
+    "@openedx/paragon": "^23.0.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "10.4.9",
+    "@testing-library/react": "^16.2.0",
     "husky": "8.0.3",
     "jest": "29.7.0",
     "jest-chain": "1.1.6",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router-dom": "6.27.0",
-    "react-test-renderer": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "6.28.1",
+    "react-test-renderer": "^18.3.1",
     "redux": "4.2.1",
     "redux-saga": "1.3.0"
   },
@@ -60,7 +60,7 @@
     "@fortawesome/free-regular-svg-icons": "6.6.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.3.0",
+    "@openedx/frontend-plugin-framework": "^1.6.0",
     "axios-mock-adapter": "1.22.0",
     "babel-polyfill": "6.26.0",
     "classnames": "^2.5.1",
@@ -70,9 +70,10 @@
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": ">= 21.5.7 < 23.0.0",
+    "@openedx/paragon": ">= 22.0.0 < 24.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.14.2"
   }
 }

src/Menu/menu.scss

@@ -1,45 +1,45 @@
 .menu {
   position: relative;
 }
+
 .menu-content {
   position: absolute;
   top: 100%;
   z-index: 10;
-  background: #fff;
+  background: var(--pgn-color-white, #fff);
   min-width: 10rem;
+
   &.pin-left {
     left: 0;
   }
+
   &.pin-right {
     right: 0;
   }
 }
 
-
 .menu-dropdown-enter {
   opacity: 0;
   transform-origin: 75% 0;
   transform: scale3d(0.8, 0.8, 1);
 }
+
 .menu-dropdown-enter-active {
   transform-origin: 75% 0;
   transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
-.menu-dropdown-enter-done {
-}
 
 .menu-dropdown-exit {
   transform-origin: 75% 0;
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
+
 .menu-dropdown-exit-active {
   transform-origin: 75% 0;
   transform: scale3d(0.8, 0.8, 1);
   transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
   opacity: 0;
 }
-.menu-dropdown-exit-done {
-}

src/index.scss

@@ -1,6 +1,9 @@
 $spacer: 1rem;
 $blue: #007db8;
 $white: #fff;
+$component-active-bg: #0A3055FF !default;
+$component-active-color: $white !default;
+$rounded-pill: 50rem  !default;
 
 @import './Menu/menu.scss';
 @import './studio-header/StudioHeader.scss';
@@ -21,8 +24,9 @@ $white: #fff;
   padding: .75rem;
   justify-content: center;
   align-items:center;
+
   &:hover, &:focus {
-    background: rgba(0,0,0,.1);
+    background: rgba(0, 0, 0, .1);
   }
 }
 
@@ -36,17 +40,12 @@ $white: #fff;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding-bottom: 0.1rem;
+      padding-bottom: calc(var(--pgn-spacing-spacer-base, $spacer)* 0.1);
     }
   }
 
-  .user-dropdown {
-    .btn {
-      height: 3rem;
-      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-      //   padding: 0 0.5rem;
-      // }
-    }
+  .user-dropdown .btn {
+    height: 3rem;
   }
 }
 
@@ -63,6 +62,7 @@ $white: #fff;
     text-decoration: none;
     cursor: pointer;
   }
+
   img {
     height: 1.5rem;
   }
@@ -70,19 +70,22 @@ $white: #fff;
 
 
 .site-header-desktop {
-  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
-  background: $white;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
+  background: var(--pgn-color-white, $white);
+
   .nav-link {
     text-decoration: none;
   }
+
   .logo {
     display: block;
     box-sizing: content-box;
     position: relative;
     top: -.05em;
     height: 1.75rem;
-    padding: 1rem 0;
-    margin-right: 1rem;
+    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
+    margin-right: var(--pgn-spacing-spacer-base, $spacer);
+
     img {
       display: block;
       height: 100%;
@@ -93,38 +96,42 @@ $white: #fff;
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
+      background: var(--pgn-color-bg-active, $component-active-bg);
+      color: var(--pgn-color-active, $component-active-color);
     }
   }
   .main-nav {
     .nav-link {
-      padding: 1.125rem 1rem;
+      padding: 1.125rem var(--pgn-spacing-spacer-base, $spacer);
       text-decoration: none;
       font-weight: 500;
       letter-spacing: .01em;
     }
+
     .nav-link:hover,
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
+      background: var(--pgn-color-bg-active, $component-active-bg);
+      color: var(--pgn-color-active, $component-active-color);
     }
+
     .menu {
       position: static;
+
       .menu-content {
-        border-top: solid 2px $component-active-bg;
+        border-top: solid 2px var(--pgn-color-bg-active);
         left: 0;
         right: 0;
-        box-shadow: 0 1px 2px rgba(0,0,0,.25);
+        box-shadow: var(--pgn-elevation-box-shadow-down-1, 0 1px 2px rgba(0,0,0,.25));
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
-        padding: 1rem;
+        padding: var(--pgn-spacing-spacer-base, $spacer);
       }
     }
   }
+
   .search-input {
-    border-radius: $rounded-pill;
+    border-radius: var(--pgn-size-rounded-pill, $rounded-pill);
   }
 }

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -37,7 +37,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 
   return (
     <Dropdown className="user-dropdown ml-3">
-      <Dropdown.Toggle variant="outline-primary">
+      <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}

src/learning-header/messages.js

@@ -36,6 +36,11 @@ const messages = defineMessages({
     defaultMessage: 'Sign Out',
     description: 'The label for the user menu Sign Out action.',
   },
+  userOptionsDropdownLabel: {
+    id: 'header.menu.aria-label',
+    defaultMessage: 'User Options',
+    description: 'The aria-label for the user options dropdown.',
+  },
 });
 
 export default messages;

src/plugin-slots/CourseInfoSlot/index.jsx

@@ -13,6 +13,11 @@ const CourseInfoSlot = ({
     slotOptions={{
       mergeProps: true,
     }}
+    pluginProps={{
+      courseOrg,
+      courseNumber,
+      courseTitle,
+    }}
   >
     <LearningHeaderCourseInfo
       courseOrg={courseOrg}

src/studio-header/BrandNav.jsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 
 const BrandNav = ({
   studioBaseUrl,
   logo,
   logoAltText,
 }) => (
-  <a href={studioBaseUrl}>
+  <Link to={studioBaseUrl}>
     <img
       src={logo}
       alt={logoAltText}
       className="d-block logo"
     />
-  </a>
+  </Link>
 );
 
 BrandNav.propTypes = {

src/studio-header/BrandNav.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { MemoryRouter } from 'react-router-dom';
+
+import BrandNav from './BrandNav';
+
+const studioBaseUrl = 'https://example.com/';
+const logo = 'logo.png';
+const logoAltText = 'Example Logo';
+
+const RootWrapper = () => (
+  <MemoryRouter>
+    <BrandNav
+      studioBaseUrl={studioBaseUrl}
+      logo={logo}
+      logoAltText={logoAltText}
+    />
+  </MemoryRouter>
+);
+
+describe('BrandNav Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the logo with the correct alt text', () => {
+    render(<RootWrapper />);
+
+    const img = screen.getByAltText(logoAltText);
+    expect(img).toHaveAttribute('src', logo);
+  });
+
+  it('displays a link that navigates to studioBaseUrl', () => {
+    render(<RootWrapper />);
+
+    const link = screen.getByRole('link');
+    expect(link.href).toBe(studioBaseUrl);
+  });
+});

src/studio-header/CourseLockUp.jsx

@@ -5,6 +5,8 @@ import {
   OverlayTrigger,
   Tooltip,
 } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+
 import messages from './messages';
 
 const CourseLockUp = ({
@@ -23,15 +25,15 @@ const CourseLockUp = ({
       </Tooltip>
     )}
   >
-    <a
+    <Link
       className="course-title-lockup mr-2"
-      href={outlineLink}
+      to={outlineLink}
       aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
       data-testid="course-lock-up-block"
     >
       <span className="d-block small m-0 text-gray-800" data-testid="course-org-number">{org} {number}</span>
       <span className="d-block m-0 font-weight-bold text-gray-800" data-testid="course-title">{title}</span>
-    </a>
+    </Link>
   </OverlayTrigger>
 );
 

src/studio-header/CourseLockUp.test.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { MemoryRouter } from 'react-router-dom';
+
+import CourseLockUp from './CourseLockUp';
+import messages from './messages';
+
+const mockProps = {
+  number: '101',
+  org: 'EDX',
+  title: 'Course Title',
+  outlineLink: 'https://example.com/course-outline',
+};
+
+const RootWrapper = (props) => (
+  <MemoryRouter>
+    <IntlProvider locale="en" messages={messages}>
+      <CourseLockUp {...props} />
+    </IntlProvider>
+  </MemoryRouter>
+);
+
+describe('CourseLockUp Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders course org, number, and title', () => {
+    render(<RootWrapper {...mockProps} />);
+
+    const courseOrgNumber = screen.getByTestId('course-org-number');
+    const courseTitle = screen.getByTestId('course-title');
+
+    expect(courseOrgNumber).toBeInTheDocument();
+    expect(courseOrgNumber).toHaveTextContent(`${mockProps.org} ${mockProps.number}`);
+    expect(courseTitle).toBeInTheDocument();
+    expect(courseTitle).toHaveTextContent(mockProps.title);
+  });
+
+  it('renders the link with correct aria-label', () => {
+    render(<RootWrapper {...mockProps} />);
+
+    const link = screen.getByTestId('course-lock-up-block');
+    expect(link).toHaveAttribute(
+      'aria-label',
+      messages['header.label.courseOutline'].defaultMessage,
+    );
+  });
+
+  it('navigates to an absolute URL when clicked', () => {
+    render(<RootWrapper {...mockProps} />);
+
+    const link = screen.getByTestId('course-lock-up-block');
+    expect(link.href).toBe(mockProps.outlineLink);
+  });
+});

src/studio-header/HeaderBody.jsx

@@ -103,7 +103,12 @@ const HeaderBody = ({
                 {mainMenuDropdowns.map(dropdown => {
                   const { id, buttonTitle, items } = dropdown;
                   return (
-                    <NavDropdownMenu key={id} {...{ id, buttonTitle, items }} />
+                    <NavDropdownMenu
+                      key={id}
+                      {...{
+                        id, buttonTitle, items,
+                      }}
+                    />
                   );
                 })}
               </Nav>

src/studio-header/HeaderBody.test.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { MemoryRouter } from 'react-router-dom';
+
+import HeaderBody from './HeaderBody';
+import messages from './messages';
+
+const mockOnNavigate = jest.fn();
+const mockSearchButtonAction = jest.fn();
+const mockToggleModalPopup = jest.fn();
+const mockSetModalPopupTarget = jest.fn();
+
+const defaultProps = {
+  studioBaseUrl: 'https://example.com',
+  logoutUrl: 'https://example.com/logout',
+  onNavigate: mockOnNavigate,
+  setModalPopupTarget: mockSetModalPopupTarget,
+  toggleModalPopup: mockToggleModalPopup,
+  searchButtonAction: mockSearchButtonAction,
+  username: 'testuser',
+  authenticatedUserAvatar: 'avatar.png',
+  isAdmin: true,
+  isMobile: false,
+  isHiddenMainMenu: false,
+  mainMenuDropdowns: [],
+  logo: 'logo.png',
+  logoAltText: 'Test Logo',
+  number: '101',
+  org: 'EDX',
+  title: 'Test Course',
+  outlineLink: '/courses/edx/course-101',
+};
+
+const RootWrapper = (props) => (
+  <MemoryRouter>
+    <IntlProvider locale="en" messages={messages}>
+      <HeaderBody {...props} />
+    </IntlProvider>
+  </MemoryRouter>
+);
+
+describe('HeaderBody Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the logo and brand navigation', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const logoImage = screen.getByAltText(defaultProps.logoAltText);
+    expect(logoImage).toBeInTheDocument();
+    expect(logoImage).toHaveAttribute('src', defaultProps.logo);
+  });
+
+  it('renders course lockup information', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const courseTitle = screen.getByText(defaultProps.title);
+    const courseOrgNumber = screen.getByText(`${defaultProps.org} ${defaultProps.number}`);
+
+    expect(courseTitle).toBeInTheDocument();
+    expect(courseOrgNumber).toBeInTheDocument();
+  });
+
+  it('renders a course lock-up link with the correct outline URL', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const courseLockUpLink = screen.getByTestId('course-lock-up-block');
+    expect(courseLockUpLink.getAttribute('href')).toBe(defaultProps.outlineLink);
+  });
+
+  it('displays search button and triggers searchButtonAction on click', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const searchButton = screen.getByLabelText(messages['header.label.search.nav'].defaultMessage);
+    expect(searchButton).toBeInTheDocument();
+
+    fireEvent.click(searchButton);
+    expect(mockSearchButtonAction).toHaveBeenCalled();
+  });
+
+  it('displays user menu with username and avatar', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const userMenu = screen.getByText(defaultProps.username);
+    const avatarImage = screen.getByAltText(defaultProps.username);
+
+    expect(userMenu).toBeInTheDocument();
+    expect(avatarImage).toHaveAttribute('src', defaultProps.authenticatedUserAvatar);
+  });
+
+  it('toggles mobile menu popup when button is clicked in mobile view', () => {
+    render(<RootWrapper {...defaultProps} isMobile isModalPopupOpen={false} />);
+
+    const menuButton = screen.getByTestId('mobile-menu-button');
+    fireEvent.click(menuButton);
+
+    expect(mockToggleModalPopup).toHaveBeenCalled();
+  });
+});

src/studio-header/MobileHeader.jsx

@@ -36,16 +36,16 @@ const MobileHeader = ({
 };
 
 MobileHeader.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logoutUrl: PropTypes.string.isRequired,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  authenticatedUserAvatar: PropTypes.string,
-  username: PropTypes.string,
-  isAdmin: PropTypes.bool,
+  studioBaseUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+  logoutUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+  number: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  org: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  title: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  logo: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  logoAltText: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  authenticatedUserAvatar: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  username: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  isAdmin: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     buttonTitle: PropTypes.node,
@@ -54,7 +54,7 @@ MobileHeader.propTypes = {
       title: PropTypes.node,
     })),
   })),
-  outlineLink: PropTypes.string,
+  outlineLink: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
 };
 
 MobileHeader.defaultProps = {

src/studio-header/MobileMenu.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Collapsible } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
 
-const MobileMenu = ({
-  mainMenuDropdowns,
-}) => (
+const MobileMenu = ({ mainMenuDropdowns }) => (
   <div
     className="ml-4 p-2 bg-light-100 border border-gray-200 small rounded"
     data-testid="mobile-menu"
@@ -21,9 +20,9 @@ const MobileMenu = ({
             <ul className="p-0" style={{ listStyleType: 'none' }}>
               {items.map(item => (
                 <li className="mobile-menu-item">
-                  <a href={item.href}>
+                  <Link to={item.href}>
                     {item.title}
-                  </a>
+                  </Link>
                 </li>
               ))}
             </ul>

src/studio-header/MobileMenu.test.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import '@testing-library/jest-dom/extend-expect';
+import MobileMenu from './MobileMenu';
+
+const mockOnNavigate = jest.fn();
+
+const defaultProps = {
+  mainMenuDropdowns: [
+    {
+      id: 'menu1',
+      buttonTitle: 'Menu 1',
+      items: [
+        { href: '/menu1/item1', title: 'Item 1' },
+        { href: '/menu1/item2', title: 'Item 2' },
+      ],
+    },
+    {
+      id: 'menu2',
+      buttonTitle: 'Menu 2',
+      items: [
+        { href: 'https://external-link.com', title: 'External Link' },
+      ],
+    },
+  ],
+  onNavigate: mockOnNavigate,
+};
+
+const RootWrapper = (props) => (
+  <MemoryRouter>
+    <MobileMenu {...props} />
+  </MemoryRouter>
+);
+
+describe('MobileMenu Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders the mobile menu with dropdowns and items', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const menu1Title = screen.getByText('Menu 1');
+    const menu2Title = screen.getByText('Menu 2');
+
+    expect(menu1Title).toBeInTheDocument();
+    expect(menu2Title).toBeInTheDocument();
+  });
+
+  test('navigates to internal URL when item is clicked', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const menu1Title = screen.getByText(defaultProps.mainMenuDropdowns[0].buttonTitle);
+    fireEvent.click(menu1Title);
+
+    const menuItem = screen.getByText(defaultProps.mainMenuDropdowns[0].items[0].title);
+    expect(menuItem.getAttribute('href')).toBe(defaultProps.mainMenuDropdowns[0].items[0].href);
+  });
+
+  test('navigates to an external URL when external link is clicked', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const menu2Title = screen.getByText(defaultProps.mainMenuDropdowns[1].buttonTitle);
+    fireEvent.click(menu2Title);
+
+    const externalLink = screen.getByText(defaultProps.mainMenuDropdowns[1].items[0].title);
+    expect(externalLink.getAttribute('href')).toBe(defaultProps.mainMenuDropdowns[1].items[0].href);
+  });
+
+  test('renders empty state when there are no dropdowns', () => {
+    render(<RootWrapper mainMenuDropdowns={[]} onNavigate={mockOnNavigate} />);
+
+    const mobileMenu = screen.getByTestId('mobile-menu');
+    expect(mobileMenu).toBeInTheDocument();
+
+    const menuItems = screen.queryAllByRole('listitem');
+    expect(menuItems.length).toBe(0);
+  });
+});

src/studio-header/NavDropdownMenu.jsx

@@ -4,6 +4,7 @@ import {
   Dropdown,
   DropdownButton,
 } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
 
 const NavDropdownMenu = ({
   id,
@@ -18,8 +19,9 @@ const NavDropdownMenu = ({
   >
     {items.map(item => (
       <Dropdown.Item
+        as={Link}
         key={`${item.title}-dropdown-item`}
-        href={item.href}
+        to={item.href}
         className="small"
       >
         {item.title}
@@ -32,8 +34,8 @@ NavDropdownMenu.propTypes = {
   id: PropTypes.string.isRequired,
   buttonTitle: PropTypes.node.isRequired,
   items: PropTypes.arrayOf(PropTypes.shape({
-    href: PropTypes.string,
-    title: PropTypes.node,
+    href: PropTypes.string.isRequired,
+    title: PropTypes.node.isRequired,
   })).isRequired,
 };
 

src/studio-header/NavDropdownMenu.test.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { MemoryRouter } from 'react-router-dom';
+
+import NavDropdownMenu from './NavDropdownMenu';
+
+const defaultProps = {
+  id: 'menu-id',
+  buttonTitle: 'Menu',
+  items: [
+    { href: '/item1', title: 'Item 1' },
+    { href: 'https://external.com', title: 'External Link' },
+  ],
+};
+
+const RootWrapper = (props) => (
+  <MemoryRouter>
+    <NavDropdownMenu {...props} />
+  </MemoryRouter>
+);
+
+describe('NavDropdownMenu Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders the dropdown button with correct title', () => {
+    render(<NavDropdownMenu {...defaultProps} />);
+
+    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
+    expect(dropdownButton).toBeInTheDocument();
+  });
+
+  test('renders all dropdown items', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
+    fireEvent.click(dropdownButton);
+
+    const item1 = screen.getByText(defaultProps.items[0].title);
+    const externalLink = screen.getByText(defaultProps.items[1].title);
+
+    expect(item1).toBeInTheDocument();
+    expect(externalLink).toBeInTheDocument();
+  });
+
+  test('calls onNavigate with the correct URL for internal link', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
+    fireEvent.click(dropdownButton);
+
+    const item1 = screen.getByText(defaultProps.items[0].title);
+    expect(item1.getAttribute('href')).toBe(defaultProps.items[0].href);
+  });
+
+  test('navigates to external URL when external link is clicked', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
+    fireEvent.click(dropdownButton);
+
+    const externalLink = screen.getByText(defaultProps.items[1].title);
+    expect(externalLink.getAttribute('href')).toBe(defaultProps.items[1].href);
+  });
+});

src/studio-header/StudioHeader.jsx

@@ -16,7 +16,8 @@ ensureConfig([
 ], 'Studio Header component');
 
 const StudioHeader = ({
-  number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns, outlineLink, searchButtonAction,
+  number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns,
+  outlineLink, searchButtonAction, isNewHomePage,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
   const props = {
@@ -29,7 +30,7 @@ const StudioHeader = ({
     username: authenticatedUser?.username,
     isAdmin: authenticatedUser?.administrator,
     authenticatedUserAvatar: authenticatedUser?.avatar,
-    studioBaseUrl: config.STUDIO_BASE_URL,
+    studioBaseUrl: isNewHomePage ? '/home' : config.STUDIO_BASE_URL,
     logoutUrl: config.LOGOUT_URL,
     isHiddenMainMenu,
     mainMenuDropdowns,
@@ -66,6 +67,7 @@ StudioHeader.propTypes = {
   })),
   outlineLink: PropTypes.string,
   searchButtonAction: PropTypes.func,
+  isNewHomePage: PropTypes.bool.isRequired,
 };
 
 StudioHeader.defaultProps = {

src/studio-header/StudioHeader.scss

@@ -7,10 +7,10 @@ $white: #FFFFFF;
 
   height: 3.75rem;
   box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
-  background: $white;
+  background: var(--pgn-color-white, $white);
 
   .btn-outline-primary {
-    border-color: $white;
+    border-color: var(--pgn-color-white, $white);
   }
 
   .logo {
@@ -19,8 +19,8 @@ $white: #FFFFFF;
     position: relative;
     top: -.05em;
     height: 1.75rem;
-    padding: $spacer 0;
-    margin-right: $spacer;
+    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
+    margin-right: var(--pgn-spacing-spacer-base, $spacer);
 
     img {
       display: block;
@@ -29,17 +29,17 @@ $white: #FFFFFF;
   }
 
   .course-title-lockup {
+    overflow: hidden;
+
     @media only screen and (min-width: 769px) {
       padding: .5rem;
-      padding-right: $spacer;
+      padding-right: var(--pgn-spacing-spacer-base, $spacer);
       border-right: 1px solid #E5E5E5;
       width: 70%;
     }
   
-    overflow: hidden;
-  
     span {
-      color: #333333;
+      color: var(--pgn-color-gray-800, #333333);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;

src/studio-header/StudioHeader.test.jsx

@@ -9,6 +9,7 @@ import {
 import { AppContext } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { Context as ResponsiveContext } from 'react-responsive';
+import { MemoryRouter } from 'react-router-dom';
 
 import StudioHeader from './StudioHeader';
 import messages from './messages';
@@ -40,15 +41,17 @@ const RootWrapper = ({
 
   return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values, react/prop-types
-    <IntlProvider locale="en">
-      <AppContext.Provider value={appContextValue}>
-        <ResponsiveContext.Provider value={responsiveContextValue}>
-          <StudioHeader
-            {...props}
-          />
-        </ResponsiveContext.Provider>
-      </AppContext.Provider>
-    </IntlProvider>
+    <MemoryRouter>
+      <IntlProvider locale="en">
+        <AppContext.Provider value={appContextValue}>
+          <ResponsiveContext.Provider value={responsiveContextValue}>
+            <StudioHeader
+              {...props}
+            />
+          </ResponsiveContext.Provider>
+        </AppContext.Provider>
+      </IntlProvider>
+    </MemoryRouter>
   );
 };
 
@@ -70,6 +73,7 @@ const props = {
   ],
   outlineLink: 'tEsTLInK',
   searchButtonAction: null,
+  isNewHomePage: true,
 };
 
 describe('Header', () => {

src/studio-header/utils.js

@@ -1,3 +1,4 @@
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 
 const getUserMenuItems = ({
@@ -21,7 +22,7 @@ const getUserMenuItems = ({
         href: `${studioBaseUrl}`,
         title: intl.formatMessage(messages['header.user.menu.studio']),
       }, {
-        href: `${studioBaseUrl}/maintenance`,
+        href: `${getConfig().STUDIO_BASE_URL}/maintenance`,
         title: intl.formatMessage(messages['header.user.menu.maintenance']),
       }, {
         href: `${logoutUrl}`,

webpack.dev.config.js

@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',