Revert "Use confirm button for users / groups delete"

This reverts commit 5e68a51ae9683cd1355278d0a406301f4bf3b00a.

src-ui/src/app/components/admin/users-groups/users-groups.component.html

@@ -34,14 +34,9 @@
               <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
                 <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
                 </button>
-              <pngx-confirm-button
+                <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
-                label="Delete"
+                  <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-                i18n-label
+                  </button>
-                (confirm)="deleteUser(user)"
-                *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }"
-                buttonClasses="btn-sm btn-outline-danger"
-                iconName="trash">
-              </pngx-confirm-button>
                 </div>
               </div>
             </div>
@@ -78,14 +73,9 @@
                     <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
                       <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
                       </button>
-                <pngx-confirm-button
+                      <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
-                  label="Delete"
+                        <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-                  i18n-label
+                        </button>
-                  (confirm)="deleteGroup(group)"
-                  *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }"
-                  buttonClasses="btn-sm btn-outline-danger"
-                  iconName="trash">
-                </pngx-confirm-button>
                       </div>
                     </div>
                   </div>

src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts

@@ -44,8 +44,6 @@ import { UsersAndGroupsComponent } from './users-groups.component'
 import { User } from 'src/app/data/user'
 import { Group } from 'src/app/data/group'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { By } from '@angular/platform-browser'
-import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 
 const users = [
   { id: 1, username: 'user1', is_superuser: false },
@@ -85,7 +83,6 @@ describe('UsersAndGroupsComponent', () => {
         PermissionsUserComponent,
         PermissionsGroupComponent,
         IfOwnerDirective,
-        ConfirmButtonComponent,
       ],
       providers: [CustomDatePipe, DatePipe, PermissionsGuard],
       imports: [
@@ -163,9 +160,10 @@ describe('UsersAndGroupsComponent', () => {
 
   it('should support delete user, show error if needed', () => {
     completeSetup()
-    const deleteButton = fixture.debugElement.query(
+    let modal: NgbModalRef
-      By.directive(ConfirmButtonComponent)
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
-    )
+    component.deleteUser(users[0])
+    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
     const deleteSpy = jest.spyOn(userService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
@@ -173,10 +171,10 @@ describe('UsersAndGroupsComponent', () => {
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting user'))
     )
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    deleteDialog.confirm()
-    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(toastErrorSpy).toBeCalled()
     deleteSpy.mockReturnValueOnce(of(true))
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    deleteDialog.confirm()
     expect(listAllSpy).toHaveBeenCalled()
     expect(toastInfoSpy).toHaveBeenCalledWith('Deleted user')
   })
@@ -220,9 +218,10 @@ describe('UsersAndGroupsComponent', () => {
 
   it('should support delete group, show error if needed', () => {
     completeSetup()
-    const deleteButton = fixture.debugElement.queryAll(
+    let modal: NgbModalRef
-      By.directive(ConfirmButtonComponent)
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
-    )[2]
+    component.deleteGroup(users[0])
+    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
     const deleteSpy = jest.spyOn(groupService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
@@ -230,10 +229,10 @@ describe('UsersAndGroupsComponent', () => {
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting group'))
     )
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    deleteDialog.confirm()
-    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(toastErrorSpy).toBeCalled()
     deleteSpy.mockReturnValueOnce(of(true))
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    deleteDialog.confirm()
     expect(listAllSpy).toHaveBeenCalled()
     expect(toastInfoSpy).toHaveBeenCalledWith('Deleted group')
   })

src-ui/src/app/components/admin/users-groups/users-groups.component.ts

@@ -108,8 +108,19 @@ export class UsersAndGroupsComponent
   }
 
   deleteUser(user: User) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete user account`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this user account.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      modal.componentInstance.buttonsEnabled = false
       this.usersService.delete(user).subscribe({
         next: () => {
+          modal.close()
           this.toastService.showInfo($localize`Deleted user`)
           this.usersService.listAll().subscribe((r) => {
             this.users = r.results
@@ -119,6 +130,7 @@ export class UsersAndGroupsComponent
           this.toastService.showError($localize`Error deleting user.`, e)
         },
       })
+    })
   }
 
   editGroup(group: Group = null) {
@@ -146,8 +158,19 @@ export class UsersAndGroupsComponent
   }
 
   deleteGroup(group: Group) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete user group`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this user group.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      modal.componentInstance.buttonsEnabled = false
       this.groupsService.delete(group).subscribe({
         next: () => {
+          modal.close()
           this.toastService.showInfo($localize`Deleted group`)
           this.groupsService.listAll().subscribe((r) => {
             this.groups = r.results
@@ -157,6 +180,7 @@ export class UsersAndGroupsComponent
           this.toastService.showError($localize`Error deleting group.`, e)
         },
       })
+    })
   }
 
   getGroupName(id: number): string {