diff options
author | Ari Autio <ari.autio@iki.fi> | 2017-03-02 19:34:53 +0200 |
---|---|---|
committer | George Goldberg <george@gberg.me> | 2017-03-02 17:34:53 +0000 |
commit | d9a297d6291838e08a4acdbd603c35601c0e9878 (patch) | |
tree | df9079eae01adc6ec8834e3871fa2616d4873864 /webapp/components | |
parent | 4f8abfaeeebcbed03b5f377946d646d52943cc5e (diff) | |
download | chat-d9a297d6291838e08a4acdbd603c35601c0e9878.tar.gz chat-d9a297d6291838e08a4acdbd603c35601c0e9878.tar.bz2 chat-d9a297d6291838e08a4acdbd603c35601c0e9878.zip |
PLT-4929: Confirmation Dialog when Deleting Entry on the Integrations pages (#5529)
Diffstat (limited to 'webapp/components')
5 files changed, 117 insertions, 48 deletions
diff --git a/webapp/components/integrations/components/delete_integration.jsx b/webapp/components/integrations/components/delete_integration.jsx new file mode 100644 index 000000000..442ac57f7 --- /dev/null +++ b/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 +}; diff --git a/webapp/components/integrations/components/installed_command.jsx b/webapp/components/integrations/components/installed_command.jsx index 2e45739a0..f07d261b8 100644 --- a/webapp/components/integrations/components/installed_command.jsx +++ b/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) { - e.preventDefault(); - + handleDelete() { this.props.onDelete(this.props.command); } @@ -106,15 +106,10 @@ export default class InstalledCommand extends React.Component { /> </Link> {' - '} - <a - href='#' - onClick={this.handleDelete} - > - <FormattedMessage - id='installed_integrations.delete' - defaultMessage='Delete' - /> - </a> + <DeleteIntegration + messageId='installed_commands.delete.confirm' + onDelete={this.handleDelete} + /> </div> ); } diff --git a/webapp/components/integrations/components/installed_incoming_webhook.jsx b/webapp/components/integrations/components/installed_incoming_webhook.jsx index 52d0d7d67..7091f5eb8 100644 --- a/webapp/components/integrations/components/installed_incoming_webhook.jsx +++ b/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) { - e.preventDefault(); - + handleDelete() { this.props.onDelete(this.props.incomingWebhook); } @@ -97,15 +97,10 @@ export default class InstalledIncomingWebhook extends React.Component { /> </Link> {' - '} - <a - href='#' - onClick={this.handleDelete} - > - <FormattedMessage - id='installed_integrations.delete' - defaultMessage='Delete' - /> - </a> + <DeleteIntegration + messageId='installed_incoming_webhooks.delete.confirm' + onDelete={this.handleDelete} + /> </div> ); } diff --git a/webapp/components/integrations/components/installed_oauth_app.jsx b/webapp/components/integrations/components/installed_oauth_app.jsx index a6dea65bf..bb6e271d4 100644 --- a/webapp/components/integrations/components/installed_oauth_app.jsx +++ b/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) { - e.preventDefault(); - + handleDelete() { this.props.onDelete(this.props.oauthApp); } @@ -246,15 +246,10 @@ export default class InstalledOAuthApp extends React.Component { {' - '} {regen} {' - '} - <a - href='#' - onClick={this.handleDelete} - > - <FormattedMessage - id='installed_integrations.delete' - defaultMessage='Delete' - /> - </a> + <DeleteIntegration + messageId='installed_oauth_apps.delete.confirm' + onDelete={this.handleDelete} + /> </div> </div> ); diff --git a/webapp/components/integrations/components/installed_outgoing_webhook.jsx b/webapp/components/integrations/components/installed_outgoing_webhook.jsx index ebf4f75e1..a452979ae 100644 --- a/webapp/components/integrations/components/installed_outgoing_webhook.jsx +++ b/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) { - e.preventDefault(); - + handleDelete() { this.props.onDelete(this.props.outgoingWebhook); } @@ -170,15 +170,10 @@ export default class InstalledOutgoingWebhook extends React.Component { /> </Link> {' - '} - <a - href='#' - onClick={this.handleDelete} - > - <FormattedMessage - id='installed_integrations.delete' - defaultMessage='Delete' - /> - </a> + <DeleteIntegration + messageId='installed_outgoing_webhooks.delete.confirm' + onDelete={this.handleDelete} + /> </div> ); } |