From 579d2bb79eca18fe4cbb4e84f10b5332811b0ac2 Mon Sep 17 00:00:00 2001
From: Trevor Bayless <trevorbayless1@gmail.com>
Date: Thu, 28 Oct 2021 20:57:48 -0500
Subject: [PATCH] Show confirmation dialog when deleting a group (#1217)

* Show confirmation dialog when deleting a group

* Add cancel logic to groups dialog
---
 .../ManageGroupPermissions.jsx                | 40 +++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx b/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
index 9d2bfbc999..cc74ace50d 100644
--- a/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
+++ b/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { authenticationService } from '@/_services';
 import { groupPermissionService } from '../_services/groupPermission.service';
 import 'react-toastify/dist/ReactToastify.css';
-import { Header } from '@/_components';
+import { Header, ConfirmDialog } from '@/_components';
 import { toast } from 'react-toastify';
 import { Link } from 'react-router-dom';
 
@@ -17,6 +17,8 @@ class ManageGroupPermissions extends React.Component {
       creatingGroup: false,
       showNewGroupForm: false,
       newGroupName: null,
+      isDeletingGroup: false,
+      showGroupDeletionConfirmation: false,
     };
   }
 
@@ -81,10 +83,23 @@ class ManageGroupPermissions extends React.Component {
   };
 
   deleteGroup = (groupPermissionId) => {
+    this.setState({ showGroupDeletionConfirmation: true, groupToBeDeleted: groupPermissionId });
+  };
+
+  cancelDeleteGroupDialog = () => {
+    this.setState({
+      isDeletingGroup: false,
+      groupToBeDeleted: null,
+      showGroupDeletionConfirmation: false,
+    });
+  };
+
+  executeGroupDeletion = () => {
+    this.setState({ isDeletingGroup: true });
     groupPermissionService
-      .del(groupPermissionId)
+      .del(this.state.groupToBeDeleted)
       .then(() => {
-        toast.success('Group has been deleted', {
+        toast.success('Group deleted successfully', {
           hideProgressBar: true,
           position: 'top-center',
         });
@@ -92,13 +107,30 @@ class ManageGroupPermissions extends React.Component {
       })
       .catch(({ error }) => {
         toast.error(error, { hideProgressBar: true, position: 'top-center' });
+      })
+      .finally(() => {
+        this.cancelDeleteGroupDialog();
       });
   };
 
   render() {
-    const { isLoading, showNewGroupForm, creatingGroup, groups } = this.state;
+    const {
+      isLoading,
+      showNewGroupForm,
+      creatingGroup,
+      groups,
+      isDeletingGroup,
+      showGroupDeletionConfirmation } = this.state;
     return (
       <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} />
 
         <div className="page-wrapper">