diff --git a/src/data/constants.js b/src/data/constants.js
index 5dccef0b..357d3b14 100644
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -13,15 +13,6 @@ export const ThreadType = {
DISCUSSION: 'discussion',
};
-/**
- * Enum for report Confirmation.
- * @readonly
- * @enum {string}
- */
-export const ReportConfirmation = {
- Report: 'Report inappropriate content?',
-};
-
/**
* Enum to map between endorsement status and friendly name.
* @readonly
diff --git a/src/discussions/comments/comment/Comment.jsx b/src/discussions/comments/comment/Comment.jsx
index c3adf7b9..9be8e7f8 100644
--- a/src/discussions/comments/comment/Comment.jsx
+++ b/src/discussions/comments/comment/Comment.jsx
@@ -48,6 +48,14 @@ function Comment({
}
}, [comment.id]);
+ const handleAbusedFlag = () => {
+ if (comment.abuseFlagged) {
+ dispatch(editComment(comment.id, { flagged: !comment.abuseFlagged }));
+ } else {
+ showReportConfirmation();
+ }
+ };
+
const actionHandlers = {
[ContentActions.EDIT_CONTENT]: () => setEditing(true),
[ContentActions.ENDORSE]: async () => {
@@ -55,13 +63,7 @@ function Comment({
await dispatch(fetchThread(comment.threadId));
},
[ContentActions.DELETE]: showDeleteConfirmation,
- [ContentActions.REPORT]: () => {
- if (comment.abuseFlagged) {
- dispatch(editComment(comment.id, { flagged: !comment.abuseFlagged }));
- } else {
- showReportConfirmation();
- }
- },
+ [ContentActions.REPORT]: () => handleAbusedFlag(),
};
const handleLoadMoreComments = () => (
@@ -80,6 +82,8 @@ function Comment({
dispatch(removeComment(comment.id));
hideDeleteConfirmation();
}}
+ closeButtonVaraint="tertiary"
+ confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)}
/>
{!comment.abuseFlagged && (
)}
diff --git a/src/discussions/comments/comment/Reply.jsx b/src/discussions/comments/comment/Reply.jsx
index ce8a74a4..a59144d5 100644
--- a/src/discussions/comments/comment/Reply.jsx
+++ b/src/discussions/comments/comment/Reply.jsx
@@ -30,6 +30,15 @@ function Reply({
const [isEditing, setEditing] = useState(false);
const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
const [isReporting, showReportConfirmation, hideReportConfirmation] = useToggle(false);
+
+ const handleAbusedFlag = () => {
+ if (reply.abuseFlagged) {
+ dispatch(editComment(reply.id, { flagged: !reply.abuseFlagged }));
+ } else {
+ showReportConfirmation();
+ }
+ };
+
const actionHandlers = {
[ContentActions.EDIT_CONTENT]: () => setEditing(true),
[ContentActions.ENDORSE]: () => dispatch(editComment(
@@ -38,13 +47,7 @@ function Reply({
ContentActions.ENDORSE,
)),
[ContentActions.DELETE]: showDeleteConfirmation,
- [ContentActions.REPORT]: () => {
- if (reply.abuseFlagged) {
- dispatch(editComment(reply.id, { flagged: !reply.abuseFlagged }));
- } else {
- showReportConfirmation();
- }
- },
+ [ContentActions.REPORT]: () => handleAbusedFlag(),
};
const authorAvatars = useSelector(selectAuthorAvatars(reply.author));
const colorClass = AvatarOutlineAndLabelColors[reply.authorLabel];
@@ -61,6 +64,8 @@ function Reply({
dispatch(removeComment(reply.id));
hideDeleteConfirmation();
}}
+ closeButtonVaraint="tertiary"
+ confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)}
/>
{!reply.abuseFlagged && (
)}
{hasAnyAlert && (
diff --git a/src/discussions/comments/messages.js b/src/discussions/comments/messages.js
index 8e66efa8..fc662073 100644
--- a/src/discussions/comments/messages.js
+++ b/src/discussions/comments/messages.js
@@ -148,6 +148,11 @@ const messages = defineMessages({
defaultMessage: 'Are you sure you want to permanently delete this comment?',
description: 'Text displayed in confirmation dialog when deleting a comment',
},
+ deleteConfirmationDelete: {
+ id: 'discussions.delete.confirmation.button.delete',
+ defaultMessage: 'Delete',
+ description: 'Delete button shown on delete confirmation dialog',
+ },
reportResponseTitle: {
id: 'discussions.editor.response.response.title',
defaultMessage: 'Report inappropriate content?',
diff --git a/src/discussions/common/Confirmation.jsx b/src/discussions/common/Confirmation.jsx
index 6db98e89..06f84b31 100644
--- a/src/discussions/common/Confirmation.jsx
+++ b/src/discussions/common/Confirmation.jsx
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { ActionRow, Button, ModalDialog } from '@edx/paragon';
-import { ReportConfirmation } from '../../data/constants';
import messages from '../messages';
function Confirmation({
@@ -14,9 +13,10 @@ function Confirmation({
description,
onClose,
comfirmAction,
+ closeButtonVaraint,
+ confirmButtonVariant,
+ confirmButtonText,
}) {
- const ifDeleteConfirmation = title === ReportConfirmation.Report || false;
-
return (
@@ -29,13 +29,11 @@ function Confirmation({
-
- {intl.formatMessage(messages.deleteConfirmationCancel)}
+
+ {intl.formatMessage(messages.confirmationCancel)}
-
@@ -50,6 +48,15 @@ Confirmation.propTypes = {
comfirmAction: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
+ closeButtonVaraint: PropTypes.string,
+ confirmButtonVariant: PropTypes.string,
+ confirmButtonText: PropTypes.string,
+};
+
+Confirmation.defaultProps = {
+ closeButtonVaraint: 'default',
+ confirmButtonVariant: 'primary',
+ confirmButtonText: '',
};
export default injectIntl(Confirmation);
diff --git a/src/discussions/messages.js b/src/discussions/messages.js
index deeb748f..51e0b8c8 100644
--- a/src/discussions/messages.js
+++ b/src/discussions/messages.js
@@ -31,6 +31,11 @@ const messages = defineMessages({
defaultMessage: 'Delete',
description: 'Action to delete a post or comment',
},
+ confirmationConfirm: {
+ id: 'discussions.confirmation.button.confirm',
+ defaultMessage: 'Confirm',
+ description: 'Confirm button shown on confirmation dialog',
+ },
closeAction: {
id: 'discussions.actions.close',
defaultMessage: 'Close',
@@ -71,21 +76,11 @@ const messages = defineMessages({
defaultMessage: 'Unmark as answered',
description: 'Action to unmark a comment as answering a post',
},
- deleteConfirmationCancel: {
- id: 'discussions.delete.confirmation.button.cancel',
+ confirmationCancel: {
+ id: 'discussions.modal.confirmation.button.cancel',
defaultMessage: 'Cancel',
description: 'Cancel button shown on delete confirmation dialog',
},
- deleteConfirmationDelete: {
- id: 'discussions.delete.confirmation.button.delete',
- defaultMessage: 'Delete',
- description: 'Delete button shown on delete confirmation dialog',
- },
- reportConfirmationConfirm: {
- id: 'discussions.report.confirmation.button.confirm',
- defaultMessage: 'Confirm',
- description: 'Confirm button shown on report confirmation dialog',
- },
emptyAllTopics: {
id: 'discussions.empty.allTopics',
defaultMessage:
diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
index 607b2a1f..d4f8377a 100644
--- a/src/discussions/posts/post/Post.jsx
+++ b/src/discussions/posts/post/Post.jsx
@@ -36,6 +36,15 @@ function Post({
const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
const [isReporting, showReportConfirmation, hideReportConfirmation] = useToggle(false);
const [isClosing, showClosePostModal, hideClosePostModal] = useToggle(false);
+
+ const handleAbusedFlag = () => {
+ if (post.abuseFlagged) {
+ dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged }));
+ } else {
+ showReportConfirmation();
+ }
+ };
+
const actionHandlers = {
[ContentActions.EDIT_CONTENT]: () => history.push({
...location,
@@ -53,13 +62,7 @@ function Post({
},
[ContentActions.COPY_LINK]: () => { navigator.clipboard.writeText(`${window.location.origin}/${courseId}/posts/${post.id}`); },
[ContentActions.PIN]: () => dispatch(updateExistingThread(post.id, { pinned: !post.pinned })),
- [ContentActions.REPORT]: () => {
- if (post.abuseFlagged) {
- dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged }));
- } else {
- showReportConfirmation();
- }
- },
+ [ContentActions.REPORT]: () => handleAbusedFlag(),
};
const getTopicCategoryName = topicData => (
@@ -78,6 +81,8 @@ function Post({
history.push('.');
hideDeleteConfirmation();
}}
+ closeButtonVaraint="tertiary"
+ confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)}
/>
{!post.abuseFlagged && (
)}
diff --git a/src/discussions/posts/post/messages.js b/src/discussions/posts/post/messages.js
index f1bc34c6..f9c76ba4 100644
--- a/src/discussions/posts/post/messages.js
+++ b/src/discussions/posts/post/messages.js
@@ -71,6 +71,11 @@ const messages = defineMessages({
id: 'discussions.editor.delete.post.description',
defaultMessage: 'Are you sure you want to permanently delete this post?',
},
+ deleteConfirmationDelete: {
+ id: 'discussions.post.delete.confirmation.button.delete',
+ defaultMessage: 'Delete',
+ description: 'Delete button shown on delete confirmation dialog',
+ },
reportPostTitle: {
id: 'discussions.editor.report.post.title',
defaultMessage: 'Report inappropriate content?',