From 9619c44680a81eae077dbcca385fcb7c57bd826d Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Wed, 7 Feb 2024 07:04:43 -0800 Subject: [PATCH] Revert "Use confirm button for users / groups delete" This reverts commit 5e68a51ae9683cd1355278d0a406301f4bf3b00a. --- .../users-groups/users-groups.component.html | 124 ++++++++---------- .../users-groups.component.spec.ts | 29 ++-- .../users-groups/users-groups.component.ts | 64 ++++++--- 3 files changed, 115 insertions(+), 102 deletions(-) diff --git a/src-ui/src/app/components/admin/users-groups/users-groups.component.html b/src-ui/src/app/components/admin/users-groups/users-groups.component.html index 826599f8a..3f91842d4 100644 --- a/src-ui/src/app/components/admin/users-groups/users-groups.component.html +++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.html @@ -33,74 +33,64 @@
- - -
- - - - } - -} - -@if (groups) { -

- Groups - -

- @if (groups.length > 0) { - - } -} + + } + + } -@if (!users || !groups) { -
- - -
-} + @if (groups) { +

+ Groups + +

+ @if (groups.length > 0) { + + } + } + + @if (!users || !groups) { +
+ + +
+ } diff --git a/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts b/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts index 2e8b3fdad..79bc569dd 100644 --- a/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts +++ b/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( - By.directive(ConfirmButtonComponent) - ) + let modal: NgbModalRef + 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')) - expect(toastErrorSpy).toHaveBeenCalled() + deleteDialog.confirm() + 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( - By.directive(ConfirmButtonComponent) - )[2] + let modal: NgbModalRef + modalService.activeInstances.subscribe((refs) => (modal = refs[0])) + 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')) - expect(toastErrorSpy).toHaveBeenCalled() + deleteDialog.confirm() + expect(toastErrorSpy).toBeCalled() deleteSpy.mockReturnValueOnce(of(true)) - deleteButton.nativeElement.dispatchEvent(new Event('confirm')) + deleteDialog.confirm() expect(listAllSpy).toHaveBeenCalled() expect(toastInfoSpy).toHaveBeenCalledWith('Deleted group') }) diff --git a/src-ui/src/app/components/admin/users-groups/users-groups.component.ts b/src-ui/src/app/components/admin/users-groups/users-groups.component.ts index 9d0b30f44..f049677ab 100644 --- a/src-ui/src/app/components/admin/users-groups/users-groups.component.ts +++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.ts @@ -108,16 +108,28 @@ export class UsersAndGroupsComponent } deleteUser(user: User) { - this.usersService.delete(user).subscribe({ - next: () => { - this.toastService.showInfo($localize`Deleted user`) - this.usersService.listAll().subscribe((r) => { - this.users = r.results - }) - }, - error: (e) => { - this.toastService.showError($localize`Error deleting user.`, e) - }, + 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 + }) + }, + error: (e) => { + this.toastService.showError($localize`Error deleting user.`, e) + }, + }) }) } @@ -146,16 +158,28 @@ export class UsersAndGroupsComponent } deleteGroup(group: Group) { - this.groupsService.delete(group).subscribe({ - next: () => { - this.toastService.showInfo($localize`Deleted group`) - this.groupsService.listAll().subscribe((r) => { - this.groups = r.results - }) - }, - error: (e) => { - this.toastService.showError($localize`Error deleting group.`, e) - }, + 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 + }) + }, + error: (e) => { + this.toastService.showError($localize`Error deleting group.`, e) + }, + }) }) }