fix: only one in-course experience sidebar can be open at a time failing

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx

@@ -26,6 +26,7 @@ import messages from './messages';
 
 const CourseOutlineTray = ({ intl }) => {
   const [selectedSection, setSelectedSection] = useState(null);
+  const [openSequenceId, setOpenSequenceId] = useState(null);
   const [isDisplaySequenceLevel, setDisplaySequenceLevel, setDisplaySectionLevel] = useToggle(true);
 
   const dispatch = useDispatch();
@@ -62,6 +63,10 @@ const CourseOutlineTray = ({ intl }) => {
     setSelectedSection(id);
   };
 
+  const handleToggleSequence = (sequenceId) => {
+    setOpenSequenceId((prevOpenSequenceId) => (prevOpenSequenceId === sequenceId ? null : sequenceId));
+  };
+
   const sidebarHeading = (
     <div className="outline-sidebar-heading-wrapper sticky d-flex justify-content-between align-self-start align-items-center bg-light-200 p-2.5 pl-4">
       {isDisplaySequenceLevel && backButtonTitle ? (
@@ -129,7 +134,8 @@ const CourseOutlineTray = ({ intl }) => {
                 key={sequenceId}
                 courseId={courseId}
                 sequence={sequences[sequenceId]}
-                defaultOpen={sequenceId === activeSequenceId}
+                isOpen={sequenceId === openSequenceId}
+                onToggle={() => handleToggleSequence(sequenceId)}
                 activeUnitId={unitId}
               />
             ))

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx

@@ -15,7 +15,6 @@ describe('<CourseOutlineTray />', () => {
   let store;
   let section = {};
   let sequence = {};
-  let unit;
   let unitId;
   let courseId;
   let mockData;
@@ -32,7 +31,6 @@ describe('<CourseOutlineTray />', () => {
       const activeSectionId = Object.keys(state.courseware.courseOutline.sections)[0];
       section = state.courseware.courseOutline.sections[activeSectionId];
       [unitId] = sequence.unitIds;
-      unit = state.courseware.courseOutline.units[unitId];
     }
 
     mockData = {
@@ -84,7 +82,6 @@ describe('<CourseOutlineTray />', () => {
     expect(screen.getByRole('button', { name: section.title })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: messages.toggleCourseOutlineTrigger.defaultMessage })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toBeInTheDocument();
-    expect(screen.getByText(unit.title)).toBeInTheDocument();
   });
 
   it('collapses sidebar correctly when toggle button is clicked', async () => {
@@ -101,6 +98,28 @@ describe('<CourseOutlineTray />', () => {
     expect(mockToggleSidebar).toHaveBeenCalledWith(null);
   });
 
+  it('toggles openSequenceId correctly when a sequence is clicked', async () => {
+    await initTestStore();
+    renderWithProvider();
+    const sequenceButton = screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` });
+    expect(sequenceButton).toBeInTheDocument();
+    userEvent.click(sequenceButton);
+    expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toHaveAttribute('aria-expanded', 'true');
+    userEvent.click(sequenceButton);
+    expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('updates setOpenSequenceId correctly when toggling sequences', async () => {
+    await initTestStore();
+    renderWithProvider();
+    const sequenceButton = screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` });
+    expect(sequenceButton).toBeInTheDocument();
+    userEvent.click(sequenceButton);
+    expect(sequenceButton).toHaveAttribute('aria-expanded', 'true');
+    userEvent.click(sequenceButton);
+    expect(sequenceButton).toHaveAttribute('aria-expanded', 'false');
+  });
+
   it('navigates to section or sequence level correctly on click by back/section button', async () => {
     await initTestStore();
     renderWithProvider();

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -14,7 +13,8 @@ import { UNIT_ICON_TYPES } from './UnitIcon';
 const SidebarSequence = ({
   intl,
   courseId,
-  defaultOpen,
+  isOpen,
+  onToggle,
   sequence,
   activeUnitId,
 }) => {
@@ -28,7 +28,6 @@ const SidebarSequence = ({
     completionStat,
   } = sequence;
 
-  const [open, setOpen] = useState(defaultOpen);
   const { units = {} } = useSelector(getCourseOutline);
   const activeSequenceId = useSelector(getSequenceId);
   const isActiveSequence = id === activeSequenceId;
@@ -53,11 +52,11 @@ const SidebarSequence = ({
   return (
     <li>
       <Collapsible
-        className={classNames('mb-2', { 'active-section': isActiveSequence, 'bg-info-100': isActiveSequence && !open })}
+        className={classNames('mb-2', { 'active-section': isActiveSequence, 'bg-info-100': isActiveSequence && !isOpen })}
         styling="card-lg text-break"
         title={sectionTitle}
-        open={open}
-        onToggle={() => setOpen(!open)}
+        open={isOpen}
+        onToggle={onToggle}
       >
         <ol className="list-unstyled">
           {unitIds.map((unitId, index) => (
@@ -82,7 +81,8 @@ const SidebarSequence = ({
 SidebarSequence.propTypes = {
   intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
-  defaultOpen: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
   sequence: PropTypes.shape({
     complete: PropTypes.bool,
     id: PropTypes.string,

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.test.jsx

@@ -1,12 +1,11 @@
 import { MemoryRouter } from 'react-router-dom';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import courseOutlineMessages from '@src/course-home/outline-tab/messages';
 import { initializeMockApp, initializeTestStore } from '@src/setupTest';
-import messages from '../messages';
 import SidebarSequence from './SidebarSequence';
 
 initializeMockApp();
@@ -15,7 +14,6 @@ describe('<SidebarSequence />', () => {
   let courseId;
   let store;
   let sequence;
-  let unit;
   const sequenceDescription = 'sequence test description';
 
   const initTestStore = async (options) => {
@@ -25,8 +23,6 @@ describe('<SidebarSequence />', () => {
     let activeSequenceId = '';
     [activeSequenceId] = Object.keys(state.courseware.courseOutline.sequences);
     sequence = state.courseware.courseOutline.sequences[activeSequenceId];
-    const unitId = sequence.unitIds[0];
-    unit = state.courseware.courseOutline.units[unitId];
   };
 
   function renderWithProvider(props = {}) {
@@ -55,7 +51,6 @@ describe('<SidebarSequence />', () => {
     expect(screen.getByText(sequence.title)).toBeInTheDocument();
     expect(screen.queryByText(sequenceDescription)).not.toBeInTheDocument();
     expect(screen.getByText(`, ${courseOutlineMessages.incompleteAssignment.defaultMessage}`)).toBeInTheDocument();
-    expect(screen.queryByText(unit.title)).not.toBeInTheDocument();
   });
 
   it('renders correctly when sequence is not collapsed and complete', async () => {
@@ -72,13 +67,6 @@ describe('<SidebarSequence />', () => {
     expect(screen.getByText(sequence.title)).toBeInTheDocument();
     expect(screen.getByText(sequenceDescription)).toBeInTheDocument();
     expect(screen.getByText(`, ${courseOutlineMessages.completedAssignment.defaultMessage}`)).toBeInTheDocument();
-    expect(screen.getByText(unit.title)).toBeInTheDocument();
-    expect(screen.getByText(`, ${messages.incompleteUnit.defaultMessage}`)).toBeInTheDocument();
-
     userEvent.click(screen.getByText(sequence.title));
-    await waitFor(() => {
-      expect(screen.queryByText(unit.title)).not.toBeInTheDocument();
-      expect(screen.queryByText(`, ${messages.incompleteUnit.defaultMessage}`)).not.toBeInTheDocument();
-    });
   });
 });