Chorehancement: update to Angular v22, 'zoneless' / 'reactive' (#13114)

src-ui/src/app/components/common/page-header/page-header.component.html

@@ -1,32 +1,32 @@
 <div class="row pt-3 pb-3 pb-md-2 align-items-center">
   <div class="col-md text-truncate">
     <h3 class="d-flex align-items-center mb-1" style="line-height: 1.4">
-      <span class="text-truncate">{{title}}</span>
-      @if (id) {
+      <span class="text-truncate">{{title()}}</span>
+      @if (id()) {
         <span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyID()">
-          @if (copied) {
+          @if (copied()) {
             <i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
           } @else {
-            ID: {{id}}
+            ID: {{id()}}
           }
         </span>
       }
-      @if (subTitle) {
-        <span class="h6 mb-0 mt-1 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle}}</span>
+      @if (subTitle()) {
+        <span class="h6 mb-0 mt-1 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle()}}</span>
       }
-      @if (info) {
+      @if (info()) {
         <button class="btn btn-sm btn-link text-muted p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
           <i-bs name="question-circle"></i-bs>
         </button>
         <ng-template #infoPopover>
-          <p [class.mb-0]="!infoLink" [innerHTML]="info"></p>
-          @if (infoLink) {
-            <a href="https://docs.paperless-ngx.com/{{infoLink}}" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
+          <p [class.mb-0]="!infoLink()" [innerHTML]="info()"></p>
+          @if (infoLink()) {
+            <a href="https://docs.paperless-ngx.com/{{infoLink()}}" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
             <i-bs class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></i-bs>
           }
         </ng-template>
       }
-      @if (loading) {
+      @if (loading()) {
         <output class="spinner-border spinner-border-sm fs-6 fw-normal" aria-hidden="true"><span class="visually-hidden" i18n>Loading...</span></output>
       }
     </h3>

src-ui/src/app/components/common/page-header/page-header.component.spec.ts

@@ -1,6 +1,7 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { Title } from '@angular/platform-browser'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { environment } from 'src/environments/environment'
 import { PageHeaderComponent } from './page-header.component'
 
@@ -13,7 +14,7 @@ describe('PageHeaderComponent', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
       providers: [],
-      imports: [PageHeaderComponent],
+      imports: [NgxBootstrapIconsModule.pick(allIcons), PageHeaderComponent],
     }).compileComponents()
 
     titleService = TestBed.inject(Title)
@@ -23,9 +24,13 @@ describe('PageHeaderComponent', () => {
     fixture.detectChanges()
   })
 
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
   it('should display title + subtitle', () => {
-    component.title = 'Foo'
-    component.subTitle = 'Bar'
+    fixture.componentRef.setInput('title', 'Foo')
+    fixture.componentRef.setInput('subTitle', 'Bar')
     fixture.detectChanges()
     expect(fixture.nativeElement.textContent).toContain('Foo')
     expect(fixture.nativeElement.textContent).toContain('Bar')
@@ -33,19 +38,20 @@ describe('PageHeaderComponent', () => {
 
   it('should set html title', () => {
     const titleSpy = jest.spyOn(titleService, 'setTitle')
-    component.title = 'Foo Bar'
+    fixture.componentRef.setInput('title', 'Foo Bar')
+    fixture.detectChanges()
     expect(titleSpy).toHaveBeenCalledWith(`Foo Bar - ${environment.appTitle}`)
   })
 
   it('should copy id to clipboard, reset after 3 seconds', () => {
     jest.useFakeTimers()
-    component.id = 42 as any
+    fixture.componentRef.setInput('id', 42)
     jest.spyOn(clipboard, 'copy').mockReturnValue(true)
     component.copyID()
     expect(clipboard.copy).toHaveBeenCalledWith('42')
-    expect(component.copied).toBe(true)
+    expect(component.copied()).toBe(true)
 
     jest.advanceTimersByTime(3000)
-    expect(component.copied).toBe(false)
+    expect(component.copied()).toBe(false)
   })
 })

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, Input, inject } from '@angular/core'
+import { Component, effect, inject, input, signal } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -16,40 +16,26 @@ export class PageHeaderComponent {
   private titleService = inject(Title)
   private clipboard = inject(Clipboard)
 
-  private _title = ''
-  public copied: boolean = false
+  readonly id = input<number>(undefined)
+  readonly subTitle = input('')
+  readonly info = input<string>(undefined)
+  readonly infoLink = input<string>(undefined)
+  readonly loading = input(false)
+  readonly title = input('')
+  readonly copied = signal(false)
   private copyTimeout: any
 
-  @Input()
-  set title(title: string) {
-    this._title = title
-    this.titleService.setTitle(`${this.title} - ${environment.appTitle}`)
+  constructor() {
+    effect(() => {
+      this.titleService.setTitle(`${this.title()} - ${environment.appTitle}`)
+    })
   }
 
-  get title() {
-    return this._title
-  }
-
-  @Input()
-  id: number
-
-  @Input()
-  subTitle: string = ''
-
-  @Input()
-  info: string
-
-  @Input()
-  infoLink: string
-
-  @Input()
-  loading: boolean = false
-
   public copyID() {
-    this.copied = this.clipboard.copy(this.id.toString())
+    this.copied.set(this.clipboard.copy(this.id().toString()))
     clearTimeout(this.copyTimeout)
     this.copyTimeout = setTimeout(() => {
-      this.copied = false
+      this.copied.set(false)
     }, 3000)
   }
 }