feat: add auto scroll to new sections when created

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 { scrollToElement } from './utils';
 
 const CourseOutline = ({ courseId }) => {
+  const listRef = useRef(null);
   const intl = useIntl();
 
   const {
@@ -77,6 +79,10 @@ const CourseOutline = ({ courseId }) => {
     handleNewSectionSubmit,
   } = useCourseOutline({ courseId });
 
+  useEffect(() => {
+    scrollToElement(listRef);
+  }, [sectionsList]);
+
   const {
     isShow: isShowProcessingNotification,
     title: processingNotificationTitle,
@@ -155,6 +161,7 @@ const CourseOutline = ({ courseId }) => {
                               onEditSectionSubmit={handleEditSectionSubmit}
                               onDuplicateSubmit={handleDuplicateSectionSubmit}
                               isSectionsExpanded={isSectionsExpanded}
+                              ref={listRef}
                             />
                           ))}
                           <Button

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: () => ({
@@ -131,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 () => {

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,

src/course-outline/utils.jsx

@@ -109,8 +109,13 @@ const getHighlightsFormValues = (currentHighlights) => {
   return formValues;
 };
 
+const scrollToElement = (ref) => {
+  ref.current?.scrollIntoView({ behavior: 'smooth' });
+};
+
 export {
   getSectionStatus,
   getSectionStatusBadgeContent,
   getHighlightsFormValues,
+  scrollToElement,
 };