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

webapp/components/backstage/backstage_controller.jsx

@@ -13,8 +13,8 @@ import ErrorBar from 'components/error_bar.jsx';
 export default class BackstageController extends React.Component {
     static get propTypes() {
         return {
-            children: React.PropTypes.node.isRequired,
+            user: React.PropTypes.object,
-            params: React.PropTypes.object.isRequired
+            children: React.PropTypes.node.isRequired
         };
     }
 
@@ -23,9 +23,12 @@ export default class BackstageController extends React.Component {
 
         this.onTeamChange = this.onTeamChange.bind(this);
 
+        const team = TeamStore.getCurrent();
+
         this.state = {
-            user: UserStore.getCurrentUser(),
+            team,
-            team: props.params.team ? TeamStore.getByName(props.params.team) : TeamStore.getCurrent()
+            isAdmin: UserStore.isSystemAdminForCurrentUser(this.props.user) ||
+                TeamStore.isTeamAdminForCurrentTeam(team)
         };
     }
 
@@ -38,8 +41,12 @@ export default class BackstageController extends React.Component {
     }
 
     onTeamChange() {
+        const team = TeamStore.getCurrent();
+
         this.state = {
-            team: this.props.params.team ? TeamStore.getByName(this.props.params.team) : TeamStore.getCurrent()
+            team,
+            isAdmin: UserStore.isSystemAdminForCurrentUser(this.props.user) ||
+                TeamStore.isTeamAdminForCurrentTeam(team)
         };
     }
 
@@ -51,7 +58,7 @@ export default class BackstageController extends React.Component {
                 <div className='backstage-body'>
                     <BackstageSidebar
                         team={this.state.team}
-                        user={this.state.user}
+                        user={this.props.user}
                     />
                     {
                         React.Children.map(this.props.children, (child) => {
@@ -61,7 +68,8 @@ export default class BackstageController extends React.Component {
 
                             return React.cloneElement(child, {
                                 team: this.state.team,
-                                user: this.state.user
+                                user: this.props.user,
+                                isAdmin: this.state.isAdmin
                             });
                         })
                     }

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>
         );

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'>
+                {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>
             </div>
         );
     }

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}
                 />
             );
         });

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'>
+                {actions}
-                    <a
-                        href='#'
-                        onClick={this.handleDelete}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.delete'
-                            defaultMessage='Delete'
-                        />
-                    </a>
-                </div>
             </div>
         );
     }

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}
                 />
             );
         });

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'>
+                {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>
             </div>
         );
     }

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}
                 />
             );
         });