diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx index b1bd8c064c..9868cecf5b 100644 --- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx +++ b/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(); }); }); diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx index e7ea43c676..9701b8d9de 100644 --- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx +++ b/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(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 : ( 0; + return (
- { showMentionHelper ? ( -
- - - - { - formatMessage({ - id: 'edit_post.no_notification_trigger_on_mention', - defaultMessage: "Editing this message with an '@mention' will not notify the recipient.", - }) - } -
) : null - } + {isInEditMode && containsAtMentionsInMessage && ( + + )}