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

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.html

@@ -1,6 +1,6 @@
 <div class="btn-group">
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="clickSuggest()" [disabled]="disabled || loading || (suggestions && !aiEnabled)">
-    @if (loading) {
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="clickSuggest()" [disabled]="disabled() || loading() || (suggestions() && !aiEnabled())">
+    @if (loading()) {
       <div class="spinner-border spinner-border-sm" role="status"></div>
     } @else {
       <i-bs width="1.2em" height="1.2em" name="stars"></i-bs>
@@ -11,34 +11,34 @@
     }
   </button>
 
-  @if (aiEnabled) {
+  @if (aiEnabled()) {
     <div class="btn-group" ngbDropdown #dropdown="ngbDropdown" [popperOptions]="popperOptions">
-      <button type="button" class="btn btn-sm btn-outline-primary" ngbDropdownToggle [disabled]="disabled || loading || !suggestions" aria-expanded="false" aria-controls="suggestionsDropdown" aria-label="Suggestions dropdown">
+      <button type="button" class="btn btn-sm btn-outline-primary" ngbDropdownToggle [disabled]="disabled() || loading() || !suggestions()" aria-expanded="false" aria-controls="suggestionsDropdown" aria-label="Suggestions dropdown">
         <span class="visually-hidden" i18n>Show suggestions</span>
       </button>
 
       <div ngbDropdownMenu aria-labelledby="suggestionsDropdown" class="shadow suggestions-dropdown">
         <div class="list-group list-group-flush small pb-0">
-          @if (!suggestions?.suggested_tags && !suggestions?.suggested_document_types && !suggestions?.suggested_correspondents) {
+          @if (!suggestions()?.suggested_tags && !suggestions()?.suggested_document_types && !suggestions()?.suggested_correspondents) {
             <div class="list-group-item text-muted fst-italic">
               <small class="text-muted small fst-italic" i18n>No novel suggestions</small>
             </div>
           }
-          @if (suggestions?.suggested_tags.length > 0) {
+          @if (suggestions()?.suggested_tags.length > 0) {
             <small class="list-group-item text-uppercase text-muted small"><i-bs class="me-2" name="tags"></i-bs><ng-container i18n>Tags</ng-container></small>
-            @for (tag of suggestions.suggested_tags; track tag) {
+            @for (tag of suggestions().suggested_tags; track tag) {
               <button type="button" class="list-group-item list-group-item-action bg-light" (click)="addTag.emit(tag)">{{ tag }}</button>
             }
           }
-          @if (suggestions?.suggested_document_types.length > 0) {
+          @if (suggestions()?.suggested_document_types.length > 0) {
             <div class="list-group-item text-uppercase text-muted small"><i-bs class="me-2" name="hash"></i-bs><ng-container i18n>Document Types</ng-container></div>
-            @for (type of suggestions.suggested_document_types; track type) {
+            @for (type of suggestions().suggested_document_types; track type) {
               <button type="button" class="list-group-item list-group-item-action bg-light" (click)="addDocumentType.emit(type)">{{ type }}</button>
             }
           }
-          @if (suggestions?.suggested_correspondents.length > 0) {
+          @if (suggestions()?.suggested_correspondents.length > 0) {
             <div class="list-group-item text-uppercase text-muted small"><i-bs class="me-2" name="person"></i-bs><ng-container i18n>Correspondents</ng-container></div>
-            @for (correspondent of suggestions.suggested_correspondents; track correspondent) {
+            @for (correspondent of suggestions().suggested_correspondents; track correspondent) {
               <button type="button" class="list-group-item list-group-item-action bg-light" (click)="addCorrespondent.emit(correspondent)">{{ correspondent }}</button>
             }
           }

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.spec.ts

@@ -22,25 +22,25 @@ describe('SuggestionsDropdownComponent', () => {
   })
 
   it('should calculate totalSuggestions', () => {
-    component.suggestions = {
+    fixture.componentRef.setInput('suggestions', {
       suggested_correspondents: ['John Doe'],
       suggested_tags: ['Tag1', 'Tag2'],
       suggested_document_types: ['Type1'],
-    }
+    })
     expect(component.totalSuggestions).toBe(4)
   })
 
   it('should emit getSuggestions when clickSuggest is called and suggestions are null', () => {
     jest.spyOn(component.getSuggestions, 'emit')
-    component.suggestions = null
+    fixture.componentRef.setInput('suggestions', null)
     component.clickSuggest()
     expect(component.getSuggestions.emit).toHaveBeenCalled()
   })
 
   it('should not emit getSuggestions when disabled', () => {
     jest.spyOn(component.getSuggestions, 'emit')
-    component.disabled = true
-    component.suggestions = null
+    fixture.componentRef.setInput('disabled', true)
+    fixture.componentRef.setInput('suggestions', null)
     fixture.detectChanges()
 
     component.clickSuggest()
@@ -50,13 +50,13 @@ describe('SuggestionsDropdownComponent', () => {
   })
 
   it('should toggle dropdown when clickSuggest is called and suggestions are not null', () => {
-    component.aiEnabled = true
+    fixture.componentRef.setInput('aiEnabled', true)
     fixture.detectChanges()
-    component.suggestions = {
+    fixture.componentRef.setInput('suggestions', {
       suggested_correspondents: [],
       suggested_tags: [],
       suggested_document_types: [],
-    }
+    })
     component.clickSuggest()
     expect(component.dropdown.open).toBeTruthy()
   })

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.ts

@@ -1,9 +1,9 @@
 import {
   Component,
   EventEmitter,
-  Input,
   Output,
   ViewChild,
+  input,
 } from '@angular/core'
 import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -20,18 +20,10 @@ export class SuggestionsDropdownComponent {
   public popperOptions = pngxPopperOptions
 
   @ViewChild('dropdown') dropdown: NgbDropdown
-
-  @Input()
-  suggestions: DocumentSuggestions = null
-
-  @Input()
-  aiEnabled: boolean = false
-
-  @Input()
-  loading: boolean = false
-
-  @Input()
-  disabled: boolean = false
+  readonly suggestions = input<DocumentSuggestions>(null)
+  readonly aiEnabled = input(false)
+  readonly loading = input(false)
+  readonly disabled = input(false)
 
   @Output()
   getSuggestions: EventEmitter<SuggestionsDropdownComponent> =
@@ -48,14 +40,14 @@ export class SuggestionsDropdownComponent {
 
   public clickSuggest(): void {
     if (
-      this.disabled ||
-      this.loading ||
-      (this.suggestions && !this.aiEnabled)
+      this.disabled() ||
+      this.loading() ||
+      (this.suggestions() && !this.aiEnabled())
     ) {
       return
     }
 
-    if (!this.suggestions) {
+    if (!this.suggestions()) {
       this.getSuggestions.emit(this)
     } else {
       this.dropdown?.toggle()
@@ -64,9 +56,9 @@ export class SuggestionsDropdownComponent {
 
   get totalSuggestions(): number {
     return (
-      this.suggestions?.suggested_correspondents?.length +
-        this.suggestions?.suggested_tags?.length +
-        this.suggestions?.suggested_document_types?.length || 0
+      this.suggestions()?.suggested_correspondents?.length +
+        this.suggestions()?.suggested_tags?.length +
+        this.suggestions()?.suggested_document_types?.length || 0
     )
   }
 }