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

src-ui/src/app/components/common/preview-popup/preview-popup.component.html

@@ -1,28 +1,28 @@
 <a [href]="link ?? previewUrl" class="{{linkClasses}}" [target]="linkTarget" [title]="linkTitle"
   [ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle" container="body"
-  autoClose="true" [popoverClass]="popoverClass" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
+  autoClose="true" [popoverClass]="popoverClass()" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
   <ng-content></ng-content>
 </a>
 <ng-template #previewContent>
   <div class="preview-popup-container" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview(); close()">
-    @if (error) {
+    @if (error()) {
       <div class="w-100 h-100 position-relative">
         <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>
       </div>
     } @else {
       @if (renderAsObject) {
-        @if (previewText) {
-          <div class="bg-light p-3 overflow-auto whitespace-preserve" width="100%">{{previewText}}</div>
+        @if (previewText()) {
+          <div class="bg-light p-3 overflow-auto whitespace-preserve" width="100%">{{previewText()}}</div>
         } @else {
           <object [data]="previewUrl | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf"></object>
         }
       } @else {
-        @if (requiresPassword) {
+        @if (requiresPassword()) {
           <div class="w-100 h-100 position-relative">
             <i-bs width="2em" height="2em" class="position-absolute top-50 start-50 translate-middle" name="file-earmark-lock"></i-bs>
           </div>
         }
-        @if (!requiresPassword) {
+        @if (!requiresPassword()) {
           <pngx-pdf-viewer
             [src]="previewUrl"
             [renderMode]="PdfRenderMode.All"

src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts

@@ -87,7 +87,7 @@ describe('PreviewPopupComponent', () => {
     component.popover.open()
     component.onError({ name: 'PasswordException' })
     fixture.detectChanges()
-    expect(component.requiresPassword).toBeTruthy()
+    expect(component.requiresPassword()).toBeTruthy()
     expect(fixture.debugElement.query(By.css('i-bs'))).not.toBeNull()
   })
 
@@ -121,16 +121,18 @@ describe('PreviewPopupComponent', () => {
     )
     component.init()
     expect(httpSpy).toHaveBeenCalled()
-    expect(component.error).toBeTruthy()
+    expect(component.error()).toBeTruthy()
     httpSpy.mockReturnValueOnce(of('Preview text'))
     component.init()
-    expect(component.previewText).toEqual('Preview text')
+    expect(component.previewText()).toEqual('Preview text')
   })
 
   it('should show preview on mouseover after delay to preload content', () => {
     component.mouseEnterPreview()
     expect(component.popover.isOpen()).toBeTruthy()
+    expect(component.popoverClass()).toContain('opacity-0')
     jest.advanceTimersByTime(600)
+    expect(component.popoverClass()).not.toContain('opacity-0')
     component.close()
     jest.advanceTimersByTime(600)
   })

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -1,5 +1,12 @@
 import { HttpClient } from '@angular/common/http'
-import { Component, inject, Input, OnDestroy, ViewChild } from '@angular/core'
+import {
+  Component,
+  inject,
+  Input,
+  OnDestroy,
+  signal,
+  ViewChild,
+} from '@angular/core'
 import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, Subject, takeUntil } from 'rxjs'
@@ -55,17 +62,17 @@ export class PreviewPopupComponent implements OnDestroy {
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
-  error = false
+  readonly error = signal(false)
 
-  requiresPassword: boolean = false
+  readonly requiresPassword = signal(false)
 
-  previewText: string
+  readonly previewText = signal<string>(null)
 
   @ViewChild('popover') popover: NgbPopover
 
-  mouseOnPreview: boolean = false
+  readonly mouseOnPreview = signal(false)
 
-  popoverClass: string = 'shadow popover-preview'
+  readonly popoverClass = signal('shadow popover-preview')
 
   get renderAsObject(): boolean {
     return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
@@ -97,10 +104,10 @@ export class PreviewPopupComponent implements OnDestroy {
         .pipe(first(), takeUntil(this.unsubscribeNotifier))
         .subscribe({
           next: (res) => {
-            this.previewText = res.toString()
+            this.previewText.set(res.toString())
           },
           error: (err) => {
-            this.error = err
+            this.error.set(err)
           },
         })
     }
@@ -108,22 +115,24 @@ export class PreviewPopupComponent implements OnDestroy {
 
   onError(event: any) {
     if (event.name == 'PasswordException') {
-      this.requiresPassword = true
+      this.requiresPassword.set(true)
     } else {
-      this.error = true
+      this.error.set(true)
     }
   }
 
   mouseEnterPreview() {
-    this.mouseOnPreview = true
+    this.mouseOnPreview.set(true)
     if (!this.popover.isOpen()) {
       // we're going to open but hide to pre-load content during hover delay
       this.popover.open()
-      this.popoverClass = 'shadow popover-preview pe-none opacity-0'
+      this.popoverClass.set('shadow popover-preview pe-none opacity-0')
       setTimeout(() => {
-        if (this.mouseOnPreview) {
+        if (this.mouseOnPreview()) {
           // show popover
-          this.popoverClass = this.popoverClass.replace('pe-none opacity-0', '')
+          this.popoverClass.set(
+            this.popoverClass().replace('pe-none opacity-0', '')
+          )
         } else {
           this.popover.close(true)
         }
@@ -132,13 +141,13 @@ export class PreviewPopupComponent implements OnDestroy {
   }
 
   mouseLeavePreview() {
-    this.mouseOnPreview = false
+    this.mouseOnPreview.set(false)
   }
 
   public close(immediate: boolean = false) {
     setTimeout(
       () => {
-        if (!this.mouseOnPreview) this.popover.close()
+        if (!this.mouseOnPreview()) this.popover.close()
       },
       immediate ? 0 : 300
     )