refactor: convert the courseware metadata fetch to React Query

src/course-home/courseware-search/data/apiHooks.ts

@@ -7,7 +7,6 @@ import { coursewareSearchQueryKeys } from './queryKeys';
 export const useCoursewareSearchEnabled = (courseId: string) => useQuery({
   queryKey: coursewareSearchQueryKeys.enabled(courseId),
   queryFn: () => getCoursewareSearchEnabled(courseId),
-  retry: false,
 });
 
 export const useCoursewareSearchResults = (courseId: string, keyword: string) => useQuery({

src/course-home/courseware-search/map-search-response.js

@@ -1,4 +1,5 @@
 const Joi = require('joi');
+const { NonRetryableError } = require('../../data/http-error');
 
 const endpointSchema = Joi.object({
   took: Joi.number().required(),
@@ -24,7 +25,7 @@ export default function mapSearchResponse(response, searchKeywords = '') {
   const { error, value: data } = endpointSchema.validate(response);
 
   if (error) {
-    throw new Error('Error in server response:', error);
+    throw new NonRetryableError('Error in server response:', { cause: error });
   }
 
   const keywords = searchKeywords ? searchKeywords.toLowerCase().split(' ') : [];

src/course-home/data/apiHooks.test.tsx

@@ -8,6 +8,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '../../setupTest';
 import { ToastProvider, useToast } from '../../generic/ToastContext';
 import {
+  useCourseHomeMeta,
   useOutlineTabData, useLiveTabData, useProgressTabData, useResetDeadlines, usePostEvent, useRequestCert,
   useDismissWelcomeMessage, useSaveWeeklyLearningGoal,
 } from './apiHooks';
@@ -325,4 +326,46 @@ describe('course-home apiHooks', () => {
       await waitFor(() => expect(loggingService.logError).toHaveBeenCalled());
     });
   });
+
+  describe('useCourseHomeMeta', () => {
+    const courseId = 'course-1';
+    const metadataUrl = new RegExp(`${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/`);
+    const tabSlugs = (data: unknown) => (data as { tabs: Array<{ slug: string }> }).tabs.map(tab => tab.slug);
+
+    beforeEach(() => {
+      axiosMock.onGet(metadataUrl).reply(200, Factory.build('courseHomeMetadata'));
+    });
+
+    it('labels the shared courseware/outline tab "courseware" (the rootSlug CoursewareContainer + CourseExit pass)', async () => {
+      const { wrapper } = buildWrapper();
+      const { result } = renderHook(() => useCourseHomeMeta(courseId, 'courseware'), { wrapper });
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+      expect(tabSlugs(result.current.data)).toContain('courseware');
+      expect(tabSlugs(result.current.data)).not.toContain('outline');
+    });
+
+    it('labels the shared courseware/outline tab "outline" (the rootSlug the course-home tabs pass)', async () => {
+      const { wrapper } = buildWrapper();
+      const { result } = renderHook(() => useCourseHomeMeta(courseId, 'outline'), { wrapper });
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+      expect(tabSlugs(result.current.data)).toContain('outline');
+      expect(tabSlugs(result.current.data)).not.toContain('courseware');
+    });
+
+    it('keys the query by rootSlug so the two contexts do not share a cache entry', async () => {
+      const { wrapper } = buildWrapper();
+      const { result } = renderHook(() => ({
+        courseware: useCourseHomeMeta(courseId, 'courseware'),
+        outline: useCourseHomeMeta(courseId, 'outline'),
+      }), { wrapper });
+
+      await waitFor(() => expect(
+        result.current.courseware.isSuccess && result.current.outline.isSuccess,
+      ).toBe(true));
+      expect(tabSlugs(result.current.courseware.data)).toContain('courseware');
+      expect(tabSlugs(result.current.outline.data)).toContain('outline');
+    });
+  });
 });

src/course-home/data/apiHooks.ts

@@ -1,6 +1,7 @@
 import { logError } from '@edx/frontend-platform/logging';
 import { useMutation, useQuery } from '@tanstack/react-query';
 
+import type { RequestError } from '@src/data/http-error';
 import { useToast, ToastContent } from '@src/generic/ToastContext';
 import {
   executePostFromPostEvent,
@@ -58,9 +59,15 @@ export const usePostEvent = () => {
   });
 };
 
-export const useCourseHomeMeta = (courseId: string) => useQuery({
-  queryKey: courseHomeQueryKeys.metadata(courseId),
-  queryFn: () => getCourseHomeCourseMetadata(courseId, 'outline'),
+// Typed to only what we read off this query, not the whole (untyped) endpoint shape;
+// other course-home fields are read via `useModel`/the bridge (until #1977).
+export const useCourseHomeMeta = (courseId: string | undefined, rootSlug: string) => useQuery<
+{ courseAccess?: { hasAccess: boolean } },
+RequestError
+>({
+  queryKey: courseHomeQueryKeys.metadata(courseId!, rootSlug),
+  queryFn: () => getCourseHomeCourseMetadata(courseId, rootSlug),
+  enabled: !!courseId,
   meta: { modelType: 'courseHomeMeta', courseId },
 });
 
@@ -79,7 +86,6 @@ export const useOutlineTabData = (courseId: string) => useQuery({
 export const useLiveTabData = (courseId: string) => useQuery({
   queryKey: courseHomeQueryKeys.liveTab(courseId),
   queryFn: () => getLiveTabIframe(courseId),
-  refetchOnWindowFocus: false,
 });
 
 export const useProgressTabData = (courseId: string, targetUserId?: string) => useQuery({

src/course-home/data/queryKeys.ts

@@ -2,7 +2,7 @@ import { appId } from '@src/constants';
 
 export const courseHomeQueryKeys = {
   all: [appId, 'courseHome'] as const,
-  metadata: (courseId: string) => [...courseHomeQueryKeys.all, 'metadata', courseId] as const,
+  metadata: (courseId: string, rootSlug: string) => [...courseHomeQueryKeys.all, 'metadata', courseId, rootSlug] as const,
   datesTab: (courseId: string) => [...courseHomeQueryKeys.all, 'datesTab', courseId] as const,
   outlineTab: (courseId: string) => [...courseHomeQueryKeys.all, 'outlineTab', courseId] as const,
   liveTab: (courseId: string) => [...courseHomeQueryKeys.all, 'liveTab', courseId] as const,

src/course-home/dates-tab/DatesTab.jsx

@@ -19,7 +19,7 @@ const DatesTab = () => {
   const intl = useIntl();
   const { courseId } = useParams();
 
-  const metadataQuery = useCourseHomeMeta(courseId);
+  const metadataQuery = useCourseHomeMeta(courseId, 'outline');
   const tabDataQuery = useDatesTabData(courseId);
 
   const {

src/course-home/discussion-tab/DiscussionTab.jsx

@@ -32,7 +32,7 @@ const DiscussionTabContent = () => {
 const DiscussionTab = () => {
   const { courseId } = useParams();
 
-  const metadataQuery = useCourseHomeMeta(courseId);
+  const metadataQuery = useCourseHomeMeta(courseId, 'outline');
 
   return (
     <TabWithTimer

src/course-home/live-tab/LiveTab.jsx

@@ -32,7 +32,7 @@ LiveTabContent.defaultProps = {
 const LiveTab = () => {
   const { courseId } = useParams();
 
-  const metadataQuery = useCourseHomeMeta(courseId);
+  const metadataQuery = useCourseHomeMeta(courseId, 'outline');
   const tabDataQuery = useLiveTabData(courseId);
 
   return (

src/course-home/outline-tab/OutlineTab.jsx

@@ -192,7 +192,7 @@ const OutlineTabContent = () => {
 
 const OutlineTab = () => {
   const { courseId } = useParams();
-  const metadataQuery = useCourseHomeMeta(courseId);
+  const metadataQuery = useCourseHomeMeta(courseId, 'outline');
   const tabDataQuery = useOutlineTabData(courseId);
 
   return (

src/course-home/progress-tab/ProgressTab.jsx

@@ -57,7 +57,7 @@ const ProgressTabContent = () => {
 
 const ProgressTab = () => {
   const { courseId, targetUserId } = useParams();
-  const metadataQuery = useCourseHomeMeta(courseId);
+  const metadataQuery = useCourseHomeMeta(courseId, 'outline');
   const tabDataQuery = useProgressTabData(courseId, targetUserId);
 
   return (

src/courseware/CoursewareContainer.test.jsx

@@ -101,7 +101,7 @@ describe('CoursewareContainer', () => {
 
     component = (
       <AppProvider store={store} wrapWithRouter={false}>
-        <QueryClientProvider client={createTestQueryClient()}>
+        <QueryClientProvider client={createTestQueryClient(store)}>
           <UserMessagesProvider>
             <ToastProvider>
               <Routes>

src/courseware/CoursewareContainer.tsx

@@ -12,6 +12,7 @@ import {
   getSequenceForUnitDeprecated,
   saveSequencePosition,
 } from './data';
+import { useCourseStatusBridge } from './data/statusBridge';
 import { TabPage } from '../tab-page';
 import type { CourseStatus } from '../tab-page/TabPage';
 import type { RootState } from '../store';
@@ -234,6 +235,8 @@ const CoursewareContainer = () => {
   const firstSequenceId = useSelector(firstSequenceIdSelector);
   const sectionViaSequenceId = useSelector(sectionViaSequenceIdSelector);
 
+  useCourseStatusBridge(routeCourseId);
+
   const latest = useRef<any>();
 
   const guards = useRef<any>();

src/courseware/course/course-exit/CourseExit.jsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
-import { useSelector } from 'react-redux';
-import { Navigate } from 'react-router-dom';
+import { Navigate, useParams } from 'react-router-dom';
 
 import CourseCelebration from './CourseCelebration';
 import CourseInProgress from './CourseInProgress';
@@ -11,9 +10,13 @@ import { postUnsubscribeFromGoalReminders } from './data/api';
 import { CourseExitViewCoursesPluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
 
 import { useModel } from '../../../generic/model-store';
+import { TabWithTimer } from '../../../tab-page';
+import { useCoursewareMetadata, useCoursewareOutline } from '../../data/apiHooks';
+import { useCourseExitStatusBridge } from '../../data/statusBridge';
+import { useCourseHomeMeta } from '../../../course-home/data/apiHooks';
 
-const CourseExit = () => {
-  const { courseId } = useSelector(state => state.courseware);
+const CourseExitContent = () => {
+  const { courseId } = useParams();
   const {
     certificateData,
     courseExitPageIsActive,
@@ -66,4 +69,22 @@ const CourseExit = () => {
   );
 };
 
+const CourseExit = () => {
+  const { courseId } = useParams();
+  const metadataQuery = useCoursewareMetadata(courseId);
+  const courseHomeMetaQuery = useCourseHomeMeta(courseId, 'courseware');
+  useCoursewareOutline(courseId);
+  useCourseExitStatusBridge(courseId, metadataQuery, courseHomeMetaQuery);
+
+  return (
+    <TabWithTimer
+      activeTabSlug="courseware"
+      courseId={courseId}
+      courseStatus={{ metadataQuery: courseHomeMetaQuery, tabDataQuery: metadataQuery }}
+    >
+      <CourseExitContent />
+    </TabWithTimer>
+  );
+};
+
 export default CourseExit;

src/courseware/course/course-exit/CourseExit.test.jsx

@@ -1,19 +1,24 @@
 import React from 'react';
 import MockAdapter from 'axios-mock-adapter';
 import { Factory } from 'rosie';
-import { getConfig } from '@edx/frontend-platform';
+import { getConfig, history } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { waitFor } from '@testing-library/react';
+import { waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
 
-import { fetchCourse } from '../../data';
+import { getCourseMetadata } from '../../data/api';
+import { getCourseHomeCourseMetadata } from '../../../course-home/data/api';
+import { fetchCourseSuccess } from '../../data/slice';
+import { addModel } from '../../../generic/model-store';
 import { buildSimpleCourseBlocks } from '../../../shared/data/__factories__/courseBlocks.factory';
 import { buildOutlineFromBlocks } from '../../data/__factories__/learningSequencesOutline.factory';
 import {
-  initializeMockApp, logUnhandledRequests, render, screen,
+  createTestQueryClient, initializeMockApp, logUnhandledRequests, render, screen,
 } from '../../../setupTest';
 import initializeStore from '../../../store';
-import { appendBrowserTimezoneToUrl, executeThunk } from '../../../utils';
+import { appendBrowserTimezoneToUrl } from '../../../utils';
 import CourseCelebration from './CourseCelebration';
 import CourseExit from './CourseExit';
 import CourseInProgress from './CourseInProgress';
@@ -51,8 +56,27 @@ describe('Course Exit Pages', () => {
   }
 
   async function fetchAndRender(component) {
-    await executeThunk(fetchCourse(courseId), store.dispatch);
-    render(component, { store, wrapWithRouter: true });
+    const [metadata, homeMetadata] = await Promise.all([
+      getCourseMetadata(courseId),
+      getCourseHomeCourseMetadata(courseId, 'courseware'),
+    ]);
+    store.dispatch(addModel({ modelType: 'coursewareMeta', model: metadata }));
+    store.dispatch(addModel({ modelType: 'courseHomeMeta', model: { id: courseId, ...homeMetadata } }));
+    store.dispatch(fetchCourseSuccess({ courseId }));
+    history.push(`/course/${courseId}`);
+    render(
+      <QueryClientProvider client={createTestQueryClient(store)}>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/course/:courseId" element={component} />
+          </Routes>
+        </BrowserRouter>
+      </QueryClientProvider>,
+      { store, wrapWithRouter: false },
+    );
+    if (screen.queryByRole('status')) {
+      await waitForElementToBeRemoved(() => screen.queryByRole('status'));
+    }
   }
 
   beforeEach(() => {
@@ -99,6 +123,24 @@ describe('Course Exit Pages', () => {
       expect(screen.getByText('You’ve reached the end of the course!')).toBeInTheDocument();
     });
 
+    it('Routes to in-progress experience when the course has scheduled content', async () => {
+      setMetadata({
+        enrollment: { is_active: true },
+        user_has_passing_grade: false,
+      });
+      const { courseBlocks } = buildSimpleCourseBlocks(courseId, courseHomeMetadata.title);
+      // buildOutlineFromBlocks releases every sequence; mark one unreleased so the normalized
+      // outline reports hasScheduledContent (see isReleased in ../../data/utils.js).
+      const outline = buildOutlineFromBlocks(courseBlocks);
+      const [scheduledSequenceId] = Object.keys(outline.outline.sequences);
+      outline.outline.sequences[scheduledSequenceId].accessible = false;
+      outline.outline.sequences[scheduledSequenceId].effective_start = tomorrow.toISOString();
+      axiosMock.onGet(learningSequencesUrlRegExp).reply(200, outline);
+
+      await fetchAndRender(<CourseExit />);
+      expect(await screen.findByText('More content is coming soon!')).toBeInTheDocument();
+    });
+
     it('Redirects if it does not match any statuses', async () => {
       setMetadata({
         certificate_data: {
@@ -110,6 +152,24 @@ describe('Course Exit Pages', () => {
     });
   });
 
+  describe('Course Exit access error', () => {
+    it('surfaces the 403 access detail instead of the generic error', async () => {
+      axiosMock.onGet(courseHomeMetadataUrl).reply(403, { detail: 'You are not enrolled', error_code: 'not_enrolled' });
+      history.push(`/course/${courseId}`);
+      render(
+        <QueryClientProvider client={createTestQueryClient(store)}>
+          <BrowserRouter>
+            <Routes>
+              <Route path="/course/:courseId" element={<CourseExit />} />
+            </Routes>
+          </BrowserRouter>
+        </QueryClientProvider>,
+        { store, wrapWithRouter: false },
+      );
+      expect(await screen.findByText('You are not enrolled')).toBeInTheDocument();
+    });
+  });
+
   describe('Course Celebration Experience', () => {
     it('Displays webview link', async () => {
       setMetadata({