PLT-2927/PLT-2924 Fixing issues with integration lists (#2974)

* Changed IntegrationStore to store integrations by team

* Fixed regenerating a command's token not causing the UI to update

* Re-added IntegrationStore.hasReceived methods

webapp/client/client.jsx

@@ -1203,7 +1203,7 @@ export default class Client {
             end(this.handleResponse.bind(this, 'listTeamCommands', success, error));
     }
 
-    regenCommandToken = (commandId, suggest, success, error) => {
+    regenCommandToken = (commandId, success, error) => {
         request.
             post(`${this.getCommandsRoute()}/regen_token`).
             set(this.defaultHeaders).

webapp/components/backstage/installed_commands.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import IntegrationStore from 'stores/integration_store.jsx';
+import TeamStore from 'stores/team_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -20,16 +21,18 @@ export default class InstalledCommands extends React.Component {
         this.regenCommandToken = this.regenCommandToken.bind(this);
         this.deleteCommand = this.deleteCommand.bind(this);
 
+        const teamId = TeamStore.getCurrentId();
+
         this.state = {
-            commands: IntegrationStore.getCommands(),
-            loading: !IntegrationStore.hasReceivedCommands()
+            commands: IntegrationStore.getCommands(teamId),
+            loading: !IntegrationStore.hasReceivedCommands(teamId)
         };
     }
 
     componentDidMount() {
         IntegrationStore.addChangeListener(this.handleIntegrationChange);
 
-        if (window.mm_config.EnableCommands === 'true' && this.state.loading) {
+        if (window.mm_config.EnableCommands === 'true') {
             AsyncClient.listTeamCommands();
         }
     }
@@ -39,9 +42,11 @@ export default class InstalledCommands extends React.Component {
     }
 
     handleIntegrationChange() {
+        const teamId = TeamStore.getCurrentId();
+
         this.setState({
-            commands: IntegrationStore.getCommands(),
-            loading: !IntegrationStore.hasReceivedCommands()
+            commands: IntegrationStore.getCommands(teamId),
+            loading: !IntegrationStore.hasReceivedCommands(teamId)
         });
     }
 

webapp/components/backstage/installed_incoming_webhooks.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import IntegrationStore from 'stores/integration_store.jsx';
+import TeamStore from 'stores/team_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -19,16 +20,18 @@ export default class InstalledIncomingWebhooks extends React.Component {
 
         this.deleteIncomingWebhook = this.deleteIncomingWebhook.bind(this);
 
+        const teamId = TeamStore.getCurrentId();
+
         this.state = {
-            incomingWebhooks: IntegrationStore.getIncomingWebhooks(),
-            loading: !IntegrationStore.hasReceivedIncomingWebhooks()
+            incomingWebhooks: IntegrationStore.getIncomingWebhooks(teamId),
+            loading: !IntegrationStore.hasReceivedIncomingWebhooks(teamId)
         };
     }
 
     componentDidMount() {
         IntegrationStore.addChangeListener(this.handleIntegrationChange);
 
-        if (window.mm_config.EnableIncomingWebhooks === 'true' && this.state.loading) {
+        if (window.mm_config.EnableIncomingWebhooks === 'true') {
             AsyncClient.listIncomingHooks();
         }
     }
@@ -38,9 +41,11 @@ export default class InstalledIncomingWebhooks extends React.Component {
     }
 
     handleIntegrationChange() {
+        const teamId = TeamStore.getCurrentId();
+
         this.setState({
-            incomingWebhooks: IntegrationStore.getIncomingWebhooks(),
-            loading: !IntegrationStore.hasReceivedIncomingWebhooks()
+            incomingWebhooks: IntegrationStore.getIncomingWebhooks(teamId),
+            loading: !IntegrationStore.hasReceivedIncomingWebhooks(teamId)
         });
     }
 

webapp/components/backstage/installed_outgoing_webhooks.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import IntegrationStore from 'stores/integration_store.jsx';
+import TeamStore from 'stores/team_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -20,16 +21,18 @@ export default class InstalledOutgoingWebhooks extends React.Component {
         this.regenOutgoingWebhookToken = this.regenOutgoingWebhookToken.bind(this);
         this.deleteOutgoingWebhook = this.deleteOutgoingWebhook.bind(this);
 
+        const teamId = TeamStore.getCurrentId();
+
         this.state = {
-            outgoingWebhooks: IntegrationStore.getOutgoingWebhooks(),
-            loading: !IntegrationStore.hasReceivedOutgoingWebhooks()
+            outgoingWebhooks: IntegrationStore.getOutgoingWebhooks(teamId),
+            loading: !IntegrationStore.hasReceivedOutgoingWebhooks(teamId)
         };
     }
 
     componentDidMount() {
         IntegrationStore.addChangeListener(this.handleIntegrationChange);
 
-        if (window.mm_config.EnableOutgoingWebhooks === 'true' && this.state.loading) {
+        if (window.mm_config.EnableOutgoingWebhooks === 'true') {
             AsyncClient.listOutgoingHooks();
         }
     }
@@ -39,9 +42,11 @@ export default class InstalledOutgoingWebhooks extends React.Component {
     }
 
     handleIntegrationChange() {
+        const teamId = TeamStore.getCurrentId();
+
         this.setState({
-            outgoingWebhooks: IntegrationStore.getOutgoingWebhooks(),
-            loading: !IntegrationStore.hasReceivedOutgoingWebhooks()
+            outgoingWebhooks: IntegrationStore.getOutgoingWebhooks(teamId),
+            loading: !IntegrationStore.hasReceivedOutgoingWebhooks(teamId)
         });
     }
 

webapp/stores/integration_store.jsx

@@ -15,14 +15,11 @@ class IntegrationStore extends EventEmitter {
 
         this.dispatchToken = AppDispatcher.register(this.handleEventPayload.bind(this));
 
-        this.incomingWebhooks = [];
-        this.receivedIncomingWebhooks = false;
+        this.incomingWebhooks = new Map();
 
-        this.outgoingWebhooks = [];
-        this.receivedOutgoingWebhooks = false;
+        this.outgoingWebhooks = new Map();
 
-        this.commands = [];
-        this.receivedCommands = false;
+        this.commands = new Map();
     }
 
     addChangeListener(callback) {
@@ -37,100 +34,119 @@ class IntegrationStore extends EventEmitter {
         this.emit(CHANGE_EVENT);
     }
 
-    hasReceivedIncomingWebhooks() {
-        return this.receivedIncomingWebhooks;
+    hasReceivedIncomingWebhooks(teamId) {
+        return this.incomingWebhooks.has(teamId);
     }
 
-    getIncomingWebhooks() {
-        return this.incomingWebhooks;
+    getIncomingWebhooks(teamId) {
+        return this.incomingWebhooks.get(teamId) || [];
     }
 
-    setIncomingWebhooks(incomingWebhooks) {
-        this.incomingWebhooks = incomingWebhooks;
-        this.receivedIncomingWebhooks = true;
+    setIncomingWebhooks(teamId, incomingWebhooks) {
+        this.incomingWebhooks.set(teamId, incomingWebhooks);
     }
 
     addIncomingWebhook(incomingWebhook) {
-        this.incomingWebhooks.push(incomingWebhook);
+        const teamId = incomingWebhook.team_id;
+        const incomingWebhooks = this.getIncomingWebhooks(teamId);
+
+        incomingWebhooks.push(incomingWebhook);
+
+        this.setIncomingWebhooks(teamId, incomingWebhooks);
     }
 
-    removeIncomingWebhook(id) {
-        for (let i = 0; i < this.incomingWebhooks.length; i++) {
-            if (this.incomingWebhooks[i].id === id) {
-                this.incomingWebhooks.splice(i, 1);
-                break;
-            }
-        }
+    removeIncomingWebhook(teamId, id) {
+        let incomingWebhooks = this.getIncomingWebhooks(teamId);
+
+        incomingWebhooks = incomingWebhooks.filter((incomingWebhook) => incomingWebhook.id !== id);
+
+        this.setIncomingWebhooks(teamId, incomingWebhooks);
     }
 
-    hasReceivedOutgoingWebhooks() {
-        return this.receivedOutgoingWebhooks;
+    hasReceivedOutgoingWebhooks(teamId) {
+        return this.outgoingWebhooks.has(teamId);
     }
 
-    getOutgoingWebhooks() {
-        return this.outgoingWebhooks;
+    getOutgoingWebhooks(teamId) {
+        return this.outgoingWebhooks.get(teamId) || [];
     }
 
-    setOutgoingWebhooks(outgoingWebhooks) {
-        this.outgoingWebhooks = outgoingWebhooks;
-        this.receivedOutgoingWebhooks = true;
+    setOutgoingWebhooks(teamId, outgoingWebhooks) {
+        this.outgoingWebhooks.set(teamId, outgoingWebhooks);
     }
 
     addOutgoingWebhook(outgoingWebhook) {
-        this.outgoingWebhooks.push(outgoingWebhook);
+        const teamId = outgoingWebhook.team_id;
+        const outgoingWebhooks = this.getOutgoingWebhooks(teamId);
+
+        outgoingWebhooks.push(outgoingWebhook);
+
+        this.setOutgoingWebhooks(teamId, outgoingWebhooks);
     }
 
     updateOutgoingWebhook(outgoingWebhook) {
-        for (let i = 0; i < this.outgoingWebhooks.length; i++) {
-            if (this.outgoingWebhooks[i].id === outgoingWebhook.id) {
-                this.outgoingWebhooks[i] = outgoingWebhook;
+        const teamId = outgoingWebhook.team_id;
+        const outgoingWebhooks = this.getOutgoingWebhooks(teamId);
+
+        for (let i = 0; i < outgoingWebhooks.length; i++) {
+            if (outgoingWebhooks[i].id === outgoingWebhook.id) {
+                outgoingWebhooks[i] = outgoingWebhook;
                 break;
             }
         }
+
+        this.setOutgoingWebhooks(teamId, outgoingWebhooks);
     }
 
-    removeOutgoingWebhook(id) {
-        for (let i = 0; i < this.outgoingWebhooks.length; i++) {
-            if (this.outgoingWebhooks[i].id === id) {
-                this.outgoingWebhooks.splice(i, 1);
-                break;
-            }
-        }
+    removeOutgoingWebhook(teamId, id) {
+        let outgoingWebhooks = this.getOutgoingWebhooks(teamId);
+
+        outgoingWebhooks = outgoingWebhooks.filter((outgoingWebhook) => outgoingWebhook.id !== id);
+
+        this.setOutgoingWebhooks(teamId, outgoingWebhooks);
     }
 
-    hasReceivedCommands() {
-        return this.receivedCommands;
+    hasReceivedCommands(teamId) {
+        return this.commands.has(teamId);
     }
 
-    getCommands() {
-        return this.commands;
+    getCommands(teamId) {
+        return this.commands.get(teamId) || [];
     }
 
-    setCommands(commands) {
-        this.commands = commands;
-        this.receivedCommands = true;
+    setCommands(teamId, commands) {
+        this.commands.set(teamId, commands);
     }
 
     addCommand(command) {
-        this.commands.push(command);
+        const teamId = command.team_id;
+        const commands = this.getCommands(teamId);
+
+        commands.push(command);
+
+        this.setCommands(teamId, commands);
     }
 
     updateCommand(command) {
-        for (let i = 0; i < this.commands.length; i++) {
-            if (this.commands[i].id === command.id) {
-                this.commands[i] = command;
+        const teamId = command.team_id;
+        const commands = this.getCommands(teamId);
+
+        for (let i = 0; i < commands.length; i++) {
+            if (commands[i].id === command.id) {
+                commands[i] = command;
                 break;
             }
         }
+
+        this.setCommands(teamId, commands);
     }
 
-    removeCommand(id) {
-        for (let i = 0; i < this.commands.length; i++) {
-            if (this.commands[i].id === id) {
-                this.commands.splice(i, 1);
-                break;
-            }
-        }
+    removeCommand(teamId, id) {
+        let commands = this.getCommands(teamId);
+
+        commands = commands.filter((command) => command.id !== id);
+
+        this.setCommands(teamId, commands);
     }
 
     handleEventPayload(payload) {
@@ -138,7 +154,7 @@ class IntegrationStore extends EventEmitter {
 
         switch (action.type) {
         case ActionTypes.RECEIVED_INCOMING_WEBHOOKS:
-            this.setIncomingWebhooks(action.incomingWebhooks);
+            this.setIncomingWebhooks(action.teamId, action.incomingWebhooks);
             this.emitChange();
             break;
         case ActionTypes.RECEIVED_INCOMING_WEBHOOK:
@@ -146,11 +162,11 @@ class IntegrationStore extends EventEmitter {
             this.emitChange();
             break;
         case ActionTypes.REMOVED_INCOMING_WEBHOOK:
-            this.removeIncomingWebhook(action.id);
+            this.removeIncomingWebhook(action.teamId, action.id);
             this.emitChange();
             break;
         case ActionTypes.RECEIVED_OUTGOING_WEBHOOKS:
-            this.setOutgoingWebhooks(action.outgoingWebhooks);
+            this.setOutgoingWebhooks(action.teamId, action.outgoingWebhooks);
             this.emitChange();
             break;
         case ActionTypes.RECEIVED_OUTGOING_WEBHOOK:
@@ -162,11 +178,11 @@ class IntegrationStore extends EventEmitter {
             this.emitChange();
             break;
         case ActionTypes.REMOVED_OUTGOING_WEBHOOK:
-            this.removeOutgoingWebhook(action.id);
+            this.removeOutgoingWebhook(action.teamId, action.id);
             this.emitChange();
             break;
         case ActionTypes.RECEIVED_COMMANDS:
-            this.setCommands(action.commands);
+            this.setCommands(action.teamId, action.commands);
             this.emitChange();
             break;
         case ActionTypes.RECEIVED_COMMAND:
@@ -178,7 +194,7 @@ class IntegrationStore extends EventEmitter {
             this.emitChange();
             break;
         case ActionTypes.REMOVED_COMMAND:
-            this.removeCommand(action.id);
+            this.removeCommand(action.teamId, action.id);
             this.emitChange();
             break;
         }

webapp/utils/async_client.jsx

@@ -1145,6 +1145,7 @@ export function listIncomingHooks() {
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_INCOMING_WEBHOOKS,
+                teamId: Client.teamId,
                 incomingWebhooks: data
             });
         },
@@ -1168,6 +1169,7 @@ export function listOutgoingHooks() {
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_OUTGOING_WEBHOOKS,
+                teamId: Client.teamId,
                 outgoingWebhooks: data
             });
         },
@@ -1230,6 +1232,7 @@ export function deleteIncomingHook(id) {
         () => {
             AppDispatcher.handleServerAction({
                 type: ActionTypes.REMOVED_INCOMING_WEBHOOK,
+                teamId: Client.teamId,
                 id
             });
         },
@@ -1245,6 +1248,7 @@ export function deleteOutgoingHook(id) {
         () => {
             AppDispatcher.handleServerAction({
                 type: ActionTypes.REMOVED_OUTGOING_WEBHOOK,
+                teamId: Client.teamId,
                 id
             });
         },
@@ -1282,6 +1286,7 @@ export function listTeamCommands() {
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_COMMANDS,
+                teamId: Client.teamId,
                 commands: data
             });
         },
@@ -1321,6 +1326,7 @@ export function deleteCommand(id) {
         () => {
             AppDispatcher.handleServerAction({
                 type: ActionTypes.REMOVED_COMMAND,
+                teamId: Client.teamId,
                 id
             });
         },