Skip to content

Commit

Permalink
MM-54022: add warning when deleting a remote post (mattermost#28284)
Browse files Browse the repository at this point in the history
  • Loading branch information
@calebroseland
calebroseland authored Sep 24, 2024
1 parent e080f9f commit e0e0b57
Show file tree
Hide file tree
Showing 7 changed files with 127 additions and 113 deletions.
4 changes: 2 additions & 2 deletions e2e-tests/cypress/tests/integration/channels/messaging/message_deletion_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ describe('Message deletion', () => {
cy.get('#deletePostModal').should('be.visible');

// * Check that confirmation dialog contains correct text
cy.get('#deletePostModal').should('contain', 'Are you sure you want to delete this Post?');
cy.get('#deletePostModal').should('contain', 'Are you sure you want to delete this message?');

// * Check that confirmation dialog shows that the post has one comment on it
cy.get('#deletePostModal').should('contain', 'This post has 1 comment on it.');
cy.get('#deletePostModal').should('contain', 'This message has 1 comment on it.');

// # Confirm deletion.
cy.get('#deletePostModalButton').click();
Expand Down
4 changes: 2 additions & 2 deletions e2e-tests/cypress/tests/integration/playbooks/channels/broadcast_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,10 +379,10 @@ const deleteLatestPostRoot = (testTeam, channelName) => {

// * Check that confirmation dialog contains correct text
cy.get('#deletePostModal').
should('contain', 'Are you sure you want to delete this Post?');
should('contain', 'Are you sure you want to delete this message?');

// * Check that confirmation dialog shows that the post has one comment on it
cy.get('#deletePostModal').should('contain', 'This post has 1 comment on it.');
cy.get('#deletePostModal').should('contain', 'This message has 1 comment on it.');

// # Confirm deletion.
cy.get('#deletePostModalButton').click();
Expand Down
90 changes: 21 additions & 69 deletions ...p/channels/src/components/delete_post_modal/__snapshots__/delete_post_modal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand Down
18 changes: 18 additions & 0 deletions webapp/channels/src/components/delete_post_modal/delete_post_modal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ describe('components/delete_post_modal', () => {
pending_post_id: '',
reply_count: 0,
metadata: {} as PostMetadata,
remote_id: '',
};

const baseProps = {
Expand Down Expand Up @@ -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());
});
});
110 changes: 75 additions & 35 deletions webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

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

getTitle = () => {
return this.props.post.root_id ? (
<FormattedMessage
id='delete_post.confirm_comment'
defaultMessage='Confirm Comment Delete'
/>
) : (
<FormattedMessage
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 = (
<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>
<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'
/>
);
}

const postTerm = this.props.post.root_id ? (
<FormattedMessage
id='delete_post.comment'
defaultMessage='Comment'
/>
) : (
<FormattedMessage
id='delete_post.post'
defaultMessage='Post'
/>
);
if (this.props.post.remote_id) {
remoteWarning = <SharedChannelPostDeleteWarning post={this.props.post}/>;
}

return (
<Modal
Expand All @@ -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
Expand Down Expand Up @@ -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}
/>
);
};
13 changes: 8 additions & 5 deletions webapp/channels/src/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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?",
Expand Down
1 change: 1 addition & 0 deletions webapp/platform/types/src/posts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ export type Post = {
message_source?: string;
is_following?: boolean;
exists?: boolean;
remote_id?: string;
};

export type PostState = 'DELETED';
Expand Down

0 comments on commit e0e0b57

Please sign in to comment.