Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show confirmation dialog when deleting a group (#1217)

Browse source 
* Show confirmation dialog when deleting a group

* Add cancel logic to groups dialog
This commit is contained in:
Trevor Bayless 2021-10-28 20:57:48 -05:00 committed by GitHub
parent 84f8f3c5bc
commit 579d2bb79e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { authenticationService } from '@/_services'; import { authenticationService } from '@/_services';
import { groupPermissionService } from '../_services/groupPermission.service'; import { groupPermissionService } from '../_services/groupPermission.service';
import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.css';
import { Header } from '@/_components'; import { Header, ConfirmDialog } from '@/_components';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -17,6 +17,8 @@ class ManageGroupPermissions extends React.Component {
creatingGroup: false, creatingGroup: false,
showNewGroupForm: false, showNewGroupForm: false,
newGroupName: null, newGroupName: null,
isDeletingGroup: false,
showGroupDeletionConfirmation: false,
}; };
} }
@ -81,10 +83,23 @@ class ManageGroupPermissions extends React.Component {
}; };
deleteGroup = (groupPermissionId) => { deleteGroup = (groupPermissionId) => {
this.setState({ showGroupDeletionConfirmation: true, groupToBeDeleted: groupPermissionId });
};
cancelDeleteGroupDialog = () => {
this.setState({
isDeletingGroup: false,
groupToBeDeleted: null,
showGroupDeletionConfirmation: false,
});
};
executeGroupDeletion = () => {
this.setState({ isDeletingGroup: true });
groupPermissionService groupPermissionService
.del(groupPermissionId) .del(this.state.groupToBeDeleted)
.then(() => { .then(() => {
toast.success('Group has been deleted', { toast.success('Group deleted successfully', {
hideProgressBar: true, hideProgressBar: true,
position: 'top-center', position: 'top-center',
}); });
@ -92,13 +107,30 @@ class ManageGroupPermissions extends React.Component {
}) })
.catch(({ error }) => { .catch(({ error }) => {
toast.error(error, { hideProgressBar: true, position: 'top-center' }); toast.error(error, { hideProgressBar: true, position: 'top-center' });
})
.finally(() => {
this.cancelDeleteGroupDialog();
}); });
}; };
render() { render() {
const { isLoading, showNewGroupForm, creatingGroup, groups } = this.state; const {
isLoading,
showNewGroupForm,
creatingGroup,
groups,
isDeletingGroup,
showGroupDeletionConfirmation } = this.state;
return ( return (
<div className="wrapper org-users-page"> <div className="wrapper org-users-page">
<ConfirmDialog
show={showGroupDeletionConfirmation}
message={"This group will be permanently deleted. Do you want to continue?"}
confirmButtonLoading={isDeletingGroup}
onConfirm={() => this.executeGroupDeletion()}
onCancel={() => this.cancelDeleteGroupDialog()}
/>
<Header switchDarkMode={this.props.switchDarkMode} darkMode={this.props.darkMode} /> <Header switchDarkMode={this.props.switchDarkMode} darkMode={this.props.darkMode} />
<div className="page-wrapper"> <div className="page-wrapper">