Disable / hide some UI buttons / elements if insufficient permissions

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

@@ -243,7 +243,7 @@
           <ng-container *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }">
             <h4>
               <ng-container i18n>Mail accounts</ng-container>
-              <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailAccount()">
+              <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailAccount()" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
                 <svg class="sidebaricon me-1" fill="currentColor">
                   <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
                 </svg>
@@ -262,7 +262,7 @@
 
                 <li *ngFor="let account of mailAccounts" class="list-group-item" [formGroupName]="account.id">
                   <div class="row">
-                    <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editMailAccount(account)">{{account.name}}</button></div>
+                    <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editMailAccount(account)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailAccount)">{{account.name}}</button></div>
                     <div class="col d-flex align-items-center">{{account.imap_server}}</div>
                     <div class="col">
                       <div class="btn-group">
@@ -280,7 +280,7 @@
           <ng-container *appIfPermissions="{ 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-primary ms-4" (click)="editMailRule()">
+              <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailRule()" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
                 <svg class="sidebaricon me-1" fill="currentColor">
                   <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
                 </svg>
@@ -299,7 +299,7 @@
 
                 <li *ngFor="let rule of mailRules" class="list-group-item" [formGroupName]="rule.id">
                   <div class="row">
-                    <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editMailRule(rule)">{{rule.name}}</button></div>
+                    <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">
@@ -323,7 +323,7 @@
       </ng-template>
     </li>
 
-    <li [ngbNavItem]="SettingsNavIDs.UsersGroups" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" (mouseover)="maybeInitializeTab(SettingsNavIDs.UsersGroups)" (focusin)="maybeInitializeTab(SettingsNavIDs.UsersGroups)">
+    <li [ngbNavItem]="SettingsNavIDs.UsersGroups" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }" (mouseover)="maybeInitializeTab(SettingsNavIDs.UsersGroups)" (focusin)="maybeInitializeTab(SettingsNavIDs.UsersGroups)">
       <a ngbNavLink i18n>Users & Groups</a>
       <ng-template ngbNavContent>
 
@@ -334,7 +334,7 @@
             <svg class="sidebaricon me-1" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
             </svg>
-            <ng-container i18n>Add User</ng-container>
+            <ng-container *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" i18n>Add User</ng-container>
           </button>
         </h4>
         <ul class="list-group" formGroupName="usersGroup">
@@ -350,13 +350,13 @@
 
           <li *ngFor="let user of users" class="list-group-item" [formGroupName]="user.id">
             <div class="row">
-              <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editUser(user)">{{user.username}}</button></div>
+              <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editUser(user)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.User)">{{user.username}}</button></div>
               <div class="col d-flex align-items-center">{{user.first_name}} {{user.last_name}}</div>
               <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
               <div class="col">
                 <div class="btn-group">
-                  <button class="btn btn-sm btn-primary" type="button" (click)="editUser(user)" i18n>Edit</button>
-                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" i18n>Delete</button>
+                  <button class="btn btn-sm btn-primary" type="button" (click)="editUser(user)" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }" i18n>Edit</button>
+                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }" i18n>Delete</button>
                 </div>
               </div>
             </div>
@@ -369,7 +369,7 @@
             <svg class="sidebaricon me-1" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
             </svg>
-            <ng-container i18n>Add Group</ng-container>
+            <ng-container *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }" i18n>Add Group</ng-container>
           </button>
         </h4>
         <ul *ngIf="groups.length > 0" class="list-group" formGroupName="groupsGroup">
@@ -385,13 +385,13 @@
 
           <li *ngFor="let group of groups" class="list-group-item" [formGroupName]="group.id">
             <div class="row">
-              <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editGroup(group)">{{group.name}}</button></div>
+              <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-primary" type="button" (click)="editGroup(group)" i18n>Edit</button>
-                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" i18n>Delete</button>
+                  <button class="btn btn-sm btn-primary" type="button" (click)="editGroup(group)" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }" i18n>Edit</button>
+                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }" i18n>Delete</button>
                 </div>
               </div>
             </div>

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

@@ -116,52 +116,66 @@ describe('SettingsComponent', () => {
     jest
       .spyOn(permissionsService, 'currentUserOwnsObject')
       .mockReturnValue(true)
-    jest.spyOn(userService, 'listAll').mockReturnValue(
-      of({
-        all: users.map((u) => u.id),
-        count: users.length,
-        results: users.concat([]),
-      })
-    )
     groupService = TestBed.inject(GroupService)
-    jest.spyOn(groupService, 'listAll').mockReturnValue(
-      of({
-        all: groups.map((g) => g.id),
-        count: groups.length,
-        results: groups.concat([]),
-      })
-    )
     savedViewService = TestBed.inject(SavedViewService)
-    jest.spyOn(savedViewService, 'listAll').mockReturnValue(
-      of({
-        all: savedViews.map((v) => v.id),
-        count: savedViews.length,
-        results: (savedViews as PaperlessSavedView[]).concat([]),
-      })
-    )
     mailAccountService = TestBed.inject(MailAccountService)
-    jest.spyOn(mailAccountService, 'listAll').mockReturnValue(
-      of({
-        all: mailAccounts.map((a) => a.id),
-        count: mailAccounts.length,
-        results: (mailAccounts as PaperlessMailAccount[]).concat([]),
-      })
-    )
     mailRuleService = TestBed.inject(MailRuleService)
-    jest.spyOn(mailRuleService, 'listAll').mockReturnValue(
-      of({
-        all: mailRules.map((r) => r.id),
-        count: mailRules.length,
-        results: (mailRules as PaperlessMailRule[]).concat([]),
-      })
-    )
+  })
+
+  function completeSetup(excludeService = null) {
+    if (excludeService !== userService) {
+      jest.spyOn(userService, 'listAll').mockReturnValue(
+        of({
+          all: users.map((u) => u.id),
+          count: users.length,
+          results: users.concat([]),
+        })
+      )
+    }
+    if (excludeService !== groupService) {
+      jest.spyOn(groupService, 'listAll').mockReturnValue(
+        of({
+          all: groups.map((g) => g.id),
+          count: groups.length,
+          results: groups.concat([]),
+        })
+      )
+    }
+    if (excludeService !== savedViewService) {
+      jest.spyOn(savedViewService, 'listAll').mockReturnValue(
+        of({
+          all: savedViews.map((v) => v.id),
+          count: savedViews.length,
+          results: (savedViews as PaperlessSavedView[]).concat([]),
+        })
+      )
+    }
+    if (excludeService !== mailAccountService) {
+      jest.spyOn(mailAccountService, 'listAll').mockReturnValue(
+        of({
+          all: mailAccounts.map((a) => a.id),
+          count: mailAccounts.length,
+          results: (mailAccounts as PaperlessMailAccount[]).concat([]),
+        })
+      )
+    }
+    if (excludeService !== mailRuleService) {
+      jest.spyOn(mailRuleService, 'listAll').mockReturnValue(
+        of({
+          all: mailRules.map((r) => r.id),
+          count: mailRules.length,
+          results: (mailRules as PaperlessMailRule[]).concat([]),
+        })
+      )
+    }
 
     fixture = TestBed.createComponent(SettingsComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
-  })
+  }
 
   it('should support tabbed settings & change URL, prevent navigation if dirty confirmation rejected', () => {
+    completeSetup()
     const navigateSpy = jest.spyOn(router, 'navigate')
     const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
     tabButtons[1].nativeElement.dispatchEvent(new MouseEvent('click'))
@@ -187,6 +201,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support direct link to tab by URL, scroll if needed', () => {
+    completeSetup()
     jest
       .spyOn(activatedRoute, 'paramMap', 'get')
       .mockReturnValue(of(convertToParamMap({ section: 'mail' })))
@@ -199,6 +214,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should lazy load tab data', () => {
+    completeSetup()
     const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
 
     expect(component.savedViews).toBeUndefined()
@@ -221,6 +237,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support save saved views, show error', () => {
+    completeSetup()
     component.maybeInitializeTab(3) // SavedViews
 
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
@@ -248,6 +265,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support save local settings updating appearance settings and calling API, show error', () => {
+    completeSetup()
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastSpy = jest.spyOn(toastService, 'show')
     const storeSpy = jest.spyOn(settingsService, 'storeSettings')
@@ -275,6 +293,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should offer reload if settings changes require', () => {
+    completeSetup()
     let toast: Toast
     toastService.getToasts().subscribe((t) => (toast = t[0]))
     component.initialize(true) // reset
@@ -288,6 +307,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should allow setting theme color, visually apply change immediately but not save', () => {
+    completeSetup()
     const appearanceSpy = jest.spyOn(
       settingsService,
       'updateAppearanceSettings'
@@ -304,6 +324,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support delete saved view', () => {
+    completeSetup()
     component.maybeInitializeTab(3) // SavedViews
     const toastSpy = jest.spyOn(toastService, 'showInfo')
     const deleteSpy = jest.spyOn(savedViewService, 'delete')
@@ -316,6 +337,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support edit / create user, show error if needed', () => {
+    completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     component.editUser(users[0])
@@ -332,6 +354,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support delete user, show error if needed', () => {
+    completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     component.deleteUser(users[0])
@@ -352,6 +375,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should logout current user if password changed, after delay', fakeAsync(() => {
+    completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     component.editUser(users[0])
@@ -371,6 +395,7 @@ describe('SettingsComponent', () => {
   }))
 
   it('should support edit / create group, show error if needed', () => {
+    completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     component.editGroup(groups[0])
@@ -386,6 +411,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support delete group, show error if needed', () => {
+    completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     component.deleteGroup(users[0])
@@ -406,12 +432,71 @@ describe('SettingsComponent', () => {
   })
 
   it('should get group name', () => {
+    completeSetup()
     component.maybeInitializeTab(5) // UsersGroups
     expect(component.getGroupName(1)).toEqual(groups[0].name)
     expect(component.getGroupName(11)).toEqual('')
   })
 
+  it('should show errors on load if load mailAccounts failure', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(mailAccountService, 'listAll')
+      .mockImplementation(() =>
+        throwError(() => new Error('failed to load mail accounts'))
+      )
+    completeSetup(mailAccountService)
+    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
+    tabButtons[3].nativeElement.dispatchEvent(new MouseEvent('click')) // mail tab
+    fixture.detectChanges()
+    expect(toastErrorSpy).toBeCalled()
+  })
+
+  it('should show errors on load if load mailRules failure', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(mailRuleService, 'listAll')
+      .mockImplementation(() =>
+        throwError(() => new Error('failed to load mail rules'))
+      )
+    completeSetup(mailRuleService)
+    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
+    tabButtons[3].nativeElement.dispatchEvent(new MouseEvent('click')) // mail tab
+    fixture.detectChanges()
+    // tabButtons[4].nativeElement.dispatchEvent(new MouseEvent('click'))
+    expect(toastErrorSpy).toBeCalled()
+  })
+
+  it('should show errors on load if load users failure', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(userService, 'listAll')
+      .mockImplementation(() =>
+        throwError(() => new Error('failed to load users'))
+      )
+    completeSetup(userService)
+    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
+    tabButtons[4].nativeElement.dispatchEvent(new MouseEvent('click')) // users tab
+    fixture.detectChanges()
+    expect(toastErrorSpy).toBeCalled()
+  })
+
+  it('should show errors on load if load groups failure', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(groupService, 'listAll')
+      .mockImplementation(() =>
+        throwError(() => new Error('failed to load groups'))
+      )
+    completeSetup(groupService)
+    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
+    tabButtons[4].nativeElement.dispatchEvent(new MouseEvent('click')) // users tab
+    fixture.detectChanges()
+    expect(toastErrorSpy).toBeCalled()
+  })
+
   it('should support edit / create mail account, show error if needed', () => {
+    completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     component.editMailAccount(mailAccounts[0] as PaperlessMailAccount)
@@ -427,6 +512,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support delete mail account, show error if needed', () => {
+    completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     component.deleteMailAccount(mailAccounts[0] as PaperlessMailAccount)
@@ -447,6 +533,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support edit / create mail rule, show error if needed', () => {
+    completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     component.editMailRule(mailRules[0] as PaperlessMailRule)
@@ -462,6 +549,7 @@ describe('SettingsComponent', () => {
   })
 
   it('should support delete mail rule, show error if needed', () => {
+    completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     component.deleteMailRule(mailRules[0] as PaperlessMailRule)

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

@@ -146,7 +146,7 @@ export class SettingsComponent
     private groupsService: GroupService,
     private router: Router,
     private modalService: NgbModal,
-    private permissionsService: PermissionsService
+    public permissionsService: PermissionsService
   ) {
     super()
     this.settings.settingsSaved.subscribe(() => {
@@ -259,25 +259,73 @@ export class SettingsComponent
       navID == SettingsNavIDs.UsersGroups &&
       (!this.users || !this.groups)
     ) {
-      this.usersService.listAll().subscribe((r) => {
-        this.users = r.results
-        this.groupsService.listAll().subscribe((r) => {
-          this.groups = r.results
-          this.initialize(false)
+      this.usersService
+        .listAll()
+        .pipe(first())
+        .subscribe({
+          next: (r) => {
+            this.users = r.results
+            this.groupsService
+              .listAll()
+              .pipe(first())
+              .subscribe({
+                next: (r) => {
+                  this.groups = r.results
+                  this.initialize(false)
+                },
+                error: (e) => {
+                  this.toastService.showError(
+                    $localize`Error retrieving groups`,
+                    10000,
+                    JSON.stringify(e)
+                  )
+                },
+              })
+          },
+          error: (e) => {
+            this.toastService.showError(
+              $localize`Error retrieving users`,
+              10000,
+              JSON.stringify(e)
+            )
+          },
         })
-      })
     } else if (
       navID == SettingsNavIDs.Mail &&
       (!this.mailAccounts || !this.mailRules)
     ) {
-      this.mailAccountService.listAll().subscribe((r) => {
-        this.mailAccounts = r.results
+      this.mailAccountService
+        .listAll()
+        .pipe(first())
+        .subscribe({
+          next: (r) => {
+            this.mailAccounts = r.results
 
-        this.mailRuleService.listAll().subscribe((r) => {
-          this.mailRules = r.results
-          this.initialize(false)
+            this.mailRuleService
+              .listAll()
+              .pipe(first())
+              .subscribe({
+                next: (r) => {
+                  this.mailRules = r.results
+                  this.initialize(false)
+                },
+                error: (e) => {
+                  this.toastService.showError(
+                    $localize`Error retrieving mail rules`,
+                    10000,
+                    JSON.stringify(e)
+                  )
+                },
+              })
+          },
+          error: (e) => {
+            this.toastService.showError(
+              $localize`Error retrieving mail accounts`,
+              10000,
+              JSON.stringify(e)
+            )
+          },
         })
-      })
     }
   }
 

src-ui/src/app/services/toast.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { Subject, zip } from 'rxjs'
+import { Subject } from 'rxjs'
 
 export interface Toast {
   title: string

src-ui/src/theme.scss

@@ -80,6 +80,9 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   .btn {
     --bs-btn-disabled-opacity: 0.35;
   }
+  .btn.btn-link {
+    --bs-btn-disabled-opacity: 0.85;
+  }
 
   .btn-primary {
     &:hover, &:focus, &.active, &:active {