Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: proctoring & prerequisite settings and page alerts (#816)

Browse Source 
* feat: add proctoring exam link to actions

* feat: prerequisite settings in advanced tab

* refactor: use formik for configuration modal in outline

* feat: proctoring exam settings in subsection configuration

test: prereq & proctoring settings

* feat: outline alerts

test: outline page alerts

* refactor: replace highlights badge with bubble

* feat: discussion badge in outline

* refactor: status bar style and date format

* Fix spacing between checklist and highlights button
* Fix title alignment in status bar
* Align learn more link to center with respect to button
* Update start date display in local format

* fix: unit url

* refactor: redesign item header

* move status to end of card
* move edit icon next to title
* make it visible on hover

* test: improve coverage

* refactor: update messages and alert colors
This commit is contained in:
Navin Karkera
2024-02-14 03:02:32 +05:30
committed by GitHub
parent 1555e9f88e
commit 60c1a0343c
40 changed files with 2195 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -20,3 +20,6 @@ temp/babel-plugin-react-intl
/temp
/.vscode
/module.config.js
# Local environment overrides
.env.private

31
src/course-outline/CourseOutline.jsx
View File

@@ -15,10 +15,7 @@ import {
Warning as WarningIcon,
} from '@edx/paragon/icons';
import { useSelector } from 'react-redux';
import {
DraggableList,
ErrorAlert,
} from '@edx/frontend-lib-content-components';
import { DraggableList } from '@edx/frontend-lib-content-components';
import { arrayMove } from '@dnd-kit/sortable';
import { LoadingSpinner } from '../generic/Loading';
@@ -41,6 +38,7 @@ import EmptyPlaceholder from './empty-placeholder/EmptyPlaceholder';
import PublishModal from './publish-modal/PublishModal';
import ConfigureModal from './configure-modal/ConfigureModal';
import DeleteModal from './delete-modal/DeleteModal';
import PageAlerts from './page-alerts/PageAlerts';
import { useCourseOutline } from './hooks';
import messages from './messages';
@@ -97,6 +95,15 @@ const CourseOutline = ({ courseId }) => {
handleUnitDragAndDrop,
handleCopyToClipboardClick,
handlePasteClipboardClick,
notificationDismissUrl,
discussionsSettings,
discussionsIncontextFeedbackUrl,
discussionsIncontextLearnmoreUrl,
deprecatedBlocksInfo,
proctoringErrors,
mfeProctoredExamSettingsUrl,
handleDismissNotification,
advanceSettingsUrl,
} = useCourseOutline({ courseId });
const [sections, setSections] = useState(sectionsList);
@@ -250,9 +257,18 @@ const CourseOutline = ({ courseId }) => {
</Helmet>
<Container size="xl" className="px-4">
<section className="course-outline-container mb-4 mt-5">
<ErrorAlert hideHeading isError={savingStatus === RequestStatus.FAILED}>
{intl.formatMessage(messages.alertFailedGeneric, { actionName: 'save', type: 'changes' })}
</ErrorAlert>
<PageAlerts
notificationDismissUrl={notificationDismissUrl}
handleDismissNotification={handleDismissNotification}
discussionsSettings={discussionsSettings}
discussionsIncontextFeedbackUrl={discussionsIncontextFeedbackUrl}
discussionsIncontextLearnmoreUrl={discussionsIncontextLearnmoreUrl}
deprecatedBlocksInfo={deprecatedBlocksInfo}
proctoringErrors={proctoringErrors}
mfeProctoredExamSettingsUrl={mfeProctoredExamSettingsUrl}
advanceSettingsUrl={advanceSettingsUrl}
savingStatus={savingStatus}
/>
<TransitionReplace>
{showSuccessAlert ? (
<AlertMessage
@@ -383,6 +399,7 @@ const CourseOutline = ({ courseId }) => {
subsection.childInfo.children,
)}
onCopyToClipboardClick={handleCopyToClipboardClick}
discussionsSettings={discussionsSettings}
/>
))}
</DraggableList>

598
src/course-outline/CourseOutline.test.jsx
View File

@@ -1,11 +1,12 @@
import {
act, render, waitFor, cleanup, fireEvent, within,
act, render, waitFor, fireEvent, within,
} from '@testing-library/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { AppProvider } from '@edx/frontend-platform/react';
import { initializeMockApp } from '@edx/frontend-platform';
import MockAdapter from 'axios-mock-adapter';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { cloneDeep } from 'lodash';
import {
getCourseBestPracticesApiUrl,
@@ -45,6 +46,7 @@ import statusBarMessages from './status-bar/messages';
import configureModalMessages from './configure-modal/messages';
import pasteButtonMessages from './paste-button/messages';
import subsectionMessages from './subsection-card/messages';
import pageAlertMessages from './page-alerts/messages';
let axiosMock;
let store;
@@ -69,6 +71,13 @@ jest.mock('../help-urls/hooks', () => ({
}),
}));
jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
useIntl: () => ({
formatMessage: (message) => message.defaultMessage,
}),
}));
const RootWrapper = () => (
<AppProvider store={store}>
<IntlProvider locale="en">
@@ -118,7 +127,7 @@ describe('<CourseOutline />', () => {
});
it('check video sharing option udpates correctly', async () => {
const { findByTestId } = render(<RootWrapper />);
const { findByLabelText } = render(<RootWrapper />);
axiosMock
.onPost(getCourseBlockApiUrl(courseId), {
@@ -127,13 +136,10 @@ describe('<CourseOutline />', () => {
},
})
.reply(200);
const optionDropdownWrapper = await findByTestId('video-sharing-wrapper');
const optionDropdown = await within(optionDropdownWrapper).findByRole('button');
await act(async () => fireEvent.click(optionDropdown));
const allOffOption = await within(optionDropdownWrapper).findByText(
statusBarMessages.videoSharingAllOffText.defaultMessage,
const optionDropdown = await findByLabelText(statusBarMessages.videoSharingTitle.defaultMessage);
await act(
async () => fireEvent.change(optionDropdown, { target: { value: VIDEO_SHARING_OPTIONS.allOff } }),
);
await act(async () => fireEvent.click(allOffOption));
expect(axiosMock.history.post.length).toBe(1);
expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
@@ -144,7 +150,7 @@ describe('<CourseOutline />', () => {
});
it('check video sharing option shows error on failure', async () => {
const { findByTestId, queryByRole } = render(<RootWrapper />);
const { findByLabelText, queryByRole } = render(<RootWrapper />);
axiosMock
.onPost(getCourseBlockApiUrl(courseId), {
@@ -153,13 +159,10 @@ describe('<CourseOutline />', () => {
},
})
.reply(500);
const optionDropdownWrapper = await findByTestId('video-sharing-wrapper');
const optionDropdown = await within(optionDropdownWrapper).findByRole('button');
await act(async () => fireEvent.click(optionDropdown));
const allOffOption = await within(optionDropdownWrapper).findByText(
statusBarMessages.videoSharingAllOffText.defaultMessage,
const optionDropdown = await findByLabelText(statusBarMessages.videoSharingTitle.defaultMessage);
await act(
async () => fireEvent.change(optionDropdown, { target: { value: VIDEO_SHARING_OPTIONS.allOff } }),
);
await act(async () => fireEvent.click(allOffOption));
expect(axiosMock.history.post.length).toBe(1);
expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
@@ -168,7 +171,10 @@ describe('<CourseOutline />', () => {
},
}));
expect(queryByRole('alert')).toBeInTheDocument();
const alertElement = queryByRole('alert');
expect(alertElement).toHaveTextContent(
pageAlertMessages.alertFailedGeneric.defaultMessage,
);
});
it('render error alert after failed reindex correctly', async () => {
@@ -337,7 +343,6 @@ describe('<CourseOutline />', () => {
});
it('render CourseOutline component without sections correctly', async () => {
cleanup();
axiosMock
.onGet(getCourseOutlineIndexApiUrl(courseId))
.reply(200, courseOutlineIndexWithoutSections);
@@ -349,6 +354,25 @@ describe('<CourseOutline />', () => {
});
});
it('render configuration alerts and check dismiss query', async () => {
axiosMock
.onGet(getCourseOutlineIndexApiUrl(courseId))
.reply(200, {
...courseOutlineIndexMock,
notificationDismissUrl: '/some/url',
});
const { findByRole } = render(<RootWrapper />);
expect(await findByRole('alert')).toBeInTheDocument();
const dismissBtn = await findByRole('button', { name: 'Dismiss' });
axiosMock
.onDelete('/some/url')
.reply(204);
fireEvent.click(dismissBtn);
expect(axiosMock.history.delete.length).toBe(1);
});
it('check edit title works for section, subsection and unit', async () => {
const { findAllByTestId } = render(<RootWrapper />);
const checkEditTitle = async (section, element, item, newName, elementName) => {
@@ -545,7 +569,7 @@ describe('<CourseOutline />', () => {
const checkPublishBtn = async (item, element, elementName) => {
expect(
await within(element).findByTestId(`${elementName}-card-header__badge-status`),
(await within(element).getAllByRole('status'))[0],
`Failed for ${elementName}!`,
).toHaveTextContent(cardHeaderMessages.statusBadgeDraft.defaultMessage);
@@ -601,7 +625,7 @@ describe('<CourseOutline />', () => {
await act(async () => fireEvent.click(confirmButton));
expect(
await within(element).findByTestId(`${elementName}-card-header__badge-status`),
(await within(element).getAllByRole('status'))[0],
`Failed for ${elementName}!`,
).toHaveTextContent(cardHeaderMessages.statusBadgePublishedNotLive.defaultMessage);
};
@@ -672,43 +696,43 @@ describe('<CourseOutline />', () => {
findAllByTestId,
findByTestId,
} = render(<RootWrapper />);
const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
const subsection = section.childInfo.children[0];
const newReleaseDate = '2025-08-10T05:00:00Z';
const newGraderType = 'Homework';
const newDue = '2025-09-10T00:00:00Z';
const isTimeLimited = true;
const defaultTimeLimitMinutes = 3270;
const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[0]);
const [subsection] = section.childInfo.children;
const expectedRequestData = {
publish: 'republish',
graderType: 'Homework',
isPrereq: false,
prereqMinScore: 100,
prereqMinCompletion: 100,
metadata: {
visible_to_staff_only: null,
due: '2025-09-10T05:00:00Z',
hide_after_due: true,
show_correctness: 'always',
is_practice_exam: false,
is_time_limited: true,
is_proctored_enabled: false,
exam_review_rules: '',
default_time_limit_minutes: 3270,
is_onboarding_exam: false,
start: '2025-08-10T00:00:00Z',
},
};
axiosMock
.onPost(getCourseItemApiUrl(subsection.id), {
publish: 'republish',
graderType: newGraderType,
metadata: {
visible_to_staff_only: null,
due: newDue,
hide_after_due: false,
show_correctness: 'always',
is_practice_exam: false,
is_time_limited: isTimeLimited,
exam_review_rules: '',
is_proctored_enabled: false,
default_time_limit_minutes: defaultTimeLimitMinutes,
is_onboarding_exam: false,
start: newReleaseDate,
},
})
.onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
.reply(200, { dummy: 'value' });
const [currentSection] = await findAllByTestId('section-card');
const [firstSubsection] = await within(currentSection).findAllByTestId('subsection-card');
const subsectionDropdownButton = await within(firstSubsection).findByTestId('subsection-card-header__menu-button');
subsection.start = newReleaseDate;
subsection.due = newDue;
subsection.format = newGraderType;
subsection.isTimeLimited = isTimeLimited;
subsection.defaultTimeLimitMinutes = defaultTimeLimitMinutes;
subsection.start = expectedRequestData.metadata.start;
subsection.due = expectedRequestData.metadata.due;
subsection.format = expectedRequestData.graderType;
subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
subsection.hideAfterDue = expectedRequestData.metadata.hideAfterDue;
section.childInfo.children[0] = subsection;
axiosMock
.onGet(getXBlockApiUrl(section.id))
@@ -720,15 +744,25 @@ describe('<CourseOutline />', () => {
// update fields
let configureModal = await findByTestId('configure-modal');
expect(await within(configureModal).findByText(newGraderType)).toBeInTheDocument();
expect(await within(configureModal).findByText(expectedRequestData.graderType)).toBeInTheDocument();
let releaseDateStack = await within(configureModal).findByTestId('release-date-stack');
let releaseDatePicker = await within(releaseDateStack).findByPlaceholderText('MM/DD/YYYY');
fireEvent.change(releaseDatePicker, { target: { value: '08/10/2025' } });
let releaseDateTimePicker = await within(releaseDateStack).findByPlaceholderText('HH:MM');
fireEvent.change(releaseDateTimePicker, { target: { value: '00:00' } });
let dueDateStack = await within(configureModal).findByTestId('due-date-stack');
let dueDatePicker = await within(dueDateStack).findByPlaceholderText('MM/DD/YYYY');
fireEvent.change(dueDatePicker, { target: { value: '09/10/2025' } });
let dueDateTimePicker = await within(dueDateStack).findByPlaceholderText('HH:MM');
fireEvent.change(dueDateTimePicker, { target: { value: '05:00' } });
let graderTypeDropdown = await within(configureModal).findByTestId('grader-type-select');
fireEvent.change(graderTypeDropdown, { target: { value: newGraderType } });
fireEvent.change(graderTypeDropdown, { target: { value: expectedRequestData.graderType } });
// visibility tab
const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
fireEvent.click(visibilityTab);
const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
fireEvent.click(visibilityRadioButtons[1]);
let advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
fireEvent.click(advancedTab);
@@ -742,23 +776,7 @@ describe('<CourseOutline />', () => {
// verify request
expect(axiosMock.history.post.length).toBe(1);
expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
publish: 'republish',
graderType: newGraderType,
metadata: {
visible_to_staff_only: null,
due: newDue,
hide_after_due: false,
show_correctness: 'always',
is_practice_exam: false,
is_time_limited: isTimeLimited,
exam_review_rules: '',
is_proctored_enabled: false,
default_time_limit_minutes: defaultTimeLimitMinutes,
is_onboarding_exam: false,
start: newReleaseDate,
},
}));
expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
// reopen modal and check values
await act(async () => fireEvent.click(subsectionDropdownButton));
@@ -768,11 +786,15 @@ describe('<CourseOutline />', () => {
releaseDateStack = await within(configureModal).findByTestId('release-date-stack');
releaseDatePicker = await within(releaseDateStack).findByPlaceholderText('MM/DD/YYYY');
expect(releaseDatePicker).toHaveValue('08/10/2025');
releaseDateTimePicker = await within(releaseDateStack).findByPlaceholderText('HH:MM');
expect(releaseDateTimePicker).toHaveValue('00:00');
dueDateStack = await await within(configureModal).findByTestId('due-date-stack');
dueDatePicker = await within(dueDateStack).findByPlaceholderText('MM/DD/YYYY');
expect(dueDatePicker).toHaveValue('09/10/2025');
dueDateTimePicker = await within(dueDateStack).findByPlaceholderText('HH:MM');
expect(dueDateTimePicker).toHaveValue('05:00');
graderTypeDropdown = await within(configureModal).findByTestId('grader-type-select');
expect(graderTypeDropdown).toHaveValue(newGraderType);
expect(graderTypeDropdown).toHaveValue(expectedRequestData.graderType);
advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
fireEvent.click(advancedTab);
@@ -784,6 +806,444 @@ describe('<CourseOutline />', () => {
expect(hours).toHaveValue('54:30');
});
it('check prereq and proctoring settings in configure modal for subsection', async () => {
const {
findAllByTestId,
findByTestId,
} = render(<RootWrapper />);
const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[0]);
const [subsection, secondSubsection] = section.childInfo.children;
const expectedRequestData = {
publish: 'republish',
graderType: 'notgraded',
isPrereq: true,
prereqUsageKey: secondSubsection.id,
prereqMinScore: 80,
prereqMinCompletion: 90,
metadata: {
visible_to_staff_only: true,
due: '',
hide_after_due: false,
show_correctness: 'always',
is_practice_exam: false,
is_time_limited: true,
is_proctored_enabled: true,
exam_review_rules: 'some rules for proctored exams',
default_time_limit_minutes: 30,
is_onboarding_exam: false,
start: '1970-01-01T05:00:00Z',
},
};
axiosMock
.onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
.reply(200, { dummy: 'value' });
const [currentSection] = await findAllByTestId('section-card');
const [firstSubsection] = await within(currentSection).findAllByTestId('subsection-card');
const subsectionDropdownButton = await within(firstSubsection).findByTestId('subsection-card-header__menu-button');
subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
subsection.isProctoredExam = expectedRequestData.metadata.is_proctored_enabled;
subsection.isPracticeExam = expectedRequestData.metadata.is_practice_exam;
subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
subsection.isPrereq = expectedRequestData.isPrereq;
subsection.prereq = expectedRequestData.prereqUsageKey;
subsection.prereqMinScore = expectedRequestData.prereqMinScore;
subsection.prereqMinCompletion = expectedRequestData.prereqMinCompletion;
section.childInfo.children[0] = subsection;
axiosMock
.onGet(getXBlockApiUrl(section.id))
.reply(200, section);
fireEvent.click(subsectionDropdownButton);
const configureBtn = await within(firstSubsection).findByTestId('subsection-card-header__menu-configure-button');
fireEvent.click(configureBtn);
// update fields
let configureModal = await findByTestId('configure-modal');
let advancedTab = await within(configureModal).findByRole(
'tab',
{ name: configureModalMessages.advancedTabTitle.defaultMessage },
);
// visibility tab
const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
fireEvent.click(visibilityTab);
const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
fireEvent.click(visibilityRadioButtons[2]);
fireEvent.click(advancedTab);
let radioButtons = await within(configureModal).findAllByRole('radio');
fireEvent.click(radioButtons[2]);
let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
fireEvent.change(hours, { target: { value: '00:30' } });
// select a prerequisite
const prereqSelect = await within(configureModal).findByRole('combobox');
fireEvent.change(prereqSelect, { target: { value: expectedRequestData.prereqUsageKey } });
// update minimum score and completion percentage
let prereqMinScoreInput = await within(configureModal).findByLabelText(
configureModalMessages.minScoreLabel.defaultMessage,
);
fireEvent.change(prereqMinScoreInput, { target: { value: expectedRequestData.prereqMinScore } });
let prereqMinCompletionInput = await within(configureModal).findByLabelText(
configureModalMessages.minCompletionLabel.defaultMessage,
);
fireEvent.change(prereqMinCompletionInput, { target: { value: expectedRequestData.prereqMinCompletion } });
// enable this subsection to be used as prerequisite by other subsections
let prereqCheckbox = await within(configureModal).findByLabelText(
configureModalMessages.prereqCheckboxLabel.defaultMessage,
);
fireEvent.click(prereqCheckbox);
// fill some rules for proctored exams
let examsRulesInput = await within(configureModal).findByLabelText(
configureModalMessages.reviewRulesLabel.defaultMessage,
);
fireEvent.change(examsRulesInput, { target: { value: expectedRequestData.metadata.exam_review_rules } });
const saveButton = await within(configureModal).findByTestId('configure-save-button');
await act(async () => fireEvent.click(saveButton));
// verify request
expect(axiosMock.history.post.length).toBe(1);
expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
// reopen modal and check values
await act(async () => fireEvent.click(subsectionDropdownButton));
await act(async () => fireEvent.click(configureBtn));
configureModal = await findByTestId('configure-modal');
advancedTab = await within(configureModal).findByRole('tab', {
name: configureModalMessages.advancedTabTitle.defaultMessage,
});
fireEvent.click(advancedTab);
radioButtons = await within(configureModal).findAllByRole('radio');
expect(radioButtons[0]).toHaveProperty('checked', false);
expect(radioButtons[1]).toHaveProperty('checked', false);
expect(radioButtons[2]).toHaveProperty('checked', true);
hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
expect(hours).toHaveValue('00:30');
prereqCheckbox = await within(configureModal).findByLabelText(
configureModalMessages.prereqCheckboxLabel.defaultMessage,
);
expect(prereqCheckbox).toBeChecked();
const prereqSelectOption = await within(configureModal).findByRole('option', { selected: true });
expect(prereqSelectOption).toHaveAttribute('value', expectedRequestData.prereqUsageKey);
examsRulesInput = await within(configureModal).findByLabelText(
configureModalMessages.reviewRulesLabel.defaultMessage,
);
expect(examsRulesInput).toHaveTextContent(expectedRequestData.metadata.exam_review_rules);
prereqMinScoreInput = await within(configureModal).findByLabelText(
configureModalMessages.minScoreLabel.defaultMessage,
);
expect(prereqMinScoreInput).toHaveAttribute('value', `${expectedRequestData.prereqMinScore}`);
prereqMinCompletionInput = await within(configureModal).findByLabelText(
configureModalMessages.minCompletionLabel.defaultMessage,
);
expect(prereqMinCompletionInput).toHaveAttribute('value', `${expectedRequestData.prereqMinCompletion}`);
});
it('check practice proctoring settings in configure modal', async () => {
const {
findAllByTestId,
findByTestId,
} = render(<RootWrapper />);
const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[0]);
const [subsection] = section.childInfo.children;
const expectedRequestData = {
publish: 'republish',
graderType: 'notgraded',
isPrereq: false,
prereqMinScore: 100,
prereqMinCompletion: 100,
metadata: {
visible_to_staff_only: null,
due: '',
hide_after_due: false,
show_correctness: 'never',
is_practice_exam: true,
is_time_limited: true,
is_proctored_enabled: true,
exam_review_rules: '',
default_time_limit_minutes: 30,
is_onboarding_exam: false,
start: '1970-01-01T05:00:00Z',
},
};
axiosMock
.onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
.reply(200, { dummy: 'value' });
const [currentSection] = await findAllByTestId('section-card');
const [firstSubsection] = await within(currentSection).findAllByTestId('subsection-card');
const subsectionDropdownButton = await within(firstSubsection).findByTestId('subsection-card-header__menu-button');
subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
subsection.isProctoredExam = expectedRequestData.metadata.is_proctored_enabled;
subsection.isPracticeExam = expectedRequestData.metadata.is_practice_exam;
subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
section.childInfo.children[0] = subsection;
axiosMock
.onGet(getXBlockApiUrl(section.id))
.reply(200, section);
fireEvent.click(subsectionDropdownButton);
const configureBtn = await within(firstSubsection).findByTestId('subsection-card-header__menu-configure-button');
fireEvent.click(configureBtn);
// update fields
let configureModal = await findByTestId('configure-modal');
let advancedTab = await within(configureModal).findByRole(
'tab',
{ name: configureModalMessages.advancedTabTitle.defaultMessage },
);
// visibility tab
const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
fireEvent.click(visibilityTab);
const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
fireEvent.click(visibilityRadioButtons[4]);
// advancedTab
fireEvent.click(advancedTab);
let radioButtons = await within(configureModal).findAllByRole('radio');
fireEvent.click(radioButtons[3]);
let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
fireEvent.change(hours, { target: { value: '00:30' } });
// rules box should not be visible
expect(within(configureModal).queryByLabelText(
configureModalMessages.reviewRulesLabel.defaultMessage,
)).not.toBeInTheDocument();
const saveButton = await within(configureModal).findByTestId('configure-save-button');
await act(async () => fireEvent.click(saveButton));
// verify request
expect(axiosMock.history.post.length).toBe(1);
expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
// reopen modal and check values
await act(async () => fireEvent.click(subsectionDropdownButton));
await act(async () => fireEvent.click(configureBtn));
configureModal = await findByTestId('configure-modal');
advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
fireEvent.click(advancedTab);
radioButtons = await within(configureModal).findAllByRole('radio');
expect(radioButtons[0]).toHaveProperty('checked', false);
expect(radioButtons[1]).toHaveProperty('checked', false);
expect(radioButtons[2]).toHaveProperty('checked', false);
expect(radioButtons[3]).toHaveProperty('checked', true);
hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
expect(hours).toHaveValue('00:30');
});
it('check onboarding proctoring settings in configure modal', async () => {
const {
findAllByTestId,
findByTestId,
} = render(<RootWrapper />);
const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[0]);
const [, subsection] = section.childInfo.children;
const expectedRequestData = {
publish: 'republish',
graderType: 'notgraded',
isPrereq: true,
prereqMinScore: 100,
prereqMinCompletion: 100,
metadata: {
visible_to_staff_only: null,
due: '',
hide_after_due: false,
show_correctness: 'past_due',
is_practice_exam: false,
is_time_limited: true,
is_proctored_enabled: true,
exam_review_rules: '',
default_time_limit_minutes: 30,
is_onboarding_exam: true,
start: '2013-02-05T05:00:00Z',
},
};
axiosMock
.onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
.reply(200, { dummy: 'value' });
const [currentSection] = await findAllByTestId('section-card');
const [, secondSubsection] = await within(currentSection).findAllByTestId('subsection-card');
const subsectionDropdownButton = await within(secondSubsection).findByTestId('subsection-card-header__menu-button');
subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
subsection.isProctoredExam = expectedRequestData.metadata.is_proctored_enabled;
subsection.isPracticeExam = expectedRequestData.metadata.is_practice_exam;
subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
section.childInfo.children[1] = subsection;
axiosMock
.onGet(getXBlockApiUrl(section.id))
.reply(200, section);
fireEvent.click(subsectionDropdownButton);
const configureBtn = await within(secondSubsection).findByTestId('subsection-card-header__menu-configure-button');
fireEvent.click(configureBtn);
// update fields
let configureModal = await findByTestId('configure-modal');
// visibility tab
const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
fireEvent.click(visibilityTab);
const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
fireEvent.click(visibilityRadioButtons[5]);
// advancedTab
let advancedTab = await within(configureModal).findByRole(
'tab',
{ name: configureModalMessages.advancedTabTitle.defaultMessage },
);
fireEvent.click(advancedTab);
let radioButtons = await within(configureModal).findAllByRole('radio');
fireEvent.click(radioButtons[3]);
let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
fireEvent.change(hours, { target: { value: '00:30' } });
// rules box should not be visible
expect(within(configureModal).queryByLabelText(
configureModalMessages.reviewRulesLabel.defaultMessage,
)).not.toBeInTheDocument();
const saveButton = await within(configureModal).findByTestId('configure-save-button');
await act(async () => fireEvent.click(saveButton));
// verify request
expect(axiosMock.history.post.length).toBe(1);
expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
// reopen modal and check values
await act(async () => fireEvent.click(subsectionDropdownButton));
await act(async () => fireEvent.click(configureBtn));
configureModal = await findByTestId('configure-modal');
advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
fireEvent.click(advancedTab);
radioButtons = await within(configureModal).findAllByRole('radio');
expect(radioButtons[0]).toHaveProperty('checked', false);
expect(radioButtons[1]).toHaveProperty('checked', false);
expect(radioButtons[2]).toHaveProperty('checked', false);
expect(radioButtons[3]).toHaveProperty('checked', true);
hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
expect(hours).toHaveValue('00:30');
});
it('check no special exam setting in configure modal', async () => {
const {
findAllByTestId,
findByTestId,
} = render(<RootWrapper />);
const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[1]);
const [subsection] = section.childInfo.children;
const expectedRequestData = {
publish: 'republish',
graderType: 'notgraded',
prereqMinScore: 100,
prereqMinCompletion: 100,
metadata: {
visible_to_staff_only: null,
due: '',
hide_after_due: false,
show_correctness: 'always',
is_practice_exam: false,
is_time_limited: false,
is_proctored_enabled: false,
exam_review_rules: '',
default_time_limit_minutes: 0,
is_onboarding_exam: false,
start: '1970-01-01T05:00:00Z',
},
};
axiosMock
.onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
.reply(200, { dummy: 'value' });
const [, currentSection] = await findAllByTestId('section-card');
const [subsectionElement] = await within(currentSection).findAllByTestId('subsection-card');
const subsectionDropdownButton = await within(subsectionElement).findByTestId('subsection-card-header__menu-button');
subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
subsection.isProctoredExam = expectedRequestData.metadata.is_proctored_enabled;
subsection.isPracticeExam = expectedRequestData.metadata.is_practice_exam;
subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
section.childInfo.children[0] = subsection;
axiosMock
.onGet(getXBlockApiUrl(section.id))
.reply(200, section);
fireEvent.click(subsectionDropdownButton);
const configureBtn = await within(subsectionElement).findByTestId('subsection-card-header__menu-configure-button');
fireEvent.click(configureBtn);
// update fields
let configureModal = await findByTestId('configure-modal');
// advancedTab
let advancedTab = await within(configureModal).findByRole(
'tab',
{ name: configureModalMessages.advancedTabTitle.defaultMessage },
);
fireEvent.click(advancedTab);
let radioButtons = await within(configureModal).findAllByRole('radio');
fireEvent.click(radioButtons[0]);
// time box should not be visible
expect(within(configureModal).queryByLabelText(
configureModalMessages.timeAllotted.defaultMessage,
)).not.toBeInTheDocument();
// rules box should not be visible
expect(within(configureModal).queryByLabelText(
configureModalMessages.reviewRulesLabel.defaultMessage,
)).not.toBeInTheDocument();
const saveButton = await within(configureModal).findByTestId('configure-save-button');
await act(async () => fireEvent.click(saveButton));
// verify request
expect(axiosMock.history.post.length).toBe(1);
expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
// reopen modal and check values
await act(async () => fireEvent.click(subsectionDropdownButton));
await act(async () => fireEvent.click(configureBtn));
configureModal = await findByTestId('configure-modal');
advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
fireEvent.click(advancedTab);
radioButtons = await within(configureModal).findAllByRole('radio');
expect(radioButtons[0]).toHaveProperty('checked', true);
expect(radioButtons[1]).toHaveProperty('checked', false);
expect(radioButtons[2]).toHaveProperty('checked', false);
expect(radioButtons[3]).toHaveProperty('checked', false);
});
it('check configure modal for unit', async () => {
const { findAllByTestId, findByTestId } = render(<RootWrapper />);
const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
@@ -839,6 +1299,7 @@ describe('<CourseOutline />', () => {
},
],
selectedPartitionIndex: 0,
selectedGroupsLabel: '',
};
subsection.childInfo.children[0] = unit;
section.childInfo.children[0] = subsection;
@@ -1308,7 +1769,6 @@ describe('<CourseOutline />', () => {
});
it('check that drag handle is not visible for non-draggable sections', async () => {
cleanup();
axiosMock
.onGet(getCourseOutlineIndexApiUrl(courseId))
.reply(200, {

16
src/course-outline/__mocks__/courseOutlineIndex.js
View File

@@ -61,7 +61,7 @@ module.exports = {
highlightsEnabled: true,
highlightsPreviewOnly: false,
highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
enableProctoredExams: false,
enableProctoredExams: true,
createZendeskTickets: true,
enableTimedExams: true,
childInfo: {
@@ -152,6 +152,11 @@ module.exports = {
due: null,
relativeWeeksDue: null,
format: null,
isPrereq: false,
prereqs: [{
blockDisplayName: 'Sample Subsection',
blockUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@7f75de8dcc261249250b71925f49810f',
}],
courseGraders: [
'Homework',
'Exam',
@@ -381,10 +386,11 @@ module.exports = {
is_practice_exam: false,
is_onboarding_exam: false,
is_time_limited: false,
isPrereq: true,
exam_review_rules: '',
default_time_limit_minutes: null,
proctoring_exam_configuration_link: null,
supports_onboarding: false,
supports_onboarding: true,
show_review_rules: true,
child_info: {
category: 'vertical',
@@ -571,12 +577,12 @@ module.exports = {
],
showCorrectness: 'always',
hideAfterDue: false,
isProctoredExam: false,
isProctoredExam: true,
wasExamEverLinkedWithExternal: false,
onlineProctoringRules: '',
isPracticeExam: false,
isOnboardingExam: false,
isTimeLimited: false,
isTimeLimited: true,
examReviewRules: '',
defaultTimeLimitMinutes: null,
proctoringExamConfigurationLink: null,
@@ -3050,7 +3056,7 @@ module.exports = {
languageCode: 'en',
lmsLink: '//localhost:18000/courses/course-v1:edx+101+y76/jump_to/block-v1:edx+101+y76+type@course+block@course',
mfeProctoredExamSettingsUrl: '',
notificationDismissUrl: '/course_notifications/course-v1:edx+101+y76/2',
notificationDismissUrl: '',
proctoringErrors: [],
reindexLink: '/course/course-v1:edx+101+y76/search_reindex',
rerunNotificationId: 2,

43
src/course-outline/card-header/BaseTitleWithStatusBadge.jsx
View File

@@ -1,43 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Icon, Truncate } from '@edx/paragon';
import classNames from 'classnames';
import { ITEM_BADGE_STATUS } from '../constants';
import { getItemStatusBadgeContent } from '../utils';
import messages from './messages';
const BaseTitleWithStatusBadge = ({
title,
status,
namePrefix,
}) => {
const intl = useIntl();
const { badgeTitle, badgeIcon } = getItemStatusBadgeContent(status, messages, intl);
return (
<>
<Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
{badgeTitle && (
<div className="item-card-header__badge-status" data-testid={`${namePrefix}-card-header__badge-status`}>
{badgeIcon && (
<Icon
src={badgeIcon}
size="sm"
className={classNames({ 'text-success-500': status === ITEM_BADGE_STATUS.live })}
/>
)}
<span className="small">{badgeTitle}</span>
</div>
)}
</>
);
};
BaseTitleWithStatusBadge.propTypes = {
title: PropTypes.string.isRequired,
status: PropTypes.string.isRequired,
namePrefix: PropTypes.string.isRequired,
};
export default BaseTitleWithStatusBadge;

59
src/course-outline/card-header/CardHeader.jsx
View File

@@ -5,6 +5,7 @@ import { useSearchParams } from 'react-router-dom';
import {
Dropdown,
Form,
Hyperlink,
Icon,
IconButton,
} from '@edx/paragon';
@@ -16,6 +17,7 @@ import {
import { useEscapeClick } from '../../hooks';
import { ITEM_BADGE_STATUS } from '../constants';
import { scrollToElement } from '../utils';
import CardStatus from './CardStatus';
import messages from './messages';
const CardHeader = ({
@@ -41,6 +43,11 @@ const CardHeader = ({
actions,
enableCopyPasteUnits,
isVertical,
isSequential,
proctoringExamConfigurationLink,
discussionEnabled,
discussionsSettings,
parentInfo,
}) => {
const intl = useIntl();
const [searchParams] = useSearchParams();
@@ -61,6 +68,17 @@ const CardHeader = ({
}
}, []);
const showDiscussionsEnabledBadge = (
isVertical
&& !parentInfo?.isTimeLimited
&& discussionEnabled
&& discussionsSettings?.providerType === 'openedx'
&& (
discussionsSettings?.enableGradedUnits
|| (!discussionsSettings?.enableGradedUnits && !parentInfo.graded)
)
);
useEscapeClick({
onEscape: () => {
setTitleValue(title);
@@ -76,7 +94,7 @@ const CardHeader = ({
ref={cardHeaderRef}
>
{isFormOpen ? (
<Form.Group className="m-0">
<Form.Group className="m-0 w-75">
<Form.Control
data-testid={`${namePrefix}-edit-field`}
ref={(e) => e && e.focus()}
@@ -94,16 +112,20 @@ const CardHeader = ({
/>
</Form.Group>
) : (
titleComponent
)}
<div className="ml-auto d-flex">
{!isFormOpen && (
<>
{titleComponent}
<IconButton
className="item-card-edit-icon"
data-testid={`${namePrefix}-edit-button`}
alt={intl.formatMessage(messages.altButtonEdit)}
iconAs={EditIcon}
onClick={onClickEdit}
/>
</>
)}
<div className="ml-auto d-flex">
{(isVertical || isSequential) && (
<CardStatus status={status} showDiscussionsEnabledBadge={showDiscussionsEnabledBadge} />
)}
<Dropdown data-testid={`${namePrefix}-card-header__menu`} onClick={onClickMenuButton}>
<Dropdown.Toggle
@@ -116,6 +138,17 @@ const CardHeader = ({
iconAs={Icon}
/>
<Dropdown.Menu>
{isSequential && proctoringExamConfigurationLink && (
<Dropdown.Item
as={Hyperlink}
target="_blank"
destination={proctoringExamConfigurationLink}
href={proctoringExamConfigurationLink}
externalLinkTitle={intl.formatMessage(messages.proctoringLinkTooltip)}
>
{intl.formatMessage(messages.menuProctoringLinkText)}
</Dropdown.Item>
)}
<Dropdown.Item
data-testid={`${namePrefix}-card-header__menu-publish-button`}
disabled={isDisabledPublish}
@@ -179,7 +212,12 @@ const CardHeader = ({
CardHeader.defaultProps = {
enableCopyPasteUnits: false,
isVertical: false,
isSequential: false,
onClickCopy: null,
proctoringExamConfigurationLink: null,
discussionEnabled: false,
discussionsSettings: {},
parentInfo: {},
};
CardHeader.propTypes = {
@@ -202,6 +240,7 @@ CardHeader.propTypes = {
onClickCopy: PropTypes.func,
titleComponent: PropTypes.node.isRequired,
namePrefix: PropTypes.string.isRequired,
proctoringExamConfigurationLink: PropTypes.string,
actions: PropTypes.shape({
deletable: PropTypes.bool.isRequired,
draggable: PropTypes.bool.isRequired,
@@ -212,6 +251,16 @@ CardHeader.propTypes = {
}).isRequired,
enableCopyPasteUnits: PropTypes.bool,
isVertical: PropTypes.bool,
isSequential: PropTypes.bool,
discussionEnabled: PropTypes.bool,
discussionsSettings: PropTypes.shape({
providerType: PropTypes.string,
enableGradedUnits: PropTypes.bool,
}),
parentInfo: PropTypes.shape({
isTimeLimited: PropTypes.bool,
graded: PropTypes.bool,
}),
};
export default CardHeader;

32
src/course-outline/card-header/CardHeader.scss
View File

@@ -12,32 +12,18 @@
color: $black;
}
.item-card-header__badge-status {
display: flex;
padding: 1px .5rem;
justify-content: center;
align-items: center;
gap: .25rem;
border-radius: .375rem;
border: 1px solid $light-300;
margin: 0 .75rem;
.item-card-edit-icon {
opacity: 0;
transition: opacity .3s linear;
& span:last-child {
color: $primary-700;
&:focus {
opacity: 1;
}
}
.pgn__form-group {
width: 80%;
}
}
.item-card-header-tooltip {
.tooltip-inner {
max-width: 18.75rem;
}
.arrow {
transform: translate(5.75rem, 0) !important;
&:hover {
.item-card-edit-icon {
opacity: 1;
}
}
}

110
src/course-outline/card-header/CardHeader.test.jsx
View File

@@ -1,10 +1,11 @@
import { MemoryRouter } from 'react-router-dom';
import { render, fireEvent, waitFor } from '@testing-library/react';
import {
act, render, fireEvent, waitFor,
} from '@testing-library/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { ITEM_BADGE_STATUS } from '../constants';
import CardHeader from './CardHeader';
import BaseTitleWithStatusBadge from './BaseTitleWithStatusBadge';
import TitleButton from './TitleButton';
import messages from './messages';
@@ -36,7 +37,8 @@ const cardHeaderProps = {
onClickConfigure: onClickConfigureMock,
onClickMoveUp: onClickMoveUpMock,
onClickMoveDown: onClickMoveDownMock,
namePrefix: 'section',
isSequential: true,
namePrefix: 'subsection',
actions: {
draggable: true,
childAddable: true,
@@ -49,17 +51,11 @@ const renderComponent = (props, entry = '/') => {
const titleComponent = (
<TitleButton
isExpanded
title={cardHeaderProps.title}
onTitleClick={onExpandMock}
namePrefix={cardHeaderProps.namePrefix}
{...props}
>
<BaseTitleWithStatusBadge
title={cardHeaderProps.title}
status={cardHeaderProps.status}
namePrefix={cardHeaderProps.namePrefix}
{...props}
/>
</TitleButton>
/>
);
return render(
@@ -80,9 +76,8 @@ describe('<CardHeader />', () => {
const { findByText, findByTestId, queryByTestId } = renderComponent();
expect(await findByText(cardHeaderProps.title)).toBeInTheDocument();
expect(await findByTestId('section-card-header__expanded-btn')).toBeInTheDocument();
expect(await findByTestId('section-card-header__badge-status')).toBeInTheDocument();
expect(await findByTestId('section-card-header__menu')).toBeInTheDocument();
expect(await findByTestId('subsection-card-header__expanded-btn')).toBeInTheDocument();
expect(await findByTestId('subsection-card-header__menu')).toBeInTheDocument();
await waitFor(() => {
expect(queryByTestId('edit field')).not.toBeInTheDocument();
});
@@ -120,25 +115,25 @@ describe('<CardHeader />', () => {
expect(await findByText(messages.statusBadgeDraft.defaultMessage)).toBeInTheDocument();
});
it('check publish menu item is disabled when section status is live or published not live and it has no changes', async () => {
it('check publish menu item is disabled when subsection status is live or published not live and it has no changes', async () => {
const { findByText, findByTestId } = renderComponent({
...cardHeaderProps,
status: ITEM_BADGE_STATUS.publishedNotLive,
});
const menuButton = await findByTestId('section-card-header__menu-button');
const menuButton = await findByTestId('subsection-card-header__menu-button');
fireEvent.click(menuButton);
expect(await findByText(messages.menuPublish.defaultMessage)).toHaveAttribute('aria-disabled', 'true');
});
it('check publish menu item is enabled when section status is live or published not live and it has changes', async () => {
it('check publish menu item is enabled when subsection status is live or published not live and it has changes', async () => {
const { findByText, findByTestId } = renderComponent({
...cardHeaderProps,
status: ITEM_BADGE_STATUS.publishedNotLive,
hasChanges: true,
});
const menuButton = await findByTestId('section-card-header__menu-button');
const menuButton = await findByTestId('subsection-card-header__menu-button');
fireEvent.click(menuButton);
expect(await findByText(messages.menuPublish.defaultMessage)).not.toHaveAttribute('aria-disabled');
});
@@ -146,7 +141,7 @@ describe('<CardHeader />', () => {
it('calls handleExpanded when button is clicked', async () => {
const { findByTestId } = renderComponent();
const expandButton = await findByTestId('section-card-header__expanded-btn');
const expandButton = await findByTestId('subsection-card-header__expanded-btn');
fireEvent.click(expandButton);
expect(onExpandMock).toHaveBeenCalled();
});
@@ -154,11 +149,9 @@ describe('<CardHeader />', () => {
it('calls onClickMenuButton when menu is clicked', async () => {
const { findByTestId } = renderComponent();
const menuButton = await findByTestId('section-card-header__menu-button');
fireEvent.click(menuButton);
waitFor(() => {
expect(onClickMenuButtonMock).toHaveBeenCalled();
});
const menuButton = await findByTestId('subsection-card-header__menu-button');
await act(async () => fireEvent.click(menuButton));
expect(onClickMenuButtonMock).toHaveBeenCalled();
});
it('calls onClickPublish when item is clicked', async () => {
@@ -167,24 +160,20 @@ describe('<CardHeader />', () => {
status: ITEM_BADGE_STATUS.draft,
});
const menuButton = await findByTestId('section-card-header__menu-button');
const menuButton = await findByTestId('subsection-card-header__menu-button');
fireEvent.click(menuButton);
const publishMenuItem = await findByText(messages.menuPublish.defaultMessage);
fireEvent.click(publishMenuItem);
waitFor(() => {
expect(onClickPublishMock).toHaveBeenCalled();
});
await act(async () => fireEvent.click(publishMenuItem));
expect(onClickPublishMock).toHaveBeenCalled();
});
it('calls onClickEdit when the button is clicked', async () => {
const { findByTestId } = renderComponent();
const editButton = await findByTestId('section-edit-button');
fireEvent.click(editButton);
waitFor(() => {
expect(onClickEditMock).toHaveBeenCalled();
});
const editButton = await findByTestId('subsection-edit-button');
await act(async () => fireEvent.click(editButton));
expect(onClickEditMock).toHaveBeenCalled();
});
it('check is field visible when isFormOpen is true', async () => {
@@ -193,9 +182,9 @@ describe('<CardHeader />', () => {
isFormOpen: true,
});
expect(await findByTestId('section-edit-field')).toBeInTheDocument();
expect(await findByTestId('subsection-edit-field')).toBeInTheDocument();
waitFor(() => {
expect(queryByTestId('section-card-header__expanded-btn')).not.toBeInTheDocument();
expect(queryByTestId('subsection-card-header__expanded-btn')).not.toBeInTheDocument();
expect(queryByTestId('edit-button')).not.toBeInTheDocument();
});
});
@@ -207,32 +196,59 @@ describe('<CardHeader />', () => {
isDisabledEditField: true,
});
expect(await findByTestId('section-edit-field')).toBeDisabled();
expect(await findByTestId('subsection-edit-field')).toBeDisabled();
});
it('calls onClickDelete when item is clicked', async () => {
const { findByText, findByTestId } = renderComponent();
const menuButton = await findByTestId('section-card-header__menu-button');
fireEvent.click(menuButton);
const menuButton = await findByTestId('subsection-card-header__menu-button');
await act(async () => fireEvent.click(menuButton));
const deleteMenuItem = await findByText(messages.menuDelete.defaultMessage);
fireEvent.click(deleteMenuItem);
waitFor(() => {
expect(onClickDeleteMock).toHaveBeenCalledTimes(1);
});
await act(async () => fireEvent.click(deleteMenuItem));
expect(onClickDeleteMock).toHaveBeenCalledTimes(1);
});
it('calls onClickDuplicate when item is clicked', async () => {
const { findByText, findByTestId } = renderComponent();
const menuButton = await findByTestId('section-card-header__menu-button');
const menuButton = await findByTestId('subsection-card-header__menu-button');
fireEvent.click(menuButton);
const duplicateMenuItem = await findByText(messages.menuDuplicate.defaultMessage);
fireEvent.click(duplicateMenuItem);
waitFor(() => {
expect(onClickDuplicateMock).toHaveBeenCalled();
await act(async () => fireEvent.click(duplicateMenuItem));
expect(onClickDuplicateMock).toHaveBeenCalled();
});
it('check if proctoringExamConfigurationLink is visible', async () => {
const { findByText, findByTestId } = renderComponent({
...cardHeaderProps,
proctoringExamConfigurationLink: 'https://localhost:8000/',
isSequential: true,
});
const menuButton = await findByTestId('subsection-card-header__menu-button');
await act(async () => fireEvent.click(menuButton));
expect(await findByText(messages.menuProctoringLinkText.defaultMessage)).toBeInTheDocument();
});
it('check if discussion enabled badge is visible', async () => {
const { queryByText } = renderComponent({
...cardHeaderProps,
isVertical: true,
discussionEnabled: true,
discussionsSettings: {
providerType: 'openedx',
enableGradedUnits: true,
},
parentInfo: {
isTimeLimited: false,
graded: false,
},
});
expect(queryByText(messages.discussionEnabledBadgeText.defaultMessage)).toBeInTheDocument();
});
});

40
src/course-outline/card-header/CardStatus.jsx Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from '@edx/frontend-platform/i18n';
import classNames from 'classnames';
import { ITEM_BADGE_STATUS } from '../constants';
import { getItemStatusBadgeContent } from '../utils';
import messages from './messages';
import StatusBadge from './StatusBadge';
const CardStatus = ({
status,
showDiscussionsEnabledBadge,
}) => {
const intl = useIntl();
const { badgeTitle, badgeIcon } = getItemStatusBadgeContent(status, messages, intl);
return (
<>
{showDiscussionsEnabledBadge && (
<StatusBadge
text={intl.formatMessage(messages.discussionEnabledBadgeText)}
/>
)}
{badgeTitle && (
<StatusBadge
text={badgeTitle}
icon={badgeIcon}
iconClassName={classNames({ 'text-success-500': status === ITEM_BADGE_STATUS.live })}
/>
)}
</>
);
};
CardStatus.propTypes = {
status: PropTypes.string.isRequired,
showDiscussionsEnabledBadge: PropTypes.bool.isRequired,
};
export default CardStatus;

42
src/course-outline/card-header/StatusBadge.jsx Normal file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '@edx/paragon';
const StatusBadge = ({
text,
icon,
iconClassName,
}) => {
if (text) {
return (
<div
className="px-2 py-1 mr-2 rounded bg-white align-self-center align-items-center d-flex border border-light-300"
role="status"
>
{icon && (
<Icon
src={icon}
size="sm"
className={iconClassName}
/>
)}
<span className="small ml-1">{text}</span>
</div>
);
}
return null;
};
StatusBadge.defaultProps = {
text: '',
icon: '',
iconClassName: '',
};
StatusBadge.propTypes = {
text: PropTypes.string,
icon: PropTypes.string,
iconClassName: PropTypes.string,
};
export default StatusBadge;

16
src/course-outline/card-header/TitleButton.jsx
View File

@@ -4,6 +4,7 @@ import {
Button,
OverlayTrigger,
Tooltip,
Truncate,
} from '@edx/paragon';
import {
ArrowDropDown as ArrowDownIcon,
@@ -12,21 +13,20 @@ import {
import messages from './messages';
const TitleButton = ({
title,
isExpanded,
onTitleClick,
namePrefix,
children,
}) => {
const intl = useIntl();
const titleTooltipMessage = intl.formatMessage(messages.expandTooltip);
return (
<OverlayTrigger
placement="bottom-start"
placement="bottom"
overlay={(
<Tooltip
id={titleTooltipMessage}
className="item-card-header-tooltip"
id={`${title}-${titleTooltipMessage}`}
>
{titleTooltipMessage}
</Tooltip>
@@ -39,21 +39,17 @@ const TitleButton = ({
className="item-card-header__title-btn"
onClick={onTitleClick}
>
{children}
<Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
</Button>
</OverlayTrigger>
);
};
TitleButton.defaultProps = {
children: null,
};
TitleButton.propTypes = {
title: PropTypes.string.isRequired,
isExpanded: PropTypes.bool.isRequired,
onTitleClick: PropTypes.func.isRequired,
namePrefix: PropTypes.string.isRequired,
children: PropTypes.node,
};
export default TitleButton;

12
src/course-outline/card-header/TitleLink.jsx
View File

@@ -1,11 +1,11 @@
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Button } from '@edx/paragon';
import { Button, Truncate } from '@edx/paragon';
const TitleLink = ({
title,
titleLink,
namePrefix,
children,
}) => (
<Button
as={Link}
@@ -14,18 +14,14 @@ const TitleLink = ({
className="item-card-header__title-btn"
to={titleLink}
>
{children}
<Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
</Button>
);
TitleLink.defaultProps = {
children: null,
};
TitleLink.propTypes = {
title: PropTypes.string.isRequired,
titleLink: PropTypes.string.isRequired,
namePrefix: PropTypes.string.isRequired,
children: PropTypes.node,
};
export default TitleLink;

12
src/course-outline/card-header/messages.js
View File

@@ -61,6 +61,18 @@ const messages = defineMessages({
id: 'course-authoring.course-outline.card.menu.delete',
defaultMessage: 'Copy to clipboard',
},
menuProctoringLinkText: {
id: 'course-authoring.course-outline.card.menu.proctoring-settings',
defaultMessage: 'Proctoring settings',
},
proctoringLinkTooltip: {
id: 'course-authoring.course-outline.card.menu.proctoring-settings-tooltip',
defaultMessage: 'Proctoring settings',
},
discussionEnabledBadgeText: {
id: 'course-authoring.course-outline.card.badge.discussionEnabled',
defaultMessage: 'Discussions enabled',
},
});
export default messages;

210
src/course-outline/configure-modal/AdvancedTab.jsx
View File

@@ -1,16 +1,49 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { Form } from '@edx/paragon';
import { Alert, Form, Hyperlink } from '@edx/paragon';
import {
Warning as WarningIcon,
} from '@edx/paragon/icons';
import { FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
import messages from './messages';
import PrereqSettings from './PrereqSettings';
const AdvancedTab = ({
isTimeLimited,
setIsTimeLimited,
defaultTimeLimit,
setDefaultTimeLimit,
values,
setFieldValue,
prereqs,
releasedToStudents,
wasExamEverLinkedWithExternal,
enableProctoredExams,
supportsOnboarding,
wasProctoredExam,
showReviewRules,
onlineProctoringRules,
}) => {
const {
isTimeLimited,
isProctoredExam,
isOnboardingExam,
isPracticeExam,
defaultTimeLimitMinutes,
examReviewRules,
} = values;
let examTypeValue = 'none';
if (isTimeLimited && isProctoredExam) {
if (isOnboardingExam) {
examTypeValue = 'onboardingExam';
} else if (isPracticeExam) {
examTypeValue = 'practiceExam';
} else {
examTypeValue = 'proctoredExam';
}
} else if (isTimeLimited) {
examTypeValue = 'timed';
}
const formatHour = (hour) => {
const hh = Math.floor(hour / 60);
const mm = hour % 60;
@@ -31,14 +64,35 @@ const AdvancedTab = ({
return `${hhs}:${mms}`;
};
const [timeLimit, setTimeLimit] = useState(formatHour(defaultTimeLimit));
const [timeLimit, setTimeLimit] = useState(formatHour(defaultTimeLimitMinutes));
const showReviewRulesDiv = showReviewRules && isProctoredExam && !isPracticeExam && !isOnboardingExam;
const handleChange = (e) => {
if (e.target.value === 'timed') {
setIsTimeLimited(true);
setFieldValue('isTimeLimited', true);
setFieldValue('isOnboardingExam', false);
setFieldValue('isPracticeExam', false);
setFieldValue('isProctoredExam', false);
} else if (e.target.value === 'onboardingExam') {
setFieldValue('isOnboardingExam', true);
setFieldValue('isProctoredExam', true);
setFieldValue('isTimeLimited', true);
setFieldValue('isPracticeExam', false);
} else if (e.target.value === 'practiceExam') {
setFieldValue('isPracticeExam', true);
setFieldValue('isProctoredExam', true);
setFieldValue('isTimeLimited', true);
setFieldValue('isOnboardingExam', false);
} else if (e.target.value === 'proctoredExam') {
setFieldValue('isProctoredExam', true);
setFieldValue('isTimeLimited', true);
setFieldValue('isOnboardingExam', false);
setFieldValue('isPracticeExam', false);
} else {
setDefaultTimeLimit(null);
setIsTimeLimited(false);
setFieldValue('isTimeLimited', false);
setFieldValue('isOnboardingExam', false);
setFieldValue('isPracticeExam', false);
setFieldValue('isProctoredExam', false);
}
};
@@ -48,11 +102,29 @@ const AdvancedTab = ({
value = value.trim();
if (value && valid) {
const minutes = moment.duration(value).asMinutes();
setDefaultTimeLimit(minutes);
setFieldValue('defaultTimeLimitMinutes', minutes);
}
setTimeLimit(value);
};
const renderAlerts = () => {
const proctoredExamLockedIn = releasedToStudents && wasExamEverLinkedWithExternal;
return (
<>
{proctoredExamLockedIn && !wasProctoredExam && (
<Alert variant="warning" icon={WarningIcon}>
<FormattedMessage {...messages.proctoredExamLockedAndisNotProctoredExamAlert} />
</Alert>
)}
{proctoredExamLockedIn && wasProctoredExam && (
<Alert variant="warning" icon={WarningIcon}>
<FormattedMessage {...messages.proctoredExamLockedAndisProctoredExamAlert} />
</Alert>
)}
</>
);
};
return (
<>
<h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.setSpecialExam} /></h5>
@@ -60,15 +132,47 @@ const AdvancedTab = ({
<Form.RadioSet
name="specialExam"
onChange={handleChange}
value={isTimeLimited ? 'timed' : 'none'}
value={examTypeValue}
>
{renderAlerts()}
<Form.Radio value="none">
<FormattedMessage {...messages.none} />
</Form.Radio>
<Form.Radio value="timed">
<Form.Radio
value="timed"
description={<FormattedMessage {...messages.timedDescription} />}
controlClassName="mw-1-25rem"
>
<FormattedMessage {...messages.timed} />
</Form.Radio>
<Form.Text><FormattedMessage {...messages.timedDescription} /></Form.Text>
{enableProctoredExams && (
<>
<Form.Radio
value="proctoredExam"
description={<FormattedMessage {...messages.proctoredExamDescription} />}
controlClassName="mw-1-25rem"
>
<FormattedMessage {...messages.proctoredExam} />
</Form.Radio>
{supportsOnboarding ? (
<Form.Radio
description={<FormattedMessage {...messages.onboardingExamDescription} />}
value="onboardingExam"
controlClassName="mw-1-25rem"
>
<FormattedMessage {...messages.onboardingExam} />
</Form.Radio>
) : (
<Form.Radio
value="practiceExam"
controlClassName="mw-1-25rem"
description={<FormattedMessage {...messages.practiceExamDescription} />}
>
<FormattedMessage {...messages.practiceExam} />
</Form.Radio>
)}
</>
)}
</Form.RadioSet>
{ isTimeLimited && (
<div className="mt-3" data-testid="advanced-tab-hours-picker-wrapper">
@@ -86,15 +190,87 @@ const AdvancedTab = ({
<Form.Text><FormattedMessage {...messages.timeLimitDescription} /></Form.Text>
</div>
)}
{ showReviewRulesDiv && (
<div className="mt-3">
<Form.Group>
<Form.Label>
<FormattedMessage {...messages.reviewRulesLabel} />
</Form.Label>
<Form.Control
onChange={(e) => setFieldValue('examReviewRules', e.target.value)}
value={examReviewRules}
as="textarea"
rows="3"
/>
</Form.Group>
<Form.Text>
{ onlineProctoringRules ? (
<FormattedMessage
{...messages.reviewRulesDescriptionWithLink}
values={{
hyperlink: (
<Hyperlink
destination={onlineProctoringRules}
target="_blank"
showLaunchIcon={false}
>
<FormattedMessage
{...messages.reviewRulesDescriptionLinkText}
/>
</Hyperlink>
),
}}
/>
) : (
<FormattedMessage {...messages.reviewRulesDescription} />
)}
</Form.Text>
</div>
)}
<PrereqSettings
values={values}
setFieldValue={setFieldValue}
prereqs={prereqs}
/>
</>
);
};
AdvancedTab.defaultProps = {
prereqs: [],
wasExamEverLinkedWithExternal: false,
enableProctoredExams: false,
supportsOnboarding: false,
wasProctoredExam: false,
showReviewRules: false,
onlineProctoringRules: '',
};
AdvancedTab.propTypes = {
isTimeLimited: PropTypes.bool.isRequired,
setIsTimeLimited: PropTypes.func.isRequired,
defaultTimeLimit: PropTypes.number.isRequired,
setDefaultTimeLimit: PropTypes.func.isRequired,
values: PropTypes.shape({
isTimeLimited: PropTypes.bool.isRequired,
defaultTimeLimitMinutes: PropTypes.number,
isPrereq: PropTypes.bool,
prereqUsageKey: PropTypes.string,
prereqMinScore: PropTypes.number,
prereqMinCompletion: PropTypes.number,
isProctoredExam: PropTypes.bool,
isPracticeExam: PropTypes.bool,
isOnboardingExam: PropTypes.bool,
examReviewRules: PropTypes.string,
}).isRequired,
setFieldValue: PropTypes.func.isRequired,
prereqs: PropTypes.arrayOf(PropTypes.shape({
blockUsageKey: PropTypes.string.isRequired,
blockDisplayName: PropTypes.string.isRequired,
})),
releasedToStudents: PropTypes.bool.isRequired,
wasExamEverLinkedWithExternal: PropTypes.bool,
enableProctoredExams: PropTypes.bool,
supportsOnboarding: PropTypes.bool,
wasProctoredExam: PropTypes.bool,
showReviewRules: PropTypes.bool,
onlineProctoringRules: PropTypes.string,
};
export default injectIntl(AdvancedTab);

66
src/course-outline/configure-modal/BasicTab.jsx
View File

@@ -6,18 +6,20 @@ import messages from './messages';
import { DatepickerControl, DATEPICKER_TYPES } from '../../generic/datepicker-control';
const BasicTab = ({
releaseDate,
setReleaseDate,
isSubsection,
graderType,
values,
setFieldValue,
courseGraders,
setGraderType,
dueDate,
setDueDate,
isSubsection,
}) => {
const intl = useIntl();
const onChangeGraderType = (e) => setGraderType(e.target.value);
const {
releaseDate,
graderType,
dueDate,
} = values;
const onChangeGraderType = (e) => setFieldValue('graderType', e.target.value);
const createOptions = () => courseGraders.map((option) => (
<option key={option} value={option}> {option} </option>
@@ -34,14 +36,14 @@ const BasicTab = ({
value={releaseDate}
label={intl.formatMessage(messages.releaseDate)}
controlName="state-date"
onChange={setReleaseDate}
onChange={(val) => setFieldValue('releaseDate', val)}
/>
<DatepickerControl
type={DATEPICKER_TYPES.time}
value={releaseDate}
label={intl.formatMessage(messages.releaseTimeUTC)}
controlName="start-time"
onChange={setReleaseDate}
onChange={(val) => setFieldValue('releaseDate', val)}
/>
</Stack>
</div>
@@ -50,16 +52,20 @@ const BasicTab = ({
<div>
<h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.grading} /></h5>
<hr />
<Form.Label><FormattedMessage {...messages.gradeAs} /></Form.Label>
<Form.Control
as="select"
defaultValue={graderType}
onChange={(value) => onChangeGraderType(value)}
data-testid="grader-type-select"
>
<option key="notGraded" value="Not Graded"> Not Graded </option>
{createOptions()}
</Form.Control>
<Form.Group>
<Form.Label><FormattedMessage {...messages.gradeAs} /></Form.Label>
<Form.Control
as="select"
defaultValue={graderType}
onChange={onChangeGraderType}
data-testid="grader-type-select"
>
<option key="notgraded" value="notgraded">
{intl.formatMessage(messages.notGradedTypeOption)}
</option>
{createOptions()}
</Form.Control>
</Form.Group>
<div data-testid="due-date-stack">
<Stack className="mt-3" direction="horizontal" gap={5}>
<DatepickerControl
@@ -67,7 +73,7 @@ const BasicTab = ({
value={dueDate}
label={intl.formatMessage(messages.dueDate)}
controlName="state-date"
onChange={setDueDate}
onChange={(val) => setFieldValue('dueDate', val)}
data-testid="due-date-picker"
/>
<DatepickerControl
@@ -75,7 +81,7 @@ const BasicTab = ({
value={dueDate}
label={intl.formatMessage(messages.dueTimeUTC)}
controlName="start-time"
onChange={setDueDate}
onChange={(val) => setFieldValue('dueDate', val)}
/>
</Stack>
</div>
@@ -87,18 +93,14 @@ const BasicTab = ({
};
BasicTab.propTypes = {
releaseDate: PropTypes.string.isRequired,
setReleaseDate: PropTypes.func.isRequired,
isSubsection: PropTypes.bool.isRequired,
graderType: PropTypes.string.isRequired,
setGraderType: PropTypes.func.isRequired,
dueDate: PropTypes.string,
setDueDate: PropTypes.func.isRequired,
values: PropTypes.shape({
releaseDate: PropTypes.string.isRequired,
graderType: PropTypes.string.isRequired,
dueDate: PropTypes.string,
}).isRequired,
courseGraders: PropTypes.arrayOf(PropTypes.string).isRequired,
};
BasicTab.defaultProps = {
dueDate: null,
setFieldValue: PropTypes.func.isRequired,
};
export default injectIntl(BasicTab);

339
src/course-outline/configure-modal/ConfigureModal.jsx
View File

@@ -1,20 +1,22 @@
/* eslint-disable import/named */
import React, { useEffect, useState } from 'react';
import React from 'react';
import * as Yup from 'yup';
import PropTypes from 'prop-types';
import { useIntl } from '@edx/frontend-platform/i18n';
import {
ModalDialog,
Button,
ActionRow,
Form,
Tab,
Tabs,
useCheckboxSetValues,
} from '@edx/paragon';
import { useSelector } from 'react-redux';
import { Formik } from 'formik';
import { VisibilityTypes } from '../../data/constants';
import { COURSE_BLOCK_NAMES } from '../constants';
import { getCurrentItem } from '../data/selectors';
import { getCurrentItem, getProctoredExamsFlag } from '../data/selectors';
import messages from './messages';
import BasicTab from './BasicTab';
import VisibilityTab from './VisibilityTab';
@@ -41,27 +43,26 @@ const ConfigureModal = ({
format,
userPartitionInfo,
ancestorHasStaffLock,
isPrereq,
prereqs,
prereq,
prereqMinScore,
prereqMinCompletion,
releasedToStudents,
wasExamEverLinkedWithExternal,
isProctoredExam,
isOnboardingExam,
isPracticeExam,
examReviewRules,
supportsOnboarding,
showReviewRules,
onlineProctoringRules,
} = useSelector(getCurrentItem);
const enableProctoredExams = useSelector(getProctoredExamsFlag);
const [releaseDate, setReleaseDate] = useState(sectionStartDate);
const [isVisibleToStaffOnly, setIsVisibleToStaffOnly] = useState(visibilityState === VisibilityTypes.STAFF_ONLY);
const [saveButtonDisabled, setSaveButtonDisabled] = useState(true);
const [graderType, setGraderType] = useState(format == null ? 'Not Graded' : format);
const [dueDateState, setDueDateState] = useState(due == null ? '' : due);
const [isTimeLimitedState, setIsTimeLimitedState] = useState(false);
const [defaultTimeLimitMin, setDefaultTimeLimitMin] = useState(defaultTimeLimitMinutes);
const [hideAfterDueState, setHideAfterDueState] = useState(hideAfterDue === undefined ? false : hideAfterDue);
const [showCorrectnessState, setShowCorrectnessState] = useState(false);
const isSubsection = category === COURSE_BLOCK_NAMES.sequential.id;
/* TODO: The use of these useEffects needs to be updated to use Formik, please see,
* https://github.com/open-craft/frontend-app-course-authoring/pull/22#discussion_r1435957797 as reference. */
// by default it is -1 i.e. accessible to all learners & staff
const [selectedPartitionIndex, setSelectedPartitionIndex] = useState(userPartitionInfo?.selectedPartitionIndex);
const getSelectedGroups = () => {
if (selectedPartitionIndex >= 0) {
return userPartitionInfo?.selectablePartitions[selectedPartitionIndex]
if (userPartitionInfo?.selectedPartitionIndex >= 0) {
return userPartitionInfo?.selectablePartitions[userPartitionInfo?.selectedPartitionIndex]
?.groups
.filter(({ selected }) => selected)
.map(({ id }) => `${id}`)
@@ -70,140 +71,126 @@ const ConfigureModal = ({
return [];
};
const [selectedGroups, { add, remove, set }] = useCheckboxSetValues([]);
const defaultPrereqScore = (val) => {
if (val === null || val === undefined) {
return 100;
}
return parseFloat(val);
};
useEffect(() => {
setSelectedPartitionIndex(userPartitionInfo?.selectedPartitionIndex);
}, [userPartitionInfo]);
const initialValues = {
releaseDate: sectionStartDate,
isVisibleToStaffOnly: visibilityState === VisibilityTypes.STAFF_ONLY,
saveButtonDisabled: true,
graderType: format == null ? 'notgraded' : format,
dueDate: due == null ? '' : due,
isTimeLimited,
isProctoredExam,
isOnboardingExam,
isPracticeExam,
examReviewRules,
defaultTimeLimitMinutes,
hideAfterDue: hideAfterDue === undefined ? false : hideAfterDue,
showCorrectness,
isPrereq,
prereqUsageKey: prereq,
prereqMinScore: defaultPrereqScore(prereqMinScore),
prereqMinCompletion: defaultPrereqScore(prereqMinCompletion),
// by default it is -1 i.e. accessible to all learners & staff
selectedPartitionIndex: userPartitionInfo?.selectedPartitionIndex,
selectedGroups: getSelectedGroups(),
};
useEffect(() => {
set(getSelectedGroups());
}, [selectedPartitionIndex, userPartitionInfo]);
const validationSchema = Yup.object().shape({
isTimeLimited: Yup.boolean(),
isProctoredExam: Yup.boolean(),
isPracticeExam: Yup.boolean(),
isOnboardingExam: Yup.boolean(),
examReviewRules: Yup.string(),
defaultTimeLimitMinutes: Yup.number().nullable(true),
hideAfterDueState: Yup.boolean(),
showCorrectness: Yup.string().required(),
isPrereq: Yup.boolean(),
prereqUsageKey: Yup.string().nullable(true),
prereqMinScore: Yup.number().min(
0,
intl.formatMessage(messages.minScoreError),
).max(
100,
intl.formatMessage(messages.minScoreError),
).nullable(true),
prereqMinCompletion: Yup.number().min(
0,
intl.formatMessage(messages.minScoreError),
).max(
100,
intl.formatMessage(messages.minScoreError),
).nullable(true),
selectedPartitionIndex: Yup.number().integer(),
selectedGroups: Yup.array().of(Yup.string()),
});
useEffect(() => {
setReleaseDate(sectionStartDate);
}, [sectionStartDate]);
const isSubsection = category === COURSE_BLOCK_NAMES.sequential.id;
useEffect(() => {
setGraderType(format == null ? 'Not Graded' : format);
}, [format]);
useEffect(() => {
setDueDateState(due == null ? '' : due);
}, [due]);
useEffect(() => {
setIsTimeLimitedState(isTimeLimited);
}, [isTimeLimited]);
useEffect(() => {
setDefaultTimeLimitMin(defaultTimeLimitMinutes);
}, [defaultTimeLimitMinutes]);
useEffect(() => {
setHideAfterDueState(hideAfterDue === undefined ? false : hideAfterDue);
}, [hideAfterDue]);
useEffect(() => {
setShowCorrectnessState(showCorrectness);
}, [showCorrectness]);
useEffect(() => {
setIsVisibleToStaffOnly(visibilityState === VisibilityTypes.STAFF_ONLY);
}, [visibilityState]);
useEffect(() => {
const visibilityUnchanged = isVisibleToStaffOnly === (visibilityState === VisibilityTypes.STAFF_ONLY);
const graderTypeUnchanged = graderType === (format == null ? 'Not Graded' : format);
const dueDateUnchanged = dueDateState === (due == null ? '' : due);
const hideAfterDueUnchanged = hideAfterDueState === (hideAfterDue === undefined ? false : hideAfterDue);
const selectedGroupsUnchanged = selectedGroups.sort().join(',') === getSelectedGroups().sort().join(',');
// handle the case of unrestricting access
const accessRestrictionUnchanged = selectedPartitionIndex !== -1
|| userPartitionInfo?.selectedPartitionIndex === -1;
setSaveButtonDisabled(
visibilityUnchanged
&& releaseDate === sectionStartDate
&& dueDateUnchanged
&& isTimeLimitedState === isTimeLimited
&& defaultTimeLimitMin === defaultTimeLimitMinutes
&& hideAfterDueUnchanged
&& showCorrectnessState === showCorrectness
&& graderTypeUnchanged
&& selectedGroupsUnchanged
&& accessRestrictionUnchanged,
);
}, [
releaseDate,
isVisibleToStaffOnly,
dueDateState,
isTimeLimitedState,
defaultTimeLimitMin,
hideAfterDueState,
showCorrectnessState,
graderType,
selectedGroups,
]);
const handleSave = () => {
const handleSave = (data) => {
const groupAccess = {};
switch (category) {
case COURSE_BLOCK_NAMES.chapter.id:
onConfigureSubmit(isVisibleToStaffOnly, releaseDate);
onConfigureSubmit(data.isVisibleToStaffOnly, data.releaseDate);
break;
case COURSE_BLOCK_NAMES.sequential.id:
onConfigureSubmit(
isVisibleToStaffOnly,
releaseDate,
graderType === 'Not Graded' ? 'notgraded' : graderType,
dueDateState,
isTimeLimitedState,
defaultTimeLimitMin,
hideAfterDueState,
showCorrectnessState,
data.isVisibleToStaffOnly,
data.releaseDate,
data.graderType,
data.dueDate,
data.isTimeLimited,
data.isProctoredExam,
data.isOnboardingExam,
data.isPracticeExam,
data.examReviewRules,
data.isTimeLimited ? data.defaultTimeLimitMinutes : 0,
data.hideAfterDue,
data.showCorrectness,
data.isPrereq,
data.prereqUsageKey,
data.prereqMinScore,
data.prereqMinCompletion,
);
break;
case COURSE_BLOCK_NAMES.vertical.id:
// groupAccess should be {partitionId: [group1, group2]} or {} if selectedPartitionIndex === -1
if (selectedPartitionIndex >= 0) {
const partitionId = userPartitionInfo.selectablePartitions[selectedPartitionIndex].id;
groupAccess[partitionId] = selectedGroups.map(g => parseInt(g, 10));
if (data.selectedPartitionIndex >= 0) {
const partitionId = userPartitionInfo.selectablePartitions[data.selectedPartitionIndex].id;
groupAccess[partitionId] = data.selectedGroups.map(g => parseInt(g, 10));
}
onConfigureSubmit(isVisibleToStaffOnly, groupAccess);
onConfigureSubmit(data.isVisibleToStaffOnly, groupAccess);
break;
default:
break;
}
};
const renderModalBody = () => {
const renderModalBody = (values, setFieldValue) => {
switch (category) {
case COURSE_BLOCK_NAMES.chapter.id:
return (
<Tabs>
<Tab eventKey="basic" title={intl.formatMessage(messages.basicTabTitle)}>
<BasicTab
releaseDate={releaseDate}
setReleaseDate={setReleaseDate}
values={values}
setFieldValue={setFieldValue}
isSubsection={isSubsection}
graderType={graderType}
courseGraders={courseGraders === 'undefined' ? [] : courseGraders}
setGraderType={setGraderType}
dueDate={dueDateState}
setDueDate={setDueDateState}
/>
</Tab>
<Tab eventKey="visibility" title={intl.formatMessage(messages.visibilityTabTitle)}>
<VisibilityTab
values={values}
setFieldValue={setFieldValue}
category={category}
isSubsection={isSubsection}
isVisibleToStaffOnly={isVisibleToStaffOnly}
setIsVisibleToStaffOnly={setIsVisibleToStaffOnly}
showWarning={visibilityState === VisibilityTypes.STAFF_ONLY}
hideAfterDue={hideAfterDueState}
setHideAfterDue={setHideAfterDueState}
showCorrectness={showCorrectnessState}
setShowCorrectness={setShowCorrectnessState}
/>
</Tab>
</Tabs>
@@ -213,35 +200,33 @@ const ConfigureModal = ({
<Tabs>
<Tab eventKey="basic" title={intl.formatMessage(messages.basicTabTitle)}>
<BasicTab
releaseDate={releaseDate}
setReleaseDate={setReleaseDate}
values={values}
setFieldValue={setFieldValue}
isSubsection={isSubsection}
graderType={graderType}
courseGraders={courseGraders === 'undefined' ? [] : courseGraders}
setGraderType={setGraderType}
dueDate={dueDateState}
setDueDate={setDueDateState}
/>
</Tab>
<Tab eventKey="visibility" title={intl.formatMessage(messages.visibilityTabTitle)}>
<VisibilityTab
values={values}
setFieldValue={setFieldValue}
category={category}
isSubsection={isSubsection}
isVisibleToStaffOnly={isVisibleToStaffOnly}
setIsVisibleToStaffOnly={setIsVisibleToStaffOnly}
showWarning={visibilityState === VisibilityTypes.STAFF_ONLY}
hideAfterDue={hideAfterDueState}
setHideAfterDue={setHideAfterDueState}
showCorrectness={showCorrectnessState}
setShowCorrectness={setShowCorrectnessState}
/>
</Tab>
<Tab eventKey="advanced" title={intl.formatMessage(messages.advancedTabTitle)}>
<AdvancedTab
isTimeLimited={isTimeLimitedState}
setIsTimeLimited={setIsTimeLimitedState}
defaultTimeLimit={defaultTimeLimitMin}
setDefaultTimeLimit={setDefaultTimeLimitMin}
values={values}
setFieldValue={setFieldValue}
prereqs={prereqs}
releasedToStudents={releasedToStudents}
wasExamEverLinkedWithExternal={wasExamEverLinkedWithExternal}
enableProctoredExams={enableProctoredExams}
supportsOnboarding={supportsOnboarding}
showReviewRules={showReviewRules}
wasProctoredExam={isProctoredExam}
onlineProctoringRules={onlineProctoringRules}
/>
</Tab>
</Tabs>
@@ -249,15 +234,10 @@ const ConfigureModal = ({
case COURSE_BLOCK_NAMES.vertical.id:
return (
<UnitTab
isVisibleToStaffOnly={isVisibleToStaffOnly}
setIsVisibleToStaffOnly={setIsVisibleToStaffOnly}
values={values}
setFieldValue={setFieldValue}
showWarning={visibilityState === VisibilityTypes.STAFF_ONLY && !ancestorHasStaffLock}
userPartitionInfo={userPartitionInfo}
selectedPartitionIndex={selectedPartitionIndex}
setSelectedPartitionIndex={setSelectedPartitionIndex}
selectedGroups={selectedGroups}
add={add}
remove={remove}
/>
);
default:
@@ -266,36 +246,51 @@ const ConfigureModal = ({
};
return (
isOpen && (
<ModalDialog
className="configure-modal"
isOpen={isOpen}
onClose={onClose}
hasCloseButton
isFullscreenOnMobile
>
<div data-testid="configure-modal">
<ModalDialog.Header className="configure-modal__header">
<ModalDialog.Title>
{intl.formatMessage(messages.title, { title: displayName })}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body className="configure-modal__body">
{renderModalBody(category)}
</ModalDialog.Body>
<ModalDialog.Footer className="pt-1">
<ActionRow>
<ModalDialog.CloseButton variant="tertiary">
{intl.formatMessage(messages.cancelButton)}
</ModalDialog.CloseButton>
<Button data-testid="configure-save-button" onClick={handleSave} disabled={saveButtonDisabled}>
{intl.formatMessage(messages.saveButton)}
</Button>
</ActionRow>
</ModalDialog.Footer>
</div>
</ModalDialog>
)
<ModalDialog
className="configure-modal"
size="lg"
isOpen={isOpen}
onClose={onClose}
hasCloseButton
isFullscreenOnMobile
>
<div data-testid="configure-modal">
<ModalDialog.Header className="configure-modal__header">
<ModalDialog.Title>
{intl.formatMessage(messages.title, { title: displayName })}
</ModalDialog.Title>
</ModalDialog.Header>
<Formik
initialValues={initialValues}
onSubmit={handleSave}
validationSchema={validationSchema}
validateOnBlur
validateOnChange
>
{({
values, handleSubmit, dirty, isValid, setFieldValue,
}) => (
<>
<ModalDialog.Body className="configure-modal__body">
<Form.Group size="sm" className="form-field">
{renderModalBody(values, setFieldValue)}
</Form.Group>
</ModalDialog.Body>
<ModalDialog.Footer className="pt-1">
<ActionRow>
<ModalDialog.CloseButton variant="tertiary">
{intl.formatMessage(messages.cancelButton)}
</ModalDialog.CloseButton>
<Button data-testid="configure-save-button" onClick={handleSubmit} disabled={!(dirty && isValid)}>
{intl.formatMessage(messages.saveButton)}
</Button>
</ActionRow>
</ModalDialog.Footer>
</>
)}
</Formik>
</div>
</ModalDialog>
);
};

10
src/course-outline/configure-modal/ConfigureModal.scss
View File

@@ -1,8 +1,14 @@
.configure-modal {
max-width: 33.6875rem;
.configure-modal__header {
padding-top: 1.5rem;
position: static;
}
.w-7rem {
width: 7.2rem;
}
.mw-1-25rem {
min-width: 1.25rem;
}
}

117
src/course-outline/configure-modal/PrereqSettings.jsx Normal file
View File

@@ -0,0 +1,117 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Form } from '@edx/paragon';
import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n';
import messages from './messages';
import FormikControl from '../../generic/FormikControl';
const PrereqSettings = ({
values,
setFieldValue,
prereqs,
}) => {
const intl = useIntl();
const {
isPrereq,
prereqUsageKey,
prereqMinScore,
prereqMinCompletion,
} = values;
if (isPrereq === null || isPrereq === undefined) {
return null;
}
const handleSelectChange = (e) => {
setFieldValue('prereqUsageKey', e.target.value);
};
const prereqSelectionForm = () => (
<>
<h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.limitAccessTitle} /></h5>
<hr />
<Form>
<Form.Text><FormattedMessage {...messages.limitAccessDescription} /></Form.Text>
<Form.Group controlId="prereqForm.select">
<Form.Label>
{intl.formatMessage(messages.prerequisiteSelectLabel)}
</Form.Label>
<Form.Control
as="select"
defaultValue={prereqUsageKey}
onChange={handleSelectChange}
role="combobox"
>
<option value="">
{intl.formatMessage(messages.noPrerequisiteOption)}
</option>
{prereqs.map((prereqOption) => (
<option
key={prereqOption.blockUsageKey}
value={prereqOption.blockUsageKey}
>
{prereqOption.blockDisplayName}
</option>
))}
</Form.Control>
</Form.Group>
{prereqUsageKey && (
<>
<FormikControl
name="prereqMinScore"
value={prereqMinScore}
label={<Form.Label>{intl.formatMessage(messages.minScoreLabel)}</Form.Label>}
controlClassName="text-right"
controlClasses="w-7rem"
type="number"
trailingElement="%"
/>
<FormikControl
name="prereqMinCompletion"
value={prereqMinCompletion}
label={<Form.Label>{intl.formatMessage(messages.minCompletionLabel)}</Form.Label>}
controlClassName="text-right"
controlClasses="w-7rem"
type="number"
trailingElement="%"
/>
</>
)}
</Form>
</>
);
const handleCheckboxChange = e => setFieldValue('isPrereq', e.target.checked);
return (
<>
{prereqs.length > 0 && prereqSelectionForm()}
<h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.prereqTitle} /></h5>
<hr />
<Form.Checkbox checked={isPrereq} onChange={handleCheckboxChange}>
<FormattedMessage {...messages.prereqCheckboxLabel} />
</Form.Checkbox>
</>
);
};
PrereqSettings.defaultProps = {
prereqs: [],
};
PrereqSettings.propTypes = {
values: PropTypes.shape({
isPrereq: PropTypes.bool,
prereqUsageKey: PropTypes.string,
prereqMinScore: PropTypes.number,
prereqMinCompletion: PropTypes.number,
}).isRequired,
prereqs: PropTypes.arrayOf(PropTypes.shape({
blockUsageKey: PropTypes.string.isRequired,
blockDisplayName: PropTypes.string.isRequired,
})),
setFieldValue: PropTypes.func.isRequired,
};
export default injectIntl(PrereqSettings);

90
src/course-outline/configure-modal/UnitTab.jsx
View File

@@ -1,36 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Alert, Form } from '@edx/paragon';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
FormattedMessage, injectIntl, useIntl,
} from '@edx/frontend-platform/i18n';
import { Field } from 'formik';
import messages from './messages';
const UnitTab = ({
intl,
isVisibleToStaffOnly,
setIsVisibleToStaffOnly,
values,
setFieldValue,
showWarning,
userPartitionInfo,
setSelectedPartitionIndex,
selectedPartitionIndex,
selectedGroups,
add,
remove,
}) => {
const intl = useIntl();
const {
isVisibleToStaffOnly,
selectedPartitionIndex,
} = values;
const handleChange = (e) => {
setIsVisibleToStaffOnly(e.target.checked);
setFieldValue('isVisibleToStaffOnly', e.target.checked);
};
const handleSelect = (e) => {
setSelectedPartitionIndex(parseInt(e.target.value, 10));
setFieldValue('selectedPartitionIndex', parseInt(e.target.value, 10));
};
const handleCheckBoxChange = e => {
if (e.target.checked) {
add(e.target.value);
} else {
remove(e.target.value);
}
};
return (
<>
<h3 className="mt-3"><FormattedMessage {...messages.unitVisibility} /></h3>
@@ -39,7 +36,7 @@ const UnitTab = ({
<FormattedMessage {...messages.hideFromLearners} />
</Form.Checkbox>
{showWarning && (
<Alert variant="warning">
<Alert className="mt-2" variant="warning">
<FormattedMessage {...messages.unitVisibilityWarning} />
</Alert>
)}
@@ -71,16 +68,33 @@ const UnitTab = ({
</Form.Control>
{selectedPartitionIndex >= 0 && userPartitionInfo.selectablePartitions.length && (
<Form.Group>
<Form.Group controlId="select-groups-checkboxes">
<Form.Label><FormattedMessage {...messages.unitSelectGroup} /></Form.Label>
<Form.CheckboxSet
name="groups"
onChange={handleCheckBoxChange}
value={selectedGroups}
<div
role="group"
className="d-flex flex-column"
data-testid="group-checkboxes"
aria-labelledby="select-groups-checkboxes"
>
{userPartitionInfo.selectablePartitions[selectedPartitionIndex].groups.map((group) => (<Form.Checkbox key={group.id} value={`${group.id}`}>{group.name}</Form.Checkbox>))}
</Form.CheckboxSet>
{userPartitionInfo.selectablePartitions[selectedPartitionIndex].groups.map((group) => (
<Form.Group
key={group.id}
className="pgn__form-checkbox"
>
<Field
as={Form.Control}
className="flex-grow-0 mr-1"
controlClassName="pgn__form-checkbox-input mr-1"
type="checkbox"
value={`${group.id}`}
name="selectedGroups"
/>
<Form.Label isInline>
{group.name}
</Form.Label>
</Form.Group>
))}
</div>
</Form.Group>
)}
</Form.Group>
@@ -90,9 +104,14 @@ const UnitTab = ({
};
UnitTab.propTypes = {
intl: intlShape.isRequired,
isVisibleToStaffOnly: PropTypes.bool.isRequired,
setIsVisibleToStaffOnly: PropTypes.func.isRequired,
values: PropTypes.shape({
isVisibleToStaffOnly: PropTypes.bool.isRequired,
selectedPartitionIndex: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
}).isRequired,
setFieldValue: PropTypes.func.isRequired,
showWarning: PropTypes.bool.isRequired,
userPartitionInfo: PropTypes.shape({
selectablePartitions: PropTypes.arrayOf(PropTypes.shape({
@@ -106,20 +125,9 @@ UnitTab.propTypes = {
name: PropTypes.string.isRequired,
scheme: PropTypes.string.isRequired,
}).isRequired).isRequired,
selectedGroupsLabel: PropTypes.string.isRequired,
selectedGroupsLabel: PropTypes.string,
selectedPartitionIndex: PropTypes.number.isRequired,
}).isRequired,
setSelectedPartitionIndex: PropTypes.func.isRequired,
selectedPartitionIndex: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
selectedGroups: PropTypes.arrayOf(PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
])).isRequired,
add: PropTypes.func.isRequired,
remove: PropTypes.func.isRequired,
};
export default injectIntl(UnitTab);

60
src/course-outline/configure-modal/VisibilityTab.jsx
View File

@@ -6,20 +6,23 @@ import messages from './messages';
import { COURSE_BLOCK_NAMES } from '../constants';
const VisibilityTab = ({
values,
setFieldValue,
category,
isVisibleToStaffOnly,
setIsVisibleToStaffOnly,
showWarning,
isSubsection,
hideAfterDue,
setHideAfterDue,
showCorrectness,
setShowCorrectness,
}) => {
const intl = useIntl();
const visibilityTitle = COURSE_BLOCK_NAMES[category]?.name;
const {
isVisibleToStaffOnly,
hideAfterDue,
showCorrectness,
} = values;
const handleChange = (e) => {
setIsVisibleToStaffOnly(e.target.checked);
setFieldValue('isVisibleToStaffOnly', e.target.checked);
};
const getVisibilityValue = () => {
@@ -35,19 +38,19 @@ const VisibilityTab = ({
const visibilityChanged = (e) => {
const selected = e.target.value;
if (selected === 'hide') {
setIsVisibleToStaffOnly(true);
setHideAfterDue(false);
setFieldValue('isVisibleToStaffOnly', true);
setFieldValue('hideAfterDue', false);
} else if (selected === 'hideDue') {
setIsVisibleToStaffOnly(false);
setHideAfterDue(true);
setFieldValue('isVisibleToStaffOnly', false);
setFieldValue('hideAfterDue', true);
} else {
setIsVisibleToStaffOnly(false);
setHideAfterDue(false);
setFieldValue('isVisibleToStaffOnly', false);
setFieldValue('hideAfterDue', false);
}
};
const correctnessChanged = (e) => {
setShowCorrectness(e.target.value);
setFieldValue('showCorrectness', e.target.value);
};
return (
@@ -77,6 +80,11 @@ const VisibilityTab = ({
</Form.Radio>
<Form.Text><FormattedMessage {...messages.hideEntireSubsectionDescription} /></Form.Text>
</Form.RadioSet>
{showWarning && (
<Alert className="mt-2" variant="warning">
<FormattedMessage {...messages.subsectionVisibilityWarning} />
</Alert>
)}
<h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.assessmentResultsVisibility} /></h5>
<Form.RadioSet
name="assessmentResultsVisibility"
@@ -103,29 +111,25 @@ const VisibilityTab = ({
</Form.Checkbox>
)
}
{showWarning && (
<>
<hr />
<Alert variant="warning">
<FormattedMessage {...messages.sectionVisibilityWarning} />
</Alert>
</>
{showWarning && !isSubsection && (
<Alert className="mt-2" variant="warning">
<FormattedMessage {...messages.sectionVisibilityWarning} />
</Alert>
)}
</>
);
};
VisibilityTab.propTypes = {
values: PropTypes.shape({
isVisibleToStaffOnly: PropTypes.bool.isRequired,
hideAfterDue: PropTypes.bool.isRequired,
showCorrectness: PropTypes.string.isRequired,
}).isRequired,
setFieldValue: PropTypes.func.isRequired,
category: PropTypes.string.isRequired,
isVisibleToStaffOnly: PropTypes.bool.isRequired,
showWarning: PropTypes.bool.isRequired,
setIsVisibleToStaffOnly: PropTypes.func.isRequired,
isSubsection: PropTypes.bool.isRequired,
hideAfterDue: PropTypes.bool.isRequired,
setHideAfterDue: PropTypes.func.isRequired,
showCorrectness: PropTypes.string.isRequired,
setShowCorrectness: PropTypes.func.isRequired,
};
export default injectIntl(VisibilityTab);

98
src/course-outline/configure-modal/messages.js
View File

@@ -9,6 +9,10 @@ const messages = defineMessages({
id: 'course-authoring.course-outline.configure-modal.basic-tab.title',
defaultMessage: 'Basic',
},
notGradedTypeOption: {
id: 'course-authoring.course-outline.configure-modal.basic-tab.notGradedTypeOption',
defaultMessage: 'Not Graded',
},
releaseDateAndTime: {
id: 'course-authoring.course-outline.configure-modal.basic-tab.release-date-and-time',
defaultMessage: 'Release Date and Time',
@@ -43,12 +47,16 @@ const messages = defineMessages({
},
sectionVisibilityWarning: {
id: 'course-authoring.course-outline.configure-modal.visibility-tab.section-visibility-warning',
defaultMessage: 'If you make this section visible to learners, learners will be able to see its content after the release date has passed and you have published the unit. Only units that are explicitly hidden from learners will remain hidden after you clear this option for the section.',
defaultMessage: 'If you make this section visible to learners, learners will be able to see its content after the release date has passed and you have published the section. Only units that are explicitly hidden from learners will remain hidden after you clear this option for the section.',
},
unitVisibilityWarning: {
id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-visibility-warning',
defaultMessage: 'If the unit was previously published and released to learners, any changes you made to the unit when it was hidden will now be visible to learners.',
},
subsectionVisibilityWarning: {
id: 'course-authoring.course-outline.configure-modal.unit-tab.subsection-visibility-warning',
defaultMessage: 'If you select an option other than "Hide entire subsection", published units in this subsection will become available to learners unless they are explicitly hidden.',
},
unitSelectGroup: {
id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-select-group',
defaultMessage: 'Select one or more groups:',
@@ -157,6 +165,30 @@ const messages = defineMessages({
id: 'course-authoring.course-outline.configure-modal.advanced-tab.timed-description',
defaultMessage: 'Use a timed exam to limit the time learners can spend on problems in this subsection. Learners must submit answers before the time expires. You can allow additional time for individual learners through the instructor Dashboard.',
},
proctoredExam: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.proctoredExam',
defaultMessage: 'Proctored',
},
proctoredExamDescription: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.timed-description',
defaultMessage: 'Proctored exams are timed and they record video of each learner taking the exam. The videos are then reviewed to ensure that learners follow all examination rules. Please note that setting this exam as proctored will change the visibility settings to "Hide content after due date."',
},
onboardingExam: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.onboardingExam',
defaultMessage: 'Onboarding',
},
onboardingExamDescription: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.timed-description',
defaultMessage: 'Use Onboarding to introduce learners to proctoring, verify their identity, and create an onboarding profile. Learners must complete the onboarding profile step prior to taking a proctored exam. Profile reviews take 2+ business days.',
},
practiceExam: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.practiceExam',
defaultMessage: 'Practice proctored',
},
practiceExamDescription: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.timed-description',
defaultMessage: 'Use a practice proctored exam to introduce learners to the proctoring tools and processes. Results of a practice exam do not affect a learner\'s grade.',
},
advancedTabTitle: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.title',
defaultMessage: 'Advanced',
@@ -169,6 +201,70 @@ const messages = defineMessages({
id: 'course-authoring.course-outline.configure-modal.advanced-tab.time-limit-description',
defaultMessage: 'Select a time allotment for the exam. If it is over 24 hours, type in the amount of time. You can grant individual learners extra time to complete the exam through the Instructor Dashboard.',
},
prereqTitle: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.prereqTitle',
defaultMessage: 'Use as a Prerequisite',
},
prereqCheckboxLabel: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.prereqCheckboxLabel',
defaultMessage: 'Make this subsection available as a prerequisite to other content',
},
limitAccessTitle: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.limitAccessTitle',
defaultMessage: 'Limit access',
},
limitAccessDescription: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.limitAccessDescription',
defaultMessage: 'Select a prerequisite subsection and enter a minimum score percentage and minimum completion percentage to limit access to this subsection. Allowed values are 0-100',
},
noPrerequisiteOption: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.noPrerequisiteOption',
defaultMessage: 'No prerequisite',
},
prerequisiteSelectLabel: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.prerequisiteSelectLabel',
defaultMessage: 'Prerequisite:',
},
minScoreLabel: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.minScoreLabel',
defaultMessage: 'Minimum score:',
},
minCompletionLabel: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.minCompletionLabel',
defaultMessage: 'Minimum completion:',
},
minScoreError: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.minScoreError',
defaultMessage: 'The minimum score percentage must be a whole number between 0 and 100.',
},
minCompletionError: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.minCompletionError',
defaultMessage: 'The minimum completion percentage must be a whole number between 0 and 100.',
},
proctoredExamLockedAndisNotProctoredExamAlert: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.proctoredExamLockedAndisNotProctoredExamAlert',
defaultMessage: 'This subsection was released to learners as a proctored exam, but was reverted back to a basic or timed exam. You may not configure it as a proctored exam now. Contact edX Support for assistance.',
},
proctoredExamLockedAndisProctoredExamAlert: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.proctoredExamLockedAndisProctoredExamAlert',
defaultMessage: 'This proctored exam has been released to learners. You may not convert it to another type of special exam. You may revert this subsection back to being a basic exam by selecting \'None\', or a timed exam, but you will NOT be able to configure it as a proctored exam in the future.',
},
reviewRulesLabel: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.reviewRulesLabel',
defaultMessage: 'Review rules',
},
reviewRulesDescription: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.reviewRulesDescription',
defaultMessage: 'Specify any rules or rule exceptions that the proctoring review team should enforce when reviewing the videos. For example, you could specify that calculators are allowed. These specified rules are visible to learners before the learners start the exam.',
},
reviewRulesDescriptionWithLink: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.reviewRulesDescriptionWithLink',
defaultMessage: 'Specify any rules or rule exceptions that the proctoring review team should enforce when reviewing the videos. For example, you could specify that calculators are allowed. These specified rules are visible to learners before the learners start the exam, along with the {hyperlink}.',
},
reviewRulesDescriptionLinkText: {
id: 'course-authoring.course-outline.configure-modal.advanced-tab.reviewRulesDescriptionLinkText',
defaultMessage: 'general proctored exam rules',
},
});
export default messages;

64
src/course-outline/data/api.js
View File

@@ -243,11 +243,19 @@ export async function configureCourseSection(sectionId, isVisibleToStaffOnly, st
* @param {string} isVisibleToStaffOnly
* @param {string} releaseDate
* @param {string} graderType
* @param {string} dueDateState
* @param {string} isTimeLimitedState
* @param {string} defaultTimeLimitMin
* @param {string} hideAfterDueState
* @param {string} showCorrectnessState
* @param {string} dueDate
* @param {boolean} isProctoredExam,
* @param {boolean} isOnboardingExam,
* @param {boolean} isPracticeExam,
* @param {string} examReviewRules,
* @param {boolean} isTimeLimited
* @param {number} defaultTimeLimitMin
* @param {string} hideAfterDue
* @param {string} showCorrectness
* @param {boolean} isPrereq,
* @param {string} prereqUsageKey,
* @param {number} prereqMinScore,
* @param {number} prereqMinCompletion,
* @returns {Promise<Object>}
*/
export async function configureCourseSubsection(
@@ -255,28 +263,40 @@ export async function configureCourseSubsection(
isVisibleToStaffOnly,
releaseDate,
graderType,
dueDateState,
isTimeLimitedState,
dueDate,
isTimeLimited,
isProctoredExam,
isOnboardingExam,
isPracticeExam,
examReviewRules,
defaultTimeLimitMin,
hideAfterDueState,
showCorrectnessState,
hideAfterDue,
showCorrectness,
isPrereq,
prereqUsageKey,
prereqMinScore,
prereqMinCompletion,
) {
const { data } = await getAuthenticatedHttpClient()
.post(getCourseItemApiUrl(itemId), {
publish: 'republish',
graderType,
isPrereq,
prereqUsageKey,
prereqMinScore,
prereqMinCompletion,
metadata: {
// The backend expects metadata.visible_to_staff_only to either true or null
visible_to_staff_only: isVisibleToStaffOnly ? true : null,
due: dueDateState,
hide_after_due: hideAfterDueState,
show_correctness: showCorrectnessState,
is_practice_exam: false,
is_time_limited: isTimeLimitedState,
exam_review_rules: '',
is_proctored_enabled: false,
due: dueDate,
hide_after_due: hideAfterDue,
show_correctness: showCorrectness,
is_practice_exam: isPracticeExam,
is_time_limited: isTimeLimited,
is_proctored_enabled: isProctoredExam || isPracticeExam || isOnboardingExam,
exam_review_rules: examReviewRules,
default_time_limit_minutes: defaultTimeLimitMin,
is_onboarding_exam: false,
is_onboarding_exam: isOnboardingExam,
start: releaseDate,
},
});
@@ -442,3 +462,13 @@ export async function pasteBlock(parentLocator) {
return data;
}
/**
* Dismiss notification
* @param {string} url
* @returns void
*/
export async function dismissNotification(url) {
await getAuthenticatedHttpClient()
.delete(url);
}

1
src/course-outline/data/selectors.js
View File

@@ -9,3 +9,4 @@ export const getCurrentSubsection = (state) => state.courseOutline.currentSubsec
export const getCourseActions = (state) => state.courseOutline.actions;
export const getCustomRelativeDatesActiveFlag = (state) => state.courseOutline.isCustomRelativeDatesActive;
export const getInitialUserClipboard = (state) => state.courseOutline.initialUserClipboard;
export const getProctoredExamsFlag = (state) => state.courseOutline.enableProctoredExams;

2
src/course-outline/data/slice.js
View File

@@ -44,6 +44,7 @@ const slice = createSlice({
sourceContexttitle: null,
sourceEditUrl: null,
},
enableProctoredExams: false,
},
reducers: {
fetchOutlineIndexSuccess: (state, { payload }) => {
@@ -51,6 +52,7 @@ const slice = createSlice({
state.sectionsList = payload.courseStructure?.childInfo?.children || [];
state.isCustomRelativeDatesActive = payload.isCustomRelativeDatesActive;
state.initialUserClipboard = payload.initialUserClipboard;
state.enableProctoredExams = payload.courseStructure?.enableProctoredExams;
},
updateOutlineIndexLoadingStatus: (state, { payload }) => {
state.loadingStatus = {

47
src/course-outline/data/thunk.js
View File

@@ -30,6 +30,7 @@ import {
setCourseItemOrderList,
copyBlockToClipboard,
pasteBlock,
dismissNotification,
} from './api';
import {
addSection,
@@ -261,11 +262,19 @@ export function configureCourseSubsectionQuery(
isVisibleToStaffOnly,
releaseDate,
graderType,
dueDateState,
isTimeLimitedState,
dueDate,
isTimeLimited,
isProctoredExam,
isOnboardingExam,
isPracticeExam,
examReviewRules,
defaultTimeLimitMin,
hideAfterDueState,
showCorrectnessState,
hideAfterDue,
showCorrectness,
isPrereq,
prereqUsageKey,
prereqMinScore,
prereqMinCompletion,
) {
return async (dispatch) => {
dispatch(configureCourseItemQuery(
@@ -275,11 +284,19 @@ export function configureCourseSubsectionQuery(
isVisibleToStaffOnly,
releaseDate,
graderType,
dueDateState,
isTimeLimitedState,
dueDate,
isTimeLimited,
isProctoredExam,
isOnboardingExam,
isPracticeExam,
examReviewRules,
defaultTimeLimitMin,
hideAfterDueState,
showCorrectnessState,
hideAfterDue,
showCorrectness,
isPrereq,
prereqUsageKey,
prereqMinScore,
prereqMinCompletion,
),
));
};
@@ -607,3 +624,17 @@ export function pasteClipboardContent(parentLocator, sectionId) {
}
};
}
export function dismissNotificationQuery(url) {
return async (dispatch) => {
dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
try {
await dismissNotification(url).then(async () => {
dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
});
} catch (error) {
dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
}
};
}

30
src/course-outline/hooks.jsx
View File

@@ -52,13 +52,26 @@ import {
setUnitOrderListQuery,
setClipboardContent,
pasteClipboardContent,
dismissNotificationQuery,
} from './data/thunk';
const useCourseOutline = ({ courseId }) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { reindexLink, courseStructure, lmsLink } = useSelector(getOutlineIndexData);
const {
reindexLink,
courseStructure,
lmsLink,
notificationDismissUrl,
discussionsSettings,
discussionsIncontextFeedbackUrl,
discussionsIncontextLearnmoreUrl,
deprecatedBlocksInfo,
proctoringErrors,
mfeProctoredExamSettingsUrl,
advanceSettingsUrl,
} = useSelector(getOutlineIndexData);
const { outlineIndexLoadingStatus, reIndexLoadingStatus } = useSelector(getLoadingStatus);
const statusBarData = useSelector(getStatusBarData);
const savingStatus = useSelector(getSavingStatus);
@@ -100,7 +113,7 @@ const useCourseOutline = ({ courseId }) => {
const getUnitUrl = (locator) => {
if (getConfig().ENABLE_UNIT_PAGE === 'true') {
return `/course/container/${locator}`;
return `/course/${courseId}/container/${locator}`;
}
return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
};
@@ -239,6 +252,10 @@ const useCourseOutline = ({ courseId }) => {
dispatch(setUnitOrderListQuery(sectionId, subsectionId, unitListIds, restoreCallback));
};
const handleDismissNotification = () => {
dispatch(dismissNotificationQuery(notificationDismissUrl));
};
useEffect(() => {
dispatch(fetchCourseOutlineIndexQuery(courseId));
dispatch(fetchCourseBestPracticesQuery({ courseId }));
@@ -306,6 +323,15 @@ const useCourseOutline = ({ courseId }) => {
handleUnitDragAndDrop,
handleCopyToClipboardClick,
handlePasteClipboardClick,
notificationDismissUrl,
discussionsSettings,
discussionsIncontextFeedbackUrl,
discussionsIncontextLearnmoreUrl,
deprecatedBlocksInfo,
proctoringErrors,
mfeProctoredExamSettingsUrl,
handleDismissNotification,
advanceSettingsUrl,
};
};

4
src/course-outline/messages.js
View File

@@ -33,10 +33,6 @@ const messages = defineMessages({
id: 'course-authoring.course-outline.section-list.button.new-section',
defaultMessage: 'New section',
},
alertFailedGeneric: {
id: 'course-authoring.course-outline.general.alert.error.description',
defaultMessage: 'Unable to {actionName} {type}. Please try again.',
},
});
export default messages;

283
src/course-outline/page-alerts/PageAlerts.jsx Normal file
View File

@@ -0,0 +1,283 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { getConfig } from '@edx/frontend-platform';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { ErrorAlert } from '@edx/frontend-lib-content-components';
import {
Campaign as CampaignIcon,
InfoOutline as InfoOutlineIcon,
Warning as WarningIcon,
} from '@edx/paragon/icons';
import { Alert, Button, Hyperlink } from '@edx/paragon';
import { RequestStatus } from '../../data/constants';
import AlertMessage from '../../generic/alert-message';
import AlertProctoringError from '../../generic/AlertProctoringError';
import messages from './messages';
import advancedSettingsMessages from '../../advanced-settings/messages';
const PageAlerts = ({
notificationDismissUrl,
handleDismissNotification,
discussionsSettings,
discussionsIncontextFeedbackUrl,
discussionsIncontextLearnmoreUrl,
deprecatedBlocksInfo,
proctoringErrors,
mfeProctoredExamSettingsUrl,
advanceSettingsUrl,
savingStatus,
}) => {
const intl = useIntl();
const studioBaseUrl = getConfig().STUDIO_BASE_URL;
const [showConfigAlert, setShowConfigAlert] = useState(true);
const [showDiscussionAlert, setShowDiscussionAlert] = useState(true);
const configurationErrors = () => {
if (!notificationDismissUrl) {
return null;
}
const onDismiss = () => {
setShowConfigAlert(false);
handleDismissNotification();
};
return (
<AlertMessage
title={intl.formatMessage(messages.configurationErrorTitle)}
description={intl.formatMessage(messages.configurationErrorText)}
dismissible
show={showConfigAlert}
icon={CampaignIcon}
variant="info"
onClose={onDismiss}
/>
);
};
const discussionNotification = () => {
const { providerType } = discussionsSettings || {};
if (providerType !== 'openedx') {
return null;
}
const onDismiss = () => {
setShowDiscussionAlert(false);
};
return (
<Alert
dismissible
show={showDiscussionAlert}
icon={InfoOutlineIcon}
variant="info"
onClose={onDismiss}
actions={[
<Button
href={discussionsIncontextLearnmoreUrl}
target="_blank"
>
{intl.formatMessage(messages.discussionNotificationLearnMore)}
</Button>,
]}
>
<div className="font-weight-normal text-gray mw-md">
{intl.formatMessage(messages.discussionNotificationText, {
platformName: process.env.SITE_NAME,
})}
</div>
<Hyperlink
showLaunchIcon={false}
destination={discussionsIncontextFeedbackUrl}
target="_blank"
>
{intl.formatMessage(messages.discussionNotificationFeedback)}
</Hyperlink>
</Alert>
);
};
const deprecationWarning = () => {
const {
blocks,
deprecatedEnabledBlockTypes,
} = deprecatedBlocksInfo || {};
if (blocks?.length > 0 || deprecatedEnabledBlockTypes?.length > 0) {
return (
<Alert
icon={WarningIcon}
variant="warning"
>
<Alert.Heading>
{intl.formatMessage(messages.deprecationWarningTitle)}
</Alert.Heading>
{blocks?.length > 0 && (
<>
<div>
{intl.formatMessage(messages.deprecationWarningBlocksText)}
</div>
<ul>
{blocks.map(([parentUrl, name]) => (
<li key={parentUrl}>
<Hyperlink
destination={parentUrl}
>
{name || intl.formatMessage(messages.deprecatedComponentName)}
</Hyperlink>
</li>
))}
</ul>
</>
)}
{deprecatedEnabledBlockTypes?.length > 0 && (
<>
<div>
<FormattedMessage
{...messages.deprecationWarningDeprecatedBlockText}
values={{
platformName: process.env.SITE_NAME,
hyperlink: (
<Hyperlink
destination={`${studioBaseUrl}${deprecatedBlocksInfo.advanceSettingsUrl}`}
target="_blank"
showLaunchIcon={false}
>
<FormattedMessage
{...messages.advancedSettingLinkText}
/>
</Hyperlink>
),
}}
/>
</div>
<ul>
{deprecatedEnabledBlockTypes.map((name) => (
<li key={name}>
{name}
</li>
))}
</ul>
</>
)}
</Alert>
);
}
return null;
};
const proctoringAlerts = () => {
if (proctoringErrors?.length > 0) {
return (
<AlertProctoringError
icon={InfoOutlineIcon}
proctoringErrorsData={proctoringErrors}
aria-hidden="true"
aria-labelledby={intl.formatMessage(advancedSettingsMessages.alertProctoringAriaLabelledby)}
aria-describedby={intl.formatMessage(advancedSettingsMessages.alertProctoringDescribedby)}
>
<Alert.Heading>
{intl.formatMessage(messages.proctoringErrorTitle)}
</Alert.Heading>
<div className="mb-2">
{mfeProctoredExamSettingsUrl
? (
<FormattedMessage
{...messages.proctoringErrorText}
values={{
hyperlink: (
<Hyperlink
destination={mfeProctoredExamSettingsUrl}
target="_blank"
showLaunchIcon={false}
>
<FormattedMessage
{...messages.proctoredSettingsLinkText}
/>
</Hyperlink>
),
}}
/>
) : (
<FormattedMessage
{...messages.proctoringErrorText}
values={{
hyperlink: (
<Hyperlink
destination={`${studioBaseUrl}${advanceSettingsUrl}`}
target="_blank"
showLaunchIcon={false}
>
<FormattedMessage
{...messages.advancedSettingLinkText}
/>
</Hyperlink>
),
}}
/>
)}
</div>
</AlertProctoringError>
);
}
return null;
};
return (
<>
{configurationErrors()}
{discussionNotification()}
{deprecationWarning()}
{proctoringAlerts()}
<ErrorAlert hideHeading isError={savingStatus === RequestStatus.FAILED}>
{intl.formatMessage(messages.alertFailedGeneric, { actionName: 'save', type: 'changes' })}
</ErrorAlert>
</>
);
};
PageAlerts.defaultProps = {
notificationDismissUrl: '',
handleDismissNotification: null,
discussionsSettings: {},
discussionsIncontextFeedbackUrl: '',
discussionsIncontextLearnmoreUrl: '',
deprecatedBlocksInfo: {},
proctoringErrors: [],
mfeProctoredExamSettingsUrl: '',
advanceSettingsUrl: '',
savingStatus: '',
};
PageAlerts.propTypes = {
notificationDismissUrl: PropTypes.string,
handleDismissNotification: PropTypes.func,
discussionsSettings: PropTypes.shape({
providerType: PropTypes.string,
}),
discussionsIncontextFeedbackUrl: PropTypes.string,
discussionsIncontextLearnmoreUrl: PropTypes.string,
deprecatedBlocksInfo: PropTypes.shape({
blocks: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
deprecatedEnabledBlockTypes: PropTypes.arrayOf(PropTypes.string),
advanceSettingsUrl: PropTypes.string,
}),
proctoringErrors: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.string,
message: PropTypes.string,
model: PropTypes.shape({
deprecated: PropTypes.bool,
displayName: PropTypes.string,
help: PropTypes.string,
hideOnEnabledPublisher: PropTypes.bool,
}),
value: PropTypes.string,
})),
mfeProctoredExamSettingsUrl: PropTypes.string,
advanceSettingsUrl: PropTypes.string,
savingStatus: PropTypes.string,
};
export default PageAlerts;

155
src/course-outline/page-alerts/PageAlerts.test.jsx Normal file
View File

@@ -0,0 +1,155 @@
import React from 'react';
import { act, render, fireEvent } from '@testing-library/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { AppProvider } from '@edx/frontend-platform/react';
import { initializeMockApp, getConfig } from '@edx/frontend-platform';
import PageAlerts from './PageAlerts';
import messages from './messages';
import initializeStore from '../../store';
jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
useIntl: () => ({
formatMessage: (message) => message.defaultMessage,
}),
}));
let store;
const handleDismissNotification = jest.fn();
const pageAlertsData = {
notificationDismissUrl: '',
handleDismissNotification: null,
discussionsSettings: {},
discussionsIncontextFeedbackUrl: '',
discussionsIncontextLearnmoreUrl: '',
deprecatedBlocksInfo: {},
proctoringErrors: [],
mfeProctoredExamSettingsUrl: '',
advanceSettingsUrl: '',
savingStatus: '',
};
const renderComponent = (props) => render(
<AppProvider store={store} messages={{}}>
<IntlProvider locale="en">
<PageAlerts
{...pageAlertsData}
{...props}
/>
</IntlProvider>
</AppProvider>,
);
describe('<PageAlerts />', () => {
beforeEach(() => {
initializeMockApp({
authenticatedUser: {
userId: 3,
username: 'abc123',
administrator: true,
roles: [],
},
});
store = initializeStore();
});
it('renders null when no alerts are present', () => {
const { container } = renderComponent();
expect(container).toBeEmptyDOMElement();
});
it('renders configuration alerts', async () => {
const { queryByText } = renderComponent({
...pageAlertsData,
notificationDismissUrl: 'some-url',
handleDismissNotification,
});
expect(queryByText(messages.configurationErrorTitle.defaultMessage)).toBeInTheDocument();
const dismissBtn = queryByText('Dismiss');
await act(async () => fireEvent.click(dismissBtn));
expect(handleDismissNotification).toBeCalled();
});
it('renders discussion alerts', async () => {
const { queryByText } = renderComponent({
...pageAlertsData,
discussionsSettings: {
providerType: 'openedx',
},
discussionsIncontextFeedbackUrl: 'some-feedback-url',
discussionsIncontextLearnmoreUrl: 'some-learn-more-url',
});
expect(queryByText(messages.discussionNotificationText.defaultMessage)).toBeInTheDocument();
const learnMoreBtn = queryByText(messages.discussionNotificationLearnMore.defaultMessage);
expect(learnMoreBtn).toBeInTheDocument();
expect(learnMoreBtn).toHaveAttribute('href', 'some-learn-more-url');
const feedbackLink = queryByText(messages.discussionNotificationFeedback.defaultMessage);
expect(feedbackLink).toBeInTheDocument();
expect(feedbackLink).toHaveAttribute('href', 'some-feedback-url');
});
it('renders deprecation warning alerts', async () => {
const { queryByText } = renderComponent({
...pageAlertsData,
deprecatedBlocksInfo: {
blocks: [['url1', 'block1'], ['url2']],
deprecatedEnabledBlockTypes: ['lti', 'video'],
advanceSettingsUrl: '/some-url',
},
});
expect(queryByText(messages.deprecationWarningTitle.defaultMessage)).toBeInTheDocument();
expect(queryByText(messages.deprecationWarningBlocksText.defaultMessage)).toBeInTheDocument();
expect(queryByText('block1')).toHaveAttribute('href', 'url1');
expect(queryByText(messages.deprecatedComponentName.defaultMessage)).toHaveAttribute('href', 'url2');
const feedbackLink = queryByText(messages.advancedSettingLinkText.defaultMessage);
expect(feedbackLink).toBeInTheDocument();
expect(feedbackLink).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}/some-url`);
expect(queryByText('lti')).toBeInTheDocument();
expect(queryByText('video')).toBeInTheDocument();
});
it('renders proctoring alerts with mfe settings link', async () => {
const { queryByText } = renderComponent({
...pageAlertsData,
mfeProctoredExamSettingsUrl: 'mfe-url',
proctoringErrors: [
{ key: '1', model: { displayName: 'error 1' }, message: 'message 1' },
{ key: '2', model: { displayName: 'error 2' }, message: 'message 2' },
],
});
expect(queryByText('error 1')).toBeInTheDocument();
expect(queryByText('error 2')).toBeInTheDocument();
expect(queryByText('message 1')).toBeInTheDocument();
expect(queryByText('message 2')).toBeInTheDocument();
expect(queryByText(messages.proctoredSettingsLinkText.defaultMessage)).toHaveAttribute('href', 'mfe-url');
});
it('renders proctoring alerts without mfe settings link', async () => {
const { queryByText } = renderComponent({
...pageAlertsData,
advanceSettingsUrl: '/some-url',
proctoringErrors: [
{ key: '1', model: { displayName: 'error 1' }, message: 'message 1' },
{ key: '2', model: { displayName: 'error 2' }, message: 'message 2' },
],
});
expect(queryByText('error 1')).toBeInTheDocument();
expect(queryByText('error 2')).toBeInTheDocument();
expect(queryByText('message 1')).toBeInTheDocument();
expect(queryByText('message 2')).toBeInTheDocument();
expect(queryByText(messages.advancedSettingLinkText.defaultMessage)).toHaveAttribute(
'href',
`${getConfig().STUDIO_BASE_URL}/some-url`,
);
});
});

62
src/course-outline/page-alerts/messages.js Normal file
View File

@@ -0,0 +1,62 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
configurationErrorTitle: {
id: 'course-authoring.course-outline.page-alerts.configurationErrorTitle',
defaultMessage: 'This course was created as a re-run. Some manual configuration is needed.',
},
configurationErrorText: {
id: 'course-authoring.course-outline.page-alerts.configurationErrorText',
defaultMessage: 'No course content is currently visible, and no learners are enrolled. Be sure to review and reset all dates, including the Course Start Date; set up the course team; review course updates and other assets for dated material; and seed the discussions and wiki.',
},
discussionNotificationText: {
id: 'course-authoring.course-outline.page-alerts.discussionNotificationText',
defaultMessage: 'This course run is using an upgraded version of {platformName} discussion forum. In order to display the discussions sidebar, discussions xBlocks will no longer be visible to learners.',
},
discussionNotificationLearnMore: {
id: 'course-authoring.course-outline.page-alerts.discussionNotificationLearnMore',
defaultMessage: 'Learn more',
},
discussionNotificationFeedback: {
id: 'course-authoring.course-outline.page-alerts.discussionNotificationLearnMore',
defaultMessage: 'Share feedback',
},
deprecationWarningTitle: {
id: 'course-authoring.course-outline.page-alerts.deprecationWarningTitle',
defaultMessage: 'This course uses features that are no longer supported.',
},
deprecationWarningBlocksText: {
id: 'course-authoring.course-outline.page-alerts.deprecationWarningBlocksText',
defaultMessage: 'You must delete or replace the following components.',
},
deprecationWarningDeprecatedBlockText: {
id: 'course-authoring.course-outline.page-alerts.deprecationWarningDeprecatedBlockText',
defaultMessage: 'To avoid errors, {platformName} strongly recommends that you remove unsupported features from the course advanced settings. To do this, go to the {hyperlink}, locate the "Advanced Module List" setting, and then delete the following modules from the list.',
},
advancedSettingLinkText: {
id: 'course-authoring.course-outline.page-alerts.advancedSettingLinkText',
defaultMessage: 'Advanced Settings page',
},
deprecatedComponentName: {
id: 'course-authoring.course-outline.page-alerts.deprecatedComponentName',
defaultMessage: 'Deprecated Component',
},
proctoringErrorTitle: {
id: 'course-authoring.course-outline.page-alerts.proctoringErrorTitle',
defaultMessage: 'This course has proctored exam settings that are incomplete or invalid.',
},
proctoringErrorText: {
id: 'course-authoring.course-outline.page-alerts.proctoringErrorText',
defaultMessage: 'To update these settings go to the {hyperlink}.',
},
proctoredSettingsLinkText: {
id: 'course-authoring.course-outline.page-alerts.proctoredSettingsLinkText',
defaultMessage: 'Proctored Exam Settings page',
},
alertFailedGeneric: {
id: 'course-authoring.course-outline.page-alert.generic-error.description',
defaultMessage: 'Unable to {actionName} {type}. Please try again.',
},
});
export default messages;

16
src/course-outline/section-card/SectionCard.jsx
View File

@@ -4,14 +4,13 @@ import React, {
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Badge, Button, useToggle } from '@edx/paragon';
import { Bubble, Button, useToggle } from '@edx/paragon';
import { Add as IconAdd } from '@edx/paragon/icons';
import classNames from 'classnames';
import { setCurrentItem, setCurrentSection } from '../data/slice';
import { RequestStatus } from '../../data/constants';
import CardHeader from '../card-header/CardHeader';
import BaseTitleWithStatusBadge from '../card-header/BaseTitleWithStatusBadge';
import ConditionalSortableElement from '../drag-helper/ConditionalSortableElement';
import TitleButton from '../card-header/TitleButton';
import XBlockStatus from '../xblock-status/XBlockStatus';
@@ -123,16 +122,11 @@ const SectionCard = ({
const titleComponent = (
<TitleButton
title={displayName}
isExpanded={isExpanded}
onTitleClick={handleExpandContent}
namePrefix={namePrefix}
>
<BaseTitleWithStatusBadge
title={displayName}
status=""
namePrefix={namePrefix}
/>
</TitleButton>
/>
);
const isDraggable = actions.draggable && (actions.allowMoveUp || actions.allowMoveDown);
@@ -183,9 +177,9 @@ const SectionCard = ({
variant="tertiary"
onClick={handleOpenHighlightsModal}
>
<Badge className="mr-1 d-flex justify-content-center align-items-center highlights-badge">
<Bubble className="mr-1">
{highlights.length}
</Badge>
</Bubble>
<p className="m-0 text-black">{messages.sectionHighlightsBadge.defaultMessage}</p>
</Button>
</div>

8
src/course-outline/section-card/SectionCard.scss
View File

@@ -13,14 +13,6 @@
color: $headings-color;
}
.highlights-badge {
width: 1.5rem;
height: 1.5rem;
border-radius: 1.375rem;
font-size: 1rem;
}
.section-card__content {
margin-left: 1.7rem;
}

61
src/course-outline/status-bar/StatusBar.jsx
View File

@@ -1,8 +1,9 @@
import React, { useContext } from 'react';
import moment from 'moment/moment';
import PropTypes from 'prop-types';
import { useIntl } from '@edx/frontend-platform/i18n';
import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
import {
Button, Hyperlink, SelectMenu, MenuItem, Stack,
Button, Hyperlink, Form, Stack,
} from '@edx/paragon';
import { AppContext } from '@edx/frontend-platform/react';
@@ -37,6 +38,7 @@ const StatusBar = ({
totalCourseBestPracticesChecks,
} = checklist;
const courseReleaseDateObj = moment.utc(courseReleaseDate, 'MMM DD, YYYY at HH:mm UTC', true);
const checkListTitle = `${completedCourseLaunchChecks + completedCourseBestPracticesChecks}/${totalCourseLaunchChecks + totalCourseBestPracticesChecks}`;
const checklistDestination = () => new URL(`checklists/${courseId}`, config.STUDIO_BASE_URL).href;
const scheduleDestination = () => new URL(`settings/details/${courseId}#schedule`, config.STUDIO_BASE_URL).href;
@@ -52,18 +54,27 @@ const StatusBar = ({
}
return (
<Stack direction="horizontal" gap={3.5} className="outline-status-bar" data-testid="outline-status-bar">
<div className="outline-status-bar__item">
<Stack direction="horizontal" gap={3.5} className="d-flex align-items-stretch outline-status-bar" data-testid="outline-status-bar">
<div className="d-flex flex-column justify-content-between">
<h5>{intl.formatMessage(messages.startDateTitle)}</h5>
<Hyperlink
className="small"
destination={scheduleDestination()}
showLaunchIcon={false}
>
{courseReleaseDate}
{courseReleaseDateObj.isValid() ? (
<FormattedDate
value={courseReleaseDateObj}
year="numeric"
month="short"
day="2-digit"
hour="numeric"
minute="numeric"
/>
) : courseReleaseDate}
</Hyperlink>
</div>
<div className="outline-status-bar__item">
<div className="d-flex flex-column justify-content-between">
<h5>{intl.formatMessage(messages.pacingTypeTitle)}</h5>
<span className="small">
{isSelfPaced
@@ -71,7 +82,7 @@ const StatusBar = ({
: intl.formatMessage(messages.pacingTypeInstructorPaced)}
</span>
</div>
<div className="outline-status-bar__item mr-4">
<div className="d-flex flex-column justify-content-between">
<h5>{intl.formatMessage(messages.checklistTitle)}</h5>
<Hyperlink
className="small"
@@ -81,9 +92,9 @@ const StatusBar = ({
{checkListTitle} {intl.formatMessage(messages.checklistCompleted)}
</Hyperlink>
</div>
<div className="outline-status-bar__item ml-4">
<div className="d-flex flex-column justify-content-between">
<h5>{intl.formatMessage(messages.highlightEmailsTitle)}</h5>
<div className="d-flex align-items-end">
<div className="d-flex align-items-center">
{highlightsEnabledForMessaging ? (
<span data-testid="highlights-enabled-span" className="small">
{intl.formatMessage(messages.highlightEmailsEnabled)}
@@ -104,26 +115,31 @@ const StatusBar = ({
</div>
</div>
{videoSharingEnabled && (
<div
data-testid="video-sharing-wrapper"
className="outline-status-bar__item ml-2"
<Form.Group
size="sm"
className="d-flex flex-column justify-content-between m-0"
>
<h5>{intl.formatMessage(messages.videoSharingTitle)}</h5>
<div className="d-flex align-items-end">
<SelectMenu variant="sm btn-outline-primary">
<Form.Label
className="h5"
>{intl.formatMessage(messages.videoSharingTitle)}
</Form.Label>
<div className="d-flex align-items-center">
<Form.Control
as="select"
defaultValue={videoSharingOptions}
onChange={(e) => handleVideoSharingOptionChange(e.target.value)}
>
{Object.values(VIDEO_SHARING_OPTIONS).map((option) => (
<MenuItem
<option
key={option}
value={option}
defaultSelected={option === videoSharingOptions}
onClick={() => handleVideoSharingOptionChange(option)}
>
{getVideoSharingOptionText(option, messages, intl)}
</MenuItem>
</option>
))}
</SelectMenu>
</Form.Control>
<Hyperlink
className="small ml-2"
className="small"
destination={socialSharingUrl}
target="_blank"
showLaunchIcon={false}
@@ -131,7 +147,8 @@ const StatusBar = ({
{intl.formatMessage(messages.videoSharingLink)}
</Hyperlink>
</div>
</div>
</Form.Group>
)}
</Stack>
);

6
src/course-outline/status-bar/StatusBar.test.jsx
View File

@@ -74,10 +74,10 @@ describe('<StatusBar />', () => {
});
it('renders StatusBar component correctly', () => {
const { queryByTestId, getByText } = renderComponent();
const { getByText } = renderComponent();
expect(getByText(messages.startDateTitle.defaultMessage)).toBeInTheDocument();
expect(getByText(statusBarData.courseReleaseDate)).toBeInTheDocument();
expect(getByText('Feb 05, 2013, 5:00 AM')).toBeInTheDocument();
expect(getByText(messages.pacingTypeTitle.defaultMessage)).toBeInTheDocument();
expect(getByText(messages.pacingTypeSelfPaced.defaultMessage)).toBeInTheDocument();
@@ -88,7 +88,7 @@ describe('<StatusBar />', () => {
expect(getByText(messages.highlightEmailsTitle.defaultMessage)).toBeInTheDocument();
expect(getByText(messages.highlightEmailsEnabled.defaultMessage)).toBeInTheDocument();
expect(queryByTestId('video-sharing-wrapper')).toBeInTheDocument();
expect(getByText(messages.videoSharingTitle.defaultMessage)).toBeInTheDocument();
});
it('renders StatusBar when isSelfPaced is false', () => {

14
src/course-outline/subsection-card/SubsectionCard.jsx
View File

@@ -11,7 +11,6 @@ import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data
import { RequestStatus } from '../../data/constants';
import { COURSE_BLOCK_NAMES } from '../constants';
import CardHeader from '../card-header/CardHeader';
import BaseTitleWithStatusBadge from '../card-header/BaseTitleWithStatusBadge';
import ConditionalSortableElement from '../drag-helper/ConditionalSortableElement';
import TitleButton from '../card-header/TitleButton';
import XBlockStatus from '../xblock-status/XBlockStatus';
@@ -55,6 +54,7 @@ const SubsectionCard = ({
actions: subsectionActions,
isHeaderVisible = true,
enableCopyPasteUnits = false,
proctoringExamConfigurationLink,
} = subsection;
// re-create actions object for customizations
@@ -103,16 +103,11 @@ const SubsectionCard = ({
const titleComponent = (
<TitleButton
title={displayName}
isExpanded={isExpanded}
onTitleClick={handleExpandContent}
namePrefix={namePrefix}
>
<BaseTitleWithStatusBadge
title={displayName}
status={subsectionStatus}
namePrefix={namePrefix}
/>
</TitleButton>
/>
);
useEffect(() => {
@@ -168,6 +163,8 @@ const SubsectionCard = ({
titleComponent={titleComponent}
namePrefix={namePrefix}
actions={actions}
proctoringExamConfigurationLink={proctoringExamConfigurationLink}
isSequential
/>
<div className="subsection-card__content item-children" data-testid="subsection-card__content">
<XBlockStatus
@@ -233,6 +230,7 @@ SubsectionCard.propTypes = {
visibilityState: PropTypes.string.isRequired,
shouldScroll: PropTypes.bool,
enableCopyPasteUnits: PropTypes.bool,
proctoringExamConfigurationLink: PropTypes.string,
actions: PropTypes.shape({
deletable: PropTypes.bool.isRequired,
draggable: PropTypes.bool.isRequired,

4
src/course-outline/subsection-card/SubsectionCard.scss
View File

@@ -5,10 +5,6 @@
margin-top: $spacer;
}
.item-card-header__badge-status {
background: $light-100;
}
.subsection-card-title {
font-size: $h4-font-size;
font-family: $headings-font-family;

31
src/course-outline/unit-card/UnitCard.jsx
View File

@@ -6,7 +6,6 @@ import { useToggle } from '@edx/paragon';
import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data/slice';
import { RequestStatus } from '../../data/constants';
import CardHeader from '../card-header/CardHeader';
import BaseTitleWithStatusBadge from '../card-header/BaseTitleWithStatusBadge';
import ConditionalSortableElement from '../drag-helper/ConditionalSortableElement';
import TitleLink from '../card-header/TitleLink';
import XBlockStatus from '../xblock-status/XBlockStatus';
@@ -29,6 +28,7 @@ const UnitCard = ({
getTitleLink,
onOrderChange,
onCopyToClipboardClick,
discussionsSettings,
}) => {
const currentRef = useRef(null);
const dispatch = useDispatch();
@@ -44,6 +44,7 @@ const UnitCard = ({
actions: unitActions,
isHeaderVisible = true,
enableCopyPasteUnits = false,
discussionEnabled,
} = unit;
// re-create actions object for customizations
@@ -52,6 +53,11 @@ const UnitCard = ({
actions.allowMoveUp = canMoveItem(index, -1);
actions.allowMoveDown = canMoveItem(index, 1);
const parentInfo = {
graded: subsection.graded,
isTimeLimited: subsection.isTimeLimited,
};
const unitStatus = getItemStatus({
published,
visibilityState,
@@ -88,15 +94,10 @@ const UnitCard = ({
const titleComponent = (
<TitleLink
title={displayName}
titleLink={getTitleLink(id)}
namePrefix={namePrefix}
>
<BaseTitleWithStatusBadge
title={displayName}
status={unitStatus}
namePrefix={namePrefix}
/>
</TitleLink>
/>
);
useEffect(() => {
@@ -157,6 +158,9 @@ const UnitCard = ({
isVertical
enableCopyPasteUnits={enableCopyPasteUnits}
onClickCopy={handleCopyClick}
discussionEnabled={discussionEnabled}
discussionsSettings={discussionsSettings}
parentInfo={parentInfo}
/>
<div className="unit-card__content item-children" data-testid="unit-card__content">
<XBlockStatus
@@ -170,6 +174,10 @@ const UnitCard = ({
);
};
UnitCard.defaultProps = {
discussionsSettings: {},
};
UnitCard.propTypes = {
unit: PropTypes.shape({
id: PropTypes.string.isRequired,
@@ -186,6 +194,7 @@ UnitCard.propTypes = {
}).isRequired,
isHeaderVisible: PropTypes.bool,
enableCopyPasteUnits: PropTypes.bool,
discussionEnabled: PropTypes.bool,
}).isRequired,
subsection: PropTypes.shape({
id: PropTypes.string.isRequired,
@@ -194,6 +203,8 @@ UnitCard.propTypes = {
hasChanges: PropTypes.bool.isRequired,
visibilityState: PropTypes.string.isRequired,
shouldScroll: PropTypes.bool,
isTimeLimited: PropTypes.bool,
graded: PropTypes.bool,
}).isRequired,
section: PropTypes.shape({
id: PropTypes.string.isRequired,
@@ -216,6 +227,10 @@ UnitCard.propTypes = {
isSelfPaced: PropTypes.bool.isRequired,
isCustomRelativeDatesActive: PropTypes.bool.isRequired,
onCopyToClipboardClick: PropTypes.func.isRequired,
discussionsSettings: PropTypes.shape({
providerType: PropTypes.string,
enableGradedUnits: PropTypes.bool,
}),
};
export default UnitCard;

4
src/course-outline/unit-card/UnitCard.scss
View File

@@ -1,10 +1,6 @@
.unit-card {
flex-grow: 1;
.item-card-header__badge-status {
background: $light-100;
}
// used in src/course-outline/card-header/TitleLink.jsx &
// src/course-outline/card-header/TitleButton.jsx as
// `${namePrefix}-card-title`

5
src/generic/AlertProctoringError.jsx
View File

@@ -2,9 +2,10 @@ import { Alert } from '@edx/paragon';
import React from 'react';
import PropTypes from 'prop-types';
const AlertProctoringError = ({ proctoringErrorsData, ...props }) => (
const AlertProctoringError = ({ proctoringErrorsData, children, ...props }) => (
<ul className="alert-proctoring-error p-0">
<Alert {...props}>
{children}
{proctoringErrorsData.map(({ key, model, message }) => (
<li key={key}>
<Alert.Heading>{model.displayName}</Alert.Heading>
@@ -17,6 +18,7 @@ const AlertProctoringError = ({ proctoringErrorsData, ...props }) => (
AlertProctoringError.propTypes = {
variant: PropTypes.string,
children: PropTypes.node,
proctoringErrorsData: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.string,
message: PropTypes.string,
@@ -32,6 +34,7 @@ AlertProctoringError.propTypes = {
AlertProctoringError.defaultProps = {
variant: 'danger',
children: null,
};
export default AlertProctoringError;

5
src/generic/FormikControl.jsx
View File

@@ -10,6 +10,7 @@ const FormikControl = ({
label,
help,
className,
controlClasses,
...params
}) => {
const {
@@ -25,7 +26,7 @@ const FormikControl = ({
<Form.Control
{...params}
name={name}
className="pb-2"
className={controlClasses}
onChange={handleChange}
onBlur={handleBlur}
onFocus={handleFocus}
@@ -43,6 +44,7 @@ FormikControl.propTypes = {
label: PropTypes.element,
help: PropTypes.element,
className: PropTypes.string,
controlClasses: PropTypes.string,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
@@ -53,6 +55,7 @@ FormikControl.defaultProps = {
help: <></>,
label: <></>,
className: '',
controlClasses: 'pb-2',
};
export default FormikControl;