Revert "Use confirm button for mail account / rule delete"

This reverts commit 5bd1bf37f3ac67abf7a66022768e1a00667224bd.
2024-02-07 07:04:45 -08:00 · 2024-02-07 07:04:45 -08:00 · e6c80f6e0d
commit e6c80f6e0d
parent 9619c44680
3 changed files with 130 additions and 116 deletions
--- a/src-ui/src/app/components/manage/mail/mail.component.html
+++ b/src-ui/src/app/components/manage/mail/mail.component.html
@ -32,84 +32,72 @@
            <div class="btn-group">
              <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userCanEdit(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailAccount(account)">
                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
-              </button>
-              <button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)">
-                <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
-              </button>
-              <pngx-confirm-button
-                label="Delete"
-                i18n-label
-                (confirm)="deleteMailAccount(account)"
-                *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }"
-                [disabled]="!userIsOwner(account)"
-                buttonClasses="btn-sm btn-outline-danger"
-                iconName="trash">
-              </pngx-confirm-button>
+                </button>
+                <button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)">
+                  <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
+                  </button>
+                  <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)">
+                    <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </li>
+          }
+          @if (mailAccounts.length === 0) {
+            <li class="list-group-item" i18n>No mail accounts defined.</li>
+          }
+        </ul>
+
+      </ng-container>
+
+      <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }">
+        <h4 class="mt-4">
+          <ng-container i18n>Mail rules</ng-container>
+          <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
+            <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Rule</ng-container>
+          </button>
+        </h4>
+        <ul class="list-group">
+          <li class="list-group-item">
+            <div class="row">
+              <div class="col" i18n>Name</div>
+              <div class="col" i18n>Account</div>
+              <div class="col" i18n>Actions</div>
            </div>
-          </div>
-        </div>
-      </li>
-    }
-    @if (mailAccounts.length === 0) {
-      <li class="list-group-item" i18n>No mail accounts defined.</li>
-    }
-  </ul>
+          </li>

-</ng-container>
+          @for (rule of mailRules; track rule) {
+            <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)="editMailRule(rule)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailRule)">{{rule.name}}</button></div>
+                <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
+                <div class="col">
+                  <div class="btn-group">
+                    <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailRule(rule)">
+                      <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                      </button>
+                      <button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)">
+                        <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
+                        </button>
+                        <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)">
+                          <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                }
+                @if (mailRules.length === 0) {
+                  <li class="list-group-item" i18n>No mail rules defined.</li>
+                }
+              </ul>

-<ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }">
-  <h4 class="mt-4">
-    <ng-container i18n>Mail rules</ng-container>
-    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Rule</ng-container>
-    </button>
-  </h4>
-  <ul class="list-group">
-    <li class="list-group-item">
-      <div class="row">
-        <div class="col" i18n>Name</div>
-        <div class="col" i18n>Account</div>
-        <div class="col" i18n>Actions</div>
-      </div>
-    </li>
+            </ng-container>

-    @for (rule of mailRules; track rule) {
-      <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)="editMailRule(rule)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailRule)">{{rule.name}}</button></div>
-          <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
-          <div class="col">
-            <div class="btn-group">
-              <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailRule(rule)">
-                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
-              </button>
-              <button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)">
-                <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
-              </button>
-              <pngx-confirm-button
-                label="Delete"
-                i18n-label
-                (confirm)="deleteMailRule(rule)"
-                *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }"
-                [disabled]="!userIsOwner(rule)"
-                buttonClasses="btn-sm btn-outline-danger"
-                iconName="trash">
-              </pngx-confirm-button>
-            </div>
-          </div>
-        </div>
-      </li>
-    }
-    @if (mailRules.length === 0) {
-      <li class="list-group-item" i18n>No mail rules defined.</li>
-    }
-  </ul>
-
-</ng-container>
-
-@if (!mailAccounts || !mailRules) {
-  <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 (!mailAccounts || !mailRules) {
+              <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/manage/mail/mail.component.spec.ts
+++ b/src-ui/src/app/components/manage/mail/mail.component.spec.ts
@ -42,8 +42,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { SwitchComponent } from '../../common/input/switch/switch.component'
-import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
-import { By } from '@angular/platform-browser'

 const mailAccounts = [
  { id: 1, name: 'account1' },
@ -86,7 +84,6 @@ describe('MailComponent', () => {
        PermissionsDialogComponent,
        PermissionsFormComponent,
        SwitchComponent,
-        ConfirmButtonComponent,
      ],
      providers: [CustomDatePipe, DatePipe, PermissionsGuard],
      imports: [
@ -186,9 +183,10 @@ describe('MailComponent', () => {

  it('should support delete mail account, show error if needed', () => {
    completeSetup()
-    const deleteButton = fixture.debugElement.query(
-      By.directive(ConfirmButtonComponent)
-    )
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+    component.deleteMailAccount(mailAccounts[0] as MailAccount)
+    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
    const deleteSpy = jest.spyOn(mailAccountService, 'delete')
    const toastErrorSpy = jest.spyOn(toastService, 'showError')
    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
@ -196,10 +194,10 @@ describe('MailComponent', () => {
    deleteSpy.mockReturnValueOnce(
      throwError(() => new Error('error deleting mail account'))
    )
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    deleteDialog.confirm()
    expect(toastErrorSpy).toBeCalled()
    deleteSpy.mockReturnValueOnce(of(true))
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    deleteDialog.confirm()
    expect(listAllSpy).toHaveBeenCalled()
    expect(toastInfoSpy).toHaveBeenCalledWith('Deleted mail account')
  })
@ -224,9 +222,10 @@ describe('MailComponent', () => {

  it('should support delete mail rule, 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.deleteMailRule(mailRules[0] as MailRule)
+    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
    const deleteSpy = jest.spyOn(mailRuleService, 'delete')
    const toastErrorSpy = jest.spyOn(toastService, 'showError')
    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
@ -234,10 +233,10 @@ describe('MailComponent', () => {
    deleteSpy.mockReturnValueOnce(
      throwError(() => new Error('error deleting mail rule'))
    )
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    deleteDialog.confirm()
    expect(toastErrorSpy).toBeCalled()
    deleteSpy.mockReturnValueOnce(of(true))
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    deleteDialog.confirm()
    expect(listAllSpy).toHaveBeenCalled()
    expect(toastInfoSpy).toHaveBeenCalledWith('Deleted mail rule')
  })
--- a/src-ui/src/app/components/manage/mail/mail.component.ts
+++ b/src-ui/src/app/components/manage/mail/mail.component.ts
@ -106,19 +106,34 @@ export class MailComponent
  }

  deleteMailAccount(account: MailAccount) {
-    this.mailAccountService.delete(account).subscribe({
-      next: () => {
-        this.toastService.showInfo($localize`Deleted mail account`)
-        this.mailAccountService.clearCache()
-        this.mailAccountService
-          .listAll(null, null, { full_perms: true })
-          .subscribe((r) => {
-            this.mailAccounts = r.results
-          })
-      },
-      error: (e) => {
-        this.toastService.showError($localize`Error deleting mail account.`, e)
-      },
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete mail account`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this mail 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.mailAccountService.delete(account).subscribe({
+        next: () => {
+          modal.close()
+          this.toastService.showInfo($localize`Deleted mail account`)
+          this.mailAccountService.clearCache()
+          this.mailAccountService
+            .listAll(null, null, { full_perms: true })
+            .subscribe((r) => {
+              this.mailAccounts = r.results
+            })
+        },
+        error: (e) => {
+          this.toastService.showError(
+            $localize`Error deleting mail account.`,
+            e
+          )
+        },
+      })
    })
  }

@ -150,19 +165,31 @@ export class MailComponent
  }

  deleteMailRule(rule: MailRule) {
-    this.mailRuleService.delete(rule).subscribe({
-      next: () => {
-        this.toastService.showInfo($localize`Deleted mail rule`)
-        this.mailRuleService.clearCache()
-        this.mailRuleService
-          .listAll(null, null, { full_perms: true })
-          .subscribe((r) => {
-            this.mailRules = r.results
-          })
-      },
-      error: (e) => {
-        this.toastService.showError($localize`Error deleting mail rule.`, e)
-      },
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete mail rule`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this mail rule.`
+    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.mailRuleService.delete(rule).subscribe({
+        next: () => {
+          modal.close()
+          this.toastService.showInfo($localize`Deleted mail rule`)
+          this.mailRuleService.clearCache()
+          this.mailRuleService
+            .listAll(null, null, { full_perms: true })
+            .subscribe((r) => {
+              this.mailRules = r.results
+            })
+        },
+        error: (e) => {
+          this.toastService.showError($localize`Error deleting mail rule.`, e)
+        },
+      })
    })
  }