feat: add functionality to see unit draft preview (#1501)

* feat: add functionality to see unit draft preview

* feat: add tests for course link redirects

* fix: course redirect unit to sequnce unit redirect

* fix: test coverage

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

@@ -1,70 +1,53 @@
 import classNames from 'classnames';
-import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { Button } from '@openedx/paragon';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import {
-  injectIntl, intlShape, isRtl, getLocale,
-} from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 
 import { GetCourseExitNavigation } from '../../course-exit';
 
-import UnitNavigationEffortEstimate from './UnitNavigationEffortEstimate';
 import { useSequenceNavigationMetadata } from './hooks';
 import messages from './messages';
+import PreviousButton from './generic/PreviousButton';
+import NextButton from './generic/NextButton';
 
 const UnitNavigation = ({
-  intl,
   sequenceId,
   unitId,
   onClickPrevious,
   onClickNext,
   isAtTop,
 }) => {
+  const intl = useIntl();
   const {
     isFirstUnit, isLastUnit, nextLink, previousLink,
   } = useSequenceNavigationMetadata(sequenceId, unitId);
   const { courseId } = useSelector(state => state.courseware);
 
-  const renderPreviousButton = () => {
-    const disabled = isFirstUnit;
-    const prevArrow = isRtl(getLocale()) ? faChevronRight : faChevronLeft;
-    return (
-      <Button
-        variant="outline-secondary"
-        className="previous-button mr-sm-2 d-flex align-items-center justify-content-center"
-        disabled={disabled}
-        onClick={onClickPrevious}
-        as={disabled ? undefined : Link}
-        to={disabled ? undefined : previousLink}
-      >
-        <FontAwesomeIcon icon={prevArrow} className="mr-2" size="sm" />
-        {intl.formatMessage(messages.previousButton)}
-      </Button>
-    );
-  };
+  const renderPreviousButton = () => (
+    <PreviousButton
+      isFirstUnit={isFirstUnit}
+      variant="outline-secondary"
+      buttonLabel={intl.formatMessage(messages.previousButton)}
+      buttonStyle="previous-button justify-content-center"
+      onClick={onClickPrevious}
+      previousLink={previousLink}
+    />
+  );
 
   const renderNextButton = () => {
     const { exitActive, exitText } = GetCourseExitNavigation(courseId, intl);
     const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);
     const disabled = isLastUnit && !exitActive;
-    const nextArrow = isRtl(getLocale()) ? faChevronLeft : faChevronRight;
     return (
-      <Button
+      <NextButton
         variant="outline-primary"
-        className="next-button d-flex align-items-center justify-content-center"
+        buttonStyle="next-button justify-content-center"
         onClick={onClickNext}
         disabled={disabled}
-        as={disabled ? undefined : Link}
-        to={disabled ? undefined : nextLink}
-      >
-        <UnitNavigationEffortEstimate sequenceId={sequenceId} unitId={unitId}>
-          {buttonText}
-        </UnitNavigationEffortEstimate>
-        <FontAwesomeIcon icon={nextArrow} className="ml-2" size="sm" />
-      </Button>
+        buttonLabel={buttonText}
+        nextLink={nextLink}
+        hasEffortEstimate
+      />
     );
   };
 
@@ -77,7 +60,6 @@ const UnitNavigation = ({
 };
 
 UnitNavigation.propTypes = {
-  intl: intlShape.isRequired,
   sequenceId: PropTypes.string.isRequired,
   unitId: PropTypes.string,
   onClickPrevious: PropTypes.func.isRequired,
@@ -90,4 +72,4 @@ UnitNavigation.defaultProps = {
   isAtTop: false,
 };
 
-export default injectIntl(UnitNavigation);
+export default UnitNavigation;