refactor: improve course outline page

src/course-outline/CourseOutline.jsx

@@ -50,7 +50,7 @@ const CourseOutline = ({ courseId }) => {
 
   return (
     <>
-      <Container size="xl" className="m-4">
+      <Container size="xl" className="px-4">
         <section className="course-outline-container mb-4 mt-5">
           <TransitionReplace>
             {showSuccessAlert ? (
@@ -71,7 +71,6 @@ const CourseOutline = ({ courseId }) => {
             className="mt-5"
             title={intl.formatMessage(messages.headingTitle)}
             subtitle={intl.formatMessage(messages.headingSubtitle)}
-            withSubHeaderContent={false}
             headerActions={(
               <HeaderNavigations
                 isReIndexShow={isReIndexShow}
@@ -84,8 +83,8 @@ const CourseOutline = ({ courseId }) => {
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}
             md={[{ span: 9 }, { span: 3 }]}
-            sm={[{ span: 9 }, { span: 3 }]}
-            xs={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 12 }, { span: 12 }]}
+            xs={[{ span: 12 }, { span: 12 }]}
             xl={[{ span: 9 }, { span: 3 }]}
           >
             <Layout.Element>
@@ -94,7 +93,7 @@ const CourseOutline = ({ courseId }) => {
                   <section className="course-outline-section">
                     <StatusBar
                       courseId={courseId}
-                      isLaoding={isLoading}
+                      isLoading={isLoading}
                       statusBarData={statusBarData}
                       openEnableHighlightsModal={openEnableHighlightsModal}
                     />

src/course-outline/data/api.js

@@ -2,22 +2,27 @@ import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
 export const getCourseOutlineIndexApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_index/${courseId}`;
+
 export const getCourseBestPracticesApiUrl = ({
   courseId,
   excludeGraded,
   all,
 }) => `${getApiBaseUrl()}/api/courses/v1/quality/${courseId}/?exclude_graded=${excludeGraded}&all=${all}`;
+
 export const getCourseLaunchApiUrl = ({
   courseId,
   gradedOnly,
   validateOras,
   all,
 }) => `${getApiBaseUrl()}/api/courses/v1/validation/${courseId}/?graded_only=${gradedOnly}&validate_oras=${validateOras}&all=${all}`;
+
 export const getEnableHighlightsEmailsApiUrl = (courseId) => {
   const formattedCourseId = courseId.split('course-v1:')[1];
   return `${getApiBaseUrl()}/xblock/block-v1:${formattedCourseId}+type@course+block@course`;
 };
+
 export const getCourseReindexApiUrl = (reindexLink) => `${getApiBaseUrl()}${reindexLink}`;
 
 /**

src/course-outline/header-navigations/HeaderNavigation.test.jsx

@@ -22,6 +22,7 @@ const renderComponent = (props) => render(
     <HeaderNavigations
       headerNavigationsActions={headerNavigationsActions}
       isSectionsExpanded={false}
+      isDisabledReindexButton={false}
       isReIndexShow
       {...props}
     />

src/course-outline/hooks.jsx

@@ -54,7 +54,6 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const handleEnableHighlightsSubmit = () => {
-    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
     dispatch(enableCourseHighlightsEmailsQuery(courseId));
     closeEnableHighlightsModal();
   };

src/course-outline/outline-sidebar/OutlineSidebar.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Hyperlink } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import HelpSidebar from '../../generic/help-sidebar';
+import { HelpSidebar } from '../../generic/help-sidebar';
 import { useHelpUrls } from '../../help-urls/hooks';
 import { getFormattedSidebarMessages } from './utils';
 
@@ -41,7 +41,7 @@ const OutlineSideBar = ({ courseId }) => {
             {descriptions.map((description) => (
               <p className="help-sidebar-about-descriptions" key={description}>{description}</p>
             ))}
-            {Boolean(link) && (
+            {Boolean(link) && Boolean(link.href) && (
               <Hyperlink
                 className="small"
                 destination={link.href}

src/course-outline/outline-sidebar/OutlineSidebar.test.jsx

@@ -1,13 +1,18 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 
+import { helpUrls } from '../../help-urls/__mocks__';
+import { getHelpUrlsApiUrl } from '../../help-urls/data/api';
 import initializeStore from '../../store';
 import OutlineSidebar from './OutlineSidebar';
 import messages from './messages';
 
+let axiosMock;
 let store;
 const mockPathname = '/foo-bar';
 const courseId = '123';
@@ -38,32 +43,38 @@ describe('<OutlineSidebar />', () => {
       },
     });
     store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getHelpUrlsApiUrl())
+      .reply(200, helpUrls);
   });
 
-  it('render OutlineSidebar component correctly', () => {
+  it('render OutlineSidebar component correctly', async () => {
     const { getByText } = renderComponent();
 
-    expect(getByText(messages.section_1_title.defaultMessage)).toBeInTheDocument();
-    expect(getByText(messages.section_1_descriptions_1.defaultMessage)).toBeInTheDocument();
-    expect(getByText(messages.section_1_descriptions_2.defaultMessage)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(getByText(messages.section_1_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_1_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_1_descriptions_2.defaultMessage)).toBeInTheDocument();
 
-    expect(getByText(messages.section_2_title.defaultMessage)).toBeInTheDocument();
-    expect(getByText(messages.section_2_descriptions_1.defaultMessage)).toBeInTheDocument();
-    expect(getByText(messages.section_2_link.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_2_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_2_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_2_link.defaultMessage)).toBeInTheDocument();
 
-    expect(getByText(messages.section_3_title.defaultMessage)).toBeInTheDocument();
-    expect(getByText(messages.section_3_descriptions_1.defaultMessage)).toBeInTheDocument();
-    expect(getByText(messages.section_3_link.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_3_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_3_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_3_link.defaultMessage)).toBeInTheDocument();
 
-    expect(getByText(messages.section_4_title.defaultMessage)).toBeInTheDocument();
-    expect(getByText(messages.section_4_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_4_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_4_descriptions_1.defaultMessage)).toBeInTheDocument();
 
-    expect(getByText(/To make a section, subsection, or unit unavailable to learners, select the Configure icon for that level, then select the appropriate/i)).toBeInTheDocument();
-    expect(getByText(/option. Grades for hidden sections, subsections, and units are not included in grade calculations./i)).toBeInTheDocument();
+      expect(getByText(/To make a section, subsection, or unit unavailable to learners, select the Configure icon for that level, then select the appropriate/i)).toBeInTheDocument();
+      expect(getByText(/option. Grades for hidden sections, subsections, and units are not included in grade calculations./i)).toBeInTheDocument();
 
-    expect(getByText(/To hide the content of a subsection from learners after the subsection due date has passed, select the Configure icon for a subsection, then select/i)).toBeInTheDocument();
-    expect(getByText(/Grades for the subsection remain included in grade calculations./i)).toBeInTheDocument();
+      expect(getByText(/To hide the content of a subsection from learners after the subsection due date has passed, select the Configure icon for a subsection, then select/i)).toBeInTheDocument();
+      expect(getByText(/Grades for the subsection remain included in grade calculations./i)).toBeInTheDocument();
 
-    expect(getByText(messages.section_4_link.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_4_link.defaultMessage)).toBeInTheDocument();
+    });
   });
 });

src/course-outline/status-bar/StatusBar.jsx

@@ -59,7 +59,7 @@ const StatusBar = ({
             : intl.formatMessage(messages.pacingTypeInstructorPaced)}
         </span>
       </div>
-      <div className="outline-status-bar__item">
+      <div className="outline-status-bar__item mr-4">
         <h5 className="h5">{intl.formatMessage(messages.checklistTitle)}</h5>
         <Hyperlink
           className="small"
@@ -69,7 +69,7 @@ const StatusBar = ({
           {checkListTitle} {intl.formatMessage(messages.checklistCompleted)}
         </Hyperlink>
       </div>
-      <div className="outline-status-bar__item">
+      <div className="outline-status-bar__item ml-4">
         <h5 className="h5">{intl.formatMessage(messages.highlightEmailsTitle)}</h5>
         <div className="d-flex align-items-end">
           {highlightsEnabledForMessaging ? (

src/course-outline/status-bar/StatusBar.scss

@@ -2,7 +2,7 @@
   .outline-status-bar__item {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: space-evenly;
     min-height: 3.75rem;
 
     & h5 {

src/generic/sub-header/SubHeader.jsx

@@ -11,7 +11,6 @@ const SubHeader = ({
   headerActions,
   titleActions,
   hideBorder,
-  withSubHeaderContent,
 }) => (
   <div className={`${!hideBorder && 'border-bottom border-light-400'} mb-3`}>
     <header className="sub-header">
@@ -30,7 +29,7 @@ const SubHeader = ({
         </ActionRow>
       )}
     </header>
-    {contentTitle && withSubHeaderContent && (
+    {contentTitle && (
       <header className="sub-header-content">
         <h2 className="sub-header-content-title">{contentTitle}</h2>
         <span className="small text-gray-700">{description}</span>
@@ -49,7 +48,6 @@ SubHeader.defaultProps = {
   headerActions: null,
   titleActions: null,
   hideBorder: false,
-  withSubHeaderContent: true,
 };
 SubHeader.propTypes = {
   title: PropTypes.string.isRequired,
@@ -63,6 +61,5 @@ SubHeader.propTypes = {
   headerActions: PropTypes.node,
   titleActions: PropTypes.node,
   hideBorder: PropTypes.bool,
-  withSubHeaderContent: PropTypes.bool,
 };
 export default SubHeader;

src/help-urls/__mocks__/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as helpUrls } from './helpUrls';

src/help-urls/data/api.js

@@ -2,8 +2,10 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+export const getHelpUrlsApiUrl = () => `${getConfig().STUDIO_BASE_URL}/api/contentstore/v1/help_urls`;
+
 export async function getHelpUrls() {
   const { data } = await getAuthenticatedHttpClient()
-    .get(`${getConfig().STUDIO_BASE_URL}/api/contentstore/v1/help_urls`);
+    .get(getHelpUrlsApiUrl());
   return camelCaseObject(data);
 }