fix: Only expand (sub)sectionw with search result

src/course-outline/section-card/SectionCard.jsx

@@ -45,7 +45,33 @@ const SectionCard = ({
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
   const isScrolledToElement = locatorId === section.id;
-  const [isExpanded, setIsExpanded] = useState(locatorId ? !!locatorId : isSectionsExpanded);
+
+  // Expand the section if a search result should be shown/scrolled to
+  const containsSearchResult = () => {
+    if (locatorId) {
+      const subsections = section.childInfo?.children;
+      if (subsections) {
+        for (let i = 0; i < subsections.length; i++) {
+          const subsection = subsections[i];
+
+          // Check if the search result is one of the subsections
+          const matchedSubsection = subsection.id === locatorId;
+          if (matchedSubsection) {
+            return true;
+          }
+
+          // Check if the search result is one of the units
+          const matchedUnit = !!subsection.childInfo?.children?.filter((child) => child.id === locatorId).length;
+          if (matchedUnit) {
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  };
+  const [isExpanded, setIsExpanded] = useState(containsSearchResult() || isSectionsExpanded);
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   const namePrefix = 'section';
 
@@ -83,8 +109,8 @@ const SectionCard = ({
 
   useEffect(() => {
     // If the locatorId is set/changed, we need to make sure that the section is expanded
-    // in order to scroll to search result, otherwise leave it as is.
-    setIsExpanded((prevState) => (locatorId ? !!locatorId : prevState));
+    // if it contains the result, in order to scroll to it
+    setIsExpanded((prevState) => containsSearchResult() || prevState);
   }, [locatorId, setIsExpanded]);
 
   // re-create actions object for customizations
@@ -261,6 +287,20 @@ SectionCard.propTypes = {
       duplicable: PropTypes.bool.isRequired,
     }).isRequired,
     isHeaderVisible: PropTypes.bool,
+    childInfo: PropTypes.shape({
+      children: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          childInfo: PropTypes.shape({
+            children: PropTypes.arrayOf(
+              PropTypes.shape({
+                id: PropTypes.string.isRequired,
+              }),
+            ).isRequired,
+          }).isRequired,
+        }),
+      ).isRequired,
+    }).isRequired,
   }).isRequired,
   isSelfPaced: PropTypes.bool.isRequired,
   isCustomRelativeDatesActive: PropTypes.bool.isRequired,

src/course-outline/section-card/SectionCard.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import {
   act, render, fireEvent, within,
 } from '@testing-library/react';
@@ -15,6 +16,40 @@ import SectionCard from './SectionCard';
 // eslint-disable-next-line no-unused-vars
 let axiosMock;
 let store;
+const mockPathname = '/foo-bar';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const unit = {
+  id: 'unit-1',
+};
+
+const subsection = {
+  id: '123',
+  displayName: 'Subsection Name',
+  category: 'sequential',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  actions: {
+    draggable: true,
+    childAddable: true,
+    deletable: true,
+    duplicable: true,
+  },
+  isHeaderVisible: true,
+  releasedToStudents: true,
+  childInfo: {
+    children: [{
+      id: unit.id,
+    }],
+  },
+};
 
 const section = {
   id: '123',
@@ -31,37 +66,49 @@ const section = {
     duplicable: true,
   },
   isHeaderVisible: true,
+  childInfo: {
+    children: [{
+      id: subsection.id,
+      childInfo: {
+        children: [{
+          id: unit.id,
+        }],
+      },
+    }],
+  },
 };
 
 const onEditSectionSubmit = jest.fn();
 
 const queryClient = new QueryClient();
 
-const renderComponent = (props) => render(
-  <AppProvider store={store}>
+const renderComponent = (props, entry = '/') => render(
+  <AppProvider store={store} wrapWithRouter={false}>
     <QueryClientProvider client={queryClient}>
-      <IntlProvider locale="en">
-        <SectionCard
-          section={section}
-          index={1}
-          canMoveItem={jest.fn()}
-          onOrderChange={jest.fn()}
-          onOpenPublishModal={jest.fn()}
-          onOpenHighlightsModal={jest.fn()}
-          onOpenDeleteModal={jest.fn()}
-          onOpenConfigureModal={jest.fn()}
-          savingStatus=""
-          onEditSectionSubmit={onEditSectionSubmit}
-          onDuplicateSubmit={jest.fn()}
-          isSectionsExpanded
-          onNewSubsectionSubmit={jest.fn()}
-          isSelfPaced={false}
-          isCustomRelativeDatesActive={false}
-          {...props}
-        >
-          <span>children</span>
-        </SectionCard>
-      </IntlProvider>
+      <MemoryRouter initialEntries={[entry]}>
+        <IntlProvider locale="en">
+          <SectionCard
+            section={section}
+            index={1}
+            canMoveItem={jest.fn()}
+            onOrderChange={jest.fn()}
+            onOpenPublishModal={jest.fn()}
+            onOpenHighlightsModal={jest.fn()}
+            onOpenDeleteModal={jest.fn()}
+            onOpenConfigureModal={jest.fn()}
+            savingStatus=""
+            onEditSectionSubmit={onEditSectionSubmit}
+            onDuplicateSubmit={jest.fn()}
+            isSectionsExpanded
+            onNewSubsectionSubmit={jest.fn()}
+            isSelfPaced={false}
+            isCustomRelativeDatesActive={false}
+            {...props}
+          >
+            <span>children</span>
+          </SectionCard>
+        </IntlProvider>
+      </MemoryRouter>
     </QueryClientProvider>
   </AppProvider>,
 );
@@ -148,4 +195,38 @@ describe('<SectionCard />', () => {
     expect(within(element).queryByTestId('section-card-header__menu-delete-button')).not.toBeInTheDocument();
     expect(queryByTestId('new-subsection-button')).not.toBeInTheDocument();
   });
+
+  it('check extended section when URL "show" param in subsection under section', async () => {
+    const collapsedSections = { ...section };
+    collapsedSections.isSectionsExpanded = false;
+    const { findByTestId } = renderComponent(collapsedSections, `?show=${subsection.id}`);
+
+    const cardSubsections = await findByTestId('section-card__subsections');
+    const newSubsectionButton = await findByTestId('new-subsection-button');
+    expect(cardSubsections).toBeInTheDocument();
+    expect(newSubsectionButton).toBeInTheDocument();
+  });
+
+  it('check extended section when URL "show" param in unit under section', async () => {
+    const collapsedSections = { ...section };
+    collapsedSections.isSectionsExpanded = false;
+    const { findByTestId } = renderComponent(collapsedSections, `?show=${unit.id}`);
+
+    const cardSubsections = await findByTestId('section-card__subsections');
+    const newSubsectionButton = await findByTestId('new-subsection-button');
+    expect(cardSubsections).toBeInTheDocument();
+    expect(newSubsectionButton).toBeInTheDocument();
+  });
+
+  it('check not extended section when URL "show" param not in section', async () => {
+    const randomId = 'random-id';
+    const collapsedSections = { ...section };
+    collapsedSections.isSectionsExpanded = false;
+    const { queryByTestId } = renderComponent(collapsedSections, `?show=${randomId}`);
+
+    const cardSubsections = await queryByTestId('section-card__subsections');
+    const newSubsectionButton = await queryByTestId('new-subsection-button');
+    expect(cardSubsections).toBeNull();
+    expect(newSubsectionButton).toBeNull();
+  });
 });

src/course-outline/subsection-card/SubsectionCard.jsx

@@ -73,7 +73,14 @@ const SubsectionCard = ({
   actions.allowMoveDown = !isEmpty(moveDownDetails);
 
   // Expand the subsection if a search result should be shown/scrolled to
-  const [isExpanded, setIsExpanded] = useState(locatorId ? !!locatorId : !isHeaderVisible);
+  const containsSearchResult = () => {
+    if (locatorId) {
+      return !!subsection.childInfo?.children?.filter((child) => child.id === locatorId).length;
+    }
+
+    return false;
+  };
+  const [isExpanded, setIsExpanded] = useState(containsSearchResult() || !isHeaderVisible);
   const subsectionStatus = getItemStatus({
     published,
     visibilityState,
@@ -141,8 +148,8 @@ const SubsectionCard = ({
 
   useEffect(() => {
     // If the locatorId is set/changed, we need to make sure that the subsection is expanded
-    // in order to scroll to search result
-    setIsExpanded((prevState) => (locatorId ? !!locatorId : prevState));
+    // if it contains the result, in order to scroll to it
+    setIsExpanded((prevState) => (containsSearchResult() || prevState));
   }, [locatorId, setIsExpanded]);
 
   useEffect(() => {
@@ -273,6 +280,13 @@ SubsectionCard.propTypes = {
       duplicable: PropTypes.bool.isRequired,
     }).isRequired,
     isHeaderVisible: PropTypes.bool,
+    childInfo: PropTypes.shape({
+      children: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+        }),
+      ).isRequired,
+    }).isRequired,
   }).isRequired,
   children: PropTypes.node,
   isSelfPaced: PropTypes.bool.isRequired,

src/course-outline/subsection-card/SubsectionCard.test.jsx

@@ -32,13 +32,8 @@ const clipboardBroadcastChannelMock = {
 
 global.BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
 
-const section = {
-  id: '123',
-  displayName: 'Section Name',
-  published: true,
-  visibilityState: 'live',
-  hasChanges: false,
-  highlights: ['highlight 1', 'highlight 2'],
+const unit = {
+  id: 'unit-1',
 };
 
 const subsection = {
@@ -56,6 +51,25 @@ const subsection = {
   },
   isHeaderVisible: true,
   releasedToStudents: true,
+  childInfo: {
+    children: [{
+      id: unit.id,
+    }],
+  },
+};
+
+const section = {
+  id: '123',
+  displayName: 'Section Name',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  highlights: ['highlight 1', 'highlight 2'],
+  childInfo: {
+    children: [{
+      id: subsection.id,
+    }],
+  },
 };
 
 const onEditSubectionSubmit = jest.fn();
@@ -227,12 +241,22 @@ describe('<SubsectionCard />', () => {
     expect(await findByText(cardHeaderMessages.statusBadgeDraft.defaultMessage)).toBeInTheDocument();
   });
 
-  it('check extended section when URL has a "show" param', async () => {
-    const { findByTestId } = renderComponent(null, `?show=${section.id}`);
+  it('check extended subsection when URL "show" param in subsection', async () => {
+    const { findByTestId } = renderComponent(null, `?show=${unit.id}`);
 
     const cardUnits = await findByTestId('subsection-card__units');
     const newUnitButton = await findByTestId('new-unit-button');
     expect(cardUnits).toBeInTheDocument();
     expect(newUnitButton).toBeInTheDocument();
   });
+
+  it('check not extended subsection when URL "show" param not in subsection', async () => {
+    const randomId = 'random-id';
+    const { queryByTestId } = renderComponent(null, `?show=${randomId}`);
+
+    const cardUnits = await queryByTestId('subsection-card__units');
+    const newUnitButton = await queryByTestId('new-unit-button');
+    expect(cardUnits).toBeNull();
+    expect(newUnitButton).toBeNull();
+  });
 });