+
+ {intl.formatMessage(messages.discussionRestrictionLabel)}
+
+
+ {discussionRestrictionOptions.map((option) => (
+ {option.label}
+
+
+ ))}
+
+ {(selectedOption === 'on' || selectedOption === 'off') && (
+
+ {intl.formatMessage(messages.discussionRestrictionHelp)}
+
+ )}
+
+ {selectedOption === 'on' && (
+
+ )}
+
+ {selectedOption === 'scheduled' && (
+
+
+ {intl.formatMessage(messages.discussionRestrictionDatesHelp)}
+
+
(
+
+ {restrictedDates.map((restrictedDate, index) => (
+
remove(index)}
+ onClose={() => handleOnClose(index)}
+ hasError={Boolean(errors?.restrictedDates?.[index])}
+ />
+ ))}
+
+
+
+
+ )}
+
- {badgeStatus &&
{badgeStatus}}
-
{collapseHeadingText}
+
+ {badgeStatus &&
{badgeStatus}}
+
{collapseHeadingText}
);
};
@@ -34,4 +34,4 @@ CollapseCardHeading.defaultProps = {
badgeStatus: '',
};
-export default CollapseCardHeading;
+export default React.memo(CollapseCardHeading);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/BlackoutDatesItem.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/DiscussionRestrictionItem.jsx
similarity index 56%
rename from src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/BlackoutDatesItem.jsx
rename to src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/DiscussionRestrictionItem.jsx
index 32b1317dc..e7661cf53 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/BlackoutDatesItem.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/DiscussionRestrictionItem.jsx
@@ -1,106 +1,116 @@
-import React, { useState } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import React, { useState, useCallback } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
import { Form } from '@edx/paragon';
import { useFormikContext } from 'formik';
import PropTypes from 'prop-types';
import _ from 'lodash';
import messages from '../../../messages';
-import BlackoutDatesInput from './BlackoutDatesInput';
-import { formatBlackoutDates } from '../../../utils';
+import RestrictDatesInput from './RestrictDatesInput';
+import { formatRestrictedDates } from '../../../utils';
import {
- blackoutDatesStatus as constants,
- deleteHelperText,
+ restrictedDatesStatus as constants,
+ deleteRestrictedDatesHelperText,
badgeVariant,
} from '../../../../data/constants';
import CollapsableEditor from '../../../../../../generic/CollapsableEditor';
import ConfirmationPopup from '../../../../../../generic/ConfirmationPopup';
import CollapseCardHeading from './CollapseCardHeading';
-const BlackoutDatesItem = ({
- intl,
- blackoutDate,
+const DiscussionRestrictionItem = ({
+ restrictedDate,
onDelete,
hasError,
onClose,
fieldNameCommonBase,
}) => {
- const blackoutDateError = !blackoutDate.startDate || !blackoutDate.endDate || hasError;
+ const restrictedDateError = !restrictedDate.startDate || !restrictedDate.endDate || hasError;
const [showDeletePopup, setShowDeletePopup] = useState(false);
- const [collapseIsOpen, setCollapseOpen] = useState(blackoutDateError);
+ const [collapseIsOpen, setCollapseOpen] = useState(restrictedDateError);
const { setFieldTouched } = useFormikContext();
+ const intl = useIntl();
- const handleToggle = (isOpen) => {
+ const handleToggle = useCallback((isOpen) => {
if (!isOpen && hasError) {
return setCollapseOpen(true);
}
return setCollapseOpen(isOpen);
- };
+ }, [hasError]);
- const getHeading = (isOpen) => (
-
- );
-
- if (showDeletePopup) {
- return (
-
setShowDeletePopup(false)}
- cancelLabel={intl.formatMessage(messages.cancelButton)}
- />
- );
- }
-
- const handleOnClose = () => {
+ const handleOnClose = useCallback(() => {
['startDate', 'startTime', 'endDate', 'endTime'].forEach(field => (
setFieldTouched(`${fieldNameCommonBase}.${field}`, true)
));
if (!hasError) {
onClose();
}
- };
+ }, [hasError, onClose]);
+
+ const getHeading = useCallback((isOpen) => (
+
+ ), [restrictedDate]);
+
+ const handleShowDeletePopup = useCallback(() => {
+ setShowDeletePopup(true);
+ }, []);
+
+ const handleCancelDeletePopup = useCallback(() => {
+ setShowDeletePopup(false);
+ }, []);
+
+ if (showDeletePopup) {
+ return (
+
+ );
+ }
return (
setShowDeletePopup(true)}
+ onDelete={handleShowDeletePopup}
expandAlt={intl.formatMessage(messages.expandAltText)}
collapseAlt={intl.formatMessage(messages.collapseAltText)}
deleteAlt={intl.formatMessage(messages.deleteAltText)}
- data-testid={blackoutDate.id}
- onClose={() => handleOnClose()}
+ data-testid={restrictedDate.id}
+ onClose={handleOnClose}
>
-
-
-
- (
+
+ );
+
+DiscussionRestrictionOption.propTypes = {
+ value: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ onClick: PropTypes.func.isRequired,
+ selectedOption: PropTypes.string.isRequired,
+};
+
+export default React.memo(DiscussionRestrictionOption);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/BlackoutDatesInput.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/RestrictDatesInput.jsx
similarity index 81%
rename from src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/BlackoutDatesInput.jsx
rename to src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/RestrictDatesInput.jsx
index 0c88a132c..1509d794d 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/BlackoutDatesInput.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/RestrictDatesInput.jsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
import { Form } from '@edx/paragon';
import { useFormikContext, getIn } from 'formik';
import PropTypes from 'prop-types';
import FieldFeedback from '../../../../../../generic/FieldFeedback';
-const BlackoutDatesInput = ({
+const RestictDatesInput = ({
value,
type,
label,
@@ -25,10 +25,14 @@ const BlackoutDatesInput = ({
const fieldTouched = getIn(touched, `${fieldNameCommonBase}.${fieldName}`);
const isInvalidInput = Boolean(!inFocus && fieldError && fieldTouched);
- const handleFocusOut = (event) => {
+ const handleFocusOut = useCallback((event) => {
handleBlur(event);
setInFocus(false);
- };
+ }, [handleBlur, setInFocus]);
+
+ const handleSetFocus = useCallback(() => {
+ setInFocus(true);
+ }, [setInFocus]);
return (
handleFocusOut(event)}
- onFocus={() => setInFocus(true)}
+ onBlur={handleFocusOut}
+ onFocus={handleSetFocus}
/>
(
array.filter(item => item[key] !== value)
@@ -47,7 +47,7 @@ export const decodeDateTime = (date, time) => {
return moment(mergeDateTime(nDate, nTime));
};
-export const sortBlackoutDatesByStatus = (data, status, order) => (
+export const sortRestrictedDatesByStatus = (data, status, order) => (
_.orderBy(
data.filter(date => date.status === status),
[(obj) => decodeDateTime(obj.startDate, startOfDayTime(obj.startTime))],
@@ -55,7 +55,7 @@ data.filter(date => date.status === status),
)
);
-export const formatBlackoutDates = ({
+export const formatRestrictedDates = ({
startDate, startTime, endDate, endTime,
}) => {
let formattedDate;
diff --git a/src/pages-and-resources/discussions/app-list/AppList.scss b/src/pages-and-resources/discussions/app-list/AppList.scss
index 40e2a3c73..3aa109914 100644
--- a/src/pages-and-resources/discussions/app-list/AppList.scss
+++ b/src/pages-and-resources/discussions/app-list/AppList.scss
@@ -25,3 +25,53 @@
}
}
}
+
+.height-36{
+ height: 2.25rem !important;
+}
+.line-height-20{
+ line-height: 1.25rem !important;
+}
+.font-size-14{
+ font-size: 14px !important;
+}
+
+.discussion-restriction{
+ .unselected-button{
+ &:hover{
+ background: #e9e6e4 !important;
+ }
+ }
+ .action-btn{
+ padding: 10px 16px;
+ width: 80px;
+ height: 44px;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 24px;
+ }
+ .w-92{
+ width: 92px;
+ }
+ .card-body-section{
+ padding-top: 12px !important;
+ padding-bottom: 20px !important;
+ }
+ .form-control{
+ border-radius: 0px !important;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ }
+ .collapsible-card{
+ padding: 14px 14px 14px 24px !important;
+ min-height:100px;
+ .collapsible-trigger{
+ padding: 0px !important;
+ .badge{
+ font-size: 12px;
+ line-height: 20px;
+ }
+ }
+ }
+}
diff --git a/src/pages-and-resources/discussions/data/api.js b/src/pages-and-resources/discussions/data/api.js
index 0b272c474..20122c7f7 100644
--- a/src/pages-and-resources/discussions/data/api.js
+++ b/src/pages-and-resources/discussions/data/api.js
@@ -10,10 +10,10 @@ import {
mergeDateTime,
normalizeDate,
normalizeTime,
- sortBlackoutDatesByStatus,
+ sortRestrictedDatesByStatus,
startOfDayTime,
} from '../app-config-form/utils';
-import { blackoutDatesStatus as constants } from './constants';
+import { restrictedDatesStatus as constants } from './constants';
ensureConfig([
'STUDIO_BASE_URL',
@@ -31,7 +31,7 @@ function normalizeLtiConfig(data) {
};
}
-export function normalizeBlackoutDates(data) {
+export function normalizeRestrictedDates(data) {
if (!data || Object.keys(data).length < 1) {
return [];
}
@@ -46,9 +46,9 @@ export function normalizeBlackoutDates(data) {
}));
return [
- ...sortBlackoutDatesByStatus(normalizeData, constants.ACTIVE, 'desc'),
- ...sortBlackoutDatesByStatus(normalizeData, constants.UPCOMING, 'asc'),
- ...sortBlackoutDatesByStatus(normalizeData, constants.COMPLETE, 'desc'),
+ ...sortRestrictedDatesByStatus(normalizeData, constants.ACTIVE, 'desc'),
+ ...sortRestrictedDatesByStatus(normalizeData, constants.UPCOMING, 'asc'),
+ ...sortRestrictedDatesByStatus(normalizeData, constants.COMPLETE, 'desc'),
];
}
@@ -66,7 +66,7 @@ function normalizePluginConfig(data) {
enableReportedContentEmailNotifications: data.reported_content_email_notifications_flag,
divisionScheme: data.division_scheme,
alwaysDivideInlineDiscussions: data.always_divide_inline_discussions,
- blackoutDates: normalizeBlackoutDates(data.discussion_blackouts),
+ restrictedDates: normalizeRestrictedDates(data.discussion_blackouts),
allowDivisionByUnit: false,
divideByCohorts: enableDivideByCohorts,
divideCourseTopicsByCohorts: enableDivideCourseTopicsByCohorts,
@@ -155,15 +155,15 @@ function normalizeSettings(data) {
};
}
-export function denormalizeBlackoutDate(blackoutPeriod) {
+export function denormalizeRestrictedDate(restrictedPeriod) {
return [
mergeDateTime(
- normalizeDate(blackoutPeriod.startDate),
- normalizeTime(startOfDayTime(blackoutPeriod.startTime)),
+ normalizeDate(restrictedPeriod.startDate),
+ normalizeTime(startOfDayTime(restrictedPeriod.startTime)),
),
mergeDateTime(
- normalizeDate(blackoutPeriod.endDate),
- normalizeTime(endOfDayTime(blackoutPeriod.endTime)),
+ normalizeDate(restrictedPeriod.endDate),
+ normalizeTime(endOfDayTime(restrictedPeriod.endTime)),
),
];
}
@@ -187,11 +187,11 @@ function denormalizeData(courseId, appId, data) {
if ('groupAtSubsection' in data) {
pluginConfiguration.group_at_subsection = data.groupAtSubsection;
}
- if (data.blackoutDates?.length) {
- pluginConfiguration.discussion_blackouts = data.blackoutDates.map((blackoutDates) => (
- denormalizeBlackoutDate(blackoutDates)
+ if (data.restrictedDates?.length) {
+ pluginConfiguration.discussion_blackouts = data.restrictedDates.map((restrictedDates) => (
+ denormalizeRestrictedDate(restrictedDates)
));
- } else if (data.blackoutDates?.length === 0) {
+ } else if (data.restrictedDates?.length === 0) {
pluginConfiguration.discussion_blackouts = [];
}
if (data.discussionTopics?.length) {
diff --git a/src/pages-and-resources/discussions/data/constants.js b/src/pages-and-resources/discussions/data/constants.js
index 98215bb2f..a87c48639 100644
--- a/src/pages-and-resources/discussions/data/constants.js
+++ b/src/pages-and-resources/discussions/data/constants.js
@@ -2,7 +2,7 @@ import moment from 'moment';
import messages from '../app-config-form/messages';
-export const blackoutDatesStatus = {
+export const restrictedDatesStatus = {
UPCOMING: 'UPCOMING',
COMPLETE: 'COMPLETE',
ACTIVE: 'ACTIVE',
@@ -14,12 +14,42 @@ export const badgeVariant = {
ACTIVE: 'success',
};
-export const deleteHelperText = {
- UPCOMING: messages.blackoutDatesDeletionHelp,
- COMPLETE: messages.completeBlackoutDatesDeletionHelp,
- ACTIVE: messages.activeBlackoutDatesDeletionHelp,
+export const deleteRestrictedDatesHelperText = {
+ UPCOMING: messages.restrictedDatesDeletionHelp,
+ COMPLETE: messages.completeRestrictedDatesDeletionHelp,
+ ACTIVE: messages.activeRestrictedDatesDeletionHelp,
};
+export const discussionRestriction = {
+ OFF: 'off',
+ ON: 'on',
+ SCHEDULED: 'scheduled',
+};
+
+export const discussionRestrictionLabel = {
+ [discussionRestriction.OFF]: 'Off',
+ [discussionRestriction.ON]: 'On',
+ [discussionRestriction.SCHEDULED]: 'Scheduled',
+};
+
+export const discussionRestrictionOptions = [
+ {
+ value: discussionRestriction.OFF,
+ description: messages.discussionRestrictionOffLabel,
+ label: discussionRestrictionLabel[discussionRestriction.OFF],
+ },
+ {
+ value: discussionRestriction.ON,
+ description: messages.discussionRestrictionOnLabel,
+ label: discussionRestrictionLabel[discussionRestriction.ON],
+ },
+ {
+ value: discussionRestriction.SCHEDULED,
+ description: messages.discussionRestrictionScheduledLabel,
+ label: discussionRestrictionLabel[discussionRestriction.SCHEDULED],
+ },
+];
+
export const today = moment();
export const active = [today.format('YYYY-MM-DDTHH:mm'), today.add(5, 'hours').format('YYYY-MM-DDTHH:mm')];
export const upcoming = [today.add(2, 'days').format('YYYY-MM-DD'), today.add(5, 'days').format('YYYY-MM-DD')];
diff --git a/src/pages-and-resources/discussions/data/redux.test.js b/src/pages-and-resources/discussions/data/redux.test.js
index cc464db36..9eb72e023 100644
--- a/src/pages-and-resources/discussions/data/redux.test.js
+++ b/src/pages-and-resources/discussions/data/redux.test.js
@@ -244,7 +244,7 @@ describe('Data layer integration tests', () => {
allowAnonymousPostsPeers: false,
reportedContentEmailNotifications: false,
enableReportedContentEmailNotifications: false,
- blackoutDates: [],
+ restrictedDates: [],
// TODO: Note! As of this writing, all the data below this line is NOT returned in the API
// but we add it in during normalization.
divisionScheme: DivisionSchemes.COHORT,
@@ -449,7 +449,7 @@ describe('Data layer integration tests', () => {
allowAnonymousPosts: true,
allowAnonymousPostsPeers: true,
reportedContentEmailNotifications: true,
- blackoutDates: [],
+ restrictedDates: [],
// TODO: Note! As of this writing, all the data below this line is NOT returned in the API
// but we technically send it to the thunk, so here it is.
divideByCohorts: true,
@@ -486,7 +486,7 @@ describe('Data layer integration tests', () => {
allowAnonymousPostsPeers: true,
reportedContentEmailNotifications: true,
alwaysDivideInlineDiscussions: true,
- blackoutDates: [],
+ restrictedDates: [],
// TODO: Note! The values we tried to save were ignored, this test reflects what currently
// happens, but NOT what we want to have happen!
divideByCohorts: true,