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_incoming_webhooks.jsx b/webapp/components/backstage/installed_incoming_webhooks.jsx
index 0d6f900d1..389f65919 100644
--- a/webapp/components/backstage/installed_incoming_webhooks.jsx
+++ b/webapp/components/backstage/installed_incoming_webhooks.jsx
@@ -20,21 +20,16 @@ export default class InstalledIncomingWebhooks extends React.Component {
         this.deleteIncomingWebhook = this.deleteIncomingWebhook.bind(this);
 
         this.state = {
-            incomingWebhooks: []
+            incomingWebhooks: IntegrationStore.getIncomingWebhooks(),
+            loading: !IntegrationStore.hasReceivedIncomingWebhooks()
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         IntegrationStore.addChangeListener(this.handleIntegrationChange);
 
-        if (window.mm_config.EnableIncomingWebhooks === 'true') {
-            if (IntegrationStore.hasReceivedIncomingWebhooks()) {
-                this.setState({
-                    incomingWebhooks: IntegrationStore.getIncomingWebhooks()
-                });
-            } else {
-                AsyncClient.listIncomingHooks();
-            }
+        if (window.mm_config.EnableIncomingWebhooks === 'true' && this.state.loading) {
+            AsyncClient.listIncomingHooks();
         }
     }
 
@@ -44,7 +39,8 @@ export default class InstalledIncomingWebhooks extends React.Component {
 
     handleIntegrationChange() {
         this.setState({
-            incomingWebhooks: IntegrationStore.getIncomingWebhooks()
+            incomingWebhooks: IntegrationStore.getIncomingWebhooks(),
+            loading: !IntegrationStore.hasReceivedIncomingWebhooks()
         });
     }
 
@@ -78,6 +74,13 @@ export default class InstalledIncomingWebhooks extends React.Component {
                     />
                 }
                 addLink={'/' + Utils.getTeamNameFromUrl() + '/settings/integrations/incoming_webhooks/add'}
+                emptyText={
+                    <FormattedMessage
+                        id='installed_incoming_webhooks.empty'
+                        defaultMessage='No incoming webhooks found'
+                    />
+                }
+                loading={this.state.loading}
             >
                 {incomingWebhooks}
             </InstalledIntegrations>