PLT-2553 Updated backstage page navigation (#2661)

* Updated integrations list based on feedback

* Reorganized Integrations pages

* Repurposed AddIntegration page as a landing page for Integrations

* Moved backstage breadcrumb header into its own component

* Removed unnecessary prop

* Fixed Save links on AddIntegration pages

1 files changed, 91 insertions, 0 deletions

diff --git a/webapp/components/backstage/installed_outgoing_webhooks.jsx b/webapp/components/backstage/installed_outgoing_webhooks.jsx
new file mode 100644
index 000000000..15d927a41
--- /dev/null
+++ b/webapp/components/backstage/installed_outgoing_webhooks.jsx
@@ -0,0 +1,91 @@
+// 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 IntegrationStore from 'stores/integration_store.jsx';
+
+import {FormattedMessage} from 'react-intl';
+import InstalledOutgoingWebhook from './installed_outgoing_webhook.jsx';
+import InstalledIntegrations from './installed_integrations.jsx';
+
+export default class InstalledOutgoingWebhooks extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
+
+        this.regenOutgoingWebhookToken = this.regenOutgoingWebhookToken.bind(this);
+        this.deleteOutgoingWebhook = this.deleteOutgoingWebhook.bind(this);
+
+        this.state = {
+            outgoingWebhooks: []
+        };
+    }
+
+    componentWillMount() {
+        IntegrationStore.addChangeListener(this.handleIntegrationChange);
+
+        if (window.mm_config.EnableOutgoingWebhooks === 'true') {
+            if (IntegrationStore.hasReceivedOutgoingWebhooks()) {
+                this.setState({
+                    outgoingWebhooks: IntegrationStore.getOutgoingWebhooks()
+                });
+            } else {
+                AsyncClient.listOutgoingHooks();
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        IntegrationStore.removeChangeListener(this.handleIntegrationChange);
+    }
+
+    handleIntegrationChange() {
+        this.setState({
+            outgoingWebhooks: IntegrationStore.getOutgoingWebhooks()
+        });
+    }
+
+    regenOutgoingWebhookToken(outgoingWebhook) {
+        AsyncClient.regenOutgoingHookToken(outgoingWebhook.id);
+    }
+
+    deleteOutgoingWebhook(outgoingWebhook) {
+        AsyncClient.deleteOutgoingHook(outgoingWebhook.id);
+    }
+
+    render() {
+        const outgoingWebhooks = this.state.outgoingWebhooks.map((outgoingWebhook) => {
+            return (
+                <InstalledOutgoingWebhook
+                    key={outgoingWebhook.id}
+                    outgoingWebhook={outgoingWebhook}
+                    onRegenToken={this.regenOutgoingWebhookToken}
+                    onDelete={this.deleteOutgoingWebhook}
+                />
+            );
+        });
+
+        return (
+            <InstalledIntegrations
+                header={
+                    <FormattedMessage
+                        id='installed_outgoing_webhooks.header'
+                        defaultMessage='Installed Outgoing Webhooks'
+                    />
+                }
+                addText={
+                    <FormattedMessage
+                        id='installed_outgoing_webhooks.add'
+                        defaultMessage='Add Outgoing Webhook'
+                    />
+                }
+                addLink='/settings/integrations/outgoing_webhooks/add'
+            >
+                {outgoingWebhooks}
+            </InstalledIntegrations>
+        );
+    }
+}