feat: container info sidebar and add sidebar updates #2830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

navinkarkera wants to merge 57 commits into openedx:master from open-craft:navin/fal-4293/container-info-sidebar

+2,918 −1,282

src/CourseAuthoringContext.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,15 +1,27 @@
  
    import { getConfig } from '@edx/frontend-platform';

    import { createContext, useContext, useMemo } from 'react';

    import {

      createContext, useContext, useMemo, useState,

    } from 'react';

    import { getAuthenticatedUser } from '@edx/frontend-platform/auth';

    import { useCreateCourseBlock } from '@src/course-outline/data/apiHooks';

    import { getCourseItem } from '@src/course-outline/data/api';

    import { useDispatch, useSelector } from 'react-redux';

    import { addSection, addSubsection, updateSavingStatus } from '@src/course-outline/data/slice';

    import {

      addSection, addSubsection, addUnit, updateSavingStatus,

    } from '@src/course-outline/data/slice';

    import { useNavigate } from 'react-router';

    import { getOutlineIndexData } from '@src/course-outline/data/selectors';

    import { RequestStatus, RequestStatusType } from './data/constants';

    import { useCourseDetails, useWaffleFlags } from './data/apiHooks';

    import { useToggleWithValue } from '@src/hooks';

    import { SelectionState, XBlock } from '@src/data/types';

    import { CourseDetailsData } from './data/api';

    import { useCourseDetails, useWaffleFlags } from './data/apiHooks';

    import { RequestStatus, RequestStatusType } from './data/constants';

    type ModalState = {

      value: XBlock;

      subsectionId?: string;

      sectionId?: string;

    };

    export type CourseAuthoringContextData = {

      /** The ID of the current course */

    @@ -20,9 +32,20 @@ export type CourseAuthoringContextData = {
  
      canChangeProviders: boolean;

      handleAddSection: ReturnType<typeof useCreateCourseBlock>;

      handleAddSubsection: ReturnType<typeof useCreateCourseBlock>;

      handleAddAndOpenUnit: ReturnType<typeof useCreateCourseBlock>;

      handleAddUnit: ReturnType<typeof useCreateCourseBlock>;

      openUnitPage: (locator: string) => void;

      getUnitUrl: (locator: string) => string;

      isUnlinkModalOpen: boolean;

      currentUnlinkModalData?: ModalState;

      openUnlinkModal: (value: ModalState) => void;

      closeUnlinkModal: () => void;

      isPublishModalOpen: boolean;

      currentPublishModalData?: ModalState;

      openPublishModal: (value: ModalState) => void;

      closePublishModal: () => void;

      currentSelection?: SelectionState;

      setCurrentSelection: React.Dispatch<React.SetStateAction<SelectionState | undefined>>;

    };

    /**

    @@ -50,6 +73,26 @@ export const CourseAuthoringProvider = ({
  
      const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();

      const { courseStructure } = useSelector(getOutlineIndexData);

      const { id: courseUsageKey } = courseStructure || {};

      const [

        isUnlinkModalOpen,

        currentUnlinkModalData,

        openUnlinkModal,

        closeUnlinkModal,

      ] = useToggleWithValue<ModalState>();

      const [

        isPublishModalOpen,

        currentPublishModalData,

        openPublishModal,

        closePublishModal,

      ] = useToggleWithValue<ModalState>();

      /**

      * This will hold the state of current item that is being operated on,

      * For example:

      *  - the details of container that is being edited.

      *  - the details of container of which see more dropdown is open.

      * It is mostly used in modals which should be soon be replaced with its equivalent in sidebar.

      */

      const [currentSelection, setCurrentSelection] = useState<SelectionState | undefined>();

      const getUnitUrl = (locator: string) => {

        if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {

    @@ -62,7 +105,7 @@ export const CourseAuthoringProvider = ({
  
      /**

       * Open the unit page for a given locator.

       */

      const openUnitPage = (locator: string) => {

      const openUnitPage = async (locator: string) => {

        const url = getUnitUrl(locator);

        if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {

          // instanbul ignore next

    @@ -72,10 +115,9 @@ export const CourseAuthoringProvider = ({
  
        }

      };

      const addSectionToCourse = async (locator: string) => {

      const addSectionToCourse = /* istanbul ignore next */ async (locator: string) => {

        try {

          const data = await getCourseItem(locator);

          // instanbul ignore next

          // Page should scroll to newly added section.

          data.shouldScroll = true;

          dispatch(addSection(data));

    @@ -84,23 +126,35 @@ export const CourseAuthoringProvider = ({
  
        }

      };

      const addSubsectionToCourse = async (locator: string, parentLocator: string) => {

      const addSubsectionToCourse = /* istanbul ignore next */ async (locator: string, parentLocator: string) => {

        try {

          const data = await getCourseItem(locator);

          data.shouldScroll = true;

          // Page should scroll to newly added subsection.

          data.shouldScroll = true;

          dispatch(addSubsection({ parentLocator, data }));

        } catch {

          dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));

        }

      };

      const addUnitToCourse = /* istanbul ignore next */ async (locator: string, parentLocator: string) => {

        try {

          const data = await getCourseItem(locator);

          // Page should scroll to newly added subsection.

          data.shouldScroll = true;

          dispatch(addUnit({ parentLocator, data }));

        } catch {

          dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));

        }

      };

      const handleAddSection = useCreateCourseBlock(addSectionToCourse);

      const handleAddSubsection = useCreateCourseBlock(addSubsectionToCourse);

      /**

      * import a unit block from library and redirect user to this unit page.

      */

      const handleAddUnit = useCreateCourseBlock(openUnitPage);

      const handleAddAndOpenUnit = useCreateCourseBlock(openUnitPage);

      const handleAddUnit = useCreateCourseBlock(addUnitToCourse);

      const context = useMemo<CourseAuthoringContextData>(() => ({

        courseId,

    @@ -111,8 +165,19 @@ export const CourseAuthoringProvider = ({
  
        handleAddSection,

        handleAddSubsection,

        handleAddUnit,

        handleAddAndOpenUnit,

        getUnitUrl,

        openUnitPage,

        isUnlinkModalOpen,

        openUnlinkModal,

        closeUnlinkModal,

        currentUnlinkModalData,

        isPublishModalOpen,

        currentPublishModalData,

        openPublishModal,

        closePublishModal,

        currentSelection,

        setCurrentSelection,

      }), [

        courseId,

        courseUsageKey,

    @@ -122,8 +187,19 @@ export const CourseAuthoringProvider = ({
  
        handleAddSection,

        handleAddSubsection,

        handleAddUnit,

        handleAddAndOpenUnit,

        getUnitUrl,

        openUnitPage,

        isUnlinkModalOpen,

        openUnlinkModal,

        closeUnlinkModal,

        currentUnlinkModalData,

        isPublishModalOpen,

        currentPublishModalData,

        openPublishModal,

        closePublishModal,

        currentSelection,

        setCurrentSelection,

      ]);

      return (

src/CourseAuthoringRoutes.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     import CustomPages from './custom-pages';
     import { FilesPage, VideosPage } from './files-and-videos';
     import { AdvancedSettings } from './advanced-settings';
-    import { CourseOutline, OutlineSidebarPagesProvider } from './course-outline';
+    import {
+      CourseOutline,
+      OutlineSidebarProvider,
+      OutlineSidebarPagesProvider,
+    } from './course-outline';
     import ScheduleAndDetails from './schedule-and-details';
     import { GradingSettings } from './grading-settings';
     import CourseTeam from './course-team/CourseTeam';
@@ Expand Down Expand Up / @@ -61,7 +65,9 @@ const CourseAuthoringRoutes = () => { @@
                 element={(
                   <PageWrap>
                     <OutlineSidebarPagesProvider>
-                      <CourseOutline />
+                      <OutlineSidebarProvider>
+                        <CourseOutline />
+                      </OutlineSidebarProvider>
                     </OutlineSidebarPagesProvider>
                   </PageWrap>
                 )}
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: container info sidebar and add sidebar updates #2830

Diff view

Diff view

There are no files selected for viewing

Uh oh!

feat: container info sidebar and add sidebar updates #2830

Are you sure you want to change the base?

feat: container info sidebar and add sidebar updates #2830

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!