-
- Learn more about open response assessment settings
-
-
-
- }
- validationSchema={
- {
- "enableFlexiblePeerGrade": "Yub.boolean",
- }
- }
->
- [Function]
-
-`;
diff --git a/plugins/course-apps/ora_settings/factories/mockData.js b/plugins/course-apps/ora_settings/factories/mockData.js
new file mode 100644
index 0000000000..a86ccc6a13
--- /dev/null
+++ b/plugins/course-apps/ora_settings/factories/mockData.js
@@ -0,0 +1,32 @@
+export const courseId = 'course-v1:org+num+run';
+
+export const inititalState = {
+ courseDetail: {
+ courseId,
+ status: 'successful',
+ },
+ pagesAndResources: {
+ courseAppIds: ['ora_settings'],
+ loadingStatus: 'in-progress',
+ savingStatus: '',
+ courseAppsApiStatus: {},
+ courseAppSettings: {},
+ },
+ models: {
+ courseApps: {
+ ora_settings: {
+ id: 'ora_settings',
+ name: 'Flexible Peer Grading',
+ enabled: true,
+ description: 'Enable flexible peer grading',
+ allowedOperations: {
+ enable: false,
+ configure: true,
+ },
+ documentationLinks: {
+ learnMoreConfiguration: '',
+ },
+ },
+ },
+ },
+};
diff --git a/plugins/course-apps/ora_settings/messages.js b/plugins/course-apps/ora_settings/messages.js
index 7b05afa5d4..3b119b5660 100644
--- a/plugins/course-apps/ora_settings/messages.js
+++ b/plugins/course-apps/ora_settings/messages.js
@@ -3,19 +3,51 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
heading: {
id: 'course-authoring.pages-resources.ora.heading',
- defaultMessage: 'Configure open response assessment',
+ defaultMessage: 'Configure Flexible Peer Grading',
+ description: 'Title for the modal dialog header',
},
ORASettingsHelpLink: {
id: 'course-authoring.pages-resources.ora.flex-peer-grading.link',
defaultMessage: 'Learn more about open response assessment settings',
+ description: 'Descriptive text for the hyperlink to the docs site',
},
enableFlexPeerGradeLabel: {
id: 'course-authoring.pages-resources.ora.flex-peer-grading.label',
defaultMessage: 'Flex Peer Grading',
+ description: 'Label for form switch',
},
enableFlexPeerGradeHelp: {
id: 'course-authoring.pages-resources.ora.flex-peer-grading.help',
defaultMessage: 'Turn on Flexible Peer Grading for all open response assessments in the course with peer grading.',
+ description: 'Help text describing what happens when the switch is enabled',
+ },
+ enabledBadgeLabel: {
+ id: 'course-authoring.pages-resources.ora.flex-peer-grading.enabled-badge.label',
+ defaultMessage: 'Enabled',
+ description: 'Label for badge that show users that a setting is enabled',
+ },
+ cancelLabel: {
+ id: 'course-authoring.pages-resources.ora.flex-peer-grading.cancel-button.label',
+ defaultMessage: 'Cancel',
+ description: 'Label for button that cancels user changes',
+ },
+ saveLabel: {
+ id: 'course-authoring.pages-resources.ora.flex-peer-grading.save-button.label',
+ defaultMessage: 'Save',
+ description: 'Label for button that saves user changes',
+ },
+ pendingSaveLabel: {
+ id: 'course-authoring.pages-resources.ora.flex-peer-grading.pending-save-button.label',
+ defaultMessage: 'Saving',
+ description: 'Label for button that has pending api save calls',
+ },
+ errorSavingTitle: {
+ id: 'course-authoring.pages-resources.ora.flex-peer-grading.save-error.title',
+ defaultMessage: 'We couldn\'t apply your changes.',
+ },
+ errorSavingMessage: {
+ id: 'course-authoring.pages-resources.ora.flex-peer-grading.save-error.message',
+ defaultMessage: 'Please check your entries and try again.',
},
});
diff --git a/plugins/course-apps/ora_settings/package.json b/plugins/course-apps/ora_settings/package.json
index d6de338820..8cc4bf2243 100644
--- a/plugins/course-apps/ora_settings/package.json
+++ b/plugins/course-apps/ora_settings/package.json
@@ -8,6 +8,7 @@
"@openedx/paragon": "*",
"prop-types": "*",
"react": "*",
+ "react-redux": "*",
"yup": "*"
},
"peerDependenciesMeta": {
diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
deleted file mode 100644
index 117ffc3947..0000000000
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ /dev/null
@@ -1,263 +0,0 @@
-// @ts-check
-import React, { useContext, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import {
- Container,
- Spinner,
- Stack,
- Button,
- Toast,
-} from '@openedx/paragon';
-import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { useParams, useNavigate } from 'react-router-dom';
-import messages from './messages';
-import ContentTagsCollapsible from './ContentTagsCollapsible';
-import Loading from '../generic/Loading';
-import useContentTagsDrawerContext from './ContentTagsDrawerHelper';
-import { ContentTagsDrawerContext, ContentTagsDrawerSheetContext } from './common/context';
-
-const TaxonomyList = ({ contentId }) => {
- const navigate = useNavigate();
- const intl = useIntl();
-
- const {
- isTaxonomyListLoaded,
- isContentTaxonomyTagsLoaded,
- tagsByTaxonomy,
- stagedContentTags,
- collapsibleStates,
- } = React.useContext(ContentTagsDrawerContext);
-
- if (isTaxonomyListLoaded && isContentTaxonomyTagsLoaded) {
- if (tagsByTaxonomy.length !== 0) {
- return (
-
- { tagsByTaxonomy.map((data) => (
-
-
-
-
- ))}
-
- );
- }
-
- return (
- navigate('/taxonomies')}
- >
- { intl.formatMessage(messages.emptyDrawerContentLink) }
-
- ),
- }}
- />
- );
- }
-
- return ;
-};
-
-TaxonomyList.propTypes = {
- contentId: PropTypes.string.isRequired,
-};
-
-/**
- * Drawer with the functionality to show and manage tags in a certain content.
- * It is used both in interfaces of this MFE and in edx-platform interfaces such as iframe.
- * - If you want to use it as an iframe, the component obtains the `contentId` from the url parameters.
- * Functions to close the drawer are handled internally.
- * TODO: We can delete this method when is no longer used on edx-platform.
- * - If you want to use it as react component, you need to pass the content id and the close functions
- * through the component parameters.
- */
-const ContentTagsDrawer = ({ id, onClose }) => {
- const intl = useIntl();
- // TODO: We can delete 'params' when the iframe is no longer used on edx-platform
- const params = useParams();
- const contentId = id ?? params.contentId;
-
- const context = useContentTagsDrawerContext(contentId);
- const { blockingSheet } = useContext(ContentTagsDrawerSheetContext);
-
- const {
- showToastAfterSave,
- toReadMode,
- commitGlobalStagedTagsStatus,
- isContentDataLoaded,
- contentName,
- isTaxonomyListLoaded,
- isContentTaxonomyTagsLoaded,
- stagedContentTags,
- collapsibleStates,
- isEditMode,
- commitGlobalStagedTags,
- toEditMode,
- toastMessage,
- closeToast,
- setCollapsibleToInitalState,
- otherTaxonomies,
- } = context;
-
- let onCloseDrawer = onClose;
- if (onCloseDrawer === undefined) {
- onCloseDrawer = () => {
- // "*" allows communication with any origin
- window.parent.postMessage('closeManageTagsDrawer', '*');
- };
- }
-
- useEffect(() => {
- const handleEsc = (event) => {
- /* Close drawer when ESC-key is pressed and selectable dropdown box not open */
- const selectableBoxOpen = document.querySelector('[data-selectable-box="taxonomy-tags"]');
- if (event.key === 'Escape' && !selectableBoxOpen && !blockingSheet) {
- onCloseDrawer();
- }
- };
- document.addEventListener('keydown', handleEsc);
-
- return () => {
- document.removeEventListener('keydown', handleEsc);
- };
- }, [blockingSheet]);
-
- useEffect(() => {
- /* istanbul ignore next */
- if (commitGlobalStagedTagsStatus === 'success') {
- showToastAfterSave();
- toReadMode();
- }
- }, [commitGlobalStagedTagsStatus]);
-
- // First call of the initial collapsible states
- React.useEffect(() => {
- setCollapsibleToInitalState();
- }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded]);
-
- return (
-
-
+ );
+};
+
+interface ContentTagsDrawerProps {
+ id?: string;
+ onClose?: () => void;
+ variant?: 'drawer' | 'component';
+}
+
+/**
+ * Drawer with the functionality to show and manage tags in a certain content.
+ * It is used both in interfaces of this MFE and in edx-platform interfaces such as iframe.
+ * - If you want to use it as an iframe, the component obtains the `contentId` from the url parameters.
+ * Functions to close the drawer are handled internally.
+ * TODO: We can delete this method when is no longer used on edx-platform.
+ * - If you want to use it as react component, you need to pass the content id and the close functions
+ * through the component parameters.
+ */
+const ContentTagsDrawer = ({
+ id,
+ onClose,
+ variant = 'drawer',
+}: ContentTagsDrawerProps) => {
+ const intl = useIntl();
+ // TODO: We can delete 'params' when the iframe is no longer used on edx-platform
+ const params = useParams();
+ const contentId = id ?? params.contentId;
+
+ if (contentId === undefined) {
+ throw new Error('Error: contentId cannot be null.');
+ }
+
+ const context = useContentTagsDrawerContext(contentId);
+ const { blockingSheet } = useContext(ContentTagsDrawerSheetContext);
+
+ const {
+ showToastAfterSave,
+ toReadMode,
+ commitGlobalStagedTagsStatus,
+ isTaxonomyListLoaded,
+ isContentTaxonomyTagsLoaded,
+ stagedContentTags,
+ collapsibleStates,
+ toastMessage,
+ closeToast,
+ setCollapsibleToInitalState,
+ otherTaxonomies,
+ } = context;
+
+ let onCloseDrawer: () => void;
+ if (variant === 'drawer') {
+ if (onClose === undefined) {
+ onCloseDrawer = () => {
+ // "*" allows communication with any origin
+ window.parent.postMessage('closeManageTagsDrawer', '*');
+ };
+ } else {
+ onCloseDrawer = onClose;
+ }
+ }
+
+ useEffect(() => {
+ if (variant === 'drawer') {
+ const handleEsc = (event) => {
+ /* Close drawer when ESC-key is pressed and selectable dropdown box not open */
+ const selectableBoxOpen = document.querySelector('[data-selectable-box="taxonomy-tags"]');
+ if (event.key === 'Escape' && !selectableBoxOpen && !blockingSheet) {
+ onCloseDrawer();
+ }
+ };
+ document.addEventListener('keydown', handleEsc);
+
+ return () => {
+ document.removeEventListener('keydown', handleEsc);
+ };
+ }
+ return () => {};
+ }, [blockingSheet]);
+
+ useEffect(() => {
+ /* istanbul ignore next */
+ if (commitGlobalStagedTagsStatus === 'success') {
+ showToastAfterSave();
+ toReadMode();
+ }
+ }, [commitGlobalStagedTagsStatus]);
+
+ // First call of the initial collapsible states
+ React.useEffect(() => {
+ setCollapsibleToInitalState();
+ }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded]);
+
+ const renderFooter = () => {
+ if (isTaxonomyListLoaded && isContentTaxonomyTagsLoaded) {
+ switch (variant) {
+ case 'drawer':
+ return ;
+ case 'component':
+ return ;
+ default:
+ return null;
+ }
+ }
+ return null;
+ };
+
+ return (
+
+