From b7160bff99c5906db8bfbcaabf0fc0af4c983117 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Mon, 4 Dec 2023 18:45:47 -0500
Subject: [PATCH 01/16] feat: add drag n drop functionality to section cards

---
 src/course-outline/CourseOutline.jsx | 90 +++++++++++++++++++---------
 src/course-outline/data/api.js       | 15 +++++
 src/course-outline/data/slice.js     |  4 ++
 src/course-outline/data/thunk.js     | 23 +++++++
 src/course-outline/hooks.jsx         |  6 ++
 5 files changed, 110 insertions(+), 28 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index eabe680764..8c8e1d20e5 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -80,6 +80,7 @@ const CourseOutline = ({ courseId }) => {
     handleDuplicateSubsectionSubmit,
     handleNewSectionSubmit,
     handleNewSubsectionSubmit,
+    handleDragNDrop,
   } = useCourseOutline({ courseId });
 
   useEffect(() => {
@@ -91,6 +92,31 @@ const CourseOutline = ({ courseId }) => {
     title: processingNotificationTitle,
   } = useSelector(getProcessingNotification);
 
+  const dragItem = useRef();
+  const dragOverItem = useRef();
+
+  const dragStart = (e, position) => {
+    dragItem.current = position;
+  };
+
+  const dragEnter = (e, position) => {
+    dragOverItem.current = position;
+  };
+
+  const drop = (e) => {
+    const copyListItems = [...sectionsList];
+    const dragItemContent = copyListItems[dragItem.current];
+    copyListItems.splice(dragItem.current, 1);
+    copyListItems.splice(dragOverItem.current, 0, dragItemContent);
+    dragItem.current = null;
+    dragOverItem.current = null;
+    const idList = [];
+    for (let i = 0; i < copyListItems.length; i++) {
+      idList.push(copyListItems[i].id);
+    }
+    handleDragNDrop(idList, copyListItems);
+  };
+
   if (isLoading) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <></>;
@@ -152,35 +178,43 @@ const CourseOutline = ({ courseId }) => {
                     <div className="pt-4">
                       {sectionsList.length ? (
                         <>
-                          {sectionsList.map((section) => (
-                            <SectionCard
-                              key={section.id}
-                              section={section}
-                              savingStatus={savingStatus}
-                              onOpenHighlightsModal={handleOpenHighlightsModal}
-                              onOpenPublishModal={openPublishModal}
-                              onOpenConfigureModal={openConfigureModal}
-                              onOpenDeleteModal={openDeleteModal}
-                              onEditSectionSubmit={handleEditSubmit}
-                              onDuplicateSubmit={handleDuplicateSectionSubmit}
-                              isSectionsExpanded={isSectionsExpanded}
-                              onNewSubsectionSubmit={handleNewSubsectionSubmit}
-                              ref={listRef}
+                          {sectionsList.map((section, index) => (
+                            <div
+                              onDragOver={(e) => e.preventDefault()}
+                              onDragStart={(e) => dragStart(e, index)}
+                              onDragEnter={(e) => dragEnter(e, index)}
+                              onDrop={(e) => drop(e)}
+                              draggable
                             >
-                              {section.childInfo.children.map((subsection) => (
-                                <SubsectionCard
-                                  key={subsection.id}
-                                  section={section}
-                                  subsection={subsection}
-                                  savingStatus={savingStatus}
-                                  onOpenPublishModal={openPublishModal}
-                                  onOpenDeleteModal={openDeleteModal}
-                                  onEditSubmit={handleEditSubmit}
-                                  onDuplicateSubmit={handleDuplicateSubsectionSubmit}
-                                  ref={listRef}
-                                />
-                              ))}
-                            </SectionCard>
+                              <SectionCard
+                                key={section.id}
+                                section={section}
+                                savingStatus={savingStatus}
+                                onOpenHighlightsModal={handleOpenHighlightsModal}
+                                onOpenPublishModal={openPublishModal}
+                                onOpenConfigureModal={openConfigureModal}
+                                onOpenDeleteModal={openDeleteModal}
+                                onEditSectionSubmit={handleEditSubmit}
+                                onDuplicateSubmit={handleDuplicateSectionSubmit}
+                                isSectionsExpanded={isSectionsExpanded}
+                                onNewSubsectionSubmit={handleNewSubsectionSubmit}
+                                ref={listRef}
+                              >
+                                {section.childInfo.children.map((subsection) => (
+                                  <SubsectionCard
+                                    key={subsection.id}
+                                    section={section}
+                                    subsection={subsection}
+                                    savingStatus={savingStatus}
+                                    onOpenPublishModal={openPublishModal}
+                                    onOpenDeleteModal={openDeleteModal}
+                                    onEditSubmit={handleEditSubmit}
+                                    onDuplicateSubmit={handleDuplicateSubsectionSubmit}
+                                    ref={listRef}
+                                  />
+                                ))}
+                              </SectionCard>
+                            </div>
                           ))}
                           <Button
                             data-testid="new-section-button"
diff --git a/src/course-outline/data/api.js b/src/course-outline/data/api.js
index 5714fa9ada..aef8276292 100644
--- a/src/course-outline/data/api.js
+++ b/src/course-outline/data/api.js
@@ -296,3 +296,18 @@ export async function addNewCourseItem(parentLocator, category, displayName) {
 
   return data;
 }
+
+/**
+ * Set order for the list of the sections
+ * @param {string} courseBlockId
+ * @param {Array<string>} list of sections id's
+ * @returns {Promise<Object>}
+*/
+export async function setSectionOrderList(courseId, children) {
+  const { data } = await getAuthenticatedHttpClient()
+    .put(getEnableHighlightsEmailsApiUrl(courseId), {
+      children,
+    });
+
+  return data;
+}
diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
index 72b1b41791..40cc1e5046 100644
--- a/src/course-outline/data/slice.js
+++ b/src/course-outline/data/slice.js
@@ -76,6 +76,9 @@ const slice = createSlice({
     setCurrentItem: (state, { payload }) => {
       state.currentItem = payload;
     },
+    reorderSectionList: (state, { payload }) => {
+      state.sectionsList = payload;
+    },
     setCurrentSection: (state, { payload }) => {
       state.currentSection = payload;
     },
@@ -162,6 +165,7 @@ export const {
   deleteSubsection,
   deleteUnit,
   duplicateSection,
+  reorderSectionList,
 } = slice.actions;
 
 export const {
diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
index cd08ff7d57..594327f29e 100644
--- a/src/course-outline/data/thunk.js
+++ b/src/course-outline/data/thunk.js
@@ -23,6 +23,7 @@ import {
   configureCourseSection,
   restartIndexingOnCourse,
   updateCourseSectionHighlights,
+  setSectionOrderList,
 } from './api';
 import {
   addSection,
@@ -40,6 +41,7 @@ import {
   deleteSubsection,
   deleteUnit,
   duplicateSection,
+  reorderSectionList,
 } from './slice';
 
 export function fetchCourseOutlineIndexQuery(courseId) {
@@ -375,3 +377,24 @@ export function addNewSubsectionQuery(parentLocator) {
     ));
   };
 }
+
+export function setSectionOrderListQuery(courseId, newListId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await setSectionOrderList(courseId, newListId).then(async (result) => {
+        if (result) {
+          const outlineIndex = await getCourseOutlineIndex(courseId);
+          dispatch(reorderSectionList(outlineIndex.courseStructure.childInfo.children));
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(hideProcessingNotification());
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 857090d31e..b1ddc1c09d 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -36,6 +36,7 @@ import {
   publishCourseItemQuery,
   updateCourseSectionHighlightsQuery,
   configureCourseSectionQuery,
+  setSectionOrderListQuery,
 } from './data/thunk';
 
 const useCourseOutline = ({ courseId }) => {
@@ -152,6 +153,10 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(duplicateSubsectionQuery(currentSubsection.id, currentSection.id));
   };
 
+  const handleDragNDrop = (newListId, newList) => {
+    dispatch(setSectionOrderListQuery(courseId, newListId, newList));
+  };
+
   useEffect(() => {
     dispatch(fetchCourseOutlineIndexQuery(courseId));
     dispatch(fetchCourseBestPracticesQuery({ courseId }));
@@ -207,6 +212,7 @@ const useCourseOutline = ({ courseId }) => {
     handleDuplicateSubsectionSubmit,
     handleNewSectionSubmit,
     handleNewSubsectionSubmit,
+    handleDragNDrop,
   };
 };
 

From 4a4610714ed41f1927feab3bf2b2166071ba44e1 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Tue, 5 Dec 2023 22:56:22 -0500
Subject: [PATCH 02/16] feat: use react-dnd library for drag and drop
 implementation

---
 package-lock.json                             |  78 ++++++++
 package.json                                  |   3 +
 src/course-outline/CourseOutline.jsx          |  69 +++----
 src/course-outline/data/thunk.js              |   2 -
 src/course-outline/hooks.jsx                  |   4 +-
 .../section-card/SectionCard.jsx              | 174 ++++++++++++------
 src/course-outline/section-card/itemTypes.js  |   5 +
 7 files changed, 245 insertions(+), 90 deletions(-)
 create mode 100644 src/course-outline/section-card/itemTypes.js

diff --git a/package-lock.json b/package-lock.json
index 107c6f5812..7f8f7b11ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,12 +29,15 @@
         "email-validator": "2.0.4",
         "file-saver": "^2.0.5",
         "formik": "2.2.6",
+        "immutability-helper": "^3.1.1",
         "jszip": "^3.10.1",
         "lodash": "4.17.21",
         "moment": "2.29.4",
         "prop-types": "15.7.2",
         "react": "17.0.2",
         "react-datepicker": "^4.13.0",
+        "react-dnd": "14.0.5",
+        "react-dnd-html5-backend": "14.1.0",
         "react-dom": "17.0.2",
         "react-helmet": "^6.1.0",
         "react-redux": "7.2.9",
@@ -4997,6 +5000,21 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.1.tgz",
+      "integrity": "sha512-kLy0PJDDwvwwTXxqTFNAAllPHD73AycE9ypWeln/IguoGBEbvFcPDbCV03G52bEcC5E+YgupBE0VzHGdC8SIXg=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg=="
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.9.7",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz",
@@ -11448,6 +11466,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "dependencies": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
+    "node_modules/dnd-core/node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -16223,6 +16259,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutability-helper": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
+      "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ=="
+    },
     "node_modules/immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
@@ -23325,6 +23366,43 @@
         "node": ">= 8"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "14.0.5",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
+      "integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==",
+      "dependencies": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz",
+      "integrity": "sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==",
+      "dependencies": {
+        "dnd-core": "14.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
diff --git a/package.json b/package.json
index f6df2ec00b..75660e9ed9 100644
--- a/package.json
+++ b/package.json
@@ -55,12 +55,15 @@
     "email-validator": "2.0.4",
     "file-saver": "^2.0.5",
     "formik": "2.2.6",
+    "immutability-helper": "^3.1.1",
     "jszip": "^3.10.1",
     "lodash": "4.17.21",
     "moment": "2.29.4",
     "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-datepicker": "^4.13.0",
+    "react-dnd": "14.0.5",
+    "react-dnd-html5-backend": "14.1.0",
     "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
     "react-redux": "7.2.9",
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 8c8e1d20e5..38961585d8 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -1,4 +1,9 @@
-import { React, useEffect, useRef } from 'react';
+import {
+  React, useState, useCallback, useEffect, useRef
+} from 'react';
+import update from 'immutability-helper';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -86,36 +91,36 @@ const CourseOutline = ({ courseId }) => {
   useEffect(() => {
     scrollToElement(listRef);
   }, [sectionsList]);
+  document.title = getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle));
+  const [sections, setSections] = useState(sectionsList);
 
   const {
     isShow: isShowProcessingNotification,
     title: processingNotificationTitle,
   } = useSelector(getProcessingNotification);
 
-  const dragItem = useRef();
-  const dragOverItem = useRef();
-
-  const dragStart = (e, position) => {
-    dragItem.current = position;
-  };
-
-  const dragEnter = (e, position) => {
-    dragOverItem.current = position;
-  };
+  const moveSection = useCallback((dragIndex, hoverIndex) => {
+    setSections((prevSections) => {
+      const newList = update(prevSections, {
+        $splice: [
+          [dragIndex, 1],
+          [hoverIndex, 0, prevSections[dragIndex]],
+        ],
+      });
+      const idList = [];
+      for (let i = 0; i < newList.length; i++) {
+        idList.push(newList[i].id);
+      }
+      handleDragNDrop(idList);
+      return newList;
+    });
+  }, []);
 
-  const drop = (e) => {
-    const copyListItems = [...sectionsList];
-    const dragItemContent = copyListItems[dragItem.current];
-    copyListItems.splice(dragItem.current, 1);
-    copyListItems.splice(dragOverItem.current, 0, dragItemContent);
-    dragItem.current = null;
-    dragOverItem.current = null;
-    const idList = [];
-    for (let i = 0; i < copyListItems.length; i++) {
-      idList.push(copyListItems[i].id);
+  useEffect(() => {
+    if (sectionsList) {
+      setSections(sectionsList);
     }
-    handleDragNDrop(idList, copyListItems);
-  };
+  }, [sectionsList]);
 
   if (isLoading) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
@@ -176,18 +181,15 @@ const CourseOutline = ({ courseId }) => {
                       openEnableHighlightsModal={openEnableHighlightsModal}
                     />
                     <div className="pt-4">
-                      {sectionsList.length ? (
+                      {sections.length ? (
                         <>
-                          {sectionsList.map((section, index) => (
-                            <div
-                              onDragOver={(e) => e.preventDefault()}
-                              onDragStart={(e) => dragStart(e, index)}
-                              onDragEnter={(e) => dragEnter(e, index)}
-                              onDrop={(e) => drop(e)}
-                              draggable
-                            >
+                          <DndProvider
+                            backend={HTML5Backend}
+                          >
+                            {sections.map((section, index) => (
                               <SectionCard
                                 key={section.id}
+                                index={index}
                                 section={section}
                                 savingStatus={savingStatus}
                                 onOpenHighlightsModal={handleOpenHighlightsModal}
@@ -198,6 +200,7 @@ const CourseOutline = ({ courseId }) => {
                                 onDuplicateSubmit={handleDuplicateSectionSubmit}
                                 isSectionsExpanded={isSectionsExpanded}
                                 onNewSubsectionSubmit={handleNewSubsectionSubmit}
+                                moveSection={moveSection}
                                 ref={listRef}
                               >
                                 {section.childInfo.children.map((subsection) => (
@@ -214,8 +217,8 @@ const CourseOutline = ({ courseId }) => {
                                   />
                                 ))}
                               </SectionCard>
-                            </div>
                           ))}
+                          </DndProvider>
                           <Button
                             data-testid="new-section-button"
                             className="mt-4"
diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
index 594327f29e..01af9140a1 100644
--- a/src/course-outline/data/thunk.js
+++ b/src/course-outline/data/thunk.js
@@ -386,8 +386,6 @@ export function setSectionOrderListQuery(courseId, newListId) {
     try {
       await setSectionOrderList(courseId, newListId).then(async (result) => {
         if (result) {
-          const outlineIndex = await getCourseOutlineIndex(courseId);
-          dispatch(reorderSectionList(outlineIndex.courseStructure.childInfo.children));
           dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
           dispatch(hideProcessingNotification());
         }
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index b1ddc1c09d..533284ef58 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -153,8 +153,8 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(duplicateSubsectionQuery(currentSubsection.id, currentSection.id));
   };
 
-  const handleDragNDrop = (newListId, newList) => {
-    dispatch(setSectionOrderListQuery(courseId, newListId, newList));
+  const handleDragNDrop = (newListId) => {
+    dispatch(setSectionOrderListQuery(courseId, newListId));
   };
 
   useEffect(() => {
diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
index 4612e85c90..6e5e54e2ae 100644
--- a/src/course-outline/section-card/SectionCard.jsx
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -1,8 +1,5 @@
-import {
-  forwardRef,
-  useEffect,
-  useState,
-} from 'react';
+import React, { forwardRef, useEffect, useState, useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -14,9 +11,11 @@ import { RequestStatus } from '../../data/constants';
 import CardHeader from '../card-header/CardHeader';
 import { getItemStatus } from '../utils';
 import messages from './messages';
+import ItemTypes from './itemTypes';
 
 const SectionCard = forwardRef(({
   section,
+  index,
   children,
   onOpenHighlightsModal,
   onOpenPublishModal,
@@ -27,6 +26,7 @@ const SectionCard = forwardRef(({
   onDuplicateSubmit,
   isSectionsExpanded,
   onNewSubsectionSubmit,
+  moveSection,
 }, lastItemRef) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -49,6 +49,64 @@ const SectionCard = forwardRef(({
     highlights,
   } = section;
 
+  const moveRef = useRef(null);
+
+  const [{ handlerId }, drop] = useDrop({
+    accept: ItemTypes.SECTION,
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      };
+    },
+    hover(item, monitor) {
+      if (!moveRef.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      // Determine rectangle on screen
+      const hoverBoundingRect = moveRef.current?.getBoundingClientRect();
+      // Get vertical middle
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+      // Get pixels to the top
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+      // Time to actually perform the action
+      moveSection(dragIndex, hoverIndex);
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      // eslint-disable-next-line no-param-reassign
+      item.index = hoverIndex;
+    },
+  });
+  const [{ isDragging }, drag] = useDrag({
+    type: ItemTypes.SECTION,
+    item: () => ({ id, index }),
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  const opacity = isDragging ? 0 : 1;
+  drag(drop(moveRef));
+
   const sectionStatus = getItemStatus({
     published,
     releasedToStudents,
@@ -91,56 +149,64 @@ const SectionCard = forwardRef(({
   }, [savingStatus]);
 
   return (
-    <div className="section-card" data-testid="section-card" ref={lastItemRef}>
-      <CardHeader
-        sectionId={id}
-        title={displayName}
-        status={sectionStatus}
-        hasChanges={hasChanges}
-        isExpanded={isExpanded}
-        onExpand={handleExpandContent}
-        onClickMenuButton={handleClickMenuButton}
-        onClickPublish={onOpenPublishModal}
-        onClickConfigure={onOpenConfigureModal}
-        onClickEdit={openForm}
-        onClickDelete={onOpenDeleteModal}
-        isFormOpen={isFormOpen}
-        closeForm={closeForm}
-        onEditSubmit={handleEditSubmit}
-        isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
-        onClickDuplicate={onDuplicateSubmit}
-        namePrefix="section"
-      />
-      <div className="section-card__content" data-testid="section-card__content">
-        <div className="outline-section__status">
-          <Button
-            className="section-card__highlights"
-            data-destid="section-card-highlights-button"
-            variant="tertiary"
-            onClick={handleOpenHighlightsModal}
-          >
-            <Badge className="highlights-badge">{highlights.length}</Badge>
-            <p className="m-0 text-black">{messages.sectionHighlightsBadge.defaultMessage}</p>
-          </Button>
+    <div
+      className="section-card"
+      data-testid="section-card"
+      data-handler-id={handlerId}
+      style={{ opacity }}
+      ref={moveRef}
+    >
+      <div ref={lastItemRef}>
+        <CardHeader
+          sectionId={id}
+          title={displayName}
+          status={sectionStatus}
+          hasChanges={hasChanges}
+          isExpanded={isExpanded}
+          onExpand={handleExpandContent}
+          onClickMenuButton={handleClickMenuButton}
+          onClickPublish={onOpenPublishModal}
+          onClickConfigure={onOpenConfigureModal}
+          onClickEdit={openForm}
+          onClickDelete={onOpenDeleteModal}
+          isFormOpen={isFormOpen}
+          closeForm={closeForm}
+          onEditSubmit={handleEditSubmit}
+          isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
+          onClickDuplicate={onDuplicateSubmit}
+          namePrefix="section"
+        />
+        <div className="section-card__content" data-testid="section-card__content">
+          <div className="outline-section__status">
+            <Button
+              className="section-card__highlights"
+              data-destid="section-card-highlights-button"
+              variant="tertiary"
+              onClick={handleOpenHighlightsModal}
+            >
+              <Badge className="highlights-badge">{highlights.length}</Badge>
+              <p className="m-0 text-black">{messages.sectionHighlightsBadge.defaultMessage}</p>
+            </Button>
+          </div>
         </div>
+        {isExpanded && (
+          <>
+            <div data-testid="section-card__subsections" className="section-card__subsections">
+              {children}
+            </div>
+            <Button
+              data-testid="new-subsection-button"
+              className="mt-4"
+              variant="outline-primary"
+              iconBefore={IconAdd}
+              block
+              onClick={handleNewSubsectionSubmit}
+            >
+              {intl.formatMessage(messages.newSubsectionButton)}
+            </Button>
+          </>
+        )}
       </div>
-      {isExpanded && (
-        <>
-          <div data-testid="section-card__subsections" className="section-card__subsections">
-            {children}
-          </div>
-          <Button
-            data-testid="new-subsection-button"
-            className="mt-4"
-            variant="outline-primary"
-            iconBefore={IconAdd}
-            block
-            onClick={handleNewSubsectionSubmit}
-          >
-            {intl.formatMessage(messages.newSubsectionButton)}
-          </Button>
-        </>
-      )}
     </div>
   );
 });
@@ -152,6 +218,7 @@ SectionCard.defaultProps = {
 SectionCard.propTypes = {
   section: PropTypes.shape({
     id: PropTypes.string.isRequired,
+    index: PropTypes.number.isRequired,
     displayName: PropTypes.string.isRequired,
     published: PropTypes.bool.isRequired,
     hasChanges: PropTypes.bool.isRequired,
@@ -171,6 +238,7 @@ SectionCard.propTypes = {
   onDuplicateSubmit: PropTypes.func.isRequired,
   isSectionsExpanded: PropTypes.bool.isRequired,
   onNewSubsectionSubmit: PropTypes.func.isRequired,
+  moveSection: PropTypes.func.isRequired,
 };
 
 export default SectionCard;
diff --git a/src/course-outline/section-card/itemTypes.js b/src/course-outline/section-card/itemTypes.js
new file mode 100644
index 0000000000..8fe34a9667
--- /dev/null
+++ b/src/course-outline/section-card/itemTypes.js
@@ -0,0 +1,5 @@
+const ItemTypes = {
+  SECTION: 'section',
+};
+
+export default ItemTypes;

From 55c3426494a5eee2bc665d84835cf39977044083 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Tue, 5 Dec 2023 23:12:36 -0500
Subject: [PATCH 03/16] style: fix linting issues

---
 src/course-outline/section-card/SectionCard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
index 6e5e54e2ae..12945398ec 100644
--- a/src/course-outline/section-card/SectionCard.jsx
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -218,7 +218,6 @@ SectionCard.defaultProps = {
 SectionCard.propTypes = {
   section: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
     displayName: PropTypes.string.isRequired,
     published: PropTypes.bool.isRequired,
     hasChanges: PropTypes.bool.isRequired,
@@ -228,6 +227,7 @@ SectionCard.propTypes = {
     staffOnlyMessage: PropTypes.bool.isRequired,
     highlights: PropTypes.arrayOf(PropTypes.string).isRequired,
   }).isRequired,
+  index: PropTypes.number.isRequired,
   children: PropTypes.node,
   onOpenHighlightsModal: PropTypes.func.isRequired,
   onOpenPublishModal: PropTypes.func.isRequired,

From 5f069143cbcee8b659df6bdee3dbe20a3db1c514 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@disroot.org>
Date: Wed, 6 Dec 2023 19:36:04 +0530
Subject: [PATCH 04/16] fix: finalize section order on drop instead of hover

---
 src/course-outline/CourseOutline.jsx            | 12 ++++++------
 src/course-outline/section-card/SectionCard.jsx |  5 +++++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 38961585d8..d2fc80c4e9 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -107,15 +107,14 @@ const CourseOutline = ({ courseId }) => {
           [hoverIndex, 0, prevSections[dragIndex]],
         ],
       });
-      const idList = [];
-      for (let i = 0; i < newList.length; i++) {
-        idList.push(newList[i].id);
-      }
-      handleDragNDrop(idList);
       return newList;
     });
   }, []);
 
+  const finalizeSectionOrder = () => {
+    handleDragNDrop(sections.map((section) => section.id));
+  }
+
   useEffect(() => {
     if (sectionsList) {
       setSections(sectionsList);
@@ -201,6 +200,7 @@ const CourseOutline = ({ courseId }) => {
                                 isSectionsExpanded={isSectionsExpanded}
                                 onNewSubsectionSubmit={handleNewSubsectionSubmit}
                                 moveSection={moveSection}
+                                finalizeSectionOrder={finalizeSectionOrder}
                                 ref={listRef}
                               >
                                 {section.childInfo.children.map((subsection) => (
@@ -217,7 +217,7 @@ const CourseOutline = ({ courseId }) => {
                                   />
                                 ))}
                               </SectionCard>
-                          ))}
+                            ))}
                           </DndProvider>
                           <Button
                             data-testid="new-section-button"
diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
index 12945398ec..e872743de5 100644
--- a/src/course-outline/section-card/SectionCard.jsx
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -27,6 +27,7 @@ const SectionCard = forwardRef(({
   isSectionsExpanded,
   onNewSubsectionSubmit,
   moveSection,
+  finalizeSectionOrder,
 }, lastItemRef) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -103,6 +104,9 @@ const SectionCard = forwardRef(({
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
+    end: () => {
+      finalizeSectionOrder();
+    },
   });
   const opacity = isDragging ? 0 : 1;
   drag(drop(moveRef));
@@ -239,6 +243,7 @@ SectionCard.propTypes = {
   isSectionsExpanded: PropTypes.bool.isRequired,
   onNewSubsectionSubmit: PropTypes.func.isRequired,
   moveSection: PropTypes.func.isRequired,
+  finalizeSectionOrder: PropTypes.func.isRequired,
 };
 
 export default SectionCard;

From 1e3e7f6c23e92019def4dea70aa5e528d5fc40f9 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Thu, 7 Dec 2023 19:41:24 -0500
Subject: [PATCH 05/16] fix: prevent same index drag to start request and
 restore state on error

---
 src/course-outline/CourseOutline.jsx            |  8 ++++++--
 src/course-outline/data/thunk.js                |  3 ++-
 src/course-outline/hooks.jsx                    |  4 ++--
 src/course-outline/section-card/SectionCard.jsx | 11 ++++++++---
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index d2fc80c4e9..6284bfcbf5 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -94,6 +94,8 @@ const CourseOutline = ({ courseId }) => {
   document.title = getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle));
   const [sections, setSections] = useState(sectionsList);
 
+  const initialSections = [...sections];
+
   const {
     isShow: isShowProcessingNotification,
     title: processingNotificationTitle,
@@ -112,8 +114,10 @@ const CourseOutline = ({ courseId }) => {
   }, []);
 
   const finalizeSectionOrder = () => {
-    handleDragNDrop(sections.map((section) => section.id));
-  }
+    handleDragNDrop(sections.map((section) => section.id), () => {
+      setSections(() => initialSections);
+    });
+  };
 
   useEffect(() => {
     if (sectionsList) {
diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
index 01af9140a1..6fdb7c275f 100644
--- a/src/course-outline/data/thunk.js
+++ b/src/course-outline/data/thunk.js
@@ -378,7 +378,7 @@ export function addNewSubsectionQuery(parentLocator) {
   };
 }
 
-export function setSectionOrderListQuery(courseId, newListId) {
+export function setSectionOrderListQuery(courseId, newListId, restoreCallback) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
     dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
@@ -393,6 +393,7 @@ export function setSectionOrderListQuery(courseId, newListId) {
     } catch (error) {
       dispatch(hideProcessingNotification());
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      restoreCallback();
     }
   };
 }
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 533284ef58..1b99460a4a 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -153,8 +153,8 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(duplicateSubsectionQuery(currentSubsection.id, currentSection.id));
   };
 
-  const handleDragNDrop = (newListId) => {
-    dispatch(setSectionOrderListQuery(courseId, newListId));
+  const handleDragNDrop = (newListId, restoreCallback) => {
+    dispatch(setSectionOrderListQuery(courseId, newListId, restoreCallback));
   };
 
   useEffect(() => {
diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
index e872743de5..242eb3adc3 100644
--- a/src/course-outline/section-card/SectionCard.jsx
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -98,14 +98,19 @@ const SectionCard = forwardRef(({
       item.index = hoverIndex;
     },
   });
+
+  const indexCopy = index;
   const [{ isDragging }, drag] = useDrag({
     type: ItemTypes.SECTION,
-    item: () => ({ id, index }),
+    item: () => ({ id, index, startingIndex: indexCopy }),
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
-    end: () => {
-      finalizeSectionOrder();
+    end: (item) => {
+      const { startingIndex } = item;
+      if (index !== startingIndex) {
+        finalizeSectionOrder();
+      }
     },
   });
   const opacity = isDragging ? 0 : 1;

From 4e4dd9da25073f6c733ec0e284f358e928c9ad75 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@disroot.org>
Date: Fri, 8 Dec 2023 13:09:12 +0530
Subject: [PATCH 06/16] fix: restore sectionlist order

---
 src/course-outline/CourseOutline.jsx | 2 +-
 src/course-outline/data/slice.js     | 7 ++++++-
 src/course-outline/data/thunk.js     | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 6284bfcbf5..f4d826d82c 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -94,7 +94,7 @@ const CourseOutline = ({ courseId }) => {
   document.title = getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle));
   const [sections, setSections] = useState(sectionsList);
 
-  const initialSections = [...sections];
+  const initialSections = [...sectionsList];
 
   const {
     isShow: isShowProcessingNotification,
diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
index 40cc1e5046..97fbb55ba6 100644
--- a/src/course-outline/data/slice.js
+++ b/src/course-outline/data/slice.js
@@ -77,7 +77,12 @@ const slice = createSlice({
       state.currentItem = payload;
     },
     reorderSectionList: (state, { payload }) => {
-      state.sectionsList = payload;
+      let sectionsList = [...state.sectionsList];
+      sectionsList.sort(function(a, b){
+        return payload.indexOf(a.id) - payload.indexOf(b.id);
+      });
+
+      state.sectionsList = [...sectionsList];
     },
     setCurrentSection: (state, { payload }) => {
       state.currentSection = payload;
diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
index 6fdb7c275f..ea15b9bc03 100644
--- a/src/course-outline/data/thunk.js
+++ b/src/course-outline/data/thunk.js
@@ -386,14 +386,15 @@ export function setSectionOrderListQuery(courseId, newListId, restoreCallback) {
     try {
       await setSectionOrderList(courseId, newListId).then(async (result) => {
         if (result) {
+          dispatch(reorderSectionList(newListId));
           dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
           dispatch(hideProcessingNotification());
         }
       });
     } catch (error) {
+      restoreCallback();
       dispatch(hideProcessingNotification());
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-      restoreCallback();
     }
   };
 }

From 0d45bd2936c931afc566408c196c06469886ec27 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Fri, 8 Dec 2023 12:06:17 -0500
Subject: [PATCH 07/16] fix: prevent drag event while editing the text

---
 src/course-outline/section-card/SectionCard.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
index 242eb3adc3..9543280a83 100644
--- a/src/course-outline/section-card/SectionCard.jsx
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -106,6 +106,7 @@ const SectionCard = forwardRef(({
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
+    canDrag: () => !isFormOpen,
     end: (item) => {
       const { startingIndex } = item;
       if (index !== startingIndex) {
@@ -184,6 +185,7 @@ const SectionCard = forwardRef(({
           isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
           onClickDuplicate={onDuplicateSubmit}
           namePrefix="section"
+          className="nodrag"
         />
         <div className="section-card__content" data-testid="section-card__content">
           <div className="outline-section__status">

From 47258e31783df660aa9758aa603b01267f0bf207 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Fri, 8 Dec 2023 12:54:46 -0500
Subject: [PATCH 08/16] style: fix linting issues

---
 src/course-outline/data/slice.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
index 97fbb55ba6..edb8b1e4a5 100644
--- a/src/course-outline/data/slice.js
+++ b/src/course-outline/data/slice.js
@@ -77,10 +77,8 @@ const slice = createSlice({
       state.currentItem = payload;
     },
     reorderSectionList: (state, { payload }) => {
-      let sectionsList = [...state.sectionsList];
-      sectionsList.sort(function(a, b){
-        return payload.indexOf(a.id) - payload.indexOf(b.id);
-      });
+      const sectionsList = [...state.sectionsList];
+      sectionsList.sort((a, b) => payload.indexOf(a.id) - payload.indexOf(b.id));
 
       state.sectionsList = [...sectionsList];
     },

From a68274fe7d6126460c4bb9e993c6bd41986bcb31 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Fri, 8 Dec 2023 12:55:17 -0500
Subject: [PATCH 09/16] test: fix failing tests

---
 src/course-outline/section-card/SectionCard.test.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/course-outline/section-card/SectionCard.test.jsx b/src/course-outline/section-card/SectionCard.test.jsx
index 682bd2ebe3..fbacf4b1be 100644
--- a/src/course-outline/section-card/SectionCard.test.jsx
+++ b/src/course-outline/section-card/SectionCard.test.jsx
@@ -30,6 +30,7 @@ const renderComponent = (props) => render(
     <IntlProvider locale="en">
       <SectionCard
         section={section}
+        index={0}
         onOpenPublishModal={jest.fn()}
         onOpenHighlightsModal={jest.fn()}
         onOpenDeleteModal={jest.fn()}
@@ -39,6 +40,8 @@ const renderComponent = (props) => render(
         onDuplicateSubmit={jest.fn()}
         isSectionsExpanded
         namePrefix="section"
+        moveSection={jest.fn()}
+        finalizeSectionOrder={jest.fn()}
         {...props}
       >
         <span>children</span>

From 05d04489eb380c4a88001fc11dbd6ba68e2a7fdb Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Fri, 8 Dec 2023 17:46:46 -0500
Subject: [PATCH 10/16] test: add missing hooks to SectionCard component in
 test

---
 src/course-outline/section-card/SectionCard.test.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/course-outline/section-card/SectionCard.test.jsx b/src/course-outline/section-card/SectionCard.test.jsx
index fbacf4b1be..b7d3d5d84b 100644
--- a/src/course-outline/section-card/SectionCard.test.jsx
+++ b/src/course-outline/section-card/SectionCard.test.jsx
@@ -42,6 +42,8 @@ const renderComponent = (props) => render(
         namePrefix="section"
         moveSection={jest.fn()}
         finalizeSectionOrder={jest.fn()}
+        connectDragSource={(el) => el}
+        isDragging
         {...props}
       >
         <span>children</span>

From 504e261c46412de9512c309b99fbc8483989185d Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Fri, 8 Dec 2023 19:01:52 -0500
Subject: [PATCH 11/16] test: add wrapping to SectionCard test component

---
 .../section-card/SectionCard.test.jsx         | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/course-outline/section-card/SectionCard.test.jsx b/src/course-outline/section-card/SectionCard.test.jsx
index b7d3d5d84b..a01e02d6f3 100644
--- a/src/course-outline/section-card/SectionCard.test.jsx
+++ b/src/course-outline/section-card/SectionCard.test.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { render, fireEvent } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -28,26 +30,28 @@ const section = {
 const renderComponent = (props) => render(
   <AppProvider store={store}>
     <IntlProvider locale="en">
-      <SectionCard
-        section={section}
-        index={0}
-        onOpenPublishModal={jest.fn()}
-        onOpenHighlightsModal={jest.fn()}
-        onOpenDeleteModal={jest.fn()}
-        onEditClick={jest.fn()}
-        savingStatus=""
-        onEditSectionSubmit={jest.fn()}
-        onDuplicateSubmit={jest.fn()}
-        isSectionsExpanded
-        namePrefix="section"
-        moveSection={jest.fn()}
-        finalizeSectionOrder={jest.fn()}
-        connectDragSource={(el) => el}
-        isDragging
-        {...props}
-      >
-        <span>children</span>
-      </SectionCard>
+      <DndProvider backend={HTML5Backend}>
+        <SectionCard
+          section={section}
+          index={0}
+          onOpenPublishModal={jest.fn()}
+          onOpenHighlightsModal={jest.fn()}
+          onOpenDeleteModal={jest.fn()}
+          onEditClick={jest.fn()}
+          savingStatus=""
+          onEditSectionSubmit={jest.fn()}
+          onDuplicateSubmit={jest.fn()}
+          isSectionsExpanded
+          namePrefix="section"
+          moveSection={jest.fn()}
+          finalizeSectionOrder={jest.fn()}
+          connectDragSource={(el) => el}
+          isDragging
+          {...props}
+        >
+          <span>children</span>
+        </SectionCard>
+      </DndProvider>
     </IntlProvider>,
   </AppProvider>,
 );

From 4320d1ae5b7105884c88f301b433bd5ee1311dad Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Mon, 11 Dec 2023 11:21:26 -0500
Subject: [PATCH 12/16] test: add tests for checking the API that sets the
 ordering

---
 src/course-outline/CourseOutline.test.jsx | 44 +++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
index fce1de1381..2a0710c6be 100644
--- a/src/course-outline/CourseOutline.test.jsx
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -34,6 +34,7 @@ import {
   fetchCourseSectionQuery,
   publishCourseItemQuery,
   updateCourseSectionHighlightsQuery,
+  setSectionOrderListQuery,
 } from './data/thunk';
 import initializeStore from '../store';
 import {
@@ -488,4 +489,47 @@ describe('<CourseOutline />', () => {
 
     expect(getByRole('button', { name: '5 Section highlights' })).toBeInTheDocument();
   });
+
+  it('check section order list when set section order query is successful', async () => {
+    const { getAllByTestId } = render(<RootWrapper />);
+    const courseBlockId = courseOutlineIndexMock.courseStructure.id;
+    let { children } = courseOutlineIndexMock.courseStructure.childInfo;
+    children = children.splice(2, 0, children.splice(0, 1)[0]);
+
+    axiosMock
+      .onPut(getEnableHighlightsEmailsApiUrl(courseBlockId), children)
+      .reply(200);
+
+    await executeThunk(setSectionOrderListQuery(courseBlockId, children, () => {}), store.dispatch);
+
+    await waitFor(() => {
+      expect(getAllByTestId('section-card')).toHaveLength(4);
+      const newSections = getAllByTestId('section-card');
+      for (let i; i < children.length; i++) {
+        expect(children[i].id === newSections[i].id);
+      }
+    });
+  });
+
+  it('check section order list when set section order query is unsuccessful', async () => {
+    const { getAllByTestId } = render(<RootWrapper />);
+    const courseBlockId = courseOutlineIndexMock.courseStructure.id;
+    const { children } = courseOutlineIndexMock.courseStructure.childInfo;
+    const newChildren = children.splice(2, 0, children.splice(0, 1)[0]);
+
+    axiosMock
+      .onPut(getEnableHighlightsEmailsApiUrl(courseBlockId), undefined)
+      .reply(500);
+
+    await executeThunk(setSectionOrderListQuery(courseBlockId, undefined, () => children), store.dispatch);
+
+    await waitFor(() => {
+      expect(getAllByTestId('section-card')).toHaveLength(4);
+      const newSections = getAllByTestId('section-card');
+      for (let i; i < children.length; i++) {
+        expect(children[i].id === newSections[i].id);
+        expect(newChildren[i].id !== newSections[i].id);
+      }
+    });
+  });
 });

From 8b312e879351fffca1ac7442bcce409e401ce18f Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez Gacha <steff456@hotmail.com>
Date: Mon, 11 Dec 2023 23:56:35 -0500
Subject: [PATCH 13/16] fix: merge scroll-to-bottom with drag and drop
 implementations

---
 src/course-outline/CourseOutline.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index f4d826d82c..17b49d12ec 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -1,5 +1,5 @@
 import {
-  React, useState, useCallback, useEffect, useRef
+  React, useState, useCallback, useEffect, useRef,
 } from 'react';
 import update from 'immutability-helper';
 import { DndProvider } from 'react-dnd';
@@ -88,9 +88,6 @@ const CourseOutline = ({ courseId }) => {
     handleDragNDrop,
   } = useCourseOutline({ courseId });
 
-  useEffect(() => {
-    scrollToElement(listRef);
-  }, [sectionsList]);
   document.title = getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle));
   const [sections, setSections] = useState(sectionsList);
 
@@ -121,7 +118,12 @@ const CourseOutline = ({ courseId }) => {
 
   useEffect(() => {
     if (sectionsList) {
-      setSections(sectionsList);
+      setSections((prevSections) => {
+        if(prevSections.length < sectionsList.length) {
+          scrollToElement(listRef);
+        }
+        return sectionsList
+      });
     }
   }, [sectionsList]);
 

From 8ed080a76d2e947a09a868800838c5ad345a4291 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Tue, 12 Dec 2023 00:10:43 -0500
Subject: [PATCH 14/16] fix: fix linting issues

---
 src/course-outline/CourseOutline.jsx            | 4 ++--
 src/course-outline/data/api.js                  | 4 ++--
 src/course-outline/section-card/SectionCard.jsx | 4 +++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 17b49d12ec..44726ed4a8 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -119,10 +119,10 @@ const CourseOutline = ({ courseId }) => {
   useEffect(() => {
     if (sectionsList) {
       setSections((prevSections) => {
-        if(prevSections.length < sectionsList.length) {
+        if (prevSections.length < sectionsList.length) {
           scrollToElement(listRef);
         }
-        return sectionsList
+        return sectionsList;
       });
     }
   }, [sectionsList]);
diff --git a/src/course-outline/data/api.js b/src/course-outline/data/api.js
index aef8276292..702715ce8f 100644
--- a/src/course-outline/data/api.js
+++ b/src/course-outline/data/api.js
@@ -299,8 +299,8 @@ export async function addNewCourseItem(parentLocator, category, displayName) {
 
 /**
  * Set order for the list of the sections
- * @param {string} courseBlockId
- * @param {Array<string>} list of sections id's
+ * @param {string} courseId
+ * @param {Array<string>} children list of sections id's
  * @returns {Promise<Object>}
 */
 export async function setSectionOrderList(courseId, children) {
diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
index 9543280a83..1655776d60 100644
--- a/src/course-outline/section-card/SectionCard.jsx
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -1,4 +1,6 @@
-import React, { forwardRef, useEffect, useState, useRef } from 'react';
+import React, {
+  forwardRef, useEffect, useState, useRef,
+} from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';

From cb204daac0bd1972779e50befb245cad676de52f Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@disroot.org>
Date: Wed, 13 Dec 2023 17:46:51 +0530
Subject: [PATCH 15/16] fix: handle scrolling with drag-n-drop

---
 src/course-outline/CourseOutline.jsx          | 21 +++++++++--------
 .../section-card/SectionCard.jsx              |  2 +-
 src/course-outline/utils.jsx                  | 23 ++++++++++++++-----
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 44726ed4a8..abc88251a5 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -98,7 +98,7 @@ const CourseOutline = ({ courseId }) => {
     title: processingNotificationTitle,
   } = useSelector(getProcessingNotification);
 
-  const moveSection = useCallback((dragIndex, hoverIndex) => {
+  const moveSection = useCallback((dragIndex, hoverIndex, dragElement) => {
     setSections((prevSections) => {
       const newList = update(prevSections, {
         $splice: [
@@ -106,6 +106,9 @@ const CourseOutline = ({ courseId }) => {
           [hoverIndex, 0, prevSections[dragIndex]],
         ],
       });
+      // set listRef to element that was dragged to make sure scrolling
+      // uses the correct element while calculating visibility.
+      listRef.current = dragElement;
       return newList;
     });
   }, []);
@@ -117,16 +120,16 @@ const CourseOutline = ({ courseId }) => {
   };
 
   useEffect(() => {
-    if (sectionsList) {
-      setSections((prevSections) => {
-        if (prevSections.length < sectionsList.length) {
-          scrollToElement(listRef);
-        }
-        return sectionsList;
-      });
-    }
+    setSections(sectionsList);
   }, [sectionsList]);
 
+  useEffect(() => {
+    // scrollToElement called in another useEffect to make sure sections are rendered first.
+    if (listRef.current) {
+      scrollToElement(listRef.current);
+    }
+  }, [sections]);
+
   if (isLoading) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <></>;
diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
index 1655776d60..bbd5649ce0 100644
--- a/src/course-outline/section-card/SectionCard.jsx
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -91,7 +91,7 @@ const SectionCard = forwardRef(({
         return;
       }
       // Time to actually perform the action
-      moveSection(dragIndex, hoverIndex);
+      moveSection(dragIndex, hoverIndex, moveRef.current);
       // Note: we're mutating the monitor item here!
       // Generally it's better to avoid mutations,
       // but it's good here for the sake of performance
diff --git a/src/course-outline/utils.jsx b/src/course-outline/utils.jsx
index 29b049cf89..7853eb3109 100644
--- a/src/course-outline/utils.jsx
+++ b/src/course-outline/utils.jsx
@@ -109,12 +109,23 @@ const getHighlightsFormValues = (currentHighlights) => {
   return formValues;
 };
 
-const scrollToElement = (ref) => {
-  ref.current?.scrollIntoView({
-    block: 'end',
-    inline: 'nearest',
-    behavior: 'smooth',
-  });
+/**
+ * Method to scroll into view port, if it's outside the viewport
+ *
+ * @param {Object} target - DOM Element
+ * @returns {undefined}
+ */
+const scrollToElement = target => {
+  if (target.getBoundingClientRect().bottom > window.innerHeight) {
+    //  The bottom of the target will be aligned to the bottom of the visible area of the scrollable ancestor.
+    target.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
+  }
+
+  // Target is outside the view from the top
+  if (target.getBoundingClientRect().top < 0) {
+    // The top of the target will be aligned to the top of the visible area of the scrollable ancestor
+    target.scrollIntoView({ behavior: 'smooth' });
+  }
 };
 
 export {

From 8371ce1a05e6a2d17ec6bc88bf66443a64006235 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@disroot.org>
Date: Wed, 13 Dec 2023 18:09:24 +0530
Subject: [PATCH 16/16] test: update tests

---
 src/course-outline/CourseOutline.test.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
index 2a0710c6be..eac6fa5c84 100644
--- a/src/course-outline/CourseOutline.test.jsx
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -124,6 +124,10 @@ describe('<CourseOutline />', () => {
   it('adds new section correctly', async () => {
     const { findAllByTestId } = render(<RootWrapper />);
     let element = await findAllByTestId('section-card');
+    window.HTMLElement.prototype.getBoundingClientRect = jest.fn(() => ({
+      top: 0,
+      bottom: 4000,
+    }));
     expect(element.length).toBe(4);
 
     axiosMock
@@ -147,6 +151,10 @@ describe('<CourseOutline />', () => {
     const [section] = await findAllByTestId('section-card');
     let subsections = await within(section).findAllByTestId('subsection-card');
     expect(subsections.length).toBe(1);
+    window.HTMLElement.prototype.getBoundingClientRect = jest.fn(() => ({
+      top: 0,
+      bottom: 4000,
+    }));
 
     axiosMock
       .onPost(getXBlockBaseApiUrl())
@@ -160,6 +168,7 @@ describe('<CourseOutline />', () => {
 
     subsections = await within(section).findAllByTestId('subsection-card');
     expect(subsections.length).toBe(2);
+    expect(window.HTMLElement.prototype.scrollIntoView).toBeCalled();
   });
 
   it('render error alert after failed reindex correctly', async () => {
@@ -490,7 +499,7 @@ describe('<CourseOutline />', () => {
     expect(getByRole('button', { name: '5 Section highlights' })).toBeInTheDocument();
   });
 
-  it('check section order list when set section order query is successful', async () => {
+  it('check section list is ordered successfully', async () => {
     const { getAllByTestId } = render(<RootWrapper />);
     const courseBlockId = courseOutlineIndexMock.courseStructure.id;
     let { children } = courseOutlineIndexMock.courseStructure.childInfo;
@@ -511,7 +520,7 @@ describe('<CourseOutline />', () => {
     });
   });
 
-  it('check section order list when set section order query is unsuccessful', async () => {
+  it('check section list is restored to original order when API call fails', async () => {
     const { getAllByTestId } = render(<RootWrapper />);
     const courseBlockId = courseOutlineIndexMock.courseStructure.id;
     const { children } = courseOutlineIndexMock.courseStructure.childInfo;