Enhancement: disable-able mail rules, add toggle to overview (#7810)

src-ui/src/app/components/manage/mail/mail.component.html

@@ -78,6 +78,7 @@
         <div class="col" i18n>Name</div>
         <div class="col d-none d-sm-block" i18n>Sort Order</div>
         <div class="col" i18n>Account</div>
+        <div class="col d-none d-sm-block" i18n>Status</div>
         <div class="col" i18n>Actions</div>
       </div>
     </li>
@@ -86,8 +87,16 @@
       <li class="list-group-item">
         <div class="row">
           <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editMailRule(rule)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailRule)">{{rule.name}}</button></div>
-          <div class="col d-flex align-items-center d-none d-sm-block">{{rule.order}}</div>
+          <div class="col d-flex align-items-center d-none d-sm-flex">{{rule.order}}</div>
           <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
+          <div class="col d-flex align-items-center d-none d-sm-flex">
+            <div class="form-check form-switch mb-0">
+              <input #inputField type="checkbox" class="form-check-input cursor-pointer" [id]="rule.id+'_enable'" [(ngModel)]="rule.enabled" (change)="onMailRuleEnableToggled(rule)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }">
+              <label class="form-check-label cursor-pointer" [for]="rule.id+'_enable'">
+                <code> @if(rule.enabled) { <ng-container i18n>Enabled</ng-container> } @else { <span i18n class="text-muted">Disabled</span> }</code>
+              </label>
+            </div>
+          </div>
           <div class="col">
             <div class="btn-group d-block d-sm-none">
               <div ngbDropdown container="body" class="d-inline-block">

src-ui/src/app/components/manage/mail/mail.component.spec.ts

@@ -43,14 +43,15 @@ 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 { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { By } from '@angular/platform-browser'
 
 const mailAccounts = [
   { id: 1, name: 'account1' },
   { id: 2, name: 'account2' },
 ]
 const mailRules = [
-  { id: 1, name: 'rule1', owner: 1, account: 1 },
-  { id: 2, name: 'rule2', owner: 2, account: 2 },
+  { id: 1, name: 'rule1', owner: 1, account: 1, enabled: true },
+  { id: 2, name: 'rule2', owner: 2, account: 2, enabled: true },
 ]
 
 describe('MailComponent', () => {
@@ -321,4 +322,30 @@ describe('MailComponent', () => {
     dialog.confirmClicked.emit({ permissions: perms, merge: true })
     expect(accountPatchSpy).toHaveBeenCalled()
   })
+
+  it('should update mail rule when enable is toggled', () => {
+    completeSetup()
+    const patchSpy = jest.spyOn(mailRuleService, 'patch')
+    const toggleInput = fixture.debugElement.query(
+      By.css('input[type="checkbox"]')
+    )
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    // fail first
+    patchSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error getting config'))
+    )
+    toggleInput.nativeElement.click()
+    expect(patchSpy).toHaveBeenCalled()
+    expect(toastErrorSpy).toHaveBeenCalled()
+    // succeed second
+    patchSpy.mockReturnValueOnce(of(mailRules[0] as MailRule))
+    toggleInput.nativeElement.click()
+    patchSpy.mockReturnValueOnce(
+      of({ ...mailRules[0], enabled: false } as MailRule)
+    )
+    toggleInput.nativeElement.click()
+    expect(patchSpy).toHaveBeenCalled()
+    expect(toastInfoSpy).toHaveBeenCalled()
+  })
 })

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -170,6 +170,21 @@ export class MailComponent
     this.editMailRule(clone, true)
   }
 
+  onMailRuleEnableToggled(rule: MailRule) {
+    this.mailRuleService.patch(rule).subscribe({
+      next: () => {
+        this.toastService.showInfo(
+          rule.enabled
+            ? $localize`Rule "${rule.name}" enabled.`
+            : $localize`Rule "${rule.name}" disabled.`
+        )
+      },
+      error: (e) => {
+        this.toastService.showError($localize`Error toggling rule.`, e)
+      },
+    })
+  }
+
   deleteMailRule(rule: MailRule) {
     const modal = this.modalService.open(ConfirmDialogComponent, {
       backdrop: 'static',