diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/edit_message_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/edit_message_spec.js index 1aad5036be..fd104b9b3e 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/edit_message_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/edit_message_spec.js @@ -183,4 +183,37 @@ describe('Edit Message', () => { cy.get('#edit_textbox').should('have.text', message); }); }); + + it('MM-T121_2 @mention in edit post should show warning, Editing this message with an @mention will not notify the recipient.', () => { + // # Post a message + cy.postMessage('Hello World!'); + + // # Hit the up arrow to open the "editor" + cy.uiGetPostTextBox().type('{uparrow}'); + + // # In the modal type @ + cy.get('#edit_textbox').type(' @user'); + + // # Press the enter key + cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).focus().type('{enter}'); + + // * Check if the textbox contains expected text + cy.get('.post-body__info').should('be.visible'); + cy.get('.post-body__info').contains('span', "Editing this message with an '@mention' will not notify the recipient."); + + // # Press the escape key + cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).focus().type('{enter}'); + + // # Open the RHS + cy.getLastPostId().then((postId) => { + cy.clickPostCommentIcon(postId); + }); + + // # Hit the up arrow to open the "editor" + cy.uiGetPostTextBox().type('{uparrow}'); + + // * Check if the textbox contains expected text + cy.get('.post-body__info').should('be.visible'); + cy.get('.post-body__info').contains('span', "Editing this message with an '@mention' will not notify the recipient."); + }); }); diff --git a/webapp/channels/src/components/edit_post/edit_post.tsx b/webapp/channels/src/components/edit_post/edit_post.tsx index 02120586bd..43ea473109 100644 --- a/webapp/channels/src/components/edit_post/edit_post.tsx +++ b/webapp/channels/src/components/edit_post/edit_post.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {useIntl} from 'react-intl'; -import {EmoticonPlusOutlineIcon} from '@mattermost/compass-icons/components'; +import {EmoticonPlusOutlineIcon, InformationOutlineIcon} from '@mattermost/compass-icons/components'; import type {Emoji} from '@mattermost/types/emojis'; import type {Post} from '@mattermost/types/posts'; @@ -29,6 +29,7 @@ import { isGitHubCodeBlock, } from 'utils/paste'; import {postMessageOnKeyPress, splitMessageBasedOnCaretPosition} from 'utils/post_utils'; +import {allAtMentions} from 'utils/text_formatting'; import * as Utils from 'utils/utils'; import type {ModalData} from 'types/actions'; @@ -103,6 +104,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft, const [errorClass, setErrorClass] = useState(''); const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [renderScrollbar, setRenderScrollbar] = useState(false); + const [showMentionHelper, setShowMentionHelper] = useState(false); const textboxRef = useRef(null); const emojiButtonRef = useRef(null); @@ -137,6 +139,9 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft, saveDraftFrame.current = window.setTimeout(() => { actions.setDraft(draftStorageId, draftRef.current); }, Constants.SAVE_DRAFT_TIMEOUT); + + const isMentions = allAtMentions(editText).length > 0; + setShowMentionHelper(isMentions); }, [actions, draftStorageId, editText]); useEffect(() => { @@ -522,6 +527,22 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
{emojiPicker}
+ { showMentionHelper ? ( +
+ + + + { + formatMessage({ + id: 'edit_post.no_notification_trigger_on_mention', + defaultMessage: "Editing this message with an '@mention' will not notify the recipient.", + }) + } +
) : null + } {key}ENTER to Save, ESC to Cancel", + "edit_post.no_notification_trigger_on_mention": "Editing this message with an '@mention' will not notify the recipient.", "edit_post.time_limit_button.for_n_seconds": "For {n} seconds", "edit_post.time_limit_button.no_limit": "Anytime", "edit_post.time_limit_modal.description": "Setting a time limit **applies to all users** who have the \"Edit Post\" permissions in any permission scheme.", diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss index 8c5414cc24..3a734c232f 100644 --- a/webapp/channels/src/sass/components/_post.scss +++ b/webapp/channels/src/sass/components/_post.scss @@ -506,6 +506,19 @@ } } +.post-body__info { + display: flex; + color: rgba(var(--center-channel-color-rgb), 0.75); + font-size: 12px; + gap: 4px; + margin-block-start: 4px; + + &__icon{ + color: rgba(var(--center-channel-color-rgb), 0.64); + padding-block-start: 1px; + } +} + .post-body__footer { display: inline-flex; align-items: center;