NAS-133028: Enable @angular-eslint/prefer-signals

eslint/eslint-ts-rules-extra.mjs

@@ -1,5 +1,4 @@
 import airbnbBestPractices from "eslint-config-airbnb-base/rules/best-practices";
-import airbnbStyle from "eslint-config-airbnb-base/rules/style";
 import airbnbVariables from "eslint-config-airbnb-base/rules/variables";
 
 /**
@@ -40,6 +39,10 @@ export const extraRules = {
   }],
   "@angular-eslint/prefer-standalone": "error",
   "@angular-eslint/prefer-on-push-component-change-detection": "error",
+  "@angular-eslint/prefer-signals": ["error", {
+    preferQuerySignals: false,
+    preferReadonlySignalProperties: false,
+  }],
 
   // Angular file naming
   "angular-file-naming/component-filename-suffix": "error",

package.json

@@ -121,7 +121,7 @@
     "@xterm/addon-fit": "~0.10.0",
     "@xterm/xterm": "~5.5.0",
     "angular-dual-listbox": "~7.0.0",
-    "angular-eslint": "~18.4.0",
+    "angular-eslint": "~19.0.1",
     "angular-resize-event": "^3.2.0",
     "angular2-uuid": "~1.1.1",
     "chart.js": "~4.4.4",

src/app/directives/has-access/has-access.directive.ts

@@ -13,6 +13,7 @@ export class HasAccessDirective {
   private wrapperContainer: ComponentRef<MissingAccessWrapperComponent>;
   private previousAccess: boolean = null;
 
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   set ixHasAccess(hasAccess: boolean) {
     if (this.previousAccess === hasAccess) {
@@ -32,6 +33,7 @@ export class HasAccessDirective {
 
   protected cssClassList: string[] = [];
 
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input('class')
   @HostBinding('class')
   get elementClass(): string {

src/app/directives/has-role/has-role.directive.ts

@@ -1,6 +1,6 @@
 import {
   ChangeDetectorRef,
-  Directive, Input, TemplateRef, ViewContainerRef,
+  Directive, effect, input, TemplateRef, ViewContainerRef,
 } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { distinctUntilChanged } from 'rxjs';
@@ -13,8 +13,12 @@ import { AuthService } from 'app/services/auth/auth.service';
   standalone: true,
 })
 export class HasRoleDirective {
-  @Input() set ixHasRole(roles: Role[]) {
-    this.authService.hasRole(roles).pipe(
+  readonly roles = input.required<Role[]>({
+    alias: 'ixHasRole',
+  });
+
+  private readonly updateView = effect(() => {
+    this.authService.hasRole(this.roles()).pipe(
       distinctUntilChanged(),
       untilDestroyed(this),
     ).subscribe((hasRole) => {
@@ -24,8 +28,9 @@ export class HasRoleDirective {
       }
 
       this.cdr.markForCheck();
+      this.cdr.detectChanges();
     });
-  }
+  });
 
   constructor(
     private templateRef: TemplateRef<unknown>,

src/app/directives/new-feature-indicator/new-feature-indicator.directive.ts

@@ -1,10 +1,11 @@
 import {
-  ComponentRef, Directive, Input, TemplateRef, ViewContainerRef,
+  ComponentRef, Directive, input, OnChanges, OnInit, TemplateRef, ViewContainerRef,
 } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { NewFeatureIndicatorWrapperComponent } from 'app/directives/new-feature-indicator/new-feature-indicator-wrapper.component';
 import { NewFeatureIndicator } from 'app/directives/new-feature-indicator/new-feature-indicator.interface';
 import { NewFeatureIndicatorService } from 'app/directives/new-feature-indicator/new-feature-indicator.service';
+import { IxSimpleChanges } from 'app/interfaces/simple-changes.interface';
 
 /**
  * Usage: adding an indicator with a hint about a new feature.
@@ -21,15 +22,13 @@ import { NewFeatureIndicatorService } from 'app/directives/new-feature-indicator
   selector: '[ixNewFeatureIndicator]',
   standalone: true,
 })
-export class NewFeatureIndicatorDirective {
+export class NewFeatureIndicatorDirective implements OnInit, OnChanges {
   private wrapperContainer: ComponentRef<NewFeatureIndicatorWrapperComponent>;
   private indicator: NewFeatureIndicator;
 
-  @Input()
-  set ixNewFeatureIndicator(indicator: NewFeatureIndicator) {
-    this.indicator = indicator;
-    this.updateIndicator();
-  }
+  readonly newFeatureIndicator = input.required<NewFeatureIndicator>({
+    alias: 'ixNewFeatureIndicator',
+  });
 
   constructor(
     private indicatorService: NewFeatureIndicatorService,
@@ -43,6 +42,18 @@ export class NewFeatureIndicatorDirective {
     });
   }
 
+  ngOnInit(): void {
+    this.indicator = this.newFeatureIndicator();
+    this.updateIndicator();
+  }
+
+  ngOnChanges(changes: IxSimpleChanges<this>): void {
+    if ('newFeatureIndicator' in changes) {
+      this.indicator = this.newFeatureIndicator();
+      this.updateIndicator();
+    }
+  }
+
   updateIndicator(): void {
     this.viewContainerRef.clear();
     if (this.indicatorService.wasIndicatorShown(this.indicator)) {

src/app/directives/requires-roles/requires-roles.directive.ts

@@ -16,6 +16,7 @@ import { AuthService } from 'app/services/auth/auth.service';
 export class RequiresRolesDirective extends HasAccessDirective {
   private previousRoles: Role[] = [];
 
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
   set ixRequiresRoles(roles: Role[]) {
     if (isEqual(this.previousRoles, roles)) {
@@ -37,6 +38,7 @@ export class RequiresRolesDirective extends HasAccessDirective {
 
   protected override cssClassList: string[] = [];
 
+  // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input('class')
   @HostBinding('class')
   override get elementClass(): string {

src/app/directives/ui-search.directive.ts

@@ -1,6 +1,6 @@
 import {
-  Directive, Input, ElementRef, Renderer2, OnInit,
-  OnDestroy,
+  Directive, ElementRef, Renderer2, OnInit,
+  OnDestroy, input,
 } from '@angular/core';
 import { Timeout } from 'app/interfaces/timeout.interface';
 import { searchDelayConst } from 'app/modules/global-search/constants/delay.const';
@@ -13,18 +13,20 @@ import { UiSearchDirectivesService } from 'app/modules/global-search/services/ui
   standalone: true,
 })
 export class UiSearchDirective implements OnInit, OnDestroy {
-  @Input({ required: true, alias: 'ixUiSearch' }) config: UiSearchableElement;
+  readonly config = input.required<UiSearchableElement>({
+    alias: 'ixUiSearch',
+  });
 
   get id(): string {
-    return getSearchableElementId(this.config);
+    return getSearchableElementId(this.config());
   }
 
   get ariaLabel(): string {
-    const hierarchyItem = this.config.hierarchy?.[this.config.hierarchy.length - 1] || '';
+    const hierarchyItem = this.config().hierarchy?.[this.config().hierarchy.length - 1] || '';
     const isSingleWord = hierarchyItem.trim().split(/\s+/).length === 1;
 
-    if (isSingleWord && this.config.synonyms?.length > 0) {
-      return this.config.synonyms.reduce((best, synonym) => {
+    if (isSingleWord && this.config().synonyms?.length > 0) {
+      return this.config().synonyms.reduce((best, synonym) => {
         const synonymWordCount = synonym.trim().split(/\s+/).length;
         const bestWordCount = best.trim().split(/\s+/).length;
         return synonymWordCount > bestWordCount ? synonym : best;

src/app/modules/buttons/mobile-back-button/mobile-back-button.component.html

@@ -4,8 +4,8 @@
   id="mobile-back-button"
   ixTest="disk-details-back"
   [attr.aria-label]="'Back' | translate"
-  (click)="onClose.emit()"
-  (keydown.enter)="onClose.emit()"
+  (click)="close.emit()"
+  (keydown.enter)="close.emit()"
 >
   <ix-icon name="mdi-chevron-left"></ix-icon>
 </button>

src/app/modules/buttons/mobile-back-button/mobile-back-button.component.spec.ts

@@ -19,13 +19,13 @@ describe('MobileBackButtonComponent', () => {
   });
 
   it('should emit onClose when the button is clicked', () => {
-    const onCloseSpy = jest.spyOn(spectator.component.onClose, 'emit');
+    const onCloseSpy = jest.spyOn(spectator.component.close, 'emit');
     spectator.click('#mobile-back-button');
     expect(onCloseSpy).toHaveBeenCalled();
   });
 
   it('should emit onClose when the Enter key is pressed', () => {
-    const onCloseSpy = jest.spyOn(spectator.component.onClose, 'emit');
+    const onCloseSpy = jest.spyOn(spectator.component.close, 'emit');
     spectator.dispatchKeyboardEvent('#mobile-back-button', 'keydown', 'Enter');
     expect(onCloseSpy).toHaveBeenCalled();
   });

src/app/modules/buttons/mobile-back-button/mobile-back-button.component.ts

@@ -20,5 +20,5 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
   styleUrls: ['./mobile-back-button.component.scss'],
 })
 export class MobileBackButtonComponent {
-  readonly onClose = output();
+  readonly close = output();
 }

src/app/modules/feedback/components/similar-issues/similar-issues.component.ts

@@ -1,13 +1,14 @@
 import { AsyncPipe } from '@angular/common';
 import {
-  ChangeDetectionStrategy, Component, Input,
+  ChangeDetectionStrategy, Component, input, OnChanges,
 } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
 import { sortBy, uniqBy } from 'lodash-es';
 import {
   BehaviorSubject, Observable, debounceTime, distinctUntilChanged, filter, pairwise, switchMap,
 } from 'rxjs';
+import { IxSimpleChanges } from 'app/interfaces/simple-changes.interface';
 import { SimilarIssue } from 'app/modules/feedback/interfaces/file-ticket.interface';
 import { FeedbackService } from 'app/modules/feedback/services/feedback.service';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
@@ -27,10 +28,8 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
     AsyncPipe,
   ],
 })
-export class SimilarIssuesComponent {
-  @Input() set query(value: string) {
-    this.query$.next(value);
-  }
+export class SimilarIssuesComponent implements OnChanges {
+  readonly query = input<string>();
 
   protected similarIssues$ = new BehaviorSubject<SimilarIssue[]>([]);
   protected isLoading$ = new BehaviorSubject<boolean>(false);
@@ -44,6 +43,12 @@ export class SimilarIssuesComponent {
     this.listenForQueryChanges();
   }
 
+  ngOnChanges(changes: IxSimpleChanges<this>): void {
+    if ('query' in changes) {
+      this.query$.next(this.query());
+    }
+  }
+
   private listenForQueryChanges(): void {
     this.query$.pipe(
       filter((query) => query?.length >= 3),