feat: [FC-0056] courseware sidebar enhancement (#1386)

- Display section and sequence progress
- Add tracking event to the unit button
- Hide the horizontal unit navigation with enabled sidebar navigation

src/courseware/data/slice.js

@@ -78,8 +78,12 @@ const slice = createSlice({
       const sequenceId = Object.keys(state.courseOutline.sequences)
         .find(id => state.courseOutline.sequences[id].unitIds.includes(unitId));
       const sequenceUnits = state.courseOutline.sequences[sequenceId].unitIds;
+      const completedUnits = sequenceUnits.filter((id) => state.courseOutline.units[id].complete);
       const isAllUnitsAreComplete = sequenceUnits.every((id) => state.courseOutline.units[id].complete);
 
+      // Update amount of completed units of the sequence
+      state.courseOutline.sequences[sequenceId].completionStat.completed = completedUnits.length;
+
       if (isAllUnitsAreComplete) {
         state.courseOutline.sequences[sequenceId].complete = true;
       }
@@ -98,6 +102,12 @@ const slice = createSlice({
         state.courseOutlineShouldUpdate = true;
       }
 
+      // Update amount of completed units of the section
+      state.courseOutline.sections[sectionId].completionStat.completed = sectionSequences.reduce(
+        (acc, id) => acc + state.courseOutline.sequences[id].completionStat.completed,
+        0,
+      );
+
       if (isAllSequencesAreComplete) {
         state.courseOutline.sections[sectionId].complete = true;
       }

src/courseware/data/utils.js

@@ -169,6 +169,10 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           id: block.id,
           title: block.display_name,
           sequenceIds: block.children || [],
+          completionStat: {
+            completed: block.completion_stat?.completion,
+            total: block.completion_stat?.completable_children,
+          },
         };
         break;
 
@@ -181,6 +185,10 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           type: block.type,
           specialExamInfo: block.special_exam_info,
           unitIds: block.children || [],
+          completionStat: {
+            completed: block.completion_stat?.completion,
+            total: block.completion_stat?.completable_children,
+          },
         };
         break;