PLT-1750 Moved slash commands to backstage

* Added slash commands to InstalledIntegrations page

* Reset installed integration type filter if there is no longer any integrations of the selected type

* Added pages to backstage to add slash commands

* Cleaned up internationalization for slash commands

* Added ability to regen slash command tokens from backstage

* Removed Integrations tab from UserSettings

10 files changed, 740 insertions, 850 deletions

diff --git a/webapp/components/backstage/add_command.jsx b/webapp/components/backstage/add_command.jsx
new file mode 100644
index 000000000..93ff66271
--- /dev/null
+++ b/webapp/components/backstage/add_command.jsx
@@ -0,0 +1,509 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as AsyncClient from 'utils/async_client.jsx';
+import {browserHistory} from 'react-router';
+import * as Utils from 'utils/utils.jsx';
+
+import {FormattedMessage} from 'react-intl';
+import FormError from 'components/form_error.jsx';
+import {Link} from 'react-router';
+import SpinnerButton from 'components/spinner_button.jsx';
+
+const REQUEST_POST = 'P';
+const REQUEST_GET = 'G';
+
+export default class AddCommand extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+
+        this.updateDisplayName = this.updateDisplayName.bind(this);
+        this.updateDescription = this.updateDescription.bind(this);
+        this.updateTrigger = this.updateTrigger.bind(this);
+        this.updateUrl = this.updateUrl.bind(this);
+        this.updateMethod = this.updateMethod.bind(this);
+        this.updateUsername = this.updateUsername.bind(this);
+        this.updateIconUrl = this.updateIconUrl.bind(this);
+        this.updateAutocomplete = this.updateAutocomplete.bind(this);
+        this.updateAutocompleteHint = this.updateAutocompleteHint.bind(this);
+        this.updateAutocompleteDescription = this.updateAutocompleteDescription.bind(this);
+
+        this.state = {
+            displayName: '',
+            description: '',
+            trigger: '',
+            url: '',
+            method: REQUEST_POST,
+            username: '',
+            iconUrl: '',
+            autocomplete: false,
+            autocompleteHint: '',
+            autocompleteDescription: '',
+            saving: false,
+            serverError: '',
+            clientError: null
+        };
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        if (this.state.saving) {
+            return;
+        }
+
+        this.setState({
+            saving: true,
+            serverError: '',
+            clientError: ''
+        });
+
+        const command = {
+            display_name: this.state.displayName,
+            description: this.state.description,
+            trigger: this.state.trigger.trim(),
+            url: this.state.url.trim(),
+            method: this.state.method,
+            username: this.state.username,
+            icon_url: this.state.iconUrl,
+            auto_complete: this.state.autocomplete
+        };
+
+        if (command.auto_complete) {
+            command.auto_complete_desc = this.state.autocompleteDescription;
+            command.auto_complete_hint = this.state.autocompleteHint;
+        }
+
+        if (!command.trigger) {
+            this.setState({
+                saving: false,
+                clientError: (
+                    <FormattedMessage
+                        id='add_command.triggerRequired'
+                        defaultMessage='A trigger word is required'
+                    />
+                )
+            });
+        }
+
+        if (!command.url) {
+            this.setState({
+                saving: false,
+                clientError: (
+                    <FormattedMessage
+                        id='add_command.urlRequired'
+                        defaultMessage='A request URL is required'
+                    />
+                )
+            });
+        }
+
+        AsyncClient.addCommand(
+            command,
+            () => {
+                browserHistory.push('/settings/integrations/installed');
+            },
+            (err) => {
+                this.setState({
+                    saving: false,
+                    serverError: err.message
+                });
+            }
+        );
+    }
+
+    updateDisplayName(e) {
+        this.setState({
+            displayName: e.target.value
+        });
+    }
+
+    updateDescription(e) {
+        this.setState({
+            description: e.target.value
+        });
+    }
+
+    updateTrigger(e) {
+        this.setState({
+            trigger: e.target.value
+        });
+    }
+
+    updateUrl(e) {
+        this.setState({
+            url: e.target.value
+        });
+    }
+
+    updateMethod(e) {
+        this.setState({
+            method: e.target.value
+        });
+    }
+
+    updateUsername(e) {
+        this.setState({
+            username: e.target.value
+        });
+    }
+
+    updateIconUrl(e) {
+        this.setState({
+            iconUrl: e.target.value
+        });
+    }
+
+    updateAutocomplete(e) {
+        this.setState({
+            autocomplete: e.target.checked
+        });
+    }
+
+    updateAutocompleteHint(e) {
+        this.setState({
+            autocompleteHint: e.target.value
+        });
+    }
+
+    updateAutocompleteDescription(e) {
+        this.setState({
+            autocompleteDescription: e.target.value
+        });
+    }
+
+    render() {
+        let autocompleteFields = null;
+        if (this.state.autocomplete) {
+            autocompleteFields = [(
+                <div
+                    key='autocompleteHint'
+                    className='form-group'
+                >
+                    <label
+                        className='control-label col-sm-3'
+                        htmlFor='autocompleteHint'
+                    >
+                        <FormattedMessage
+                            id='add_command.autocompleteHint'
+                            defaultMessage='Autocomplete Hint'
+                        />
+                    </label>
+                    <div className='col-md-5 col-sm-9'>
+                        <input
+                            id='autocompleteHint'
+                            type='text'
+                            maxLength='1024'
+                            className='form-control'
+                            value={this.state.autocompleteHint}
+                            onChange={this.updateAutocompleteHint}
+                            placeholder={Utils.localizeMessage('add_command.autocompleteHint.placeholder', 'Example: [Patient Name]')}
+                        />
+                        <div className='add-integration__help'>
+                            <FormattedMessage
+                                id='add_command.autocompleteDescription.help'
+                                defaultMessage='Optional hint in the autocomplete list about command parameters'
+                            />
+                        </div>
+                    </div>
+                </div>
+            ),
+            (
+                <div
+                    key='autocompleteDescription'
+                    className='form-group'
+                >
+                    <label
+                        className='control-label col-sm-3'
+                        htmlFor='autocompleteDescription'
+                    >
+                        <FormattedMessage
+                            id='add_command.autocompleteDescription'
+                            defaultMessage='Autocomplete Description'
+                        />
+                    </label>
+                    <div className='col-md-5 col-sm-9'>
+                        <input
+                            id='description'
+                            type='text'
+                            maxLength='128'
+                            className='form-control'
+                            value={this.state.autocompleteDescription}
+                            onChange={this.updateAutocompleteDescription}
+                            placeholder={Utils.localizeMessage('add_command.autocompleteDescription.placeholder', 'Example: "Returns search results for patient records"')}
+                        />
+                        <div className='add-integration__help'>
+                            <FormattedMessage
+                                id='add_command.autocompleteDescription.help'
+                                defaultMessage='Optional short description of slash command for the autocomplete list.'
+                            />
+                        </div>
+                    </div>
+                </div>
+            )];
+        }
+
+        return (
+            <div className='backstage-content row'>
+                <div className='add-command'>
+                    <div className='backstage-header'>
+                        <h1>
+                            <FormattedMessage
+                                id='add_command.header'
+                                defaultMessage='Add Slash Command'
+                            />
+                        </h1>
+                    </div>
+                </div>
+                <div className='backstage-form'>
+                    <form className='form-horizontal'>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='displayName'
+                            >
+                                <FormattedMessage
+                                    id='add_command.displayName'
+                                    defaultMessage='Display Name'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='displayName'
+                                    type='text'
+                                    maxLength='64'
+                                    className='form-control'
+                                    value={this.state.displayName}
+                                    onChange={this.updateDisplayName}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='description'
+                            >
+                                <FormattedMessage
+                                    id='add_command.description'
+                                    defaultMessage='Description'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='description'
+                                    type='text'
+                                    maxLength='128'
+                                    className='form-control'
+                                    value={this.state.description}
+                                    onChange={this.updateDescription}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='trigger'
+                            >
+                                <FormattedMessage
+                                    id='add_command.trigger'
+                                    defaultMessage='Command Trigger Word'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='trigger'
+                                    type='text'
+                                    maxLength='128'
+                                    className='form-control'
+                                    value={this.state.trigger}
+                                    onChange={this.updateTrigger}
+                                    placeholder={Utils.localizeMessage('add_command.trigger.placeholder', 'Command trigger e.g. "hello" not including the slash')}
+                                />
+                                <div className='add-integration__help'>
+                                    <FormattedMessage
+                                        id='add_command.trigger.help1'
+                                        defaultMessage='Examples: /patient, /client /employee'
+                                    />
+                                </div>
+                                <div className='add-integration__help'>
+                                    <FormattedMessage
+                                        id='add_command.trigger.help2'
+                                        defaultMessage='Reserved: /echo, /join, /logout, /me, /shrug'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='url'
+                            >
+                                <FormattedMessage
+                                    id='add_command.url'
+                                    defaultMessage='Request URL'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='url'
+                                    type='text'
+                                    maxLength='1024'
+                                    className='form-control'
+                                    value={this.state.url}
+                                    onChange={this.updateUrl}
+                                    placeholder={Utils.localizeMessage('add_command.url.placeholder', 'Must start with http:// or https://')}
+                                />
+                                <div className='add-integration__help'>
+                                    <FormattedMessage
+                                        id='add_command.url.help'
+                                        defaultMessage='The callback URL to receive the HTTP POST or GET event request when the slash command is run.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='method'
+                            >
+                                <FormattedMessage
+                                    id='add_command.method'
+                                    defaultMessage='Request Method'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <select
+                                    id='method'
+                                    className='form-control'
+                                    value={this.state.method}
+                                    onChange={this.updateMethod}
+                                >
+                                    <option value={REQUEST_POST}>
+                                        {Utils.localizeMessage('add_command.method.post', 'POST')}
+                                    </option>
+                                    <option value={REQUEST_GET}>
+                                        {Utils.localizeMessage('add_command.method.get', 'GET')}
+                                    </option>
+                                </select>
+                                <div className='add-integration__help'>
+                                    <FormattedMessage
+                                        id='add_command.method.help'
+                                        defaultMessage='The type of command request issued to the Request URL.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-lavel col-sm-3'
+                                htmlFor='username'
+                            >
+                                <FormattedMessage
+                                    id='add_command.username'
+                                    defaultMessage='Response Username'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='username'
+                                    type='text'
+                                    maxLength='64'
+                                    className='form-control'
+                                    value={this.state.username}
+                                    onChange={this.updateUsername}
+                                    placholder={Utils.localizeMessage('add_command.username.placeholder', 'Username')}
+                                />
+                                <div className='add-integration__help'>
+                                    <FormattedMessage
+                                        id='add_command.username.help'
+                                        defaultMessage='Choose a username override for responses for this slash command. Usernames can consist of up to 22 characters consisting of lowercase letters, numbers and the symbols "-", "_", and ".".'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='iconUrl'
+                            >
+                                <FormattedMessage
+                                    id='add_command.iconUrl'
+                                    defaultMessage='Response Icon'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='iconUrl'
+                                    type='text'
+                                    maxLength='1024'
+                                    className='form-control'
+                                    value={this.state.iconUrl}
+                                    onChange={this.updateIconUrl}
+                                    placeholder={Utils.localizeMessage('add_command.iconUrl.placeholder', 'https://www.example.com/myicon.png')}
+                                />
+                                <div className='add-integration__help'>
+                                    <FormattedMessage
+                                        id='add_command.iconUrl.help'
+                                        defaultMessage='Choose a profile picture override for the post responses to this slash command. Enter the URL of a .png or .jpg file at least 128 pixels by 128 pixels.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='autocomplete'
+                            >
+                                <FormattedMessage
+                                    id='add_command.autocomplete'
+                                    defaultMessage='Autocomplete'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    type='checkbox'
+                                    checked={this.state.autocomplete}
+                                    onChange={this.updateAutocomplete}
+                                />
+                                <div className='add-integration__help'>
+                                    <FormattedMessage
+                                        id='add_command.autocomplete.help'
+                                        defaultMessage='Show this command in the autocomplete list'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        {autocompleteFields}
+                        <div className='backstage-form__footer'>
+                            <FormError errors={[this.state.serverError, this.state.clientError]}/>
+                            <Link
+                                className='btn btn-sm'
+                                to={'/settings/integrations/add'}
+                            >
+                                <FormattedMessage
+                                    id='add_command.cancel'
+                                    defaultMessage='Cancel'
+                                />
+                            </Link>
+                            <SpinnerButton
+                                className='btn btn-primary'
+                                type='submit'
+                                spinning={this.state.saving}
+                                onClick={this.handleSubmit}
+                            >
+                                <FormattedMessage
+                                    id='add_command.save'
+                                    defaultMessage='Save'
+                                />
+                            </SpinnerButton>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/webapp/components/backstage/add_integration.jsx b/webapp/components/backstage/add_integration.jsx
index 5f4a69bfe..0ab36e101 100644
--- a/webapp/components/backstage/add_integration.jsx
+++ b/webapp/components/backstage/add_integration.jsx
@@ -56,6 +56,28 @@ export default class AddIntegration extends React.Component {
             );
         }
 
+        if (window.mm_config.EnableCommands === 'true') {
+            options.push(
+                <AddIntegrationOption
+                    key='command'
+                    image={WebhookIcon}
+                    title={
+                        <FormattedMessage
+                            id='add_integration.command.title'
+                            defaultMessage='Slash Command'
+                        />
+                    }
+                    description={
+                        <FormattedMessage
+                            id='add_integration.command.description'
+                            defaultMessage='Create slash commands to send events to external integrations and receive a response.'
+                        />
+                    }
+                    link={'/settings/integrations/add/command'}
+                />
+            );
+        }
+
         return (
             <div className='backstage-content row'>
                 <div className='backstage-header'>
diff --git a/webapp/components/backstage/backstage_sidebar.jsx b/webapp/components/backstage/backstage_sidebar.jsx
index 13c4f8b50..172119b32 100644
--- a/webapp/components/backstage/backstage_sidebar.jsx
+++ b/webapp/components/backstage/backstage_sidebar.jsx
@@ -59,6 +59,15 @@ export default class BackstageSidebar extends React.Component {
                                     />
                                 )}
                             />
+                            <BackstageSection
+                                name='command'
+                                title={(
+                                    <FormattedMessage
+                                        id='backstage_sidebar.integrations.add.command'
+                                        defaultMessage='Slash Command'
+                                    />
+                                )}
+                            />
                         </BackstageSection>
                     </BackstageCategory>
                 </ul>
diff --git a/webapp/components/backstage/installed_command.jsx b/webapp/components/backstage/installed_command.jsx
new file mode 100644
index 000000000..51adce160
--- /dev/null
+++ b/webapp/components/backstage/installed_command.jsx
@@ -0,0 +1,97 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as Utils from 'utils/utils.jsx';
+
+import {FormattedMessage} from 'react-intl';
+
+export default class InstalledCommand extends React.Component {
+    static get propTypes() {
+        return {
+            command: React.PropTypes.object.isRequired,
+            onRegenToken: React.PropTypes.func.isRequired,
+            onDelete: React.PropTypes.func.isRequired
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleRegenToken = this.handleRegenToken.bind(this);
+        this.handleDelete = this.handleDelete.bind(this);
+    }
+
+    handleRegenToken(e) {
+        e.preventDefault();
+
+        this.props.onRegenToken(this.props.command);
+    }
+
+    handleDelete(e) {
+        e.preventDefault();
+
+        this.props.onDelete(this.props.command);
+    }
+
+    render() {
+        const command = this.props.command;
+
+        return (
+            <div className='backstage-list__item'>
+                <div className='item-details'>
+                    <div className='item-details__row'>
+                        <span className='item-details__name'>
+                            {command.display_name}
+                        </span>
+                        <span className='item-details__type'>
+                            <FormattedMessage
+                                id='installed_integrations.commandType'
+                                defaultMessage='(Slash Command)'
+                            />
+                        </span>
+                    </div>
+                    <div className='item-details__row'>
+                        <span className='item-details__description'>
+                            {command.description}
+                        </span>
+                    </div>
+                    <div className='item-details__row'>
+                        <span className='item-details__creation'>
+                            <FormattedMessage
+                                id='installed_integrations.creation'
+                                defaultMessage='Created by {creator} on {createAt, date, full}'
+                                values={{
+                                    creator: Utils.displayUsername(command.creator_Id),
+                                    createAt: command.create_at
+                                }}
+                            />
+                        </span>
+                    </div>
+                </div>
+                <div className='item-actions'>
+                    <a
+                        href='#'
+                        onClick={this.handleRegenToken}
+                    >
+                        <FormattedMessage
+                            id='installed_integrations.regenToken'
+                            defaultMessage='Regen Token'
+                        />
+                    </a>
+                    {' - '}
+                    <a
+                        href='#'
+                        onClick={this.handleDelete}
+                    >
+                        <FormattedMessage
+                            id='installed_integrations.delete'
+                            defaultMessage='Delete'
+                        />
+                    </a>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/webapp/components/backstage/installed_incoming_webhook.jsx b/webapp/components/backstage/installed_incoming_webhook.jsx
index 95a303edc..cd9a6d761 100644
--- a/webapp/components/backstage/installed_incoming_webhook.jsx
+++ b/webapp/components/backstage/installed_incoming_webhook.jsx
@@ -12,20 +12,20 @@ export default class InstalledIncomingWebhook extends React.Component {
     static get propTypes() {
         return {
             incomingWebhook: React.PropTypes.object.isRequired,
-            onDeleteClick: React.PropTypes.func.isRequired
+            onDelete: React.PropTypes.func.isRequired
         };
     }
 
     constructor(props) {
         super(props);
 
-        this.handleDeleteClick = this.handleDeleteClick.bind(this);
+        this.handleDelete = this.handleDelete.bind(this);
     }
 
-    handleDeleteClick(e) {
+    handleDelete(e) {
         e.preventDefault();
 
-        this.props.onDeleteClick(this.props.incomingWebhook);
+        this.props.onDelete(this.props.incomingWebhook);
     }
 
     render() {
@@ -69,7 +69,7 @@ export default class InstalledIncomingWebhook extends React.Component {
                 <div className='item-actions'>
                     <a
                         href='#'
-                        onClick={this.handleDeleteClick}
+                        onClick={this.handleDelete}
                     >
                         <FormattedMessage
                             id='installed_integrations.delete'
diff --git a/webapp/components/backstage/installed_integrations.jsx b/webapp/components/backstage/installed_integrations.jsx
index fe84ae81a..e353b7f29 100644
--- a/webapp/components/backstage/installed_integrations.jsx
+++ b/webapp/components/backstage/installed_integrations.jsx
@@ -11,6 +11,7 @@ import * as Utils from 'utils/utils.jsx';
 import {FormattedMessage} from 'react-intl';
 import InstalledIncomingWebhook from './installed_incoming_webhook.jsx';
 import InstalledOutgoingWebhook from './installed_outgoing_webhook.jsx';
+import InstalledCommand from './installed_command.jsx';
 import {Link} from 'react-router';
 
 export default class InstalledIntegrations extends React.Component {
@@ -24,10 +25,13 @@ export default class InstalledIntegrations extends React.Component {
         this.deleteIncomingWebhook = this.deleteIncomingWebhook.bind(this);
         this.regenOutgoingWebhookToken = this.regenOutgoingWebhookToken.bind(this);
         this.deleteOutgoingWebhook = this.deleteOutgoingWebhook.bind(this);
+        this.regenCommandToken = this.regenCommandToken.bind(this);
+        this.deleteCommand = this.deleteCommand.bind(this);
 
         this.state = {
             incomingWebhooks: [],
             outgoingWebhooks: [],
+            commands: [],
             typeFilter: '',
             filter: ''
         };
@@ -55,6 +59,16 @@ export default class InstalledIntegrations extends React.Component {
                 AsyncClient.listOutgoingHooks();
             }
         }
+
+        if (window.mm_config.EnableCommands === 'true') {
+            if (IntegrationStore.hasReceivedCommands()) {
+                this.setState({
+                    commands: IntegrationStore.getCommands()
+                });
+            } else {
+                AsyncClient.listTeamCommands();
+            }
+        }
     }
 
     componentWillUnmount() {
@@ -62,10 +76,24 @@ export default class InstalledIntegrations extends React.Component {
     }
 
     handleIntegrationChange() {
+        const incomingWebhooks = IntegrationStore.getIncomingWebhooks();
+        const outgoingWebhooks = IntegrationStore.getOutgoingWebhooks();
+        const commands = IntegrationStore.getCommands();
+
         this.setState({
-            incomingWebhooks: IntegrationStore.getIncomingWebhooks(),
-            outgoingWebhooks: IntegrationStore.getOutgoingWebhooks()
+            incomingWebhooks,
+            outgoingWebhooks,
+            commands
         });
+
+        // reset the type filter if we were viewing a category that is now empty
+        if ((this.state.typeFilter === 'incomingWebhooks' && incomingWebhooks.length === 0) ||
+            (this.state.typeFilter === 'outgoingWebhooks' && outgoingWebhooks.length === 0) ||
+            (this.state.typeFilter === 'commands' && commands.length === 0)) {
+            this.setState({
+                typeFilter: ''
+            });
+        }
     }
 
     updateTypeFilter(e, typeFilter) {
@@ -94,10 +122,18 @@ export default class InstalledIntegrations extends React.Component {
         AsyncClient.deleteOutgoingHook(outgoingWebhook.id);
     }
 
-    renderTypeFilters(incomingWebhooks, outgoingWebhooks) {
+    regenCommandToken(command) {
+        AsyncClient.regenCommandToken(command.id);
+    }
+
+    deleteCommand(command) {
+        AsyncClient.deleteCommand(command.id);
+    }
+
+    renderTypeFilters(incomingWebhooks, outgoingWebhooks, commands) {
         const fields = [];
 
-        if (incomingWebhooks.length > 0 || outgoingWebhooks.length > 0) {
+        if (incomingWebhooks.length > 0 || outgoingWebhooks.length > 0 || commands.length > 0) {
             let filterClassName = 'filter-sort';
             if (this.state.typeFilter === '') {
                 filterClassName += ' filter-sort--active';
@@ -187,6 +223,39 @@ export default class InstalledIntegrations extends React.Component {
             );
         }
 
+        if (commands.length > 0) {
+            fields.push(
+                <span
+                    key='commandsDivider'
+                    className='divider'
+                >
+                    {'|'}
+                </span>
+            );
+
+            let filterClassName = 'filter-sort';
+            if (this.state.typeFilter === 'commands') {
+                filterClassName += ' filter-sort--active';
+            }
+
+            fields.push(
+                <a
+                    key='commandsFilter'
+                    className={filterClassName}
+                    href='#'
+                    onClick={(e) => this.updateTypeFilter(e, 'commands')}
+                >
+                    <FormattedMessage
+                        id='installed_integrations.commandsFilter'
+                        defaultMessage='Slash Commands ({count})'
+                        values={{
+                            count: commands.length
+                        }}
+                    />
+                </a>
+            );
+        }
+
         return (
             <div className='backstage-filters__sort'>
                 {fields}
@@ -197,7 +266,9 @@ export default class InstalledIntegrations extends React.Component {
     render() {
         const incomingWebhooks = this.state.incomingWebhooks;
         const outgoingWebhooks = this.state.outgoingWebhooks;
+        const commands = this.state.commands;
 
+        // TODO description, name, creator filtering
         const filter = this.state.filter.toLowerCase();
 
         const integrations = [];
@@ -215,7 +286,7 @@ export default class InstalledIntegrations extends React.Component {
                     <InstalledIncomingWebhook
                         key={incomingWebhook.id}
                         incomingWebhook={incomingWebhook}
-                        onDeleteClick={this.deleteIncomingWebhook}
+                        onDelete={this.deleteIncomingWebhook}
                     />
                 );
             }
@@ -242,6 +313,27 @@ export default class InstalledIntegrations extends React.Component {
             }
         }
 
+        if (!this.state.typeFilter || this.state.typeFilter === 'commands') {
+            for (const command of commands) {
+                if (filter) {
+                    const channel = ChannelStore.get(command.channel_id);
+
+                    if (!channel || channel.name.toLowerCase().indexOf(filter) === -1) {
+                        continue;
+                    }
+                }
+
+                integrations.push(
+                    <InstalledCommand
+                        key={command.id}
+                        command={command}
+                        onRegenToken={this.regenCommandToken}
+                        onDelete={this.deleteCommand}
+                    />
+                );
+            }
+        }
+
         return (
             <div className='backstage-content row'>
                 <div className='installed-integrations'>
@@ -270,7 +362,7 @@ export default class InstalledIntegrations extends React.Component {
                         </Link>
                     </div>
                     <div className='backstage-filters'>
-                        {this.renderTypeFilters(this.state.incomingWebhooks, this.state.outgoingWebhooks)}
+                        {this.renderTypeFilters(incomingWebhooks, outgoingWebhooks, commands)}
                         <div className='backstage-filter__search'>
                             <i className='fa fa-search'></i>
                             <input
diff --git a/webapp/components/user_settings/manage_command_hooks.jsx b/webapp/components/user_settings/manage_command_hooks.jsx
deleted file mode 100644
index ce353ad64..000000000
--- a/webapp/components/user_settings/manage_command_hooks.jsx
+++ /dev/null
@@ -1,681 +0,0 @@
-// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import LoadingScreen from '../loading_screen.jsx';
-
-import * as Client from 'utils/client.jsx';
-
-import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'react-intl';
-
-const holders = defineMessages({
-    requestTypePost: {
-        id: 'user.settings.cmds.request_type_post',
-        defaultMessage: 'POST'
-    },
-    requestTypeGet: {
-        id: 'user.settings.cmds.request_type_get',
-        defaultMessage: 'GET'
-    },
-    addDisplayNamePlaceholder: {
-        id: 'user.settings.cmds.add_display_name.placeholder',
-        defaultMessage: 'Example: "Search patient records"'
-    },
-    addUsernamePlaceholder: {
-        id: 'user.settings.cmds.add_username.placeholder',
-        defaultMessage: 'Username'
-    },
-    addTriggerPlaceholder: {
-        id: 'user.settings.cmds.add_trigger.placeholder',
-        defaultMessage: 'Command trigger e.g. "hello" not including the slash'
-    },
-    addAutoCompleteDescPlaceholder: {
-        id: 'user.settings.cmds.auto_complete_desc.placeholder',
-        defaultMessage: 'Example: "Returns search results for patient records"'
-    },
-    addAutoCompleteHintPlaceholder: {
-        id: 'user.settings.cmds.auto_complete_hint.placeholder',
-        defaultMessage: 'Example: [Patient Name]'
-    },
-    adUrlPlaceholder: {
-        id: 'user.settings.cmds.url.placeholder',
-        defaultMessage: 'Must start with http:// or https://'
-    },
-    autocompleteYes: {
-        id: 'user.settings.cmds.auto_complete.yes',
-        defaultMessage: 'yes'
-    },
-    autocompleteNo: {
-        id: 'user.settings.cmds.auto_complete.no',
-        defaultMessage: 'no'
-    }
-});
-
-import React from 'react';
-
-export default class ManageCommandCmds extends React.Component {
-    constructor() {
-        super();
-
-        this.getCmds = this.getCmds.bind(this);
-        this.addNewCmd = this.addNewCmd.bind(this);
-        this.emptyCmd = this.emptyCmd.bind(this);
-        this.updateTrigger = this.updateTrigger.bind(this);
-        this.updateURL = this.updateURL.bind(this);
-        this.updateMethod = this.updateMethod.bind(this);
-        this.updateUsername = this.updateUsername.bind(this);
-        this.updateIconURL = this.updateIconURL.bind(this);
-        this.updateDisplayName = this.updateDisplayName.bind(this);
-        this.updateAutoComplete = this.updateAutoComplete.bind(this);
-        this.updateAutoCompleteDesc = this.updateAutoCompleteDesc.bind(this);
-        this.updateAutoCompleteHint = this.updateAutoCompleteHint.bind(this);
-
-        this.state = {cmds: [], cmd: this.emptyCmd(), getCmdsComplete: false};
-    }
-
-    static propTypes() {
-        return {
-            intl: intlShape.isRequired
-        };
-    }
-
-    emptyCmd() {
-        var cmd = {};
-        cmd.url = '';
-        cmd.trigger = '';
-        cmd.method = 'P';
-        cmd.username = '';
-        cmd.icon_url = '';
-        cmd.auto_complete = false;
-        cmd.auto_complete_desc = '';
-        cmd.auto_complete_hint = '';
-        cmd.display_name = '';
-        return cmd;
-    }
-
-    componentDidMount() {
-        this.getCmds();
-    }
-
-    addNewCmd(e) {
-        e.preventDefault();
-
-        if (this.state.cmd.trigger === '' || this.state.cmd.url === '') {
-            return;
-        }
-
-        var cmd = this.state.cmd;
-        if (cmd.trigger.length !== 0) {
-            cmd.trigger = cmd.trigger.trim();
-        }
-        cmd.url = cmd.url.trim();
-
-        Client.addCommand(
-            cmd,
-            (data) => {
-                let cmds = Object.assign([], this.state.cmds);
-                if (!cmds) {
-                    cmds = [];
-                }
-                cmds.push(data);
-                this.setState({cmds, addError: null, cmd: this.emptyCmd()});
-            },
-            (err) => {
-                this.setState({addError: err.message});
-            }
-        );
-    }
-
-    removeCmd(id) {
-        const data = {};
-        data.id = id;
-
-        Client.deleteCommand(
-            data,
-            () => {
-                const cmds = this.state.cmds;
-                let index = -1;
-                for (let i = 0; i < cmds.length; i++) {
-                    if (cmds[i].id === id) {
-                        index = i;
-                        break;
-                    }
-                }
-
-                if (index !== -1) {
-                    cmds.splice(index, 1);
-                }
-
-                this.setState({cmds});
-            },
-            (err) => {
-                this.setState({editError: err.message});
-            }
-        );
-    }
-
-    regenToken(id) {
-        const regenData = {};
-        regenData.id = id;
-
-        Client.regenCommandToken(
-            regenData,
-            (data) => {
-                const cmds = Object.assign([], this.state.cmds);
-                for (let i = 0; i < cmds.length; i++) {
-                    if (cmds[i].id === id) {
-                        cmds[i] = data;
-                        break;
-                    }
-                }
-
-                this.setState({cmds, editError: null});
-            },
-            (err) => {
-                this.setState({editError: err.message});
-            }
-        );
-    }
-
-    getCmds() {
-        Client.listTeamCommands(
-            (data) => {
-                if (data) {
-                    this.setState({cmds: data, getCmdsComplete: true, editError: null});
-                }
-            },
-            (err) => {
-                this.setState({editError: err.message});
-            }
-        );
-    }
-
-    updateTrigger(e) {
-        var cmd = this.state.cmd;
-        cmd.trigger = e.target.value;
-        this.setState(cmd);
-    }
-
-    updateURL(e) {
-        var cmd = this.state.cmd;
-        cmd.url = e.target.value;
-        this.setState(cmd);
-    }
-
-    updateMethod(e) {
-        var cmd = this.state.cmd;
-        cmd.method = e.target.value;
-        this.setState(cmd);
-    }
-
-    updateUsername(e) {
-        var cmd = this.state.cmd;
-        cmd.username = e.target.value;
-        this.setState(cmd);
-    }
-
-    updateIconURL(e) {
-        var cmd = this.state.cmd;
-        cmd.icon_url = e.target.value;
-        this.setState(cmd);
-    }
-
-    updateDisplayName(e) {
-        var cmd = this.state.cmd;
-        cmd.display_name = e.target.value;
-        this.setState(cmd);
-    }
-
-    updateAutoComplete(e) {
-        var cmd = this.state.cmd;
-        cmd.auto_complete = e.target.checked;
-        this.setState(cmd);
-    }
-
-    updateAutoCompleteDesc(e) {
-        var cmd = this.state.cmd;
-        cmd.auto_complete_desc = e.target.value;
-        this.setState(cmd);
-    }
-
-    updateAutoCompleteHint(e) {
-        var cmd = this.state.cmd;
-        cmd.auto_complete_hint = e.target.value;
-        this.setState(cmd);
-    }
-
-    render() {
-        let addError;
-        if (this.state.addError) {
-            addError = <label className='has-error'>{this.state.addError}</label>;
-        }
-
-        let editError;
-        if (this.state.editError) {
-            addError = <label className='has-error'>{this.state.editError}</label>;
-        }
-
-        const cmds = [];
-        this.state.cmds.forEach((cmd) => {
-            let triggerDiv;
-            if (cmd.trigger && cmd.trigger.length !== 0) {
-                triggerDiv = (
-                    <div className='padding-top x2'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.trigger'
-                                defaultMessage='Command Trigger Word: '
-                            />
-                        </strong>{cmd.trigger}
-                    </div>
-                );
-            }
-
-            cmds.push(
-                <div
-                    key={cmd.id}
-                    className='webhook__item webcmd__item'
-                >
-                    {triggerDiv}
-                    <div className='padding-top x2 webcmd__url'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.url'
-                                defaultMessage='Request URL: '
-                            />
-                        </strong><span className='word-break--all'>{cmd.url}</span>
-                    </div>
-                    <div className='padding-top x2'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.request_type'
-                                defaultMessage='Request Method: '
-                            />
-                        </strong>
-                        <span className='word-break--all'>
-                            {
-                                cmd.method === 'P' ?
-                                <FormattedMessage
-                                    id='user.settings.cmds.request_type_post'
-                                    defaultMessage='POST'
-                                /> :
-                                <FormattedMessage
-                                    id='user.settings.cmds.request_type_get'
-                                    defaultMessage='GET'
-                                />
-                            }
-                        </span>
-                    </div>
-                    <div className='padding-top x2'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.username'
-                                defaultMessage='Response Username: '
-                            />
-                        </strong><span className='word-break--all'>{cmd.username}</span>
-                    </div>
-                    <div className='padding-top x2'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.icon_url'
-                                defaultMessage='Response Icon: '
-                            />
-                        </strong><span className='word-break--all'>{cmd.icon_url}</span>
-                    </div>
-                    <div className='padding-top x2'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.auto_complete'
-                                defaultMessage='Autocomplete: '
-                            />
-                        </strong><span className='word-break--all'>{cmd.auto_complete ? this.props.intl.formatMessage(holders.autocompleteYes) : this.props.intl.formatMessage(holders.autocompleteNo)}</span>
-                    </div>
-                    <div className='padding-top x2'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.auto_complete_hint'
-                                defaultMessage='Autocomplete Hint: '
-                            />
-                        </strong><span className='word-break--all'>{cmd.auto_complete_hint}</span>
-                    </div>
-                    <div className='padding-top x2'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.auto_complete_desc'
-                                defaultMessage='Autocomplete Description: '
-                            />
-                        </strong><span className='word-break--all'>{cmd.auto_complete_desc}</span>
-                    </div>
-                    <div className='padding-top x2'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.display_name'
-                                defaultMessage='Descriptive Label: '
-                            />
-                        </strong><span className='word-break--all'>{cmd.display_name}</span>
-                    </div>
-                    <div className='padding-top'>
-                        <strong>
-                            <FormattedMessage
-                                id='user.settings.cmds.token'
-                                defaultMessage='Token: '
-                            />
-                        </strong>{cmd.token}
-                    </div>
-                    <div className='padding-top'>
-                        <a
-                            className='text-danger'
-                            href='#'
-                            onClick={this.regenToken.bind(this, cmd.id)}
-                        >
-                            <FormattedMessage
-                                id='user.settings.cmds.regen'
-                                defaultMessage='Regen Token'
-                            />
-                        </a>
-                        <a
-                            className='webhook__remove webcmd__remove'
-                            href='#'
-                            onClick={this.removeCmd.bind(this, cmd.id)}
-                        >
-                            <span aria-hidden='true'>{'×'}</span>
-                        </a>
-                    </div>
-                    <div className='padding-top x2 divider-light'></div>
-                </div>
-            );
-        });
-
-        let displayCmds;
-        if (!this.state.getCmdsComplete) {
-            displayCmds = <LoadingScreen/>;
-        } else if (cmds.length > 0) {
-            displayCmds = cmds;
-        } else {
-            displayCmds = (
-                <div className='padding-top x2'>
-                    <FormattedMessage
-                        id='user.settings.cmds.none'
-                        defaultMessage='None'
-                    />
-                </div>
-            );
-        }
-
-        const existingCmds = (
-            <div className='webhooks__container webcmds__container'>
-                <label className='control-label padding-top x2'>
-                    <FormattedMessage
-                        id='user.settings.cmds.existing'
-                        defaultMessage='Existing commands'
-                    />
-                </label>
-                <div className='padding-top divider-light'></div>
-                <div className='webhooks__list webcmds__list'>
-                    {displayCmds}
-                </div>
-            </div>
-        );
-
-        const disableButton = this.state.cmd.trigger === '' || this.state.cmd.url === '';
-
-        return (
-            <div key='addCommandCmd'>
-                <FormattedHTMLMessage
-                    id='user.settings.cmds.add_desc'
-                    defaultMessage='Create slash commands to send events to external integrations and receive a response. For example typing `/patient Joe Smith` could bring back search results from your internal health records management system for the name “Joe Smith”.  Please see <a href="http://docs.mattermost.com/developer/slash-commands.html">Slash commands documentation</a>  for detailed instructions. View all slash commands configured on this team below.'
-                />
-                <div><label className='control-label padding-top x2'>
-                    <FormattedMessage
-                        id='user.settings.cmds.add_new'
-                        defaultMessage='Add a new command'
-                    />
-                </label></div>
-                <div className='padding-top divider-light'></div>
-                <div className='padding-top'>
-
-                    <div className='padding-top x2'>
-                        <label className='control-label'>
-                            <FormattedMessage
-                                id='user.settings.cmds.trigger'
-                                defaultMessage='Command Trigger Word: '
-                            />
-                        </label>
-                        <div className='padding-top'>
-                            <input
-                                ref='trigger'
-                                className='form-control'
-                                value={this.state.cmd.trigger}
-                                onChange={this.updateTrigger}
-                                placeholder={this.props.intl.formatMessage(holders.addTriggerPlaceholder)}
-                            />
-                        </div>
-                        <div className='padding-top'>
-                            <FormattedMessage
-                                id='user.settings.cmds.trigger_desc'
-                                defaultMessage='Examples: /patient, /client, /employee Reserved: /echo, /join, /logout, /me, /shrug'
-                            />
-                        </div>
-                    </div>
-
-                    <div className='padding-top x2'>
-                        <label className='control-label'>
-                            <FormattedMessage
-                                id='user.settings.cmds.url'
-                                defaultMessage='Request URL: '
-                            />
-                        </label>
-                        <div className='padding-top'>
-                        <input
-                            ref='URL'
-                            className='form-control'
-                            value={this.state.cmd.url}
-                            rows={1}
-                            onChange={this.updateURL}
-                            placeholder={this.props.intl.formatMessage(holders.adUrlPlaceholder)}
-                        />
-                        </div>
-                        <div className='padding-top'>
-                            <FormattedMessage
-                                id='user.settings.cmds.url_desc'
-                                defaultMessage='The callback URL to receive the HTTP POST or GET event request when the slash command is run.'
-                            />
-                        </div>
-                    </div>
-
-                    <div className='padding-top x2'>
-                        <label className='control-label'>
-                            <FormattedMessage
-                                id='user.settings.cmds.request_type'
-                                defaultMessage='Request Method: '
-                            />
-                        </label>
-                        <div className='padding-top'>
-                            <select
-                                ref='method'
-                                className='form-control'
-                                value={this.state.cmd.method}
-                                onChange={this.updateMethod}
-                            >
-                                <option value='P'>
-                                    {this.props.intl.formatMessage(holders.requestTypePost)}
-                                </option>
-                                <option value='G'>
-                                    {this.props.intl.formatMessage(holders.requestTypeGet)}
-                                </option>
-                            </select>
-                        </div>
-                        <div className='padding-top'>
-                            <FormattedMessage
-                                id='user.settings.cmds.request_type_desc'
-                                defaultMessage='The type of command request issued to the Request URL.'
-                            />
-                        </div>
-                    </div>
-
-                    <div className='padding-top x2'>
-                        <label className='control-label'>
-                            <FormattedMessage
-                                id='user.settings.cmds.username'
-                                defaultMessage='Response Username: '
-                            />
-                        </label>
-                        <div className='padding-top'>
-                            <input
-                                ref='username'
-                                className='form-control'
-                                value={this.state.cmd.username}
-                                onChange={this.updateUsername}
-                                placeholder={this.props.intl.formatMessage(holders.addUsernamePlaceholder)}
-                            />
-                        </div>
-                        <div className='padding-top'>
-                            <FormattedMessage
-                                id='user.settings.cmds.username_desc'
-                                defaultMessage='Choose a username override for responses for this slash command. Usernames can consist of up to 22 characters consisting of lowercase letters, numbers and they symbols "-", "_", and "." .'
-                            />
-                        </div>
-                    </div>
-
-                    <div className='padding-top x2'>
-                        <label className='control-label'>
-                            <FormattedMessage
-                                id='user.settings.cmds.icon_url'
-                                defaultMessage='Response Icon: '
-                            />
-                        </label>
-                        <div className='padding-top'>
-                            <input
-                                ref='iconURL'
-                                className='form-control'
-                                value={this.state.cmd.icon_url}
-                                onChange={this.updateIconURL}
-                                placeholder='https://www.example.com/myicon.png'
-                            />
-                        </div>
-                        <div className='padding-top'>
-                            <FormattedMessage
-                                id='user.settings.cmds.icon_url_desc'
-                                defaultMessage='Choose a profile picture override for the post responses to this slash command. Enter the URL of a .png or .jpg file at least 128 pixels by 128 pixels.'
-                            />
-                        </div>
-                    </div>
-
-                    <div className='padding-top x2'>
-                        <label className='control-label'>
-                            <FormattedMessage
-                                id='user.settings.cmds.auto_complete'
-                                defaultMessage='Autocomplete: '
-                            />
-                        </label>
-                        <div className='padding-top'>
-                            <div className='checkbox'>
-                                <label>
-                                    <input
-                                        type='checkbox'
-                                        checked={this.state.cmd.auto_complete}
-                                        onChange={this.updateAutoComplete}
-                                    />
-                                    <FormattedMessage
-                                        id='user.settings.cmds.auto_complete_help'
-                                        defaultMessage=' Show this command in the autocomplete list.'
-                                    />
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className='padding-top x2'>
-                        <label className='control-label'>
-                            <FormattedMessage
-                                id='user.settings.cmds.auto_complete_hint'
-                                defaultMessage='Autocomplete Hint: '
-                            />
-                        </label>
-                        <div className='padding-top'>
-                            <input
-                                ref='autoCompleteHint'
-                                className='form-control'
-                                value={this.state.cmd.auto_complete_hint}
-                                onChange={this.updateAutoCompleteHint}
-                                placeholder={this.props.intl.formatMessage(holders.addAutoCompleteHintPlaceholder)}
-                            />
-                        </div>
-                        <div className='padding-top'>
-                            <FormattedMessage
-                                id='user.settings.cmds.auto_complete_hint_desc'
-                                defaultMessage='Optional hint in the autocomplete list about parameters needed for command.'
-                            />
-                        </div>
-                    </div>
-
-                    <div className='padding-top x2'>
-                        <label className='control-label'>
-                            <FormattedMessage
-                                id='user.settings.cmds.auto_complete_desc'
-                                defaultMessage='Autocomplete Description: '
-                            />
-                        </label>
-                        <div className='padding-top'>
-                            <input
-                                ref='autoCompleteDesc'
-                                className='form-control'
-                                value={this.state.cmd.auto_complete_desc}
-                                onChange={this.updateAutoCompleteDesc}
-                                placeholder={this.props.intl.formatMessage(holders.addAutoCompleteDescPlaceholder)}
-                            />
-                        </div>
-                        <div className='padding-top'>
-                            <FormattedMessage
-                                id='user.settings.cmds.auto_complete_desc_desc'
-                                defaultMessage='Optional short description of slash command for the autocomplete list.'
-                            />
-                        </div>
-                    </div>
-
-                    <div className='padding-top x2'>
-                        <label className='control-label'>
-                            <FormattedMessage
-                                id='user.settings.cmds.display_name'
-                                defaultMessage='Descriptive Label: '
-                            />
-                        </label>
-                        <div className='padding-top'>
-                            <input
-                                ref='displayName'
-                                className='form-control'
-                                value={this.state.cmd.display_name}
-                                onChange={this.updateDisplayName}
-                                placeholder={this.props.intl.formatMessage(holders.addDisplayNamePlaceholder)}
-                            />
-                        </div>
-                        <div className='padding-top'>
-                            <FormattedMessage
-                                id='user.settings.cmds.cmd_display_name'
-                                defaultMessage='Brief description of slash command to show in listings.'
-                            />
-                        </div>
-                        {addError}
-                    </div>
-
-                    <div className='padding-top x2 padding-bottom'>
-                        <a
-                            className={'btn btn-sm btn-primary'}
-                            href='#'
-                            disabled={disableButton}
-                            onClick={this.addNewCmd}
-                        >
-                            <FormattedMessage
-                                id='user.settings.cmds.add'
-                                defaultMessage='Add'
-                            />
-                        </a>
-                    </div>
-                </div>
-                {existingCmds}
-                {editError}
-            </div>
-        );
-    }
-}
-
-export default injectIntl(ManageCommandCmds);
diff --git a/webapp/components/user_settings/user_settings.jsx b/webapp/components/user_settings/user_settings.jsx
index 904232da9..d89298cfb 100644
--- a/webapp/components/user_settings/user_settings.jsx
+++ b/webapp/components/user_settings/user_settings.jsx
@@ -7,7 +7,6 @@ import NotificationsTab from './user_settings_notifications.jsx';
 import SecurityTab from './user_settings_security.jsx';
 import GeneralTab from './user_settings_general.jsx';
 import DeveloperTab from './user_settings_developer.jsx';
-import IntegrationsTab from './user_settings_integrations.jsx';
 import DisplayTab from './user_settings_display.jsx';
 import AdvancedTab from './user_settings_advanced.jsx';
 
@@ -98,20 +97,6 @@ export default class UserSettings extends React.Component {
                     />
                 </div>
             );
-        } else if (this.props.activeTab === 'integrations') {
-            return (
-                <div>
-                    <IntegrationsTab
-                        ref='activeTab'
-                        user={this.state.user}
-                        activeSection={this.props.activeSection}
-                        updateSection={this.props.updateSection}
-                        updateTab={this.props.updateTab}
-                        closeModal={this.props.closeModal}
-                        collapseModal={this.props.collapseModal}
-                    />
-                </div>
-            );
         } else if (this.props.activeTab === 'display') {
             return (
                 <div>
diff --git a/webapp/components/user_settings/user_settings_integrations.jsx b/webapp/components/user_settings/user_settings_integrations.jsx
deleted file mode 100644
index 37081b863..000000000
--- a/webapp/components/user_settings/user_settings_integrations.jsx
+++ /dev/null
@@ -1,126 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import $ from 'jquery';
-import SettingItemMin from '../setting_item_min.jsx';
-import SettingItemMax from '../setting_item_max.jsx';
-import ManageCommandHooks from './manage_command_hooks.jsx';
-
-import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
-
-const holders = defineMessages({
-    cmdName: {
-        id: 'user.settings.integrations.commands',
-        defaultMessage: 'Slash Commands'
-    },
-    cmdDesc: {
-        id: 'user.settings.integrations.commandsDescription',
-        defaultMessage: 'Manage your slash commands'
-    }
-});
-
-import React from 'react';
-
-class UserSettingsIntegrationsTab extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.updateSection = this.updateSection.bind(this);
-
-        this.state = {};
-    }
-    updateSection(section) {
-        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
-        this.props.updateSection(section);
-    }
-    render() {
-        let commandHooksSection;
-        var inputs = [];
-        const {formatMessage} = this.props.intl;
-
-        if (global.window.mm_config.EnableCommands === 'true') {
-            if (this.props.activeSection === 'command-hooks') {
-                inputs.push(
-                    <ManageCommandHooks key='command-hook-ui'/>
-                );
-
-                commandHooksSection = (
-                    <SettingItemMax
-                        title={formatMessage(holders.cmdName)}
-                        width='medium'
-                        inputs={inputs}
-                        updateSection={(e) => {
-                            this.updateSection('');
-                            e.preventDefault();
-                        }}
-                    />
-                );
-            } else {
-                commandHooksSection = (
-                    <SettingItemMin
-                        title={formatMessage(holders.cmdName)}
-                        width='medium'
-                        describe={formatMessage(holders.cmdDesc)}
-                        updateSection={() => {
-                            this.updateSection('command-hooks');
-                        }}
-                    />
-                );
-            }
-        }
-
-        return (
-            <div>
-                <div className='modal-header'>
-                    <button
-                        type='button'
-                        className='close'
-                        data-dismiss='modal'
-                        aria-label='Close'
-                        onClick={this.props.closeModal}
-                    >
-                        <span aria-hidden='true'>{'×'}</span>
-                    </button>
-                    <h4
-                        className='modal-title'
-                        ref='title'
-                    >
-                        <div className='modal-back'>
-                            <i
-                                className='fa fa-angle-left'
-                                onClick={this.props.collapseModal}
-                            />
-                        </div>
-                        <FormattedMessage
-                            id='user.settings.integrations.title'
-                            defaultMessage='Integration Settings'
-                        />
-                    </h4>
-                </div>
-                <div className='user-settings'>
-                    <h3 className='tab-header'>
-                        <FormattedMessage
-                            id='user.settings.integrations.title'
-                            defaultMessage='Integration Settings'
-                        />
-                    </h3>
-                    <div className='divider-dark first'/>
-                    {commandHooksSection}
-                    <div className='divider-dark'/>
-                </div>
-            </div>
-        );
-    }
-}
-
-UserSettingsIntegrationsTab.propTypes = {
-    intl: intlShape.isRequired,
-    user: React.PropTypes.object,
-    updateSection: React.PropTypes.func,
-    updateTab: React.PropTypes.func,
-    activeSection: React.PropTypes.string,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired
-};
-
-export default injectIntl(UserSettingsIntegrationsTab);
diff --git a/webapp/components/user_settings/user_settings_modal.jsx b/webapp/components/user_settings/user_settings_modal.jsx
index b71547baf..43fb728bd 100644
--- a/webapp/components/user_settings/user_settings_modal.jsx
+++ b/webapp/components/user_settings/user_settings_modal.jsx
@@ -31,10 +31,6 @@ const holders = defineMessages({
         id: 'user.settings.modal.developer',
         defaultMessage: 'Developer'
     },
-    integrations: {
-        id: 'user.settings.modal.integrations',
-        defaultMessage: 'Integrations'
-    },
     display: {
         id: 'user.settings.modal.display',
         defaultMessage: 'Display'
@@ -227,7 +223,6 @@ class UserSettingsModal extends React.Component {
         if (this.state.currentUser == null) {
             return (<div/>);
         }
-        var isAdmin = Utils.isAdmin(this.state.currentUser.roles);
         var tabs = [];
 
         tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'});
@@ -237,18 +232,6 @@ class UserSettingsModal extends React.Component {
             tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'});
         }
 
-        if (global.window.mm_config.EnableIncomingWebhooks === 'true' || global.window.mm_config.EnableOutgoingWebhooks === 'true' || global.window.mm_config.EnableCommands === 'true') {
-            var show = global.window.mm_config.EnableOnlyAdminIntegrations !== 'true';
-
-            if (global.window.mm_config.EnableOnlyAdminIntegrations === 'true' && isAdmin) {
-                show = true;
-            }
-
-            if (show) {
-                tabs.push({name: 'integrations', uiName: formatMessage(holders.integrations), icon: 'glyphicon glyphicon-transfer'});
-            }
-        }
-
         tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'glyphicon glyphicon-eye-open'});
         tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'glyphicon glyphicon-list-alt'});