Add [...] menu to search results list (#6663)

* Add [...] menu to search results list

* fix updates on search results when post is pinned or edited

* remove app dispatcher from component

webapp/actions/post_actions.jsx

@@ -326,7 +326,8 @@ export function pinPost(postId) {
         await PostActions.pinPost(postId)(doDispatch, doGetState);
 
         AppDispatcher.handleServerAction({
-            type: ActionTypes.RECEIVED_POST_PINNED
+            type: ActionTypes.RECEIVED_POST_PINNED,
+            postId
         });
     };
 }
@@ -336,7 +337,8 @@ export function unpinPost(postId) {
         await PostActions.unpinPost(postId)(doDispatch, doGetState);
 
         AppDispatcher.handleServerAction({
-            type: ActionTypes.RECEIVED_POST_UNPINNED
+            type: ActionTypes.RECEIVED_POST_UNPINNED,
+            postId
         });
     };
 }

webapp/actions/websocket_actions.jsx

@@ -261,6 +261,12 @@ function handlePostEditEvent(msg) {
             viewChannel(ChannelStore.getCurrentId())(dispatch, getState);
         }
     }
+
+    // Needed for search store
+    AppDispatcher.handleViewAction({
+        type: Constants.ActionTypes.POST_UPDATED,
+        post
+    });
 }
 
 function handlePostDeleteEvent(msg) {

webapp/components/search_results_item.jsx

@@ -1,25 +1,20 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
 import PostMessageContainer from 'components/post_view/post_message_view';
 import UserProfile from './user_profile.jsx';
 import FileAttachmentListContainer from 'components/file_attachment_list';
 import ProfilePicture from './profile_picture.jsx';
 import CommentIcon from 'components/common/comment_icon.jsx';
+import DotMenu from 'components/dot_menu';
+import PostFlagIcon from 'components/post_view/post_flag_icon.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 
-import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
-import {flagPost, unflagPost} from 'actions/post_actions.jsx';
-import PostFlagIcon from 'components/post_view/post_flag_icon.jsx';
-
 import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
-
 import Constants from 'utils/constants.jsx';
-const ActionTypes = Constants.ActionTypes;
 
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -31,17 +26,34 @@ export default class SearchResultsItem extends React.Component {
         super(props);
 
         this.handleFocusRHSClick = this.handleFocusRHSClick.bind(this);
+        this.handleJumpClick = this.handleJumpClick.bind(this);
+        this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
         this.shrinkSidebar = this.shrinkSidebar.bind(this);
-        this.unflagPost = this.unflagPost.bind(this);
-        this.flagPost = this.flagPost.bind(this);
 
         this.state = {
             currentTeamDisplayName: TeamStore.getCurrent().name,
             width: '',
-            height: ''
+            height: '',
+            dropdownOpened: false
         };
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        if (!Utils.areObjectsEqual(nextState.post, this.props.post)) {
+            return true;
+        }
+
+        if (nextProps.isFlagged !== this.props.isFlagged) {
+            return true;
+        }
+
+        if (nextState.dropdownOpened !== this.state.dropdownOpened) {
+            return true;
+        }
+
+        return false;
+    }
+
     componentDidMount() {
         window.addEventListener('resize', () => {
             Utils.updateWindowDimensions(this);
@@ -54,10 +66,6 @@ export default class SearchResultsItem extends React.Component {
         });
     }
 
-    hideSidebar() {
-        $('.sidebar--right').removeClass('move--left');
-    }
-
     shrinkSidebar() {
         setTimeout(() => {
             this.props.shrink();
@@ -69,14 +77,19 @@ export default class SearchResultsItem extends React.Component {
         GlobalActions.emitPostFocusRightHandSideFromSearch(this.props.post, this.props.isMentionSearch);
     }
 
-    flagPost(e) {
+    handleJumpClick() {
-        e.preventDefault();
+        if (Utils.isMobile()) {
-        flagPost(this.props.post.id);
+            GlobalActions.toggleSideBarAction(false);
+        }
+
+        this.shrinkSidebar();
+        browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/pl/' + this.props.post.id);
     }
 
-    unflagPost(e) {
+    handleDropdownOpened = (isOpened) => {
-        e.preventDefault();
+        this.setState({
-        unflagPost(this.props.post.id);
+            dropdownOpened: isOpened
+        });
     }
 
     timeTag(post) {
@@ -109,6 +122,20 @@ export default class SearchResultsItem extends React.Component {
             );
     }
 
+    getClassName = () => {
+        let className = 'post post--thread';
+
+        if (this.props.compactDisplay) {
+            className = ' post--compact';
+        }
+
+        if (this.state.dropdownOpened) {
+            className += ' post--hovered';
+        }
+
+        return className;
+    }
+
     render() {
         let channelName = null;
         const channel = this.props.channel;
@@ -160,11 +187,7 @@ export default class SearchResultsItem extends React.Component {
 
         );
 
-        let compactClass = '';
         const profilePicContainer = (<div className='post__img'>{profilePic}</div>);
-        if (this.props.compactDisplay) {
-            compactClass = ' post--compact';
-        }
 
         let postClass = '';
         if (PostUtils.isEdited(this.props.post)) {
@@ -205,6 +228,13 @@ export default class SearchResultsItem extends React.Component {
 
             rhsControls = (
                 <div className='col__controls'>
+                    <DotMenu
+                        idPrefix={Constants.SEARCH_POST}
+                        idCount={idCount}
+                        post={post}
+                        isFlagged={this.props.isFlagged}
+                        handleDropdownOpened={this.handleDropdownOpened}
+                    />
                     <CommentIcon
                         idPrefix={'searchCommentIcon'}
                         idCount={idCount}
@@ -212,32 +242,7 @@ export default class SearchResultsItem extends React.Component {
                         searchStyle={'search-item__comment'}
                     />
                     <a
-                        onClick={
+                        onClick={this.handleJumpClick}
-                            () => {
-                                if (Utils.isMobile()) {
-                                    AppDispatcher.handleServerAction({
-                                        type: ActionTypes.RECEIVED_SEARCH,
-                                        results: null
-                                    });
-
-                                    AppDispatcher.handleServerAction({
-                                        type: ActionTypes.RECEIVED_SEARCH_TERM,
-                                        term: null,
-                                        do_search: false,
-                                        is_mention_search: false
-                                    });
-
-                                    AppDispatcher.handleServerAction({
-                                        type: ActionTypes.RECEIVED_POST_SELECTED,
-                                        postId: null
-                                    });
-
-                                    this.hideSidebar();
-                                }
-                                this.shrinkSidebar();
-                                browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/pl/' + post.id);
-                            }
-                        }
                         className='search-item__jump'
                     >
                         <FormattedMessage
@@ -284,28 +289,23 @@ export default class SearchResultsItem extends React.Component {
                         />
                     </div>
                 </div>
-                <div
+                <div className={this.getClassName()}>
-                    className={'post post--thread ' + compactClass}
+                    <div className='search-channel__name'>{channelName}</div>
-                >
-                    <div
-                        id={idCount === -1 ? null : Utils.createSafeId('searchChannelName' + idCount)}
-                        className='search-channel__name'
-                    >
-                        {channelName}
-                    </div>
                     <div className='post__content'>
                         {profilePicContainer}
                         <div>
                             <div className='post__header'>
-                                <div className='col col__name'><strong>
+                                <div className='col col__name'>
-                                    <UserProfile
+                                    <strong>
-                                        user={user}
+                                        <UserProfile
-                                        overwriteName={overrideUsername}
+                                            user={user}
-                                        disablePopover={disableProfilePopover}
+                                            overwriteName={overrideUsername}
-                                        status={this.props.status}
+                                            disablePopover={disableProfilePopover}
-                                        isBusy={this.props.isBusy}
+                                            status={this.props.status}
-                                    />
+                                            isBusy={this.props.isBusy}
-                                </strong></div>
+                                        />
+                                    </strong>
+                                </div>
                                 {botIndicator}
                                 <div className='col'>
                                     {this.renderTimeTag(post)}

webapp/stores/search_store.jsx

@@ -120,6 +120,17 @@ class SearchStoreClass extends EventEmitter {
         }
     }
 
+    updatePost(post) {
+        const results = this.getSearchResults();
+        if (results == null) {
+            return;
+        }
+
+        if (post.id in results.posts) {
+            results.posts[post.id] = Object.assign({}, post);
+        }
+    }
+
     togglePinPost(postId, isPinned) {
         const results = this.getSearchResults();
         if (results == null || results.posts == null) {
@@ -176,12 +187,16 @@ SearchStore.dispatchToken = AppDispatcher.register((payload) => {
         SearchStore.deletePost(action.post);
         SearchStore.emitSearchChange();
         break;
+    case ActionTypes.POST_UPDATED:
+        SearchStore.updatePost(action.post);
+        SearchStore.emitSearchChange();
+        break;
     case ActionTypes.RECEIVED_POST_PINNED:
-        SearchStore.togglePinPost(action.reaction, true);
+        SearchStore.togglePinPost(action.postId, true);
         SearchStore.emitSearchChange();
         break;
     case ActionTypes.RECEIVED_POST_UNPINNED:
-        SearchStore.togglePinPost(action.reaction, false);
+        SearchStore.togglePinPost(action.postId, false);
         SearchStore.emitSearchChange();
         break;
     case ActionTypes.REMOVE_POST:

webapp/utils/constants.jsx

@@ -965,7 +965,8 @@ export const Constants = {
         SHOW_USERNAME: 'username',
         SHOW_NICKNAME_FULLNAME: 'nickname_full_name',
         SHOW_FULLNAME: 'full_name'
-    }
+    },
+    SEARCH_POST: 'searchpost'
 };
 
 export default Constants;

webapp/yarn.lock

@@ -111,13 +111,7 @@ ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
 
-ansi-styles@^3.0.0:
+ansi-styles@^3.0.0, ansi-styles@^3.1.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.0.0.tgz#5404e93a544c4fec7f048262977bebfe3155e0c1"
-  dependencies:
-    color-convert "^1.0.0"
-
-ansi-styles@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.1.0.tgz#09c202d5c917ec23188caa5c9cb9179cd9547750"
   dependencies:
@@ -274,13 +268,7 @@ async@^1.4.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.1.2, async@^2.1.4, async@^2.1.5:
+async@^2.1.2, async@^2.1.4, async@^2.1.5, async@^2.4.1:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.3.0.tgz#1013d1051047dd320fe24e494d5c66ecaf6147d9"
-  dependencies:
-    lodash "^4.14.0"
-
-async@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -342,7 +330,7 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-babel-core@6.25.0:
+babel-core@6.25.0, babel-core@^6.0.0, babel-core@^6.24.1:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
   dependencies:
@@ -366,30 +354,6 @@ babel-core@6.25.0:
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-core@^6.0.0, babel-core@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.1.tgz#8c428564dce1e1f41fb337ec34f4c3b022b5ad83"
-  dependencies:
-    babel-code-frame "^6.22.0"
-    babel-generator "^6.24.1"
-    babel-helpers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-register "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-    babylon "^6.11.0"
-    convert-source-map "^1.1.0"
-    debug "^2.1.1"
-    json5 "^0.5.0"
-    lodash "^4.2.0"
-    minimatch "^3.0.2"
-    path-is-absolute "^1.0.0"
-    private "^0.1.6"
-    slash "^1.0.0"
-    source-map "^0.5.0"
-
 babel-eslint@7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.1.1.tgz#8a6a884f085aa7060af69cfc77341c2f99370fb2"
@@ -400,20 +364,7 @@ babel-eslint@7.1.1:
     babylon "^6.13.0"
     lodash.pickby "^4.6.0"
 
-babel-generator@^6.18.0, babel-generator@^6.24.1:
+babel-generator@^6.18.0, babel-generator@^6.25.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.1.tgz#e715f486c58ded25649d888944d52aa07c5d9497"
-  dependencies:
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-    detect-indent "^4.0.0"
-    jsesc "^1.3.0"
-    lodash "^4.2.0"
-    source-map "^0.5.0"
-    trim-right "^1.0.1"
-
-babel-generator@^6.25.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
   dependencies:
@@ -1071,17 +1022,7 @@ babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-template@^6.16.0, babel-template@^6.24.1:
+babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.24.1.tgz#04ae514f1f93b3a2537f2a0f60a5a45fb8308333"
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-    babylon "^6.11.0"
-    lodash "^4.2.0"
-
-babel-template@^6.25.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
   dependencies:
@@ -1091,21 +1032,7 @@ babel-template@^6.25.0:
     babylon "^6.17.2"
     lodash "^4.2.0"
 
-babel-traverse@^6.15.0, babel-traverse@^6.18.0, babel-traverse@^6.24.1:
+babel-traverse@^6.15.0, babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.25.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695"
-  dependencies:
-    babel-code-frame "^6.22.0"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-    babylon "^6.15.0"
-    debug "^2.2.0"
-    globals "^9.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
-babel-traverse@^6.25.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
   dependencies:
@@ -1119,16 +1046,7 @@ babel-traverse@^6.25.0:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.15.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1:
+babel-types@^6.15.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.25.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975"
-  dependencies:
-    babel-runtime "^6.22.0"
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^1.0.1"
-
-babel-types@^6.25.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
   dependencies:
@@ -1137,11 +1055,7 @@ babel-types@^6.25.0:
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babylon@^6.11.0, babylon@^6.13.0, babylon@^6.15.0:
+babylon@^6.13.0, babylon@^6.17.2:
-  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.0.tgz#37da948878488b9c4e3c4038893fa3314b3fc932"
-
-babylon@^6.17.2:
   version "6.17.4"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a"
 
@@ -2098,13 +2012,13 @@ debug@2.6.1:
   dependencies:
     ms "0.7.2"
 
-debug@2.6.7, debug@^2.6.3:
+debug@2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
   dependencies:
     ms "2.0.0"
 
-debug@^2.1.1, debug@^2.2.0:
+debug@^2.1.1, debug@^2.2.0, debug@^2.6.3:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
   dependencies:
@@ -5095,7 +5009,6 @@ mattermost-redux@mattermost/mattermost-redux#master:
     deep-equal "1.0.1"
     harmony-reflect "1.5.1"
     isomorphic-fetch "2.2.1"
-    key-mirror "1.0.1"
     mime-db "1.27.0"
     redux "3.6.0"
     redux-action-buffer "1.0.1"
@@ -5488,11 +5401,7 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
-"nwmatcher@>= 1.3.9 < 2.0.0":
+"nwmatcher@>= 1.3.9 < 2.0.0", nwmatcher@^1.4.1:
-  version "1.3.9"
-  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.3.9.tgz#8bab486ff7fa3dfd086656bbe8b17116d3692d2a"
-
-nwmatcher@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.1.tgz#7ae9b07b0ea804db7e25f05cb5fe4097d4e4949f"
 
@@ -7656,18 +7565,18 @@ ua-parser-js@^0.7.9:
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
 
-uglify-js@^2.6, uglify-js@~2.8.22:
+uglify-js@^2.6, uglify-js@^2.8.29:
-  version "2.8.22"
+  version "2.8.29"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.22.tgz#d54934778a8da14903fa29a326fb24c0ab51a1a0"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
   dependencies:
     source-map "~0.5.1"
     yargs "~3.10.0"
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
-uglify-js@^2.8.29:
+uglify-js@~2.8.22:
-  version "2.8.29"
+  version "2.8.22"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.22.tgz#d54934778a8da14903fa29a326fb24c0ab51a1a0"
   dependencies:
     source-map "~0.5.1"
     yargs "~3.10.0"
@@ -7816,7 +7725,7 @@ utils-merge@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
 
-uuid@3.0.1, uuid@^3.0.0:
+uuid@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
 
@@ -7824,7 +7733,7 @@ uuid@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
 
-uuid@^3.0.1:
+uuid@^3.0.0, uuid@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"