Fix: saved view sidebar heading not always visible (#7584)

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -93,33 +93,35 @@
         </ul>
 
         <div class="nav-group mt-3 mb-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
-          @if (savedViewService.loading || savedViewService.sidebarViews?.length > 0) {
+          @if (savedViewService.loading) {
             <h6 class="sidebar-heading px-3 text-muted">
               <span i18n>Saved views</span>
-              @if (savedViewService.loading) {
-                <div class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
-              }
+              <div class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
             </h6>
+          } @else if (savedViewService.sidebarViews?.length > 0) {
+            <h6 class="sidebar-heading px-3 text-muted">
+              <span i18n>Saved views</span>
+            </h6>
+            <ul class="nav flex-column mb-2" cdkDropList (cdkDropListDropped)="onDrop($event)">
+              @for (view of savedViewService.sidebarViews; track view.id) {
+                <li class="nav-item w-100 app-link" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
+                  cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
+                  (cdkDragEnded)="onDragEnd($event)">
+                  <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}"
+                    routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
+                    [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                    popoverClass="popover-slim">
+                    <i-bs class="me-1" name="funnel"></i-bs><span>&nbsp;{{view.name}}</span>
+                  </a>
+                  @if (settingsService.organizingSidebarSavedViews) {
+                    <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
+                      <i-bs name="grip-vertical"></i-bs>
+                    </div>
+                  }
+                </li>
+              }
+            </ul>
           }
-          <ul class="nav flex-column mb-2" cdkDropList (cdkDropListDropped)="onDrop($event)">
-            @for (view of savedViewService.sidebarViews; track view.id) {
-              <li class="nav-item w-100 app-link" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
-                cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
-                (cdkDragEnded)="onDragEnd($event)">
-                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}"
-                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
-                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
-                  popoverClass="popover-slim">
-                  <i-bs class="me-1" name="funnel"></i-bs><span>&nbsp;{{view.name}}</span>
-                </a>
-                @if (settingsService.organizingSidebarSavedViews) {
-                  <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
-                    <i-bs name="grip-vertical"></i-bs>
-                  </div>
-                }
-              </li>
-            }
-          </ul>
         </div>
 
         <div class="nav-group mt-3 mb-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -35,7 +35,6 @@ import {
 } from '@angular/cdk/drag-drop'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
-import { ObjectWithId } from 'src/app/data/object-with-id'
 
 @Component({
   selector: 'pngx-app-frame',

src-ui/src/app/services/rest/saved-view.service.spec.ts

@@ -69,6 +69,16 @@ describe(`Additional service tests for SavedViewService`, () => {
     expect(service.sidebarViews).toHaveLength(3)
   })
 
+  it('should gracefully handle errors', () => {
+    service.initialize()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/?page=1&page_size=100000`
+    )
+    req.error(new ErrorEvent('error'))
+    expect(service.loading).toBeFalsy()
+    expect(service.allViews).toHaveLength(0)
+  })
+
   it('should support patchMany', () => {
     subscription = service.patchMany(saved_views).subscribe()
     saved_views.forEach((saved_view) => {

src-ui/src/app/services/rest/saved-view.service.ts

@@ -3,7 +3,6 @@ import { Injectable } from '@angular/core'
 import { combineLatest, Observable } from 'rxjs'
 import { tap } from 'rxjs/operators'
 import { SavedView } from 'src/app/data/saved-view'
-import { PermissionsService } from '../permissions.service'
 import { AbstractPaperlessService } from './abstract-paperless-service'
 import { SettingsService } from '../settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
@@ -12,11 +11,11 @@ import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
   providedIn: 'root',
 })
 export class SavedViewService extends AbstractPaperlessService<SavedView> {
-  loading: boolean
+  public loading: boolean = true
+  private savedViews: SavedView[] = []
 
   constructor(
-    http: HttpClient,
-    permissionService: PermissionsService,
+    protected http: HttpClient,
     private settingsService: SettingsService
   ) {
     super(http, 'saved_views')
@@ -27,16 +26,19 @@ export class SavedViewService extends AbstractPaperlessService<SavedView> {
   }
 
   private reload() {
-    this.loading = true
-    this.listAll().subscribe((r) => {
-      this.savedViews = r.results
-      this.loading = false
-      this.settingsService.dashboardIsEmpty = this.dashboardViews.length === 0
+    this.listAll().subscribe({
+      next: (r) => {
+        this.savedViews = r.results
+        this.loading = false
+        this.settingsService.dashboardIsEmpty = this.dashboardViews.length === 0
+      },
+      error: () => {
+        this.loading = false
+        this.settingsService.dashboardIsEmpty = true
+      },
     })
   }
 
-  private savedViews: SavedView[] = []
-
   get allViews() {
     return this.savedViews
   }