NAS-132720 / 25.04 / Migrate more inputs to signals (#11095)

src/app/directives/disable-focusable-elements/disable-focusable-elements.directive.ts

@@ -1,5 +1,5 @@
 import {
-  Directive, Input, Renderer2, ElementRef, OnChanges,
+  Directive, Renderer2, ElementRef, OnChanges, input,
 } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { take, timer } from 'rxjs';
@@ -11,7 +11,7 @@ import { IxSimpleChanges } from 'app/interfaces/simple-changes.interface';
   standalone: true,
 })
 export class DisableFocusableElementsDirective implements OnChanges {
-  @Input() disableFocusableElements: boolean;
+  readonly disableFocusableElements = input.required<boolean>();
 
   constructor(
     private elementRef: ElementRef<HTMLElement>,
@@ -26,7 +26,7 @@ export class DisableFocusableElementsDirective implements OnChanges {
 
   private updateFocusableElements(): void {
     timer(0).pipe(take(1), untilDestroyed(this)).subscribe(() => {
-      const tabIndex = this.disableFocusableElements ? -1 : 0;
+      const tabIndex = this.disableFocusableElements() ? -1 : 0;
       this.updateTabIndex(tabIndex);
     });
   }

src/app/modules/forms/search-input/components/advanced-search/advanced-search.component.ts

@@ -3,8 +3,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef,
-  Input,
+  ElementRef, input,
   OnInit, output,
   ViewChild,
 } from '@angular/core';
@@ -49,9 +48,9 @@ const setDiagnostics = StateEffect.define<unknown[] | null>();
   ],
 })
 export class AdvancedSearchComponent<T> implements OnInit {
-  @Input() query: QueryFilters<T> = [];
-  @Input() properties: SearchProperty<T>[] = [];
-  @Input() placeholder: string;
+  readonly query = input<QueryFilters<T>>([]);
+  readonly properties = input<SearchProperty<T>[]>([]);
+  readonly placeholder = input('');
 
   readonly paramsChange = output<QueryFilters<T>>();
   readonly switchToBasic = output();
@@ -79,12 +78,12 @@ export class AdvancedSearchComponent<T> implements OnInit {
 
   ngOnInit(): void {
     this.initEditor();
-    this.advancedSearchAutocomplete.setProperties(this.properties);
+    this.advancedSearchAutocomplete.setProperties(this.properties());
     this.advancedSearchAutocomplete.setEditorView(this.editorView);
 
-    if (this.query) {
+    if (this.query()) {
       this.replaceEditorContents(
-        this.queryParser.formatFiltersToQuery(this.query, this.properties),
+        this.queryParser.formatFiltersToQuery(this.query(), this.properties()),
       );
     }
   }
@@ -141,7 +140,7 @@ export class AdvancedSearchComponent<T> implements OnInit {
           customKeyMap,
           EditorView.lineWrapping,
           closeBrackets(),
-          placeholder(this.placeholder),
+          placeholder(this.placeholder()),
         ],
       }),
       parent: this.inputArea.nativeElement,
@@ -195,7 +194,7 @@ export class AdvancedSearchComponent<T> implements OnInit {
     });
     this.errorMessages = null;
 
-    const filters = this.queryToApi.buildFilters(parsedQuery, this.properties);
+    const filters = this.queryToApi.buildFilters(parsedQuery, this.properties());
     this.paramsChange.emit(filters);
   }
 

src/app/modules/global-search/components/global-search-results/global-search-results.component.html

@@ -1,4 +1,4 @@
-@if (!isLoading || results?.length) {
+@if (!isLoading() || results()?.length) {
   <mat-card class="search-results-card">
     @for (section of availableSections; track trackBySection($index, section)) {
       <h2 class="section">
@@ -12,13 +12,13 @@ <h2 class="section">
                 class="search-result"
                 role="link"
                 [attr.tabindex]="result.section === GlobalSearchSection.RecentSearches ? i + 1 : 0"
-                [class.highlighted-result]="isSearchInputFocused && isSameHierarchyResult(firstAvailableSearchResult, result)"
+                [class.highlighted-result]="isSearchInputFocused() && isSameHierarchyResult(firstAvailableSearchResult, result)"
                 [ixTest]="['search-result', result.hierarchy.join('-')]"
                 [attr.aria-label]="'UI Search Result: {result}' | translate: { result: result.hierarchy.join(' ') }"
                 (click)="selectElement(result)"
                 (keydown.enter)="selectElement(result)"
               >
-                <h3 class="title" [innerHTML]="processHierarchy(result.hierarchy, searchTerm)"></h3>
+                <h3 class="title" [innerHTML]="processHierarchy(result.hierarchy, searchTerm())"></h3>
 
                 @if (result.section === GlobalSearchSection.RecentSearches) {
                   <ix-icon

src/app/modules/global-search/components/global-search-results/global-search-results.component.ts

@@ -1,5 +1,5 @@
 import {
-  ChangeDetectionStrategy, Component, Inject, Input, OnChanges, output, TrackByFunction,
+  ChangeDetectionStrategy, Component, Inject, input, OnChanges, output, TrackByFunction,
 } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MatCard } from '@angular/material/card';
@@ -36,10 +36,10 @@ import { AuthService } from 'app/services/auth/auth.service';
   ],
 })
 export class GlobalSearchResultsComponent implements OnChanges {
-  @Input() searchTerm = '';
-  @Input() isLoading = false;
-  @Input() isSearchInputFocused = false;
-  @Input() results: UiSearchableElement[] = [];
+  readonly searchTerm = input('');
+  readonly isLoading = input(false);
+  readonly isSearchInputFocused = input(false);
+  readonly results = input<UiSearchableElement[]>([]);
 
   readonly recentSearchRemoved = output();
 
@@ -57,10 +57,10 @@ export class GlobalSearchResultsComponent implements OnChanges {
   showAll = { ...this.initialShowAll };
 
   get availableSections(): Option<GlobalSearchSection>[] {
-    const uniqueSectionValues = new Set(this.results.map((result) => result.section));
+    const uniqueSectionValues = new Set(this.results().map((result) => result.section));
 
     if (
-      this.searchTerm
+      this.searchTerm()
       && !uniqueSectionValues.has(GlobalSearchSection.Ui)
       && !uniqueSectionValues.has(GlobalSearchSection.RecentSearches)
     ) {
@@ -113,7 +113,7 @@ export class GlobalSearchResultsComponent implements OnChanges {
   }
 
   getLimitedSectionResults(section: GlobalSearchSection): UiSearchableElement[] {
-    const sectionResults = this.results.filter((element) => element.section === section);
+    const sectionResults = this.results().filter((element) => element.section === section);
 
     if (this.showAll[section] || sectionResults.length <= this.initialResultsLimit) {
       return sectionResults;
@@ -123,7 +123,7 @@ export class GlobalSearchResultsComponent implements OnChanges {
   }
 
   getElementsBySection(section: GlobalSearchSection): UiSearchableElement[] {
-    return this.results.filter((element) => element?.section === section);
+    return this.results().filter((element) => element?.section === section);
   }
 
   isSameHierarchyResult(a: UiSearchableElement, b: UiSearchableElement): boolean {

src/app/modules/loader/components/fake-progress-bar/fake-progress-bar.component.html

@@ -1,4 +1,4 @@
-@if (isAnimating || !hideOnComplete) {
+@if (isAnimating || !hideOnComplete()) {
   <mat-progress-bar
     mode="determinate"
     @fadeOut

src/app/modules/loader/components/fake-progress-bar/fake-progress-bar.component.ts

@@ -4,8 +4,7 @@ import {
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component,
-  Input,
+  Component, input,
   OnChanges,
   OnDestroy,
 } from '@angular/core';
@@ -34,18 +33,18 @@ import { IxSimpleChanges } from 'app/interfaces/simple-changes.interface';
   imports: [MatProgressBar],
 })
 export class FakeProgressBarComponent implements OnChanges, OnDestroy {
-  @Input() loading: boolean;
+  readonly loading = input<boolean>();
 
   /**
    * Pretend time for the whole progress bar.
    * Will never reach it, getting slower and slower.
    */
-  @Input() duration = 1000;
+  readonly duration = input(1000);
 
   /**
    * Automatically fades out progress bar when loading becomes false.
    */
-  @Input() hideOnComplete = true;
+  readonly hideOnComplete = input(true);
 
   progress: number;
   isAnimating = false;
@@ -62,7 +61,7 @@ export class FakeProgressBarComponent implements OnChanges, OnDestroy {
       return;
     }
 
-    if (this.loading) {
+    if (this.loading()) {
       this.start();
     } else {
       this.stop.next();
@@ -101,7 +100,7 @@ export class FakeProgressBarComponent implements OnChanges, OnDestroy {
     }
 
     const timeElapsed = this.redrawTime * sequence;
-    const scale = this.duration;
+    const scale = this.duration();
 
     return 100 * timeElapsed / (timeElapsed + scale);
   }

src/app/modules/scheduler/components/scheduler-modal/scheduler-preview-column/scheduler-preview-column.component.html

@@ -12,8 +12,8 @@ <h4 class="crontab-header">
       </button>
     </div>
   </h4>
-  <div class="crontab">{{ crontab }}</div>
-  <div class="crontab-explanation">{{ crontab | crontabExplanation }}</div>
+  <div class="crontab">{{ crontab() }}</div>
+  <div class="crontab-explanation">{{ crontab() | crontabExplanation }}</div>
 </section>
 
 <div class="calendar">
@@ -22,7 +22,7 @@ <h4 class="crontab-header">
 
 <div class="schedule-list">
   <div class="timezone-message">
-    <strong>{{ 'System Time Zone:' | translate }}</strong> {{ timezone }}
+    <strong>{{ 'System Time Zone:' | translate }}</strong> {{ timezone() }}
   </div>
 
   @if (cronPreview && !isPastMonth) {

src/app/modules/scheduler/components/scheduler-modal/scheduler-preview-column/scheduler-preview-column.component.ts

@@ -1,7 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Input,
+  input,
   OnChanges,
   OnInit,
   ViewChild,
@@ -41,11 +41,11 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
   ],
 })
 export class SchedulerPreviewColumnComponent implements OnChanges, OnInit {
-  @Input() crontab: string;
-  @Input() timezone: string;
+  readonly crontab = input.required<string>();
+  readonly timezone = input.required<string>();
 
-  @Input() startTime: string;
-  @Input() endTime: string;
+  readonly startTime = input<string>();
+  readonly endTime = input<string>();
 
   /**
    * 1 for 1st day of the month, etc.
@@ -58,7 +58,7 @@ export class SchedulerPreviewColumnComponent implements OnChanges, OnInit {
 
   get startDate(): Date {
     if (!this.calendar.activeDate || differenceInCalendarMonths(this.calendar.activeDate, new Date()) < 1) {
-      return utcToZonedTime(new Date(), this.timezone);
+      return utcToZonedTime(new Date(), this.timezone());
     }
 
     return startOfMonth(this.calendar.activeDate);
@@ -101,9 +101,9 @@ export class SchedulerPreviewColumnComponent implements OnChanges, OnInit {
 
     try {
       this.cronPreview = new CronSchedulePreview({
-        crontab: this.crontab,
-        startTime: this.startTime,
-        endTime: this.endTime,
+        crontab: this.crontab(),
+        startTime: this.startTime(),
+        endTime: this.endTime(),
       });
 
       this.highlightedCalendarDays = this.cronPreview.getNextDaysInMonthWithRuns(this.startDate);

src/app/modules/terminal/components/terminal/terminal.component.ts

@@ -1,7 +1,7 @@
 import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy, ChangeDetectorRef,
-  Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild,
+  Component, ElementRef, HostListener, input, OnDestroy, OnInit, ViewChild,
 } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
@@ -45,7 +45,8 @@ import { waitForPreferences } from 'app/store/preferences/preferences.selectors'
   ],
 })
 export class TerminalComponent implements OnInit, OnDestroy {
-  @Input() conf: TerminalConfiguration;
+  readonly conf = input.required<TerminalConfiguration>();
+
   @ViewChild('terminal', { static: true }) container: ElementRef<HTMLElement>;
 
   waitParentChanges = 300;
@@ -86,16 +87,16 @@ export class TerminalComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    if (this.conf.preInit) {
-      this.conf.preInit().pipe(untilDestroyed(this)).subscribe(() => {
+    if (this.conf().preInit) {
+      this.conf().preInit().pipe(untilDestroyed(this)).subscribe(() => {
         this.initShell();
       });
     } else {
       this.initShell();
     }
 
-    if (this.conf.reconnectShell$) {
-      this.conf.reconnectShell$.pipe(untilDestroyed(this)).subscribe(() => {
+    if (this.conf().reconnectShell$) {
+      this.conf().reconnectShell$.pipe(untilDestroyed(this)).subscribe(() => {
         this.reconnect();
       });
     }
@@ -196,7 +197,7 @@ export class TerminalComponent implements OnInit, OnDestroy {
   }
 
   initializeWebShell(): void {
-    this.shellService.connect(this.token, this.conf.connectionData);
+    this.shellService.connect(this.token, this.conf().connectionData);
 
     this.shellService.shellConnected$.pipe(untilDestroyed(this)).subscribe((event: ShellConnectedEvent) => {
       this.shellConnected = event.connected;
@@ -212,7 +213,7 @@ export class TerminalComponent implements OnInit, OnDestroy {
   }
 
   reconnect(): void {
-    this.shellService.connect(this.token, this.conf.connectionData);
+    this.shellService.connect(this.token, this.conf().connectionData);
   }
 
   onFontSizeChanged(newSize: number): void {

src/app/pages/data-protection/replication/replication-form/sections/general-section/general-section.component.ts

@@ -1,5 +1,5 @@
 import {
-  ChangeDetectionStrategy, Component, Input, OnChanges,
+  ChangeDetectionStrategy, Component, input, OnChanges,
 } from '@angular/core';
 import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -30,7 +30,7 @@ import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-sele
   ],
 })
 export class GeneralSectionComponent implements OnChanges {
-  @Input() replication: ReplicationTask;
+  readonly replication = input<ReplicationTask>();
 
   form = this.formBuilder.group({
     name: ['', Validators.required],
@@ -71,10 +71,10 @@ export class GeneralSectionComponent implements OnChanges {
   }
 
   ngOnChanges(): void {
-    if (this.replication) {
+    if (this.replication()) {
       this.form.patchValue({
-        ...this.replication,
-        logging_level: this.replication.logging_level || LoggingLevel.Default,
+        ...this.replication(),
+        logging_level: this.replication().logging_level || LoggingLevel.Default,
       });
     }
   }

src/app/pages/data-protection/replication/replication-form/sections/schedule-section/schedule-section.component.ts

@@ -1,5 +1,5 @@
 import {
-  ChangeDetectionStrategy, Component, Input, OnChanges,
+  ChangeDetectionStrategy, Component, input, OnChanges,
 } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
@@ -30,7 +30,7 @@ import { TaskService } from 'app/services/task.service';
   ],
 })
 export class ScheduleSectionComponent implements OnChanges {
-  @Input() replication: ReplicationTask;
+  readonly replication = input<ReplicationTask>();
 
   form = this.formBuilder.group({
     auto: [true],
@@ -52,8 +52,8 @@ export class ScheduleSectionComponent implements OnChanges {
   ) {}
 
   ngOnChanges(): void {
-    if (this.replication) {
-      this.setFormValues(this.replication);
+    if (this.replication()) {
+      this.setFormValues(this.replication());
     }
   }