} A promise that resolves with the response data.
*/
-export async function handleCourseUnitVisibilityAndData(unitId, type, isVisible) {
+export async function handleCourseUnitVisibilityAndData(unitId, type, isVisible, groupAccess) {
const body = {
- publish: type,
+ publish: groupAccess ? null : type,
...(type === PUBLISH_TYPES.republish ? {
metadata: {
- visible_to_staff_only: isVisible,
+ visible_to_staff_only: isVisible ? true : null,
+ group_access: groupAccess || null,
},
} : {}),
};
diff --git a/src/course-unit/data/slice.js b/src/course-unit/data/slice.js
index 0134fcb054..436a957b2b 100644
--- a/src/course-unit/data/slice.js
+++ b/src/course-unit/data/slice.js
@@ -16,7 +16,7 @@ const slice = createSlice({
},
unit: {},
courseSectionVertical: {},
- courseVerticalChildren: [],
+ courseVerticalChildren: {},
},
reducers: {
fetchCourseItemSuccess: (state, { payload }) => {
diff --git a/src/course-unit/data/thunk.js b/src/course-unit/data/thunk.js
index e18a0cc6d6..6d63531881 100644
--- a/src/course-unit/data/thunk.js
+++ b/src/course-unit/data/thunk.js
@@ -111,19 +111,19 @@ export function editCourseItemQuery(itemId, displayName, sequenceId) {
};
}
-export function editCourseUnitVisibilityAndData(itemId, type, isVisible) {
+export function editCourseUnitVisibilityAndData(itemId, type, isVisible, groupAccess, isModalView, blockId = itemId) {
return async (dispatch) => {
dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
dispatch(updateQueryPendingStatus(true));
- const notificationMessage = getNotificationMessage(type, isVisible);
- dispatch(showProcessingNotification(notificationMessage));
+ const notification = getNotificationMessage(type, isVisible, isModalView);
+ dispatch(showProcessingNotification(notification));
try {
- await handleCourseUnitVisibilityAndData(itemId, type, isVisible).then(async (result) => {
+ await handleCourseUnitVisibilityAndData(itemId, type, isVisible, groupAccess).then(async (result) => {
if (result) {
- const courseUnit = await getCourseUnitData(itemId);
+ const courseUnit = await getCourseUnitData(blockId);
dispatch(fetchCourseItemSuccess(courseUnit));
- const courseVerticalChildrenData = await getCourseVerticalChildren(itemId);
+ const courseVerticalChildrenData = await getCourseVerticalChildren(blockId);
dispatch(updateCourseVerticalChildren(courseVerticalChildrenData));
dispatch(hideProcessingNotification());
dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
diff --git a/src/course-unit/data/utils.js b/src/course-unit/data/utils.js
index a37faaa4db..49223e1a7d 100644
--- a/src/course-unit/data/utils.js
+++ b/src/course-unit/data/utils.js
@@ -30,15 +30,18 @@ export function normalizeCourseSectionVerticalData(metadata) {
* Get the notification message based on the publishing type and visibility.
* @param {string} type - The publishing type.
* @param {boolean} isVisible - The visibility status.
+ * @param {boolean} isModalView - The modal view status.
* @returns {string} The corresponding notification message.
*/
-export const getNotificationMessage = (type, isVisible) => {
+export const getNotificationMessage = (type, isVisible, isModalView) => {
let notificationMessage;
if (type === PUBLISH_TYPES.discardChanges) {
notificationMessage = NOTIFICATION_MESSAGES.discardChanges;
} else if (type === PUBLISH_TYPES.makePublic) {
notificationMessage = NOTIFICATION_MESSAGES.publishing;
+ } else if (type === PUBLISH_TYPES.republish && isModalView) {
+ notificationMessage = NOTIFICATION_MESSAGES.saving;
} else if (type === PUBLISH_TYPES.republish && !isVisible) {
notificationMessage = NOTIFICATION_MESSAGES.makingVisibleToStudents;
} else if (type === PUBLISH_TYPES.republish && isVisible) {
diff --git a/src/course-unit/header-title/HeaderTitle.jsx b/src/course-unit/header-title/HeaderTitle.jsx
index 4fc5739225..0d29404ba6 100644
--- a/src/course-unit/header-title/HeaderTitle.jsx
+++ b/src/course-unit/header-title/HeaderTitle.jsx
@@ -1,13 +1,15 @@
import { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { useIntl } from '@edx/frontend-platform/i18n';
-import { Form, IconButton } from '@openedx/paragon';
+import { Form, IconButton, useToggle } from '@openedx/paragon';
import {
EditOutline as EditIcon,
Settings as SettingsIcon,
} from '@openedx/paragon/icons';
+import ConfigureModal from '../../generic/configure-modal/ConfigureModal';
+import { getCourseUnitData } from '../data/selectors';
import { updateQueryPendingStatus } from '../data/slice';
import messages from './messages';
@@ -16,10 +18,30 @@ const HeaderTitle = ({
isTitleEditFormOpen,
handleTitleEdit,
handleTitleEditSubmit,
+ handleConfigureSubmit,
}) => {
const intl = useIntl();
const dispatch = useDispatch();
const [titleValue, setTitleValue] = useState(unitTitle);
+ const currentItemData = useSelector(getCourseUnitData);
+ const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
+ const { selectedPartitionIndex, selectedGroupsLabel } = currentItemData.userPartitionInfo;
+
+ const onConfigureSubmit = (...arg) => {
+ handleConfigureSubmit(currentItemData.id, ...arg, closeConfigureModal);
+ };
+
+ const getVisibilityMessage = () => {
+ let message;
+
+ if (selectedPartitionIndex !== -1 && !Number.isNaN(selectedPartitionIndex) && selectedGroupsLabel) {
+ message = intl.formatMessage(messages.definedVisibilityMessage, { selectedGroupsLabel });
+ } else if (currentItemData.hasPartitionGroupComponents) {
+ message = intl.formatMessage(messages.commonVisibilityMessage);
+ }
+
+ return message ? ({message}
) : null;
+ };
useEffect(() => {
setTitleValue(unitTitle);
@@ -27,38 +49,46 @@ const HeaderTitle = ({
}, [unitTitle]);
return (
-
- {isTitleEditFormOpen ? (
-
- e && e.focus()}
- value={titleValue}
- name="displayName"
- onChange={(e) => setTitleValue(e.target.value)}
- aria-label={intl.formatMessage(messages.ariaLabelButtonEdit)}
- onBlur={() => handleTitleEditSubmit(titleValue)}
- onKeyDown={(e) => {
- if (e.key === 'Enter') {
- handleTitleEditSubmit(titleValue);
- }
- }}
- />
-
- ) : unitTitle}
- {
- }}
- />
-
+ <>
+
+ {isTitleEditFormOpen ? (
+
+ e && e.focus()}
+ value={titleValue}
+ name="displayName"
+ onChange={(e) => setTitleValue(e.target.value)}
+ aria-label={intl.formatMessage(messages.ariaLabelButtonEdit)}
+ onBlur={() => handleTitleEditSubmit(titleValue)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ handleTitleEditSubmit(titleValue);
+ }
+ }}
+ />
+
+ ) : unitTitle}
+
+ {getVisibilityMessage()}
+
);
};
@@ -67,6 +97,7 @@ HeaderTitle.propTypes = {
isTitleEditFormOpen: PropTypes.bool.isRequired,
handleTitleEdit: PropTypes.func.isRequired,
handleTitleEditSubmit: PropTypes.func.isRequired,
+ handleConfigureSubmit: PropTypes.func.isRequired,
};
export default HeaderTitle;
diff --git a/src/course-unit/header-title/HeaderTitle.scss b/src/course-unit/header-title/HeaderTitle.scss
new file mode 100644
index 0000000000..753c3b7184
--- /dev/null
+++ b/src/course-unit/header-title/HeaderTitle.scss
@@ -0,0 +1,4 @@
+.header-title__visibility-message {
+ font-size: $font-size-sm;
+ font-weight: $font-weight-normal;
+}
diff --git a/src/course-unit/header-title/HeaderTitle.test.jsx b/src/course-unit/header-title/HeaderTitle.test.jsx
index b5014f89c2..7e57c408e0 100644
--- a/src/course-unit/header-title/HeaderTitle.test.jsx
+++ b/src/course-unit/header-title/HeaderTitle.test.jsx
@@ -1,3 +1,5 @@
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -5,14 +7,21 @@ import { AppProvider } from '@edx/frontend-platform/react';
import { initializeMockApp } from '@edx/frontend-platform';
import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import { getCourseUnitApiUrl } from '../data/api';
+import { fetchCourseUnitQuery } from '../data/thunk';
+import { courseUnitIndexMock } from '../__mocks__';
import HeaderTitle from './HeaderTitle';
import messages from './messages';
+const blockId = '123';
const unitTitle = 'Getting Started';
const isTitleEditFormOpen = false;
const handleTitleEdit = jest.fn();
const handleTitleEditSubmit = jest.fn();
+const handleConfigureSubmit = jest.fn();
let store;
+let axiosMock;
const renderComponent = (props) => render(
@@ -22,6 +31,7 @@ const renderComponent = (props) => render(
isTitleEditFormOpen={isTitleEditFormOpen}
handleTitleEdit={handleTitleEdit}
handleTitleEditSubmit={handleTitleEditSubmit}
+ handleConfigureSubmit={handleConfigureSubmit}
{...props}
/>
@@ -40,6 +50,11 @@ describe('
- {intl.formatMessage(messages.title, { title: displayName })}
+ {dialogTitle}
{({
- values, handleSubmit, dirty, isValid, setFieldValue,
+ values, handleSubmit, setFieldValue,
}) => (
<>
@@ -281,7 +287,10 @@ const ConfigureModal = ({
{intl.formatMessage(messages.cancelButton)}
-
+
{intl.formatMessage(messages.saveButton)}
@@ -294,10 +303,63 @@ const ConfigureModal = ({
);
};
+ConfigureModal.defaultProps = {
+ isXBlockComponent: false,
+ enableProctoredExams: false,
+};
+
ConfigureModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
onConfigureSubmit: PropTypes.func.isRequired,
+ enableProctoredExams: PropTypes.bool,
+ currentItemData: PropTypes.shape({
+ displayName: PropTypes.string,
+ start: PropTypes.string,
+ visibilityState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+ due: PropTypes.string,
+ isTimeLimited: PropTypes.bool,
+ defaultTimeLimitMinutes: PropTypes.number,
+ hideAfterDue: PropTypes.bool,
+ showCorrectness: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+ courseGraders: PropTypes.arrayOf(PropTypes.string),
+ category: PropTypes.string,
+ format: PropTypes.string,
+ userPartitionInfo: PropTypes.shape({
+ selectablePartitions: PropTypes.arrayOf(PropTypes.shape({
+ groups: PropTypes.arrayOf(PropTypes.shape({
+ deleted: PropTypes.bool,
+ id: PropTypes.number,
+ name: PropTypes.string,
+ selected: PropTypes.bool,
+ })),
+ id: PropTypes.number,
+ name: PropTypes.string,
+ scheme: PropTypes.string,
+ })),
+ selectedPartitionIndex: PropTypes.number,
+ selectedGroupsLabel: PropTypes.string,
+ }),
+ ancestorHasStaffLock: PropTypes.bool,
+ isPrereq: PropTypes.bool,
+ prereqs: PropTypes.arrayOf({
+ blockDisplayName: PropTypes.string,
+ blockUsageKey: PropTypes.string,
+ }),
+ prereq: PropTypes.number,
+ prereqMinScore: PropTypes.number,
+ prereqMinCompletion: PropTypes.number,
+ releasedToStudents: PropTypes.bool,
+ wasExamEverLinkedWithExternal: PropTypes.bool,
+ isProctoredExam: PropTypes.bool,
+ isOnboardingExam: PropTypes.bool,
+ isPracticeExam: PropTypes.bool,
+ examReviewRules: PropTypes.string,
+ supportsOnboarding: PropTypes.bool,
+ showReviewRules: PropTypes.bool,
+ onlineProctoringRules: PropTypes.string,
+ }).isRequired,
+ isXBlockComponent: PropTypes.bool,
};
export default ConfigureModal;
diff --git a/src/course-outline/configure-modal/ConfigureModal.scss b/src/generic/configure-modal/ConfigureModal.scss
similarity index 100%
rename from src/course-outline/configure-modal/ConfigureModal.scss
rename to src/generic/configure-modal/ConfigureModal.scss
diff --git a/src/course-outline/configure-modal/ConfigureModal.test.jsx b/src/generic/configure-modal/ConfigureModal.test.jsx
similarity index 56%
rename from src/course-outline/configure-modal/ConfigureModal.test.jsx
rename to src/generic/configure-modal/ConfigureModal.test.jsx
index 9756f32467..3c4d699446 100644
--- a/src/course-outline/configure-modal/ConfigureModal.test.jsx
+++ b/src/generic/configure-modal/ConfigureModal.test.jsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { useSelector } from 'react-redux';
import { initializeMockApp } from '@edx/frontend-platform';
import MockAdapter from 'axios-mock-adapter';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
@@ -9,6 +8,12 @@ import { AppProvider } from '@edx/frontend-platform/react';
import initializeStore from '../../store';
import ConfigureModal from './ConfigureModal';
+import {
+ currentSectionMock,
+ currentSubsectionMock,
+ currentUnitMock,
+ currentXBlockMock,
+} from './__mocks__';
import messages from './messages';
// eslint-disable-next-line no-unused-vars
@@ -28,79 +33,6 @@ jest.mock('react-router-dom', () => ({
}),
}));
-const currentSectionMock = {
- displayName: 'Section1',
- category: 'chapter',
- start: '2025-08-10T10:00:00Z',
- visibilityState: true,
- format: 'Not Graded',
- childInfo: {
- displayName: 'Subsection',
- children: [
- {
- displayName: 'Subsection 1',
- id: 1,
- category: 'sequential',
- due: '',
- start: '2025-08-10T10:00:00Z',
- visibilityState: true,
- defaultTimeLimitMinutes: null,
- hideAfterDue: false,
- showCorrectness: false,
- format: 'Homework',
- courseGraders: ['Homework', 'Exam'],
- childInfo: {
- displayName: 'Unit',
- children: [
- {
- id: 11,
- displayName: 'Subsection_1 Unit 1',
- },
- ],
- },
- },
- {
- displayName: 'Subsection 2',
- id: 2,
- category: 'sequential',
- due: '',
- start: '2025-08-10T10:00:00Z',
- visibilityState: true,
- defaultTimeLimitMinutes: null,
- hideAfterDue: false,
- showCorrectness: false,
- format: 'Homework',
- courseGraders: ['Homework', 'Exam'],
- childInfo: {
- displayName: 'Unit',
- children: [
- {
- id: 21,
- displayName: 'Subsection_2 Unit 1',
- },
- ],
- },
- },
- {
- displayName: 'Subsection 3',
- id: 3,
- category: 'sequential',
- due: '',
- start: '2025-08-10T10:00:00Z',
- visibilityState: true,
- defaultTimeLimitMinutes: null,
- hideAfterDue: false,
- showCorrectness: false,
- format: 'Homework',
- courseGraders: ['Homework', 'Exam'],
- childInfo: {
- children: [],
- },
- },
- ],
- },
-};
-
const onCloseMock = jest.fn();
const onConfigureSubmitMock = jest.fn();
@@ -111,6 +43,7 @@ const renderComponent = () => render(
isOpen
onClose={onCloseMock}
onConfigureSubmit={onConfigureSubmitMock}
+ currentItemData={currentSectionMock}
/>
,
,
@@ -129,12 +62,11 @@ describe('
@@ -203,6 +92,7 @@ const renderSubsectionComponent = () => render(
isOpen
onClose={onCloseMock}
onConfigureSubmit={onConfigureSubmitMock}
+ currentItemData={currentSubsectionMock}
/>
,
,
@@ -221,12 +111,11 @@ describe('
,
,
@@ -359,14 +189,13 @@ describe('
+
+ ,
+ ,
+);
+
+describe('
-
- {showWarning && (
-
-
+ {!isXBlockComponent && (
+ <>
+
+
+ {showWarning && (
+
+
+ )}
+
- {group.name}
-
+
+
+ {group.name}
+
+ {group.deleted && (
+
+ {intl.formatMessage(messages.unitSelectDeletedGroupErrorMessage)}
+
+ )}
+
))}
@@ -103,13 +127,21 @@ const UnitTab = ({
);
};
+UnitTab.defaultProps = {
+ isXBlockComponent: false,
+};
+
UnitTab.propTypes = {
+ isXBlockComponent: PropTypes.bool,
values: PropTypes.shape({
isVisibleToStaffOnly: PropTypes.bool.isRequired,
selectedPartitionIndex: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
+ selectedGroups: PropTypes.oneOfType([
+ PropTypes.string,
+ ]),
}).isRequired,
setFieldValue: PropTypes.func.isRequired,
showWarning: PropTypes.bool.isRequired,
diff --git a/src/course-outline/configure-modal/VisibilityTab.jsx b/src/generic/configure-modal/VisibilityTab.jsx
similarity index 98%
rename from src/course-outline/configure-modal/VisibilityTab.jsx
rename to src/generic/configure-modal/VisibilityTab.jsx
index 44ee964619..c6ce99da4d 100644
--- a/src/course-outline/configure-modal/VisibilityTab.jsx
+++ b/src/generic/configure-modal/VisibilityTab.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Alert, Form } from '@openedx/paragon';
import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n';
import messages from './messages';
-import { COURSE_BLOCK_NAMES } from '../constants';
+import { COURSE_BLOCK_NAMES } from '../../constants';
const VisibilityTab = ({
values,
diff --git a/src/generic/configure-modal/__mocks__/index.js b/src/generic/configure-modal/__mocks__/index.js
new file mode 100644
index 0000000000..8e69d242d9
--- /dev/null
+++ b/src/generic/configure-modal/__mocks__/index.js
@@ -0,0 +1,199 @@
+export const currentSectionMock = {
+ displayName: 'Section1',
+ category: 'chapter',
+ start: '2025-08-10T10:00:00Z',
+ visibilityState: true,
+ format: 'Not Graded',
+ childInfo: {
+ displayName: 'Subsection',
+ children: [
+ {
+ displayName: 'Subsection 1',
+ id: 1,
+ category: 'sequential',
+ due: '',
+ start: '2025-08-10T10:00:00Z',
+ visibilityState: true,
+ defaultTimeLimitMinutes: null,
+ hideAfterDue: false,
+ showCorrectness: false,
+ format: 'Homework',
+ courseGraders: ['Homework', 'Exam'],
+ childInfo: {
+ displayName: 'Unit',
+ children: [
+ {
+ id: 11,
+ displayName: 'Subsection_1 Unit 1',
+ },
+ ],
+ },
+ },
+ {
+ displayName: 'Subsection 2',
+ id: 2,
+ category: 'sequential',
+ due: '',
+ start: '2025-08-10T10:00:00Z',
+ visibilityState: true,
+ defaultTimeLimitMinutes: null,
+ hideAfterDue: false,
+ showCorrectness: false,
+ format: 'Homework',
+ courseGraders: ['Homework', 'Exam'],
+ childInfo: {
+ displayName: 'Unit',
+ children: [
+ {
+ id: 21,
+ displayName: 'Subsection_2 Unit 1',
+ },
+ ],
+ },
+ },
+ {
+ displayName: 'Subsection 3',
+ id: 3,
+ category: 'sequential',
+ due: '',
+ start: '2025-08-10T10:00:00Z',
+ visibilityState: true,
+ defaultTimeLimitMinutes: null,
+ hideAfterDue: false,
+ showCorrectness: false,
+ format: 'Homework',
+ courseGraders: ['Homework', 'Exam'],
+ childInfo: {
+ children: [],
+ },
+ },
+ ],
+ },
+};
+
+export const currentSubsectionMock = {
+ displayName: 'Subsection 1',
+ id: 1,
+ category: 'sequential',
+ due: '',
+ start: '2025-08-10T10:00:00Z',
+ visibilityState: true,
+ defaultTimeLimitMinutes: null,
+ hideAfterDue: false,
+ showCorrectness: false,
+ format: 'Homework',
+ courseGraders: ['Homework', 'Exam'],
+ childInfo: {
+ displayName: 'Unit',
+ children: [
+ {
+ id: 11,
+ displayName: 'Subsection_1 Unit 1',
+ },
+ {
+ id: 12,
+ displayName: 'Subsection_1 Unit 2',
+ },
+ ],
+ },
+};
+
+export const currentUnitMock = {
+ displayName: 'Unit 1',
+ id: 1,
+ category: 'vertical',
+ due: '',
+ start: '2025-08-10T10:00:00Z',
+ visibilityState: true,
+ defaultTimeLimitMinutes: null,
+ hideAfterDue: false,
+ showCorrectness: false,
+ userPartitionInfo: {
+ selectablePartitions: [
+ {
+ id: 50,
+ name: 'Enrollment Track Groups',
+ scheme: 'enrollment_track',
+ groups: [
+ {
+ id: 6,
+ name: 'Honor',
+ selected: false,
+ deleted: false,
+ },
+ {
+ id: 2,
+ name: 'Verified',
+ selected: false,
+ deleted: false,
+ },
+ ],
+ },
+ {
+ id: 1508065533,
+ name: 'Content Groups',
+ scheme: 'cohort',
+ groups: [
+ {
+ id: 1224170703,
+ name: 'Content Group 1',
+ selected: false,
+ deleted: false,
+ },
+ ],
+ },
+ ],
+ selectedPartitionIndex: -1,
+ selectedGroupsLabel: '',
+ },
+};
+
+export const currentXBlockMock = {
+ displayName: 'Unit 1',
+ id: 1,
+ category: 'component',
+ due: '',
+ start: '2025-08-10T10:00:00Z',
+ visibilityState: true,
+ defaultTimeLimitMinutes: null,
+ hideAfterDue: false,
+ showCorrectness: false,
+ userPartitionInfo: {
+ selectablePartitions: [
+ {
+ id: 50,
+ name: 'Enrollment Track Groups',
+ scheme: 'enrollment_track',
+ groups: [
+ {
+ id: 6,
+ name: 'Honor',
+ selected: false,
+ deleted: false,
+ },
+ {
+ id: 2,
+ name: 'Verified',
+ selected: false,
+ deleted: false,
+ },
+ ],
+ },
+ {
+ id: 1508065533,
+ name: 'Content Groups',
+ scheme: 'cohort',
+ groups: [
+ {
+ id: 1224170703,
+ name: 'Content Group 1',
+ selected: false,
+ deleted: false,
+ },
+ ],
+ },
+ ],
+ selectedPartitionIndex: -1,
+ selectedGroupsLabel: '',
+ },
+};
diff --git a/src/course-outline/configure-modal/messages.js b/src/generic/configure-modal/messages.js
similarity index 93%
rename from src/course-outline/configure-modal/messages.js
rename to src/generic/configure-modal/messages.js
index 316cbc0fb0..d27f943dc6 100644
--- a/src/course-outline/configure-modal/messages.js
+++ b/src/generic/configure-modal/messages.js
@@ -3,7 +3,12 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
title: {
id: 'course-authoring.course-outline.configure-modal.title',
- defaultMessage: '{title} Settings',
+ defaultMessage: '{title} settings',
+ },
+ componentTitle: {
+ id: 'course-authoring.course-outline.configure-modal.component.title',
+ defaultMessage: 'Editing access for: {title}',
+ description: 'The visibility modal title for unit',
},
basicTabTitle: {
id: 'course-authoring.course-outline.configure-modal.basic-tab.title',
@@ -15,15 +20,15 @@ const messages = defineMessages({
},
releaseDateAndTime: {
id: 'course-authoring.course-outline.configure-modal.basic-tab.release-date-and-time',
- defaultMessage: 'Release Date and Time',
+ defaultMessage: 'Release date and time',
},
releaseDate: {
id: 'course-authoring.course-outline.configure-modal.basic-tab.release-date',
- defaultMessage: 'Release Date:',
+ defaultMessage: 'Release date:',
},
releaseTimeUTC: {
id: 'course-authoring.course-outline.configure-modal.basic-tab.release-time-UTC',
- defaultMessage: 'Release Time in UTC:',
+ defaultMessage: 'Release time in UTC:',
},
visibilityTabTitle: {
id: 'course-authoring.course-outline.configure-modal.visibility-tab.title',
@@ -31,11 +36,11 @@ const messages = defineMessages({
},
visibilitySectionTitle: {
id: 'course-authoring.course-outline.configure-modal.visibility-tab.section-visibility',
- defaultMessage: '{visibilityTitle} Visibility',
+ defaultMessage: '{visibilityTitle} visibility',
},
unitVisibility: {
id: 'course-authoring.course-outline.configure-modal.visibility-tab.unit-visibility',
- defaultMessage: 'Unit Visibility',
+ defaultMessage: 'Unit visibility',
},
hideFromLearners: {
id: 'course-authoring.course-outline.configure-modal.visibility.hide-from-learners',
@@ -65,6 +70,11 @@ const messages = defineMessages({
id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-select-group-type',
defaultMessage: 'Select a group type',
},
+ unitSelectDeletedGroupErrorMessage: {
+ id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-select-group-deleted-error-message',
+ defaultMessage: 'This group no longer exists. Choose another group or remove the access restriction.',
+ description: 'The alert text of no longer available group',
+ },
unitAllLearnersAndStaff: {
id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-all-learners-staff',
defaultMessage: 'All Learners and Staff',
@@ -87,15 +97,15 @@ const messages = defineMessages({
},
dueDate: {
id: 'course-authoring.course-outline.configure-modal.basic-tab.due-date',
- defaultMessage: 'Due Date:',
+ defaultMessage: 'Due date:',
},
dueTimeUTC: {
id: 'course-authoring.course-outline.configure-modal.basic-tab.due-time-UTC',
- defaultMessage: 'Due Time in UTC:',
+ defaultMessage: 'Due time in UTC:',
},
subsectionVisibility: {
id: 'course-authoring.course-outline.configure-modal.visibility-tab.subsection-visibility',
- defaultMessage: 'Subsection Visibility',
+ defaultMessage: 'Subsection visibility',
},
showEntireSubsection: {
id: 'course-authoring.course-outline.configure-modal.visibility-tab.show-entire-subsection',
@@ -151,7 +161,7 @@ const messages = defineMessages({
},
setSpecialExam: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.set-special-exam',
- defaultMessage: 'Set as a Special Exam',
+ defaultMessage: 'Set as a special exam',
},
none: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.none',
@@ -195,7 +205,7 @@ const messages = defineMessages({
},
timeAllotted: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.time-allotted',
- defaultMessage: 'Time Allotted (HH:MM):',
+ defaultMessage: 'Time allotted (HH:MM):',
},
timeLimitDescription: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.time-limit-description',
diff --git a/src/generic/prompt-if-dirty/PromptIfDirty.jsx b/src/generic/prompt-if-dirty/PromptIfDirty.jsx
new file mode 100644
index 0000000000..a686ea2e87
--- /dev/null
+++ b/src/generic/prompt-if-dirty/PromptIfDirty.jsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const PromptIfDirty = ({ dirty }) => {
+ useEffect(() => {
+ // eslint-disable-next-line consistent-return
+ const handleBeforeUnload = (event) => {
+ if (dirty) {
+ event.preventDefault();
+ }
+ };
+ window.addEventListener('beforeunload', handleBeforeUnload);
+
+ return () => {
+ window.removeEventListener('beforeunload', handleBeforeUnload);
+ };
+ }, [dirty]);
+
+ return null;
+};
+PromptIfDirty.propTypes = {
+ dirty: PropTypes.bool.isRequired,
+};
+export default PromptIfDirty;
diff --git a/src/generic/prompt-if-dirty/PromptIfDirty.test.jsx b/src/generic/prompt-if-dirty/PromptIfDirty.test.jsx
new file mode 100644
index 0000000000..b429a7e137
--- /dev/null
+++ b/src/generic/prompt-if-dirty/PromptIfDirty.test.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import PromptIfDirty from './PromptIfDirty';
+
+describe('PromptIfDirty', () => {
+ let container = null;
+ let mockEvent = null;
+
+ beforeEach(() => {
+ container = document.createElement('div');
+ document.body.appendChild(container);
+ mockEvent = new Event('beforeunload');
+ jest.spyOn(window, 'addEventListener');
+ jest.spyOn(window, 'removeEventListener');
+ jest.spyOn(mockEvent, 'preventDefault');
+ Object.defineProperty(mockEvent, 'returnValue', { writable: true });
+ mockEvent.returnValue = '';
+ });
+
+ afterEach(() => {
+ window.addEventListener.mockRestore();
+ window.removeEventListener.mockRestore();
+ mockEvent.preventDefault.mockRestore();
+ mockEvent = null;
+ unmountComponentAtNode(container);
+ container.remove();
+ container = null;
+ });
+
+ it('should add event listener on mount', () => {
+ act(() => {
+ render(
+
+
+ ,
+);
+
+describe('
+
+
+ {name}
+
+
+ {formatMessage(messages.titleId, { id })}
+
+
+ {!isExpanded && (
+
+ {getCombinedBadgeList(usage, group, isExperiment, formatMessage).map(
+ (badge) => (
+
+ {badge}
+
+ ),
+ )}
+
+ )}
+
+ );
+};
+
+TitleButton.defaultProps = {
+ isExperiment: false,
+};
+
+TitleButton.propTypes = {
+ group: PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ usage: PropTypes.arrayOf(
+ PropTypes.shape({
+ label: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ ),
+ version: PropTypes.number.isRequired,
+ active: PropTypes.bool,
+ description: PropTypes.string,
+ groups: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number,
+ name: PropTypes.string,
+ usage: PropTypes.arrayOf(
+ PropTypes.shape({
+ label: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ ),
+ version: PropTypes.number,
+ }),
+ ),
+ parameters: PropTypes.shape({
+ courseId: PropTypes.string,
+ }),
+ readOnly: PropTypes.bool,
+ scheme: PropTypes.string,
+ }).isRequired,
+ isExpanded: PropTypes.bool.isRequired,
+ isExperiment: PropTypes.bool,
+ onTitleClick: PropTypes.func.isRequired,
+};
+
+export default TitleButton;
diff --git a/src/group-configurations/common/UsageList.jsx b/src/group-configurations/common/UsageList.jsx
new file mode 100644
index 0000000000..5c6287a9d6
--- /dev/null
+++ b/src/group-configurations/common/UsageList.jsx
@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Stack, Icon } from '@openedx/paragon';
+import {
+ Warning as WarningIcon,
+ Error as ErrorIcon,
+} from '@openedx/paragon/icons';
+
+import { MESSAGE_VALIDATION_TYPES } from '../constants';
+import { formatUrlToUnitPage } from '../utils';
+import messages from './messages';
+
+const UsageList = ({ className, itemList, isExperiment }) => {
+ const { formatMessage } = useIntl();
+ const usageDescription = isExperiment
+ ? messages.experimentAccessTo
+ : messages.accessTo;
+
+ const renderValidationMessage = ({ text, type }) => (
+
+ {text}
+
+ );
+
+ return (
+
+
+ {formatMessage(usageDescription)}
+
+
+ {itemList.map(({ url, label, validation }) => (
+ <>
+
+ {label}
+
+ {validation && renderValidationMessage(validation)}
+
+ ))}
+
+
+ ,
+);
+
+describe('
+ {formatMessage(messages.courseOutline)}
+
+ );
+
+ const guideHowToAdd = (
+
+ {formatMessage(messages.emptyContentGroups, { outlineComponentLink })}
+
+ );
+
+ const handleExpandContent = () => {
+ setIsExpanded((prevState) => !prevState);
+ };
+
+ const handleDeleteGroup = () => {
+ contentGroupActions.handleDelete(parentGroupId, id);
+ closeDeleteModal();
+ };
+
+ return (
+ <>
+ {isEditMode ? (
+ handleEditGroup(id, values, switchOffEditMode)}
+ />
+ ) : (
+
+
+
+ {!readOnly && (
+
+
+ )}
+
+ {isExpanded && (
+
+ {usage?.length ? (
+
+ )}
+
+ group.name)}
+ parentGroupId={contentGroupsMock.id}
+ contentGroupActions={contentGroupActions}
+ handleEditGroup={handleEditGroupMock}
+ {...props}
+ />
+ ,
+);
+
+describe('
+
+
{formatMessage(messages.newGroupHeader)}
+
+
+ {({
+ values, errors, dirty, handleChange, handleSubmit,
+ }) => {
+ const isInvalid = !!errors.newGroupName;
+
+ return (
+ <>
+
+
+ {errors.newGroupName}
+
+ )}
+
+ {isUsedInLocation && (
+
+ {formatMessage(messages.alertGroupInUsage)}
+
+ )}
+
+
+ {formatMessage(messages.cancelButton)}
+
+
+ {formatMessage(
+ isEditMode ? messages.saveButton : messages.createButton,
+ )}
+
+
+
+
+ group.name)}
+ onCreateClick={onCreateClickMock}
+ onCancelClick={onCancelClickMock}
+ onEditClick={onEditClickMock}
+ {...props}
+ />
+ ,
+);
+
+describe('
+ ,
+);
+
+describe('
+
+ {name}
+
+ {groups?.length ? (
+ <>
+ {groups.map((group) => (
+
+ {formatMessage(messages.addNewGroup)}
+
+ )}
+
+ ) : (
+ !isNewGroupVisible && (
+ }
+ */
+export async function getGroupConfigurations(courseId) {
+ const { data } = await getAuthenticatedHttpClient().get(
+ getContentStoreApiUrl(courseId),
+ );
+
+ return camelCaseObject(data);
+}
+
+/**
+ * Create new content group for course.
+ * @param {string} courseId
+ * @param {object} group
+ * @returns {Promise}
+ */
+export async function createContentGroup(courseId, group) {
+ const { data } = await getAuthenticatedHttpClient().post(
+ getLegacyApiUrl(courseId, group.id),
+ group,
+ );
+
+ return camelCaseObject(data);
+}
+
+/**
+ * Edit exists content group in course.
+ * @param {string} courseId
+ * @param {object} group
+ * @returns {Promise}
+ */
+export async function editContentGroup(courseId, group) {
+ const { data } = await getAuthenticatedHttpClient().post(
+ getLegacyApiUrl(courseId, group.id),
+ group,
+ );
+
+ return camelCaseObject(data);
+}
+
+/**
+ * Delete exists content group from the course.
+ * @param {string} courseId
+ * @param {number} parentGroupId
+ * @param {number} groupId
+ * @returns {Promise}
+ */
+export async function deleteContentGroup(courseId, parentGroupId, groupId) {
+ const { data } = await getAuthenticatedHttpClient().delete(
+ getLegacyApiUrl(courseId, parentGroupId, groupId),
+ );
+
+ return camelCaseObject(data);
+}
+
+/**
+ * Create a new experiment configuration for the course.
+ * @param {string} courseId
+ * @param {object} configuration
+ * @returns {Promise}
+ */
+export async function createExperimentConfiguration(courseId, configuration) {
+ const { data } = await getAuthenticatedHttpClient().post(
+ getLegacyApiUrl(courseId),
+ configuration,
+ );
+
+ return camelCaseObject(data);
+}
+
+/**
+ * Edit the experiment configuration for the course.
+ * @param {string} courseId
+ * @param {object} configuration
+ * @returns {Promise}
+ */
+export async function editExperimentConfiguration(courseId, configuration) {
+ const { data } = await getAuthenticatedHttpClient().post(
+ getLegacyApiUrl(courseId, configuration.id),
+ configuration,
+ );
+
+ return camelCaseObject(data);
+}
+
+/**
+ * Delete existing experimental configuration from the course.
+ * @param {string} courseId
+ * @param {number} configurationId
+ * @returns {Promise}
+ */
+export async function deleteExperimentConfiguration(courseId, configurationId) {
+ const { data } = await getAuthenticatedHttpClient().delete(
+ getLegacyApiUrl(courseId, configurationId),
+ );
+
+ return camelCaseObject(data);
+}
diff --git a/src/group-configurations/data/api.test.js b/src/group-configurations/data/api.test.js
new file mode 100644
index 0000000000..fe5ef9fae4
--- /dev/null
+++ b/src/group-configurations/data/api.test.js
@@ -0,0 +1,149 @@
+import MockAdapter from 'axios-mock-adapter';
+import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { groupConfigurationResponseMock } from '../__mocks__';
+import { initialContentGroupObject } from '../content-groups-section/utils';
+import { initialExperimentConfiguration } from '../experiment-configurations-section/constants';
+import {
+ createContentGroup,
+ createExperimentConfiguration,
+ deleteContentGroup,
+ editContentGroup,
+ getContentStoreApiUrl,
+ getGroupConfigurations,
+ getLegacyApiUrl,
+} from './api';
+
+let axiosMock;
+const courseId = 'course-v1:org+101+101';
+const contentGroups = groupConfigurationResponseMock.allGroupConfigurations[1];
+const experimentConfigurations = groupConfigurationResponseMock.experimentGroupConfigurations;
+
+describe('group configurations API calls', () => {
+ beforeEach(() => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should fetch group configurations', async () => {
+ const response = { ...groupConfigurationResponseMock };
+ axiosMock.onGet(getContentStoreApiUrl(courseId)).reply(200, response);
+
+ const result = await getGroupConfigurations(courseId);
+ const expected = camelCaseObject(response);
+
+ expect(axiosMock.history.get[0].url).toEqual(
+ getContentStoreApiUrl(courseId),
+ );
+ expect(result).toEqual(expected);
+ });
+
+ it('should create content group', async () => {
+ const response = { ...groupConfigurationResponseMock };
+ const newContentGroupName = 'content-group-test';
+ const updatedContentGroups = {
+ ...contentGroups,
+ groups: [
+ ...contentGroups.groups,
+ initialContentGroupObject(newContentGroupName),
+ ],
+ };
+
+ response.allGroupConfigurations[1] = updatedContentGroups;
+ axiosMock
+ .onPost(getLegacyApiUrl(courseId, contentGroups.id), updatedContentGroups)
+ .reply(200, response);
+
+ const result = await createContentGroup(courseId, updatedContentGroups);
+ const expected = camelCaseObject(response);
+
+ expect(axiosMock.history.post[0].url).toEqual(
+ getLegacyApiUrl(courseId, updatedContentGroups.id),
+ );
+ expect(result).toEqual(expected);
+ });
+
+ it('should edit content group', async () => {
+ const editedName = 'content-group-edited';
+ const groupId = contentGroups.groups[0].id;
+ const response = { ...groupConfigurationResponseMock };
+ const editedContentGroups = {
+ ...contentGroups,
+ groups: contentGroups.groups.map((group) => (group.id === groupId ? { ...group, name: editedName } : group)),
+ };
+
+ response.allGroupConfigurations[1] = editedContentGroups;
+ axiosMock
+ .onPost(getLegacyApiUrl(courseId, contentGroups.id), editedContentGroups)
+ .reply(200, response);
+
+ const result = await editContentGroup(courseId, editedContentGroups);
+ const expected = camelCaseObject(response);
+
+ expect(axiosMock.history.post[0].url).toEqual(
+ getLegacyApiUrl(courseId, editedContentGroups.id),
+ );
+ expect(result).toEqual(expected);
+ });
+
+ it('should delete content group', async () => {
+ const parentGroupId = contentGroups.id;
+ const groupId = contentGroups.groups[0].id;
+ const response = { ...groupConfigurationResponseMock };
+ const updatedContentGroups = {
+ ...contentGroups,
+ groups: contentGroups.groups.filter((group) => group.id !== groupId),
+ };
+
+ response.allGroupConfigurations[1] = updatedContentGroups;
+ axiosMock
+ .onDelete(
+ getLegacyApiUrl(courseId, parentGroupId, groupId),
+ updatedContentGroups,
+ )
+ .reply(200, response);
+
+ const result = await deleteContentGroup(courseId, parentGroupId, groupId);
+ const expected = camelCaseObject(response);
+
+ expect(axiosMock.history.delete[0].url).toEqual(
+ getLegacyApiUrl(courseId, updatedContentGroups.id, groupId),
+ );
+ expect(result).toEqual(expected);
+ });
+
+ it('should create experiment configurations', async () => {
+ const newConfigurationName = 'experiment-configuration-test';
+ const response = { ...groupConfigurationResponseMock };
+ const updatedConfigurations = [
+ ...experimentConfigurations,
+ { ...initialExperimentConfiguration, name: newConfigurationName },
+ ];
+
+ response.experimentGroupConfigurations = updatedConfigurations;
+ axiosMock
+ .onPost(getLegacyApiUrl(courseId), updatedConfigurations)
+ .reply(200, response);
+
+ const result = await createExperimentConfiguration(
+ courseId,
+ updatedConfigurations,
+ );
+ const expected = camelCaseObject(response);
+
+ expect(axiosMock.history.post[0].url).toEqual(getLegacyApiUrl(courseId));
+ expect(result).toEqual(expected);
+ });
+});
diff --git a/src/group-configurations/data/selectors.js b/src/group-configurations/data/selectors.js
new file mode 100644
index 0000000000..7f3f0d230d
--- /dev/null
+++ b/src/group-configurations/data/selectors.js
@@ -0,0 +1,3 @@
+export const getGroupConfigurationsData = (state) => state.groupConfigurations.groupConfigurations;
+export const getLoadingStatus = (state) => state.groupConfigurations.loadingStatus;
+export const getSavingStatus = (state) => state.groupConfigurations.savingStatus;
diff --git a/src/group-configurations/data/slice.js b/src/group-configurations/data/slice.js
new file mode 100644
index 0000000000..4530de1943
--- /dev/null
+++ b/src/group-configurations/data/slice.js
@@ -0,0 +1,78 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+ name: 'groupConfigurations',
+ initialState: {
+ savingStatus: '',
+ loadingStatus: RequestStatus.IN_PROGRESS,
+ groupConfigurations: {},
+ },
+ reducers: {
+ fetchGroupConfigurations: (state, { payload }) => {
+ state.groupConfigurations = payload.groupConfigurations;
+ },
+ updateGroupConfigurationsSuccess: (state, { payload }) => {
+ const groupIndex = state.groupConfigurations.allGroupConfigurations.findIndex(
+ group => payload.data.id === group.id,
+ );
+
+ if (groupIndex !== -1) {
+ state.groupConfigurations.allGroupConfigurations[groupIndex] = payload.data;
+ }
+ },
+ deleteGroupConfigurationsSuccess: (state, { payload }) => {
+ const { parentGroupId, groupId } = payload;
+ const parentGroupIndex = state.groupConfigurations.allGroupConfigurations.findIndex(
+ group => parentGroupId === group.id,
+ );
+ if (parentGroupIndex !== -1) {
+ state.groupConfigurations.allGroupConfigurations[parentGroupIndex].groups = state
+ .groupConfigurations.allGroupConfigurations[parentGroupIndex].groups.filter(group => group.id !== groupId);
+ }
+ },
+ updateLoadingStatus: (state, { payload }) => {
+ state.loadingStatus = payload.status;
+ },
+ updateSavingStatuses: (state, { payload }) => {
+ state.savingStatus = payload.status;
+ },
+ updateExperimentConfigurationSuccess: (state, { payload }) => {
+ const { configuration } = payload;
+ const experimentConfigurationState = state.groupConfigurations.experimentGroupConfigurations;
+ const configurationIdx = experimentConfigurationState.findIndex(
+ (conf) => configuration.id === conf.id,
+ );
+
+ if (configurationIdx !== -1) {
+ experimentConfigurationState[configurationIdx] = configuration;
+ } else {
+ state.groupConfigurations.experimentGroupConfigurations = [
+ ...experimentConfigurationState,
+ configuration,
+ ];
+ }
+ },
+ deleteExperimentConfigurationSuccess: (state, { payload }) => {
+ const { configurationId } = payload;
+ const filteredGroups = state.groupConfigurations.experimentGroupConfigurations.filter(
+ (configuration) => configuration.id !== configurationId,
+ );
+ state.groupConfigurations.experimentGroupConfigurations = filteredGroups;
+ },
+ },
+});
+
+export const {
+ fetchGroupConfigurations,
+ updateLoadingStatus,
+ updateSavingStatuses,
+ updateGroupConfigurationsSuccess,
+ deleteGroupConfigurationsSuccess,
+ updateExperimentConfigurationSuccess,
+ deleteExperimentConfigurationSuccess,
+} = slice.actions;
+
+export const { reducer } = slice;
diff --git a/src/group-configurations/data/slice.test.js b/src/group-configurations/data/slice.test.js
new file mode 100644
index 0000000000..ebc6ef8780
--- /dev/null
+++ b/src/group-configurations/data/slice.test.js
@@ -0,0 +1,78 @@
+import {
+ reducer,
+ fetchGroupConfigurations,
+ updateGroupConfigurationsSuccess,
+ deleteGroupConfigurationsSuccess,
+ updateExperimentConfigurationSuccess,
+ deleteExperimentConfigurationSuccess,
+} from './slice';
+import { RequestStatus } from '../../data/constants';
+
+describe('groupConfigurations slice', () => {
+ let initialState;
+
+ beforeEach(() => {
+ initialState = {
+ savingStatus: '',
+ loadingStatus: RequestStatus.IN_PROGRESS,
+ groupConfigurations: {
+ allGroupConfigurations: [{ id: 1, name: 'Group 1', groups: [{ id: 1, name: 'inner group' }] }],
+ experimentGroupConfigurations: [],
+ },
+ };
+ });
+
+ it('should update group configurations with fetchGroupConfigurations', () => {
+ const payload = {
+ groupConfigurations: {
+ allGroupConfigurations: [{ id: 2, name: 'Group 2' }],
+ experimentGroupConfigurations: [],
+ },
+ };
+
+ const newState = reducer(initialState, fetchGroupConfigurations(payload));
+
+ expect(newState.groupConfigurations).toEqual(payload.groupConfigurations);
+ });
+
+ it('should update an existing group configuration with updateGroupConfigurationsSuccess', () => {
+ const payload = { data: { id: 1, name: 'Updated Group' } };
+
+ const newState = reducer(initialState, updateGroupConfigurationsSuccess(payload));
+
+ expect(newState.groupConfigurations.allGroupConfigurations[0]).toEqual(payload.data);
+ });
+
+ it('should delete a group configuration with deleteGroupConfigurationsSuccess', () => {
+ const payload = { parentGroupId: 1, groupId: 1 };
+
+ const newState = reducer(initialState, deleteGroupConfigurationsSuccess(payload));
+
+ expect(newState.groupConfigurations.allGroupConfigurations[0].groups.length).toEqual(0);
+ });
+
+ it('should update experiment configuration with updateExperimentConfigurationSuccess', () => {
+ const payload = { configuration: { id: 1, name: 'Experiment Config' } };
+
+ const newState = reducer(initialState, updateExperimentConfigurationSuccess(payload));
+
+ expect(newState.groupConfigurations.experimentGroupConfigurations.length).toEqual(1);
+ expect(newState.groupConfigurations.experimentGroupConfigurations[0]).toEqual(payload.configuration);
+ });
+
+ it('should delete an experiment configuration with deleteExperimentConfigurationSuccess', () => {
+ const initialStateWithExperiment = {
+ savingStatus: '',
+ loadingStatus: RequestStatus.IN_PROGRESS,
+ groupConfigurations: {
+ allGroupConfigurations: [],
+ experimentGroupConfigurations: [{ id: 1, name: 'Experiment Config' }],
+ },
+ };
+ const payload = { configurationId: 1 };
+
+ const newState = reducer(initialStateWithExperiment, deleteExperimentConfigurationSuccess(payload));
+
+ expect(newState.groupConfigurations.experimentGroupConfigurations.length).toEqual(0);
+ });
+});
diff --git a/src/group-configurations/data/thunk.js b/src/group-configurations/data/thunk.js
new file mode 100644
index 0000000000..019a222ad7
--- /dev/null
+++ b/src/group-configurations/data/thunk.js
@@ -0,0 +1,148 @@
+import { RequestStatus } from '../../data/constants';
+import { NOTIFICATION_MESSAGES } from '../../constants';
+import {
+ hideProcessingNotification,
+ showProcessingNotification,
+} from '../../generic/processing-notification/data/slice';
+import {
+ getGroupConfigurations,
+ createContentGroup,
+ editContentGroup,
+ deleteContentGroup,
+ createExperimentConfiguration,
+ editExperimentConfiguration,
+ deleteExperimentConfiguration,
+} from './api';
+import {
+ fetchGroupConfigurations,
+ updateLoadingStatus,
+ updateSavingStatuses,
+ updateGroupConfigurationsSuccess,
+ deleteGroupConfigurationsSuccess,
+ updateExperimentConfigurationSuccess,
+ deleteExperimentConfigurationSuccess,
+} from './slice';
+
+export function fetchGroupConfigurationsQuery(courseId) {
+ return async (dispatch) => {
+ dispatch(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+ try {
+ const groupConfigurations = await getGroupConfigurations(courseId);
+ dispatch(fetchGroupConfigurations({ groupConfigurations }));
+ dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+ } catch (error) {
+ dispatch(updateLoadingStatus({ status: RequestStatus.FAILED }));
+ }
+ };
+}
+
+export function createContentGroupQuery(courseId, group) {
+ return async (dispatch) => {
+ dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+ dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+ try {
+ const data = await createContentGroup(courseId, group);
+ dispatch(updateGroupConfigurationsSuccess({ data }));
+ dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+ return true;
+ } catch (error) {
+ dispatch(updateSavingStatuses({ status: RequestStatus.FAILED }));
+ return false;
+ } finally {
+ dispatch(hideProcessingNotification());
+ }
+ };
+}
+
+export function editContentGroupQuery(courseId, group) {
+ return async (dispatch) => {
+ dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+ dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+ try {
+ const data = await editContentGroup(courseId, group);
+ dispatch(updateGroupConfigurationsSuccess({ data }));
+ dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+ return true;
+ } catch (error) {
+ dispatch(updateSavingStatuses({ status: RequestStatus.FAILED }));
+ return false;
+ } finally {
+ dispatch(hideProcessingNotification());
+ }
+ };
+}
+
+export function deleteContentGroupQuery(courseId, parentGroupId, groupId) {
+ return async (dispatch) => {
+ dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+ dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+
+ try {
+ await deleteContentGroup(courseId, parentGroupId, groupId);
+ dispatch(deleteGroupConfigurationsSuccess({ parentGroupId, groupId }));
+ dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+ } catch (error) {
+ dispatch(updateSavingStatuses({ status: RequestStatus.FAILED }));
+ } finally {
+ dispatch(hideProcessingNotification());
+ }
+ };
+}
+
+export function createExperimentConfigurationQuery(courseId, newConfiguration) {
+ return async (dispatch) => {
+ dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+ dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+ try {
+ const configuration = await createExperimentConfiguration(courseId, newConfiguration);
+ dispatch(updateExperimentConfigurationSuccess({ configuration }));
+ dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+ return true;
+ } catch (error) {
+ dispatch(updateSavingStatuses({ status: RequestStatus.FAILED }));
+ return false;
+ } finally {
+ dispatch(hideProcessingNotification());
+ }
+ };
+}
+
+export function editExperimentConfigurationQuery(courseId, editedConfiguration) {
+ return async (dispatch) => {
+ dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+ dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+ try {
+ const configuration = await editExperimentConfiguration(courseId, editedConfiguration);
+ dispatch(updateExperimentConfigurationSuccess({ configuration }));
+ dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+ return true;
+ } catch (error) {
+ dispatch(updateSavingStatuses({ status: RequestStatus.FAILED }));
+ return false;
+ } finally {
+ dispatch(hideProcessingNotification());
+ }
+ };
+}
+
+export function deleteExperimentConfigurationQuery(courseId, configurationId) {
+ return async (dispatch) => {
+ dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+ dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+
+ try {
+ await deleteExperimentConfiguration(courseId, configurationId);
+ dispatch(deleteExperimentConfigurationSuccess({ configurationId }));
+ dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+ } catch (error) {
+ dispatch(updateSavingStatuses({ status: RequestStatus.FAILED }));
+ } finally {
+ dispatch(hideProcessingNotification());
+ }
+ };
+}
diff --git a/src/group-configurations/data/thunk.test.js b/src/group-configurations/data/thunk.test.js
new file mode 100644
index 0000000000..131acec3d1
--- /dev/null
+++ b/src/group-configurations/data/thunk.test.js
@@ -0,0 +1,95 @@
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { groupConfigurationResponseMock } from '../__mocks__';
+import { getContentStoreApiUrl, getLegacyApiUrl } from './api';
+import * as thunkActions from './thunk';
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+
+let axiosMock;
+let store;
+const courseId = 'course-v1:org+101+101';
+
+describe('group configurations thunk', () => {
+ beforeEach(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore();
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ const response = { ...groupConfigurationResponseMock };
+ axiosMock.onGet(getContentStoreApiUrl(courseId)).reply(200, response);
+ await executeThunk(thunkActions.fetchGroupConfigurationsQuery(courseId), store.dispatch);
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('dispatches correct actions on createContentGroupQuery', async () => {
+ const mockResponse = { id: 50, name: 'new' };
+ axiosMock.onPost(getLegacyApiUrl(courseId)).reply(200, mockResponse);
+
+ await executeThunk(thunkActions.createContentGroupQuery(courseId, {}), store.dispatch);
+ const updatedGroup = store.getState()
+ .groupConfigurations.groupConfigurations.allGroupConfigurations
+ .find(group => group.id === mockResponse.id);
+ expect(updatedGroup.name).toEqual(mockResponse.name);
+ });
+ it('dispatches correct actions on editContentGroupQuery', async () => {
+ const mockResponse = { id: 50, name: 'new' };
+ axiosMock.onPost(getLegacyApiUrl(courseId)).reply(200, mockResponse);
+
+ await executeThunk(thunkActions.editContentGroupQuery(courseId, {}), store.dispatch);
+ const updatedGroup = store.getState()
+ .groupConfigurations.groupConfigurations.allGroupConfigurations
+ .find(group => group.id === mockResponse.id);
+ expect(updatedGroup.name).toEqual(mockResponse.name);
+ });
+ it('dispatches correct actions on createExperimentConfigurationQuery', async () => {
+ const mockResponse = { id: 50, name: 'new' };
+ axiosMock.onPost(getLegacyApiUrl(courseId)).reply(200, mockResponse);
+
+ await executeThunk(thunkActions.createExperimentConfigurationQuery(courseId, {}), store.dispatch);
+ const updatedGroup = store.getState()
+ .groupConfigurations.groupConfigurations.experimentGroupConfigurations
+ .find(group => group.id === mockResponse.id);
+ expect(updatedGroup.name).toEqual(mockResponse.name);
+ });
+ it('dispatches correct actions on editExperimentConfigurationQuery', async () => {
+ const mockResponse = { id: 50, name: 'new' };
+ axiosMock.onPost(getLegacyApiUrl(courseId)).reply(200, mockResponse);
+
+ await executeThunk(thunkActions.editExperimentConfigurationQuery(courseId, {}), store.dispatch);
+ const updatedGroup = store.getState()
+ .groupConfigurations.groupConfigurations.experimentGroupConfigurations
+ .find(group => group.id === mockResponse.id);
+ expect(updatedGroup.name).toEqual(mockResponse.name);
+ });
+ it('dispatches correct actions on deleteContentGroupQuery', async () => {
+ const groupToDelete = { id: 6, name: 'deleted' };
+ axiosMock.onDelete(getLegacyApiUrl(courseId)).reply(200, {});
+
+ await executeThunk(thunkActions.deleteContentGroupQuery(courseId, groupToDelete.id), store.dispatch);
+ const updatedGroup = store.getState()
+ .groupConfigurations.groupConfigurations.allGroupConfigurations
+ .find(group => group.id === groupToDelete.id);
+ expect(updatedGroup).toBeFalsy();
+ });
+ it('dispatches correct actions on deleteExperimentConfigurationQuery', async () => {
+ const groupToDelete = { id: 276408623, name: 'deleted' };
+ axiosMock.onDelete(getLegacyApiUrl(courseId)).reply(200, {});
+ await executeThunk(thunkActions.deleteExperimentConfigurationQuery(courseId, groupToDelete.id), store.dispatch);
+ const updatedGroup = store.getState()
+ .groupConfigurations.groupConfigurations.experimentGroupConfigurations
+ .find(group => group.id === groupToDelete.id);
+ expect(updatedGroup).toBeFalsy();
+ });
+});
diff --git a/src/group-configurations/empty-placeholder/EmptyPlaceholder.scss b/src/group-configurations/empty-placeholder/EmptyPlaceholder.scss
new file mode 100644
index 0000000000..1768ecac81
--- /dev/null
+++ b/src/group-configurations/empty-placeholder/EmptyPlaceholder.scss
@@ -0,0 +1,10 @@
+.group-configurations-empty-placeholder {
+ @include pgn-box-shadow(1, "down");
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1.5rem;
+ border-radius: .375rem;
+ padding: 1.5rem;
+}
diff --git a/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.jsx b/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.jsx
new file mode 100644
index 0000000000..5d4ed0b5cb
--- /dev/null
+++ b/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.jsx
@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import EmptyPlaceholder from '.';
+
+const onCreateNewGroup = jest.fn();
+
+const renderComponent = () => render(
+
+ ,
+);
+
+describe('
+
{formatMessage(titleMessage)}
+
+ {formatMessage(buttonMessage)}
+
+
+ ,
+);
+
+describe('
+
{name}
+ {groups.map((group) => (
+
+ {formatMessage(messages.courseOutline)}
+
+ );
+
+ const guideHowToAdd = (
+
+ {formatMessage(messages.emptyExperimentGroup, { outlineComponentLink })}
+
+ );
+
+ // We need to store actual idx as an additional field for getNextGroupName utility.
+ const configurationGroupsWithIndexField = {
+ ...configuration,
+ groups: configuration.groups.map((group, idx) => ({ ...group, idx })),
+ };
+
+ const formValues = isEditMode
+ ? configurationGroupsWithIndexField
+ : initialExperimentConfiguration;
+
+ const handleDeleteConfiguration = () => {
+ experimentConfigurationActions.handleDelete(id);
+ closeDeleteModal();
+ };
+
+ const handleEditConfiguration = (values) => {
+ experimentConfigurationActions.handleEdit(values, switchOffEditMode);
+ };
+
+ return (
+ <>
+ {isEditMode ? (
+
+
+
setIsExpanded((prevState) => !prevState)}
+ isExperiment
+ />
+
+
+
+ {isExpanded && (
+
+ {description}
+
+ )}
+
+ ,
+);
+
+describe('
+ {groups.map((item) => (
+
+ {item.name}
+ {percentage}
+
+ ))}
+
+ );
+};
+
+ExperimentCardGroup.propTypes = {
+ groups: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number,
+ name: PropTypes.string,
+ usage: PropTypes.arrayOf(
+ PropTypes.shape({
+ label: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ ),
+ version: PropTypes.number,
+ }),
+ ).isRequired,
+};
+
+export default ExperimentCardGroup;
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.jsx b/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.jsx
new file mode 100644
index 0000000000..580258006f
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.jsx
@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { experimentGroupConfigurationsMock } from '../__mocks__';
+import messages from './messages';
+import ExperimentConfigurationsSection from '.';
+
+const handleCreateMock = jest.fn();
+const handleDeleteMock = jest.fn();
+const handleEditMock = jest.fn();
+const experimentConfigurationActions = {
+ handleCreate: handleCreateMock,
+ handleDelete: handleDeleteMock,
+ handleEdit: handleEditMock,
+};
+
+const renderComponent = (props) => render(
+
+ ,
+);
+
+describe('
+
+
{formatMessage(messages.experimentConfigurationName)}*
+ {isEditMode && (
+
+ {formatMessage(messages.experimentConfigurationId, {
+ id: initialValues.id,
+ })}
+
+ )}
+
+
+ {({
+ values, errors, dirty, handleChange, handleSubmit,
+ }) => (
+ <>
+
+
+ {formatMessage(messages.experimentConfigurationNameFeedback)}
+
+ {errors.name && (
+
+ {errors.name}
+
+ )}
+
+
+
+
+ {formatMessage(messages.experimentConfigurationDescription)}
+
+
+ {formatMessage(
+ messages.experimentConfigurationDescriptionFeedback,
+ )}
+
+
+
+ (
+ arrayHelpers.remove(idx)}
+ onCreateGroup={(newGroup) => arrayHelpers.push(newGroup)}
+ />
+ )}
+ />
+
+ {isUsedInLocation && (
+
+ {formatMessage(messages.experimentConfigurationAlert)}
+
+ )}
+
+
+ {formatMessage(messages.experimentConfigurationCancel)}
+
+
+ {formatMessage(
+ isEditMode
+ ? messages.experimentConfigurationSave
+ : messages.experimentConfigurationCreate,
+ )}
+
+
+
+
+ ,
+);
+
+describe('
+
+ {formatMessage(messages.experimentConfigurationGroups)}*
+
+
+ {formatMessage(messages.experimentConfigurationGroupsFeedback)}
+
+ {stringError && (
+
+ {stringError}
+
+ )}
+
+ {groups.map((group, idx) => {
+ const fieldError = arrayErrors?.[idx]?.name;
+ const isInvalid = !!fieldError;
+
+ return (
+
+
+
+ {percentage}
+
+ onDeleteGroup(idx)}
+ />
+
+ {isInvalid && (
+
+ {fieldError}
+
+ )}
+
+ );
+ })}
+
+ onCreateGroup(getNextGroupName(groups))}
+ iconBefore={AddIcon}
+ block
+ >
+ {formatMessage(messages.experimentConfigurationGroupsAdd)}
+
+
+ );
+};
+
+ExperimentFormGroups.defaultProps = {
+ errors: [],
+};
+
+ExperimentFormGroups.propTypes = {
+ groups: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string,
+ version: PropTypes.number,
+ usage: PropTypes.arrayOf(
+ PropTypes.shape({
+ label: PropTypes.string,
+ url: PropTypes.string,
+ validation: PropTypes.shape({
+ type: PropTypes.string,
+ text: PropTypes.string,
+ }),
+ }),
+ ),
+ }),
+ ).isRequired,
+ onChange: PropTypes.func.isRequired,
+ onDeleteGroup: PropTypes.func.isRequired,
+ onCreateGroup: PropTypes.func.isRequired,
+ errors: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
+ PropTypes.string,
+ ]),
+};
+
+export default ExperimentFormGroups;
diff --git a/src/group-configurations/experiment-configurations-section/constants.js b/src/group-configurations/experiment-configurations-section/constants.js
new file mode 100644
index 0000000000..70ed39bc88
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/constants.js
@@ -0,0 +1,18 @@
+export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+export const initialExperimentConfiguration = {
+ name: '',
+ description: '',
+ groups: [
+ {
+ name: 'Group A', version: 1, usage: [], idx: 0,
+ },
+ {
+ name: 'Group B', version: 1, usage: [], idx: 1,
+ },
+ ],
+ scheme: 'random',
+ parameters: {},
+ usage: [],
+ active: true,
+ version: 1,
+};
diff --git a/src/group-configurations/experiment-configurations-section/index.jsx b/src/group-configurations/experiment-configurations-section/index.jsx
new file mode 100644
index 0000000000..a5ed9f6365
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/index.jsx
@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import { Button, useToggle } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Add as AddIcon } from '@openedx/paragon/icons';
+
+import { useScrollToHashElement } from '../../hooks';
+import EmptyPlaceholder from '../empty-placeholder';
+import ExperimentForm from './ExperimentForm';
+import ExperimentCard from './ExperimentCard';
+import { initialExperimentConfiguration } from './constants';
+import messages from './messages';
+
+const ExperimentConfigurationsSection = ({
+ availableGroups,
+ experimentConfigurationActions,
+}) => {
+ const { formatMessage } = useIntl();
+ const [
+ isNewConfigurationVisible,
+ openNewConfiguration,
+ hideNewConfiguration,
+ ] = useToggle(false);
+
+ const handleCreateConfiguration = (configuration) => {
+ experimentConfigurationActions.handleCreate(configuration, hideNewConfiguration);
+ };
+
+ const { elementWithHash } = useScrollToHashElement({ isLoading: true });
+
+ return (
+
+
+ {formatMessage(messages.title)}
+
+ {availableGroups.length ? (
+ <>
+ {availableGroups.map((configuration) => (
+
+ {formatMessage(messages.addNewGroup)}
+
+ )}
+
+ ) : (
+ !isNewConfigurationVisible && (
+
+
+ ,
+ ,
+);
+
+describe('GroupConfigurationSidebar', () => {
+ beforeEach(() => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore();
+ });
+
+ it('renders all groups when all props are true', async () => {
+ const { findAllByRole } = renderComponent({
+ shouldShowExperimentGroups: true,
+ shouldShowContentGroup: true,
+ shouldShowEnrollmentTrackGroup: true,
+ });
+ const titles = await findAllByRole('heading', { level: 4 });
+
+ expect(titles[0]).toHaveTextContent(enrollmentTrackTitle);
+ expect(titles[1]).toHaveTextContent(contentGroupTitle);
+ expect(titles[2]).toHaveTextContent(experimentGroupTitle);
+ });
+
+ it('renders no groups when all props are false', async () => {
+ const { queryByText } = renderComponent({
+ shouldShowExperimentGroups: false,
+ shouldShowContentGroup: false,
+ shouldShowEnrollmentTrackGroup: false,
+ });
+
+ expect(queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
+ expect(queryByText(contentGroupTitle)).not.toBeInTheDocument();
+ expect(queryByText(experimentGroupTitle)).not.toBeInTheDocument();
+ });
+
+ it('renders only content group when shouldShowContentGroup is true', async () => {
+ const { queryByText, getByText } = renderComponent({
+ shouldShowExperimentGroups: false,
+ shouldShowContentGroup: true,
+ shouldShowEnrollmentTrackGroup: false,
+ });
+
+ expect(queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
+ expect(getByText(contentGroupTitle)).toBeInTheDocument();
+ expect(queryByText(experimentGroupTitle)).not.toBeInTheDocument();
+ });
+
+ it('renders only experiment group when shouldShowExperimentGroups is true', async () => {
+ const { queryByText, getByText } = renderComponent({
+ shouldShowExperimentGroups: true,
+ shouldShowContentGroup: false,
+ shouldShowEnrollmentTrackGroup: false,
+ });
+
+ expect(queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
+ expect(queryByText(contentGroupTitle)).not.toBeInTheDocument();
+ expect(getByText(experimentGroupTitle)).toBeInTheDocument();
+ });
+
+ it('renders only enrollment track group when shouldShowEnrollmentTrackGroup is true', async () => {
+ const { queryByText, getByText } = renderComponent({
+ shouldShowExperimentGroups: false,
+ shouldShowContentGroup: false,
+ shouldShowEnrollmentTrackGroup: true,
+ });
+
+ expect(getByText(enrollmentTrackTitle)).toBeInTheDocument();
+ expect(queryByText(contentGroupTitle)).not.toBeInTheDocument();
+ expect(queryByText(experimentGroupTitle)).not.toBeInTheDocument();
+ });
+});
diff --git a/src/group-configurations/group-configuration-sidebar/index.jsx b/src/group-configurations/group-configuration-sidebar/index.jsx
new file mode 100644
index 0000000000..99dbf6bc4b
--- /dev/null
+++ b/src/group-configurations/group-configuration-sidebar/index.jsx
@@ -0,0 +1,59 @@
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@openedx/paragon';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import { useHelpUrls } from '../../help-urls/hooks';
+import { getSidebarData } from './utils';
+import messages from './messages';
+
+const GroupConfigurationSidebar = ({
+ courseId, shouldShowExperimentGroups, shouldShowContentGroup, shouldShowEnrollmentTrackGroup,
+}) => {
+ const intl = useIntl();
+ const urls = useHelpUrls(['groupConfigurations', 'enrollmentTracks', 'contentGroups']);
+ const sidebarData = getSidebarData({
+ messages, intl, shouldShowExperimentGroups, shouldShowContentGroup, shouldShowEnrollmentTrackGroup,
+ });
+
+ return (
+
+ {sidebarData
+ .map(({ title, paragraphs, urlKey }, idx) => (
+
+
+ {title}
+
+ {paragraphs.map((text) => (
+
+ {text}
+
+ ))}
+
+ {intl.formatMessage(messages.learnMoreBtn)}
+
+ {idx !== sidebarData.length - 1 &&
+ ))}
+
+ );
+};
+
+GroupConfigurationSidebar.propTypes = {
+ courseId: PropTypes.string.isRequired,
+ shouldShowContentGroup: PropTypes.bool.isRequired,
+ shouldShowExperimentGroups: PropTypes.bool.isRequired,
+ shouldShowEnrollmentTrackGroup: PropTypes.bool.isRequired,
+};
+
+export default GroupConfigurationSidebar;
diff --git a/src/group-configurations/group-configuration-sidebar/messages.js b/src/group-configurations/group-configuration-sidebar/messages.js
new file mode 100644
index 0000000000..3404e8c9cb
--- /dev/null
+++ b/src/group-configurations/group-configuration-sidebar/messages.js
@@ -0,0 +1,81 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ aboutTitle: {
+ id: 'course-authoring.group-configurations.sidebar.about.title',
+ defaultMessage: 'Content groups',
+ description: 'Title for the content groups section in the sidebar.',
+ },
+ aboutDescription_1: {
+ id: 'course-authoring.group-configurations.sidebar.about.description-1',
+ defaultMessage: 'If you have cohorts enabled in your course, you can use content groups to create cohort-specific courseware. In other words, you can customize the content that particular cohorts see in your course.',
+ description: 'First description for the content groups section in the sidebar.',
+ },
+ aboutDescription_2: {
+ id: 'course-authoring.group-configurations.sidebar.about.description-2',
+ defaultMessage: 'Each content group that you create can be associated with one or more cohorts. In addition to making course content available to all learners, you can restrict access to some content to learners in specific content groups. Only learners in the cohorts that are associated with the specified content groups see the additional content.',
+ description: 'Second description for the content groups section in the sidebar.',
+ },
+ aboutDescription_3: {
+ id: 'course-authoring.group-configurations.sidebar.about.description-3',
+ defaultMessage: 'Click {strongText} to add a new content group. To edit the name of a content group, hover over its box and click {strongText2}. You can delete a content group only if it is not in use by a unit. To delete a content group, hover over its box and click the delete icon.',
+ description: 'Third description for the content groups section in the sidebar. Mentions how to add, edit, and delete content groups.',
+ },
+ aboutDescription_3_strong: {
+ id: 'course-authoring.group-configurations.sidebar.about.description-3.strong',
+ defaultMessage: 'New content group',
+ description: 'Strong text (button label) used in the third description for adding a new content group.',
+ },
+ about_2_title: {
+ id: 'course-authoring.group-configurations.sidebar.about-2.title',
+ defaultMessage: 'Experiment group configurations',
+ description: 'Title for the experiment group configurations section in the sidebar.',
+ },
+ about_2_description_1: {
+ id: 'course-authoring.group-configurations.sidebar.about-2.description-1',
+ defaultMessage: 'Use experiment group configurations if you are conducting content experiments, also known as A/B testing, in your course. Experiment group configurations define how many groups of learners are in a content experiment. When you create a content experiment for a course, you select the group configuration to use.',
+ description: 'First description for the experiment group configurations section in the sidebar.',
+ },
+ about_2_description_2: {
+ id: 'course-authoring.group-configurations.sidebar.about-2.description-2',
+ defaultMessage: 'Click {strongText} to add a new configuration. To edit a configuration, hover over its box and click {strongText2}. You can delete a group configuration only if it is not in use in an experiment. To delete a configuration, hover over its box and click the delete icon.',
+ description: 'Second description for the experiment group configurations section in the sidebar. Mentions how to add, edit, and delete group configurations.',
+ },
+ about_2_description_2_strong: {
+ id: 'course-authoring.group-configurations.sidebar.about-2.description-2.strong',
+ defaultMessage: 'New group configuration',
+ description: 'Strong text (button label) used in the second description for adding a new group configuration.',
+ },
+ about_3_title: {
+ id: 'course-authoring.group-configurations.sidebar.about-3.title',
+ defaultMessage: 'Enrollment track groups',
+ description: 'Title for the enrollment track groups section in the sidebar.',
+ },
+ about_3_description_1: {
+ id: 'course-authoring.group-configurations.sidebar.about-3.description-1',
+ defaultMessage: 'Enrollment track groups allow you to offer different course content to learners in each enrollment track. Learners enrolled in each enrollment track in your course are automatically included in the corresponding enrollment track group.',
+ description: 'First description for the enrollment track groups section in the sidebar.',
+ },
+ about_3_description_2: {
+ id: 'course-authoring.group-configurations.sidebar.about-3.description-2',
+ defaultMessage: 'On unit pages in the course outline, you can restrict access to components to learners based on their enrollment track.',
+ description: 'Second description for the enrollment track groups section in the sidebar.',
+ },
+ about_3_description_3: {
+ id: 'course-authoring.group-configurations.sidebar.about-3.description-3',
+ defaultMessage: 'You cannot edit enrollment track groups, but you can expand each group to view details of the course content that is designated for learners in the group.',
+ description: 'Third description for the enrollment track groups section in the sidebar. Mentions the limitations and options for managing enrollment track groups.',
+ },
+ aboutDescription_strong_edit: {
+ id: 'course-authoring.group-configurations.sidebar.about.description.strong-edit',
+ defaultMessage: 'edit',
+ description: 'Strong text used to indicate the edit action.',
+ },
+ learnMoreBtn: {
+ id: 'course-authoring.group-configurations.sidebar.learnmore.button',
+ defaultMessage: 'Learn more',
+ description: 'Label for the "Learn more" button in the sidebar.',
+ },
+});
+
+export default messages;
diff --git a/src/group-configurations/group-configuration-sidebar/utils.jsx b/src/group-configurations/group-configuration-sidebar/utils.jsx
new file mode 100644
index 0000000000..d039c8f440
--- /dev/null
+++ b/src/group-configurations/group-configuration-sidebar/utils.jsx
@@ -0,0 +1,57 @@
+/**
+ * Compiles the sidebar data for the course authoring sidebar.
+ *
+ * @param {Object} messages - The localized messages.
+ * @param {Object} intl - The intl object for formatting messages.
+ * @param {boolean} shouldShowExperimentGroups - Flag to include experiment group configuration data.
+ * @param {boolean} shouldShowContentGroup - Flag to include content group data.
+ * @param {boolean} shouldShowEnrollmentTrackGroup - Flag to include enrollment track group data.
+ * @returns {Object[]} The array of sidebar data groups.
+ */
+const getSidebarData = ({
+ messages, intl, shouldShowExperimentGroups, shouldShowContentGroup, shouldShowEnrollmentTrackGroup,
+}) => {
+ const groups = [];
+
+ if (shouldShowEnrollmentTrackGroup) {
+ groups.push({
+ urlKey: 'enrollmentTracks',
+ title: intl.formatMessage(messages.about_3_title),
+ paragraphs: [
+ intl.formatMessage(messages.about_3_description_1),
+ intl.formatMessage(messages.about_3_description_2),
+ intl.formatMessage(messages.about_3_description_3),
+ ],
+ });
+ }
+ if (shouldShowContentGroup) {
+ groups.push({
+ urlKey: 'contentGroups',
+ title: intl.formatMessage(messages.aboutTitle),
+ paragraphs: [
+ intl.formatMessage(messages.aboutDescription_1),
+ intl.formatMessage(messages.aboutDescription_2),
+ intl.formatMessage(messages.aboutDescription_3, {
+ strongText: {intl.formatMessage(messages.aboutDescription_3_strong)} ,
+ strongText2: {intl.formatMessage(messages.aboutDescription_strong_edit)} ,
+ }),
+ ],
+ });
+ }
+ if (shouldShowExperimentGroups) {
+ groups.push({
+ urlKey: 'groupConfigurations',
+ title: intl.formatMessage(messages.about_2_title),
+ paragraphs: [
+ intl.formatMessage(messages.about_2_description_1),
+ intl.formatMessage(messages.about_2_description_2, {
+ strongText: {intl.formatMessage(messages.about_2_description_2_strong)} ,
+ strongText2: {intl.formatMessage(messages.aboutDescription_strong_edit)} ,
+ }),
+ ],
+ });
+ }
+ return groups;
+};
+// eslint-disable-next-line import/prefer-default-export
+export { getSidebarData };
diff --git a/src/group-configurations/hooks.jsx b/src/group-configurations/hooks.jsx
new file mode 100644
index 0000000000..9766776c76
--- /dev/null
+++ b/src/group-configurations/hooks.jsx
@@ -0,0 +1,97 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { RequestStatus } from '../data/constants';
+import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
+import {
+ getGroupConfigurationsData,
+ getLoadingStatus,
+ getSavingStatus,
+} from './data/selectors';
+import { updateSavingStatuses } from './data/slice';
+import {
+ createContentGroupQuery,
+ createExperimentConfigurationQuery,
+ deleteContentGroupQuery,
+ deleteExperimentConfigurationQuery,
+ editContentGroupQuery,
+ editExperimentConfigurationQuery,
+ fetchGroupConfigurationsQuery,
+} from './data/thunk';
+
+const useGroupConfigurations = (courseId) => {
+ const dispatch = useDispatch();
+ const groupConfigurations = useSelector(getGroupConfigurationsData);
+ const loadingStatus = useSelector(getLoadingStatus);
+ const savingStatus = useSelector(getSavingStatus);
+ const {
+ isShow: isShowProcessingNotification,
+ title: processingNotificationTitle,
+ } = useSelector(getProcessingNotification);
+
+ const handleInternetConnectionFailed = () => {
+ dispatch(updateSavingStatuses({ status: RequestStatus.FAILED }));
+ };
+
+ const contentGroupActions = {
+ handleCreate: (group, callbackToClose) => {
+ dispatch(createContentGroupQuery(courseId, group)).then((result) => {
+ if (result) {
+ callbackToClose();
+ }
+ });
+ },
+ handleEdit: (group, callbackToClose) => {
+ dispatch(editContentGroupQuery(courseId, group)).then((result) => {
+ if (result) {
+ callbackToClose();
+ }
+ });
+ },
+ handleDelete: (parentGroupId, groupId) => {
+ dispatch(deleteContentGroupQuery(courseId, parentGroupId, groupId));
+ },
+ };
+
+ const experimentConfigurationActions = {
+ handleCreate: (configuration, callbackToClose) => {
+ dispatch(
+ createExperimentConfigurationQuery(courseId, configuration),
+ ).then((result) => {
+ if (result) {
+ callbackToClose();
+ }
+ });
+ },
+ handleEdit: (configuration, callbackToClose) => {
+ dispatch(editExperimentConfigurationQuery(courseId, configuration)).then(
+ (result) => {
+ if (result) {
+ callbackToClose();
+ }
+ },
+ );
+ },
+ handleDelete: (configurationId) => {
+ dispatch(deleteExperimentConfigurationQuery(courseId, configurationId));
+ },
+ };
+
+ useEffect(() => {
+ dispatch(fetchGroupConfigurationsQuery(courseId));
+ }, [courseId]);
+
+ return {
+ isLoading: loadingStatus === RequestStatus.IN_PROGRESS,
+ savingStatus,
+ contentGroupActions,
+ experimentConfigurationActions,
+ groupConfigurations,
+ isShowProcessingNotification,
+ processingNotificationTitle,
+ handleInternetConnectionFailed,
+ };
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { useGroupConfigurations };
diff --git a/src/group-configurations/hooks.test.jsx b/src/group-configurations/hooks.test.jsx
new file mode 100644
index 0000000000..87ed09f6c8
--- /dev/null
+++ b/src/group-configurations/hooks.test.jsx
@@ -0,0 +1,109 @@
+import MockAdapter from 'axios-mock-adapter';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { renderHook } from '@testing-library/react-hooks';
+import { Provider, useDispatch } from 'react-redux';
+
+import { RequestStatus } from '../data/constants';
+import initializeStore from '../store';
+import { getContentStoreApiUrl } from './data/api';
+import {
+ createContentGroupQuery,
+ createExperimentConfigurationQuery,
+ deleteContentGroupQuery,
+ deleteExperimentConfigurationQuery,
+ editContentGroupQuery,
+ editExperimentConfigurationQuery,
+} from './data/thunk';
+import { groupConfigurationResponseMock } from './__mocks__';
+import { useGroupConfigurations } from './hooks';
+import { updateSavingStatuses } from './data/slice';
+
+jest.mock('react-redux', () => ({
+ ...jest.requireActual('react-redux'),
+ useDispatch: jest.fn(),
+}));
+
+jest.mock('./data/thunk', () => ({
+ ...jest.requireActual('./data/thunk'),
+ createContentGroupQuery: jest.fn().mockResolvedValue(true),
+ createExperimentConfigurationQuery: jest.fn().mockResolvedValue(true),
+ deleteContentGroupQuery: jest.fn().mockResolvedValue(true),
+ deleteExperimentConfigurationQuery: jest.fn().mockResolvedValue(true),
+ editContentGroupQuery: jest.fn().mockResolvedValue(true),
+ editExperimentConfigurationQuery: jest.fn().mockResolvedValue(true),
+ getContentStoreApiUrlQuery: jest.fn().mockResolvedValue(true),
+}));
+
+let axiosMock;
+let store;
+const courseId = 'course-v1:org+101+101';
+const mockObject = {};
+const mockFunc = jest.fn();
+let dispatch;
+
+const wrapper = ({ children }) => (
+
+
+ {children}
+
+
+);
+
+describe('useGroupConfigurations', () => {
+ beforeEach(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+
+ store = initializeStore();
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ axiosMock
+ .onGet(getContentStoreApiUrl(courseId))
+ .reply(200, groupConfigurationResponseMock);
+ dispatch = jest.fn().mockImplementation(() => Promise.resolve(true));
+ useDispatch.mockReturnValue(dispatch);
+ });
+
+ it('successfully dispatches handleInternetConnectionFailed', async () => {
+ const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+ result.current.handleInternetConnectionFailed();
+ expect(dispatch).toHaveBeenCalledWith(updateSavingStatuses({ status: RequestStatus.FAILED }));
+ });
+ it('successfully dispatches handleCreate for group configuration', async () => {
+ const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+ result.current.contentGroupActions.handleCreate(mockObject, mockFunc);
+ expect(dispatch).toHaveBeenCalledWith(createContentGroupQuery(courseId, mockObject));
+ });
+ it('successfully dispatches handleEdit for group configuration', async () => {
+ const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+ result.current.contentGroupActions.handleEdit(mockObject, mockFunc);
+ expect(dispatch).toHaveBeenCalledWith(editContentGroupQuery(courseId, mockObject));
+ });
+ it('successfully dispatches handleDelete for group configuration', async () => {
+ const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+ result.current.contentGroupActions.handleDelete(1, 1);
+ expect(dispatch).toHaveBeenCalledWith(deleteContentGroupQuery(courseId, 1, 1));
+ });
+ it('successfully dispatches handleCreate for experiment group', async () => {
+ const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+ result.current.experimentConfigurationActions.handleCreate(mockObject, mockFunc);
+ expect(dispatch).toHaveBeenCalledWith(createExperimentConfigurationQuery(courseId, mockObject));
+ });
+ it('successfully dispatches handleEdit for experiment group', async () => {
+ const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+ result.current.experimentConfigurationActions.handleEdit(mockObject, mockFunc);
+ expect(dispatch).toHaveBeenCalledWith(editExperimentConfigurationQuery(courseId, mockObject));
+ });
+ it('successfully dispatches handleDelete for experiment group', async () => {
+ const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+ result.current.experimentConfigurationActions.handleDelete(mockObject, 1);
+ expect(dispatch).toHaveBeenCalledWith(deleteExperimentConfigurationQuery(courseId, 1));
+ });
+});
diff --git a/src/group-configurations/index.jsx b/src/group-configurations/index.jsx
new file mode 100644
index 0000000000..9c59251312
--- /dev/null
+++ b/src/group-configurations/index.jsx
@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+ Container, Layout, Stack, Row,
+} from '@openedx/paragon';
+
+import { RequestStatus } from '../data/constants';
+import { LoadingSpinner } from '../generic/Loading';
+import { useModel } from '../generic/model-store';
+import SubHeader from '../generic/sub-header/SubHeader';
+import getPageHeadTitle from '../generic/utils';
+import ProcessingNotification from '../generic/processing-notification';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import messages from './messages';
+import ContentGroupsSection from './content-groups-section';
+import ExperimentConfigurationsSection from './experiment-configurations-section';
+import EnrollmentTrackGroupsSection from './enrollment-track-groups-section';
+import GroupConfigurationSidebar from './group-configuration-sidebar';
+import { useGroupConfigurations } from './hooks';
+
+const GroupConfigurations = ({ courseId }) => {
+ const { formatMessage } = useIntl();
+ const courseDetails = useModel('courseDetails', courseId);
+ const {
+ isLoading,
+ savingStatus,
+ contentGroupActions,
+ experimentConfigurationActions,
+ processingNotificationTitle,
+ isShowProcessingNotification,
+ groupConfigurations: {
+ allGroupConfigurations,
+ shouldShowEnrollmentTrack,
+ shouldShowExperimentGroups,
+ experimentGroupConfigurations,
+ },
+ handleInternetConnectionFailed,
+ } = useGroupConfigurations(courseId);
+
+ document.title = getPageHeadTitle(
+ courseDetails?.name,
+ formatMessage(messages.headingTitle),
+ );
+
+ if (isLoading) {
+ return (
+
+
+ );
+ }
+
+ const enrollmentTrackGroup = shouldShowEnrollmentTrack
+ ? allGroupConfigurations[0]
+ : null;
+ const contentGroup = allGroupConfigurations?.[shouldShowEnrollmentTrack ? 1 : 0];
+
+ return (
+ <>
+
+
+
+
+
+ {!!enrollmentTrackGroup && (
+
+
+
+
+
+
+
+
+ );
+};
+
+GroupConfigurations.propTypes = {
+ courseId: PropTypes.string.isRequired,
+};
+
+export default GroupConfigurations;
diff --git a/src/group-configurations/messages.js b/src/group-configurations/messages.js
new file mode 100644
index 0000000000..01e0eacefd
--- /dev/null
+++ b/src/group-configurations/messages.js
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ headingTitle: {
+ id: 'course-authoring.group-configurations.heading-title',
+ defaultMessage: 'Group configurations',
+ description: 'Title for the heading of the group configurations section.',
+ },
+ headingSubtitle: {
+ id: 'course-authoring.group-configurations.heading-sub-title',
+ defaultMessage: 'Settings',
+ description: 'Subtitle for the heading of the group configurations section.',
+ },
+ containsGroups: {
+ id: 'course-authoring.group-configurations.container.contains-groups',
+ defaultMessage: 'Contains {len, plural, one {group} other {groups}}',
+ description: 'Message indicating the number of groups contained within a container.',
+ },
+ notInUse: {
+ id: 'course-authoring.group-configurations.container.not-in-use',
+ defaultMessage: 'Not in use',
+ description: 'Message indicating that the group configurations are not currently in use.',
+ },
+ usedInLocations: {
+ id: 'course-authoring.group-configurations.container.used-in-locations',
+ defaultMessage: 'Used in {len, plural, one {location} other {locations}}',
+ description: 'Message indicating the number of locations where the group configurations are used.',
+ },
+});
+
+export default messages;
diff --git a/src/group-configurations/utils.js b/src/group-configurations/utils.js
new file mode 100644
index 0000000000..d701081fcc
--- /dev/null
+++ b/src/group-configurations/utils.js
@@ -0,0 +1,53 @@
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+/**
+ * Formats the given URL to a unit page URL.
+ * @param {string} url - The original part of URL.
+ * @returns {string} - The formatted unit page URL.
+ */
+const formatUrlToUnitPage = (url) => new URL(url, getConfig().STUDIO_BASE_URL).href;
+
+/**
+ * Retrieves a list of group count based on the number of items.
+ * @param {Array} items - The array of items to count.
+ * @param {function} formatMessage - The function for formatting localized messages.
+ * @returns {Array} - List of group count.
+ */
+const getGroupsCountMessage = (items, formatMessage) => {
+ if (!items?.length) {
+ return [];
+ }
+
+ return [formatMessage(messages.containsGroups, { len: items.length })];
+};
+
+/**
+ * Retrieves a list of usage count based on the number of items.
+ * @param {Array} items - The array of items to count.
+ * @param {function} formatMessage - The function for formatting localized messages.
+ * @returns {Array} - List of usage count.
+ */
+const getUsageCountMessage = (items, formatMessage) => {
+ if (!items?.length) {
+ return [formatMessage(messages.notInUse)];
+ }
+
+ return [formatMessage(messages.usedInLocations, { len: items.length })];
+};
+
+/**
+ * Retrieves a combined list of badge messages based on usage and group information.
+ * @param {Array} usage - The array of items indicating usage.
+ * @param {Object} group - The group information.
+ * @param {boolean} isExperiment - Flag indicating whether it is an experiment group configurations.
+ * @param {function} formatMessage - The function for formatting localized messages.
+ * @returns {Array} - Combined list of badges.
+ */
+const getCombinedBadgeList = (usage, group, isExperiment, formatMessage) => [
+ ...(isExperiment ? getGroupsCountMessage(group.groups, formatMessage) : []),
+ ...getUsageCountMessage(usage, formatMessage),
+];
+
+export { formatUrlToUnitPage, getCombinedBadgeList };
diff --git a/src/hooks.js b/src/hooks.js
index 180d89fc6a..73597e3ef6 100644
--- a/src/hooks.js
+++ b/src/hooks.js
@@ -1,19 +1,23 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { history } from '@edx/frontend-platform';
export const useScrollToHashElement = ({ isLoading }) => {
+ const [elementWithHash, setElementWithHash] = useState(null);
+
useEffect(() => {
- const currentHash = window.location.hash;
+ const currentHash = window.location.hash.substring(1);
if (currentHash) {
- const element = document.querySelector(currentHash);
-
+ const element = document.getElementById(currentHash);
if (element) {
element.scrollIntoView();
history.replace({ hash: '' });
}
+ setElementWithHash(currentHash);
}
}, [isLoading]);
+
+ return { elementWithHash };
};
export const useEscapeClick = ({ onEscape, dependency }) => {
diff --git a/src/index.jsx b/src/index.jsx
index f717df4c02..1f42b42bdf 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -8,7 +8,7 @@ import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import {
- Navigate, Route, createRoutesFromElements, createBrowserRouter, RouterProvider,
+ Route, createRoutesFromElements, createBrowserRouter, RouterProvider,
} from 'react-router-dom';
import {
QueryClient,
@@ -59,8 +59,6 @@ const App = () => {
)}
{getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
<>
- {/* TODO: remove this redirect once Studio's link is updated */}
-