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

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>
+        );
+    }
+}

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);