Enhancement: display saved view counts (#10246)

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

@@ -112,7 +112,14 @@
                     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>
+                    <i-bs class="me-1" name="funnel"></i-bs><span>&nbsp;{{view.name}}
+                      @if (showSidebarCounts && !slimSidebarEnabled) {
+                        <span><span class="badge bg-info text-dark ms-2 d-inline">{{ savedViewService.getDocumentCount(view) }}</span></span>
+                      }
+                    </span>
+                    @if (showSidebarCounts && slimSidebarEnabled) {
+                      <span class="badge bg-info text-dark position-absolute top-0 end-0 d-none d-md-block">{{ savedViewService.getDocumentCount(view) }}</span>
+                    }
                   </a>
                   @if (settingsService.organizingSidebarSavedViews) {
                     <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>

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

@@ -92,6 +92,7 @@ describe('AppFrameComponent', () => {
   let router: Router
   let savedViewSpy
   let modalService: NgbModal
+  let maybeRefreshSpy
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -113,7 +114,11 @@ describe('AppFrameComponent', () => {
         {
           provide: SavedViewService,
           useValue: {
-            reload: () => {},
+            reload: (fn: any) => {
+              if (fn) {
+                fn()
+              }
+            },
             listAll: () =>
               of({
                 all: [saved_views.map((v) => v.id)],
@@ -121,6 +126,8 @@ describe('AppFrameComponent', () => {
                 results: saved_views,
               }),
             sidebarViews: saved_views.filter((v) => v.show_in_sidebar),
+            getDocumentCount: (view: SavedView) => 5,
+            maybeRefreshDocumentCounts: () => {},
           },
         },
         PermissionsService,
@@ -169,6 +176,7 @@ describe('AppFrameComponent', () => {
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
 
     savedViewSpy = jest.spyOn(savedViewService, 'reload')
+    maybeRefreshSpy = jest.spyOn(savedViewService, 'maybeRefreshDocumentCounts')
 
     fixture = TestBed.createComponent(AppFrameComponent)
     component = fixture.componentInstance
@@ -359,4 +367,8 @@ describe('AppFrameComponent', () => {
     expect(toastErrorSpy).toHaveBeenCalledTimes(2)
     expect(toastInfoSpy).toHaveBeenCalledTimes(3)
   })
+
+  it('should call maybeRefreshDocumentCounts after saved views reload', () => {
+    expect(maybeRefreshSpy).toHaveBeenCalled()
+  })
 })

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

@@ -102,7 +102,9 @@ export class AppFrameComponent
         PermissionType.SavedView
       )
     ) {
-      this.savedViewService.reload()
+      this.savedViewService.reload(() => {
+        this.savedViewService.maybeRefreshDocumentCounts()
+      })
     }
   }
 
@@ -283,4 +285,8 @@ export class AppFrameComponent
   onLogout() {
     this.openDocumentsService.closeAll()
   }
+
+  get showSidebarCounts(): boolean {
+    return this.settingsService.get(SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT)
+  }
 }