feat: expand collapse button bar

Author: navinkarkera

src/course-outline/CourseOutline.tsx

@@ -8,9 +8,11 @@ import {
   TransitionReplace,
   Toast,
   StandardModal,
+  Button,
+  ActionRow,
 } from '@openedx/paragon';
 import { Helmet } from 'react-helmet';
-import { CheckCircle as CheckCircleIcon } from '@openedx/paragon/icons';
+import { CheckCircle as CheckCircleIcon, CloseFullscreen, OpenInFull } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 import {
   arrayMove,
@@ -61,6 +63,7 @@ import {
 } from './drag-helper/utils';
 import { useCourseOutline } from './hooks';
 import messages from './messages';
+import headerMessages from './header-navigations/messages';
 import { getTagsExportFile } from './data/api';
 import OutlineAddChildButtons from './OutlineAddChildButtons';
 import { StatusBar } from './status-bar/StatusBar';
@@ -333,6 +336,24 @@ const CourseOutline = () => {
               />
             )}
           />
+          {showNewActionsBar
+            ? (
+              <StatusBar
+                courseId={courseId}
+                isLoading={isLoading}
+                statusBarData={statusBarData}
+                notificationCount={3}
+              />
+            ) : (
+              <LegacyStatusBar
+                courseId={courseId}
+                isLoading={isLoading}
+                statusBarData={statusBarData}
+                openEnableHighlightsModal={openEnableHighlightsModal}
+                handleVideoSharingOptionChange={handleVideoSharingOptionChange}
+              />
+            )}
+          <hr className='mt-4 mb-0 w-100 text-light-400' />
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}
             md={[{ span: 9 }, { span: 3 }]}
@@ -343,24 +364,22 @@ const CourseOutline = () => {
             <Layout.Element>
               <article>
                 <div>
+                  {showNewActionsBar && <ActionRow className='mt-3'>
+                    {Boolean(sectionsList.length) && (
+                      <Button
+                        variant="outline-primary"
+                        id="expand-collapse-all-button"
+                        data-testid="expand-collapse-all-button"
+                        iconBefore={isSectionsExpanded ? CloseFullscreen : OpenInFull}
+                        onClick={headerNavigationsActions.handleExpandAll}
+                      >
+                        {isSectionsExpanded
+                          ? intl.formatMessage(headerMessages.collapseAllButton)
+                          : intl.formatMessage(headerMessages.expandAllButton)}
+                      </Button>
+                    )}
+                  </ActionRow>}
                   <section className="course-outline-section">
-                    {showNewActionsBar
-                      ? (
-                        <StatusBar
-                          courseId={courseId}
-                          isLoading={isLoading}
-                          statusBarData={statusBarData}
-                          notificationCount={3}
-                        />
-                      ) : (
-                        <LegacyStatusBar
-                          courseId={courseId}
-                          isLoading={isLoading}
-                          statusBarData={statusBarData}
-                          openEnableHighlightsModal={openEnableHighlightsModal}
-                          handleVideoSharingOptionChange={handleVideoSharingOptionChange}
-                        />
-                      )}
                     {!errors?.outlineIndexApi && (
                       <div className="pt-4">
                         {sections.length ? (

src/generic/sub-header/SubHeader.tsx

@@ -26,7 +26,7 @@ const SubHeader = ({
   hideBorder = false,
   withSubHeaderContent,
 }: SubHeaderProps) => (
-  <div className={`${!hideBorder && 'border-bottom border-light-400'} mb-3`}>
+  <div className={`${!hideBorder && 'border-bottom border-light-400'} mb-2`}>
     {breadcrumbs && (
       <div className="sub-header-breadcrumbs">{breadcrumbs}</div>
     )}