NAS-132887 / 25.04 / Migrate more inputs to signals (#11144)

truenas · Dec 5, 2024 · 8d8fa56 · 8d8fa56
1 parent e896f51
commit 8d8fa56
Show file tree

Hide file tree

Showing 48 changed files with 247 additions and 219 deletions.
diff --git a/src/app/modules/charts/gauge-chart/gauge-chart.component.ts b/src/app/modules/charts/gauge-chart/gauge-chart.component.ts
@@ -1,5 +1,4 @@
 import {
-  Input,
   Component,
   HostBinding, ChangeDetectionStrategy, input, computed,
 } from '@angular/core';
@@ -46,8 +45,11 @@ export class GaugeChartComponent {
     },
   });
 
-  @Input() @HostBinding('style.height.px') height = defaultHeight;
-  @Input() @HostBinding('style.width.px') width = defaultWidth;
+  readonly height = input(defaultHeight);
+  readonly width = input(defaultWidth);
+
+  @HostBinding('style.height.px') get heightStyle(): number { return this.height(); }
+  @HostBinding('style.width.px') get widthStyle(): number { return this.width(); }
 
   chartOptions: ChartOptions<'doughnut'> = {
     responsive: true,

diff --git a/src/app/modules/dialog/components/general-dialog/general-dialog.component.ts b/src/app/modules/dialog/components/general-dialog/general-dialog.component.ts
@@ -1,7 +1,9 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy, Component, Inject,
+} from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import {
-  MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions,
+  MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MAT_DIALOG_DATA,
 } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 import { MarkedIcon } from 'app/modules/ix-icon/icon-marker.util';
@@ -42,9 +44,8 @@ export interface GeneralDialogConfig {
   ],
 })
 export class GeneralDialogComponent {
-  @Input() conf: GeneralDialogConfig;
-
   constructor(
-    public dialogRef: MatDialogRef<GeneralDialogComponent>,
+    protected dialogRef: MatDialogRef<GeneralDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public conf: GeneralDialogConfig,
   ) { }
 }
diff --git a/src/app/modules/dialog/dialog.service.ts b/src/app/modules/dialog/dialog.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable, of } from 'rxjs';
@@ -100,9 +100,10 @@ export class DialogService {
     return dialogRef.afterClosed();
   }
 
-  generalDialog(conf: GeneralDialogConfig, matConfig?: MatDialogConfig): Observable<boolean> {
-    const dialogRef = this.matDialog.open(GeneralDialogComponent, matConfig);
-    dialogRef.componentInstance.conf = conf;
+  generalDialog(conf: GeneralDialogConfig): Observable<boolean> {
+    const dialogRef = this.matDialog.open(GeneralDialogComponent, {
+      data: conf,
+    });
 
     return dialogRef.afterClosed();
   }

diff --git a/...les/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.html b/...les/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.html
@@ -1,5 +1,5 @@
 <ix-select
-  [label]="label"
-  [tooltip]="tooltip"
-  [required]="required"
-></ix-select>
+  [label]="label()"
+  [tooltip]="tooltip()"
+  [required]="required()"
+></ix-select>
diff --git a/...dules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.ts b/...dules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.ts
@@ -1,6 +1,6 @@
 import { ComponentType } from '@angular/cdk/portal';
 import {
-  Component, Input, forwardRef, inject, ChangeDetectionStrategy,
+  Component, forwardRef, inject, ChangeDetectionStrategy, input,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, map } from 'rxjs';
@@ -28,18 +28,18 @@ import { CloudCredentialService } from 'app/services/cloud-credential.service';
   imports: [IxSelectComponent],
 })
 export class CloudCredentialsSelectComponent extends IxSelectWithNewOption {
-  @Input() label: string;
-  @Input() tooltip: string;
-  @Input() required: boolean;
-  @Input() filterByProviders: CloudSyncProviderName[];
+  readonly label = input<string>();
+  readonly tooltip = input<string>();
+  readonly required = input<boolean>();
+  readonly filterByProviders = input<CloudSyncProviderName[]>();
 
   private cloudCredentialService = inject(CloudCredentialService);
 
   fetchOptions(): Observable<Option[]> {
     return this.cloudCredentialService.getCloudSyncCredentials().pipe(
       map((options) => {
-        if (this.filterByProviders) {
-          options = options.filter((option) => this.filterByProviders.includes(option.provider));
+        if (this.filterByProviders()) {
+          options = options.filter((option) => this.filterByProviders().includes(option.provider));
         }
         return options.map((option) => {
           return { label: `${option.name} (${cloudSyncProviderNameMap.get(option.provider)})`, value: option.id };
@@ -57,6 +57,6 @@ export class CloudCredentialsSelectComponent extends IxSelectWithNewOption {
   }
 
   override getFormInputData(): { providers: CloudSyncProviderName[] } {
-    return this.filterByProviders?.length ? { providers: this.filterByProviders } : undefined;
+    return this.filterByProviders()?.length ? { providers: this.filterByProviders() } : undefined;
   }
 }
diff --git a/...modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.html b/...modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.html
@@ -1,5 +1,5 @@
 <ix-select
-  [label]="label"
-  [tooltip]="tooltip"
-  [required]="required"
-></ix-select>
+  [label]="label()"
+  [tooltip]="tooltip()"
+  [required]="required()"
+></ix-select>
diff --git a/...p/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.ts b/...p/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.ts
@@ -1,7 +1,7 @@
 import { ComponentType } from '@angular/cdk/portal';
 import {
   ChangeDetectionStrategy,
-  Component, Input, forwardRef, inject,
+  Component, forwardRef, inject, input,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable } from 'rxjs';
@@ -29,9 +29,9 @@ import { KeychainCredentialService } from 'app/services/keychain-credential.serv
   imports: [IxSelectComponent],
 })
 export class SshCredentialsSelectComponent extends IxSelectWithNewOption {
-  @Input() label: string;
-  @Input() tooltip: string;
-  @Input() required: boolean;
+  readonly label = input<string>();
+  readonly tooltip = input<string>();
+  readonly required = input<boolean>();
 
   private keychainCredentialsService = inject(KeychainCredentialService);
 

diff --git a/...-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html b/...-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html
@@ -1,6 +1,6 @@
 @if (dynamicSchema) {
   <div
-    [formGroup]="dynamicForm"
+    [formGroup]="dynamicForm()"
     [class.indent]="dynamicSchema?.indent"
   >
     @if (!(isHidden$ | async)) {
@@ -37,8 +37,8 @@
             <ix-dynamic-form-item
               [id]="attr.controlName"
               [dynamicSchema]="attr"
-              [dynamicForm]="dynamicForm.controls[dynamicSchema.controlName] | cast"
-              [isEditMode]="isEditMode"
+              [dynamicForm]="dynamicForm().controls[dynamicSchema.controlName] | cast"
+              [isEditMode]="isEditMode()"
               (addListItem)="addControlNext($event)"
               (deleteListItem)="removeControlNext($event)"
             ></ix-dynamic-form-item>
@@ -65,7 +65,7 @@
             [tooltip]="dynamicSchema.tooltip | translate"
             [itemsSchema]="dynamicSchema.itemsSchema"
             [required]="dynamicSchema.required"
-            [isEditMode]="isEditMode"
+            [isEditMode]="isEditMode()"
             [canAdd]="!isAllListControlsDisabled"
             [formArray]="getFormArray"
             (add)="addControl($event)"
@@ -80,14 +80,14 @@
                   <ix-dynamic-form-item
                     [dynamicSchema]="item"
                     [dynamicForm]="element | cast"
-                    [isEditMode]="isEditMode"
+                    [isEditMode]="isEditMode()"
                     (addListItem)="addControlNext($event)"
                     (deleteListItem)="removeControlNext($event)"
                   ></ix-dynamic-form-item>
                 }
               </ix-list-item>
             }
-            <ix-errors [control]="dynamicForm" [label]="dynamicSchema.title | translate"></ix-errors>
+            <ix-errors [control]="dynamicForm()" [label]="dynamicSchema.title | translate"></ix-errors>
           </ix-list>
         }
 

diff --git a/...rm/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.spec.ts b/...rm/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.spec.ts
@@ -171,7 +171,7 @@ describe('IxDynamicFormItemComponent', () => {
       expect(spectator.query(IxInputComponent).tooltip).toBe(inputSchema.tooltip);
 
       expect(spectator.query('ix-input')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.input as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.input as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -191,7 +191,7 @@ describe('IxDynamicFormItemComponent', () => {
       expect(spectator.query(IxCodeEditorComponent).required).toBe(textSchema.required);
       expect(spectator.query(IxCodeEditorComponent).tooltip).toBe(textSchema.tooltip);
       expect(spectator.query('ix-code-editor')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.text as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.text as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -213,7 +213,7 @@ describe('IxDynamicFormItemComponent', () => {
       expect(spectator.query(IxSelectComponent).tooltip).toBe(selectSchema.tooltip);
 
       expect(spectator.query('ix-select')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.select as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.select as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -234,7 +234,7 @@ describe('IxDynamicFormItemComponent', () => {
       expect(spectator.query(IxCheckboxComponent).tooltip).toBe(checkboxSchema.tooltip);
 
       expect(spectator.query('ix-checkbox')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.checkbox as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.checkbox as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -255,7 +255,7 @@ describe('IxDynamicFormItemComponent', () => {
       expect(spectator.query(IxIpInputWithNetmaskComponent).tooltip).toBe(ipaddrSchema.tooltip);
 
       expect(spectator.query('ix-ip-input-with-netmask')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.ipaddr as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.ipaddr as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -276,7 +276,7 @@ describe('IxDynamicFormItemComponent', () => {
       expect(spectator.query(IxExplorerComponent).tooltip).toBe(explorerSchema.tooltip);
 
       expect(spectator.query('ix-explorer')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.explorer as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.explorer as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -299,7 +299,7 @@ describe('IxDynamicFormItemComponent', () => {
       expect(spectator.query(IxListComponent).label).toBe(listSchema.title);
 
       expect(spectator.query('ix-list')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.list as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.list as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -322,7 +322,7 @@ describe('IxDynamicFormItemComponent', () => {
         expect(item).not.toBeHidden();
       });
 
-      const field = spectator.component.dynamicForm.controls.dict as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.dict as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -344,7 +344,7 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
 
-      const field = spectator.component.dynamicForm.controls.list as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.list as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -368,7 +368,7 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
 
-      const field = spectator.component.dynamicForm.controls.list as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.list as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }

diff --git a/...ic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.ts b/...ic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.ts
@@ -1,6 +1,6 @@
 import { AsyncPipe } from '@angular/common';
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, output,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, input, Input, OnInit, output,
 } from '@angular/core';
 import { UntypedFormArray, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -56,9 +56,9 @@ import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
   ],
 })
 export class IxDynamicFormItemComponent implements OnInit {
-  @Input() dynamicForm: UntypedFormGroup;
+  readonly dynamicForm = input<UntypedFormGroup>();
   @Input() dynamicSchema: DynamicFormSchemaNode;
-  @Input() isEditMode: boolean;
+  readonly isEditMode = input<boolean>();
 
   readonly addListItem = output<AddListItemEvent>();
   readonly deleteListItem = output<DeleteListItemEvent>();
@@ -79,7 +79,7 @@ export class IxDynamicFormItemComponent implements OnInit {
     const dependsOn = this.dynamicSchema?.dependsOn;
 
     dependsOn?.forEach((depend) => {
-      this.dynamicForm?.valueChanges.pipe(
+      this.dynamicForm()?.valueChanges.pipe(
         map((changes: Record<string, unknown>) => {
           return changes[depend];
         }),
@@ -94,20 +94,20 @@ export class IxDynamicFormItemComponent implements OnInit {
       this.dynamicSchema?.editable !== undefined
       && !this.dynamicSchema?.editable
     ) {
-      this.dynamicForm?.get(this.dynamicSchema.controlName)?.disable();
+      this.dynamicForm()?.get(this.dynamicSchema.controlName)?.disable();
     }
 
     if (this.dynamicSchema?.hidden) {
-      (this.dynamicForm.controls[this.dynamicSchema.controlName] as CustomUntypedFormField)?.hidden$?.next(true);
+      (this.dynamicForm().controls[this.dynamicSchema.controlName] as CustomUntypedFormField)?.hidden$?.next(true);
     }
   }
 
   get getFormArray(): UntypedFormArray {
-    return this.dynamicForm.controls[this.dynamicSchema.controlName] as UntypedFormArray;
+    return this.dynamicForm().controls[this.dynamicSchema.controlName] as UntypedFormArray;
   }
 
   get isHidden$(): Subject<boolean> {
-    return (this.dynamicForm.controls[this.dynamicSchema.controlName] as CustomUntypedFormField)?.hidden$;
+    return (this.dynamicForm().controls[this.dynamicSchema.controlName] as CustomUntypedFormField)?.hidden$;
   }
 
   addControl(schema?: ChartSchemaNode[]): void {

diff --git a/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.html b/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.html
@@ -1,8 +1,8 @@
-@if (label || tooltip) {
+@if (label() || tooltip()) {
   <ix-label
-    [label]="label"
-    [tooltip]="tooltip"
-    [required]="required"
+    [label]="label()"
+    [tooltip]="tooltip()"
+    [required]="required()"
     [ixTestOverride]="controlDirective.name"
   ></ix-label>
 }
@@ -12,11 +12,11 @@
   [value]="value"
   [disabled]="isDisabled"
   [ixTest]="controlDirective.name"
-  [vertical]="vertical"
-  [attr.aria-label]="label"
+  [vertical]="vertical()"
+  [attr.aria-label]="label()"
   (change)="onValueChanged($event)"
 >
-  @for (option of options | async; track option.label) {
+  @for (option of options() | async; track option.label) {
     <mat-button-toggle
       [name]="option.value.toString()"
       [disabled]="isDisabled"
@@ -27,7 +27,7 @@
   }
 </mat-button-toggle-group>
 
-<ix-errors [control]="controlDirective.control" [label]="label"></ix-errors>
-@if (hint) {
-  <mat-hint>{{ hint }}</mat-hint>
+<ix-errors [control]="controlDirective.control" [label]="label()"></ix-errors>
+@if (hint()) {
+  <mat-hint>{{ hint() }}</mat-hint>
 }