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 {
@@ -32,8 +32,10 @@ import PublishModal from './publish-modal/PublishModal';
 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 {
@@ -73,6 +75,10 @@ const CourseOutline = ({ courseId }) => {
 
   document.title = getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle));
 
+  useEffect(() => {
+    scrollToBottom(listRef);
+  }, [sectionsList]);
+
   const {
     isShow: isShowProcessingNotification,
     title: processingNotificationTitle,
@@ -147,6 +153,7 @@ const CourseOutline = ({ courseId }) => {
                               onEditSectionSubmit={handleEditSectionSubmit}
                               onDuplicateSubmit={handleDuplicateSectionSubmit}
                               isSectionsExpanded={isSectionsExpanded}
+                              ref={listRef}
                             />
                           ))}
                           <Button

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,
@@ -21,7 +26,7 @@ const SectionCard = ({
   onOpenDeleteModal,
   onDuplicateSubmit,
   isSectionsExpanded,
-}) => {
+}, lastItemRef) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const [isExpanded, setIsExpanded] = useState(isSectionsExpanded);
@@ -79,7 +84,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}
@@ -128,7 +133,7 @@ const SectionCard = ({
       )}
     </div>
   );
-};
+});
 
 SectionCard.defaultProps = {
   children: null,

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,
 };