[MM-62403] Seperate MessageWithMentionsFooter into separate component in AdvancedTextEditor (#29754)

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx

@@ -410,6 +410,6 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
             }),
         );
 
-        expect(screen.getByTestId('editPostAtMentionWarning')).toBeVisible();
+        expect(screen.getByText('Editing this message with an \'@mention\' will not notify the recipient.')).toBeVisible();
     });
 });

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx

@@ -6,7 +6,6 @@ import React, {lazy, useCallback, useEffect, useMemo, useRef, useState} from 're
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
-import {InformationOutlineIcon} from '@mattermost/compass-icons/components';
 import type {ServerError} from '@mattermost/types/errors';
 import type {SchedulingInfo} from '@mattermost/types/schedule_post';
 
@@ -66,6 +65,7 @@ import EditPostFooter from './edit_post_footer';
 import Footer from './footer';
 import FormattingBar from './formatting_bar';
 import {FormattingBarSpacer, Separator} from './formatting_bar/formatting_bar';
+import MessageWithMentionsFooter from './message_with_mentions_footer';
 import SendButton from './send_button';
 import ShowFormat from './show_formatting';
 import TexteditorActions from './texteditor_actions';
@@ -200,7 +200,6 @@ const AdvancedTextEditor = ({
     const [isMessageLong, setIsMessageLong] = useState(false);
     const [renderScrollbar, setRenderScrollbar] = useState(false);
     const [keepEditorInFocus, setKeepEditorInFocus] = useState(false);
-    const [showMentionHelper, setShowMentionHelper] = useState<boolean>(false);
 
     const readOnlyChannel = !canPost;
     const hasDraftMessage = Boolean(draft.message);
@@ -217,15 +216,6 @@ const AdvancedTextEditor = ({
         GlobalActions.emitLocalUserTypingEvent(channelId, postId);
     }, [channelId, postId]);
 
-    const handleShowMentionHelper = useCallback((message: string) => {
-        if (!isInEditMode) {
-            return;
-        }
-
-        const isMentions = allAtMentions(message).length > 0;
-        setShowMentionHelper(isMentions);
-    }, [isInEditMode]);
-
     const handleDraftChange = useCallback((draftToChange: PostDraft, options: {instant?: boolean; show?: boolean} = {instant: false, show: false}) => {
         if (saveDraftFrame.current) {
             clearTimeout(saveDraftFrame.current);
@@ -564,11 +554,6 @@ const AdvancedTextEditor = ({
         };
     }, [channelId, postId]);
 
-    useEffect(() => {
-        // this checks for the mention helper for initial load of component.
-        handleShowMentionHelper(draft.message);
-    }, [draft.message, handleShowMentionHelper]);
-
     const disableSendButton = Boolean(isDisabled || (!draft.message.trim().length && !draft.fileInfos.length)) || !isValidPersistentNotifications;
     const sendButton = readOnlyChannel || isInEditMode ? null : (
         <SendButton
@@ -684,6 +669,8 @@ const AdvancedTextEditor = ({
 
     const showFormattingSpacer = isMessageLong || showPreview || attachmentPreview || isRHS || isThreadView;
 
+    const containsAtMentionsInMessage = allAtMentions(draft?.message)?.length > 0;
+
     return (
         <form
             id={postId ? undefined : 'create_post'}
@@ -803,25 +790,9 @@ const AdvancedTextEditor = ({
                     )}
                 </div>
             </div>
-            { showMentionHelper ? (
-                <div
-                    className='post-body__info'
-                    data-testid='editPostAtMentionWarning'
-                >
-                    <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
-            }
+            {isInEditMode && containsAtMentionsInMessage && (
+                <MessageWithMentionsFooter/>
+            )}
             <Footer
                 postError={postError}
                 errorClass={errorClass}

webapp/channels/src/components/advanced_text_editor/footer.tsx

@@ -49,13 +49,12 @@ export default function Footer({
                     handleSubmit={noArgumentHandleSubmit}
                 />
             )}
-            {
-                !isInEditMode &&
+            {!isInEditMode && (
                 <MsgTyping
                     channelId={channelId}
                     postId={postId}
                 />
-            }
+            )}
         </div>
     );
 }

webapp/channels/src/components/advanced_text_editor/message_with_mentions_footer.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl} from 'react-intl';
+
+import {InformationOutlineIcon} from '@mattermost/compass-icons/components';
+
+export default function MessageWithMentionsFooter() {
+    const {formatMessage} = useIntl();
+
+    return (
+        <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>
+    );
+}