PLT-4457 Added AtMention component to better render at mentions (#6563)

* Moved Utils.searchForTerm into an action

* Added easier importing of index.jsx files

* PLT-4457 Added AtMention component to better render at mentions

* Fixed client unit tests

* Fixed merge conflict

* Fixed merge conflicts

11 files changed, 211 insertions, 112 deletions

diff --git a/webapp/actions/post_actions.jsx b/webapp/actions/post_actions.jsx
index 1eb1f4feb..81935f615 100644
--- a/webapp/actions/post_actions.jsx
+++ b/webapp/actions/post_actions.jsx
@@ -351,3 +351,11 @@ export function increasePostVisibility(channelId, focusedPostId) {
         return posts.order.length >= POST_INCREASE_AMOUNT;
     };
 }
+
+export function searchForTerm(term) {
+    AppDispatcher.handleServerAction({
+        type: ActionTypes.RECEIVED_SEARCH_TERM,
+        term,
+        do_search: true
+    });
+}
diff --git a/webapp/components/at_mention/at_mention.jsx b/webapp/components/at_mention/at_mention.jsx
new file mode 100644
index 000000000..760884b88
--- /dev/null
+++ b/webapp/components/at_mention/at_mention.jsx
@@ -0,0 +1,79 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class AtMention extends React.PureComponent {
+    static propTypes = {
+        mentionName: PropTypes.string.isRequired,
+        usersByUsername: PropTypes.object.isRequired,
+        actions: PropTypes.shape({
+            searchForTerm: PropTypes.func.isRequired
+        }).isRequired
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            username: this.getUsernameFromMentionName(props)
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.mentionName !== this.props.mentionName || nextProps.usersByUsername !== this.props.usersByUsername) {
+            this.setState({
+                username: this.getUsernameFromMentionName(nextProps)
+            });
+        }
+    }
+
+    getUsernameFromMentionName(props) {
+        let mentionName = props.mentionName;
+
+        while (mentionName.length > 0) {
+            if (props.usersByUsername[mentionName]) {
+                return props.usersByUsername[mentionName].username;
+            }
+
+            // Repeatedly trim off trailing punctuation in case this is at the end of a sentence
+            if ((/[._-]$/).test(mentionName)) {
+                mentionName = mentionName.substring(0, mentionName.length - 1);
+            } else {
+                break;
+            }
+        }
+
+        return '';
+    }
+
+    search = (e) => {
+        e.preventDefault();
+
+        this.props.actions.searchForTerm(this.state.username);
+    }
+
+    render() {
+        const username = this.state.username;
+
+        if (!username) {
+            return <span>{'@' + this.props.mentionName}</span>;
+        }
+
+        const suffix = this.props.mentionName.substring(username.length);
+
+        return (
+            <span>
+                <a
+                    className='mention-link'
+                    href='#'
+                    onClick={this.search}
+                >
+                    {'@' + username}
+                </a>
+                {suffix}
+            </span>
+        );
+    }
+}
diff --git a/webapp/components/at_mention/index.jsx b/webapp/components/at_mention/index.jsx
new file mode 100644
index 000000000..c733158c6
--- /dev/null
+++ b/webapp/components/at_mention/index.jsx
@@ -0,0 +1,27 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+
+import {getUsersByUsername} from 'mattermost-redux/selectors/entities/users';
+
+import {searchForTerm} from 'actions/post_actions.jsx';
+
+import AtMention from './at_mention.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps,
+        usersByUsername: getUsersByUsername(state)
+    };
+}
+
+function mapDispatchToProps() {
+    return {
+        actions: {
+            searchForTerm
+        }
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AtMention);
diff --git a/webapp/components/post_view/post_body/post_body.jsx b/webapp/components/post_view/post_body/post_body.jsx
index a14141dcd..044b46c55 100644
--- a/webapp/components/post_view/post_body/post_body.jsx
+++ b/webapp/components/post_view/post_body/post_body.jsx
@@ -1,20 +1,23 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import * as Utils from 'utils/utils.jsx';
-import * as PostUtils from 'utils/post_utils.jsx';
-import {Posts} from 'mattermost-redux/constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import * as PostActions from 'actions/post_actions.jsx';
 
-import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message';
 import FileAttachmentListContainer from 'components/file_attachment_list';
+import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message';
 import PostBodyAdditionalContent from 'components/post_view/post_body_additional_content.jsx';
-import PostMessageContainer from 'components/post_view/post_message_view';
-import ReactionListContainer from 'components/post_view/reaction_list';
 import FailedPostOptions from 'components/post_view/failed_post_options';
+import PostMessageView from 'components/post_view/post_message_view';
+import ReactionListContainer from 'components/post_view/reaction_list';
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import {FormattedMessage} from 'react-intl';
+import * as Utils from 'utils/utils.jsx';
+import * as PostUtils from 'utils/post_utils.jsx';
+
+import {Posts} from 'mattermost-redux/constants';
 
 export default class PostBody extends React.PureComponent {
     static propTypes = {
@@ -89,7 +92,7 @@ export default class PostBody extends React.PureComponent {
                 name = (
                     <a
                         className='theme'
-                        onClick={Utils.searchForTerm.bind(null, username)}
+                        onClick={PostActions.searchForTerm.bind(null, username)}
                     >
                         {username}
                     </a>
@@ -156,7 +159,7 @@ export default class PostBody extends React.PureComponent {
                 className={postClass}
             >
                 {failedOptions}
-                <PostMessageContainer
+                <PostMessageView
                     lastPostCount={this.props.lastPostCount}
                     post={this.props.post}
                 />
diff --git a/webapp/components/post_view/post_message_view/post_message_view.jsx b/webapp/components/post_view/post_message_view/post_message_view.jsx
index 66a8d01f8..d066183ff 100644
--- a/webapp/components/post_view/post_message_view/post_message_view.jsx
+++ b/webapp/components/post_view/post_message_view/post_message_view.jsx
@@ -1,17 +1,21 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React from 'react';
+import {Parser, ProcessNodeDefinitions} from 'html-to-react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import AtMention from 'components/at_mention';
+
+import store from 'stores/redux_store.jsx';
+
 import * as PostUtils from 'utils/post_utils.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import {getChannelsNameMapInCurrentTeam} from 'mattermost-redux/selectors/entities/channels';
 import {Posts} from 'mattermost-redux/constants';
-import store from 'stores/redux_store.jsx';
 
 import {renderSystemMessage} from './system_message_helpers.jsx';
 
@@ -44,11 +48,6 @@ export default class PostMessageView extends React.PureComponent {
         mentionKeys: PropTypes.arrayOf(PropTypes.string),
 
         /*
-         * Object mapping usernames to users
-         */
-        usernameMap: PropTypes.object,
-
-        /*
          * The URL that the app is hosted on
          */
         siteUrl: PropTypes.string,
@@ -66,8 +65,7 @@ export default class PostMessageView extends React.PureComponent {
 
     static defaultProps = {
         options: {},
-        mentionKeys: [],
-        usernameMap: {}
+        mentionKeys: []
     };
 
     renderDeletedPost() {
@@ -96,6 +94,34 @@ export default class PostMessageView extends React.PureComponent {
         );
     }
 
+    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],
+                processNode: (node) => {
+                    const mentionName = node.attribs[attrib];
+
+                    return <AtMention mentionName={mentionName}/>;
+                }
+            },
+            {
+                shouldProcessNode: () => true,
+                processNode: processNodeDefinitions.processDefaultNode
+            }
+        ];
+
+        return parser.parseWithInstructions(html, isValidNode, processingInstructions);
+    }
+
     render() {
         if (this.props.post.state === Posts.POST_DELETED) {
             return this.renderDeletedPost();
@@ -109,7 +135,7 @@ export default class PostMessageView extends React.PureComponent {
             emojis: this.props.emojis,
             siteURL: this.props.siteUrl,
             mentionKeys: this.props.mentionKeys,
-            usernameMap: this.props.usernameMap,
+            atMentions: true,
             channelNamesMap: getChannelsNameMapInCurrentTeam(store.getState()),
             team: this.props.team
         });
@@ -124,14 +150,18 @@ export default class PostMessageView extends React.PureComponent {
             postId = Utils.createSafeId('lastPostMessageText' + this.props.lastPostCount);
         }
 
+        const htmlFormattedText = TextFormatting.formatText(this.props.post.message, options);
+        const postMessageComponent = this.postMessageHtmlToComponent(htmlFormattedText);
+
         return (
             <div>
                 <span
                     id={postId}
                     className='post-message__text'
                     onClick={Utils.handleFormattedTextClick}
-                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, options)}}
-                />
+                >
+                    {postMessageComponent}
+                </span>
                 {this.renderEditedIndicator()}
             </div>
         );
diff --git a/webapp/package.json b/webapp/package.json
index 729a3c7bf..37a6351f5 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -15,6 +15,7 @@
     "flux": "3.1.2",
     "font-awesome": "4.7.0",
     "highlight.js": "9.11.0",
+    "html-to-react": "1.2.9",
     "inobounce": "0.1.4",
     "intl": "1.2.5",
     "jasny-bootstrap": "3.1.3",
diff --git a/webapp/tests/utils/formatting_at_mentions.test.jsx b/webapp/tests/utils/formatting_at_mentions.test.jsx
index d64b42c3f..e9147b565 100644
--- a/webapp/tests/utils/formatting_at_mentions.test.jsx
+++ b/webapp/tests/utils/formatting_at_mentions.test.jsx
@@ -8,71 +8,50 @@ import * as TextFormatting from 'utils/text_formatting.jsx';
 describe('TextFormatting.AtMentions', function() {
     it('At mentions', function() {
         assert.equal(
-            TextFormatting.autolinkAtMentions('@user', new Map(), {user: {}}),
+            TextFormatting.autolinkAtMentions('@user', new Map()),
             '$MM_ATMENTION0',
-            'should replace explicit mention with token'
+            'should replace mention with token'
         );
 
         assert.equal(
-            TextFormatting.autolinkAtMentions('abc"@user"def', new Map(), {user: {}}),
+            TextFormatting.autolinkAtMentions('abc"@user"def', new Map()),
             'abc"$MM_ATMENTION0"def',
-            'should replace explicit mention surrounded by punctuation with token'
+            'should replace mention surrounded by punctuation with token'
         );
 
         assert.equal(
-            TextFormatting.autolinkAtMentions('@user1 @user2', new Map(), {user1: {}, user2: {}}),
+            TextFormatting.autolinkAtMentions('@user1 @user2', new Map()),
             '$MM_ATMENTION0 $MM_ATMENTION1',
-            'should replace multiple explicit mentions with tokens'
+            'should replace multiple mentions with tokens'
         );
 
         assert.equal(
-            TextFormatting.autolinkAtMentions('@us_-e.r', new Map(), {'us_-e.r': {}}),
-            '$MM_ATMENTION0',
-            'should replace multiple explicit mentions containing punctuation with token'
-        );
-
-        assert.equal(
-            TextFormatting.autolinkAtMentions('@us_-e.r', new Map(), {'us_-e.r': {}}),
-            '$MM_ATMENTION0',
-            'should replace multiple explicit mentions containing valid punctuation with token'
-        );
-
-        assert.equal(
-            TextFormatting.autolinkAtMentions('@user.', new Map(), {user: {}}),
-            '$MM_ATMENTION0.',
-            'should replace explicit mention followed by period with token'
+            TextFormatting.autolinkAtMentions('@user1/@user2/@user3', new Map()),
+            '$MM_ATMENTION0/$MM_ATMENTION1/$MM_ATMENTION2',
+            'should replace multiple mentions with tokens'
         );
 
         assert.equal(
-            TextFormatting.autolinkAtMentions('@user.', new Map(), {'user.': {}}),
+            TextFormatting.autolinkAtMentions('@us_-e.r', new Map()),
             '$MM_ATMENTION0',
-            'should replace explicit mention ending with period with token'
+            'should replace multiple mentions containing punctuation with token'
         );
-    });
 
-    it('Implied at mentions', function() {
-        // PLT-4454 Assume users exist for things that look like at mentions until we support the new mention syntax
         assert.equal(
-            TextFormatting.autolinkAtMentions('@user', new Map(), {}),
+            TextFormatting.autolinkAtMentions('@user.', new Map()),
             '$MM_ATMENTION0',
-            'should imply user exists and replace mention with token'
-        );
-
-        assert.equal(
-            TextFormatting.autolinkAtMentions('@user.', new Map(), {}),
-            '$MM_ATMENTION0.',
-            'should assume username doesn\'t end in punctuation'
+            'should capture trailing punctuation as part of mention'
         );
     });
 
     it('Not at mentions', function() {
         assert.equal(
-            TextFormatting.autolinkAtMentions('user@host', new Map(), {user: {}, host: {}}),
+            TextFormatting.autolinkAtMentions('user@host', new Map()),
             'user@host'
         );
 
         assert.equal(
-            TextFormatting.autolinkAtMentions('user@email.com', new Map(), {user: {}, email: {}}),
+            TextFormatting.autolinkAtMentions('user@email.com', new Map()),
             'user@email.com'
         );
     });
diff --git a/webapp/tests/utils/formatting_hashtags.test.jsx b/webapp/tests/utils/formatting_hashtags.test.jsx
index 1740a8ce7..917f0135a 100644
--- a/webapp/tests/utils/formatting_hashtags.test.jsx
+++ b/webapp/tests/utils/formatting_hashtags.test.jsx
@@ -160,13 +160,11 @@ describe('TextFormatting.Hashtags', function() {
         );
 
         let options = {
-            usernameMap: {
-                test: {id: '1234', username: 'test'}
-            }
+            atMentions: true
         };
         assert.equal(
             TextFormatting.formatText('#@test', options).trim(),
-            "<p>#<a class='mention-link' href='#' data-mention='test'>@test</a></p>"
+            '<p>#<span data-mention="test">@test</span></p>'
         );
 
         assert.equal(
diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx
index ed251bcb4..5cae81f4e 100644
--- a/webapp/utils/text_formatting.jsx
+++ b/webapp/utils/text_formatting.jsx
@@ -9,6 +9,8 @@ import * as Markdown from './markdown.jsx';
 import twemoji from 'twemoji';
 import XRegExp from 'xregexp';
 
+const punctuation = XRegExp.cache('[^\\pL\\d]');
+
 // pattern to detect the existance of a Chinese, Japanese, or Korean character in a string
 // http://stackoverflow.com/questions/15033196/using-javascript-to-check-whether-a-string-contains-japanese-characters-includi
 const cjkPattern = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf\uac00-\ud7a3]/;
@@ -24,8 +26,7 @@ const cjkPattern = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-
 // - markdown - Enables markdown parsing. Defaults to true.
 // - siteURL - The origin of this Mattermost instance. If provided, links to channels and posts will be replaced with internal
 //     links that can be handled by a special click handler.
-// - usernameMap - An object mapping usernames to users. If provided, at mentions will be replaced with internal links that can
-//      be handled by a special click handler (Utils.handleFormattedTextClick)
+// - atMentions - Whether or not to render at mentions into spans with a data-mention attribute. Defaults to false.
 // - channelNamesMap - An object mapping channel display names to channels. If provided, ~channel mentions will be replaced with
 //      links to the relevant channel.
 // - team - The current team.
@@ -67,8 +68,8 @@ export function doFormatText(text, options) {
     const tokens = new Map();
 
     // replace important words and phrases with tokens
-    if (options.usernameMap) {
-        output = autolinkAtMentions(output, tokens, options.usernameMap);
+    if (options.atMentions) {
+        output = autolinkAtMentions(output, tokens);
     }
 
     if (options.channelNamesMap) {
@@ -157,45 +158,21 @@ function autolinkEmails(text, tokens) {
     return autolinker.link(text);
 }
 
-const punctuation = XRegExp.cache('[^\\pL\\d]');
-
-export function autolinkAtMentions(text, tokens, usernameMap) {
-    // Test if provided text needs to be highlighted, special mention or current user
-    function mentionExists(u) {
-        return (Constants.SPECIAL_MENTIONS.indexOf(u) !== -1 || Boolean(usernameMap[u]));
-    }
-
-    function addToken(username, mention) {
+export function autolinkAtMentions(text, tokens) {
+    function replaceAtMentionWithToken(fullMatch, username) {
         const index = tokens.size;
         const alias = `$MM_ATMENTION${index}`;
 
         tokens.set(alias, {
-            value: `<a class='mention-link' href='#' data-mention='${username}'>${mention}</a>`,
-            originalText: mention
+            value: `<span data-mention="${username}">@${username}</span>`,
+            originalText: fullMatch
         });
-        return alias;
-    }
-
-    function replaceAtMentionWithToken(fullMatch, prefix, mention, username) {
-        const usernameLower = username.toLowerCase();
-
-        // Check if the text makes up an explicit mention, possible trimming extra punctuation from the end of the name if necessary
-        for (let c = usernameLower.length; c > 0; c--) {
-            const truncated = usernameLower.substring(0, c);
-            const suffix = usernameLower.substring(c);
-
-            // If we've found a username or run out of punctuation to trim off, render it as an at mention
-            if (mentionExists(truncated) || !punctuation.test(truncated[truncated.length - 1])) {
-                const alias = addToken(truncated, '@' + truncated);
-                return prefix + alias + suffix;
-            }
-        }
 
-        return fullMatch;
+        return alias;
     }
 
     let output = text;
-    output = output.replace(/(^|\W)(@([a-z0-9.\-_]*))/gi, replaceAtMentionWithToken);
+    output = output.replace(/\B@([a-z0-9.\-_]*)/gi, replaceAtMentionWithToken);
 
     return output;
 }
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 84b02beb1..6ef267eed 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -388,14 +388,6 @@ export function insertHtmlEntities(text) {
     return newtext;
 }
 
-export function searchForTerm(term) {
-    AppDispatcher.handleServerAction({
-        type: ActionTypes.RECEIVED_SEARCH_TERM,
-        term,
-        do_search: true
-    });
-}
-
 export function getFileType(extin) {
     var ext = extin.toLowerCase();
     if (Constants.IMAGE_TYPES.indexOf(ext) > -1) {
@@ -1312,16 +1304,11 @@ export function isValidPassword(password) {
 }
 
 export function handleFormattedTextClick(e) {
-    const mentionAttribute = e.target.getAttributeNode('data-mention');
     const hashtagAttribute = e.target.getAttributeNode('data-hashtag');
     const linkAttribute = e.target.getAttributeNode('data-link');
     const channelMentionAttribute = e.target.getAttributeNode('data-channel-mention');
 
-    if (mentionAttribute) {
-        e.preventDefault();
-
-        searchForTerm(mentionAttribute.value);
-    } else if (hashtagAttribute) {
+    if (hashtagAttribute) {
         e.preventDefault();
 
         searchForTerm(hashtagAttribute.value);
@@ -1339,6 +1326,15 @@ export function handleFormattedTextClick(e) {
     }
 }
 
+// This should eventually be removed once everywhere else calls the action
+function searchForTerm(term) {
+    AppDispatcher.handleServerAction({
+        type: ActionTypes.RECEIVED_SEARCH_TERM,
+        term,
+        do_search: true
+    });
+}
+
 export function isEmptyObject(object) {
     if (!object) {
         return true;
diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js
index 6bc2834e0..16540d22d 100644
--- a/webapp/webpack.config.js
+++ b/webapp/webpack.config.js
@@ -241,7 +241,8 @@ var config = {
         alias: {
             jquery: 'jquery/dist/jquery',
             superagent: 'node_modules/superagent/lib/client'
-        }
+        },
+        extensions: ['.js', '.jsx']
     },
     performance: {
         hints: 'warning'