MM-54022: add warning when deleting a remote post (#28284)

2024-09-24 12:04:26 -05:00
--- a/webapp/channels/src/components/delete_post_modal/snapshots/delete_post_modal.test.tsx.snap
+++ b/webapp/channels/src/components/delete_post_modal/snapshots/delete_post_modal.test.tsx.snap
@@ -43,16 +43,8 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
      id="deletePostModalLabel"
    >
      <MemoizedFormattedMessage
-        defaultMessage="Confirm {term} Delete"
-        id="delete_post.confirm"
-        values={
-          Object {
-            "term": <Memo(MemoizedFormattedMessage)
-              defaultMessage="Post"
-              id="delete_post.post"
-            />,
-          }
-        }
+        defaultMessage="Confirm Post Delete"
+        id="delete_post.confirm_post"
      />
    </ModalTitle>
  </ModalHeader>
@@ -61,16 +53,9 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
    componentClass="div"
  >
    <MemoizedFormattedMessage
-      defaultMessage="Are you sure you want to delete this {term}?"
-      id="delete_post.question"
-      values={
-        Object {
-          "term": <Memo(MemoizedFormattedMessage)
-            defaultMessage="Post"
-            id="delete_post.post"
-          />,
-        }
-      }
+      defaultMessage="Are you sure you want to delete this message?"
+      id="delete_post.question_post"
+      tagName="p"
    />
  </ModalBody>
  <ModalFooter
@@ -146,16 +131,8 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
      id="deletePostModalLabel"
    >
      <MemoizedFormattedMessage
-        defaultMessage="Confirm {term} Delete"
-        id="delete_post.confirm"
-        values={
-          Object {
-            "term": <Memo(MemoizedFormattedMessage)
-              defaultMessage="Post"
-              id="delete_post.post"
-            />,
-          }
-        }
+        defaultMessage="Confirm Post Delete"
+        id="delete_post.confirm_post"
      />
    </ModalTitle>
  </ModalHeader>
@@ -164,30 +141,20 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
    componentClass="div"
  >
    <MemoizedFormattedMessage
-      defaultMessage="Are you sure you want to delete this {term}?"
-      id="delete_post.question"
+      defaultMessage="Are you sure you want to delete this message?"
+      id="delete_post.question_post"
+      tagName="p"
+    />
+    <MemoizedFormattedMessage
+      defaultMessage="This message has {count, number} {count, plural, one {comment} other {comments}} on it."
+      id="delete_post.warning"
+      tagName="p"
      values={
        Object {
-          "term": <Memo(MemoizedFormattedMessage)
-            defaultMessage="Post"
-            id="delete_post.post"
-          />,
+          "count": 1,
        }
      }
    />
-    <div
-      className="mt-2"
-    >
-      <MemoizedFormattedMessage
-        defaultMessage="This post has {count, number} {count, plural, one {comment} other {comments}} on it."
-        id="delete_post.warning"
-        values={
-          Object {
-            "count": 1,
-          }
-        }
-      />
-    </div>
  </ModalBody>
  <ModalFooter
    bsClass="modal-footer"
@@ -262,16 +229,8 @@ exports[`components/delete_post_modal should match snapshot for post with 1 comm
      id="deletePostModalLabel"
    >
      <MemoizedFormattedMessage
-        defaultMessage="Confirm {term} Delete"
-        id="delete_post.confirm"
-        values={
-          Object {
-            "term": <Memo(MemoizedFormattedMessage)
-              defaultMessage="Comment"
-              id="delete_post.comment"
-            />,
-          }
-        }
+        defaultMessage="Confirm Comment Delete"
+        id="delete_post.confirm_comment"
      />
    </ModalTitle>
  </ModalHeader>
@@ -280,16 +239,9 @@ exports[`components/delete_post_modal should match snapshot for post with 1 comm
    componentClass="div"
  >
    <MemoizedFormattedMessage
-      defaultMessage="Are you sure you want to delete this {term}?"
-      id="delete_post.question"
-      values={
-        Object {
-          "term": <Memo(MemoizedFormattedMessage)
-            defaultMessage="Comment"
-            id="delete_post.comment"
-          />,
-        }
-      }
+      defaultMessage="Are you sure you want to delete this comment?"
+      id="delete_post.question_comment"
+      tagName="p"
    />
  </ModalBody>
  <ModalFooter
--- a/webapp/channels/src/components/delete_post_modal/delete_post_modal.test.tsx
+++ b/webapp/channels/src/components/delete_post_modal/delete_post_modal.test.tsx
@@ -30,6 +30,7 @@ describe('components/delete_post_modal', () => {
        pending_post_id: '',
        reply_count: 0,
        metadata: {} as PostMetadata,
+        remote_id: '',
    };

    const baseProps = {
@@ -198,4 +199,21 @@ describe('components/delete_post_modal', () => {
        }
        expect(baseProps.onExited).toHaveBeenCalledTimes(1);
    });
+
+    test('should warn about remote post deletion', () => {
+        const props = {
+            ...baseProps,
+            post: {
+                ...post,
+                remote_id: 'remoteclusterid1',
+            },
+        };
+
+        const wrapper = shallow<DeletePostModal>(
+            <DeletePostModal {...props}/>,
+        );
+
+        expect(wrapper.find('SharedChannelPostDeleteWarning')).toBeDefined();
+        console.log(wrapper.find('SharedChannelPostDeleteWarning').debug());
+    });
 });
--- a/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx
+++ b/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx
@@ -3,13 +3,15 @@

 import React from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 import {matchPath} from 'react-router-dom';

 import type {Post} from '@mattermost/types/posts';

 import type {ActionResult} from 'mattermost-redux/types/actions';

+import SectionNotice from 'components/section_notice';
+
 import {getHistory} from 'utils/browser_history';
 import * as UserAgent from 'utils/user_agent';

@@ -101,34 +103,56 @@ export default class DeletePostModal extends React.PureComponent<Props, State> {
        }
    };

-    render() {
-        let commentWarning: React.ReactNode = '';
-
-        if (this.props.commentCount > 0 && this.props.post.root_id === '') {
-            commentWarning = (
-                <div className='mt-2'>
-                    <FormattedMessage
-                        id='delete_post.warning'
-                        defaultMessage='This post has {count, number} {count, plural, one {comment} other {comments}} on it.'
-                        values={{
-                            count: this.props.commentCount,
-                        }}
-                    />
-                </div>
-            );
-        }
-
-        const postTerm = this.props.post.root_id ? (
+    getTitle = () => {
+        return this.props.post.root_id ? (
            <FormattedMessage
-                id='delete_post.comment'
-                defaultMessage='Comment'
+                id='delete_post.confirm_comment'
+                defaultMessage='Confirm Comment Delete'
            />
        ) : (
            <FormattedMessage
-                id='delete_post.post'
-                defaultMessage='Post'
+                id='delete_post.confirm_post'
+                defaultMessage='Confirm Post Delete'
            />
        );
+    };
+
+    getPrompt = () => {
+        return this.props.post.root_id ? (
+            <FormattedMessage
+                id='delete_post.question_comment'
+                defaultMessage='Are you sure you want to delete this comment?'
+                tagName='p'
+            />
+        ) : (
+            <FormattedMessage
+                id='delete_post.question_post'
+                defaultMessage='Are you sure you want to delete this message?'
+                tagName='p'
+            />
+        );
+    };
+
+    render() {
+        let commentWarning: React.ReactNode = '';
+        let remoteWarning: React.ReactNode = '';
+
+        if (this.props.commentCount > 0 && this.props.post.root_id === '') {
+            commentWarning = (
+                <FormattedMessage
+                    id='delete_post.warning'
+                    defaultMessage='This message has {count, number} {count, plural, one {comment} other {comments}} on it.'
+                    values={{
+                        count: this.props.commentCount,
+                    }}
+                    tagName='p'
+                />
+            );
+        }
+
+        if (this.props.post.remote_id) {
+            remoteWarning = <SharedChannelPostDeleteWarning post={this.props.post}/>;
+        }

        return (
            <Modal
@@ -146,24 +170,13 @@ export default class DeletePostModal extends React.PureComponent<Props, State> {
                        componentClass='h1'
                        id='deletePostModalLabel'
                    >
-                        <FormattedMessage
-                            id='delete_post.confirm'
-                            defaultMessage='Confirm {term} Delete'
-                            values={{
-                                term: (postTerm),
-                            }}
-                        />
+                        {this.getTitle()}
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
-                    <FormattedMessage
-                        id='delete_post.question'
-                        defaultMessage='Are you sure you want to delete this {term}?'
-                        values={{
-                            term: (postTerm),
-                        }}
-                    />
+                    {this.getPrompt()}
                    {commentWarning}
+                    {remoteWarning}
                </Modal.Body>
                <Modal.Footer>
                    <button
@@ -194,3 +207,30 @@ export default class DeletePostModal extends React.PureComponent<Props, State> {
        );
    }
 }
+
+const SharedChannelPostDeleteWarning = ({post}: {post: Post}) => {
+    const {formatMessage} = useIntl();
+
+    const text = post.root_id ? (
+        formatMessage({
+            id: 'delete_post.shared_channel_warning.message_comment',
+            defaultMessage: 'This comment originated from a shared channel in another workspace. Deleting it here won\'t remove it from the channel in the other workspace.',
+        })
+    ) : (
+        formatMessage({
+            id: 'delete_post.shared_channel_warning.message_post',
+            defaultMessage: 'This message originated from a shared channel in another workspace. Deleting it here won\'t remove it from the channel in the other workspace.',
+        })
+    );
+
+    return (
+        <SectionNotice
+            type='warning'
+            title={formatMessage({
+                id: 'delete_post.shared_channel_warning.title',
+                defaultMessage: 'Shared Channel',
+            })}
+            text={text}
+        />
+    );
+};
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -3446,12 +3446,15 @@
  "delete_channel.question": "This will archive the channel from the team and remove it from the user interface. Archived channels can be unarchived if needed again. \n \nAre you sure you wish to archive the {display_name} channel?",
  "delete_channel.viewArchived.question": "This will archive the channel from the team. Channel contents will still be accessible by channel members.\n \nAre you sure you wish to archive the **{display_name}** channel?",
  "delete_post.cancel": "Cancel",
-  "delete_post.comment": "Comment",
-  "delete_post.confirm": "Confirm {term} Delete",
+  "delete_post.confirm_comment": "Confirm Comment Delete",
+  "delete_post.confirm_post": "Confirm Post Delete",
  "delete_post.del": "Delete",
-  "delete_post.post": "Post",
-  "delete_post.question": "Are you sure you want to delete this {term}?",
-  "delete_post.warning": "This post has {count, number} {count, plural, one {comment} other {comments}} on it.",
+  "delete_post.question_comment": "Are you sure you want to delete this comment?",
+  "delete_post.question_post": "Are you sure you want to delete this message?",
+  "delete_post.shared_channel_warning.message_comment": "This comment originated from a shared channel in another workspace. Deleting it here won't remove it from the channel in the other workspace.",
+  "delete_post.shared_channel_warning.message_post": "This message originated from a shared channel in another workspace. Deleting it here won't remove it from the channel in the other workspace.",
+  "delete_post.shared_channel_warning.title": "Shared Channel",
+  "delete_post.warning": "This message has {count, number} {count, plural, one {comment} other {comments}} on it.",
  "delete_success_modal.button_text": "Go to mattermost.com",
  "demote_to_user_modal.demote": "Demote",
  "demote_to_user_modal.desc": "This action demotes the user {username} to a guest. It will restrict the user's ability to join public channels and interact with users outside of the channels they are currently members of. Are you sure you want to demote user {username} to guest?",
--- a/webapp/platform/types/src/posts.ts
+++ b/webapp/platform/types/src/posts.ts
@@ -99,6 +99,7 @@ export type Post = {
    message_source?: string;
    is_following?: boolean;
    exists?: boolean;
+    remote_id?: string;
 };

 export type PostState = 'DELETED';