PLT-3145 Custom Emojis (#3381)

* Reorganized Backstage code to use a view controller and separated it from integrations code

* Renamed InstalledIntegrations component to BackstageList

* Added EmojiList page

* Added AddEmoji page

* Added custom emoji to autocomplete and text formatter

* Moved system emoji to EmojiStore

* Stopped trying to get emoji before logging in

* Rerender posts when emojis change

* Fixed submit handler on backstage pages to properly support enter

* Removed debugging code

* Updated javascript driver

* Fixed unit tests

* Fixed backstage routes

* Added clientside validation to prevent users from creating an emoji with the same name as a system one

* Fixed AddEmoji page to properly redirect when an emoji is created successfully

* Fixed updating emoji list when an emoji is deleted

* Added type prop to BackstageList to properly support using a table for the list

* Added help text to EmojiList

* Fixed backstage on smaller screen sizes

* Disable custom emoji by default

* Improved restrictions on creating emojis

* Fixed non-admin users seeing the option to delete each other's emojis

* Fixing gofmt

* Fixed emoji unit tests

* Fixed trying to get emoji from the server when it's disabled

1 files changed, 0 insertions, 341 deletions

diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx
deleted file mode 100644
index 5f9d96249..000000000
--- a/webapp/components/backstage/add_outgoing_webhook.jsx
+++ /dev/null
@@ -1,341 +0,0 @@
-// 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 * as Utils from 'utils/utils.jsx';
-
-import BackstageHeader from './backstage_header.jsx';
-import ChannelSelect from 'components/channel_select.jsx';
-import {FormattedMessage} from 'react-intl';
-import FormError from 'components/form_error.jsx';
-import {browserHistory, Link} from 'react-router/es6';
-import SpinnerButton from 'components/spinner_button.jsx';
-
-export default class AddOutgoingWebhook 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.updateContentType = this.updateContentType.bind(this);
-        this.updateChannelId = this.updateChannelId.bind(this);
-        this.updateTriggerWords = this.updateTriggerWords.bind(this);
-        this.updateCallbackUrls = this.updateCallbackUrls.bind(this);
-
-        this.state = {
-            displayName: '',
-            description: '',
-            contentType: 'application/x-www-form-urlencoded',
-            channelId: '',
-            triggerWords: '',
-            callbackUrls: '',
-            saving: false,
-            serverError: '',
-            clientError: null
-        };
-    }
-
-    handleSubmit(e) {
-        e.preventDefault();
-
-        if (this.state.saving) {
-            return;
-        }
-
-        this.setState({
-            saving: true,
-            serverError: '',
-            clientError: ''
-        });
-
-        const triggerWords = [];
-        if (this.state.triggerWords) {
-            for (let triggerWord of this.state.triggerWords.split('\n')) {
-                triggerWord = triggerWord.trim();
-
-                if (triggerWord.length > 0) {
-                    triggerWords.push(triggerWord);
-                }
-            }
-        }
-
-        if (!this.state.channelId && triggerWords.length === 0) {
-            this.setState({
-                saving: false,
-                clientError: (
-                    <FormattedMessage
-                        id='add_outgoing_webhook.triggerWordsOrChannelRequired'
-                        defaultMessage='A valid channel or a list of trigger words is required'
-                    />
-                )
-            });
-
-            return;
-        }
-
-        const callbackUrls = [];
-        for (let callbackUrl of this.state.callbackUrls.split('\n')) {
-            callbackUrl = callbackUrl.trim();
-
-            if (callbackUrl.length > 0) {
-                callbackUrls.push(callbackUrl);
-            }
-        }
-
-        if (callbackUrls.length === 0) {
-            this.setState({
-                saving: false,
-                clientError: (
-                    <FormattedMessage
-                        id='add_outgoing_webhook.callbackUrlsRequired'
-                        defaultMessage='One or more callback URLs are required'
-                    />
-                )
-            });
-
-            return;
-        }
-
-        const hook = {
-            channel_id: this.state.channelId,
-            trigger_words: triggerWords,
-            callback_urls: callbackUrls,
-            display_name: this.state.displayName,
-            content_type: this.state.contentType,
-            description: this.state.description
-        };
-
-        AsyncClient.addOutgoingHook(
-            hook,
-            () => {
-                browserHistory.push('/' + Utils.getTeamNameFromUrl() + '/settings/integrations/outgoing_webhooks');
-            },
-            (err) => {
-                this.setState({
-                    saving: false,
-                    serverError: err.message
-                });
-            }
-        );
-    }
-
-    updateDisplayName(e) {
-        this.setState({
-            displayName: e.target.value
-        });
-    }
-
-    updateDescription(e) {
-        this.setState({
-            description: e.target.value
-        });
-    }
-
-    updateContentType(e) {
-        this.setState({
-            contentType: e.target.value
-        });
-    }
-
-    updateChannelId(e) {
-        this.setState({
-            channelId: e.target.value
-        });
-    }
-
-    updateTriggerWords(e) {
-        this.setState({
-            triggerWords: e.target.value
-        });
-    }
-
-    updateCallbackUrls(e) {
-        this.setState({
-            callbackUrls: e.target.value
-        });
-    }
-
-    render() {
-        const contentTypeOption1 = 'application/x-www-form-urlencoded';
-        const contentTypeOption2 = 'application/json';
-        return (
-            <div className='backstage-content'>
-                <BackstageHeader>
-                    <Link to={'/' + Utils.getTeamNameFromUrl() + '/settings/integrations/outgoing_webhooks'}>
-                        <FormattedMessage
-                            id='installed_outgoing_webhooks.header'
-                            defaultMessage='Outgoing Webhooks'
-                        />
-                    </Link>
-                    <FormattedMessage
-                        id='add_outgoing_webhook.header'
-                        defaultMessage='Add'
-                    />
-                </BackstageHeader>
-                <div className='backstage-form'>
-                    <form className='form-horizontal'>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='displayName'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.displayName'
-                                    defaultMessage='Display Name'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <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-4'
-                                htmlFor='description'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.description'
-                                    defaultMessage='Description'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <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-4'
-                                htmlFor='contentType'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.content_Type'
-                                    defaultMessage='Content Type'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <select
-                                    className='form-control'
-                                    value={this.state.contentType}
-                                    onChange={this.updateContentType}
-                                >
-                                    <option
-                                        value={contentTypeOption1}
-                                    >
-                                        {contentTypeOption1}
-                                    </option>
-                                    <option
-                                        value={contentTypeOption2}
-                                    >
-                                        {contentTypeOption2}
-                                    </option>
-                                </select>
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='channelId'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.channel'
-                                    defaultMessage='Channel'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <ChannelSelect
-                                    id='channelId'
-                                    value={this.state.channelId}
-                                    onChange={this.updateChannelId}
-                                    selectOpen={true}
-                                />
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='triggerWords'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.triggerWords'
-                                    defaultMessage='Trigger Words (One Per Line)'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <textarea
-                                    id='triggerWords'
-                                    rows='3'
-                                    maxLength='1000'
-                                    className='form-control'
-                                    value={this.state.triggerWords}
-                                    onChange={this.updateTriggerWords}
-                                />
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='callbackUrls'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.callbackUrls'
-                                    defaultMessage='Callback URLs (One Per Line)'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <textarea
-                                    id='callbackUrls'
-                                    rows='3'
-                                    maxLength='1000'
-                                    className='form-control'
-                                    value={this.state.callbackUrls}
-                                    onChange={this.updateCallbackUrls}
-                                />
-                            </div>
-                        </div>
-                        <div className='backstage-form__footer'>
-                            <FormError errors={[this.state.serverError, this.state.clientError]}/>
-                            <Link
-                                className='btn btn-sm'
-                                to={'/' + Utils.getTeamNameFromUrl() + '/settings/integrations/outgoing_webhooks'}
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.cancel'
-                                    defaultMessage='Cancel'
-                                />
-                            </Link>
-                            <SpinnerButton
-                                className='btn btn-primary'
-                                type='submit'
-                                spinning={this.state.saving}
-                                onClick={this.handleSubmit}
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.save'
-                                    defaultMessage='Save'
-                                />
-                            </SpinnerButton>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        );
-    }
-}