signals migration (#2905)

### Fixes #
<!-- Mention the issues this PR addresses -->

### Checks

- [ ] Ran `yarn test-build`
- [ ] Updated relevant documentations
- [ ] Updated matching config options in altair-static

### Changes proposed in this pull request:
<!-- Describe the changes being introduced in this PR -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Refactor**
- Migrated numerous UI components and services to use Angular reactive
signals for inputs and state, replacing traditional @input bindings and
constructor injection. This unifies data access patterns across dialogs,
editors, viewers, headers, panels, and services.
- Transitioned dependency injection from constructor parameters to
inline Angular inject() calls throughout components, services, effects,
and directives, simplifying initialization.
- Updated templates to use function-call bindings for data and state,
improving consistency and reactivity.
- **Performance**
- Enhanced reactive state management and effect-driven updates in key
components like doc viewer, query editor, and collection dialogs for
smoother UI responsiveness.
- **Bug Fixes**
- Improved null-safety in account-related UI displays and conditional
rendering.
- Added explicit button type attributes to prevent accidental form
submissions.
- Refined safer bindings and signal usage eliminated binding
inconsistencies.
- **Tests**
- Updated unit and integration tests to adapt to reactive input patterns
and new signal-based public APIs, ensuring robust coverage of refactored
components and effects.
- **Style**
- Standardized HTML templates with self-closing tags for components and
icons, cleaner bindings, and consistent attribute formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: imolorhe

packages/altair-app/.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
         createDefaultProgram: true,
       },
       extends: [
-        'plugin:@angular-eslint/recommended',
+        'plugin:@angular-eslint/all',
         'plugin:@angular-eslint/template/process-inline-templates',
         'plugin:@typescript-eslint/recommended',
         // 'plugin:@ngrx/all',
@@ -38,6 +38,17 @@ module.exports = {
             type: 'attribute',
           },
         ],
+        '@angular-eslint/prefer-on-push-component-change-detection': 'warn',
+        // '@angular-eslint/prefer-standalone-component': 'warn',
+        '@angular-eslint/prefer-standalone': 'warn',
+        '@angular-eslint/consistent-component-styles': 'off',
+        '@angular-eslint/sort-keys-in-type-decorator': 'off',
+        '@angular-eslint/use-injectable-provided-in': 'warn',
+        '@angular-eslint/prefer-output-readonly': 'warn',
+        '@angular-eslint/prefer-output-emitter-ref': 'warn',
+        '@angular-eslint/sort-lifecycle-methods': 'warn',
+        '@angular-eslint/use-component-selector': 'warn',
+        '@angular-eslint/prefer-signals': 'warn',
         'prettier/prettier': 0,
         'require-await': 'off',
         '@typescript-eslint/require-await': 'off',
@@ -51,8 +62,23 @@ module.exports = {
     },
     {
       files: ['*.html'],
-      extends: ['plugin:@angular-eslint/template/recommended'],
-      rules: {},
+      extends: ['plugin:@angular-eslint/template/all'],
+      rules: {
+        '@angular-eslint/template/conditional-complexity': 'off',
+        '@angular-eslint/template/i18n': 'off', // Disable for now as we don't have i18n setup
+        '@angular-eslint/template/attributes-order': 'off',
+        '@angular-eslint/template/no-call-expression': 'off',
+        '@angular-eslint/template/cyclomatic-complexity': 'warn',
+        '@angular-eslint/template/no-nested-tags': 'warn',
+        '@angular-eslint/template/no-inline-styles': 'off',
+        '@angular-eslint/template/label-has-associated-control': 'off',
+        '@angular-eslint/template/button-has-type': 'warn',
+
+        // TODO: Revisit these later
+        '@angular-eslint/template/interactive-supports-focus': 'warn',
+        '@angular-eslint/template/click-events-have-key-events': 'warn',
+        '@angular-eslint/template/prefer-ngsrc': 'warn',
+      },
     },
     {
       files: ['*.js'],

packages/altair-app/e2e/.eslintrc.json

@@ -26,7 +26,8 @@
             "type": "element",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/no-uncalled-signals": ["error"]
       }
     },
     {

packages/altair-app/package.json

@@ -107,11 +107,11 @@
   },
   "devDependencies": {
     "@altairgraphql/iframe-sandbox": "workspace:*",
-    "@angular-eslint/builder": "17.1.1",
-    "@angular-eslint/eslint-plugin": "17.1.1",
-    "@angular-eslint/eslint-plugin-template": "17.1.1",
-    "@angular-eslint/schematics": "17.1.1",
-    "@angular-eslint/template-parser": "17.1.1",
+    "@angular-eslint/builder": "20.3.0",
+    "@angular-eslint/eslint-plugin": "20.3.0",
+    "@angular-eslint/eslint-plugin-template": "20.3.0",
+    "@angular-eslint/schematics": "20.3.0",
+    "@angular-eslint/template-parser": "20.3.0",
     "@angular/build": "^20.3.4",
     "@angular/compiler": "20.3.3",
     "@angular/compiler-cli": "20.3.3",
@@ -141,8 +141,8 @@
     "@types/to-snake-case": "^1.0.0",
     "@types/uuid": "^9.0.5",
     "@types/zen-observable": "^0.8.1",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@typescript-eslint/parser": "^8.46.0",
     "babel-plugin-transform-async-to-generator": "6.24.1",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.1",

packages/altair-app/src/app/app.component.html

@@ -1 +1 @@
-<app-altair></app-altair>
+<app-altair />

packages/altair-app/src/app/modules/altair/altair.module.ts

@@ -179,11 +179,11 @@ const providers = [
   providers,
 })
 export class AltairModule {
-  constructor(
-    applicationInitStatus: ApplicationInitStatus,
-    store: Store<RootState>,
-    reducerBootstrapper: ReducerBootstrapper
-  ) {
+  constructor() {
+    const applicationInitStatus = inject(ApplicationInitStatus);
+    const store = inject<Store<RootState>>(Store);
+    const reducerBootstrapper = inject(ReducerBootstrapper);
+
     applicationInitStatus.donePromise.then(() =>
       store.dispatch(
         new AppInitAction({ initialState: reducerBootstrapper.initialState })

packages/altair-app/src/app/modules/altair/components/account-dialog/__snapshots__/account-dialog.component.spec.ts.snap

@@ -78,11 +78,13 @@ exports[`AccountDialogComponent should create 1`] = `
           >
             <button
               class="btn btn--bordered"
+              type="button"
             >
                SIGNIN_WITH_GOOGLE 
             </button>
             <button
               class="btn btn--bordered"
+              type="button"
             >
               <app-icon
                 name="github"

packages/altair-app/src/app/modules/altair/components/account-dialog/account-dialog.component.html

@@ -1,19 +1,15 @@
 <app-dialog
-  [showDialog]="showDialog"
+  [showDialog]="showDialog()"
   [heading]="'ACCOUNT_TITLE' | translate"
   [subheading]="'ACCOUNT_SUB_TEXT' | translate"
   [showFooter]="false"
   (toggleDialog)="toggleDialogChange.emit($event)"
 >
   <div class="account-signin-wrapper">
-    @if (!account?.loggedIn) {
+    @if (!account()?.loggedIn) {
       <div class="account-dialog__not-logged-in">
         <div class="account-dialog__not-logged-in__inner">
-          <nz-avatar
-            nzText="?"
-            nzSrc="assets/img/altair_logo.svg"
-            nzSize="large"
-          ></nz-avatar>
+          <nz-avatar nzText="?" nzSrc="assets/img/altair_logo.svg" nzSize="large" />
 
           <h2>Login to get started</h2>
           <p>
@@ -24,40 +20,49 @@ <h2>Login to get started</h2>
             /></a>
           </p>
           <div class="account-dialog__signin-actions">
-            <button class="btn btn--bordered" (click)="submitLogin('GOOGLE')">
+            <button
+              type="button"
+              class="btn btn--bordered"
+              (click)="submitLogin('GOOGLE')"
+            >
               <!-- <app-icon name="google"></app-icon> -->
               {{ 'SIGNIN_WITH_GOOGLE' | translate }}
             </button>
-            <button class="btn btn--bordered" (click)="submitLogin('GITHUB')">
-              <app-icon name="github"></app-icon>
+            <button
+              type="button"
+              class="btn btn--bordered"
+              (click)="submitLogin('GITHUB')"
+            >
+              <app-icon name="github" />
               {{ 'SIGNIN_WITH_GITHUB' | translate }}
             </button>
           </div>
         </div>
       </div>
     }
 
-    @if (account?.loggedIn) {
+    @if (account()?.loggedIn) {
       <div class="app-dialog-section">
         <div class="account-dialog__welcome">
           <nz-avatar
-            [nzText]="account?.firstName?.at(0)"
-            [nzSrc]="account?.picture"
-          ></nz-avatar>
-          {{ 'ACCOUNT_HELLO' | translate }}, {{ account?.firstName }}
+            [nzText]="account()?.firstName?.at(0)"
+            [nzSrc]="account()?.picture"
+          />
+          {{ 'ACCOUNT_HELLO' | translate }}, {{ account()?.firstName }}
         </div>
       </div>
       <p>
         <a class="link" target="_blank" (click)="openBillingPage($event)">
           Billing
-          <app-icon name="external-link"></app-icon>
+          <app-icon name="external-link" />
         </a>
-        @if (account?.plan?.canUpgradePro) {
+        @if (account()?.plan?.canUpgradePro) {
           <button
+            type="button"
             class="btn btn--primary btn--light btn--small"
             (click)="openUpgradeProUrl($event)"
           >
-            <app-icon name="sparkles"></app-icon> Upgrade plan
+            <app-icon name="sparkles" /> Upgrade plan
           </button>
         }
       </p>
@@ -68,34 +73,35 @@ <h2>Login to get started</h2>
             name="info"
             nz-tooltip
             [nzTooltipTitle]="'ACCOUNT_PLAN_STATS_DESCRIPTION' | translate"
-          ></app-icon>
+          />
         </div>
-        <div>Plan: {{ account?.plan?.id }}</div>
+        <div>Plan: {{ account()?.plan?.id }}</div>
         <div>
-          Queries: {{ account?.stats?.queriesCount ?? 0 }} /
-          {{ account?.plan?.maxQueriesCount ?? 0 }}
+          Queries: {{ account()?.stats?.queriesCount ?? 0 }} /
+          {{ account()?.plan?.maxQueriesCount ?? 0 }}
         </div>
         <div>
-          Teams: {{ account?.stats?.teamsCount ?? 0 }} /
-          {{ account?.plan?.maxTeamsCount ?? 0 }}
+          Teams: {{ account()?.stats?.teamsCount ?? 0 }} /
+          {{ account()?.plan?.maxTeamsCount ?? 0 }}
         </div>
-        <div>Fixed Credits: {{ account?.availableCredits?.fixed ?? 0 }}</div>
+        <div>Fixed Credits: {{ account()?.availableCredits?.fixed ?? 0 }}</div>
         <div>
           Monthly Credits (Pro users only):
-          {{ account?.availableCredits?.monthly ?? 0 }}
+          {{ account()?.availableCredits?.monthly ?? 0 }}
         </div>
         <button
+          type="button"
           class="btn btn--primary btn--light btn--small"
           (click)="buyCredits($event)"
-          [disabled]="account?.plan?.canUpgradePro"
+          [disabled]="account()?.plan?.canUpgradePro"
         >
-          <app-icon name="coins"></app-icon> Buy Credits
-          @if (account?.plan?.canUpgradePro) {
+          <app-icon name="coins" /> Buy Credits
+          @if (account()?.plan?.canUpgradePro) {
             (Pro users only)
           }
         </button>
       </div>
-      <button class="btn" (click)="logoutChange.emit()">
+      <button type="button" class="btn" (click)="logoutChange.emit()">
         {{ 'LOGOUT_TEXT' | translate }}
       </button>
     }

packages/altair-app/src/app/modules/altair/components/account-dialog/account-dialog.component.ts

@@ -2,13 +2,10 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  Input,
-  OnInit,
   Output,
+  input,
 } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AccountState } from 'altair-graphql-core/build/types/state/account.interfaces';
-import { environment } from 'environments/environment';
 import { apiClient } from '../../services/api/api.service';
 import { externalLink } from '../../utils';
 import { IdentityProvider } from '@altairgraphql/db';
@@ -21,8 +18,8 @@ import { IdentityProvider } from '@altairgraphql/db';
   standalone: false,
 })
 export class AccountDialogComponent {
-  @Input() showDialog = true;
-  @Input() account: AccountState | undefined;
+  readonly showDialog = input(true);
+  readonly account = input<AccountState>();
   @Output() toggleDialogChange = new EventEmitter<boolean>();
   @Output() handleLoginChange = new EventEmitter<IdentityProvider>();
   @Output() logoutChange = new EventEmitter();

packages/altair-app/src/app/modules/altair/components/action-bar/__snapshots__/action-bar.component.spec.ts.snap

@@ -7,26 +7,31 @@ exports[`ActionBarComponent should render correctly 1`] = `
   >
     <button
       class="app-button prettify-button"
+      type="button"
     >
         
     </button>
     <button
       class="app-button clear-editor-button"
+      type="button"
     >
         
     </button>
     <button
       class="app-button set-headers-button"
+      type="button"
     >
         
     </button>
     <button
       class="app-button set-variables-button"
+      type="button"
     >
         
     </button>
     <button
       class="app-button set-subscription-url-button"
+      type="button"
     >
         
     </button>
@@ -35,11 +40,13 @@ exports[`ActionBarComponent should render correctly 1`] = `
     >
       <button
         class="app-button reload-docs-button"
+        type="button"
       >
           
       </button>
       <button
         class="app-button show-docs-button"
+        type="button"
       >
           
       </button>

packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.html

@@ -1,42 +1,52 @@
 <div class="action-bar">
   <button
+    type="button"
     class="app-button prettify-button"
     (click)="this.prettifyCodeChange.emit()"
   >
     {{ 'PRETTIFY_BUTTON' | translate }}
   </button>
   <button
+    type="button"
     class="app-button clear-editor-button"
     (click)="this.clearEditorChange.emit()"
   >
     {{ 'CLEAR_BUTTON' | translate }}
   </button>
   <button
+    type="button"
     class="app-button set-headers-button"
     (click)="this.toggleHeaderDialog.emit()"
   >
     {{ 'SET_HEADERS_BUTTON' | translate }}
   </button>
   <button
+    type="button"
     class="app-button set-variables-button"
     (click)="this.toggleVariableDialog.emit()"
   >
     {{ 'SET_VARIABLES_BUTTON' | translate }}
   </button>
   <button
+    type="button"
     class="app-button set-subscription-url-button"
     (click)="this.toggleSubscriptionUrlDialog.emit()"
   >
     {{ 'SUBSCRIPTION_URL_TEXT' | translate }}
   </button>
   <div class="actions-right right">
-    <button class="app-button reload-docs-button" (click)="reloadDocsChange.emit()">
+    <button
+      type="button"
+      class="app-button reload-docs-button"
+      (click)="reloadDocsChange.emit()"
+    >
       {{ 'RELOAD_DOCS_BUTTON' | translate }}
     </button>
     <button
+      type="button"
       class="app-button show-docs-button"
       (click)="toggleDocsChange.emit()"
-      [ngClass]="{ 'active-grey': showDocs }"
+      [ngClass]="{ 'active-grey': showDocs() }"
     >
       {{ 'SHOW_DOCS_BUTTON' | translate }}
     </button>