Revert "[GH-5915] Clicking on @mention of a user in a post shows the profile popover (#6129)" (#6289)

This reverts commit 83f819451a80a767170b927eb2f0d5ed63f03239.

14 files changed, 76 insertions, 238 deletions

diff --git a/webapp/components/add_users_to_team/add_users_to_team.jsx b/webapp/components/add_users_to_team/add_users_to_team.jsx
index ee22bbed5..ae6fd8c4e 100644
--- a/webapp/components/add_users_to_team/add_users_to_team.jsx
+++ b/webapp/components/add_users_to_team/add_users_to_team.jsx
@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 import MultiSelect from 'components/multiselect/multiselect.jsx';
-import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
+import ProfilePicture from 'components/profile_picture.jsx';
 
 import {addUsersToTeam} from 'actions/team_actions.jsx';
 import {searchUsersNotInTeam} from 'actions/user_actions.jsx';
diff --git a/webapp/components/more_direct_channels/more_direct_channels.jsx b/webapp/components/more_direct_channels/more_direct_channels.jsx
index 743236ce6..50e2c4e48 100644
--- a/webapp/components/more_direct_channels/more_direct_channels.jsx
+++ b/webapp/components/more_direct_channels/more_direct_channels.jsx
@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 import MultiSelect from 'components/multiselect/multiselect.jsx';
-import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
+import ProfilePicture from 'components/profile_picture.jsx';
 
 import {searchUsers} from 'actions/user_actions.jsx';
 import {openDirectChannelToUser, openGroupChannelToUsers} from 'actions/channel_actions.jsx';
diff --git a/webapp/components/popover_list_members/popover_list_members.jsx b/webapp/components/popover_list_members/popover_list_members.jsx
index 458ae8f24..cf6042943 100644
--- a/webapp/components/popover_list_members/popover_list_members.jsx
+++ b/webapp/components/popover_list_members/popover_list_members.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
+import ProfilePicture from 'components/profile_picture.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index cf25b28e4..f5c96d2bc 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -3,7 +3,7 @@
 
 import PostHeader from './post_header.jsx';
 import PostBody from './post_body.jsx';
-import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
+import ProfilePicture from 'components/profile_picture.jsx';
 
 import Constants from 'utils/constants.jsx';
 const ActionTypes = Constants.ActionTypes;
diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx
index e19285963..9de0b7e79 100644
--- a/webapp/components/post_view/components/post_header.jsx
+++ b/webapp/components/post_view/components/post_header.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import UserProfile from 'components/profile_popover/username_profile_popover.jsx';
+import UserProfile from 'components/user_profile.jsx';
 import PostInfo from './post_info.jsx';
 import {FormattedMessage} from 'react-intl';
 
diff --git a/webapp/components/post_view/components/post_message_view.jsx b/webapp/components/post_view/components/post_message_view.jsx
index db522c974..5b0790f36 100644
--- a/webapp/components/post_view/components/post_message_view.jsx
+++ b/webapp/components/post_view/components/post_message_view.jsx
@@ -3,9 +3,6 @@
 
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Parser, ProcessNodeDefinitions} from 'html-to-react';
-
-import AtMentionProfile from 'components/profile_popover/atmention_profile_popover.jsx';
 
 import Constants from 'utils/constants.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
@@ -91,38 +88,6 @@ export default class PostMessageView extends React.Component {
         );
     }
 
-    postMessageHtmlToComponent(html) {
-        const parser = new Parser();
-        const attrib = 'data-mention';
-        const processNodeDefinitions = new ProcessNodeDefinitions(React);
-
-        function isValidNode() {
-            return true;
-        }
-
-        const processingInstructions = [
-            {
-                replaceChildren: true,
-                shouldProcessNode: (node) => node.attribs && node.attribs[attrib] && this.props.usernameMap.hasOwnProperty(node.attribs[attrib]),
-                processNode: (node) => {
-                    const username = node.attribs[attrib];
-                    return (
-                        <AtMentionProfile
-                            user={this.props.usernameMap[username]}
-                            username={username}
-                        />
-                    );
-                }
-            },
-            {
-                shouldProcessNode: () => true,
-                processNode: processNodeDefinitions.processDefaultNode
-            }
-        ];
-
-        return parser.parseWithInstructions(html, isValidNode, processingInstructions);
-    }
-
     render() {
         if (this.props.post.state === Constants.POST_DELETED) {
             return this.renderDeletedPost();
@@ -146,17 +111,14 @@ export default class PostMessageView extends React.Component {
             return <div>{renderedSystemMessage}</div>;
         }
 
-        const htmlFormattedText = TextFormatting.formatText(this.props.post.message, options);
-        const postMessageComponent = this.postMessageHtmlToComponent(htmlFormattedText);
-
         return (
             <div>
                 <span
                     id={this.props.isLastPost ? 'lastPostMessageText' : null}
                     className='post-message__text'
                     onClick={Utils.handleFormattedTextClick}
+                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, options)}}
                 />
-                {postMessageComponent}
                 {this.renderEditedIndicator()}
             </div>
         );
diff --git a/webapp/components/profile_popover/picture_profile_popover.jsx b/webapp/components/profile_picture.jsx
index 2c2b91b25..b7ee08785 100644
--- a/webapp/components/profile_popover/picture_profile_popover.jsx
+++ b/webapp/components/profile_picture.jsx
@@ -1,11 +1,10 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
-
 import ProfilePopover from './profile_popover.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
-import StatusIcon from 'components/status_icon.jsx';
+import StatusIcon from './status_icon.jsx';
 import {OverlayTrigger} from 'react-bootstrap';
 
 export default class ProfilePicture extends React.Component {
diff --git a/webapp/components/profile_popover/profile_popover.jsx b/webapp/components/profile_popover.jsx
index a32b7904b..63bd99ac4 100644
--- a/webapp/components/profile_popover/profile_popover.jsx
+++ b/webapp/components/profile_popover.jsx
@@ -23,19 +23,11 @@ export default class ProfilePopover extends React.Component {
 
         this.initWebrtc = this.initWebrtc.bind(this);
         this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this);
-        this.generateImage = this.generateImage.bind(this);
-        this.generateFullname = this.generateFullname.bind(this);
-        this.generatePosition = this.generatePosition.bind(this);
-        this.generateWebrtc = this.generateWebrtc.bind(this);
-        this.generateEmail = this.generateEmail.bind(this);
-        this.generateDirectMessage = this.generateDirectMessage.bind(this);
-
         this.state = {
             currentUserId: UserStore.getCurrentId(),
             loadingDMChannel: -1
         };
     }
-
     shouldComponentUpdate(nextProps) {
         if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
             return true;
@@ -110,63 +102,19 @@ export default class ProfilePopover extends React.Component {
         }
     }
 
-    generateImage(src) {
-        return (
-            <img
-                className='user-popover__image'
-                src={src}
-                height='128'
-                width='128'
-                key='user-popover-image'
-            />
-        );
-    }
-
-    generateFullname() {
-        const fullname = Utils.getFullName(this.props.user);
-        if (fullname) {
-            return (
-                <OverlayTrigger
-                    delayShow={Constants.WEBRTC_TIME_DELAY}
-                    placement='top'
-                    overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>}
-                >
-                    <div
-                        className='overflow--ellipsis text-nowrap padding-bottom'
-                    >
-                        {fullname}
-                    </div>
-                </OverlayTrigger>
-            );
-        }
-
-        return '';
-    }
-
-    generatePosition() {
-        if (this.props.user.hasOwnProperty('position')) {
-            const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH);
-            return (
-                <OverlayTrigger
-                    delayShow={Constants.WEBRTC_TIME_DELAY}
-                    placement='top'
-                    overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>}
-                >
-                    <div
-                        className='overflow--ellipsis text-nowrap padding-bottom'
-                    >
-                        {position}
-                    </div>
-                </OverlayTrigger>
-            );
-        }
-
-        return '';
-    }
-
-    generateWebrtc() {
+    render() {
+        const popoverProps = Object.assign({}, this.props);
+        delete popoverProps.user;
+        delete popoverProps.src;
+        delete popoverProps.status;
+        delete popoverProps.isBusy;
+        delete popoverProps.hide;
+
+        let webrtc;
         const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
         const webrtcEnabled = global.mm_config.EnableWebrtc === 'true' && userMedia && Utils.isFeatureEnabled(PreReleaseFeatures.WEBRTC_PREVIEW);
+
         if (webrtcEnabled && this.props.user.id !== this.state.currentUserId) {
             const isOnline = this.props.status !== UserStatuses.OFFLINE;
             let webrtcMessage;
@@ -193,7 +141,7 @@ export default class ProfilePopover extends React.Component {
                 );
             }
 
-            return (
+            webrtc = (
                 <div
                     data-toggle='tooltip'
                     key='makeCall'
@@ -212,15 +160,54 @@ export default class ProfilePopover extends React.Component {
             );
         }
 
-        return '';
-    }
+        var dataContent = [];
+        dataContent.push(
+            <img
+                className='user-popover__image'
+                src={this.props.src}
+                height='128'
+                width='128'
+                key='user-popover-image'
+            />
+        );
+
+        const fullname = Utils.getFullName(this.props.user);
+        if (fullname) {
+            dataContent.push(
+                <OverlayTrigger
+                    delayShow={Constants.WEBRTC_TIME_DELAY}
+                    placement='top'
+                    overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>}
+                >
+                    <div
+                        className='overflow--ellipsis text-nowrap padding-bottom'
+                    >
+                        {fullname}
+                    </div>
+                </OverlayTrigger>
+            );
+        }
 
-    generateEmail() {
-        const email = this.props.user.hasOwnProperty('email') ? this.props.user.email : '';
-        const showEmail = (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user === UserStore.getCurrentUser());
+        if (this.props.user.position) {
+            const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH);
+            dataContent.push(
+                <OverlayTrigger
+                    delayShow={Constants.WEBRTC_TIME_DELAY}
+                    placement='top'
+                    overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>}
+                >
+                    <div
+                        className='overflow--ellipsis text-nowrap padding-bottom'
+                    >
+                        {position}
+                    </div>
+                </OverlayTrigger>
+            );
+        }
 
-        if (email !== '' && showEmail) {
-            return (
+        const email = this.props.user.email;
+        if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user === UserStore.getCurrentUser()) {
+            dataContent.push(
                 <div
                     data-toggle='tooltip'
                     title={email}
@@ -236,12 +223,8 @@ export default class ProfilePopover extends React.Component {
             );
         }
 
-        return '';
-    }
-
-    generateDirectMessage() {
         if (this.props.user.id !== UserStore.getCurrentId()) {
-            return (
+            dataContent.push(
                 <div
                     data-toggle='tooltip'
                     key='user-popover-dm'
@@ -260,27 +243,16 @@ export default class ProfilePopover extends React.Component {
                     </a>
                 </div>
             );
+            dataContent.push(webrtc);
         }
 
-        return '';
-    }
-
-    render() {
         return (
             <Popover
-                arrowOffsetLeft={this.props.arrowOffsetLeft}
-                arrowOffsetTop={this.props.arrowOffsetTop}
-                positionLeft={this.props.positionLeft}
-                positionTop={this.props.positionTop}
+                {...popoverProps}
                 title={'@' + this.props.user.username}
                 id='user-profile-popover'
             >
-                {this.generateImage(this.props.src)}
-                {this.generateFullname()}
-                {this.generatePosition()}
-                {this.generateEmail()}
-                {this.generateDirectMessage()}
-                {this.generateWebrtc()}
+                {dataContent}
             </Popover>
         );
     }
diff --git a/webapp/components/profile_popover/atmention_profile_popover.jsx b/webapp/components/profile_popover/atmention_profile_popover.jsx
deleted file mode 100644
index 47c625f64..000000000
--- a/webapp/components/profile_popover/atmention_profile_popover.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import ProfilePopover from './profile_popover.jsx';
-import * as Utils from 'utils/utils.jsx';
-import Client from 'client/web_client.jsx';
-
-import {OverlayTrigger} from 'react-bootstrap';
-
-import React from 'react';
-
-export default class AtMentionProfile extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.hideProfilePopover = this.hideProfilePopover.bind(this);
-    }
-
-    shouldComponentUpdate(nextProps) {
-        if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
-            return true;
-        }
-
-        if (nextProps.overwriteImage !== this.props.overwriteImage) {
-            return true;
-        }
-
-        if (nextProps.disablePopover !== this.props.disablePopover) {
-            return true;
-        }
-
-        if (nextProps.displayNameType !== this.props.displayNameType) {
-            return true;
-        }
-
-        if (nextProps.status !== this.props.status) {
-            return true;
-        }
-
-        if (nextProps.isBusy !== this.props.isBusy) {
-            return true;
-        }
-
-        return false;
-    }
-
-    hideProfilePopover() {
-        this.refs.overlay.hide();
-    }
-
-    render() {
-        let profileImg = '';
-        if (this.props.user) {
-            profileImg = Client.getUsersRoute() + '/' + this.props.user.id + '/image?time=' + this.props.user.last_picture_update;
-        }
-
-        if (this.props.disablePopover) {
-            return <a className='mention-link'>{'@' + this.props.username}</a>;
-        }
-
-        return (
-            <OverlayTrigger
-                ref='overlay'
-                trigger='click'
-                placement='right'
-                rootClose={true}
-                overlay={
-                    <ProfilePopover
-                        user={this.props.user}
-                        src={profileImg}
-                        status={this.props.status}
-                        isBusy={this.props.isBusy}
-                        hide={this.hideProfilePopover}
-                    />
-                }
-            >
-                <a className='mention-link'>{'@' + this.props.username}</a>
-            </OverlayTrigger>
-        );
-    }
-}
-
-AtMentionProfile.defaultProps = {
-    overwriteImage: '',
-    disablePopover: false
-};
-AtMentionProfile.propTypes = {
-    user: React.PropTypes.object.isRequired,
-    username: React.PropTypes.string.isRequired,
-    overwriteImage: React.PropTypes.string,
-    disablePopover: React.PropTypes.bool,
-    displayNameType: React.PropTypes.string,
-    status: React.PropTypes.string,
-    isBusy: React.PropTypes.bool
-};
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index d7b899b33..10cd5fb55 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -1,11 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import UserProfile from './profile_popover/username_profile_popover.jsx';
+import UserProfile from './user_profile.jsx';
 import FileAttachmentListContainer from './file_attachment_list_container.jsx';
 import PendingPostOptions from 'components/post_view/components/pending_post_options.jsx';
 import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
-import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
+import ProfilePicture from 'components/profile_picture.jsx';
 import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx';
 import RhsDropdown from 'components/rhs_dropdown.jsx';
 
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 32d03e524..41dd92e91 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -1,11 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import UserProfile from './profile_popover/username_profile_popover.jsx';
+import UserProfile from './user_profile.jsx';
 import PostBodyAdditionalContent from 'components/post_view/components/post_body_additional_content.jsx';
 import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
 import FileAttachmentListContainer from './file_attachment_list_container.jsx';
-import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
+import ProfilePicture from 'components/profile_picture.jsx';
 import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx';
 import RhsDropdown from 'components/rhs_dropdown.jsx';
 
diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx
index 846840e40..09ea8c427 100644
--- a/webapp/components/search_results_item.jsx
+++ b/webapp/components/search_results_item.jsx
@@ -3,9 +3,9 @@
 
 import $ from 'jquery';
 import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
-import UserProfile from './profile_popover/username_profile_popover.jsx';
+import UserProfile from './user_profile.jsx';
 import FileAttachmentListContainer from './file_attachment_list_container.jsx';
-import ProfilePicture from './profile_popover/picture_profile_popover.jsx';
+import ProfilePicture from './profile_picture.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
diff --git a/webapp/components/user_list_row.jsx b/webapp/components/user_list_row.jsx
index e4e937432..3a7fc5d1c 100644
--- a/webapp/components/user_list_row.jsx
+++ b/webapp/components/user_list_row.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
+import ProfilePicture from 'components/profile_picture.jsx';
 
 import UserStore from 'stores/user_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
diff --git a/webapp/components/profile_popover/username_profile_popover.jsx b/webapp/components/user_profile.jsx
index 37993094b..37993094b 100644
--- a/webapp/components/profile_popover/username_profile_popover.jsx
+++ b/webapp/components/user_profile.jsx