From 4e30ebfde6eedc6c9e8a116e358c708e7d2a6227 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@disroot.org>
Date: Mon, 11 Dec 2023 20:49:09 +0530
Subject: [PATCH] feat: add auto scroll to subsection and improve scroll
 behaviour

---
 src/course-outline/CourseOutline.jsx                  |  1 +
 src/course-outline/constants.js                       |  8 ++++----
 src/course-outline/subsection-card/SubsectionCard.jsx | 10 +++++-----
 src/course-outline/utils.jsx                          |  6 +++++-
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index aa25e6d7a6..eabe680764 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -177,6 +177,7 @@ const CourseOutline = ({ courseId }) => {
                                   onOpenDeleteModal={openDeleteModal}
                                   onEditSubmit={handleEditSubmit}
                                   onDuplicateSubmit={handleDuplicateSubsectionSubmit}
+                                  ref={listRef}
                                 />
                               ))}
                             </SectionCard>
diff --git a/src/course-outline/constants.js b/src/course-outline/constants.js
index 1b498aa70f..f9a2c8821e 100644
--- a/src/course-outline/constants.js
+++ b/src/course-outline/constants.js
@@ -16,10 +16,10 @@ export const CHECKLIST_FILTERS = /** @type {const} */ ({
 });
 
 export const COURSE_BLOCK_NAMES = /** @type {const} */ ({
-  chapter: { 'id': 'chapter', 'name': 'Section' },
-  sequential: { 'id': 'sequential', 'name': 'Subsection' },
-  vertical: { 'id': 'vertical', 'name': 'Unit' },
-})
+  chapter: { id: 'chapter', name: 'Section' },
+  sequential: { id: 'sequential', name: 'Subsection' },
+  vertical: { id: 'vertical', name: 'Unit' },
+});
 
 export const LAUNCH_CHECKLIST = /** @type {const} */ ({
   data: [
diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
index 5913fb92d7..817a9053aa 100644
--- a/src/course-outline/subsection-card/SubsectionCard.jsx
+++ b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -11,7 +11,7 @@ import CardHeader from '../card-header/CardHeader';
 import { getItemStatus } from '../utils';
 import messages from './messages';
 
-const SubsectionCard = ({
+const SubsectionCard = forwardRef(({
   section,
   subsection,
   children,
@@ -20,7 +20,7 @@ const SubsectionCard = ({
   savingStatus,
   onOpenDeleteModal,
   onDuplicateSubmit,
-}) => {
+}, lastItemRef) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const [isExpanded, setIsExpanded] = useState(false);
@@ -71,7 +71,7 @@ const SubsectionCard = ({
   }, [savingStatus]);
 
   return (
-    <div className="subsection-card" data-testid="subsection-card">
+    <div className="subsection-card" data-testid="subsection-card" ref={lastItemRef}>
       <CardHeader
         title={displayName}
         status={subsectionStatus}
@@ -107,7 +107,7 @@ const SubsectionCard = ({
       )}
     </div>
   );
-};
+});
 
 SubsectionCard.defaultProps = {
   children: null,
diff --git a/src/course-outline/utils.jsx b/src/course-outline/utils.jsx
index f0e0e43c69..29b049cf89 100644
--- a/src/course-outline/utils.jsx
+++ b/src/course-outline/utils.jsx
@@ -110,7 +110,11 @@ const getHighlightsFormValues = (currentHighlights) => {
 };
 
 const scrollToElement = (ref) => {
-  ref.current?.scrollIntoView({ behavior: 'smooth' });
+  ref.current?.scrollIntoView({
+    block: 'end',
+    inline: 'nearest',
+    behavior: 'smooth',
+  });
 };
 
 export {