feat: Show effort estimation if the backend provides it (#357)

AA-614

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

@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux';
 
 import { getCourseExitNavigation } from '../../course-exit';
 
+import UnitNavigationEffortEstimate from './UnitNavigationEffortEstimate';
 import { useSequenceNavigationMetadata } from './hooks';
 import messages from './messages';
 
@@ -28,8 +29,15 @@ function UnitNavigation({
     const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);
     const disabled = isLastUnit && !exitActive;
     return (
-      <Button variant="outline-primary" className="next-button" onClick={buttonOnClick} disabled={disabled}>
-        {buttonText}
+      <Button
+        variant="outline-primary"
+        className="next-button d-flex align-items-center justify-content-center"
+        onClick={buttonOnClick}
+        disabled={disabled}
+      >
+        <UnitNavigationEffortEstimate sequenceId={sequenceId} unitId={unitId}>
+          {buttonText}
+        </UnitNavigationEffortEstimate>
         <FontAwesomeIcon icon={faChevronRight} className="ml-2" size="sm" />
       </Button>
     );
@@ -39,7 +47,7 @@ function UnitNavigation({
     <div className="unit-navigation d-flex">
       <Button
         variant="outline-secondary"
-        className="previous-button mr-2"
+        className="previous-button mr-2 d-flex align-items-center justify-content-center"
         disabled={isFirstUnit}
         onClick={onClickPrevious}
       >

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import EffortEstimate from '../../../../shared/effort-estimate';
+import { sequenceIdsSelector } from '../../../data';
+import { useModel } from '../../../../generic/model-store';
+
+// This component exists to peek ahead at the next subsection or section and grab its estimated effort.
+// If we should be showing the next block's effort, we display the title and effort instead of "Next".
+// This code currently tries to handle both section and subsection estimates. But once AA-659 happens, it can be
+// simplified to one or the other code path.
+
+function UnitNavigationEffortEstimate({ children, sequenceId, unitId }) {
+  const sequenceIds = useSelector(sequenceIdsSelector);
+  const sequenceIndex = sequenceIds.indexOf(sequenceId);
+  const nextSequenceId = sequenceIndex < sequenceIds.length - 1 ? sequenceIds[sequenceIndex + 1] : null;
+  const sequence = useModel('sequences', sequenceId);
+  const nextSequence = useModel('sequences', nextSequenceId);
+  const nextSection = useModel('sections', nextSequence ? nextSequence.sectionId : null);
+
+  if (!sequence || !nextSequence) {
+    return children;
+  }
+
+  const isLastUnitInSequence = sequence.unitIds.indexOf(unitId) === sequence.unitIds.length - 1;
+  if (!isLastUnitInSequence) {
+    return children;
+  }
+
+  let blockToShow = nextSequence;
+  // The experimentation code currently only sets effort on either sequences, sections, or nothing. If we don't have
+  // sequence info, we are either doing sections or nothing. Let's look into it.
+  if (!nextSequence.effortActivities && !nextSequence.effortTime) {
+    if (!nextSection.effortActivities && !nextSection.effortTime) {
+      return children; // control group - no effort estimates at all
+    }
+
+    // Are we at a section border? If so, let's show the next section's effort estimates
+    if (sequence.sectionId !== nextSequence.sectionId) {
+      blockToShow = nextSection;
+    }
+  }
+
+  // Note: we don't use `children` here - we replace it with the next section name.
+  // AA-659: remember to add a translation for Next Up
+  return (
+    <div className="d-inline-block text-wrap">
+      Next Up: {blockToShow.title}
+      <EffortEstimate className="d-block mt-1" block={blockToShow} />
+    </div>
+  );
+}
+
+UnitNavigationEffortEstimate.propTypes = {
+  children: PropTypes.node,
+  sequenceId: PropTypes.string.isRequired,
+  unitId: PropTypes.string,
+};
+
+UnitNavigationEffortEstimate.defaultProps = {
+  children: null,
+  unitId: null,
+};
+
+export default UnitNavigationEffortEstimate;