Also for CF

src-ui/src/app/components/manage/custom-fields/custom-fields.component.html

@@ -42,7 +42,13 @@
                 <button (click)="editField(field)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" ngbDropdownItem i18n>Edit</button>
                 <button class="text-danger" (click)="deleteField(field)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" ngbDropdownItem i18n>Delete</button>
                 @if (field.document_count > 0) {
-                  <button (click)="filterDocuments(field)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents ({{ field.document_count }})</button>
+                  <a
+                    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
+                    ngbDropdownItem
+                    [routerLink]="getDocumentFilterUrl(field)"
+                    i18n
+                    >Filter Documents ({{ field.document_count }})</a
+                  >
                 }
               </div>
             </div>
@@ -57,9 +63,13 @@
           </div>
           @if (field.document_count > 0) {
             <div class="btn-group d-none d-sm-inline-block ms-2">
-              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="filterDocuments(field)">
-                <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container><span class="badge bg-light text-secondary ms-2">{{ field.document_count }}</span>
-              </button>
+              <a
+                class="btn btn-sm btn-outline-secondary"
+                [routerLink]="getDocumentFilterUrl(field)"
+              >
+                <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container
+                ><span class="badge bg-light text-secondary ms-2">{{ field.document_count }}</span>
+              </a>
             </div>
           }
         </div>

src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts

@@ -4,6 +4,7 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
+import { RouterTestingModule } from '@angular/router/testing'
 import {
   NgbModal,
   NgbModalModule,
@@ -61,6 +62,7 @@ describe('CustomFieldsComponent', () => {
         NgbModalModule,
         NgbPopoverModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        RouterTestingModule,
         CustomFieldsComponent,
         IfPermissionsDirective,
         PageHeaderComponent,
@@ -108,7 +110,9 @@ describe('CustomFieldsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const createButton = fixture.debugElement.queryAll(By.css('button'))[1]
+    const createButton = fixture.debugElement
+      .queryAll(By.css('button'))
+      .find((btn) => btn.nativeElement.textContent.trim().includes('Add Field'))
     createButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -133,7 +137,11 @@ describe('CustomFieldsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const editButton = fixture.debugElement.queryAll(By.css('button'))[2]
+    const editButton = fixture.debugElement
+      .queryAll(By.css('button'))
+      .find((btn) =>
+        btn.nativeElement.textContent.trim().includes(fields[0].name)
+      )
     editButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -158,7 +166,9 @@ describe('CustomFieldsComponent', () => {
     const deleteSpy = jest.spyOn(customFieldsService, 'delete')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[5]
+    const deleteButton = fixture.debugElement
+      .queryAll(By.css('button'))
+      .find((btn) => btn.nativeElement.textContent.trim().includes('Delete'))
     deleteButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -176,10 +186,10 @@ describe('CustomFieldsComponent', () => {
     expect(reloadSpy).toHaveBeenCalled()
   })
 
-  it('should support filter documents', () => {
-    const filterSpy = jest.spyOn(listViewService, 'quickFilter')
-    component.filterDocuments(fields[0])
-    expect(filterSpy).toHaveBeenCalledWith([
+  it('should provide document filter url', () => {
+    const urlSpy = jest.spyOn(listViewService, 'getQuickFilterUrl')
+    component.getDocumentFilterUrl(fields[0])
+    expect(urlSpy).toHaveBeenCalledWith([
       {
         rule_type: FILTER_CUSTOM_FIELDS_QUERY,
         value: JSON.stringify([

src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, inject } from '@angular/core'
+import { RouterModule } from '@angular/router'
 import {
   NgbDropdownModule,
   NgbModal,
@@ -36,6 +37,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
     NgbDropdownModule,
     NgbPaginationModule,
     NgxBootstrapIconsModule,
+    RouterModule,
   ],
 })
 export class CustomFieldsComponent
@@ -130,8 +132,8 @@ export class CustomFieldsComponent
     return DATA_TYPE_LABELS.find((l) => l.id === field.data_type).name
   }
 
-  filterDocuments(field: CustomField) {
-    this.documentListViewService.quickFilter([
+  getDocumentFilterUrl(field: CustomField) {
+    return this.documentListViewService.getQuickFilterUrl([
       {
         rule_type: FILTER_CUSTOM_FIELDS_QUERY,
         value: JSON.stringify([