Merge pull request #2615 from mattermost/plt-2059

PLT-2059 Properly display webhook username/icon in search results

webapp/components/post.jsx

@@ -185,18 +185,9 @@ export default class Post extends React.Component {
 
         let profilePic = null;
         if (!this.props.hideProfilePic) {
-            let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp;
-            if (post.props && post.props.from_webhook && global.window.mm_config.EnablePostIconOverride === 'true') {
-                if (post.props.override_icon_url) {
-                    src = post.props.override_icon_url;
-                } else {
-                    src = Constants.DEFAULT_WEBHOOK_LOGO;
-                }
-            }
-
             profilePic = (
                 <img
-                    src={src}
+                    src={Utils.getProfilePicSrcForPost(post, timestamp)}
                     height='36'
                     width='36'
                 />

webapp/components/posts_view.jsx

@@ -204,10 +204,12 @@ export default class PostsView extends React.Component {
                 //     the previous post was made by the same user as the current post,
                 //     the previous post is not a comment,
                 //     the current post is not a comment,
+                //     the previous post is not from a webhook
                 //     the current post is not from a webhook
                 if (prevPostUserId === postUserId &&
                         !prevPostIsComment &&
                         !postIsComment &&
+                        !prevPostFromWebhook &&
                         !postFromWebhook) {
                     hideProfilePic = true;
                 }

webapp/components/rhs_root_post.jsx

@@ -213,21 +213,10 @@ export default class RhsRootPost extends React.Component {
             );
         }
 
-        let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp;
-        if (post.props && post.props.from_webhook && global.window.mm_config.EnablePostIconOverride === 'true') {
-            if (post.props.override_icon_url) {
-                src = post.props.override_icon_url;
-            } else {
-                src = Constants.DEFAULT_WEBHOOK_LOGO;
-            }
-        } else if (Utils.isSystemMessage(post)) {
-            src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE;
-        }
-
         const profilePic = (
             <img
                 className='post-profile-img'
-                src={src}
+                src={Utils.getProfilePicSrcForPost(post, timestamp)}
                 height='36'
                 width='36'
             />

webapp/components/search_results_item.jsx

@@ -1,11 +1,13 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import UserStore from 'stores/user_store.jsx';
 import UserProfile from './user_profile.jsx';
+
+import UserStore from 'stores/user_store.jsx';
+
 import * as GlobalActions from 'action_creators/global_actions.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
-
+import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
 import {FormattedMessage, FormattedDate} from 'react-intl';
@@ -29,6 +31,7 @@ export default class SearchResultsItem extends React.Component {
         const channel = this.props.channel;
         const timestamp = UserStore.getCurrentUser().update_at;
         const user = this.props.user || {};
+        const post = this.props.post;
 
         if (channel) {
             channelName = channel.display_name;
@@ -47,13 +50,23 @@ export default class SearchResultsItem extends React.Component {
             mentionHighlight: this.props.isMentionSearch
         };
 
+        let overrideUsername;
+        let disableProfilePopover = false;
+        if (post.props &&
+                post.props.from_webhook &&
+                post.props.override_username &&
+                global.window.mm_config.EnablePostUsernameOverride === 'true') {
+            overrideUsername = post.props.override_username;
+            disableProfilePopover = true;
+        }
+
         return (
             <div className='search-item__container'>
                 <div className='date-separator'>
                     <hr className='separator__hr'/>
                     <div className='separator__text'>
                         <FormattedDate
-                            value={this.props.post.create_at}
+                            value={post.create_at}
                             day='numeric'
                             month='long'
                             year='numeric'
@@ -67,18 +80,24 @@ export default class SearchResultsItem extends React.Component {
                     <div className='post__content'>
                         <div className='post__img'>
                             <img
-                                src={'/api/v1/users/' + this.props.post.user_id + '/image?time=' + timestamp}
+                                src={Utils.getProfilePicSrcForPost(post, timestamp)}
                                 height='36'
                                 width='36'
                             />
                         </div>
                         <div>
                             <ul className='post__header'>
-                                <li className='col__name'><strong><UserProfile user={user}/></strong></li>
+                                <li className='col__name'><strong>
+                                    <UserProfile
+                                        user={user}
+                                        overwriteName={overrideUsername}
+                                        disablePopover={disableProfilePopover}
+                                    />
+                                </strong></li>
                                 <li className='col'>
                                     <time className='search-item-time'>
                                         <FormattedDate
-                                            value={this.props.post.create_at}
+                                            value={post.create_at}
                                             hour12={true}
                                             hour='2-digit'
                                             minute='2-digit'
@@ -87,7 +106,7 @@ export default class SearchResultsItem extends React.Component {
                                 </li>
                                 <li>
                                     <Link
-                                        to={'/' + window.location.pathname.split('/')[1] + '/pl/' + this.props.post.id}
+                                        to={'/' + window.location.pathname.split('/')[1] + '/pl/' + post.id}
                                         className='search-item__jump'
                                     >
                                         <FormattedMessage
@@ -112,7 +131,7 @@ export default class SearchResultsItem extends React.Component {
                             <div className='search-item-snippet'>
                                 <span
                                     onClick={TextFormatting.handleClick}
-                                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}}
+                                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message, formattingOptions)}}
                                 />
                             </div>
                         </div>

webapp/utils/utils.jsx

@@ -1379,3 +1379,18 @@ export function localizeMessage(id, defaultMessage) {
 
     return id;
 }
+
+export function getProfilePicSrcForPost(post, timestamp) {
+    let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp;
+    if (post.props && post.props.from_webhook && global.window.mm_config.EnablePostIconOverride === 'true') {
+        if (post.props.override_icon_url) {
+            src = post.props.override_icon_url;
+        } else {
+            src = Constants.DEFAULT_WEBHOOK_LOGO;
+        }
+    } else if (isSystemMessage(post)) {
+        src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE;
+    }
+
+    return src;
+}