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

1 files changed, 34 insertions, 2 deletions

diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index a235691b4..3bd8d5d1c 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -4,6 +4,7 @@
 import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
+import * as ChannelActions from 'actions/channel_actions.jsx';
 import EmojiStore from 'stores/emoji_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import PostDeletedModal from './post_deleted_modal.jsx';
@@ -22,6 +23,7 @@ import * as PostActions from 'actions/post_actions.jsx';
 import Constants from 'utils/constants.jsx';
 
 import {FormattedMessage} from 'react-intl';
+import {browserHistory} from 'react-router/es6';
 
 const ActionTypes = Constants.ActionTypes;
 const KeyCodes = Constants.KeyCodes;
@@ -121,7 +123,6 @@ export default class CreateComment extends React.Component {
         }
 
         MessageHistoryStore.storeMessageInHistory(message);
-
         if (message.trim().length === 0 && this.state.fileInfos.length === 0) {
             return;
         }
@@ -129,6 +130,8 @@ export default class CreateComment extends React.Component {
         const isReaction = REACTION_PATTERN.exec(message);
         if (isReaction && EmojiStore.has(isReaction[2])) {
             this.handleSubmitReaction(isReaction);
+        } else if (message.indexOf('/') === 0) {
+            this.handleSubmitCommand(message);
         } else {
             this.handleSubmitPost(message);
         }
@@ -146,6 +149,36 @@ export default class CreateComment extends React.Component {
         this.focusTextbox(forceFocus);
     }
 
+    handleSubmitCommand(message) {
+        PostStore.storeCommentDraft(this.props.rootId, null);
+        this.setState({message: '', postError: null, fileInfos: []});
+
+        const args = {};
+        args.channel_id = this.props.channelId;
+        args.root_id = this.props.rootId;
+        args.parent_id = this.props.rootId;
+        ChannelActions.executeCommand(
+            message,
+            args,
+            (data) => {
+                this.setState({submitting: false});
+                if (data.goto_location && data.goto_location.length > 0) {
+                    browserHistory.push(data.goto_location);
+                }
+            },
+            (err) => {
+                if (err.sendMessage) {
+                    this.handleSubmitPost(message);
+                } else {
+                    const state = {};
+                    state.serverError = err.message;
+                    state.submitting = false;
+                    this.setState(state);
+                }
+            }
+        );
+    }
+
     handleSubmitPost(message) {
         const userId = UserStore.getCurrentId();
         const time = Utils.getTimestamp();
@@ -444,7 +477,6 @@ export default class CreateComment extends React.Component {
                                 onBlur={this.handleBlur}
                                 createMessage={Utils.localizeMessage('create_comment.addComment', 'Add a comment...')}
                                 initialText=''
-                                supportsCommands={false}
                                 channelId={this.props.channelId}
                                 id='reply_textbox'
                                 ref='textbox'