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

src-ui/src/app/components/common/toast/toast.component.html

@@ -34,10 +34,10 @@
                 <div class="row">
                     <div class="col offset-sm-3">
                     <button class="btn btn-sm btn-outline-secondary" (click)="copyError(toast.error)">
-                        @if (!copied) {
+                        @if (!copied()) {
                         <i-bs name="clipboard" class="me-1"></i-bs>
                         }
-                        @if (copied) {
+                        @if (copied()) {
                         <i-bs name="clipboard-check" class="me-1"></i-bs>
                         }
                         <ng-container i18n>Copy Raw Error</ng-container>

src-ui/src/app/components/common/toast/toast.component.spec.ts

@@ -1,11 +1,4 @@
-import {
-  ComponentFixture,
-  discardPeriodicTasks,
-  fakeAsync,
-  flush,
-  TestBed,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { Clipboard } from '@angular/cdk/clipboard'
 import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -48,28 +41,25 @@ describe('ToastComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  it('should countdown toast', fakeAsync(() => {
+  it('should countdown toast', () => {
+    jest.useFakeTimers()
     component.toast = toast2
     fixture.detectChanges()
     component.onShown(toast2)
-    tick(5000)
+    jest.advanceTimersByTime(5000)
     expect(component.toast.delayRemaining).toEqual(0)
-    flush()
-    discardPeriodicTasks()
-  }))
+    jest.useRealTimers()
+  })
 
-  it('should show an error if given with toast', fakeAsync(() => {
+  it('should show an error if given with toast', () => {
     component.toast = toast1
     fixture.detectChanges()
 
     expect(fixture.nativeElement.querySelector('details')).not.toBeNull()
     expect(fixture.nativeElement.textContent).toContain('Error 1 content')
+  })
 
-    flush()
-    discardPeriodicTasks()
-  }))
-
-  it('should show error details, support copy', fakeAsync(() => {
+  it('should show error details, support copy', () => {
     component.toast = toast2
     fixture.detectChanges()
 
@@ -81,10 +71,7 @@ describe('ToastComponent', () => {
     const copySpy = jest.spyOn(clipboard, 'copy')
     component.copyError(toast2.error)
     expect(copySpy).toHaveBeenCalled()
-
-    flush()
-    discardPeriodicTasks()
-  }))
+  })
 
   it('should parse error text, add ellipsis', () => {
     expect(component.getErrorText(toast2.error)).toEqual(

src-ui/src/app/components/common/toast/toast.component.ts

@@ -1,6 +1,13 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { DecimalPipe } from '@angular/common'
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core'
 import {
   NgbProgressbarModule,
   NgbToastModule,
@@ -22,6 +29,7 @@ import { Toast } from 'src/app/services/toast.service'
 })
 export class ToastComponent {
   private clipboard = inject(Clipboard)
+  readonly copied = signal(false)
 
   @Input() toast: Toast
 
@@ -31,8 +39,6 @@ export class ToastComponent {
 
   @Output() closed: EventEmitter<Toast> = new EventEmitter<Toast>()
 
-  public copied: boolean = false
-
   onShown(toast: Toast) {
     if (!this.autohide) return
 
@@ -62,9 +68,9 @@ export class ToastComponent {
 
   public copyError(error: any) {
     this.clipboard.copy(JSON.stringify(error))
-    this.copied = true
+    this.copied.set(true)
     setTimeout(() => {
-      this.copied = false
+      this.copied.set(false)
     }, 3000)
   }