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
2016-12-10 13:35:16 +09:00
--- a/webapp/actions/channel_actions.jsx
+++ b/webapp/actions/channel_actions.jsx
@@ -32,7 +32,7 @@ export function goToChannel(channel) {
    }
 }

-export function executeCommand(channelId, message, suggest, success, error) {
+export function executeCommand(message, args, success, error) {
    let msg = message;

    msg = msg.substring(0, msg.indexOf(' ')).toLowerCase() + msg.substring(msg.indexOf(' '), msg.length);
@@ -48,8 +48,7 @@ export function executeCommand(channelId, message, suggest, success, error) {
            msg = '/shortcuts';
        }
    }
-
-    Client.executeCommand(channelId, msg, suggest, success, error);
+    Client.executeCommand(msg, args, success, error);
 }

 export function setChannelAsRead(channelIdParam) {
--- a/webapp/client/client.jsx
+++ b/webapp/client/client.jsx
@@ -1494,13 +1494,13 @@ export default class Client {
            end(this.handleResponse.bind(this, 'listCommands', success, error));
    }

-    executeCommand(channelId, command, suggest, success, error) {
+    executeCommand(command, commandArgs, success, error) {
        request.
            post(`${this.getCommandsRoute()}/execute`).
            set(this.defaultHeaders).
            type('application/json').
            accept('application/json').
-            send({channelId, command, suggest: String(suggest)}).
+            send({command, ...commandArgs}).
            end(this.handleResponse.bind(this, 'executeCommand', success, error));

        this.track('api', 'api_integrations_used');
--- 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'
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -112,10 +112,11 @@ export default class CreatePost extends React.Component {
            PostStore.storeDraft(this.state.channelId, null);
            this.setState({message: '', postError: null, fileInfos: []});

+            const args = {};
+            args.channel_id = this.state.channelId;
            ChannelActions.executeCommand(
-                this.state.channelId,
                post.message,
-                false,
+                args,
                (data) => {
                    this.setState({submitting: false});

@@ -357,10 +358,11 @@ export default class CreatePost extends React.Component {
    showShortcuts(e) {
        if ((e.ctrlKey || e.metaKey) && e.keyCode === Constants.KeyCodes.FORWARD_SLASH) {
            e.preventDefault();
+            const args = {};
+            args.channel_id = this.state.channelId;
            ChannelActions.executeCommand(
-                this.state.channelId,
-                '/shortcuts ',
-                false,
+                '/shortcuts',
+                args,
                null,
                (err) => {
                    this.setState({
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -293,7 +293,7 @@ export default class PostList extends React.Component {

            if (commentRootId) {
                for (const postId in posts) {
-                    if (posts[postId].root_id === commentRootId) {
+                    if (posts[postId].root_id === commentRootId && !PostUtils.isSystemMessage(posts[postId])) {
                        commentCount += 1;
                        if (posts[postId].user_id === userId) {
                            shouldHighlightThreads = true;
--- a/webapp/components/rhs_comment.jsx
+++ b/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'>
--- a/webapp/tests/client_command.test.jsx
+++ b/webapp/tests/client_command.test.jsx
@@ -38,10 +38,11 @@ describe('Client.Commands', function() {

    it('executeCommand', function(done) {
        TestHelper.initBasic(() => {
+            const args = {};
+            args.channel_id = TestHelper.basicChannel().id;
            TestHelper.basicClient().executeCommand(
-                TestHelper.basicChannel().id,
                '/shrug',
-                null,
+                args,
                function(data) {
                    assert.equal(data.response_type, 'in_channel');
                    done();