feat: disable completion item icons on flag (#1714)

* feat: base modifications to disable completion checks when flag enabled

* chore: started updating tests

* chore: udpated tests

* chore: added missing negative test

---------

Co-authored-by: Adolfo R. Brandes <[email protected]>

Author: holaontiveros

package.json

@@ -18,7 +18,7 @@
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
-    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "test": "NODE_ENV=test fedx-scripts jest --coverage --passWithNoTests",
     "test:watch": "fedx-scripts jest --watch --passWithNoTests",
     "types": "tsc --noEmit"
   },
@@ -97,4 +97,4 @@
     ],
     "normalizeFilenames": "^.+?(\\..+?)\\.\\w+$"
   }
-}
+}

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

@@ -6,12 +6,12 @@ import {
 
 import { DashedCircleIcon } from '../icons';
 
-const CompletionIcon = ({ completionStat: { completed = 0, total = 0 } }) => {
+const CompletionIcon = ({ completionStat: { completed = 0, total = 0 }, enabled }) => {
   const percentage = total !== 0 ? Math.min((completed / total) * 100, 100) : 0;
   const remainder = 100 - percentage;
 
   switch (true) {
-    case !completed:
+    case !completed || !enabled:
       return <LmsCompletionSolidIcon className="text-gray-300" data-testid="completion-solid-icon" />;
     case completed === total:
       return <CheckCircleIcon className="text-success" data-testid="check-circle-icon" />;
@@ -25,6 +25,7 @@ CompletionIcon.propTypes = {
     completed: PropTypes.number,
     total: PropTypes.number,
   }).isRequired,
+  enabled: PropTypes.bool.isRequired,
 };
 
 export default CompletionIcon;

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

@@ -3,21 +3,33 @@ import { render, screen } from '@testing-library/react';
 import CompletionIcon from './CompletionIcon';
 
 describe('CompletionIcon', () => {
-  it('renders check circle icon when completion is equal to total', () => {
+  it('renders check circle icon when completion is equal to total and completion tracking is enabled', () => {
     const completionStat = { completed: 5, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} />);
+    render(<CompletionIcon completionStat={completionStat} enabled />);
     expect(screen.getByTestId('check-circle-icon')).toBeInTheDocument();
   });
 
-  it('renders dashed circle icon when completion is between 0 and total', () => {
+  it('renders dashed circle icon when completion is between 0 and total and completion tracking is enabled', () => {
     const completionStat = { completed: 2, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} />);
+    render(<CompletionIcon completionStat={completionStat} enabled />);
     expect(screen.getByTestId('dashed-circle-icon')).toBeInTheDocument();
   });
 
-  it('renders completion solid icon when completion is 0', () => {
+  it('renders completion solid icon when completion is between 0 and total and completion tracking is not enabled', () => {
+    const completionStat = { completed: 2, total: 5 };
+    render(<CompletionIcon completionStat={completionStat} enabled={false} />);
+    expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument();
+  });
+
+  it('renders completion solid icon when completion is 0 and enabled', () => {
+    const completionStat = { completed: 0, total: 5 };
+    render(<CompletionIcon completionStat={completionStat} enabled />);
+    expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument();
+  });
+
+  it('renders completion solid icon when completion is at any value and not enabled', () => {
     const completionStat = { completed: 0, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} />);
+    render(<CompletionIcon completionStat={completionStat} enabled={false} />);
     expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument();
   });
 });

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

@@ -18,21 +18,24 @@ const SidebarSection = ({ section, handleSelectSection }) => {
     completionStat,
   } = section;
 
-  const { activeSequenceId } = useCourseOutlineSidebar();
+  const { activeSequenceId, isEnabledCompletionTracking } = useCourseOutlineSidebar();
   const isActiveSection = sequenceIds.includes(activeSequenceId);
 
   const sectionTitle = (
     <>
       <div className="col-auto p-0">
-        <CompletionIcon completionStat={completionStat} />
+        <CompletionIcon completionStat={completionStat} enabled={isEnabledCompletionTracking} />
       </div>
       <div className="col-10 ml-3 p-0 flex-grow-1 text-dark-500 text-left text-break">
         {title}
-        <span className="sr-only">
-          , {intl.formatMessage(complete
-          ? courseOutlineMessages.completedSection
-          : courseOutlineMessages.incompleteSection)}
-        </span>
+        {isEnabledCompletionTracking && (
+          <span className="sr-only">
+            , {intl.formatMessage(complete
+            ? courseOutlineMessages.completedSection
+            : courseOutlineMessages.incompleteSection)}
+          </span>
+        )}
+
       </div>
     </>
   );

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

@@ -28,22 +28,24 @@ const SidebarSequence = ({
   } = sequence;
 
   const [open, setOpen] = useState(defaultOpen);
-  const { activeSequenceId, units } = useCourseOutlineSidebar();
+  const { activeSequenceId, units, isEnabledCompletionTracking } = useCourseOutlineSidebar();
   const isActiveSequence = id === activeSequenceId;
 
   const sectionTitle = (
     <>
       <div className="col-auto p-0" style={{ fontSize: '1.1rem' }}>
-        <CompletionIcon completionStat={completionStat} />
+        <CompletionIcon completionStat={completionStat} enabled={isEnabledCompletionTracking} />
       </div>
       <div className="col-9 d-flex flex-column flex-grow-1 ml-3 mr-auto p-0 text-left">
         <span className="align-middle text-dark-500">{title}</span>
         {specialExamInfo && <span className="align-middle small text-muted">{specialExamInfo}</span>}
-        <span className="sr-only">
-          , {intl.formatMessage(complete
-          ? courseOutlineMessages.completedAssignment
-          : courseOutlineMessages.incompleteAssignment)}
-        </span>
+        {isEnabledCompletionTracking && (
+          <span className="sr-only">
+            , {intl.formatMessage(complete
+            ? courseOutlineMessages.completedAssignment
+            : courseOutlineMessages.incompleteAssignment)}
+          </span>
+        )}
       </div>
     </>
   );
@@ -69,6 +71,7 @@ const SidebarSequence = ({
               activeUnitId={activeUnitId}
               isFirst={index === 0}
               isLocked={type === UNIT_ICON_TYPES.lock}
+              isCompletionTrackingEnabled={isEnabledCompletionTracking}
             />
           ))}
         </ol>

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

@@ -66,7 +66,7 @@ describe('<SidebarSequence />', () => {
     expect(screen.queryByText(unit.title)).not.toBeInTheDocument();
   });
 
-  it('renders correctly when sequence is not collapsed and complete', async () => {
+  it('renders correctly when sequence is not collapsed and complete and completion tracking enabled', async () => {
     const user = userEvent.setup();
     await initTestStore();
     renderWithProvider({

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

@@ -15,6 +15,7 @@ const SidebarUnit = ({
   isActive,
   isLocked,
   activeUnitId,
+  isCompletionTrackingEnabled,
 }) => {
   const intl = useIntl();
   const {
@@ -24,6 +25,7 @@ const SidebarUnit = ({
   } = unit;
 
   const iconType = isLocked ? UNIT_ICON_TYPES.lock : icon;
+  const completeAndEnabled = complete && isCompletionTrackingEnabled;
 
   return (
     <li className={classNames({ 'bg-info-100': isActive, 'border-top border-light': !isFirst })}>
@@ -36,15 +38,17 @@ const SidebarUnit = ({
         }}
       >
         <div className="col-auto p-0">
-          <UnitIcon type={iconType} isCompleted={complete} />
+          <UnitIcon type={iconType} isCompleted={completeAndEnabled} />
         </div>
         <div className="col-10 p-0 ml-3 text-break">
           <span className="align-middle">
             {title}
           </span>
-          <span className="sr-only">
-            , {intl.formatMessage(complete ? messages.completedUnit : messages.incompleteUnit)}
-          </span>
+          {isCompletionTrackingEnabled && (
+            <span className="sr-only">
+              , {intl.formatMessage(complete ? messages.completedUnit : messages.incompleteUnit)}
+            </span>
+          )}
         </div>
       </UnitLinkWrapper>
     </li>
@@ -66,6 +70,7 @@ SidebarUnit.propTypes = {
   courseId: PropTypes.string.isRequired,
   sequenceId: PropTypes.string.isRequired,
   activeUnitId: PropTypes.string.isRequired,
+  isCompletionTrackingEnabled: PropTypes.bool.isRequired,
 };
 
 export default SidebarUnit;

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

@@ -50,6 +50,7 @@ describe('<SidebarUnit />', () => {
                 unit={{ ...unit, icon: 'video', isLocked: false }}
                 isActive={false}
                 activeUnitId={unit.id}
+                isCompletionTrackingEnabled
                 {...props}
               />
             </MemoryRouter>
@@ -68,7 +69,7 @@ describe('<SidebarUnit />', () => {
     expect(container.querySelector('.text-success')).not.toBeInTheDocument();
   });
 
-  it('renders correctly when unit is complete', async () => {
+  it('renders correctly when unit is complete and tracking enabled', async () => {
     await initTestStore();
     const container = renderWithProvider({ unit: { ...unit, complete: true } });
 

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

@@ -22,7 +22,10 @@ import { ID } from './constants';
 export const useCourseOutlineSidebar = () => {
   const dispatch = useDispatch();
   const isCollapsedOutlineSidebar = window.sessionStorage.getItem('hideCourseOutlineSidebar');
-  const { enableNavigationSidebar: isEnabledSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
+  const {
+    enableNavigationSidebar: isEnabledSidebar,
+    enableCompletionTracking: isEnabledCompletionTracking,
+  } = useSelector(getCoursewareOutlineSidebarSettings);
   const courseOutlineShouldUpdate = useSelector(getCourseOutlineShouldUpdate);
   const courseOutlineStatus = useSelector(getCourseOutlineStatus);
   const sequenceStatus = useSelector(getSequenceStatus);
@@ -110,6 +113,7 @@ export const useCourseOutlineSidebar = () => {
     currentSidebar,
     shouldDisplayFullScreen,
     isEnabledSidebar,
+    isEnabledCompletionTracking,
     isOpen,
     setIsOpen,
     handleToggleCollapse,

src/courseware/data/api.js

@@ -115,5 +115,6 @@ export async function getCoursewareOutlineSidebarToggles(courseId) {
   return {
     enable_navigation_sidebar: data.enable_navigation_sidebar || false,
     always_open_auxiliary_sidebar: data.always_open_auxiliary_sidebar || false,
+    enable_completion_tracking: data.enable_completion_tracking || false,
   };
 }