From 5e68a51ae9683cd1355278d0a406301f4bf3b00a Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Tue, 6 Feb 2024 22:14:30 -0800 Subject: [PATCH] Use confirm button for users / groups delete --- .../users-groups/users-groups.component.html | 124 ++++++++++-------- .../users-groups.component.spec.ts | 29 ++-- .../users-groups/users-groups.component.ts | 64 +++------ 3 files changed, 102 insertions(+), 115 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 3f91842d4..826599f8a 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,64 +33,74 @@
+ + +
+ + + + } + +} + +@if (groups) { +

+ Groups + +

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

- Groups - -

- @if (groups.length > 0) { - - } - } - - @if (!users || !groups) { -
- -
- } + + } + @if (groups.length === 0) { +
  • No groups defined
    • + } + + } +} + +@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 79bc569dd..2e8b3fdad 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,6 +44,8 @@ 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 }, @@ -83,6 +85,7 @@ describe('UsersAndGroupsComponent', () => { PermissionsUserComponent, PermissionsGroupComponent, IfOwnerDirective, + ConfirmButtonComponent, ], providers: [CustomDatePipe, DatePipe, PermissionsGuard], imports: [ @@ -160,10 +163,9 @@ describe('UsersAndGroupsComponent', () => { it('should support delete user, show error if needed', () => { completeSetup() - let modal: NgbModalRef - modalService.activeInstances.subscribe((refs) => (modal = refs[0])) - component.deleteUser(users[0]) - const deleteDialog = modal.componentInstance as ConfirmDialogComponent + const deleteButton = fixture.debugElement.query( + By.directive(ConfirmButtonComponent) + ) const deleteSpy = jest.spyOn(userService, 'delete') const toastErrorSpy = jest.spyOn(toastService, 'showError') const toastInfoSpy = jest.spyOn(toastService, 'showInfo') @@ -171,10 +173,10 @@ describe('UsersAndGroupsComponent', () => { deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting user')) ) - deleteDialog.confirm() - expect(toastErrorSpy).toBeCalled() + deleteButton.nativeElement.dispatchEvent(new Event('confirm')) + expect(toastErrorSpy).toHaveBeenCalled() deleteSpy.mockReturnValueOnce(of(true)) - deleteDialog.confirm() + deleteButton.nativeElement.dispatchEvent(new Event('confirm')) expect(listAllSpy).toHaveBeenCalled() expect(toastInfoSpy).toHaveBeenCalledWith('Deleted user') }) @@ -218,10 +220,9 @@ describe('UsersAndGroupsComponent', () => { it('should support delete group, show error if needed', () => { completeSetup() - let modal: NgbModalRef - modalService.activeInstances.subscribe((refs) => (modal = refs[0])) - component.deleteGroup(users[0]) - const deleteDialog = modal.componentInstance as ConfirmDialogComponent + const deleteButton = fixture.debugElement.queryAll( + By.directive(ConfirmButtonComponent) + )[2] const deleteSpy = jest.spyOn(groupService, 'delete') const toastErrorSpy = jest.spyOn(toastService, 'showError') const toastInfoSpy = jest.spyOn(toastService, 'showInfo') @@ -229,10 +230,10 @@ describe('UsersAndGroupsComponent', () => { deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting group')) ) - deleteDialog.confirm() - expect(toastErrorSpy).toBeCalled() + deleteButton.nativeElement.dispatchEvent(new Event('confirm')) + expect(toastErrorSpy).toHaveBeenCalled() deleteSpy.mockReturnValueOnce(of(true)) - deleteDialog.confirm() + deleteButton.nativeElement.dispatchEvent(new Event('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 f049677ab..9d0b30f44 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,28 +108,16 @@ 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 - }) - }, - error: (e) => { - this.toastService.showError($localize`Error deleting user.`, e) - }, - }) + 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) + }, }) } @@ -158,28 +146,16 @@ 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 - }) - }, - error: (e) => { - this.toastService.showError($localize`Error deleting group.`, e) - }, - }) + 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) + }, }) }