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

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.html

@@ -1,5 +1,5 @@
 <div class="modal-header">
-  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <h4 class="modal-title" id="modal-basic-title">{{title()}}</h4>
   <button type="button" class="btn-close" aria-label="Close" (click)="cancelClicked()">
   </button>
 </div>
@@ -7,7 +7,7 @@
 
   <form [formGroup]="form">
     <div class="form-group">
-      <pngx-permissions-form [users]="users" formControlName="permissions_form"></pngx-permissions-form>
+      <pngx-permissions-form [users]="users()" formControlName="permissions_form"></pngx-permissions-form>
     </div>
     <div class="form-group mt-4">
       <div class="offset-lg-3 row">
@@ -16,18 +16,18 @@
     </div>
   </form>
 
-  @if (note) {
+  @if (note()) {
     <div class="small text-muted fst-italic mt-2">
-      {{ note }}
+      {{ note() }}
     </div>
   }
 
 </div>
 <div class="modal-footer">
-  @if (!buttonsEnabled) {
+  @if (!buttonsEnabled()) {
     <div class="spinner-border spinner-border-sm me-2" role="status"></div>
     <span class="visually-hidden" i18n>Loading...</span>
   }
-  <button type="button" class="btn btn-outline-primary" (click)="cancelClicked()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
-  <button type="button" class="btn btn-primary" (click)="confirm()" [disabled]="!buttonsEnabled" i18n>Confirm</button>
+  <button type="button" class="btn btn-outline-primary" (click)="cancelClicked()" [disabled]="!buttonsEnabled()" i18n>Cancel</button>
+  <button type="button" class="btn btn-primary" (click)="confirm()" [disabled]="!buttonsEnabled()" i18n>Confirm</button>
 </div>

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.spec.ts

@@ -109,7 +109,7 @@ describe('PermissionsDialogComponent', () => {
       permissions: set_permissions.set_permissions,
     }
     component.object = obj
-    expect(component.title).toEqual(`Edit permissions for ${obj.name}`)
+    expect(component.title()).toEqual(`Edit permissions for ${obj.name}`)
     expect(component.permissions).toEqual(set_permissions)
   })
 

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.ts

@@ -1,4 +1,12 @@
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   FormControl,
   FormGroup,
@@ -6,6 +14,7 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { map } from 'rxjs'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
 import { User } from 'src/app/data/user'
 import { UserService } from 'src/app/services/rest/user.service'
@@ -27,26 +36,22 @@ export class PermissionsDialogComponent {
   activeModal = inject(NgbActiveModal)
   private userService = inject(UserService)
 
-  users: User[]
+  readonly users = toSignal(
+    this.userService.listAll().pipe(map((r) => r.results)),
+    { initialValue: undefined as User[] }
+  )
+  readonly title = signal($localize`Set permissions`)
+  readonly note = signal<string>(null)
+  readonly buttonsEnabled = signal(true)
   private o: ObjectWithPermissions = undefined
 
-  constructor() {
-    this.userService.listAll().subscribe((r) => (this.users = r.results))
-  }
-
   @Output()
   public confirmClicked = new EventEmitter()
 
-  @Input()
-  title = $localize`Set permissions`
-
-  @Input()
-  note: string = null
-
   @Input()
   set object(o: ObjectWithPermissions) {
     this.o = o
-    this.title = $localize`Edit permissions for ` + o['name']
+    this.title.set($localize`Edit permissions for ` + o['name'])
     this.form.patchValue({
       merge: true,
       permissions_form: {
@@ -65,8 +70,6 @@ export class PermissionsDialogComponent {
     merge: new FormControl(true),
   })
 
-  buttonsEnabled: boolean = true
-
   get permissions() {
     return {
       owner: this.form.get('permissions_form').value?.owner ?? null,