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

src-ui/src/app/components/manage/workflows/workflows.component.html

@@ -22,16 +22,16 @@
     </div>
   </li>
 
-  @if (loading && workflows.length === 0) {
+  @if (loading() && workflows().length === 0) {
     <li class="list-group-item">
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>
     </li>
   }
 
-  @for (workflow of workflows; track workflow.id) {
+  @for (workflow of workflows(); track workflow.id) {
     <li class="list-group-item">
-      <div class="row fade" [class.show]="show">
+      <div class="row fade" [class.show]="show()">
         <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editWorkflow(workflow)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Workflow)">{{workflow.name}}</button></div>
         <div class="col d-flex align-items-center d-none d-sm-flex"><code>{{workflow.order}}</code></div>
         <div class="col d-flex align-items-center">
@@ -76,7 +76,7 @@
       </div>
     </li>
   }
-  @if (!loading && workflows.length === 0) {
-    <li class="list-group-item" [class.show]="show" i18n>No workflows defined.</li>
+  @if (!loading() && workflows().length === 0) {
+    <li class="list-group-item" [class.show]="show()" i18n>No workflows defined.</li>
   }
 </ul>

src-ui/src/app/components/manage/workflows/workflows.component.spec.ts

@@ -183,7 +183,7 @@ describe('WorkflowsComponent', () => {
     expect(modal).not.toBeUndefined()
     const editDialog = modal.componentInstance as WorkflowEditDialogComponent
     expect(editDialog.object.name).toEqual(workflows[0].name + ' (copy)')
-    expect(editDialog.dialogMode).toEqual(EditDialogMode.CREATE)
+    expect(editDialog.dialogMode()).toEqual(EditDialogMode.CREATE)
   })
 
   it('should null ids on copy', () => {

src-ui/src/app/components/manage/workflows/workflows.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { delay, takeUntil, tap } from 'rxjs'
+import { takeUntil, tap } from 'rxjs'
 import { Workflow } from 'src/app/data/workflow'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsService } from 'src/app/services/permissions.service'
@@ -39,24 +39,23 @@ export class WorkflowsComponent
   private modalService = inject(NgbModal)
   private toastService = inject(ToastService)
 
-  public workflows: Workflow[] = []
+  readonly workflows = signal<Workflow[]>([])
 
   ngOnInit() {
     this.reload()
   }
 
   reload() {
-    this.loading = true
+    this.loading.set(true)
     this.workflowService
       .listAll()
       .pipe(
         takeUntil(this.unsubscribeNotifier),
-        tap((r) => (this.workflows = r.results)),
-        delay(100)
+        tap((r) => this.workflows.set(r.results))
       )
       .subscribe(() => {
-        this.show = true
-        this.loading = false
+        this.show.set(true)
+        this.loading.set(false)
       })
   }
 
@@ -74,8 +73,9 @@ export class WorkflowsComponent
       backdrop: 'static',
       size: 'xl',
     })
-    modal.componentInstance.dialogMode =
+    modal.componentInstance.dialogMode.set(
       workflow && !forceCreate ? EditDialogMode.EDIT : EditDialogMode.CREATE
+    )
     if (workflow) {
       // quick "deep" clone so original doesn't get modified
       const clone = Object.assign({}, workflow)