MM-50953 Post textbox cleanup (#23971)

* Remove unused code around scrollbarWidth

* MM-50953 Remove unused code for popover at mentions

* Add tests for messageHtmlToComponent wrapper

webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap

@@ -16,10 +16,8 @@ exports[`components/TextBox should match snapshot with additional, optional prop
         "render": [Function],
       }
     }
-    isRHS={true}
     listComponent={[Function]}
     listPosition="top"
-    listenForMentionKeyClick={true}
     onBlur={[Function]}
     onChange={[Function]}
     onComposition={[Function]}
@@ -109,7 +107,6 @@ exports[`components/TextBox should match snapshot with additional, optional prop
           "hideUtilities": true,
         }
       }
-      isRHS={true}
       mentionKeys={Array []}
       message="some test text"
     />
@@ -132,9 +129,7 @@ exports[`components/TextBox should match snapshot with required props 1`] = `
         "render": [Function],
       }
     }
-    isRHS={false}
     listComponent={[Function]}
-    listenForMentionKeyClick={false}
     onBlur={[Function]}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -225,9 +220,7 @@ exports[`components/TextBox should throw error when new property is too long 1`]
         "render": [Function],
       }
     }
-    isRHS={false}
     listComponent={[Function]}
-    listenForMentionKeyClick={false}
     onBlur={[Function]}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -318,9 +311,7 @@ exports[`components/TextBox should throw error when value is too long 1`] = `
         "render": [Function],
       }
     }
-    isRHS={false}
     listComponent={[Function]}
-    listenForMentionKeyClick={false}
     onBlur={[Function]}
     onChange={[Function]}
     onKeyDown={[Function]}

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

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {CSSProperties, useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import classNames from 'classnames';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {EmoticonHappyOutlineIcon} from '@mattermost/compass-icons/components';
@@ -167,7 +167,6 @@ const AdvanceTextEditor = ({
     const editorActionsRef = useRef<HTMLDivElement>(null);
     const editorBodyRef = useRef<HTMLDivElement>(null);
 
-    const [scrollbarWidth, setScrollbarWidth] = useState(0);
     const [renderScrollbar, setRenderScrollbar] = useState(false);
     const [showFormattingSpacer, setShowFormattingSpacer] = useState(shouldShowPreview);
     const [keepEditorInFocus, setKeepEditorInFocus] = useState(false);
@@ -176,13 +175,7 @@ const AdvanceTextEditor = ({
 
     const handleHeightChange = useCallback((height: number, maxHeight: number) => {
         setRenderScrollbar(height > maxHeight);
-
+    }, []);
-        window.requestAnimationFrame(() => {
-            if (textboxRef.current) {
-                setScrollbarWidth(Utils.scrollbarWidth(textboxRef.current.getInputBox()));
-            }
-        });
-    }, [textboxRef]);
 
     const handleShowFormat = useCallback(() => {
         setShowPreview(!shouldShowPreview);
@@ -429,11 +422,6 @@ const AdvanceTextEditor = ({
                     'AdvancedTextEditor__attachment-disabled': !canUploadFiles,
                     scroll: renderScrollbar,
                 })}
-                style={
-                    renderScrollbar && scrollbarWidth ? ({
-                        '--detected-scrollbar-width': `${scrollbarWidth}px`,
-                    } as CSSProperties) : undefined
-                }
             >
                 <div
                     id={'speak-'}
@@ -485,7 +473,6 @@ const AdvanceTextEditor = ({
                             characterLimit={maxPostSize}
                             preview={shouldShowPreview}
                             badConnection={badConnection}
-                            listenForMentionKeyClick={true}
                             useChannelMentions={useChannelMentions}
                             rootId={postId}
                             onWidthChange={handleWidthChange}

webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap

@@ -64,7 +64,6 @@ exports[`components/AtMention should match snapshot when mentioning current user
         className="user-profile-popover"
         hasMention={false}
         hide={[Function]}
-        isRHS={false}
         src="/api/v4/users/abc1/image"
         userId="abc1"
       />
@@ -97,7 +96,6 @@ exports[`components/AtMention should match snapshot when mentioning user 1`] = `
         className="user-profile-popover"
         hasMention={false}
         hide={[Function]}
-        isRHS={false}
         src="/api/v4/users/abc2/image"
         userId="abc2"
       />
@@ -130,7 +128,6 @@ exports[`components/AtMention should match snapshot when mentioning user contain
         className="user-profile-popover"
         hasMention={false}
         hide={[Function]}
-        isRHS={false}
         src="/api/v4/users/abc3/image"
         userId="abc3"
       />
@@ -164,7 +161,6 @@ exports[`components/AtMention should match snapshot when mentioning user contain
         className="user-profile-popover"
         hasMention={false}
         hide={[Function]}
-        isRHS={false}
         src="/api/v4/users/abc3/image"
         userId="abc3"
       />
@@ -197,7 +193,6 @@ exports[`components/AtMention should match snapshot when mentioning user followe
         className="user-profile-popover"
         hasMention={false}
         hide={[Function]}
-        isRHS={false}
         src="/api/v4/users/abc2/image"
         userId="abc2"
       />
@@ -231,7 +226,6 @@ exports[`components/AtMention should match snapshot when mentioning user with di
         className="user-profile-popover"
         hasMention={false}
         hide={[Function]}
-        isRHS={false}
         src="/api/v4/users/abc2/image"
         userId="abc2"
       />
@@ -264,7 +258,6 @@ exports[`components/AtMention should match snapshot when mentioning user with mi
         className="user-profile-popover"
         hasMention={false}
         hide={[Function]}
-        isRHS={false}
         src="/api/v4/users/abc2/image"
         userId="abc2"
       />

webapp/channels/src/components/at_mention/at_mention.tsx

@@ -30,7 +30,6 @@ type Props = {
     hasMention?: boolean;
     disableHighlight?: boolean;
     disableGroupHighlight?: boolean;
-    isRHS?: boolean;
 }
 
 type State = {
@@ -43,7 +42,6 @@ export default class AtMention extends React.PureComponent<Props, State> {
     buttonRef: React.RefObject<HTMLAnchorElement>;
 
     static defaultProps: Partial<Props> = {
-        isRHS: false,
         hasMention: false,
         disableHighlight: false,
         disableGroupHighlight: false,
@@ -124,7 +122,6 @@ export default class AtMention extends React.PureComponent<Props, State> {
                             className='user-profile-popover'
                             userId={user.id}
                             src={Client4.getProfilePictureUrl(user.id, user.last_picture_update)}
-                            isRHS={this.props.isRHS}
                             hasMention={this.props.hasMention}
                             hide={this.hideOverlay}
                             channelId={this.props.channelId}

webapp/channels/src/components/at_mention/at_mention_group.tsx

@@ -27,10 +27,6 @@ type Props = {
      */
     group: Group;
 
-    /**
-     * Props to be passed through from AtMention to ProfilePopover
-     */
-    isRHS?: boolean;
     channelId?: string;
     hasMention?: boolean;
 }
@@ -38,7 +34,6 @@ type Props = {
 const AtMentionGroup = (props: Props) => {
     const {
         group,
-        isRHS,
         channelId,
         hasMention,
     } = props;
@@ -137,7 +132,6 @@ const AtMentionGroup = (props: Props) => {
                         className='user-profile-popover'
                         userId={showUser.id}
                         src={Client4.getProfilePictureUrl(showUser.id, showUser.last_picture_update)}
-                        isRHS={isRHS}
                         channelId={channelId}
                         hasMention={hasMention}
                         hide={hideUserOverlay}

webapp/channels/src/components/channel_info_rhs/about_area_dm.tsx

@@ -94,7 +94,6 @@ const AboutAreaDM = ({channel, dmUser, actions}: Props) => {
                         src={Client4.getProfilePictureUrl(dmUser.user.id, dmUser.user.last_picture_update)}
                         isBot={dmUser.user.is_bot}
                         status={dmUser.status ? dmUser.status : undefined}
-                        isRHS={true}
                         username={dmUser.display_name}
                         userId={dmUser.user.id}
                         channelId={channel.id}

webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap

@@ -235,7 +235,6 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
   <ProfilePicture
     hasMention={false}
     isEmoji={false}
-    isRHS={false}
     popoverPlacement="right"
     size="md"
     src="/api/v4/users/user-1/image"

webapp/channels/src/components/channel_members_rhs/member.tsx

@@ -144,7 +144,6 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions
                         userId={member.user.id}
                         src={profileSrc}
                         hide={hideProfilePopover}
-                        isRHS={true}
                         hideStatus={member.user.is_bot}
                     />
                 }
@@ -152,7 +151,6 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions
                 <span className='ProfileSpan'>
                     <Avatar>
                         <ProfilePicture
-                            isRHS={true}
                             popoverPlacement='left'
                             size='sm'
                             status={member.status}

webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap

@@ -33,7 +33,6 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
           channelId="channel_id"
           hasMention={false}
           isEmoji={false}
-          isRHS={false}
           popoverPlacement="right"
           size="md"
           src="/api/v4/users/user_id/image?_=0"
@@ -50,7 +49,6 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                 className="user-profile-popover"
                 hasMention={false}
                 hide={[Function]}
-                isRHS={false}
                 src="/api/v4/users/user_id/image?_=0"
                 userId="user_id"
               />
@@ -110,7 +108,6 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                       "wrapRichTextChunksInFragment": undefined,
                     }
                   }
-                  isRHS={false}
                   src="/api/v4/users/user_id/image?_=0"
                   userId="user_id"
                 />
@@ -244,7 +241,6 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                 enableFormatting={true}
                 hasImageProxy={false}
                 imagesMetadata={Object {}}
-                isRHS={false}
                 managedResourcePaths={Array []}
                 mentionKeys={Array []}
                 message="message"
@@ -314,7 +310,6 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
           channelId="channel_id"
           hasMention={false}
           isEmoji={false}
-          isRHS={false}
           popoverPlacement="right"
           size="md"
           src="/api/v4/users/user_id/image?_=0"
@@ -331,7 +326,6 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                 className="user-profile-popover"
                 hasMention={false}
                 hide={[Function]}
-                isRHS={false}
                 src="/api/v4/users/user_id/image?_=0"
                 userId="user_id"
               />
@@ -391,7 +385,6 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                       "wrapRichTextChunksInFragment": undefined,
                     }
                   }
-                  isRHS={false}
                   src="/api/v4/users/user_id/image?_=0"
                   userId="user_id"
                 />
@@ -525,7 +518,6 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                 enableFormatting={true}
                 hasImageProxy={false}
                 imagesMetadata={Object {}}
-                isRHS={false}
                 managedResourcePaths={Array []}
                 mentionKeys={Array []}
                 message="message"
@@ -601,7 +593,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
           channelId="channel_id"
           hasMention={false}
           isEmoji={false}
-          isRHS={false}
           popoverPlacement="right"
           size="md"
           src="/api/v4/users/user_id/image?_=0"
@@ -618,7 +609,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                 className="user-profile-popover"
                 hasMention={false}
                 hide={[Function]}
-                isRHS={false}
                 src="/api/v4/users/user_id/image?_=0"
                 userId="user_id"
               />
@@ -678,7 +668,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                       "wrapRichTextChunksInFragment": undefined,
                     }
                   }
-                  isRHS={false}
                   src="/api/v4/users/user_id/image?_=0"
                   userId="user_id"
                 />
@@ -874,7 +863,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                 enableFormatting={true}
                 hasImageProxy={false}
                 imagesMetadata={Object {}}
-                isRHS={false}
                 managedResourcePaths={Array []}
                 mentionKeys={Array []}
                 message="message"
@@ -950,7 +938,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
           channelId="channel_id"
           hasMention={false}
           isEmoji={false}
-          isRHS={false}
           popoverPlacement="right"
           size="md"
           src="/api/v4/users/user_id/image?_=0"
@@ -967,7 +954,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                 className="user-profile-popover"
                 hasMention={false}
                 hide={[Function]}
-                isRHS={false}
                 src="/api/v4/users/user_id/image?_=0"
                 userId="user_id"
               />
@@ -1027,7 +1013,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                       "wrapRichTextChunksInFragment": undefined,
                     }
                   }
-                  isRHS={false}
                   src="/api/v4/users/user_id/image?_=0"
                   userId="user_id"
                 />
@@ -1302,7 +1287,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                 enableFormatting={true}
                 hasImageProxy={false}
                 imagesMetadata={Object {}}
-                isRHS={false}
                 managedResourcePaths={Array []}
                 mentionKeys={Array []}
                 message="message"

webapp/channels/src/components/markdown/markdown.tsx

@@ -29,11 +29,6 @@ type Props = {
      */
     enableFormatting?: boolean;
 
-    /*
-     * Whether or not this text is part of the RHS
-     */
-    isRHS?: boolean;
-
     /*
      * An array of paths on the server that are managed by another server
      */
@@ -126,7 +121,6 @@ type Props = {
 export default class Markdown extends React.PureComponent<Props> {
     static defaultProps: Partial<Props> = {
         options: {},
-        isRHS: false,
         proxyImages: true,
         imagesMetadata: {},
         postId: '', // Needed to avoid proptypes console errors for cases like channel header, which doesn't have a proper value
@@ -163,7 +157,7 @@ export default class Markdown extends React.PureComponent<Props> {
 
         const htmlFormattedText = formatText(message, options, this.props.emojiMap);
 
-        return messageHtmlToComponent(htmlFormattedText, this.props.isRHS, {
+        return messageHtmlToComponent(htmlFormattedText, {
             imageProps: this.props.imageProps,
             imagesMetadata: this.props.imagesMetadata,
             hasPluginTooltips: this.props.hasPluginTooltips,

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

@@ -16,7 +16,6 @@ import PostMarkdown from './post_markdown';
 describe('components/PostMarkdown', () => {
     const baseProps = {
         imageProps: {},
-        isRHS: false,
         message: 'message',
         post: TestHelper.getPostMock(),
         mentionKeys: [{key: 'a'}, {key: 'b'}, {key: 'c'}],

webapp/channels/src/components/post_markdown/post_markdown.tsx

@@ -24,11 +24,6 @@ type Props = {
      */
     imageProps?: Record<string, any>;
 
-    /*
-     * Whether or not this text is part of the RHS
-     */
-    isRHS?: boolean;
-
     /*
      * The post text to be rendered
      */
@@ -72,7 +67,6 @@ type Props = {
 
 export default class PostMarkdown extends React.PureComponent<Props> {
     static defaultProps = {
-        isRHS: false,
         pluginHooks: [],
         options: {},
         showPostEditedIndicator: true,
@@ -135,7 +129,6 @@ export default class PostMarkdown extends React.PureComponent<Props> {
         return (
             <Markdown
                 imageProps={this.props.imageProps}
-                isRHS={this.props.isRHS}
                 message={message}
                 proxyImages={proxyImages}
                 mentionKeys={mentionKeys}

webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx

@@ -19,7 +19,6 @@ type Props = {
     enablePostIconOverride: boolean;
     hasImageProxy: boolean;
     isBusy?: boolean;
-    isRHS?: boolean;
     post: Post;
     status?: string;
     user: UserProfile;
@@ -83,7 +82,6 @@ export default class PostProfilePicture extends React.PureComponent<Props> {
             availabilityStatusOnPosts,
             compactDisplay,
             isBusy,
-            isRHS,
             post,
             user,
             isBot,
@@ -110,7 +108,6 @@ export default class PostProfilePicture extends React.PureComponent<Props> {
             <ProfilePicture
                 hasMention={hasMention}
                 isBusy={isBusy}
-                isRHS={isRHS}
                 size='md'
                 src={src}
                 profileSrc={profileSrc}

webapp/channels/src/components/post_view/post_message_view/__snapshots__/post_message_view.test.tsx.snap

@@ -19,7 +19,6 @@ exports[`components/post_view/PostAttachment should match snapshot 1`] = `
           "onImageLoaded": [Function],
         }
       }
-      isRHS={false}
       mentionKeys={Array []}
       message="post message"
       options={Object {}}
@@ -58,7 +57,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show Less
           "onImageLoaded": [Function],
         }
       }
-      isRHS={false}
       mentionKeys={Array []}
       message="post message"
       options={Object {}}
@@ -97,7 +95,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show More
           "onImageLoaded": [Function],
         }
       }
-      isRHS={false}
       mentionKeys={Array []}
       message="post message"
       options={Object {}}
@@ -154,7 +151,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on edited po
           "onImageLoaded": [Function],
         }
       }
-      isRHS={false}
       mentionKeys={Array []}
       message="post message"
       options={Object {}}
@@ -194,7 +190,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on ephemeral
           "onImageLoaded": [Function],
         }
       }
-      isRHS={false}
       mentionKeys={Array []}
       message="post message"
       options={Object {}}

webapp/channels/src/components/post_view/post_message_view/post_message_view.tsx

@@ -154,7 +154,6 @@ export default class PostMessageView extends React.PureComponent<Props, State> {
                     <PostMarkdown
                         message={message}
                         imageProps={this.imageProps}
-                        isRHS={isRHS}
                         options={options}
                         post={post}
                         channelId={post.channel_id}

webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap

@@ -49,7 +49,6 @@ exports[`components/ProfilePicture should match snapshot, profile and src, defau
       hasMention={false}
       hide={[Function]}
       isBusy={true}
-      isRHS={false}
       src="http://example.com/image.png"
       userId="uid"
     />

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

@@ -42,7 +42,6 @@ describe('components/ProfilePicture', () => {
         const props: Props = {
             ...baseProps,
             size: 'xl',
-            isRHS: true,
             hasMention: true,
         };
         const wrapper = shallow(
@@ -69,7 +68,6 @@ describe('components/ProfilePicture', () => {
             ...baseProps,
             username: 'username',
             size: 'xs',
-            isRHS: true,
             hasMention: true,
         };
         const wrapper = shallow(

webapp/channels/src/components/profile_picture/profile_picture.tsx

@@ -20,7 +20,6 @@ type Props = {
     hasMention?: boolean;
     isBusy?: boolean;
     isEmoji?: boolean;
-    isRHS?: boolean;
     profileSrc?: string;
     size?: ComponentProps<typeof Avatar>['size'];
     src: string;
@@ -42,7 +41,6 @@ type Props = {
 export default class ProfilePicture extends React.PureComponent<Props> {
     public static defaultProps = {
         size: 'md',
-        isRHS: false,
         isEmoji: false,
         hasMention: false,
         wrapperClass: '',
@@ -81,7 +79,6 @@ export default class ProfilePicture extends React.PureComponent<Props> {
                             src={profileSrc}
                             isBusy={this.props.isBusy}
                             hide={this.hideProfilePopover}
-                            isRHS={this.props.isRHS}
                             channelId={this.props.channelId}
                             hasMention={this.props.hasMention}
                             overwriteIcon={this.props.overwriteIcon}

webapp/channels/src/components/profile_popover/__snapshots__/profile_popover.test.tsx.snap

@@ -3566,7 +3566,6 @@ exports[`components/ProfilePopover should show the start call button when isCall
       isCustomStatusExpired={false}
       isInCurrentTeam={true}
       isMobileView={false}
-      isRHS={false}
       isTeamAdmin={false}
       lastActivityTimestamp={1632146562846}
       src="src"

webapp/channels/src/components/profile_popover/profile_popover.tsx

@@ -94,11 +94,6 @@ export interface ProfilePopoverProps extends Omit<React.ComponentProps<typeof Po
      */
     returnFocus?: () => void;
 
-    /**
-     * Set to true if the popover was opened from the right-hand
-     * sidebar (comment thread, search results, etc.)
-     */
-    isRHS?: boolean;
     isBusy?: boolean;
     isMobileView: boolean;
 
@@ -211,7 +206,6 @@ class ProfilePopover extends React.PureComponent<ProfilePopoverProps, ProfilePop
         return 'ProfilePopover';
     }
     static defaultProps = {
-        isRHS: false,
         hasMention: false,
         status: UserStatuses.OFFLINE,
         customStatus: null,
@@ -430,7 +424,7 @@ class ProfilePopover extends React.PureComponent<ProfilePopoverProps, ProfilePop
         }
 
         const keysToBeRemoved: Array<keyof ProfilePopoverProps> = ['user', 'userId', 'channelId', 'src', 'status', 'hideStatus', 'isBusy',
-            'hide', 'isRHS', 'hasMention', 'enableTimezone', 'currentUserId', 'currentTeamId', 'teamUrl', 'actions', 'isTeamAdmin',
+            'hide', 'hasMention', 'enableTimezone', 'currentUserId', 'currentTeamId', 'teamUrl', 'actions', 'isTeamAdmin',
             'isChannelAdmin', 'canManageAnyChannelMembersInCurrentTeam', 'intl'];
         const popoverProps: React.ComponentProps<typeof Popover> = Utils.deleteKeysFromObject({...this.props},
             keysToBeRemoved);

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_direct_channel/__snapshots__/sidebar_direct_channel.test.tsx.snap

@@ -26,7 +26,6 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
     <ProfilePicture
       hasMention={false}
       isEmoji={false}
-      isRHS={false}
       newStatusIcon={true}
       popoverPlacement="right"
       size="xs"
@@ -67,7 +66,6 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
     <ProfilePicture
       hasMention={false}
       isEmoji={false}
-      isRHS={false}
       newStatusIcon={true}
       popoverPlacement="right"
       size="xs"
@@ -109,7 +107,6 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
     <ProfilePicture
       hasMention={false}
       isEmoji={false}
-      isRHS={false}
       newStatusIcon={true}
       popoverPlacement="right"
       size="xs"

webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx

@@ -4,8 +4,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import EventEmitter from 'mattermost-redux/utils/event_emitter';
-
 import QuickInput from 'components/quick_input';
 import Constants, {A11yCustomEventTypes} from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
@@ -104,11 +102,6 @@ export default class SuggestionBox extends React.PureComponent {
          */
         onItemSelected: PropTypes.func,
 
-        /**
-         * Flags if the suggestion_box is for the RHS (Reply).
-         */
-        isRHS: PropTypes.bool,
-
         /**
          * The number of characters required to show the suggestion list, defaults to 1
          */
@@ -140,11 +133,6 @@ export default class SuggestionBox extends React.PureComponent {
          */
         contextId: PropTypes.string,
 
-        /**
-         * If true, listen for clicks on a mention and populate the input with said mention, defaults to false
-         */
-        listenForMentionKeyClick: PropTypes.bool,
-
         /**
          * Allows parent to access received suggestions
          */
@@ -172,12 +160,10 @@ export default class SuggestionBox extends React.PureComponent {
         renderNoResults: false,
         shouldSearchCompleteText: false,
         completeOnTab: true,
-        isRHS: false,
         requiredCharacters: 1,
         openOnFocus: false,
         openWhenEmpty: false,
         replaceAllInputOnSelect: false,
-        listenForMentionKeyClick: false,
         forceSuggestionsWhenBlur: false,
         alignWithTextbox: false,
     };
@@ -221,16 +207,9 @@ export default class SuggestionBox extends React.PureComponent {
     }
 
     componentDidMount() {
-        if (this.props.listenForMentionKeyClick) {
-            EventEmitter.addListener('mention_key_click', this.handleMentionKeyClick);
-        }
         this.handlePretextChanged(this.pretext);
     }
 
-    componentWillUnmount() {
-        EventEmitter.removeListener('mention_key_click', this.handleMentionKeyClick);
-    }
-
     componentDidUpdate(prevProps) {
         const {value} = this.props;
 
@@ -248,21 +227,6 @@ export default class SuggestionBox extends React.PureComponent {
         }
     }
 
-    handleMentionKeyClick = (mentionKey, isRHS) => {
-        if (this.props.isRHS !== isRHS) {
-            return;
-        }
-
-        let insertText = '@' + mentionKey;
-
-        // if the current text does not end with a whitespace, then insert a space
-        if (this.props.value && (/[^\s]$/).test(this.props.value)) {
-            insertText = ' ' + insertText;
-        }
-
-        this.addTextAtCaret(insertText, '');
-    };
-
     getTextbox = () => {
         if (!this.inputRef.current) {
             return null;
@@ -792,7 +756,6 @@ export default class SuggestionBox extends React.PureComponent {
         Reflect.deleteProperty(props, 'onComposition');
         Reflect.deleteProperty(props, 'onItemSelected');
         Reflect.deleteProperty(props, 'completeOnTab');
-        Reflect.deleteProperty(props, 'isRHS');
         Reflect.deleteProperty(props, 'requiredCharacters');
         Reflect.deleteProperty(props, 'openOnFocus');
         Reflect.deleteProperty(props, 'openWhenEmpty');
@@ -802,7 +765,6 @@ export default class SuggestionBox extends React.PureComponent {
         Reflect.deleteProperty(props, 'replaceAllInputOnSelect');
         Reflect.deleteProperty(props, 'renderDividers');
         Reflect.deleteProperty(props, 'contextId');
-        Reflect.deleteProperty(props, 'listenForMentionKeyClick');
         Reflect.deleteProperty(props, 'forceSuggestionsWhenBlur');
         Reflect.deleteProperty(props, 'onSuggestionsReceived');
         Reflect.deleteProperty(props, 'actions');

webapp/channels/src/components/terms_of_service/terms_of_service.tsx

@@ -188,7 +188,7 @@ export default class TermsOfService extends React.PureComponent<TermsOfServicePr
                                 className='medium-center'
                                 data-testid='termsOfService'
                             >
-                                {messageHtmlToComponent(this.formattedText(this.state.customTermsOfServiceText), false, {mentions: false})}
+                                {messageHtmlToComponent(this.formattedText(this.state.customTermsOfServiceText), {mentions: false})}
                             </div>
                         </div>
                         <div className='terms-of-service__footer medium-center'>

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

@@ -71,10 +71,8 @@ describe('components/TextBox', () => {
                 handlePostError={() => {}}
                 suggestionListPosition='top'
                 emojiEnabled={true}
-                isRHS={true}
                 disabled={true}
                 badConnection={true}
-                listenForMentionKeyClick={true}
                 preview={true}
                 openWhenEmpty={true}
             />,

webapp/channels/src/components/textbox/textbox.tsx

@@ -51,11 +51,9 @@ export type Props = {
     suggestionListPosition?: React.ComponentProps<typeof SuggestionList>['position'];
     alignWithTextbox?: boolean;
     emojiEnabled?: boolean;
-    isRHS?: boolean;
     characterLimit: number;
     disabled?: boolean;
     badConnection?: boolean;
-    listenForMentionKeyClick?: boolean;
     currentUserId: string;
     currentTeamId: string;
     preview?: boolean;
@@ -84,8 +82,6 @@ export default class Textbox extends React.PureComponent<Props> {
 
     static defaultProps = {
         supportsCommands: true,
-        isRHS: false,
-        listenForMentionKeyClick: false,
         inputComponent: AutosizeTextarea,
         suggestionList: SuggestionList,
     };
@@ -292,7 +288,6 @@ export default class Textbox extends React.PureComponent<Props> {
                     onBlur={this.handleBlur}
                 >
                     <PostMarkdown
-                        isRHS={this.props.isRHS}
                         message={this.props.value}
                         mentionKeys={[]}
                         channelId={this.props.channelId}
@@ -332,10 +327,8 @@ export default class Textbox extends React.PureComponent<Props> {
                     channelId={this.props.channelId}
                     value={this.props.value}
                     renderDividers={ALL}
-                    isRHS={this.props.isRHS}
                     disabled={this.props.disabled}
                     contextId={this.props.channelId}
-                    listenForMentionKeyClick={this.props.listenForMentionKeyClick}
                     openWhenEmpty={this.props.openWhenEmpty}
                     alignWithTextbox={this.props.alignWithTextbox}
                 />

webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap

@@ -11,7 +11,6 @@ exports[`components/UserProfile should match snapshot 1`] = `
         hide={[Function]}
         hideStatus={false}
         isBusy={false}
-        isRHS={false}
         overwriteName=""
         src="/api/v4/users/undefined/image?_=0"
         userId="user_id"
@@ -46,7 +45,6 @@ exports[`components/UserProfile should match snapshot, when displayUsername is e
         hide={[Function]}
         hideStatus={false}
         isBusy={false}
-        isRHS={false}
         overwriteName=""
         src="/api/v4/users/undefined/image?_=0"
         userId="user_id"
@@ -89,7 +87,6 @@ exports[`components/UserProfile should match snapshot, when user is shared 1`] =
         hide={[Function]}
         hideStatus={false}
         isBusy={false}
-        isRHS={false}
         overwriteName=""
         src="/api/v4/users/undefined/image?_=0"
         userId="user_id"
@@ -128,7 +125,6 @@ exports[`components/UserProfile should match snapshot, with colorization 1`] = `
         hide={[Function]}
         hideStatus={false}
         isBusy={false}
-        isRHS={false}
         overwriteName=""
         src="/api/v4/users/undefined/image?_=0"
         userId="user_id"

webapp/channels/src/components/user_profile/user_profile.tsx

@@ -145,7 +145,6 @@ export default class UserProfile extends PureComponent<UserProfileProps> {
                             isBusy={isBusy}
                             hide={this.hideProfilePopover}
                             hideStatus={hideStatus}
-                            isRHS={isRHS}
                             hasMention={hasMention}
                             overwriteName={overwriteName}
                             overwriteIcon={overwriteIcon}

webapp/channels/src/plugins/export.js

@@ -45,7 +45,22 @@ window.Luxon = require('luxon');
 window.StyledComponents = require('styled-components');
 
 // Functions exposed on window for plugins to use.
-window.PostUtils = {formatText, messageHtmlToComponent};
+window.PostUtils = {
+    formatText,
+    messageHtmlToComponent: (html, ...otherArgs) => {
+        // Previously, this function took an extra isRHS argument as the second parameter. For backwards compatibility,
+        // support calling this as either messageHtmlToComponent(html, options) or messageHtmlToComponent(html, isRhs, options)
+
+        let options;
+        if (otherArgs.length === 2) {
+            options = otherArgs[1];
+        } else if (otherArgs.length === 1 && typeof otherArgs[0] === 'object') {
+            options = otherArgs[0];
+        }
+
+        return messageHtmlToComponent(html, options);
+    },
+};
 window.openInteractiveDialog = openInteractiveDialog;
 window.useNotifyAdmin = useNotifyAdmin;
 window.WebappUtils = {

webapp/channels/src/plugins/export.test.js

@@ -0,0 +1,38 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import messageHtmlToComponent from 'utils/message_html_to_component';
+
+import './export';
+
+jest.mock('utils/message_html_to_component');
+
+describe('messageHtmlToComponent wrapper', () => {
+    const message = 'test';
+    const options = {emoji: true, images: false};
+    const isRHS = false;
+
+    test('should call messageHtmlToComponent properly with only message', () => {
+        window.PostUtils.messageHtmlToComponent(message);
+
+        expect(messageHtmlToComponent).toHaveBeenCalledWith(message, undefined);
+    });
+
+    test('should call messageHtmlToComponent properly with message and options', () => {
+        window.PostUtils.messageHtmlToComponent(message, options);
+
+        expect(messageHtmlToComponent).toHaveBeenCalledWith(message, options);
+    });
+
+    test('should call messageHtmlToComponent properly with only message when deprecated isRHS parameter is passed', () => {
+        window.PostUtils.messageHtmlToComponent(message, isRHS);
+
+        expect(messageHtmlToComponent).toHaveBeenCalledWith(message, undefined);
+    });
+
+    test('should call messageHtmlToComponent properly with message and options when deprecated isRHS parameter is passed', () => {
+        window.PostUtils.messageHtmlToComponent(message, isRHS, options);
+
+        expect(messageHtmlToComponent).toHaveBeenCalledWith(message, options);
+    });
+});

webapp/channels/src/plugins/test/__snapshots__/post_type.test.jsx.snap

@@ -84,7 +84,6 @@ exports[`plugins/PostMessageView should match snapshot with no extended post typ
           "onImageLoaded": [Function],
         }
       }
-      isRHS={false}
       mentionKeys={Array []}
       message="this is some text"
       options={Object {}}

webapp/channels/src/utils/__snapshots__/message_html_to_component.test.jsx.snap

@@ -12,7 +12,6 @@ exports[`messageHtmlToComponent At mention 1`] = `
         disableGroupHighlight={false}
         disableHighlight={false}
         hasMention={true}
-        isRHS={false}
         mentionName="joram"
       >
         @joram
@@ -31,7 +30,6 @@ exports[`messageHtmlToComponent At mention 2`] = `
       disableGroupHighlight={false}
       disableHighlight={true}
       hasMention={true}
-      isRHS={false}
       mentionName="joram"
     >
       @joram
@@ -49,7 +47,6 @@ exports[`messageHtmlToComponent At mention with group highlight disabled 1`] = `
       disableGroupHighlight={false}
       disableHighlight={false}
       hasMention={true}
-      isRHS={false}
       mentionName="developers"
     >
       @developers
@@ -67,7 +64,6 @@ exports[`messageHtmlToComponent At mention with group highlight disabled 2`] = `
       disableGroupHighlight={true}
       disableHighlight={false}
       hasMention={true}
-      isRHS={false}
       mentionName="developers"
     >
       @developers

webapp/channels/src/utils/message_html_to_component.jsx

@@ -29,7 +29,7 @@ import AtPlanMention from 'components/at_plan_mention';
  * - hasPluginTooltips - If specified, the LinkTooltip component is placed inside links. Defaults to false.
  * - channelId = If specified, to be passed along to ProfilePopover via AtMention
  */
-export function messageHtmlToComponent(html, isRHS, options = {}) {
+export function messageHtmlToComponent(html, options = {}) {
     if (!html) {
         return null;
     }
@@ -101,7 +101,6 @@ export function messageHtmlToComponent(html, isRHS, options = {}) {
                 const callAtMention = (
                     <AtMention
                         mentionName={mentionName}
-                        isRHS={isRHS}
                         hasMention={true}
                         disableHighlight={!mentionHighlight}
                         disableGroupHighlight={disableGroupHighlight}

webapp/channels/src/utils/message_html_to_component.test.jsx

@@ -43,7 +43,7 @@ const myFunction = () => {
 `;
         const html = TextFormatting.formatText(input);
 
-        expect(messageHtmlToComponent(html, false, {postId: 'randompostid'})).toMatchSnapshot();
+        expect(messageHtmlToComponent(html, {postId: 'randompostid'})).toMatchSnapshot();
     });
 
     test('html', () => {
@@ -53,7 +53,7 @@ const myFunction = () => {
 `;
         const html = TextFormatting.formatText(input);
 
-        expect(messageHtmlToComponent(html, false, {postId: 'randompostid'})).toMatchSnapshot();
+        expect(messageHtmlToComponent(html, {postId: 'randompostid'})).toMatchSnapshot();
     });
 
     test('link without enabled tooltip plugins', () => {
@@ -67,14 +67,14 @@ const myFunction = () => {
         const input = 'lorem ipsum www.dolor.com sit amet';
         const html = TextFormatting.formatText(input);
 
-        expect(messageHtmlToComponent(html, false, {hasPluginTooltips: true})).toMatchSnapshot();
+        expect(messageHtmlToComponent(html, {hasPluginTooltips: true})).toMatchSnapshot();
     });
 
     test('Inline markdown image', () => {
         const options = {markdown: true};
         const html = TextFormatting.formatText('![Mattermost](/images/icon.png) and a [link](link)', options);
 
-        const component = messageHtmlToComponent(html, false, {
+        const component = messageHtmlToComponent(html, {
             hasPluginTooltips: false,
             postId: 'post_id',
             postType: Constants.PostTypes.HEADER_CHANGE,
@@ -87,7 +87,7 @@ const myFunction = () => {
         const options = {markdown: true};
         const html = TextFormatting.formatText('[![Mattermost](images/icon.png)](images/icon.png)', options);
 
-        const component = messageHtmlToComponent(html, false, {
+        const component = messageHtmlToComponent(html, {
             hasPluginTooltips: false,
             postId: 'post_id',
             postType: Constants.PostTypes.HEADER_CHANGE,
@@ -100,7 +100,7 @@ const myFunction = () => {
         const options = {mentionHighlight: true, atMentions: true, mentionKeys: [{key: '@joram'}]};
         let html = TextFormatting.formatText('@joram', options);
 
-        let component = messageHtmlToComponent(html, false, {mentionHighlight: true});
+        let component = messageHtmlToComponent(html, {mentionHighlight: true});
         expect(component).toMatchSnapshot();
         expect(shallow(component).find(AtMention).prop('disableHighlight')).toBe(false);
 
@@ -108,7 +108,7 @@ const myFunction = () => {
 
         html = TextFormatting.formatText('@joram', options);
 
-        component = messageHtmlToComponent(html, false, {mentionHighlight: false});
+        component = messageHtmlToComponent(html, {mentionHighlight: false});
         expect(component).toMatchSnapshot();
         expect(shallow(component).find(AtMention).prop('disableHighlight')).toBe(true);
     });
@@ -117,7 +117,7 @@ const myFunction = () => {
         const options = {mentionHighlight: true, atMentions: true, mentionKeys: [{key: '@joram'}]};
         let html = TextFormatting.formatText('@developers', options);
 
-        let component = messageHtmlToComponent(html, false, {disableGroupHighlight: false});
+        let component = messageHtmlToComponent(html, {disableGroupHighlight: false});
         expect(component).toMatchSnapshot();
         expect(shallow(component).find(AtMention).prop('disableGroupHighlight')).toBe(false);
 
@@ -125,7 +125,7 @@ const myFunction = () => {
 
         html = TextFormatting.formatText('@developers', options);
 
-        component = messageHtmlToComponent(html, false, {disableGroupHighlight: true});
+        component = messageHtmlToComponent(html, {disableGroupHighlight: true});
         expect(component).toMatchSnapshot();
         expect(shallow(component).find(AtMention).prop('disableGroupHighlight')).toBe(true);
     });