fix: use an SPA link for "back to dashboard" when the route exists

Co-Authored-By: Claude <noreply@anthropic.com>

Author: arbrandes

src/components/GradebookHeader/index.jsx

@@ -1,10 +1,14 @@
-import { useIntl } from '@openedx/frontend-base';
+import { Link } from 'react-router-dom';
+
+import { getUrlByRouteRole, useIntl } from '@openedx/frontend-base';
 import { Button } from '@openedx/paragon';
 
 import { instructorDashboardUrl } from '@src/data/services/lms/urls';
 import useGradebookHeaderData from './hooks';
 import messages from './messages';
 
+const instructorDashboardRole = 'org.openedx.frontend.role.instructorDashboard';
+
 export const GradebookHeader = () => {
   const { formatMessage } = useIntl();
   const {
@@ -15,13 +19,24 @@ export const GradebookHeader = () => {
     showBulkManagement,
     toggleViewMessage,
   } = useGradebookHeaderData();
-  const dashboardUrl = instructorDashboardUrl();
+  // Prefer the instructor dashboard route if the running site provides one,
+  // so navigation stays within the SPA; otherwise fall back to a full page
+  // load of the legacy LMS dashboard.
+  const dashboardRoute = getUrlByRouteRole(instructorDashboardRole)?.replace(':courseId', courseId);
+  const isInternalRoute = !!dashboardRoute && !/^[a-z][a-z0-9+.-]*:/i.test(dashboardRoute);
+  const backLinkContent = (
+    <>
+      <span aria-hidden="true">{'<< '}</span>
+      {formatMessage(messages.backToDashboard)}
+    </>
+  );
   return (
     <div className="gradebook-header">
-      <a href={dashboardUrl} className="mb-3">
-        <span aria-hidden="true">{'<< '}</span>
-        {formatMessage(messages.backToDashboard)}
-      </a>
+      {isInternalRoute ? (
+        <Link to={dashboardRoute} className="mb-3">{backLinkContent}</Link>
+      ) : (
+        <a href={dashboardRoute ?? instructorDashboardUrl()} className="mb-3">{backLinkContent}</a>
+      )}
       <h1>{formatMessage(messages.gradebook)}</h1>
       <div className="subtitle-row d-flex justify-content-between align-items-center">
         <h2 className="text-break">{courseId}</h2>

src/components/GradebookHeader/index.test.jsx

@@ -2,12 +2,17 @@ import { renderWithAllProviders, initializeMocks } from '@src/testUtils';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { getUrlByRouteRole } from '@openedx/frontend-base';
 import { instructorDashboardUrl } from '@src/data/services/lms/urls';
 
 import { GradebookHeader } from './index';
 import useGradebookHeaderData from './hooks';
 import messages from './messages';
 
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  getUrlByRouteRole: jest.fn(),
+}));
 jest.mock('@src/data/services/lms/urls', () => ({
   instructorDashboardUrl: jest.fn(),
 }));
@@ -20,6 +25,7 @@ describe('GradebookHeader', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    getUrlByRouteRole.mockReturnValue(null);
     instructorDashboardUrl.mockReturnValue('https://example.com/dashboard');
   });
 
@@ -83,6 +89,28 @@ describe('GradebookHeader', () => {
       expect(instructorDashboardUrl).toHaveBeenCalled();
     });
 
+    it('renders an SPA link when the site provides an instructor dashboard route', () => {
+      getUrlByRouteRole.mockReturnValue('/instructor-dashboard/:courseId');
+      renderWithAllProviders(<GradebookHeader />);
+      const dashboardLink = screen.getByRole('link');
+      expect(dashboardLink).toHaveAttribute(
+        'href',
+        '/instructor-dashboard/course-v1:TestU+CS101+2024',
+      );
+      expect(instructorDashboardUrl).not.toHaveBeenCalled();
+    });
+
+    it('renders a plain anchor when the instructor dashboard route is external', () => {
+      getUrlByRouteRole.mockReturnValue('https://other.example.com/dashboard');
+      renderWithAllProviders(<GradebookHeader />);
+      const dashboardLink = screen.getByRole('link');
+      expect(dashboardLink).toHaveAttribute(
+        'href',
+        'https://other.example.com/dashboard',
+      );
+      expect(instructorDashboardUrl).not.toHaveBeenCalled();
+    });
+
     it('calls useGradebookHeaderData hook', () => {
       renderWithAllProviders(<GradebookHeader />);
       expect(useGradebookHeaderData).toHaveBeenCalled();

src/data/services/lms/urls.js

@@ -3,20 +3,22 @@ import { historyRecordLimit } from './constants';
 import { filterQuery, stringifyUrl } from './utils';
 import { getSiteConfig } from '@openedx/frontend-base';
 
-const courseId = window.location.pathname.split('/').filter(Boolean).pop() || '';
+// Evaluated at call time: with client-side navigation, this module can be
+// imported before the URL reflects the gradebook route.
+const getCourseId = () => window.location.pathname.split('/').filter(Boolean).pop() || '';
 
 export const getUrlPrefix = () => `${getSiteConfig().lmsBaseUrl}/api/`;
-export const getBulkGradesUrl = () => `${getUrlPrefix()}bulk_grades/course/${courseId}/`;
+export const getBulkGradesUrl = () => `${getUrlPrefix()}bulk_grades/course/${getCourseId()}/`;
 export const getEnrollmentUrl = () => `${getUrlPrefix()}enrollment/v2/`;
 export const getGradesUrl = () => `${getUrlPrefix()}grades/v1/`;
-export const getGradebookUrl = () => `${getGradesUrl()}gradebook/${courseId}/`;
+export const getGradebookUrl = () => `${getGradesUrl()}gradebook/${getCourseId()}/`;
 export const getBulkUpdateUrl = () => `${getGradebookUrl()}bulk-update`;
 export const getInterventionUrl = () => `${getBulkGradesUrl()}intervention/`;
-export const getCohortsUrl = () => `${getUrlPrefix()}cohorts/v1/courses/${courseId}/cohorts/`;
-export const getTracksUrl = () => `${getEnrollmentUrl()}course/${courseId}?include_expired=1`;
+export const getCohortsUrl = () => `${getUrlPrefix()}cohorts/v1/courses/${getCourseId()}/cohorts/`;
+export const getTracksUrl = () => `${getEnrollmentUrl()}course/${getCourseId()}?include_expired=1`;
 export const getBulkHistoryUrl = () => `${getBulkUpdateUrl()}history/`;
 export const getAssignmentTypesUrl = () => stringifyUrl(`${getGradebookUrl()}grading-info`, { graded_only: true });
-export const getRolesUrl = () => stringifyUrl(`${getEnrollmentUrl()}roles/`, { courseId });
+export const getRolesUrl = () => stringifyUrl(`${getEnrollmentUrl()}roles/`, { courseId: getCourseId() });
 /**
  * bulkGradesUrlByCourseAndRow(courseId, rowId)
  * returns the bulkGrades url with the given rowId.
@@ -37,7 +39,7 @@ export const sectionOverrideHistoryUrl = (subsectionId, userId) => stringifyUrl(
 );
 
 export const instructorDashboardUrl = () => (
-  `${getSiteConfig().lmsBaseUrl}/courses/${courseId}/instructor`
+  `${getSiteConfig().lmsBaseUrl}/courses/${getCourseId()}/instructor`
 );
 
 export default StrictDict({

src/data/services/lms/urls.test.js

@@ -1,8 +1,11 @@
+import { getSiteConfig } from '@openedx/frontend-base';
+
 import { historyRecordLimit } from './constants';
 import * as utils from './utils';
 import urls, {
   bulkGradesUrlByRow,
   gradeCsvUrl,
+  instructorDashboardUrl,
   interventionExportCsvUrl,
   sectionOverrideHistoryUrl,
 } from './urls';
@@ -47,6 +50,15 @@ describe('lms api url methods', () => {
       );
     });
   });
+  describe('instructorDashboardUrl', () => {
+    it('returns the LMS dashboard url for the course in the current location', () => {
+      const courseId = 'course-v1:TestU+CS101+2024';
+      window.history.pushState({}, '', `/gradebook/${courseId}`);
+      expect(instructorDashboardUrl()).toEqual(
+        `${getSiteConfig().lmsBaseUrl}/courses/${courseId}/instructor`,
+      );
+    });
+  });
   describe('sectionOverrideHistoryUrl', () => {
     it('returns grades url with subsection id, and user_id/history_record_limit query', () => {
       const subsectionId = 'a sub section';

src/routes.test.tsx

@@ -0,0 +1,11 @@
+import MockedMain from './Main';
+import routes from './routes';
+
+jest.mock('./Main', () => () => null);
+
+describe('routes', () => {
+  it('lazy-loads Main as the gradebook route component', async () => {
+    const { Component } = await routes[0].lazy();
+    expect(Component).toBe(MockedMain);
+  });
+});

src/routes.tsx

@@ -1,14 +1,14 @@
-import { lazy } from 'react';
 import { authenticatedLoader } from '@openedx/frontend-base';
 
-const Main = lazy(() => import('./Main'));
-
 const routes = [
   {
     id: 'org.openedx.frontend.route.gradebook.main',
     path: '/gradebook/:courseId',
     loader: authenticatedLoader,
-    Component: Main,
+    async lazy() {
+      const { default: Main } = await import('./Main');
+      return { Component: Main };
+    },
     handle: {
       roles: ['org.openedx.frontend.role.gradebook'],
     },