PLT-2698 Integrations improvements (#2883)

* Fixed Integrations link to show up for non-admins (when enabled) and when only slash commands are enabled

* Updated BackstageSidebar to only show enabled integrations

* Added placeholder to integrations list when none exist

* Added loading spinner to integrations pages when they're loading

1 files changed, 14 insertions, 11 deletions

diff --git a/webapp/components/backstage/installed_outgoing_webhooks.jsx b/webapp/components/backstage/installed_outgoing_webhooks.jsx
index 98992b081..e0817fda8 100644
--- a/webapp/components/backstage/installed_outgoing_webhooks.jsx
+++ b/webapp/components/backstage/installed_outgoing_webhooks.jsx
@@ -21,21 +21,16 @@ export default class InstalledOutgoingWebhooks extends React.Component {
         this.deleteOutgoingWebhook = this.deleteOutgoingWebhook.bind(this);
 
         this.state = {
-            outgoingWebhooks: []
+            outgoingWebhooks: IntegrationStore.getOutgoingWebhooks(),
+            loading: !IntegrationStore.hasReceivedOutgoingWebhooks()
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         IntegrationStore.addChangeListener(this.handleIntegrationChange);
 
-        if (window.mm_config.EnableOutgoingWebhooks === 'true') {
-            if (IntegrationStore.hasReceivedOutgoingWebhooks()) {
-                this.setState({
-                    outgoingWebhooks: IntegrationStore.getOutgoingWebhooks()
-                });
-            } else {
-                AsyncClient.listOutgoingHooks();
-            }
+        if (window.mm_config.EnableOutgoingWebhooks === 'true' && this.state.loading) {
+            AsyncClient.listOutgoingHooks();
         }
     }
 
@@ -45,7 +40,8 @@ export default class InstalledOutgoingWebhooks extends React.Component {
 
     handleIntegrationChange() {
         this.setState({
-            outgoingWebhooks: IntegrationStore.getOutgoingWebhooks()
+            outgoingWebhooks: IntegrationStore.getOutgoingWebhooks(),
+            loading: !IntegrationStore.hasReceivedOutgoingWebhooks()
         });
     }
 
@@ -84,6 +80,13 @@ export default class InstalledOutgoingWebhooks extends React.Component {
                     />
                 }
                 addLink={'/' + Utils.getTeamNameFromUrl() + '/settings/integrations/outgoing_webhooks/add'}
+                emptyText={
+                    <FormattedMessage
+                        id='installed_outgoing_webhooks.empty'
+                        defaultMessage='No outgoing webhooks found'
+                    />
+                }
+                loading={this.state.loading}
             >
                 {outgoingWebhooks}
             </InstalledIntegrations>