PLT-4929: Confirmation Dialog when Deleting Entry on the Integrations pages (#5529)

webapp/components/integrations/components/delete_integration.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import ConfirmModal from '../../confirm_modal.jsx';
+
+export default class DeleteIntegration extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleConfirm = this.handleConfirm.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+        this.handleOpenModal = this.handleOpenModal.bind(this);
+
+        this.state = {
+            showDeleteModal: false
+        };
+    }
+
+    handleOpenModal(e) {
+        e.preventDefault();
+
+        this.setState({
+            showDeleteModal: true
+        });
+    }
+
+    handleConfirm() {
+        this.props.onDelete();
+    }
+
+    handleCancel() {
+        this.setState({
+            showDeleteModal: false
+        });
+    }
+
+    render() {
+        const title = (
+            <FormattedMessage
+                id='integrations.delete.confirm.title'
+                defaultMessage='Delete Integration'
+            />
+        );
+
+        const message = (
+            <div className='alert alert-warning'>
+                <i className='fa fa-warning'/>
+                <FormattedMessage
+                    id={this.props.messageId}
+                    defaultMessage='This action permanently deletes the integration and breaks any integrations using it. Are you sure you want to delete it?'
+                />
+            </div>
+        );
+
+        const confirmButton = (
+            <FormattedMessage
+                id='integrations.delete.confirm.button'
+                defaultMessage='Delete'
+            />
+        );
+
+        return (
+            <span>
+                <a
+                    href='#'
+                    onClick={this.handleOpenModal}
+                >
+                    <FormattedMessage
+                        id='installed_integrations.delete'
+                        defaultMessage='Delete'
+                    />
+                </a>
+                <ConfirmModal
+                    show={this.state.showDeleteModal}
+                    title={title}
+                    message={message}
+                    confirmButton={confirmButton}
+                    onConfirm={this.handleConfirm}
+                    onCancel={this.handleCancel}
+                />
+            </span>
+        );
+    }
+}
+
+DeleteIntegration.propTypes = {
+    messageId: React.PropTypes.string.isRequired,
+    onDelete: React.PropTypes.func.isRequired
+};

webapp/components/integrations/components/installed_command.jsx

@@ -5,6 +5,8 @@ import React from 'react';
 import {Link} from 'react-router';
 import {FormattedMessage} from 'react-intl';
 
+import DeleteIntegration from './delete_integration.jsx';
+
 export default class InstalledCommand extends React.Component {
     static get propTypes() {
         return {
@@ -33,9 +35,7 @@ export default class InstalledCommand extends React.Component {
         this.props.onRegenToken(this.props.command);
     }
 
-    handleDelete(e) {
+    handleDelete() {
-        e.preventDefault();
-
         this.props.onDelete(this.props.command);
     }
 
@@ -106,15 +106,10 @@ export default class InstalledCommand extends React.Component {
                         />
                     </Link>
                     {' - '}
-                    <a
+                    <DeleteIntegration
-                        href='#'
+                        messageId='installed_commands.delete.confirm'
-                        onClick={this.handleDelete}
+                        onDelete={this.handleDelete}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.delete'
-                            defaultMessage='Delete'
                     />
-                    </a>
                 </div>
             );
         }

webapp/components/integrations/components/installed_incoming_webhook.jsx

@@ -3,6 +3,8 @@
 
 import React from 'react';
 
+import DeleteIntegration from './delete_integration.jsx';
+
 import ChannelStore from 'stores/channel_store.jsx';
 import {getSiteURL} from 'utils/url.jsx';
 
@@ -27,9 +29,7 @@ export default class InstalledIncomingWebhook extends React.Component {
         this.handleDelete = this.handleDelete.bind(this);
     }
 
-    handleDelete(e) {
+    handleDelete() {
-        e.preventDefault();
-
         this.props.onDelete(this.props.incomingWebhook);
     }
 
@@ -97,15 +97,10 @@ export default class InstalledIncomingWebhook extends React.Component {
                         />
                     </Link>
                     {' - '}
-                    <a
+                    <DeleteIntegration
-                        href='#'
+                        messageId='installed_incoming_webhooks.delete.confirm'
-                        onClick={this.handleDelete}
+                        onDelete={this.handleDelete}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.delete'
-                            defaultMessage='Delete'
                     />
-                    </a>
                 </div>
             );
         }

webapp/components/integrations/components/installed_oauth_app.jsx

@@ -10,6 +10,8 @@ import * as Utils from 'utils/utils.jsx';
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 import {regenerateOAuthAppSecret} from 'actions/admin_actions.jsx';
 
+import DeleteIntegration from './delete_integration.jsx';
+
 const FAKE_SECRET = '***************';
 
 export default class InstalledOAuthApp extends React.Component {
@@ -61,9 +63,7 @@ export default class InstalledOAuthApp extends React.Component {
         );
     }
 
-    handleDelete(e) {
+    handleDelete() {
-        e.preventDefault();
-
         this.props.onDelete(this.props.oauthApp);
     }
 
@@ -246,15 +246,10 @@ export default class InstalledOAuthApp extends React.Component {
                     {' - '}
                     {regen}
                     {' - '}
-                    <a
+                    <DeleteIntegration
-                        href='#'
+                        messageId='installed_oauth_apps.delete.confirm'
-                        onClick={this.handleDelete}
+                        onDelete={this.handleDelete}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.delete'
-                            defaultMessage='Delete'
                     />
-                    </a>
                 </div>
             </div>
         );

webapp/components/integrations/components/installed_outgoing_webhook.jsx

@@ -8,6 +8,8 @@ import ChannelStore from 'stores/channel_store.jsx';
 import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router';
 
+import DeleteIntegration from './delete_integration.jsx';
+
 export default class InstalledOutgoingWebhook extends React.Component {
     static get propTypes() {
         return {
@@ -34,9 +36,7 @@ export default class InstalledOutgoingWebhook extends React.Component {
         this.props.onRegenToken(this.props.outgoingWebhook);
     }
 
-    handleDelete(e) {
+    handleDelete() {
-        e.preventDefault();
-
         this.props.onDelete(this.props.outgoingWebhook);
     }
 
@@ -170,15 +170,10 @@ export default class InstalledOutgoingWebhook extends React.Component {
                         />
                     </Link>
                     {' - '}
-                    <a
+                    <DeleteIntegration
-                        href='#'
+                        messageId='installed_outgoing_webhooks.delete.confirm'
-                        onClick={this.handleDelete}
+                        onDelete={this.handleDelete}
-                    >
-                        <FormattedMessage
-                            id='installed_integrations.delete'
-                            defaultMessage='Delete'
                     />
-                    </a>
                 </div>
             );
         }

webapp/i18n/en.json

@@ -1448,6 +1448,7 @@
   "help.messaging.write": "**Write messages** using the text input box at the bottom of Mattermost. Press ENTER to send a message. Use SHIFT+ENTER to create a new line without sending a message.",
   "installed_command.header": "Slash Commands",
   "installed_commands.add": "Add Slash Command",
+  "installed_commands.delete.confirm": "This action permanently deletes the slash command and breaks any integrations using it. Are you sure you want to delete it?",
   "installed_commands.empty": "No commands found",
   "installed_commands.header": "Slash Commands",
   "installed_commands.help": "Create slash commands for use in external integrations. Please see the {link} to learn more.",
@@ -1455,6 +1456,7 @@
   "installed_commands.search": "Search Slash Commands",
   "installed_commands.unnamed_command": "Unnamed Slash Command",
   "installed_incoming_webhooks.add": "Add Incoming Webhook",
+  "installed_incoming_webhooks.delete.confirm": "This action permanently deletes the incoming webhook and breaks any integrations using it. Are you sure you want to delete it?",
   "installed_incoming_webhooks.empty": "No incoming webhooks found",
   "installed_incoming_webhooks.header": "Incoming Webhooks",
   "installed_incoming_webhooks.help": "Create incoming webhook URLs for use in external integrations. Please see the {link} to learn more.",
@@ -1481,6 +1483,7 @@
   "installed_oauth_apps.callbackUrls": "Callback URLs (One Per Line)",
   "installed_oauth_apps.cancel": "Cancel",
   "installed_oauth_apps.description": "Description",
+  "installed_oauth_apps.delete.confirm": "This action permanently deletes the OAuth 2.0 application and breaks any integrations using it. Are you sure you want to delete it?",
   "installed_oauth_apps.empty": "No OAuth 2.0 Applications found",
   "installed_oauth_apps.header": "OAuth 2.0 Applications",
   "installed_oauth_apps.help": "Create OAuth 2.0 applications to securely integrate bots and third-party applications with Mattermost. Please see {link} to learn more.",
@@ -1495,6 +1498,7 @@
   "installed_oauth_apps.trusted.no": "No",
   "installed_oauth_apps.trusted.yes": "Yes",
   "installed_outgoing_webhooks.add": "Add Outgoing Webhook",
+  "installed_outgoing_webhooks.delete.confirm": "This action permanently deletes the outgoing webhook and breaks any integrations using it. Are you sure you want to delete it?",
   "installed_outgoing_webhooks.empty": "No outgoing webhooks found",
   "installed_outgoing_webhooks.header": "Outgoing Webhooks",
   "installed_outgoing_webhooks.help": "Create outgoing webhook URLs for use in external integrations. Please see the {link} to learn more.",
@@ -1504,6 +1508,8 @@
   "integrations.add": "Add",
   "integrations.command.description": "Slash commands send events to external integrations",
   "integrations.command.title": "Slash Command",
+  "integrations.delete.confirm.button": "Delete",
+  "integrations.delete.confirm.title": "Delete Integration",
   "integrations.done": "Done",
   "integrations.edit": "Edit",
   "integrations.header": "Integrations",