From 8823cfaa0ad26909ae8b96a41b5015e8fcbad79c Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Tue, 28 Jan 2025 13:01:18 -0500
Subject: [PATCH] feat: update next unit button plugin for left sidebar
navigation usage (#1578)
* feat: move unit next button slot to plugins folder
* feat: update unit navigation at top to use next unit plugin
* fix: remove 2u plugin specific code
---
src/courseware/course/sequence/Sequence.jsx | 6 +-
.../SequenceNavigation.jsx | 53 +++++------------
.../sequence-navigation/UnitNavigation.jsx | 33 +++++++++--
.../UnitNavigation.test.jsx | 1 +
.../generic/NextButton.jsx | 14 ++---
.../NextUnitTopNavTriggerSlot/README.md | 55 ++++++++++++++++++
.../NextUnitTopNavTriggerSlot/index.tsx | 53 +++++++++++++++++
.../screenshot_horizontal_nav_custom.png | Bin 0 -> 22673 bytes
.../screenshot_horizontal_nav_default.png | Bin 0 -> 19917 bytes
.../screenshot_unit_at_top_custom.png | Bin 0 -> 13998 bytes
.../screenshot_unit_at_top_default.png | Bin 0 -> 16282 bytes
11 files changed, 158 insertions(+), 57 deletions(-)
create mode 100644 src/plugin-slots/NextUnitTopNavTriggerSlot/README.md
create mode 100644 src/plugin-slots/NextUnitTopNavTriggerSlot/index.tsx
create mode 100644 src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_horizontal_nav_custom.png
create mode 100644 src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_horizontal_nav_default.png
create mode 100644 src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_unit_at_top_custom.png
create mode 100644 src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_unit_at_top_default.png
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 9579b4df..4b197330 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -9,7 +9,6 @@ import {
import { useIntl } from '@edx/frontend-platform/i18n';
import { useSelector } from 'react-redux';
import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
-import { useToggle } from '@openedx/paragon';
import PageLoading from '@src/generic/PageLoading';
import { useModel } from '@src/generic/model-store';
@@ -35,7 +34,6 @@ const Sequence = ({
previousSequenceHandler,
}) => {
const intl = useIntl();
- const [isOpen, open, close] = useToggle();
const {
canAccessProctoredExams,
license,
@@ -145,6 +143,7 @@ const Sequence = ({
const renderUnitNavigation = (isAtTop) => (
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 918f6c3e..c89a7dfd 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -1,9 +1,7 @@
-import React from 'react';
import PropTypes from 'prop-types';
import { breakpoints, useWindowSize } from '@openedx/paragon';
import classNames from 'classnames';
import { useIntl } from '@edx/frontend-platform/i18n';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
import { useSelector } from 'react-redux';
import { LOADED } from '@src/constants';
@@ -15,7 +13,7 @@ import { useModel } from '../../../../generic/model-store';
import messages from './messages';
import PreviousButton from './generic/PreviousButton';
-import NextButton from './generic/NextButton';
+import { NextUnitTopNavTriggerSlot } from '../../../../plugin-slots/NextUnitTopNavTriggerSlot';
const SequenceNavigation = ({
unitId,
@@ -24,11 +22,6 @@ const SequenceNavigation = ({
onNavigate,
nextHandler,
previousHandler,
- nextSequenceHandler,
- handleNavigate,
- isOpen,
- open,
- close,
}) => {
const intl = useIntl();
const sequence = useModel('sequences', sequenceId);
@@ -83,36 +76,28 @@ const SequenceNavigation = ({
);
const renderNextButton = () => {
+ let buttonText;
const { exitActive, exitText } = GetCourseExitNavigation(courseId, intl);
- const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);
const disabled = isLastUnit && !exitActive;
+ if (isLastUnit && exitText) {
+ buttonText = exitText;
+ } else if (!shouldDisplayNotificationTriggerInSequence) {
+ buttonText = intl.formatMessage(messages.nextButton);
+ }
return navigationDisabledNextSequence || (
-
-
-
+ />
);
};
@@ -132,21 +117,11 @@ SequenceNavigation.propTypes = {
onNavigate: PropTypes.func.isRequired,
nextHandler: PropTypes.func.isRequired,
previousHandler: PropTypes.func.isRequired,
- close: PropTypes.func,
- open: PropTypes.func,
- isOpen: PropTypes.bool,
- handleNavigate: PropTypes.func,
- nextSequenceHandler: PropTypes.func,
};
SequenceNavigation.defaultProps = {
className: null,
unitId: null,
- close: null,
- open: null,
- isOpen: false,
- handleNavigate: null,
- nextSequenceHandler: null,
};
export default SequenceNavigation;
diff --git a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx
index d27e0acb..3cabbe1a 100644
--- a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx
@@ -1,7 +1,6 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { useIntl } from '@edx/frontend-platform/i18n';
-import { useSelector } from 'react-redux';
import { GetCourseExitNavigation } from '../../course-exit';
@@ -9,6 +8,7 @@ import { useSequenceNavigationMetadata } from './hooks';
import messages from './messages';
import PreviousButton from './generic/PreviousButton';
import NextButton from './generic/NextButton';
+import { NextUnitTopNavTriggerSlot } from '../../../../plugin-slots/NextUnitTopNavTriggerSlot';
const UnitNavigation = ({
sequenceId,
@@ -16,12 +16,12 @@ const UnitNavigation = ({
onClickPrevious,
onClickNext,
isAtTop,
+ courseId,
}) => {
const intl = useIntl();
const {
isFirstUnit, isLastUnit, nextLink, previousLink,
} = useSequenceNavigationMetadata(sequenceId, unitId);
- const { courseId } = useSelector(state => state.courseware);
const renderPreviousButton = () => (
+ );
+ }
+
return (
@@ -60,6 +80,7 @@ const UnitNavigation = ({
};
UnitNavigation.propTypes = {
+ courseId: PropTypes.string.isRequired,
sequenceId: PropTypes.string.isRequired,
unitId: PropTypes.string,
onClickPrevious: PropTypes.func.isRequired,
diff --git a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx
index 779769d2..26e3034f 100644
--- a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx
@@ -18,6 +18,7 @@ describe('Unit Navigation', () => {
const store = await initializeTestStore({ courseMetadata, unitBlocks });
const { courseware } = store.getState();
mockData = {
+ courseId: courseware.courseId,
unitId: unitBlocks[1].id,
sequenceId: courseware.sequenceId,
onClickPrevious: () => {},
diff --git a/src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx b/src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx
index f0051df0..40de2c51 100644
--- a/src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx
@@ -7,8 +7,8 @@ import { isRtl, getLocale } from '@edx/frontend-platform/i18n';
import UnitNavigationEffortEstimate from '../UnitNavigationEffortEstimate';
const NextButton = ({
- onClick,
- buttonLabel,
+ onClickHandler,
+ buttonText,
nextLink,
variant,
buttonStyle,
@@ -20,16 +20,16 @@ const NextButton = ({
const navLink = pathname.startsWith('/preview') ? `/preview${nextLink}` : nextLink;
const buttonContent = hasEffortEstimate ? (
- {buttonLabel}
+ {buttonText}
- ) : buttonLabel;
+ ) : buttonText;
return (