[MM-32770] Inform user that mentions added in edited posts won't trigger notifications for the receiving user (#27371)

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.");
+    });
 });

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<string>('');
     const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
     const [renderScrollbar, setRenderScrollbar] = useState<boolean>(false);
+    const [showMentionHelper, setShowMentionHelper] = useState<boolean>(false);
 
     const textboxRef = useRef<TextboxClass>(null);
     const emojiButtonRef = useRef<HTMLButtonElement>(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,
             <div className='post-body__actions'>
                 {emojiPicker}
             </div>
+            { showMentionHelper ? (
+                <div className='post-body__info'>
+                    <span className='post-body__info__icon'>
+                        <InformationOutlineIcon
+                            size={14}
+                            color='currentColor'
+                        />
+                    </span>
+                    <span>{
+                        formatMessage({
+                            id: 'edit_post.no_notification_trigger_on_mention',
+                            defaultMessage: "Editing this message with an '@mention' will not notify the recipient.",
+                        })
+                    }</span>
+                </div>) : null
+            }
             <EditPostFooter
                 onSave={handleEdit}
                 onCancel={handleAutomatedRefocusAndExit}

webapp/channels/src/i18n/en.json

@@ -3477,6 +3477,7 @@
   "edit_post.action_buttons.save": "Save",
   "edit_post.editPost": "Edit the post...",
   "edit_post.helper_text": "<strong>{key}ENTER</strong> to Save, <strong>ESC</strong> 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.",

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;