Fix: separate displayed and API collection sizes for tags (#12170)

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -62,9 +62,9 @@
 
 @if (!loading) {
   <div class="d-flex mb-2">
-    @if (collectionSize > 0) {
+    @if (displayCollectionSize > 0) {
       <div>
-        <ng-container i18n>{collectionSize, plural, =1 {One {{typeName}}} other {{{collectionSize || 0}} total {{typeNamePlural}}}}</ng-container>
+        <ng-container i18n>{displayCollectionSize, plural, =1 {One {{typeName}}} other {{{displayCollectionSize || 0}} total {{typeNamePlural}}}}</ng-container>
         @if (selectedObjects.size > 0) {
           &nbsp;({{selectedObjects.size}} selected)
         }

src-ui/src/app/components/manage/management-list/management-list.component.spec.ts

@@ -229,7 +229,7 @@ describe('ManagementListComponent', () => {
     expect(reloadSpy).toHaveBeenCalled()
   })
 
-  it('should use the all list length for collection size when provided', fakeAsync(() => {
+  it('should use API count for pagination and all ids for displayed total', fakeAsync(() => {
     jest.spyOn(tagService, 'listFiltered').mockReturnValueOnce(
       of({
         count: 1,
@@ -241,7 +241,8 @@ describe('ManagementListComponent', () => {
     component.reloadData()
     tick(100)
 
-    expect(component.collectionSize).toBe(3)
+    expect(component.collectionSize).toBe(1)
+    expect(component.displayCollectionSize).toBe(3)
   }))
 
   it('should support quick filter for objects', () => {

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -23,6 +23,7 @@ import {
   MatchingModel,
 } from 'src/app/data/matching-model'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
+import { Results } from 'src/app/data/results'
 import {
   SortableDirective,
   SortEvent,
@@ -88,6 +89,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
   public page = 1
 
   public collectionSize = 0
+  public displayCollectionSize = 0
 
   public sortField: string
   public sortReverse: boolean
@@ -141,6 +143,14 @@ export abstract class ManagementListComponent<T extends MatchingModel>
     return data
   }
 
+  protected getCollectionSize(results: Results<T>): number {
+    return results.all?.length ?? results.count
+  }
+
+  protected getDisplayCollectionSize(results: Results<T>): number {
+    return this.getCollectionSize(results)
+  }
+
   getDocumentCount(object: MatchingModel): number {
     return (
       object.document_count ??
@@ -171,7 +181,8 @@ export abstract class ManagementListComponent<T extends MatchingModel>
         tap((c) => {
           this.unfilteredData = c.results
           this.data = this.filterData(c.results)
-          this.collectionSize = c.all?.length ?? c.count
+          this.collectionSize = this.getCollectionSize(c)
+          this.displayCollectionSize = this.getDisplayCollectionSize(c)
         }),
         delay(100)
       )

src-ui/src/app/components/manage/tag-list/tag-list.component.ts

@@ -7,6 +7,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
+import { Results } from 'src/app/data/results'
 import { Tag } from 'src/app/data/tag'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
@@ -77,6 +78,16 @@ export class TagListComponent extends ManagementListComponent<Tag> {
     return data.filter((tag) => !tag.parent || !availableIds.has(tag.parent))
   }
 
+  protected override getCollectionSize(results: Results<Tag>): number {
+    // Tag list pages are requested with is_root=true (when unfiltered), so
+    // pagination must follow root count even though `all` includes descendants
+    return results.count
+  }
+
+  protected override getDisplayCollectionSize(results: Results<Tag>): number {
+    return super.getCollectionSize(results)
+  }
+
   protected override getSelectableIDs(tags: Tag[]): number[] {
     const ids: number[] = []
     for (const tag of tags.filter(Boolean)) {