From 18323bda5a6bc0e3a2f22457323e1c9a7189e43b Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Wed, 29 Nov 2023 13:44:15 -0500
Subject: [PATCH 1/4] feat: add auto scroll to new sections when created

---
 src/course-outline/CourseOutline.jsx            |  9 ++++++++-
 src/course-outline/section-card/SectionCard.jsx | 15 ++++++++++-----
 src/course-outline/utils.jsx                    |  8 ++++++++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index dd9c5f65d6..9d748b7aab 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { React, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -34,8 +34,10 @@ import ConfigureModal from './configure-modal/ConfigureModal';
 import DeleteModal from './delete-modal/DeleteModal';
 import { useCourseOutline } from './hooks';
 import messages from './messages';
+import { scrollToBottom } from './utils';
 
 const CourseOutline = ({ courseId }) => {
+  const listRef = useRef(null);
   const intl = useIntl();
 
   const {
@@ -77,6 +79,10 @@ const CourseOutline = ({ courseId }) => {
     handleNewSectionSubmit,
   } = useCourseOutline({ courseId });
 
+  useEffect(() => {
+    scrollToBottom(listRef);
+  }, [sectionsList]);
+
   const {
     isShow: isShowProcessingNotification,
     title: processingNotificationTitle,
@@ -155,6 +161,7 @@ const CourseOutline = ({ courseId }) => {
                               onEditSectionSubmit={handleEditSectionSubmit}
                               onDuplicateSubmit={handleDuplicateSectionSubmit}
                               isSectionsExpanded={isSectionsExpanded}
+                              ref={listRef}
                             />
                           ))}
                           <Button
diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
index 2458255910..55c8f00439 100644
--- a/src/course-outline/section-card/SectionCard.jsx
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -1,4 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import {
+  React,
+  forwardRef,
+  useEffect,
+  useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -11,7 +16,7 @@ import CardHeader from '../card-header/CardHeader';
 import { getSectionStatus } from '../utils';
 import messages from './messages';
 
-const SectionCard = ({
+const SectionCard = forwardRef(({
   section,
   children,
   onOpenHighlightsModal,
@@ -22,7 +27,7 @@ const SectionCard = ({
   onOpenDeleteModal,
   onDuplicateSubmit,
   isSectionsExpanded,
-}) => {
+}, lastItemRef) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const [isExpanded, setIsExpanded] = useState(isSectionsExpanded);
@@ -80,7 +85,7 @@ const SectionCard = ({
   }, [savingStatus]);
 
   return (
-    <div className="section-card" data-testid="section-card">
+    <div className="section-card" data-testid="section-card" ref={lastItemRef}>
       <CardHeader
         sectionId={id}
         title={displayName}
@@ -130,7 +135,7 @@ const SectionCard = ({
       )}
     </div>
   );
-};
+});
 
 SectionCard.defaultProps = {
   children: null,
diff --git a/src/course-outline/utils.jsx b/src/course-outline/utils.jsx
index 8428a0ee1a..174f2a3295 100644
--- a/src/course-outline/utils.jsx
+++ b/src/course-outline/utils.jsx
@@ -109,8 +109,16 @@ const getHighlightsFormValues = (currentHighlights) => {
   return formValues;
 };
 
+/* eslint no-param-reassign: "error" */
+const scrollToBottom = (ref) => {
+  if (ref.current) {
+    ref.current.scrollIntoView({ behavior: 'smooth' });
+  }
+};
+
 export {
   getSectionStatus,
   getSectionStatusBadgeContent,
   getHighlightsFormValues,
+  scrollToBottom,
 };

From 7da8938ddffc61793cdd4719f19de1bddcc9eb16 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Thu, 30 Nov 2023 11:33:34 -0500
Subject: [PATCH 2/4] fix: rename util function and remove unused eslint
 comment

---
 src/course-outline/CourseOutline.jsx | 4 ++--
 src/course-outline/utils.jsx         | 9 +++------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 9d748b7aab..ccdd7fce0b 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -34,7 +34,7 @@ import ConfigureModal from './configure-modal/ConfigureModal';
 import DeleteModal from './delete-modal/DeleteModal';
 import { useCourseOutline } from './hooks';
 import messages from './messages';
-import { scrollToBottom } from './utils';
+import { scrollToElement } from './utils';
 
 const CourseOutline = ({ courseId }) => {
   const listRef = useRef(null);
@@ -80,7 +80,7 @@ const CourseOutline = ({ courseId }) => {
   } = useCourseOutline({ courseId });
 
   useEffect(() => {
-    scrollToBottom(listRef);
+    scrollToElement(listRef);
   }, [sectionsList]);
 
   const {
diff --git a/src/course-outline/utils.jsx b/src/course-outline/utils.jsx
index 174f2a3295..a1c73813e8 100644
--- a/src/course-outline/utils.jsx
+++ b/src/course-outline/utils.jsx
@@ -109,16 +109,13 @@ const getHighlightsFormValues = (currentHighlights) => {
   return formValues;
 };
 
-/* eslint no-param-reassign: "error" */
-const scrollToBottom = (ref) => {
-  if (ref.current) {
-    ref.current.scrollIntoView({ behavior: 'smooth' });
-  }
+const scrollToElement = (ref) => {
+  ref.current?.scrollIntoView({ behavior: 'smooth' });
 };
 
 export {
   getSectionStatus,
   getSectionStatusBadgeContent,
   getHighlightsFormValues,
-  scrollToBottom,
+  scrollToElement,
 };

From 0da346997bb11c995581945001d988a7c3abea2f Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Thu, 30 Nov 2023 17:11:40 -0500
Subject: [PATCH 3/4] fix: fix tests by mocking scrollIntoView function

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

diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
index e5796dd672..35e09ed99f 100644
--- a/src/course-outline/CourseOutline.test.jsx
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -51,6 +51,8 @@ let store;
 const mockPathname = '/foo-bar';
 const courseId = '123';
 
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useLocation: () => ({

From 37bae58bc396385790fcc1e1ad5f76fc579e76b5 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Mon, 4 Dec 2023 10:38:42 -0500
Subject: [PATCH 4/4] test: add assertion for checking call to mock function

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

diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
index 35e09ed99f..b6fa767c05 100644
--- a/src/course-outline/CourseOutline.test.jsx
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -133,6 +133,7 @@ describe('<CourseOutline />', () => {
 
     element = await findAllByTestId('section-card');
     expect(element.length).toBe(5);
+    expect(window.HTMLElement.prototype.scrollIntoView).toBeCalled();
   });
 
   it('render error alert after failed reindex correctly', async () => {