Added AddIntegration page

webapp/components/backstage/add_integration.jsx

@@ -0,0 +1,110 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import TeamStore from 'stores/team_store.jsx';
+
+import {FormattedMessage} from 'react-intl';
+import AddIntegrationOption from './add_integration_option.jsx';
+
+import WebhookIcon from 'images/webhook_icon.jpg';
+
+export default class AddIntegration extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleChange = this.handleChange.bind(this);
+
+        this.state = {
+            team: TeamStore.getCurrent()
+        };
+    }
+
+    componentDidMount() {
+        TeamStore.addChangeListener(this.handleChange);
+    }
+
+    componentWillUnmount() {
+        TeamStore.removeChangeListener(this.handleChange);
+    }
+
+    handleChange() {
+        this.setState({
+            team: TeamStore.getCurrent()
+        });
+    }
+
+    render() {
+        const team = TeamStore.getCurrent();
+
+        if (!team) {
+            return null;
+        }
+
+        const options = [];
+
+        if (window.mm_config.EnableIncomingWebhooks === 'true') {
+            options.push(
+                <AddIntegrationOption
+                    key='incomingWebhook'
+                    image={WebhookIcon}
+                    title={
+                        <FormattedMessage
+                            id='add_integration.incomingWebhook.title'
+                            defaultMessage='Incoming Webhook'
+                        />
+                    }
+                    description={
+                        <FormattedMessage
+                            id='add_integration.incomingWebhook.description'
+                            defaultMessage='This is a webhook to which you can send stuff that will be posted'
+                        />
+                    }
+                    link={`/${team.name}/integrations/add/incoming_webhook`}
+                />
+            );
+        }
+
+        if (window.mm_config.EnableOutgoingWebhooks === 'true') {
+            options.push(
+                <AddIntegrationOption
+                    key='outgoingWebhook'
+                    image={WebhookIcon}
+                    title={
+                        <FormattedMessage
+                            id='add_integration.outgoingWebhook.title'
+                            defaultMessage='Outgoing Webhook'
+                        />
+                    }
+                    description={
+                        <FormattedMessage
+                            id='add_integration.outgoingWebhook.description'
+                            defaultMessage='This is a webhook that will send stuff to you when stuff is posted'
+                        />
+                    }
+                    link={`/${team.name}/integrations/add/outgoing_webhook`}
+                />
+            );
+        }
+
+        return (
+            <div className='backstage row'>
+                <div className='add-integration'>
+                    <div className='backstage__header'>
+                        <h1 className='text'>
+                            <FormattedMessage
+                                id='add-integration.header'
+                                defaultMessage='Add Integration'
+                            />
+                        </h1>
+                    </div>
+                </div>
+                <div className='add-integration__options'>
+                    {options}
+                </div>
+            </div>
+        );
+    }
+}
+

webapp/components/backstage/add_integration_option.jsx

@@ -0,0 +1,39 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import {Link} from 'react-router';
+
+export default class AddIntegrationOption extends React.Component {
+    static get propTypes() {
+        return {
+            image: React.PropTypes.string.isRequired,
+            title: React.PropTypes.node.isRequired,
+            description: React.PropTypes.node.isRequired,
+            link: React.PropTypes.string.isRequired
+        };
+    }
+
+    render() {
+        const {image, title, description, link} = this.props;
+
+        return (
+            <Link
+                to={link}
+                className='add-integration-option'
+            >
+                <img
+                    className='add-integration-option__image'
+                    src={image}
+                />
+                <div className='add-integration-option__title'>
+                    {title}
+                </div>
+                <div className='add-integration-option__description'>
+                    {description}
+                </div>
+            </Link>
+        );
+    }
+}

webapp/components/backstage/installed_integrations.jsx

@@ -198,7 +198,7 @@ export default class InstalledIntegrations extends React.Component {
         return (
             <div className='backstage row'>
                 <div className='installed-integrations'>
-                    <div className='installed-integrations__header'>
+                    <div className='backstage__header'>
                         <h1 className='text'>
                             <FormattedMessage
                                 id='installed_integrations.header'