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

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html

@@ -1,24 +1,24 @@
 <form [formGroup]="saveViewConfigForm" (ngSubmit)="save()">
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title" i18n>Save current view</h4>
-    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    <button type="button" [disabled]="!closeEnabled()" class="btn-close" aria-label="Close" (click)="cancel()">
     </button>
   </div>
   <div class="modal-body">
-    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
+    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error()?.name" autocomplete="off"></pngx-input-text>
     <pngx-input-check i18n-title title="Show in sidebar" formControlName="showInSideBar"></pngx-input-check>
     <pngx-input-check i18n-title title="Show on dashboard" formControlName="showOnDashboard"></pngx-input-check>
     <pngx-permissions-form accordion="true" formControlName="permissions_form"></pngx-permissions-form>
-    @if (error?.filter_rules) {
+    @if (error()?.filter_rules) {
       <div class="alert alert-danger" role="alert">
         <h6 class="alert-heading" i18n>Filter rules error occurred while saving this view</h6>
         <ng-container i18n>The error returned was</ng-container>:<br/>
-        {{ error.filter_rules }}
+        {{ error().filter_rules }}
       </div>
     }
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="!buttonsEnabled">Cancel</button>
-    <button type="submit" class="btn btn-primary" i18n [disabled]="!buttonsEnabled">Save</button>
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="!buttonsEnabled()">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="!buttonsEnabled()">Save</button>
   </div>
 </form>

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.spec.ts

@@ -1,9 +1,4 @@
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import { NgbActiveModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
@@ -22,8 +17,8 @@ describe('SaveViewConfigDialogComponent', () => {
   let fixture: ComponentFixture<SaveViewConfigDialogComponent>
   let modal: NgbActiveModal
 
-  beforeEach(fakeAsync(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       providers: [
         NgbActiveModal,
         {
@@ -56,16 +51,16 @@ describe('SaveViewConfigDialogComponent', () => {
     fixture = TestBed.createComponent(SaveViewConfigDialogComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
-    tick()
-  }))
+    await fixture.whenStable()
+  })
 
   it('should support default name', () => {
     const name = 'Tag: Inbox'
     let result
     component.saveClicked.subscribe((saveResult) => (result = saveResult))
-    component.defaultName = name
+    component.setDefaultName(name)
     component.save()
-    expect(component.defaultName).toEqual(name)
+    expect(component.defaultName()).toEqual(name)
     expect(result).toEqual({
       name,
       showInSideBar: false,

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts

@@ -1,10 +1,10 @@
 import {
   Component,
   EventEmitter,
-  Input,
   OnInit,
   Output,
   inject,
+  signal,
 } from '@angular/core'
 import {
   FormControl,
@@ -32,29 +32,18 @@ import { TextComponent } from '../../common/input/text/text.component'
 })
 export class SaveViewConfigDialogComponent implements OnInit {
   private modal = inject(NgbActiveModal)
+  readonly error = signal(undefined)
+  readonly buttonsEnabled = signal(true)
+  readonly defaultName = signal('')
+  readonly closeEnabled = signal(false)
 
   @Output()
   public saveClicked = new EventEmitter()
 
-  @Input()
-  error
-
-  @Input()
-  buttonsEnabled = true
-
-  closeEnabled = false
-
   users: User[]
 
-  _defaultName = ''
-
-  get defaultName() {
-    return this._defaultName
-  }
-
-  @Input()
-  set defaultName(value: string) {
-    this._defaultName = value
+  setDefaultName(value: string) {
+    this.defaultName.set(value)
     this.saveViewConfigForm.patchValue({ name: value })
   }
 
@@ -68,7 +57,7 @@ export class SaveViewConfigDialogComponent implements OnInit {
   ngOnInit(): void {
     // wait to enable close button so it doesn't steal focus from input since its the first clickable element in the DOM
     setTimeout(() => {
-      this.closeEnabled = true
+      this.closeEnabled.set(true)
     })
   }