refactor: confirmation modal modified to handle variants

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

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 && (
           <Confirmation
@@ -91,6 +95,7 @@ function Comment({
               dispatch(editComment(comment.id, { flagged: !comment.abuseFlagged }));
               hideReportConfirmation();
             }}
+            confirmButtonVariant="danger"
           />
         )}
         <EndorsedAlertBanner postType={postType} content={comment} />

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 && (
         <Confirmation
@@ -72,6 +77,7 @@ function Reply({
             dispatch(editComment(reply.id, { flagged: !reply.abuseFlagged }));
             hideReportConfirmation();
           }}
+          confirmButtonVariant="danger"
         />
       )}
       {hasAnyAlert && (

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?',

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 (
     <ModalDialog title={title} isOpen={isOpen} hasCloseButton={false} onClose={onClose} zIndex={5000}>
       <ModalDialog.Header>
@@ -29,13 +29,11 @@ function Confirmation({
       </ModalDialog.Body>
       <ModalDialog.Footer>
         <ActionRow>
-          <ModalDialog.CloseButton variant={!ifDeleteConfirmation ? 'tertiary' : 'default'}>
-            {intl.formatMessage(messages.deleteConfirmationCancel)}
+          <ModalDialog.CloseButton variant={closeButtonVaraint}>
+            {intl.formatMessage(messages.confirmationCancel)}
           </ModalDialog.CloseButton>
-          <Button variant={!ifDeleteConfirmation ? 'primary' : 'danger'} onClick={comfirmAction}>
-            {!ifDeleteConfirmation
-              ? intl.formatMessage(messages.deleteConfirmationDelete)
-              : intl.formatMessage(messages.reportConfirmationConfirm) }
+          <Button variant={confirmButtonVariant} onClick={comfirmAction}>
+            { confirmButtonText || intl.formatMessage(messages.confirmationConfirm)}
           </Button>
         </ActionRow>
       </ModalDialog.Footer>
@@ -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);

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:

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 && (
         <Confirmation
@@ -89,6 +94,7 @@ function Post({
             dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged }));
             hideReportConfirmation();
           }}
+          confirmButtonVariant="danger"
         />
       )}
       <AlertBanner content={post} />

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?',