fix: [AXIMST-14] Course unit - New unit btn, Replacing LMS endpoints with CMS endpoints

.env.development

@@ -34,7 +34,7 @@ ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
 ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
-ENABLE_UNIT_PAGE = false
+ENABLE_UNIT_PAGE = true
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = false
 ENABLE_TAGGING_TAXONOMY_PAGES = true
 BBB_LEARN_MORE_URL=''

package.json

@@ -71,6 +71,7 @@
     "react-textarea-autosize": "^8.4.1",
     "react-transition-group": "4.4.5",
     "redux": "4.0.5",
+    "redux-mock-store": "^1.5.4",
     "regenerator-runtime": "0.13.7",
     "universal-cookie": "^4.0.4",
     "uuid": "^3.4.0",

src/CourseAuthoringRoutes.jsx

@@ -3,7 +3,6 @@ import {
   Navigate, Routes, Route, useParams,
 } from 'react-router-dom';
 import { PageWrap } from '@edx/frontend-platform/react';
-import Placeholder from '@edx/frontend-lib-content-components';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
 import EditorContainer from './editors/EditorContainer';
@@ -16,8 +15,10 @@ import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
 import { CourseUpdates } from './course-updates';
+import { CourseUnit } from './course-unit';
 import CourseExportPage from './export-page/CourseExportPage';
 import CourseImportPage from './import-page/CourseImportPage';
+import { DECODED_ROUTES } from './constants';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:
@@ -69,10 +70,12 @@ const CourseAuthoringRoutes = () => {
           path="custom-pages/*"
           element={<PageWrap><CustomPages courseId={courseId} /></PageWrap>}
         />
-        <Route
-          path="/container/:blockId"
-          element={process.env.ENABLE_UNIT_PAGE === 'true' ? <PageWrap><Placeholder /></PageWrap> : null}
-        />
+        {DECODED_ROUTES.COURSE_UNIT.map((path) => (
+          <Route
+            path={path}
+            element={process.env.ENABLE_UNIT_PAGE === 'true' ? <PageWrap><CourseUnit courseId={courseId} /></PageWrap> : null}
+          />
+        ))}
         <Route
           path="editor/course-videos/:blockId"
           element={process.env.ENABLE_NEW_EDITOR_PAGES === 'true' ? <PageWrap><VideoSelectorContainer courseId={courseId} /></PageWrap> : null}

src/constants.js

@@ -23,6 +23,7 @@ export const NOTIFICATION_MESSAGES = {
   saving: 'Saving',
   duplicating: 'Duplicating',
   deleting: 'Deleting',
+  adding: 'Adding',
   empty: '',
 };
 
@@ -35,3 +36,10 @@ export const COURSE_CREATOR_STATES = {
   denied: 'denied',
   disallowedForThisSite: 'disallowed_for_this_site',
 };
+
+export const DECODED_ROUTES = {
+  COURSE_UNIT: [
+    '/container/:blockId/:sequenceId',
+    '/container/:blockId',
+  ],
+};

src/course-outline/CourseOutline.jsx

@@ -1,6 +1,4 @@
-import {
-  React, useState, useEffect,
-} from 'react';
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -40,7 +38,9 @@ import EmptyPlaceholder from './empty-placeholder/EmptyPlaceholder';
 import PublishModal from './publish-modal/PublishModal';
 import ConfigureModal from './configure-modal/ConfigureModal';
 import DeleteModal from './delete-modal/DeleteModal';
-import { useCourseOutline } from './hooks';
+import {
+  useCourseOutline, useScrollToLocatorElement,
+} from './hooks';
 import messages from './messages';
 
 const CourseOutline = ({ courseId }) => {
@@ -88,6 +88,8 @@ const CourseOutline = ({ courseId }) => {
     handleDragNDrop,
   } = useCourseOutline({ courseId });
 
+  useScrollToLocatorElement({ isLoading });
+
   const [sections, setSections] = useState(sectionsList);
 
   const initialSections = [...sectionsList];

src/course-outline/CourseOutline.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   act, render, waitFor, cleanup, fireEvent, within,
 } from '@testing-library/react';
@@ -46,6 +45,8 @@ let axiosMock;
 let store;
 const mockPathname = '/foo-bar';
 const courseId = '123';
+const locatorSectionName = 'Demo Course Overview';
+const locatorSectionId = 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction';
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
@@ -54,6 +55,7 @@ jest.mock('react-router-dom', () => ({
   useLocation: () => ({
     pathname: mockPathname,
   }),
+  useSearchParams: () => [new URLSearchParams({ show: locatorSectionId })],
 }));
 
 jest.mock('../help-urls/hooks', () => ({
@@ -380,6 +382,18 @@ describe('<CourseOutline />', () => {
     expect(await findAllByTestId('section-card')).toHaveLength(5);
   });
 
+  it('check correct scrolling to the locator section when URL has a "show" param', async () => {
+    const scrollIntoViewFn = jest.fn();
+    window.HTMLElement.prototype.scrollIntoView = scrollIntoViewFn;
+    const { getByText } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByText(locatorSectionName)).toBeInTheDocument();
+      expect(scrollIntoViewFn).toHaveBeenCalled();
+      expect(scrollIntoViewFn).toHaveBeenCalledWith({ behavior: 'smooth' });
+    });
+  });
+
   it('check whether subsection is duplicated successfully', async () => {
     const { findAllByTestId } = render(<RootWrapper />);
     const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];

src/course-outline/card-header/CardHeader.jsx

@@ -27,6 +27,7 @@ import messages from './messages';
 const CardHeader = ({
   title,
   status,
+  sectionId,
   hasChanges,
   isExpanded,
   onClickPublish,
@@ -58,7 +59,11 @@ const CardHeader = ({
   });
 
   return (
-    <div className="item-card-header" data-testid={`${namePrefix}-card-header`}>
+    <div
+      className="item-card-header"
+      data-locator={sectionId}
+      data-testid={`${namePrefix}-card-header`}
+    >
       {isFormOpen ? (
         <Form.Group className="m-0">
           <Form.Control
@@ -167,6 +172,7 @@ const CardHeader = ({
 CardHeader.propTypes = {
   title: PropTypes.string.isRequired,
   status: PropTypes.string.isRequired,
+  sectionId: PropTypes.string.isRequired,
   hasChanges: PropTypes.bool.isRequired,
   isExpanded: PropTypes.bool.isRequired,
   onExpand: PropTypes.func.isRequired,

src/course-outline/hooks.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
 import { useToggle } from '@edx/paragon';
 
 import { RequestStatus } from '../data/constants';
@@ -211,5 +212,24 @@ const useCourseOutline = ({ courseId }) => {
   };
 };
 
-// eslint-disable-next-line import/prefer-default-export
-export { useCourseOutline };
+const useScrollToLocatorElement = ({ isLoading }) => {
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const locator = searchParams.get('show');
+    if (!locator) {
+      return;
+    }
+
+    const locatorToShow = document.querySelector(`[data-locator="${locator}"]`);
+    if (!locatorToShow) {
+      return;
+    }
+    locatorToShow.scrollIntoView({ behavior: 'smooth' });
+  }, [isLoading]);
+};
+
+export {
+  useCourseOutline,
+  useScrollToLocatorElement,
+};

src/course-outline/subsection-card/SubsectionCard.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, useToggle } from '@edx/paragon';
 import { Add as IconAdd } from '@edx/paragon/icons';
@@ -24,7 +25,10 @@ const SubsectionCard = ({
   const currentRef = useRef(null);
   const intl = useIntl();
   const dispatch = useDispatch();
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [searchParams] = useSearchParams();
+  const locatorId = searchParams.get('show');
+  const isScrolledToElement = locatorId === subsection.id;
+  const [isExpanded, setIsExpanded] = useState(locatorId ? isScrolledToElement : false);
   const [isFormOpen, openForm, closeForm] = useToggle(false);
 
   const {
@@ -81,7 +85,12 @@ const SubsectionCard = ({
   }, [savingStatus]);
 
   return (
-    <div className="subsection-card" data-testid="subsection-card" ref={currentRef}>
+    <div
+      className="subsection-card"
+      data-locator={subsection.id}
+      data-testid="subsection-card"
+      ref={currentRef}
+    >
       <CardHeader
         title={displayName}
         status={subsectionStatus}

src/course-outline/subsection-card/SubsectionCard.test.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { render, fireEvent } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -38,25 +38,27 @@ const subsection = {
 
 const onEditSubectionSubmit = jest.fn();
 
-const renderComponent = (props) => render(
-  <AppProvider store={store}>
-    <IntlProvider locale="en">
-      <SubsectionCard
-        section={section}
-        subsection={subsection}
-        onOpenPublishModal={jest.fn()}
-        onOpenHighlightsModal={jest.fn()}
-        onOpenDeleteModal={jest.fn()}
-        onEditClick={jest.fn()}
-        savingStatus=""
-        onEditSubmit={onEditSubectionSubmit}
-        onDuplicateSubmit={jest.fn()}
-        namePrefix="subsection"
-        {...props}
-      >
-        <span>children</span>
-      </SubsectionCard>
-    </IntlProvider>,
+const renderComponent = (props, entry = '/') => render(
+  <AppProvider store={store} wrapWithRouter={false}>
+    <MemoryRouter initialEntries={[entry]}>
+      <IntlProvider locale="en">
+        <SubsectionCard
+          section={section}
+          subsection={subsection}
+          onOpenPublishModal={jest.fn()}
+          onOpenHighlightsModal={jest.fn()}
+          onOpenDeleteModal={jest.fn()}
+          onEditClick={jest.fn()}
+          savingStatus=""
+          onEditSubmit={onEditSubectionSubmit}
+          onDuplicateSubmit={jest.fn()}
+          namePrefix="subsection"
+          {...props}
+        >
+          <span>children</span>
+        </SubsectionCard>
+      </IntlProvider>
+    </MemoryRouter>
   </AppProvider>,
 );
 
@@ -122,4 +124,13 @@ describe('<SubsectionCard />', () => {
     fireEvent.keyDown(editField, { key: 'Enter', keyCode: 13 });
     expect(onEditSubectionSubmit).toHaveBeenCalled();
   });
+
+  it('check extended section when URL has a "show" param', async () => {
+    const { findByTestId } = renderComponent(null, `?show=${section.id}`);
+
+    const cardUnits = await findByTestId('subsection-card__units');
+    const newUnitButton = await findByTestId('new-unit-button');
+    expect(cardUnits).toBeInTheDocument();
+    expect(newUnitButton).toBeInTheDocument();
+  });
 });