Only show edit/delete buttons for integrations if the user should have permissions to them (#4719)

7 files changed, 111 insertions, 70 deletions

diff --git a/webapp/components/integrations/components/commands_container.jsx b/webapp/components/integrations/components/commands_container.jsx
index 4ab465218..095dc4fea 100644
--- a/webapp/components/integrations/components/commands_container.jsx
+++ b/webapp/components/integrations/components/commands_container.jsx
@@ -12,7 +12,9 @@ export default class CommandsContainer extends React.Component {
     static get propTypes() {
         return {
             team: React.PropTypes.object,
-            children: React.PropTypes.node
+            user: React.PropTypes.object,
+            children: React.PropTypes.node.isRequired,
+            isAdmin: React.PropTypes.bool
         };
     }
 
@@ -65,7 +67,9 @@ export default class CommandsContainer extends React.Component {
                     commands: this.state.commands,
                     users: this.state.users,
                     loading: this.state.loading,
-                    team: this.props.team
+                    team: this.props.team,
+                    user: this.props.user,
+                    isAdmin: this.props.isAdmin
                 })}
             </div>
         );
diff --git a/webapp/components/integrations/components/installed_command.jsx b/webapp/components/integrations/components/installed_command.jsx
index 96ccaf3e3..2e45739a0 100644
--- a/webapp/components/integrations/components/installed_command.jsx
+++ b/webapp/components/integrations/components/installed_command.jsx
@@ -13,7 +13,8 @@ export default class InstalledCommand extends React.Component {
             onRegenToken: React.PropTypes.func.isRequired,
             onDelete: React.PropTypes.func.isRequired,
             filter: React.PropTypes.string,
-            creator: React.PropTypes.object.isRequired
+            creator: React.PropTypes.object.isRequired,
+            canChange: React.PropTypes.bool.isRequired
         };
     }
 
@@ -84,6 +85,40 @@ export default class InstalledCommand extends React.Component {
             trigger += ' ' + command.auto_complete_hint;
         }
 
+        let actions = null;
+        if (this.props.canChange) {
+            actions = (
+                <div className='item-actions'>
+                    <a
+                        href='#'
+                        onClick={this.handleRegenToken}
+                    >
+                        <FormattedMessage
+                            id='installed_integrations.regenToken'
+                            defaultMessage='Regenerate Token'
+                        />
+                    </a>
+                    {' - '}
+                    <Link to={`/${this.props.team.name}/integrations/commands/edit?id=${command.id}`}>
+                        <FormattedMessage
+                            id='installed_integrations.edit'
+                            defaultMessage='Edit'
+                        />
+                    </Link>
+                    {' - '}
+                    <a
+                        href='#'
+                        onClick={this.handleDelete}
+                    >
+                        <FormattedMessage
+                            id='installed_integrations.delete'
+                            defaultMessage='Delete'
+                        />
+                    </a>
+                </div>
+            );
+        }
+
         return (
             <div className='backstage-list__item'>
                 <div className='item-details'>
@@ -120,36 +155,7 @@ export default class InstalledCommand extends React.Component {
                         </span>
                     </div>
                 </div>
-                <div className='item-actions'>
-                    <a
-                        href='#'
-                        onClick={this.handleRegenToken}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.regenToken'
-                            defaultMessage='Regenerate Token'
-                        />
-                    </a>
-                    {' - '}
-                    <Link
-                        to={`/${this.props.team.name}/integrations/commands/edit?id=${command.id}`}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.edit'
-                            defaultMessage='Edit'
-                        />
-                    </Link>
-                    {' - '}
-                    <a
-                        href='#'
-                        onClick={this.handleDelete}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.delete'
-                            defaultMessage='Delete'
-                        />
-                    </a>
-                </div>
+                {actions}
             </div>
         );
     }
diff --git a/webapp/components/integrations/components/installed_commands.jsx b/webapp/components/integrations/components/installed_commands.jsx
index e080cd706..1854e6eb1 100644
--- a/webapp/components/integrations/components/installed_commands.jsx
+++ b/webapp/components/integrations/components/installed_commands.jsx
@@ -14,9 +14,11 @@ export default class InstalledCommands extends React.Component {
     static get propTypes() {
         return {
             team: React.PropTypes.object,
+            user: React.PropTypes.object,
             users: React.PropTypes.object,
             commands: React.PropTypes.array,
-            loading: React.PropTypes.bool
+            loading: React.PropTypes.bool,
+            isAdmin: React.PropTypes.bool
         };
     }
 
@@ -37,6 +39,8 @@ export default class InstalledCommands extends React.Component {
 
     render() {
         const commands = this.props.commands.map((command) => {
+            const canChange = this.props.isAdmin || this.props.user.id === command.creator_id;
+
             return (
                 <InstalledCommand
                     key={command.id}
@@ -45,6 +49,7 @@ export default class InstalledCommands extends React.Component {
                     onRegenToken={this.regenCommandToken}
                     onDelete={this.deleteCommand}
                     creator={this.props.users[command.creator_id] || {}}
+                    canChange={canChange}
                 />
             );
         });
diff --git a/webapp/components/integrations/components/installed_incoming_webhook.jsx b/webapp/components/integrations/components/installed_incoming_webhook.jsx
index 86274c3d6..10328c605 100644
--- a/webapp/components/integrations/components/installed_incoming_webhook.jsx
+++ b/webapp/components/integrations/components/installed_incoming_webhook.jsx
@@ -14,7 +14,8 @@ export default class InstalledIncomingWebhook extends React.Component {
             incomingWebhook: React.PropTypes.object.isRequired,
             onDelete: React.PropTypes.func.isRequired,
             filter: React.PropTypes.string,
-            creator: React.PropTypes.object.isRequired
+            creator: React.PropTypes.object.isRequired,
+            canChange: React.PropTypes.bool.isRequired
         };
     }
 
@@ -83,6 +84,23 @@ export default class InstalledIncomingWebhook extends React.Component {
             );
         }
 
+        let actions = null;
+        if (this.props.canChange) {
+            actions = (
+                <div className='item-actions'>
+                    <a
+                        href='#'
+                        onClick={this.handleDelete}
+                    >
+                        <FormattedMessage
+                            id='installed_integrations.delete'
+                            defaultMessage='Delete'
+                        />
+                    </a>
+                </div>
+            );
+        }
+
         return (
             <div className='backstage-list__item'>
                 <div className='item-details'>
@@ -116,17 +134,7 @@ export default class InstalledIncomingWebhook extends React.Component {
                         </span>
                     </div>
                 </div>
-                <div className='item-actions'>
-                    <a
-                        href='#'
-                        onClick={this.handleDelete}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.delete'
-                            defaultMessage='Delete'
-                        />
-                    </a>
-                </div>
+                {actions}
             </div>
         );
     }
diff --git a/webapp/components/integrations/components/installed_incoming_webhooks.jsx b/webapp/components/integrations/components/installed_incoming_webhooks.jsx
index ed98f1053..5b0bc185a 100644
--- a/webapp/components/integrations/components/installed_incoming_webhooks.jsx
+++ b/webapp/components/integrations/components/installed_incoming_webhooks.jsx
@@ -19,7 +19,9 @@ import {FormattedMessage} from 'react-intl';
 export default class InstalledIncomingWebhooks extends React.Component {
     static get propTypes() {
         return {
-            team: React.PropTypes.object
+            team: React.PropTypes.object,
+            user: React.PropTypes.object,
+            isAdmin: React.PropTypes.bool
         };
     }
 
@@ -74,12 +76,15 @@ export default class InstalledIncomingWebhooks extends React.Component {
 
     render() {
         const incomingWebhooks = this.state.incomingWebhooks.map((incomingWebhook) => {
+            const canChange = this.props.isAdmin || this.props.user.id === incomingWebhook.user_id;
+
             return (
                 <InstalledIncomingWebhook
                     key={incomingWebhook.id}
                     incomingWebhook={incomingWebhook}
                     onDelete={this.deleteIncomingWebhook}
                     creator={this.state.users[incomingWebhook.user_id] || {}}
+                    canChange={canChange}
                 />
             );
         });
diff --git a/webapp/components/integrations/components/installed_outgoing_webhook.jsx b/webapp/components/integrations/components/installed_outgoing_webhook.jsx
index 3ff2c01a4..04cc1b033 100644
--- a/webapp/components/integrations/components/installed_outgoing_webhook.jsx
+++ b/webapp/components/integrations/components/installed_outgoing_webhook.jsx
@@ -14,7 +14,8 @@ export default class InstalledOutgoingWebhook extends React.Component {
             onRegenToken: React.PropTypes.func.isRequired,
             onDelete: React.PropTypes.func.isRequired,
             filter: React.PropTypes.string,
-            creator: React.PropTypes.object.isRequired
+            creator: React.PropTypes.object.isRequired,
+            canChange: React.PropTypes.bool.isRequired
         };
     }
 
@@ -146,6 +147,33 @@ export default class InstalledOutgoingWebhook extends React.Component {
             );
         }
 
+        let actions = null;
+        if (this.props.canChange) {
+            actions = (
+                <div className='item-actions'>
+                    <a
+                        href='#'
+                        onClick={this.handleRegenToken}
+                    >
+                        <FormattedMessage
+                            id='installed_integrations.regenToken'
+                            defaultMessage='Regen Token'
+                        />
+                    </a>
+                    {' - '}
+                    <a
+                        href='#'
+                        onClick={this.handleDelete}
+                    >
+                        <FormattedMessage
+                            id='installed_integrations.delete'
+                            defaultMessage='Delete'
+                        />
+                    </a>
+                </div>
+            );
+        }
+
         return (
             <div className='backstage-list__item'>
                 <div className='item-details'>
@@ -203,27 +231,7 @@ export default class InstalledOutgoingWebhook extends React.Component {
                     </div>
                     {urls}
                 </div>
-                <div className='item-actions'>
-                    <a
-                        href='#'
-                        onClick={this.handleRegenToken}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.regenToken'
-                            defaultMessage='Regen Token'
-                        />
-                    </a>
-                    {' - '}
-                    <a
-                        href='#'
-                        onClick={this.handleDelete}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.delete'
-                            defaultMessage='Delete'
-                        />
-                    </a>
-                </div>
+                {actions}
             </div>
         );
     }
diff --git a/webapp/components/integrations/components/installed_outgoing_webhooks.jsx b/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
index 4e9a0260f..7f278d112 100644
--- a/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
+++ b/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
@@ -19,7 +19,9 @@ import {FormattedMessage} from 'react-intl';
 export default class InstalledOutgoingWebhooks extends React.Component {
     static get propTypes() {
         return {
-            team: React.PropTypes.object
+            team: React.PropTypes.object,
+            user: React.PropTypes.object,
+            isAdmin: React.PropTypes.bool
         };
     }
 
@@ -77,6 +79,8 @@ export default class InstalledOutgoingWebhooks extends React.Component {
 
     render() {
         const outgoingWebhooks = this.state.outgoingWebhooks.map((outgoingWebhook) => {
+            const canChange = this.props.isAdmin || this.props.user.id === outgoingWebhook.creator_id;
+
             return (
                 <InstalledOutgoingWebhook
                     key={outgoingWebhook.id}
@@ -84,6 +88,7 @@ export default class InstalledOutgoingWebhooks extends React.Component {
                     onRegenToken={this.regenOutgoingWebhookToken}
                     onDelete={this.deleteOutgoingWebhook}
                     creator={this.state.users[outgoingWebhook.creator_id] || {}}
+                    canChange={canChange}
                 />
             );
         });