fix: use react-router to properly handle basepaths for internal links

package.json

@@ -71,6 +71,7 @@
     "@edx/frontend-platform": "^4.0.0 || ^5.0.0 || ^6.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react-dom": "^16.9.0 || ^17.0.0",
+    "react-router-dom": "^6.14.2"
   }
 }

src/studio-header/CourseLockUp.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useNavigate, useResolvedPath } from 'react-router-dom';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   OverlayTrigger,
@@ -14,26 +15,32 @@
   title,
   // injected
   intl,
-}) => (
-  <OverlayTrigger
-    placement="bottom"
-    overlay={(
-      <Tooltip id="course-lock-up">
-        {title}
-      </Tooltip>
+}) => {
+  const navigate = useNavigate();
+  const resolvedPath = useResolvedPath(outlineLink);
+
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={(
+        <Tooltip id="course-lock-up">
+          {title}
+        </Tooltip>
     )}
-  >
-    <a
-      className="course-title-lockup w-25 mr-2"
-      href={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>
-  </OverlayTrigger>
-);
+      <a
+        className="course-title-lockup w-25 mr-2"
+        href={resolvedPath.pathname}
+        onClick={(e) => { e.preventDefault(); navigate(resolvedPath.pathname); }}
+        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>
+    </OverlayTrigger>
+  );
+};
 
 CourseLockUp.propTypes = {
   number: PropTypes.string,

src/studio-header/MobileMenu.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
 import { Collapsible } from '@edx/paragon';
 
 const MobileMenu = ({
@@ -21,9 +22,14 @@
             <ul className="p-0" style={{ listStyleType: 'none' }}>
               {items.map(item => (
                 <li className="mobile-menu-item">
-                  <a href={item.href}>
-                    {item.title}
-                  </a>
+                  {(
+                    /^(?:\w+:)?\/\//.test(item.href)
+                      ? (
+                        <a href={item.href}>
+                          {item.title}
+                        </a>
+                      ) : <NavLink to={item.href}>{item.title}</NavLink>
+                  )}
                 </li>
               ))}
             </ul>

src/studio-header/NavDropdownMenu.jsx

@@ -1,10 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useNavigate, useResolvedPath } from 'react-router-dom';
+
 import {
   Dropdown,
   DropdownButton,
 } from '@edx/paragon';
 
+const NavDropdownItem = ({ item }) => {
+  const navigate = useNavigate();
+  const resolvedPath = useResolvedPath(item.href);
+
+  return (
+    <Dropdown.Item
+      href={resolvedPath.pathname}
+      onClick={(e) => { e.preventDefault(); navigate(resolvedPath.pathname); }}
+      className="small"
+    >
+      {item.title}
+    </Dropdown.Item>
+  );
+};
+
+NavDropdownItem.propTypes = {
+  item: PropTypes.shape({
+    href: PropTypes.string,
+    title: PropTypes.string,
+  }).isRequired,
+};
+
 const NavDropdownMenu = ({
   id,
   buttonTitle,
@@ -15,14 +39,16 @@
     title={buttonTitle}
     variant="tertiary"
   >
-    {items.map(item => (
-      <Dropdown.Item
-        href={item.href}
-        className="small"
-      >
-        {item.title}
-      </Dropdown.Item>
-    ))}
+    {items.map(item => (/^(?:\w+:)?\/\//.test(item.href)
+      ? (
+        <Dropdown.Item
+          href={item.href}
+          className="small"
+        >
+          {item.title}
+        </Dropdown.Item>
+      )
+      : <NavDropdownItem item={item} />))}
   </DropdownButton>
 );
 

src/studio-header/StudioHeader.test.jsx

@@ -5,6 +5,7 @@ import {
   fireEvent,
   waitFor,
 } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 
 import { AppContext } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -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>
   );
 };
 

src/studio-header/utils.js

@@ -8,7 +8,7 @@ const getUserMenuItems = ({
 }) => {
   let items = [
     {
-      href: `${studioBaseUrl}}`,
+      href: `${studioBaseUrl}`,
       title: intl.formatMessage(messages['header.user.menu.studio']),
     }, {
       href: `${logoutUrl}`,
@@ -18,7 +18,7 @@ const getUserMenuItems = ({
   if (isAdmin) {
     items = [
       {
-        href: `${studioBaseUrl}}`,
+        href: `${studioBaseUrl}`,
         title: intl.formatMessage(messages['header.user.menu.studio']),
       }, {
         href: `${studioBaseUrl}/maintenance`,