From e0e0b57b8bc4afd95d7e97377aca1d67ed04a7c9 Mon Sep 17 00:00:00 2001 From: Caleb Roseland Date: Tue, 24 Sep 2024 12:04:26 -0500 Subject: [PATCH] MM-54022: add warning when deleting a remote post (#28284) --- .../messaging/message_deletion_spec.js | 4 +- .../playbooks/channels/broadcast_spec.js | 4 +- .../delete_post_modal.test.tsx.snap | 90 ++++---------- .../delete_post_modal.test.tsx | 18 +++ .../delete_post_modal/delete_post_modal.tsx | 110 ++++++++++++------ webapp/channels/src/i18n/en.json | 13 ++- webapp/platform/types/src/posts.ts | 1 + 7 files changed, 127 insertions(+), 113 deletions(-) diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/message_deletion_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/message_deletion_spec.js index c9e4c09fa0a..1a55846c58b 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/message_deletion_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/message_deletion_spec.js @@ -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(); diff --git a/e2e-tests/cypress/tests/integration/playbooks/channels/broadcast_spec.js b/e2e-tests/cypress/tests/integration/playbooks/channels/broadcast_spec.js index 066ab673429..fbf84309b43 100644 --- a/e2e-tests/cypress/tests/integration/playbooks/channels/broadcast_spec.js +++ b/e2e-tests/cypress/tests/integration/playbooks/channels/broadcast_spec.js @@ -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(); diff --git 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 index 32d1236978a..3f856f662e8 100644 --- 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" > , - } - } + defaultMessage="Confirm Post Delete" + id="delete_post.confirm_post" /> @@ -61,16 +53,9 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda componentClass="div" > , - } - } + defaultMessage="Are you sure you want to delete this message?" + id="delete_post.question_post" + tagName="p" /> , - } - } + defaultMessage="Confirm Post Delete" + id="delete_post.confirm_post" /> @@ -164,30 +141,20 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda componentClass="div" > + , + "count": 1, } } /> -
- -
, - } - } + defaultMessage="Confirm Comment Delete" + id="delete_post.confirm_comment" /> @@ -280,16 +239,9 @@ exports[`components/delete_post_modal should match snapshot for post with 1 comm componentClass="div" > , - } - } + defaultMessage="Are you sure you want to delete this comment?" + id="delete_post.question_comment" + tagName="p" /> { 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( + , + ); + + expect(wrapper.find('SharedChannelPostDeleteWarning')).toBeDefined(); + console.log(wrapper.find('SharedChannelPostDeleteWarning').debug()); + }); }); diff --git a/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx b/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx index 7b43bcf041d..6b010bf95b7 100644 --- 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 { } }; + getTitle = () => { + return this.props.post.root_id ? ( + + ) : ( + + ); + }; + + getPrompt = () => { + return this.props.post.root_id ? ( + + ) : ( + + ); + }; + render() { let commentWarning: React.ReactNode = ''; + let remoteWarning: React.ReactNode = ''; if (this.props.commentCount > 0 && this.props.post.root_id === '') { commentWarning = ( -
- -
+ ); } - const postTerm = this.props.post.root_id ? ( - - ) : ( - - ); + if (this.props.post.remote_id) { + remoteWarning = ; + } return ( { componentClass='h1' id='deletePostModalLabel' > - + {this.getTitle()} - + {this.getPrompt()} {commentWarning} + {remoteWarning}