Merge branch 'dev' into feature-pw-removal-workflow-action

2026-01-12 21:44:21 -06:00 · 2026-01-09 20:45:05 -08:00
parent 02e590c70c 07eb3c4761
commit f596294e1f
55 changed files with 4084 additions and 3908 deletions
--- a/src-ui/angular.json
+++ b/src-ui/angular.json
@@ -156,16 +156,7 @@
          "builder": "@angular-builders/jest:run",
          "options": {
            "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/apple-touch-icon.png",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
+            "zoneless": false
          }
        },
        "lint": {
--- a/src-ui/jest.config.js
+++ b/src-ui/jest.config.js
@@ -1,5 +1,23 @@
+const { createEsmPreset } = require('jest-preset-angular/presets')
+
+const esmPreset = createEsmPreset({
+  tsconfig: '<rootDir>/tsconfig.spec.json',
+  stringifyContentPathRegex: '\\.(html|svg)$',
+})
+
 module.exports = {
-  preset: 'jest-preset-angular',
+  ...esmPreset,
+  transform: {
+    ...esmPreset.transform,
+    '^.+\\.(ts|js|mjs|html|svg)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+        useESM: true,
+      },
+    ],
+  },
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  testPathIgnorePatterns: [
    '/node_modules/',
@@ -8,9 +26,10 @@ module.exports = {
    'abstract-paperless-service',
  ],
  transformIgnorePatterns: [
-    `<rootDir>/node_modules/.pnpm/(?!.*\\.mjs$|lodash-es|@angular\\+common.*locales)`,
+    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|@angular/common/locales/.*\\.js$))',
  ],
  moduleNameMapper: {
+    ...esmPreset.moduleNameMapper,
    '^src/(.*)': '<rootDir>/src/$1',
  },
  workerIdleMemoryLimit: '512MB',
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
--- a/src-ui/package.json
+++ b/src-ui/package.json
@@ -11,17 +11,17 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/cdk": "^20.2.13",
-    "@angular/common": "~20.3.15",
-    "@angular/compiler": "~20.3.15",
-    "@angular/core": "~20.3.15",
-    "@angular/forms": "~20.3.15",
-    "@angular/localize": "~20.3.15",
-    "@angular/platform-browser": "~20.3.15",
-    "@angular/platform-browser-dynamic": "~20.3.15",
-    "@angular/router": "~20.3.15",
-    "@ng-bootstrap/ng-bootstrap": "^19.0.1",
-    "@ng-select/ng-select": "^20.7.0",
+    "@angular/cdk": "^21.0.6",
+    "@angular/common": "~21.0.8",
+    "@angular/compiler": "~21.0.8",
+    "@angular/core": "~21.0.8",
+    "@angular/forms": "~21.0.8",
+    "@angular/localize": "~21.0.8",
+    "@angular/platform-browser": "~21.0.8",
+    "@angular/platform-browser-dynamic": "~21.0.8",
+    "@angular/router": "~21.0.8",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
+    "@ng-select/ng-select": "^21.1.4",
    "@ngneat/dirty-check-forms": "^3.0.3",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.8",
@@ -30,8 +30,8 @@
    "ng2-pdf-viewer": "^10.4.0",
    "ngx-bootstrap-icons": "^1.9.3",
    "ngx-color": "^10.1.0",
-    "ngx-cookie-service": "^20.1.1",
-    "ngx-device-detector": "^10.1.0",
+    "ngx-cookie-service": "^21.1.0",
+    "ngx-device-detector": "^11.0.0",
    "ngx-ui-tour-ng-bootstrap": "^17.0.1",
    "rxjs": "^7.8.2",
    "tslib": "^2.8.1",
@@ -40,18 +40,18 @@
    "zone.js": "^0.15.1"
  },
  "devDependencies": {
-    "@angular-builders/custom-webpack": "^20.0.0",
-    "@angular-builders/jest": "^20.0.0",
-    "@angular-devkit/core": "^20.3.13",
-    "@angular-devkit/schematics": "^20.3.13",
-    "@angular-eslint/builder": "20.6.0",
-    "@angular-eslint/eslint-plugin": "20.6.0",
-    "@angular-eslint/eslint-plugin-template": "20.6.0",
-    "@angular-eslint/schematics": "20.6.0",
-    "@angular-eslint/template-parser": "20.6.0",
-    "@angular/build": "^20.3.13",
-    "@angular/cli": "~20.3.13",
-    "@angular/compiler-cli": "~20.3.15",
+    "@angular-builders/custom-webpack": "^21.0.0-beta.1",
+    "@angular-builders/jest": "^21.0.0-beta.1",
+    "@angular-devkit/core": "^21.0.5",
+    "@angular-devkit/schematics": "^21.0.5",
+    "@angular-eslint/builder": "21.1.0",
+    "@angular-eslint/eslint-plugin": "21.1.0",
+    "@angular-eslint/eslint-plugin-template": "21.1.0",
+    "@angular-eslint/schematics": "21.1.0",
+    "@angular-eslint/template-parser": "21.1.0",
+    "@angular/build": "^21.0.5",
+    "@angular/cli": "~21.0.5",
+    "@angular/compiler-cli": "~21.0.8",
    "@codecov/webpack-plugin": "^1.9.1",
    "@playwright/test": "^1.57.0",
    "@types/jest": "^30.0.0",
@@ -63,11 +63,11 @@
    "jest": "30.2.0",
    "jest-environment-jsdom": "^30.2.0",
    "jest-junit": "^16.0.0",
-    "jest-preset-angular": "^15.0.3",
+    "jest-preset-angular": "^16.0.0",
    "jest-websocket-mock": "^2.5.0",
    "prettier-plugin-organize-imports": "^4.3.0",
    "ts-node": "~10.9.1",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.3",
    "webpack": "^5.103.0"
  },
  "packageManager": "pnpm@10.17.1",
--- a/src-ui/pnpm-lock.yaml
+++ b/src-ui/pnpm-lock.yaml
--- a/src-ui/src/app/components/file-drop/file-drop.component.ts
+++ b/src-ui/src/app/components/file-drop/file-drop.component.ts
@@ -150,12 +150,11 @@ export class FileDropComponent {
    this.onDragLeave(event, true)
  }

-  @HostListener('window:blur', ['$event']) public onWindowBlur() {
+  @HostListener('window:blur') public onWindowBlur() {
    if (this.fileIsOver) this.onDragLeave(null)
  }

-  @HostListener('document:visibilitychange', ['$event'])
-  public onVisibilityChange() {
+  @HostListener('document:visibilitychange') public onVisibilityChange() {
    if (document.hidden && this.fileIsOver) this.onDragLeave(null)
  }
 }
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
@@ -1,6 +1,7 @@
 import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import {
  NgbDropdownModule,
  NgbPaginationModule,
@@ -29,6 +30,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    TitleCasePipe,
    FormsModule,
    ReactiveFormsModule,
+    RouterModule,
    NgClass,
    NgTemplateOutlet,
    NgbDropdownModule,
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
+++ b/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>
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts
+++ b/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([
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts
+++ b/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([
--- a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
+++ b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
@@ -1,6 +1,7 @@
 import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import {
  NgbDropdownModule,
  NgbPaginationModule,
@@ -27,6 +28,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    IfPermissionsDirective,
    FormsModule,
    ReactiveFormsModule,
+    RouterModule,
    NgClass,
    NgTemplateOutlet,
    NgbDropdownModule,
--- a/src-ui/src/app/components/manage/management-list/management-list.component.html
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.html
@@ -120,7 +120,14 @@
              <button (click)="openEditDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" ngbDropdownItem i18n>Edit</button>
              <button class="text-danger" (click)="openDeleteDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" ngbDropdownItem i18n>Delete</button>
              @if (getDocumentCount(object) > 0) {
-                <button (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents ({{ getDocumentCount(object) }})</button>
+                  <a
+                    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
+                    ngbDropdownItem
+                    [routerLink]="getDocumentFilterUrl(object)"
+                    (click)="$event?.stopPropagation()"
+                    i18n
+                    >Filter Documents ({{ getDocumentCount(object) }})</a
+                  >
              }
            </div>
          </div>
@@ -135,9 +142,15 @@
        </div>
        @if (getDocumentCount(object) > 0) {
          <div class="btn-group d-none d-sm-inline-block">
-            <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-              <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">{{ getDocumentCount(object) }}</span>
-            </button>
+            <a
+              class="btn btn-sm btn-outline-secondary"
+              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
+              [routerLink]="getDocumentFilterUrl(object)"
+              (click)="$event?.stopPropagation()"
+            >
+              <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">{{ getDocumentCount(object) }}</span>
+            </a>
          </div>
        }
      </div>
--- a/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts
@@ -13,6 +13,7 @@ import {
 } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
+import { RouterLinkWithHref } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
  NgbModal,
@@ -230,12 +231,15 @@ describe('ManagementListComponent', () => {
  })

  it('should support quick filter for objects', () => {
-    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
-    const filterButton = fixture.debugElement.queryAll(By.css('button'))[9]
-    filterButton.triggerEventHandler('click')
-    expect(qfSpy).toHaveBeenCalledWith([
+    const expectedUrl = documentListViewService.getQuickFilterUrl([
      { rule_type: FILTER_HAS_TAGS_ALL, value: tags[0].id.toString() },
-    ]) // subclasses set the filter rule type
+    ])
+    const filterLink = fixture.debugElement.query(
+      By.css('a.btn-outline-secondary')
+    )
+    expect(filterLink).toBeTruthy()
+    const routerLink = filterLink.injector.get(RouterLinkWithHref)
+    expect(routerLink.urlTree).toEqual(expectedUrl)
  })

  it('should reload on sort', () => {
--- a/src-ui/src/app/components/manage/management-list/management-list.component.ts
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.ts
@@ -230,8 +230,8 @@ export abstract class ManagementListComponent<T extends MatchingModel>

  abstract getDeleteMessage(object: T)

-  filterDocuments(object: MatchingModel) {
-    this.documentListViewService.quickFilter([
+  getDocumentFilterUrl(object: MatchingModel) {
+    return this.documentListViewService.getQuickFilterUrl([
      { rule_type: this.filterRuleType, value: object.id.toString() },
    ])
  }
--- a/src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts
+++ b/src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts
@@ -1,6 +1,7 @@
 import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import {
  NgbDropdownModule,
  NgbPaginationModule,
@@ -27,6 +28,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    IfPermissionsDirective,
    FormsModule,
    ReactiveFormsModule,
+    RouterModule,
    NgClass,
    NgTemplateOutlet,
    NgbDropdownModule,
--- a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
+++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
@@ -1,6 +1,7 @@
 import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import {
  NgbDropdownModule,
  NgbPaginationModule,
@@ -27,6 +28,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    IfPermissionsDirective,
    FormsModule,
    ReactiveFormsModule,
+    RouterModule,
    NgClass,
    NgTemplateOutlet,
    NgbDropdownModule,
--- a/src-ui/src/app/services/document-list-view.service.spec.ts
+++ b/src-ui/src/app/services/document-list-view.service.spec.ts
@@ -651,4 +651,25 @@ describe('DocumentListViewService', () => {
    documentListViewService.displayFields = customFields as any
    expect(documentListViewService.displayFields).toEqual(['custom_field_1'])
  })
+
+  it('should generate quick filter URL with filter rules', () => {
+    const routerSpy = jest.spyOn(router, 'createUrlTree')
+    const urlTree = documentListViewService.getQuickFilterUrl(filterRules)
+    expect(routerSpy).toHaveBeenCalledWith(['/documents'], {
+      queryParams: expect.objectContaining({
+        tags__id__all: tags__id__all,
+      }),
+    })
+    expect(urlTree).toBeDefined()
+  })
+
+  it('should generate quick filter URL preserving default state', () => {
+    documentListViewService.reload()
+    httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true`
+    )
+    const urlTree = documentListViewService.getQuickFilterUrl(filterRules)
+    expect(urlTree).toBeDefined()
+    expect(router.createUrlTree).toBeDefined()
+  })
 })
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -1,5 +1,5 @@
 import { Injectable, inject } from '@angular/core'
-import { ParamMap, Router } from '@angular/router'
+import { ParamMap, Router, UrlTree } from '@angular/router'
 import { Observable, Subject, first, takeUntil } from 'rxjs'
 import {
  DEFAULT_DISPLAY_FIELDS,
@@ -483,6 +483,18 @@ export class DocumentListViewService {
    this.router.navigate(['documents'])
  }

+  getQuickFilterUrl(filterRules: FilterRule[]): UrlTree {
+    const defaultState = {
+      ...this.defaultListViewState(),
+      ...this.listViewStates.get(null),
+      filterRules,
+    }
+    const params = paramsFromViewState(defaultState)
+    return this.router.createUrlTree(['/documents'], {
+      queryParams: params,
+    })
+  }
+
  getLastPage(): number {
    return Math.ceil(this.collectionSize / this.pageSize)
  }
--- a/src-ui/src/main.ts
+++ b/src-ui/src/main.ts
@@ -2,6 +2,7 @@ import {
  APP_INITIALIZER,
  enableProdMode,
  importProvidersFrom,
+  provideZoneChangeDetection,
 } from '@angular/core'

 import { DragDropModule } from '@angular/cdk/drag-drop'
@@ -363,6 +364,7 @@ if (environment.production) {

 bootstrapApplication(AppComponent, {
  providers: [
+    provideZoneChangeDetection(),
    importProvidersFrom(
      BrowserModule,
      AppRoutingModule,
--- a/src-ui/tsconfig.spec.json
+++ b/src-ui/tsconfig.spec.json
@@ -6,9 +6,11 @@
      "jest",
      "node",
    ],
-    "module": "commonjs",
-    "emitDecoratorMetadata": true,
-    "allowJs": true
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "emitDecoratorMetadata": false,
+    "allowJs": true,
+    "isolatedModules": true
  },
  "files": [
    "src/polyfills.ts"