refactor: Details to finish migration

Author: ChrisChV

plugins/course-apps/proctoring/Settings.jsx

@@ -22,6 +22,7 @@ import { useModel } from 'CourseAuthoring/generic/model-store';
 import PermissionDeniedAlert from 'CourseAuthoring/generic/PermissionDeniedAlert';
 import { useIsMobile } from 'CourseAuthoring/utils';
 import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import { useCourseAuthoringContext } from 'CourseAuthoring/CourseAuthoringContext';
 
 import messages from './messages';
 
@@ -66,7 +67,7 @@ const ProctoringSettings = ({ onClose }) => {
   }
 
   const { courseId } = useContext(PagesAndResourcesContext);
-  const courseDetails = useModel('courseDetails', courseId);
+  const { courseDetails } = useCourseAuthoringContext();
   const org = courseDetails?.org;
   const appInfo = useModel('courseApps', 'proctoring');
   const alertRef = React.createRef();

plugins/course-apps/proctoring/Settings.test.jsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useMemo } from 'react';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { CourseDetailsData } from './data/api';
 import { useCourseDetails } from './data/apiHooks';
 import { RequestStatusType } from './data/constants';
@@ -8,6 +9,7 @@ export type CourseAuthoringContextData = {
   courseId: string;
   courseDetails?: CourseDetailsData;
   courseDetailStatus: RequestStatusType;
+  canChangeProviders: boolean;
 };
 
 /**
@@ -29,19 +31,22 @@ export const CourseAuthoringProvider = ({
   courseId,
 }: CourseAuthoringProviderProps) => {
   const { data: courseDetails, status: courseDetailStatus } = useCourseDetails(courseId);
+  const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();
 
   const context = useMemo<CourseAuthoringContextData>(() => {
     const contextValue = {
       courseId,
       courseDetails,
       courseDetailStatus,
+      canChangeProviders,
     };
 
     return contextValue;
   }, [
     courseId,
     courseDetails,
     courseDetailStatus,
+    canChangeProviders,
   ]);
 
   return (

src/CourseAuthoringContext.tsx

@@ -4,9 +4,9 @@ import CourseAuthoringPage from './CourseAuthoringPage';
 import PagesAndResources from './pages-and-resources/PagesAndResources';
 import { executeThunk } from './utils';
 import { fetchCourseApps } from './pages-and-resources/data/thunks';
-import { fetchCourseDetail } from './data/thunks';
 import { getApiWaffleFlagsUrl } from './data/api';
 import { initializeMocks, render } from './testUtils';
+import { CourseAuthoringProvider } from './CourseAuthoringContext';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 let mockPathname = '/evilguy/';
@@ -19,6 +19,12 @@ jest.mock('react-router-dom', () => ({
 let axiosMock;
 let store;
 
+const renderComponent = children => render(
+  <CourseAuthoringProvider courseId={courseId}>
+    {children}
+  </CourseAuthoringProvider>,
+);
+
 beforeEach(async () => {
   const mocks = initializeMocks();
   store = mocks.reduxStore;
@@ -35,14 +41,13 @@ describe('Editor Pages Load no header', () => {
     axiosMock.onGet(`${courseAppsApiUrl}/${courseId}`).reply(200, {
       response: { status: 200 },
     });
-    await executeThunk(fetchCourseApps(courseId), store.dispatch);
   };
   test('renders no loading wheel on editor pages', async () => {
     mockPathname = '/editor/';
     await mockStoreSuccess();
-    const wrapper = render(
-      <CourseAuthoringPage courseId={courseId}>
-        <PagesAndResources courseId={courseId} />
+    const wrapper = renderComponent(
+      <CourseAuthoringPage>
+        <PagesAndResources />
       </CourseAuthoringPage>
       ,
     );
@@ -51,9 +56,9 @@ describe('Editor Pages Load no header', () => {
   test('renders loading wheel on non editor pages', async () => {
     mockPathname = '/evilguy/';
     await mockStoreSuccess();
-    const wrapper = render(
-      <CourseAuthoringPage courseId={courseId}>
-        <PagesAndResources courseId={courseId} />
+    const wrapper = renderComponent(
+      <CourseAuthoringPage>
+        <PagesAndResources />
       </CourseAuthoringPage>
       ,
     );
@@ -70,19 +75,17 @@ describe('Course authoring page', () => {
     ).reply(404, {
       response: { status: 404 },
     });
-    await executeThunk(fetchCourseDetail(courseId), store.dispatch);
   };
   const mockStoreError = async () => {
     axiosMock.onGet(
       `${courseDetailApiUrl}/${courseId}?username=abc123`,
     ).reply(500, {
       response: { status: 500 },
     });
-    await executeThunk(fetchCourseDetail(courseId), store.dispatch);
   };
   test('renders not found page on non-existent course key', async () => {
     await mockStoreNotFound();
-    const wrapper = render(<CourseAuthoringPage courseId={courseId} />);
+    const wrapper = renderComponent(<CourseAuthoringPage />);
     expect(await wrapper.findByTestId('notFoundAlert')).toBeInTheDocument();
   });
   test('does not render not found page on other kinds of error', async () => {
@@ -92,8 +95,8 @@ describe('Course authoring page', () => {
     // IN_PROGRESS but also not NOT_FOUND or DENIED- then check that the not
     // found alert is not present.
     const contentTestId = 'courseAuthoringPageContent';
-    const wrapper = render(
-      <CourseAuthoringPage courseId={courseId}>
+    const wrapper = renderComponent(
+      <CourseAuthoringPage>
         <div data-testid={contentTestId} />
       </CourseAuthoringPage>
       ,
@@ -114,7 +117,7 @@ describe('Course authoring page', () => {
     mockPathname = '/editor/';
     await mockStoreDenied();
 
-    const wrapper = render(<CourseAuthoringPage courseId={courseId} />);
+    const wrapper = renderComponent(<CourseAuthoringPage />);
     expect(await wrapper.findByTestId('permissionDeniedAlert')).toBeInTheDocument();
   });
 });

src/CourseAuthoringPage.test.jsx src/CourseAuthoringPage.test.tsxsrc/CourseAuthoringPage.test.jsx renamed to src/CourseAuthoringPage.test.tsx

@@ -48,7 +48,11 @@ jest.mock('./custom-pages/CustomPages', () => (props) => {
 
 describe('<CourseAuthoringRoutes>', () => {
   beforeEach(async () => {
-    const { axiosMock } = initializeMocks();
+    const user = {
+      userId: 1,
+      username: 'username',
+    };
+    const { axiosMock } = initializeMocks({ user });
     axiosMock
       .onGet(getApiWaffleFlagsUrl(courseId))
       .reply(200, {});
@@ -61,11 +65,7 @@ describe('<CourseAuthoringRoutes>', () => {
     );
     await waitFor(() => {
       expect(screen.getByText(pagesAndResourcesMockText)).toBeVisible();
-      expect(mockComponentFn).toHaveBeenCalledWith(
-        expect.objectContaining({
-          courseId,
-        }),
-      );
+      expect(mockComponentFn).toHaveBeenCalled();
     });
   });
 
@@ -93,11 +93,7 @@ describe('<CourseAuthoringRoutes>', () => {
     await waitFor(() => {
       expect(screen.queryByText(videoSelectorContainerMockText)).toBeInTheDocument();
       expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
-      expect(mockComponentFn).toHaveBeenCalledWith(
-        expect.objectContaining({
-          courseId,
-        }),
-      );
+      expect(mockComponentFn).toHaveBeenCalled();
     });
   });
 });

src/CourseAuthoringRoutes.test.jsx src/CourseAuthoringRoutes.test.tsxsrc/CourseAuthoringRoutes.test.jsx renamed to src/CourseAuthoringRoutes.test.tsx

@@ -47,6 +47,11 @@ import { CourseAuthoringProvider } from './CourseAuthoringContext';
 const CourseAuthoringRoutes = () => {
   const { courseId } = useParams();
 
+  if (courseId === undefined) {
+    // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
+    throw new Error('Error: route is missing courseId.');
+  }
+
   return (
     <CourseAuthoringProvider courseId={courseId}>
       <CourseAuthoringPage>

src/CourseAuthoringRoutes.jsx src/CourseAuthoringRoutes.tsxsrc/CourseAuthoringRoutes.jsx renamed to src/CourseAuthoringRoutes.tsx

@@ -5,8 +5,8 @@ import {
 } from '@openedx/paragon';
 import { CheckCircle, Info, Warning } from '@openedx/paragon/icons';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import Placeholder from '../editors/Placeholder';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import Placeholder from '../editors/Placeholder';
 
 import AlertProctoringError from '../generic/AlertProctoringError';
 import InternetConnectionAlert from '../generic/internet-connection-alert';

src/advanced-settings/AdvancedSettings.jsx

@@ -1,10 +1,10 @@
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import {
   render as baseRender,
   fireEvent,
   initializeMocks,
   waitFor,
 } from '../testUtils';
-import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { executeThunk } from '../utils';
 import { advancedSettingsMock } from './__mocks__';
 import { getCourseAdvancedSettingsApiUrl } from './data/api';

src/advanced-settings/AdvancedSettings.test.jsx

@@ -1,6 +1,7 @@
 // @ts-check
 import userEvent from '@testing-library/user-event';
 
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { initializeMocks, render, waitFor } from '../testUtils';
 import { RequestStatus } from '../data/constants';
 import { executeThunk } from '../utils';
@@ -9,7 +10,6 @@ import { fetchCertificates } from './data/thunks';
 import { certificatesDataMock } from './__mocks__';
 import Certificates from './Certificates';
 import messages from './messages';
-import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 
 let axiosMock;
 let store;
@@ -18,7 +18,7 @@ const courseId = 'course-123';
 const renderComponent = (props) => render(
   <CourseAuthoringProvider courseId={courseId}>
     <Certificates {...props} />
-  </CourseAuthoringProvider>
+  </CourseAuthoringProvider>,
 );
 
 describe('Certificates', () => {

src/certificates/Certificates.test.jsx

@@ -6,6 +6,7 @@ import {
 } from '@src/testUtils';
 import '@testing-library/jest-dom';
 import { getConfig, setConfig } from '@edx/frontend-platform';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { RequestStatus } from '../data/constants';
 import { executeThunk } from '../utils';
 import { getCourseLaunchApiUrl, getCourseBestPracticesApiUrl } from './data/api';
@@ -17,7 +18,6 @@ import {
 } from './factories/mockApiResponses';
 import messages from './messages';
 import CourseChecklist from './index';
-import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 
 let axiosMock;
 let store;