Revert "Use confirm button for users / groups delete"

This reverts commit 5e68a51ae9683cd1355278d0a406301f4bf3b00a.
2024-02-07 07:04:43 -08:00 · 2024-02-07 07:04:43 -08:00 · 9619c44680
commit 9619c44680
parent 894f029cb0
3 changed files with 115 additions and 102 deletions
--- 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 @@
            <div class="btn-group">
              <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
-                label="Delete"
-                i18n-label
-                (confirm)="deleteUser(user)"
-                *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }"
-                buttonClasses="btn-sm btn-outline-danger"
-                iconName="trash">
-              </pngx-confirm-button>
-            </div>
-          </div>
-        </div>
-      </li>
-    }
-  </ul>
-}
-
-@if (groups) {
-  <h4 class="mt-4 d-flex">
-    <ng-container i18n>Groups</ng-container>
-    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Group</ng-container>
-    </button>
-  </h4>
-  @if (groups.length > 0) {
-    <ul class="list-group">
-      <li class="list-group-item">
-        <div class="row">
-          <div class="col" i18n>Name</div>
-          <div class="col"></div>
-          <div class="col"></div>
-          <div class="col" i18n>Actions</div>
-        </div>
-      </li>
-      @for (group of groups; track group) {
-        <li class="list-group-item">
-          <div class="row">
-            <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editGroup(group)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Group)">{{group.name}}</button></div>
-            <div class="col"></div>
-            <div class="col"></div>
-            <div class="col">
-              <div class="btn-group">
-                <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
-                  label="Delete"
-                  i18n-label
-                  (confirm)="deleteGroup(group)"
-                  *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }"
-                  buttonClasses="btn-sm btn-outline-danger"
-                  iconName="trash">
-                </pngx-confirm-button>
+                <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
+                  <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                  </button>
+                </div>
              </div>
            </div>
-          </div>
-        </li>
-      }
-      @if (groups.length === 0) {
-        <li class="list-group-item" i18n>No groups defined</li>
-      }
-    </ul>
-  }
-}
+          </li>
+        }
+      </ul>
+    }

-@if (!users || !groups) {
-  <div>
-    <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-    <div class="visually-hidden" i18n>Loading...</div>
-  </div>
-}
+    @if (groups) {
+      <h4 class="mt-4 d-flex">
+        <ng-container i18n>Groups</ng-container>
+        <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
+          <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Group</ng-container>
+        </button>
+      </h4>
+      @if (groups.length > 0) {
+        <ul class="list-group">
+          <li class="list-group-item">
+            <div class="row">
+              <div class="col" i18n>Name</div>
+              <div class="col"></div>
+              <div class="col"></div>
+              <div class="col" i18n>Actions</div>
+            </div>
+          </li>
+          @for (group of groups; track group) {
+            <li class="list-group-item">
+              <div class="row">
+                <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editGroup(group)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Group)">{{group.name}}</button></div>
+                <div class="col"></div>
+                <div class="col"></div>
+                <div class="col">
+                  <div class="btn-group">
+                    <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>
+                      <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
+                        <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              }
+              @if (groups.length === 0) {
+                <li class="list-group-item" i18n>No groups defined</li>
+              }
+            </ul>
+          }
+        }
+
+        @if (!users || !groups) {
+          <div>
+            <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+            <div class="visually-hidden" i18n>Loading...</div>
+          </div>
+        }
--- 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')
  })
--- 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)
+        },
+      })
    })
  }