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/generic/course-stepper/index.jsx

@@ -25,6 +25,10 @@
     const isLastStepDone = isLastStep && isActiveStep;
     const completedStep = index < activeKey && !hasError;
 
+    console.log('current step', index);
+    console.log('activeKey', activeKey);
+    console.log('lastStepIndex', lastStepIndex);
+
     const getStepIcon = () => {
       if (completedStep) {
         return CheckCircle;

src/header/hooks.js

@@ -103,6 +103,10 @@ export const useToolsMenuItems = courseId => {
       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,147 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable react/jsx-filename-extension */
+import {
+  fireEvent, queryByText, render, waitFor,
+} 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 { get } from 'lodash';
+import initializeStore from '../store';
+import messages from './messages';
+import scanResultsMessages from './scan-results/messages';
+import CourseOptimizerPage, { pollLinkCheckDuringScan } from './CourseOptimizerPage';
+import { postLinkCheckCourseApiUrl, getLinkCheckStatusApiUrl } from './data/api';
+import mockApiResponse from './mocks/mockApiResponse';
+
+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', () => {
+    it('should start polling if linkCheckInProgress has never been started (is null)', () => {
+      const linkCheckInProgress = null;
+      const linkCheckResult = 'someresult';
+      const interval = { current: null };
+      const dispatch = jest.fn();
+      const courseId = 'course-123';
+      pollLinkCheckDuringScan(linkCheckInProgress, linkCheckResult, interval, dispatch, courseId);
+      expect(interval.current).not.toBeNull();
+    });
+
+    it('should start polling if link check is in progress', () => {
+      const linkCheckInProgress = true;
+      const linkCheckResult = 'someresult';
+      const interval = { current: null };
+      const dispatch = jest.fn();
+      const courseId = 'course-123';
+      pollLinkCheckDuringScan(linkCheckInProgress, linkCheckResult, interval, dispatch, courseId);
+      expect(interval.current).not.toBeNull();
+    });
+    it('should not start polling if link check is not in progress', () => {
+      const linkCheckInProgress = false;
+      const linkCheckResult = null;
+      const interval = { current: null };
+      const dispatch = jest.fn();
+      const courseId = 'course-123';
+      pollLinkCheckDuringScan(linkCheckInProgress, linkCheckResult, interval, dispatch, courseId);
+      expect(interval.current).toBeNull();
+    });
+    it('should clear the interval if link check is finished', () => {
+      const linkCheckInProgress = false;
+      const linkCheckResult = null;
+      const interval = { current: 1 };
+      const dispatch = jest.fn();
+      const courseId = 'course-123';
+      pollLinkCheckDuringScan(linkCheckInProgress, linkCheckResult, interval, dispatch, courseId);
+      expect(interval.current).toBeNull();
+    });
+  });
+
+  describe('CourseOptimizerPage component', () => {
+    beforeEach(() => {
+      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);
+    });
+
+    // postLinkCheckCourseApiUrl
+    // getLinkCheckStatusApiUrl
+
+    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();
+      });
+    });
+  });
+});

src/optimizer-page/CourseOptimizerPage.tsx

@@ -0,0 +1,174 @@
+/* eslint-disable no-param-reassign */
+import {
+  useEffect, useRef, FC, MutableRefObject,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Container, Layout, Button, Card,
+} from '@openedx/paragon';
+import { Search as SearchIcon } from '@openedx/paragon/icons';
+import { Helmet } from 'react-helmet';
+
+import CourseStepper from '../generic/course-stepper';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+import SubHeader from '../generic/sub-header/SubHeader';
+import { RequestStatus } from '../data/constants';
+import messages from './messages';
+import {
+  getCurrentStage, getError, getLinkCheckInProgress, getLoadingStatus, getLinkCheckResult,
+  getLastScannedAt,
+} from './data/selectors';
+import { startLinkCheck, fetchLinkCheckStatus } from './data/thunks';
+import { useModel } from '../generic/model-store';
+import ScanResults from './scan-results';
+
+const pollLinkCheckStatus = (dispatch: any, courseId: string, delay: number): number => {
+  const interval = setInterval(() => {
+    dispatch(fetchLinkCheckStatus(courseId));
+  }, delay);
+  return interval as unknown as number;
+};
+
+export function pollLinkCheckDuringScan(
+  linkCheckInProgress: boolean | null,
+  interval: MutableRefObject<number | undefined>,
+  dispatch: any,
+  courseId: string,
+) {
+  if (linkCheckInProgress === null || linkCheckInProgress) {
+    clearInterval(interval.current as number | undefined);
+    interval.current = pollLinkCheckStatus(dispatch, courseId, 2000);
+  } else if (interval.current) {
+    clearInterval(interval.current);
+    interval.current = undefined;
+  }
+}
+
+const CourseOptimizerPage: FC<{ courseId: string }> = ({ courseId }) => {
+  const dispatch = useDispatch();
+  const linkCheckInProgress = useSelector(getLinkCheckInProgress);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const currentStage = useSelector(getCurrentStage);
+  const linkCheckResult = useSelector(getLinkCheckResult);
+  const lastScannedAt = useSelector(getLastScannedAt);
+  const { msg: errorMessage } = useSelector(getError);
+  const isShowExportButton = !linkCheckInProgress || errorMessage;
+  const isLoadingDenied = loadingStatus === RequestStatus.DENIED;
+  const interval = useRef<number | undefined>(undefined);
+  const courseDetails = useModel('courseDetails', courseId);
+  const linkCheckPresent = !!currentStage;
+  const intl = useIntl();
+
+  const courseStepperSteps = [
+    {
+      title: intl.formatMessage(messages.preparingStepTitle),
+      description: intl.formatMessage(messages.preparingStepDescription),
+      key: 'course-step-preparing',
+    },
+    {
+      title: intl.formatMessage(messages.scanningStepTitle),
+      description: intl.formatMessage(messages.scanningStepDescription),
+      key: 'course-step-scanning',
+    },
+    {
+      title: intl.formatMessage(messages.successStepTitle),
+      description: intl.formatMessage(messages.successStepDescription),
+      key: 'course-step-success',
+    },
+  ];
+
+  useEffect(() => {
+    // when first entering the page, fetch any existing scan results
+    dispatch(fetchLinkCheckStatus(courseId));
+  }, []);
+
+  useEffect(() => {
+    // when a scan starts, start polling for the results as long as the scan status fetched
+    // signals it is still in progress
+    pollLinkCheckDuringScan(linkCheckInProgress, interval, dispatch, courseId);
+
+    return () => {
+      if (interval.current) { clearInterval(interval.current); }
+    };
+  }, [linkCheckInProgress, linkCheckResult]);
+
+  if (isLoadingDenied) {
+    if (interval.current) { clearInterval(interval.current); }
+
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {intl.formatMessage(messages.pageTitle, {
+            headingTitle: intl.formatMessage(messages.headingTitle),
+            courseName: courseDetails?.name,
+            siteName: process.env.SITE_NAME,
+          })}
+        </title>
+      </Helmet>
+      <Container size="xl" className="mt-4 px-4 export">
+        <section className="setting-items mb-4">
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <article>
+                <SubHeader
+                  title={intl.formatMessage(messages.headingTitle)}
+                  subtitle={intl.formatMessage(messages.headingSubtitle)}
+                />
+                <p className="small">{intl.formatMessage(messages.description1)}</p>
+                <p className="small">{intl.formatMessage(messages.description2)}</p>
+                <Card>
+                  <Card.Header
+                    className="h3 px-3 text-black mb-4"
+                    title={intl.formatMessage(messages.card1Title)}
+                  />
+                  {isShowExportButton && (
+                  <Card.Section className="px-3 py-1">
+                    <Button
+                      size="lg"
+                      block
+                      className="mb-4"
+                      onClick={() => dispatch(startLinkCheck(courseId))}
+                      iconBefore={SearchIcon}
+                    >
+                      {intl.formatMessage(messages.buttonTitle)} {lastScannedAt && `(${intl.formatMessage(messages.lastScannedOn)} ${intl.formatDate(lastScannedAt, { year: 'numeric', month: 'long', day: 'numeric' })})`}
+                    </Button>
+                  </Card.Section>
+                  )}
+                  {linkCheckPresent && (
+                  <Card.Section className="px-3 py-1">
+                    <CourseStepper
+                      // @ts-ignore
+                      steps={courseStepperSteps}
+                      activeKey={currentStage}
+                      hasError={currentStage < 0 || !!errorMessage}
+                      errorMessage={errorMessage}
+                    />
+                  </Card.Section>
+                  )}
+                </Card>
+                {linkCheckPresent && <ScanResults data={linkCheckResult} />}
+              </article>
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+    </>
+  );
+};
+
+export default CourseOptimizerPage;