Feat course optimizer page

src/CourseAuthoringRoutes.jsx

@@ -20,6 +20,7 @@ import { CourseUpdates } from './course-updates';
 import { CourseUnit } from './course-unit';
 import { Certificates } from './certificates';
 import CourseExportPage from './export-page/CourseExportPage';
+import CourseOptimizerPage from './optimizer-page/CourseOptimizerPage';
 import CourseImportPage from './import-page/CourseImportPage';
 import { DECODED_ROUTES } from './constants';
 import CourseChecklist from './course-checklist';
@@ -118,6 +119,10 @@ const CourseAuthoringRoutes = () => {
           path="export"
           element={<PageWrap><CourseExportPage courseId={courseId} /></PageWrap>}
         />
+        <Route
+          path="optimizer"
+          element={<PageWrap><CourseOptimizerPage courseId={courseId} /></PageWrap>}
+        />
         <Route
           path="checklists"
           element={<PageWrap><CourseChecklist courseId={courseId} /></PageWrap>}

src/data/constants.js

@@ -15,6 +15,13 @@ export const RequestStatus = /** @type {const} */ ({
   NOT_FOUND: 'not-found',
 });
 
+export const RequestFailureStatuses = [
+  RequestStatus.FAILED,
+  RequestStatus.DENIED,
+  RequestStatus.PARTIAL_FAILURE,
+  RequestStatus.NOT_FOUND,
+];
+
 /**
  * Team sizes enum
  * @enum

src/header/hooks.js

@@ -103,6 +103,10 @@
       href: `/course/${courseId}/checklists`,
       title: intl.formatMessage(messages['header.links.checklists']),
     },
+    ...(waffleFlags.enableCourseOptimizer ? [{
+      href: `/course/${courseId}/optimizer`,
+      title: intl.formatMessage(messages['header.links.optimizer']),
+    }] : []),
   ];
   return items;
 };

src/header/messages.js

@@ -96,6 +96,11 @@ const messages = defineMessages({
     defaultMessage: 'Export Course',
     description: 'Link to Studio Export page',
   },
+  'header.links.optimizer': {
+    id: 'header.links.optimizer',
+    defaultMessage: 'Optimize Course',
+    description: 'Fix broken links and other issues in your course',
+  },
   'header.links.exportTags': {
     id: 'header.links.exportTags',
     defaultMessage: 'Export Tags',

src/index.scss

@@ -31,6 +31,7 @@
 @import "search-manager";
 @import "certificates/scss/Certificates";
 @import "group-configurations/GroupConfigurations";
+@import "optimizer-page/scan-results/ScanResults";
 
 // To apply the glow effect to the selected Section/Subsection, in the Course Outline
 div.row:has(> div > div.highlight) {

src/optimizer-page/CourseOptimizerPage.test.js

@@ -0,0 +1,170 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable react/jsx-filename-extension */
+import {
+  fireEvent, render, waitFor, screen,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import MockAdapter from 'axios-mock-adapter';
+import initializeStore from '../store';
+import messages from './messages';
+import generalMessages from '../messages';
+import scanResultsMessages from './scan-results/messages';
+import CourseOptimizerPage, { pollLinkCheckDuringScan } from './CourseOptimizerPage';
+import { postLinkCheckCourseApiUrl, getLinkCheckStatusApiUrl } from './data/api';
+import mockApiResponse from './mocks/mockApiResponse';
+import * as thunks from './data/thunks';
+
+let store;
+let axiosMock;
+const courseId = '123';
+const courseName = 'About Node JS';
+
+jest.mock('../generic/model-store', () => ({
+  useModel: jest.fn().mockReturnValue({
+    name: courseName,
+  }),
+}));
+
+const OptimizerPage = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <CourseOptimizerPage courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('CourseOptimizerPage', () => {
+  describe('pollLinkCheckDuringScan', () => {
+    let mockFetchLinkCheckStatus;
+    beforeEach(() => {
+      mockFetchLinkCheckStatus = jest.fn();
+      jest.spyOn(thunks, 'fetchLinkCheckStatus').mockImplementation(mockFetchLinkCheckStatus);
+      jest.useFakeTimers();
+      jest.spyOn(global, 'setInterval').mockImplementation((cb) => { cb(); return true; });
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
+      jest.useRealTimers();
+      jest.restoreAllMocks();
+    });
+
+    it('should start polling if linkCheckInProgress has never been started (is null)', () => {
+      const linkCheckInProgress = null;
+      const interval = { current: null };
+      const dispatch = jest.fn();
+      const courseId = 'course-123';
+      pollLinkCheckDuringScan(linkCheckInProgress, interval, dispatch, courseId);
+      expect(interval.current).toBeTruthy();
+      expect(mockFetchLinkCheckStatus).toHaveBeenCalled();
+    });
+
+    it('should start polling if link check is in progress', () => {
+      const linkCheckInProgress = true;
+      const interval = { current: null };
+      const dispatch = jest.fn();
+      const courseId = 'course-123';
+      pollLinkCheckDuringScan(linkCheckInProgress, interval, dispatch, courseId);
+      expect(interval.current).toBeTruthy();
+    });
+    it('should not start polling if link check is not in progress', () => {
+      const linkCheckInProgress = false;
+      const interval = { current: null };
+      const dispatch = jest.fn();
+      const courseId = 'course-123';
+      pollLinkCheckDuringScan(linkCheckInProgress, interval, dispatch, courseId);
+      expect(interval.current).toBeFalsy();
+    });
+    it('should clear the interval if link check is finished', () => {
+      const linkCheckInProgress = false;
+      const interval = { current: 1 };
+      const dispatch = jest.fn();
+      const courseId = 'course-123';
+      pollLinkCheckDuringScan(linkCheckInProgress, interval, dispatch, courseId);
+      expect(interval.current).toBeUndefined();
+    });
+  });
+
+  describe('CourseOptimizerPage component', () => {
+    beforeEach(() => {
+      jest.useRealTimers();
+      jest.clearAllMocks();
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: true,
+          roles: [],
+        },
+      });
+      store = initializeStore();
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      axiosMock
+        .onPost(postLinkCheckCourseApiUrl(courseId))
+        .reply(200, { LinkCheckStatus: 'In-Progress' });
+      axiosMock
+        .onGet(getLinkCheckStatusApiUrl(courseId))
+        .reply(200, mockApiResponse);
+    });
+
+    it('should render the component', () => {
+      const { getByText, queryByText } = render(<OptimizerPage />);
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.buttonTitle.defaultMessage)).toBeInTheDocument();
+      expect(queryByText(messages.preparingStepTitle)).not.toBeInTheDocument();
+    });
+
+    it('should start scan after clicking the scan button', async () => {
+      const { getByText } = render(<OptimizerPage />);
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      fireEvent.click(getByText(messages.buttonTitle.defaultMessage));
+      await waitFor(() => {
+        expect(getByText(messages.preparingStepTitle.defaultMessage)).toBeInTheDocument();
+      });
+    });
+
+    it('should list broken links results', async () => {
+      const { getByText, getAllByText, container } = render(<OptimizerPage />);
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      fireEvent.click(getByText(messages.buttonTitle.defaultMessage));
+      await waitFor(() => {
+        expect(getByText('5 broken links')).toBeInTheDocument();
+      });
+      const collapsibleTrigger = container.querySelector('.collapsible-trigger');
+      expect(collapsibleTrigger).toBeInTheDocument();
+      fireEvent.click(collapsibleTrigger);
+      await waitFor(() => {
+        expect(getAllByText(scanResultsMessages.brokenLinkStatus.defaultMessage)[0]).toBeInTheDocument();
+        expect(getAllByText(scanResultsMessages.lockedLinkStatus.defaultMessage)[0]).toBeInTheDocument();
+      });
+    });
+
+    it('should show no broken links found message', async () => {
+      axiosMock
+        .onGet(getLinkCheckStatusApiUrl(courseId))
+        .reply(200, { LinkCheckStatus: 'Succeeded' });
+      const { getByText } = render(<OptimizerPage />);
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      fireEvent.click(getByText(messages.buttonTitle.defaultMessage));
+      await waitFor(() => {
+        expect(getByText(scanResultsMessages.noBrokenLinksCard.defaultMessage)).toBeInTheDocument();
+      });
+    });
+
+    it('should show error message if request does not go through', async () => {
+      axiosMock
+        .onPost(postLinkCheckCourseApiUrl(courseId))
+        .reply(500);
+      render(<OptimizerPage />);
+      expect(screen.getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      fireEvent.click(screen.getByText(messages.buttonTitle.defaultMessage));
+      await waitFor(() => {
+        expect(screen.getByText(generalMessages.supportText.defaultMessage)).toBeInTheDocument();
+      });
+    });
+  });
+});