PLT-1598 Slash command works in RHS (#4367)

* PLT-1598 Slash command works in RHS

* fix UserProfile in the reply for Slash Command

* fix some problem about the system messages in RHS
* system message in RHS isn't displayed as comment for root message

* remove status indicator for system message in RHS

* system message in RHS is colored to grey

* system messages don't count as commented post

* fix bug about cleaning draft in RHS

* remove unnecessary function

* implement new model for executing command

webapp/components/rhs_comment.jsx

@@ -227,6 +227,8 @@ export default class RhsComment extends React.Component {
     render() {
         const post = this.props.post;
         const flagIcon = Constants.FLAG_ICON_SVG;
+        const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
+        const isSystemMessage = PostUtils.isSystemMessage(post);
 
         var currentUserCss = '';
         if (this.props.currentUser === post.user_id) {
@@ -236,10 +238,31 @@ export default class RhsComment extends React.Component {
         var timestamp = this.props.currentUser.update_at;
 
         let botIndicator;
-
+        let userProfile = (
+            <UserProfile user={this.props.user}/>
+        );
         if (post.props && post.props.from_webhook) {
+            if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
+                userProfile = (
+                    <UserProfile
+                        user={this.props.user}
+                        overwriteName={post.props.override_username}
+                        disablePopover={true}
+                    />
+                );
+            }
             botIndicator = <li className='bot-indicator'>{Constants.BOT_NAME}</li>;
+        } else if (isSystemMessage) {
+            userProfile = (
+                <UserProfile
+                    user={{}}
+                    overwriteName={Constants.SYSTEM_MESSAGE_PROFILE_NAME}
+                    overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE}
+                    disablePopover={true}
+                />
+            );
         }
+
         let loading;
         let postClass = '';
         let message = <PostMessageContainer post={post}/>;
@@ -264,6 +287,11 @@ export default class RhsComment extends React.Component {
             );
         }
 
+        let systemMessageClass = '';
+        if (isSystemMessage) {
+            systemMessageClass = 'post--system';
+        }
+
         let status = this.props.status;
         if (post.props && post.props.from_webhook === 'true') {
             status = null;
@@ -279,6 +307,15 @@ export default class RhsComment extends React.Component {
             />
         );
 
+        if (isSystemMessage) {
+            profilePic = (
+                <span
+                    className='icon'
+                    dangerouslySetInnerHTML={{__html: mattermostLogo}}
+                />
+            );
+        }
+
         let compactClass = '';
         if (this.props.compactDisplay) {
             compactClass = 'post--compact';
@@ -387,13 +424,13 @@ export default class RhsComment extends React.Component {
         };
 
         return (
-            <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}>
+            <div className={'post post--thread ' + currentUserCss + ' ' + compactClass + ' ' + systemMessageClass}>
                 <div className='post__content'>
                     {profilePicContainer}
                     <div>
                         <ul className='post__header'>
                             <li className='col col__name'>
-                                <strong><UserProfile user={this.props.user}/></strong>
+                                <strong>{userProfile}</strong>
                             </li>
                             {botIndicator}
                             <li className='col'>