Added AddIntegration page

5 files changed, 183 insertions, 3 deletions

diff --git a/webapp/components/backstage/add_integration.jsx b/webapp/components/backstage/add_integration.jsx
new file mode 100644
index 000000000..1ca079bb7
--- /dev/null
+++ b/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>
+        );
+    }
+}
+
diff --git a/webapp/components/backstage/add_integration_option.jsx b/webapp/components/backstage/add_integration_option.jsx
new file mode 100644
index 000000000..3c3caf2f4
--- /dev/null
+++ b/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>
+        );
+    }
+}
diff --git a/webapp/components/backstage/installed_integrations.jsx b/webapp/components/backstage/installed_integrations.jsx
index cfb68c660..8dae44295 100644
--- a/webapp/components/backstage/installed_integrations.jsx
+++ b/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'
diff --git a/webapp/root.jsx b/webapp/root.jsx
index c10099967..b6ec954c2 100644
--- a/webapp/root.jsx
+++ b/webapp/root.jsx
@@ -39,6 +39,7 @@ import TutorialView from 'components/tutorial/tutorial_view.jsx';
 import BackstageNavbar from 'components/backstage/backstage_navbar.jsx';
 import BackstageSidebar from 'components/backstage/backstage_sidebar.jsx';
 import InstalledIntegrations from 'components/backstage/installed_integrations.jsx';
+import AddIntegration from 'components/backstage/add_integration.jsx';
 
 import SignupTeamComplete from 'components/signup_team_complete/components/signup_team_complete.jsx';
 import WelcomePage from 'components/signup_team_complete/components/team_signup_welcome_page.jsx';
@@ -267,7 +268,7 @@ function renderRootComponent() {
                                 components={{
                                     navbar: BackstageNavbar,
                                     sidebar: BackstageSidebar,
-                                    center: null
+                                    center: AddIntegration
                                 }}
                             />
                             <Route
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index 4619e4cbc..70bab99cb 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -92,7 +92,7 @@
     max-width: 958px;
 }
 
-.installed-integrations__header {
+.backstage__header {
     margin-bottom: 20px;
     width: 100%;
 
@@ -180,3 +180,33 @@
         padding-left: 20px;
     }
 }
+
+.add-integration-option {
+    background-color: white;
+    border: lightgray 1px solid;
+    display: inline-block;
+    height: 210px;
+    margin-right: 30px;
+    padding: 20px;
+    text-align: center;
+    width: 250px;
+
+    &:hover {
+        color: default;
+        text-decoration: none;
+    }
+
+    &__image {
+        width: 80px;
+        height: 80px;
+    }
+
+    &__title {
+        color: black;
+        margin-bottom: 10px;
+    }
+
+    &__description {
+        color: gray;
+    }
+}