feat: use navigation sequence metadata to disable navigation components (#1273)

Use navigation_disabled sequence metadata based on Hide From TOC
block field, so the student cannot navigate to another sequences in
the course outline.
https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3853975595/Feature+Enhancement+Proposal+Hide+Sections+from+course+outline

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx

@@ -32,7 +32,12 @@ const SequenceNavigation = ({
 }) => {
   const sequence = useModel('sequences', sequenceId);
   const {
-    isFirstUnit, isLastUnit, nextLink, previousLink,
+    isFirstUnit,
+    isLastUnit,
+    nextLink,
+    previousLink,
+    navigationDisabledPrevSequence,
+    navigationDisabledNextSequence,
   } = useSequenceNavigationMetadata(sequenceId, unitId);
   const {
     courseId,
@@ -68,8 +73,7 @@ const SequenceNavigation = ({
   const renderPreviousButton = () => {
     const disabled = isFirstUnit;
     const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft;
-
-    return (
+    return navigationDisabledPrevSequence || (
       <Button
         variant="link"
         className="previous-btn"
@@ -90,7 +94,7 @@ const SequenceNavigation = ({
     const disabled = isLastUnit && !exitActive;
     const nextArrow = isRtl(getLocale()) ? ChevronLeft : ChevronRight;
 
-    return (
+    return navigationDisabledNextSequence || (
       <Button
         variant="link"
         className="next-btn"

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx

@@ -161,4 +161,52 @@ describe('Sequence Navigation', () => {
     fireEvent.click(screen.getByRole('link', { name: /next/i }));
     expect(nextHandler).toHaveBeenCalledTimes(1);
   });
+
+  it('removes "Previous" for first unit in sequence when navigation is disabled', async () => {
+    const sequenceBlocks = [Factory.build(
+      'block',
+      { type: 'sequential', children: unitBlocks.map(block => block.id) },
+      { courseId: courseMetadata.id },
+    )];
+    const sequenceMetadata = [Factory.build(
+      'sequenceMetadata',
+      { navigation_disabled: true },
+      { courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlocks[0] },
+    )];
+    const testStore = await initializeTestStore({ unitBlocks, sequenceBlocks, sequenceMetadata }, false);
+    const testData = {
+      ...mockData,
+      sequenceId: sequenceBlocks[0].id,
+      onNavigate: jest.fn(),
+    };
+    render(<SequenceNavigation {...testData} unitId={unitBlocks[0].id} />, { store: testStore, wrapWithRouter: true });
+    expect(screen.queryByRole('link', { name: /previous/i })).not.toBeInTheDocument();
+  });
+
+  it('removes "Next" for last unit in sequence when navigation is disabled', async () => {
+    const sequenceBlocks = [Factory.build(
+      'block',
+      { type: 'sequential', children: unitBlocks.map(block => block.id) },
+      { courseId: courseMetadata.id },
+    )];
+    const sequenceMetadata = [Factory.build(
+      'sequenceMetadata',
+      { navigation_disabled: true },
+      { courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlocks[0] },
+    )];
+    const testStore = await initializeTestStore({ unitBlocks, sequenceBlocks, sequenceMetadata }, false);
+    const testData = {
+      ...mockData,
+      sequenceId: sequenceBlocks[0].id,
+      onNavigate: jest.fn(),
+    };
+    render(
+      <SequenceNavigation
+        {...testData}
+        unitId={unitBlocks[unitBlocks.length - 1].id}
+      />,
+      { store: testStore, wrapWithRouter: true },
+    );
+    expect(screen.queryByRole('link', { name: /next/i })).not.toBeInTheDocument();
+  });
 });

src/courseware/course/sequence/sequence-navigation/hooks.js

@@ -13,7 +13,12 @@ export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId)
 
   // If we don't know the sequence and unit yet, then assume no.
   if (courseStatus !== 'loaded' || sequenceStatus !== 'loaded' || !currentSequenceId || !currentUnitId) {
-    return { isFirstUnit: false, isLastUnit: false };
+    return {
+      isFirstUnit: false,
+      isLastUnit: false,
+      navigationDisabledNextSequence: false,
+      navigationDisabledPrevSequence: false,
+    };
   }
 
   const sequenceIndex = sequenceIds.indexOf(currentSequenceId);
@@ -25,6 +30,9 @@ export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId)
   const isLastSequence = sequenceIndex === sequenceIds.length - 1;
   const isLastUnitInSequence = unitIndex === sequence.unitIds.length - 1;
   const isLastUnit = isLastSequence && isLastUnitInSequence;
+  const sequenceNavigationDisabled = sequence.navigationDisabled;
+  const navigationDisabledPrevSequence = sequenceNavigationDisabled && isFirstUnitInSequence;
+  const navigationDisabledNextSequence = sequenceNavigationDisabled && isLastUnitInSequence;
 
   const nextSequenceId = sequenceIndex < sequenceIds.length - 1 ? sequenceIds[sequenceIndex + 1] : null;
   const previousSequenceId = sequenceIndex > 0 ? sequenceIds[sequenceIndex - 1] : null;
@@ -52,6 +60,11 @@ export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId)
   }
 
   return {
-    isFirstUnit, isLastUnit, nextLink, previousLink,
+    isFirstUnit,
+    isLastUnit,
+    nextLink,
+    previousLink,
+    navigationDisabledNextSequence,
+    navigationDisabledPrevSequence,
   };
 }