1 files changed, 19 insertions, 7 deletions

diff --git a/webapp/components/integrations/components/installed_commands.jsx b/webapp/components/integrations/components/installed_commands.jsx
index f6429c33e..1c5ef9000 100644
--- a/webapp/components/integrations/components/installed_commands.jsx
+++ b/webapp/components/integrations/components/installed_commands.jsx
@@ -1,16 +1,20 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React from 'react';
+import BackstageList from 'components/backstage/components/backstage_list.jsx';
+import InstalledCommand from './installed_command.jsx';
 
-import * as AsyncClient from 'utils/async_client.jsx';
 import IntegrationStore from 'stores/integration_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+
+import {loadTeamCommands} from 'actions/integration_actions.jsx';
+
+import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 
-import BackstageList from 'components/backstage/components/backstage_list.jsx';
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
-import InstalledCommand from './installed_command.jsx';
 
 export default class InstalledCommands extends React.Component {
     static get propTypes() {
@@ -23,7 +27,7 @@ export default class InstalledCommands extends React.Component {
         super(props);
 
         this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
-
+        this.handleUserChange = this.handleUserChange.bind(this);
         this.regenCommandToken = this.regenCommandToken.bind(this);
         this.deleteCommand = this.deleteCommand.bind(this);
 
@@ -31,20 +35,23 @@ export default class InstalledCommands extends React.Component {
 
         this.state = {
             commands: IntegrationStore.getCommands(teamId),
-            loading: !IntegrationStore.hasReceivedCommands(teamId)
+            loading: !IntegrationStore.hasReceivedCommands(teamId),
+            users: UserStore.getProfiles()
         };
     }
 
     componentDidMount() {
         IntegrationStore.addChangeListener(this.handleIntegrationChange);
+        UserStore.addChangeListener(this.handleUserChange);
 
         if (window.mm_config.EnableCommands === 'true') {
-            AsyncClient.listTeamCommands();
+            loadTeamCommands();
         }
     }
 
     componentWillUnmount() {
         IntegrationStore.removeChangeListener(this.handleIntegrationChange);
+        UserStore.removeChangeListener(this.handleUserChange);
     }
 
     handleIntegrationChange() {
@@ -56,6 +63,10 @@ export default class InstalledCommands extends React.Component {
         });
     }
 
+    handleUserChange() {
+        this.setState({users: UserStore.getProfiles()});
+    }
+
     regenCommandToken(command) {
         AsyncClient.regenCommandToken(command.id);
     }
@@ -72,6 +83,7 @@ export default class InstalledCommands extends React.Component {
                     command={command}
                     onRegenToken={this.regenCommandToken}
                     onDelete={this.deleteCommand}
+                    creator={this.state.users[command.creator_id] || {}}
                 />
             );
         });