feat: show hide from toc

openedx · Dec 29, 2023 · 020538f · 020538f
1 parent 06d79ce
commit 020538f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/course-home/data/api.js b/src/course-home/data/api.js
@@ -136,6 +136,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           title: block.display_name,
           resumeBlock: block.resume_block,
           sequenceIds: block.children || [],
+          hideFromTOC: block.hide_from_toc,
         };
         break;
 
@@ -152,6 +153,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           // link in the outline (even though we ignore the given url and use an internal <Link> to ourselves).
           showLink: !!block.lms_web_url,
           title: block.display_name,
+          hideFromTOC: block.hide_from_toc,
         };
         break;
 

diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Collapsible, IconButton } from '@edx/paragon';
+import { Collapsible, IconButton, Icon } from '@edx/paragon';
 import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { DisabledVisible } from '@edx/paragon/icons';
 import SequenceLink from './SequenceLink';
 import { useModel } from '../../generic/model-store';
 
@@ -23,6 +24,7 @@ const Section = ({
     complete,
     sequenceIds,
     title,
+    hideFromTOC,
   } = section;
   const {
     courseBlocks: {
@@ -42,7 +44,7 @@ const Section = ({
   }, []);
 
   const sectionTitle = (
-    <div className="row w-100 m-0">
+    <div className="d-flex row w-100 m-0">
       <div className="col-auto p-0">
         {complete ? (
           <FontAwesomeIcon
@@ -62,12 +64,19 @@ const Section = ({
           />
         )}
       </div>
-      <div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
-        <span className="align-middle">{title}</span>
+      <div className="ml-3 p-0 font-weight-bold text-dark-500">
+        <span className="align-middle col-6">{title}</span>
         <span className="sr-only">
           , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
         </span>
       </div>
+      <div className="col-10 col-sm-8 d-flex align-items-end justify-content-end">
+        {hideFromTOC && (
+        <span className="small d-flex align-content-end">
+          <Icon className="mr-2" src={DisabledVisible} />Hidden in Course Outline, accessible via link
+        </span>
+        )}
+      </div>
     </div>
   );
 

diff --git a/src/course-home/outline-tab/SequenceLink.jsx b/src/course-home/outline-tab/SequenceLink.jsx
@@ -12,6 +12,8 @@ import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-ico
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { Icon } from '@edx/paragon';
+import { DisabledVisible } from '@edx/paragon/icons';
 import EffortEstimate from '../../shared/effort-estimate';
 import { useModel } from '../../generic/model-store';
 import messages from './messages';
@@ -29,6 +31,7 @@ const SequenceLink = ({
     due,
     showLink,
     title,
+    hideFromTOC,
   } = sequence;
   const {
     userTimezone,
@@ -106,13 +109,20 @@ const SequenceLink = ({
               />
             )}
           </div>
-          <div className="col-10 p-0 ml-3 text-break">
+          <div className="col-auto p-0 ml-3 text-break">
             <span className="align-middle">{displayTitle}</span>
             <span className="sr-only">
               , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
             </span>
             <EffortEstimate className="ml-3 align-middle" block={sequence} />
           </div>
+          <div className="col-9">
+            {hideFromTOC && (
+            <span className="small d-flex">
+              <Icon className="mr-2" src={DisabledVisible} />Subsections are not navigable beetwen each other, they can only be accessed through their link.
+            </span>
+            )}
+          </div>
         </div>
         <div className="row w-100 m-0 ml-3 pl-3">
           <small className="text-body pl-2">