refactor: Tweak wording of "discard draft?" confirmation dialogs (#35192)

app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx

@@ -13,6 +13,7 @@ export const ConfirmationModal: React.FC<
     title: React.ReactNode;
     message: React.ReactNode;
     confirm: React.ReactNode;
+    cancel?: React.ReactNode;
     secondary?: React.ReactNode;
     onSecondary?: () => void;
     onConfirm: () => void;
@@ -22,6 +23,7 @@ export const ConfirmationModal: React.FC<
   title,
   message,
   confirm,
+  cancel,
   onClose,
   onConfirm,
   secondary,
@@ -57,10 +59,12 @@ export const ConfirmationModal: React.FC<
       <div className='safety-action-modal__bottom'>
         <div className='safety-action-modal__actions'>
           <button onClick={handleCancel} className='link-button'>
-            <FormattedMessage
-              id='confirmation_modal.cancel'
-              defaultMessage='Cancel'
-            />
+            {cancel ?? (
+              <FormattedMessage
+                id='confirmation_modal.cancel'
+                defaultMessage='Cancel'
+              />
+            )}
           </button>
 
           {secondary && (

app/javascript/mastodon/features/ui/components/confirmation_modals/discard_draft_confirmation.tsx

@@ -0,0 +1,104 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { replyCompose } from 'mastodon/actions/compose';
+import { editStatus } from 'mastodon/actions/statuses';
+import type { Status } from 'mastodon/models/status';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const editMessages = defineMessages({
+  title: {
+    id: 'confirmations.discard_draft.edit.title',
+    defaultMessage: 'Discard changes to your post?',
+  },
+  message: {
+    id: 'confirmations.discard_draft.edit.message',
+    defaultMessage:
+      'Continuing will discard any changes you have made to the post you are currently editing.',
+  },
+  cancel: {
+    id: 'confirmations.discard_draft.edit.cancel',
+    defaultMessage: 'Resume editing',
+  },
+});
+
+const postMessages = defineMessages({
+  title: {
+    id: 'confirmations.discard_draft.post.title',
+    defaultMessage: 'Discard your draft post?',
+  },
+  message: {
+    id: 'confirmations.discard_draft.post.message',
+    defaultMessage:
+      'Continuing will discard the post you are currently composing.',
+  },
+  cancel: {
+    id: 'confirmations.discard_draft.post.cancel',
+    defaultMessage: 'Resume draft',
+  },
+});
+
+const messages = defineMessages({
+  confirm: {
+    id: 'confirmations.discard_draft.confirm',
+    defaultMessage: 'Discard and continue',
+  },
+});
+
+const DiscardDraftConfirmationModal: React.FC<
+  {
+    onConfirm: () => void;
+  } & BaseConfirmationModalProps
+> = ({ onConfirm, onClose }) => {
+  const intl = useIntl();
+  const isEditing = useAppSelector((state) => !!state.compose.get('id'));
+
+  const contextualMessages = isEditing ? editMessages : postMessages;
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(contextualMessages.title)}
+      message={intl.formatMessage(contextualMessages.message)}
+      cancel={intl.formatMessage(contextualMessages.cancel)}
+      confirm={intl.formatMessage(messages.confirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};
+
+export const ConfirmReplyModal: React.FC<
+  {
+    status: Status;
+  } & BaseConfirmationModalProps
+> = ({ status, onClose }) => {
+  const dispatch = useAppDispatch();
+
+  const onConfirm = useCallback(() => {
+    dispatch(replyCompose(status));
+  }, [dispatch, status]);
+
+  return (
+    <DiscardDraftConfirmationModal onConfirm={onConfirm} onClose={onClose} />
+  );
+};
+
+export const ConfirmEditStatusModal: React.FC<
+  {
+    statusId: string;
+  } & BaseConfirmationModalProps
+> = ({ statusId, onClose }) => {
+  const dispatch = useAppDispatch();
+
+  const onConfirm = useCallback(() => {
+    dispatch(editStatus(statusId));
+  }, [dispatch, statusId]);
+
+  return (
+    <DiscardDraftConfirmationModal onConfirm={onConfirm} onClose={onClose} />
+  );
+};

app/javascript/mastodon/features/ui/components/confirmation_modals/edit_status.tsx

@@ -1,45 +0,0 @@
-import { useCallback } from 'react';
-
-import { defineMessages, useIntl } from 'react-intl';
-
-import { editStatus } from 'mastodon/actions/statuses';
-import { useAppDispatch } from 'mastodon/store';
-
-import type { BaseConfirmationModalProps } from './confirmation_modal';
-import { ConfirmationModal } from './confirmation_modal';
-
-const messages = defineMessages({
-  editTitle: {
-    id: 'confirmations.edit.title',
-    defaultMessage: 'Overwrite post?',
-  },
-  editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' },
-  editMessage: {
-    id: 'confirmations.edit.message',
-    defaultMessage:
-      'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?',
-  },
-});
-
-export const ConfirmEditStatusModal: React.FC<
-  {
-    statusId: string;
-  } & BaseConfirmationModalProps
-> = ({ statusId, onClose }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-
-  const onConfirm = useCallback(() => {
-    dispatch(editStatus(statusId));
-  }, [dispatch, statusId]);
-
-  return (
-    <ConfirmationModal
-      title={intl.formatMessage(messages.editTitle)}
-      message={intl.formatMessage(messages.editMessage)}
-      confirm={intl.formatMessage(messages.editConfirm)}
-      onConfirm={onConfirm}
-      onClose={onClose}
-    />
-  );
-};

app/javascript/mastodon/features/ui/components/confirmation_modals/index.ts

@@ -1,8 +1,10 @@
 export { ConfirmationModal } from './confirmation_modal';
 export { ConfirmDeleteStatusModal } from './delete_status';
 export { ConfirmDeleteListModal } from './delete_list';
-export { ConfirmReplyModal } from './reply';
-export { ConfirmEditStatusModal } from './edit_status';
+export {
+  ConfirmReplyModal,
+  ConfirmEditStatusModal,
+} from './discard_draft_confirmation';
 export { ConfirmUnfollowModal } from './unfollow';
 export { ConfirmClearNotificationsModal } from './clear_notifications';
 export { ConfirmLogOutModal } from './log_out';

app/javascript/mastodon/features/ui/components/confirmation_modals/reply.tsx

@@ -1,46 +0,0 @@
-import { useCallback } from 'react';
-
-import { defineMessages, useIntl } from 'react-intl';
-
-import { replyCompose } from 'mastodon/actions/compose';
-import type { Status } from 'mastodon/models/status';
-import { useAppDispatch } from 'mastodon/store';
-
-import type { BaseConfirmationModalProps } from './confirmation_modal';
-import { ConfirmationModal } from './confirmation_modal';
-
-const messages = defineMessages({
-  replyTitle: {
-    id: 'confirmations.reply.title',
-    defaultMessage: 'Overwrite post?',
-  },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: {
-    id: 'confirmations.reply.message',
-    defaultMessage:
-      'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?',
-  },
-});
-
-export const ConfirmReplyModal: React.FC<
-  {
-    status: Status;
-  } & BaseConfirmationModalProps
-> = ({ status, onClose }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-
-  const onConfirm = useCallback(() => {
-    dispatch(replyCompose(status));
-  }, [dispatch, status]);
-
-  return (
-    <ConfirmationModal
-      title={intl.formatMessage(messages.replyTitle)}
-      message={intl.formatMessage(messages.replyMessage)}
-      confirm={intl.formatMessage(messages.replyConfirm)}
-      onConfirm={onConfirm}
-      onClose={onClose}
-    />
-  );
-};

app/javascript/mastodon/locales/en.json

@@ -219,11 +219,15 @@
   "confirmations.delete_list.confirm": "Delete",
   "confirmations.delete_list.message": "Are you sure you want to permanently delete this list?",
   "confirmations.delete_list.title": "Delete list?",
+  "confirmations.discard_draft.confirm": "Discard and continue",
+  "confirmations.discard_draft.edit.cancel": "Resume editing",
+  "confirmations.discard_draft.edit.message": "Continuing will discard any changes you have made to the post you are currently editing.",
+  "confirmations.discard_draft.edit.title": "Discard changes to your post?",
+  "confirmations.discard_draft.post.cancel": "Resume draft",
+  "confirmations.discard_draft.post.message": "Continuing will discard the post you are currently composing.",
+  "confirmations.discard_draft.post.title": "Discard your draft post?",
   "confirmations.discard_edit_media.confirm": "Discard",
   "confirmations.discard_edit_media.message": "You have unsaved changes to the media description or preview, discard them anyway?",
-  "confirmations.edit.confirm": "Edit",
-  "confirmations.edit.message": "Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?",
-  "confirmations.edit.title": "Overwrite post?",
   "confirmations.follow_to_list.confirm": "Follow and add to list",
   "confirmations.follow_to_list.message": "You need to be following {name} to add them to a list.",
   "confirmations.follow_to_list.title": "Follow user?",
@@ -241,9 +245,6 @@
   "confirmations.remove_from_followers.confirm": "Remove follower",
   "confirmations.remove_from_followers.message": "{name} will stop following you. Are you sure you want to proceed?",
   "confirmations.remove_from_followers.title": "Remove follower?",
-  "confirmations.reply.confirm": "Reply",
-  "confirmations.reply.message": "Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?",
-  "confirmations.reply.title": "Overwrite post?",
   "confirmations.unfollow.confirm": "Unfollow",
   "confirmations.unfollow.message": "Are you sure you want to unfollow {name}?",
   "confirmations.unfollow.title": "Unfollow user?",