From 45ffce38f2eaa35cb991fb1dcda75aeab17267e1 Mon Sep 17 00:00:00 2001
From: Joram Wilander <jwawilander@gmail.com>
Date: Wed, 12 Dec 2018 14:55:04 -0500
Subject: [PATCH] MM-13384 Fix clicking username in profile popover (#2161)

* Fix clicking username in profile popover

* Update snapshots
---
 .../__snapshots__/textbox.test.jsx.snap       |  3 ++
 .../add_user_to_channel_modal.test.jsx.snap   |  1 +
 .../create_comment.test.jsx.snap              |  5 +++
 components/create_comment/create_comment.jsx  |  1 +
 .../__snapshots__/create_post.test.jsx.snap   |  5 +++
 components/create_post/create_post.jsx        |  1 +
 .../profile_popover/profile_popover.jsx       |  2 +-
 .../quick_switch_modal.test.jsx.snap          |  1 +
 components/suggestion/suggestion_box.jsx      | 34 +++++++++++++++++++
 components/textbox/textbox.jsx                | 16 ++-------
 .../settings/autocomplete_selector.test.jsx   |  3 ++
 11 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/components/__snapshots__/textbox.test.jsx.snap b/components/__snapshots__/textbox.test.jsx.snap
index 9198b315bb26..eac6daf8a128 100644
--- a/components/__snapshots__/textbox.test.jsx.snap
+++ b/components/__snapshots__/textbox.test.jsx.snap
@@ -13,6 +13,7 @@ exports[`components/TextBox should match snapshot with required props 1`] = `
     isRHS={false}
     listComponent={[Function]}
     listStyle="top"
+    listenForMentionKeyClick={false}
     onBlur={[Function]}
     onChange={[Function]}
     onHeightChange={[Function]}
@@ -168,6 +169,7 @@ exports[`components/TextBox should throw error when new property is too long 1`]
     isRHS={false}
     listComponent={[Function]}
     listStyle="top"
+    listenForMentionKeyClick={false}
     onBlur={[Function]}
     onChange={[Function]}
     onHeightChange={[Function]}
@@ -323,6 +325,7 @@ exports[`components/TextBox should throw error when value is too long 1`] = `
     isRHS={false}
     listComponent={[Function]}
     listStyle="top"
+    listenForMentionKeyClick={false}
     onBlur={[Function]}
     onChange={[Function]}
     onHeightChange={[Function]}
diff --git a/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.jsx.snap b/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.jsx.snap
index 6bca662daf77..51a9a525291f 100644
--- a/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.jsx.snap
+++ b/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.jsx.snap
@@ -73,6 +73,7 @@ exports[`components/AddUserToChannelModal should match snapshot 1`] = `
         isRHS={false}
         listComponent={[Function]}
         listStyle="bottom"
+        listenForMentionKeyClick={false}
         maxLength="64"
         onChange={[Function]}
         onItemSelected={[Function]}
diff --git a/components/create_comment/__snapshots__/create_comment.test.jsx.snap b/components/create_comment/__snapshots__/create_comment.test.jsx.snap
index e1579a3abc91..05f9dfcf654f 100644
--- a/components/create_comment/__snapshots__/create_comment.test.jsx.snap
+++ b/components/create_comment/__snapshots__/create_comment.test.jsx.snap
@@ -25,6 +25,7 @@ exports[`components/CreateComment should match snapshot read only channel 1`] =
           id="reply_textbox"
           initialText=""
           isRHS={true}
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -116,6 +117,7 @@ exports[`components/CreateComment should match snapshot, comment with message 1`
           id="reply_textbox"
           initialText=""
           isRHS={true}
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -243,6 +245,7 @@ exports[`components/CreateComment should match snapshot, emoji picker disabled 1
           id="reply_textbox"
           initialText=""
           isRHS={true}
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -358,6 +361,7 @@ exports[`components/CreateComment should match snapshot, empty comment 1`] = `
           id="reply_textbox"
           initialText=""
           isRHS={true}
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -485,6 +489,7 @@ exports[`components/CreateComment should match snapshot, non-empty message and u
           id="reply_textbox"
           initialText=""
           isRHS={true}
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
diff --git a/components/create_comment/create_comment.jsx b/components/create_comment/create_comment.jsx
index c27a44b77a1d..2076b53c9da8 100644
--- a/components/create_comment/create_comment.jsx
+++ b/components/create_comment/create_comment.jsx
@@ -852,6 +852,7 @@ export default class CreateComment extends React.PureComponent {
                                 disabled={readOnlyChannel}
                                 characterLimit={this.props.maxPostSize}
                                 badConnection={this.props.badConnection}
+                                listenForMentionKeyClick={true}
                             />
                             <span
                                 ref='createCommentControls'
diff --git a/components/create_post/__snapshots__/create_post.test.jsx.snap b/components/create_post/__snapshots__/create_post.test.jsx.snap
index ddcd0e903e15..0e8ca5c2069c 100644
--- a/components/create_post/__snapshots__/create_post.test.jsx.snap
+++ b/components/create_post/__snapshots__/create_post.test.jsx.snap
@@ -25,6 +25,7 @@ exports[`components/create_post Show tutorial 1`] = `
           emojiEnabled={true}
           handlePostError={[Function]}
           id="post_textbox"
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -188,6 +189,7 @@ exports[`components/create_post should match snapshot for center textbox 1`] = `
           emojiEnabled={true}
           handlePostError={[Function]}
           id="post_textbox"
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -320,6 +322,7 @@ exports[`components/create_post should match snapshot for read only channel 1`]
           emojiEnabled={true}
           handlePostError={[Function]}
           id="post_textbox"
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -418,6 +421,7 @@ exports[`components/create_post should match snapshot when file upload disabled
           emojiEnabled={true}
           handlePostError={[Function]}
           id="post_textbox"
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -550,6 +554,7 @@ exports[`components/create_post should match snapshot, init 1`] = `
           emojiEnabled={true}
           handlePostError={[Function]}
           id="post_textbox"
+          listenForMentionKeyClick={true}
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
diff --git a/components/create_post/create_post.jsx b/components/create_post/create_post.jsx
index dccb84c96c25..fce59e9bba4f 100644
--- a/components/create_post/create_post.jsx
+++ b/components/create_post/create_post.jsx
@@ -1111,6 +1111,7 @@ export default class CreatePost extends React.Component {
                                 disabled={readOnlyChannel}
                                 characterLimit={this.props.maxPostSize}
                                 badConnection={this.props.badConnection}
+                                listenForMentionKeyClick={true}
                             />
                             <span
                                 ref='createPostControls'
diff --git a/components/profile_popover/profile_popover.jsx b/components/profile_popover/profile_popover.jsx
index 07a134ff7e1b..33d9a5211aaa 100644
--- a/components/profile_popover/profile_popover.jsx
+++ b/components/profile_popover/profile_popover.jsx
@@ -156,7 +156,7 @@ class ProfilePopover extends React.PureComponent {
         if (this.props.hide) {
             this.props.hide();
         }
-        EventEmitter.emit('mention_key_click', this.props.user.username);
+        EventEmitter.emit('mention_key_click', this.props.user.username, this.props.isRHS);
     }
 
     handleEditAccountSettings(e) {
diff --git a/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.jsx.snap b/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.jsx.snap
index 21d2707f7b24..861a201b04d7 100644
--- a/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.jsx.snap
+++ b/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.jsx.snap
@@ -55,6 +55,7 @@ exports[`components/QuickSwitchModal should match snapshot 1`] = `
       isRHS={false}
       listComponent={[Function]}
       listStyle="bottom"
+      listenForMentionKeyClick={false}
       maxLength="64"
       onChange={[Function]}
       onItemSelected={[Function]}
diff --git a/components/suggestion/suggestion_box.jsx b/components/suggestion/suggestion_box.jsx
index 83c6197fee13..86bb9be55f30 100644
--- a/components/suggestion/suggestion_box.jsx
+++ b/components/suggestion/suggestion_box.jsx
@@ -4,6 +4,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import EventEmitter from 'mattermost-redux/utils/event_emitter';
+
 import QuickInput from 'components/quick_input.jsx';
 import Constants from 'utils/constants.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
@@ -119,6 +121,11 @@ export default class SuggestionBox extends React.Component {
          * box is rendered. This allows the reused component to otherwise respond to changes.
          */
         contextId: PropTypes.string,
+
+        /**
+         * If true, listen for clicks on a mention and populate the input with said mention, defaults to false
+         */
+        listenForMentionKeyClick: PropTypes.bool,
     }
 
     static defaultProps = {
@@ -132,6 +139,7 @@ export default class SuggestionBox extends React.Component {
         openOnFocus: false,
         openWhenEmpty: false,
         replaceAllInputOnSelect: false,
+        listenForMentionKeyClick: false,
     }
 
     constructor(props) {
@@ -164,6 +172,16 @@ export default class SuggestionBox extends React.Component {
         };
     }
 
+    componentDidMount() {
+        if (this.props.listenForMentionKeyClick) {
+            EventEmitter.addListener('mention_key_click', this.handleMentionKeyClick);
+        }
+    }
+
+    componentWillUnmount() {
+        EventEmitter.removeListener('mention_key_click', this.handleMentionKeyClick);
+    }
+
     componentDidUpdate(prevProps) {
         if (prevProps.contextId !== this.props.contextId) {
             const textbox = this.getTextbox();
@@ -173,6 +191,21 @@ export default class SuggestionBox extends React.Component {
         }
     }
 
+    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.refs.input) {
             return null;
@@ -581,6 +614,7 @@ export default class SuggestionBox extends React.Component {
         Reflect.deleteProperty(props, 'replaceAllInputOnSelect');
         Reflect.deleteProperty(props, 'renderDividers');
         Reflect.deleteProperty(props, 'contextId');
+        Reflect.deleteProperty(props, 'listenForMentionKeyClick');
 
         // This needs to be upper case so React doesn't think it's an html tag
         const SuggestionListComponent = listComponent;
diff --git a/components/textbox/textbox.jsx b/components/textbox/textbox.jsx
index 53dd1ba178e2..41accb26a345 100644
--- a/components/textbox/textbox.jsx
+++ b/components/textbox/textbox.jsx
@@ -40,6 +40,7 @@ export default class Textbox extends React.Component {
         characterLimit: PropTypes.number.isRequired,
         disabled: PropTypes.bool,
         badConnection: PropTypes.bool,
+        listenForMentionKeyClick: PropTypes.bool,
         currentUserId: PropTypes.string.isRequired,
         profilesInChannel: PropTypes.arrayOf(PropTypes.object).isRequired,
         profilesNotInChannel: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -51,6 +52,7 @@ export default class Textbox extends React.Component {
     static defaultProps = {
         supportsCommands: true,
         isRHS: false,
+        listenForMentionKeyClick: false,
     };
 
     constructor(props) {
@@ -80,19 +82,6 @@ export default class Textbox extends React.Component {
         this.props.onChange(e);
     }
 
-    handlePopoverMentionKeyClick = (mentionKey) => {
-        const textbox = this.refs.message.getTextbox();
-        let insertText = '@' + mentionKey;
-        const oldValue = textbox.value;
-
-        // if the current text does not end with a whitespace, then insert a space
-        if (oldValue && (/[^\s]$/).test(oldValue)) {
-            insertText = ' ' + insertText;
-        }
-
-        textbox.value = oldValue + insertText;
-    }
-
     checkMessageLength = (message) => {
         if (this.props.handlePostError) {
             if (message.length > this.props.characterLimit) {
@@ -337,6 +326,7 @@ export default class Textbox extends React.Component {
                     isRHS={this.props.isRHS}
                     disabled={this.props.disabled}
                     contextId={this.props.channelId}
+                    listenForMentionKeyClick={this.props.listenForMentionKeyClick}
                 />
                 {preview}
                 <div className={'help__text ' + helpTextClass}>
diff --git a/components/widgets/settings/autocomplete_selector.test.jsx b/components/widgets/settings/autocomplete_selector.test.jsx
index caf80ee49de3..918a93c0da37 100644
--- a/components/widgets/settings/autocomplete_selector.test.jsx
+++ b/components/widgets/settings/autocomplete_selector.test.jsx
@@ -34,6 +34,7 @@ describe('components/widgets/settings/AutocompleteSelector', () => {
       isRHS={false}
       listComponent={[Function]}
       listStyle="top"
+      listenForMentionKeyClick={false}
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
@@ -82,6 +83,7 @@ describe('components/widgets/settings/AutocompleteSelector', () => {
       isRHS={false}
       listComponent={[Function]}
       listStyle="top"
+      listenForMentionKeyClick={false}
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
@@ -121,6 +123,7 @@ describe('components/widgets/settings/AutocompleteSelector', () => {
       isRHS={false}
       listComponent={[Function]}
       listStyle="top"
+      listenForMentionKeyClick={false}
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}