Fix webhook name not overriding in LHS and update webhook help text.

2 files changed, 40 insertions, 8 deletions

diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx
index c44844f34..442d3483e 100644
--- a/web/react/components/rhs_root_post.jsx
+++ b/web/react/components/rhs_root_post.jsx
@@ -117,20 +117,51 @@ export default class RhsRootPost extends React.Component {
             );
         }
 
+        let userProfile = <UserProfile userId={post.user_id} />;
+        let botIndicator;
+
+        if (post.props && post.props.from_webhook) {
+            if (post.props.override_username && global.window.config.EnablePostUsernameOverride === 'true') {
+                userProfile = (
+                    <UserProfile
+                        userId={post.user_id}
+                        overwriteName={post.props.override_username}
+                        disablePopover={true}
+                    />
+                );
+            }
+
+            botIndicator = <li className='post-header-col post-header__name bot-indicator'>{'BOT'}</li>;
+        }
+
+        let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp;
+        if (post.props && post.props.from_webhook && global.window.config.EnablePostIconOverride === 'true') {
+            if (post.props.override_icon_url) {
+                src = post.props.override_icon_url;
+            }
+        }
+
+        const profilePic = (
+            <div className='post-profile-img__container'>
+                <img
+                    className='post-profile-img'
+                    src={src}
+                    height='36'
+                    width='36'
+                />
+            </div>
+        );
+
         return (
             <div className={'post post--root ' + currentUserCss}>
                 <div className='post-right-channel__name'>{channelName}</div>
                 <div className='post-profile-img__container'>
-                    <img
-                        className='post-profile-img'
-                        src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp}
-                        height='36'
-                        width='36'
-                    />
+                    {profilePic}
                 </div>
                 <div className='post__content'>
                     <ul className='post-header'>
-                        <li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li>
+                        <li className='post-header-col'><strong>{userProfile}</strong></li>
+                        {botIndicator}
                         <li className='post-header-col'>
                             <time className='post-profile-time'>
                                 {utils.displayCommentDateTime(post.create_at)}
diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx
index 8817e0d39..f5a2774a0 100644
--- a/web/react/components/user_settings/manage_incoming_hooks.jsx
+++ b/web/react/components/user_settings/manage_incoming_hooks.jsx
@@ -148,7 +148,8 @@ export default class ManageIncomingHooks extends React.Component {
 
         return (
             <div key='addIncomingHook'>
-                {'For developers building integrations this page lets you create webhook URLs for channels and private groups. Please see http://mattermost.org/webhooks to learn about creating webhooks, view samples, and to let the community know about integrations you have built. The URLs created below can be used by outside applications to create posts in any channels or private groups you have access to. The specified channel will be used as the default.'}
+                {'Create webhook URLs for use in external integrations. Please see '}<a href='http://mattermost.org/webhooks'>{'http://mattermost.org/webhooks'}</a> {' to learn more.'}
+                <br/>
                 <br/>
                 <label className='control-label'>{'Add a new incoming webhook'}</label>
                 <div className='padding-top'>