MM-13384 Fix clicking username in profile popover (mattermost#2161)

* Fix clicking username in profile popover * Update snapshots
koox00 · Dec 12, 2018 · 45ffce3 · 45ffce3
1 parent 33b56f9
commit 45ffce3
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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]}