packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.ts (2)

35-35: Consider completing the signal input migration for consistency.

The migration of showEnvironmentManager to a signal-based input using input() is correctly implemented. However, the component now has mixed input patterns:

• Line 35: showEnvironmentManager uses input() (signal-based)
• Line 34: environments still uses @Input() (decorator-based)

For consistency and maintainability, consider migrating the remaining @Input() decorator to input() as well.

Note: This signals migration represents an intentional architectural shift in the PR. While previous learnings indicated using @Input decorators, Angular 17.1+ signal-based inputs offer improved change detection and type safety. Based on learnings.

---

34-35: Consider completing the signal input migration for consistency.

The showEnvironmentManager property has been migrated to a signal input, but the environments property on line 34 still uses the @Input decorator. This creates an inconsistency within the same component.

For a more uniform API and to fully benefit from the signal migration, consider migrating environments as well:

-@Input() environments?: EnvironmentsState;
+readonly environments = input<EnvironmentsState>();

If migrated, you'd also need to update all internal references from this.environments to this.environments() throughout the component (lines 58, 59, 64, 110, 116, 118).

packages/altair-app/src/app/modules/altair/components/schema-form/schema-form/schema-form.component.ts (1)

27-28: Consider adding explicit type annotations.

The signal declarations are correctly implemented with readonly and proper default values. However, explicit type annotations would improve type safety and code clarity.

Apply this diff to add type annotations:

-  readonly schema = input({});
-  readonly data = input(null);
+  readonly schema = input<JSONSchema6>({});
+  readonly data = input<IDictionary | null>(null);

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.ts (1)

11-11: Note: Migration pattern conflicts with coding guidelines.

The coding guidelines specify "Use Input and Output decorators to define the component API," but this PR adopts Angular 17+'s signal-based input() function, which is the modern recommended pattern for reactive inputs.

While this conflicts with the existing guidelines, the input() approach is a best practice for Angular 17+ and provides better type safety and reactivity. Consider updating the coding guidelines to reflect this migration strategy.

Based on learnings.

Also applies to: 37-37, 40-41

packages/altair-app/src/app/modules/altair/components/import-curl-dialog/import-curl-dialog.component.ts (1)

6-6: Signal-based inputs are correct; update coding guidelines
The migration from @input() to input() aligns with Angular 17+ best practices. The existing guideline requiring @Input/@output is now outdated—please update it to allow (or prefer) signal-based inputs and plan migrating the remaining components still using @input().

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.ts (1)

49-49: Migrate remaining outputs to signals or update guidelines

All components (e.g., doc-viewer-search-results) still use @Output()/EventEmitter and no output() signals were detected. For consistency, either replace these with readonly foo = output<…>(); or revise the guideline to permit mixing.

packages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.ts (1)

89-89: Improve type casting for array check.

The cast as [] is too narrow. Use as any[] or check the type properly before casting.

   this.invalidFileData =
-    (this.fileVariable()?.data as [])?.length > this.validFileData.length;
+    (this.fileVariable()?.data as any[])?.length > this.validFileData.length;

packages/altair-app/src/app/modules/altair/components/fancy-input-marker/fancy-input-marker.component.ts (1)

31-33: Signal access pattern correctly applied.

The function-call syntax this.section().content correctly retrieves the signal's value. The logic properly hydrates the resolved value using the environment service.

Optional enhancement: While ngOnChanges works correctly with signal inputs, consider using signal-based reactivity patterns for consistency:

import { Component, input, effect } from '@angular/core';

export class FancyInputMarkerComponent {
  readonly section = input<HighlightSection>({ content: '' });
  readonly activeEnvironment = input<IDictionary>({});
  
  resolvedValue = '';

  constructor(private environmentService: EnvironmentService) {
    effect(() => {
      this.resolvedValue = this.environmentService.hydrate(this.section().content);
    });
  }
}

This approach leverages signal reactivity more idiomatically and eliminates the need for the OnChanges lifecycle hook.

packages/altair-app/src/app/modules/altair/modules/icons/icon/icon.component.ts (1)

26-34: Template binding is correct—no direct size usage

• The template applies [ngStyle]="styles" computed in ngOnInit; it doesn’t reference size or size(), so no changes needed.
• Optional: replace the ngOnInit style assignment with a computed() signal for styles to embrace Angular 17+ reactive patterns.

packages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.ts (1)

9-9: Verify the partial input migration.

Four inputs (showCollections, sortBy, queriesSortBy, loggedIn) were migrated to signal-based inputs, but collections and workspaces (lines 30-37) remain as @Input() with setters. This partial migration creates an inconsistent component API.

Confirm whether the setters (which pipe values into BehaviorSubjects) are the reason these weren't migrated, or if this is an oversight.

If the setter logic is the blocker, consider refactoring to use signal-based patterns with effect() to synchronize with the BehaviorSubjects:

readonly collections = input<IQueryCollection[] | undefined>(undefined);
readonly workspaces = input<WorkspaceOption[]>([]);

constructor(private collectionService: QueryCollectionService) {
  effect(() => {
    const cols = this.collections();
    if (cols) {
      this.collections$.next(cols);
    }
  });
  effect(() => {
    this.workspaces$.next(this.workspaces());
  });
}

Also applies to: 29-29, 38-40

packages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.ts (1)

28-28: Document or migrate collectionTree input for consistency

The collectionTree property remains a classic @Input(), while loggedIn, queriesSortBy, and expanded have been migrated to signals. Either migrate collectionTree to a signal input (e.g. readonly collectionTree = input<IQueryCollectionTree|undefined>(undefined); and update usages to this.collectionTree()) or add a code comment explaining why it’s intentionally excluded.

packages/altair-app/src/app/modules/altair/components/tips/tips.component.ts (2)

91-91: Signal invocations are correct; consider using effect() for more idiomatic signal reactivity.

The signal invocations (this.activeWindowId(), this.windowId(), this.loading()) correctly retrieve values from the signal-based inputs.

However, the component still uses ngOnChanges to react to input changes. With signal-based inputs, using Angular's effect() function would be more idiomatic:

import { effect } from '@angular/core';

constructor() {
  effect(() => {
    // Automatically re-runs when any signal read inside changes
    if (this.activeWindowId() === this.windowId() && !this.loading()) {
      // setup interval logic
    }
  });
}

Note: ngOnChanges still works with signal inputs, so this is an optional refactor rather than a required fix.

---

30-32: Signal migration correct; no template invocation changes needed.
Optional: add explicit type generics to input(), e.g., readonly activeWindowId = input<string>('').

packages/altair-app/src/app/modules/altair/components/query-result/query-result.component.ts (1)

42-42: Migrate requestScriptLogs to input(...)
Replace the decorator-based input with a signal-based input for consistency:

-  @Input() requestScriptLogs: LogLine[] = [];
+  readonly requestScriptLogs = input<LogLine[]>([]);

If this property must remain mutable, add a comment explaining why it’s excluded from the migration.

packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.ts (1)

6-6: LGTM! Consider explicit type annotations.

The migration is correct and both boolean inputs are properly converted to signals with default values.

For improved type clarity and consistency with other files in this PR (e.g., post-request-editor.component.ts line 21), consider adding explicit type parameters:

-  readonly showDocs = input(false);
-  readonly isSubscribed = input(false);
+  readonly showDocs = input<boolean>(false);
+  readonly isSubscribed = input<boolean>(false);

Also applies to: 17-18

packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.ts (1)

216-220: Remove redundant store selection

This select(...) call without subscription is a no-op and should be removed.

-          const windowId = self.windowId();
-          self.store.select(selectActiveEnvironmentsList(windowId));
+          const windowId = self.windowId();
           this.unsubscribe = self.store
             .select(selectActiveEnvironmentsList(windowId))
             .subscribe((list) => {

packages/altair-app/src/app/modules/altair/components/beta-indicator/beta-indicator.component.ts (1)

1-1: Tidy imports and enable OnPush change detection

• Remove unused OnInit import.
• Prefer ChangeDetectionStrategy.OnPush (project guideline).

-import { Component, OnInit, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';

Apply outside this range in the decorator:

 @Component({
   selector: 'app-beta-indicator',
   templateUrl: './beta-indicator.component.html',
-  styles: [],
+  styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })

As per coding guidelines

packages/altair-app/src/app/modules/altair/components/upgrade-dialog/upgrade-dialog.component.ts (1)

22-24: Use computed() for proPlanInfo and call signal getters in template

• Signal inputs still fire ngOnChanges in Angular 17.1.x, but the recommended pattern is

  readonly proPlanInfo = computed(() =>
    this.planInfos().find(p => p.role === 'pro')
  );

• Invoke your signals in the template as functions: showDialog(), userPlan(), and planInfos().

packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts (1)

21-31: Migrate remaining @input properties to signal-based inputs.
Convert apiUrl, selectedOperation, and streamState to use readonly … = input() since they don’t require two-way binding.

packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.ts (1)

19-23: Type your outputs; keep API clear

EventEmitters are untyped; add generics for stronger API. Mixing classic @Input (showDialog) with signal inputs is OK.

-  @Output() toggleDialog = new EventEmitter();
-  @Output() saveChange = new EventEmitter();
+  @Output() toggleDialog = new EventEmitter<boolean>();
+  @Output() saveChange = new EventEmitter<Event>();

Also applies to: 24-26, 27-35

packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts (1)

52-71: Prefer emit() over next() for EventEmitter; type outputs

For consistency and clarity, use emit() and add generics.

-  @Output() activeWindowChange = new EventEmitter();
+  @Output() activeWindowChange = new EventEmitter<string>();
@@
-    this.activeWindowChange.next(windowId);
+    this.activeWindowChange.emit(windowId);
@@
-  @Output() windowNameChange = new EventEmitter();
+  @Output() windowNameChange = new EventEmitter<{ windowId: string; windowName: string }>();
@@
-      this.windowNameChange.next({ windowId, windowName });
+      this.windowNameChange.emit({ windowId, windowName });
@@
-  @Output() removeWindowChange = new EventEmitter();
+  @Output() removeWindowChange = new EventEmitter<string>();
@@
-    return this.removeWindowChange.next(windowId);
+    return this.removeWindowChange.emit(windowId);
@@
-  @Output() reorderWindowsChange = new EventEmitter<string[]>();
+  @Output() reorderWindowsChange = new EventEmitter<string[]>();
@@
-    this.reorderWindowsChange.next(windowIds);
+    this.reorderWindowsChange.emit(windowIds);
@@
-  @Output() duplicateWindowChange = new EventEmitter();
+  @Output() duplicateWindowChange = new EventEmitter<string>();
@@
-    this.duplicateWindowChange.next(windowId);
+    this.duplicateWindowChange.emit(windowId);

Also applies to: 73-91, 93-99, 101-107

packages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts (1)

28-34: Use an effect to react to collections signal changes
While signal-based inputs still fire ngOnChanges, an effect ensures setTreeNodes() runs whenever collections() updates:

-import { Component, Output, EventEmitter, Input, OnChanges, SimpleChanges, input } from '@angular/core';
+import { Component, Output, EventEmitter, Input, OnChanges, SimpleChanges, input, effect } from '@angular/core';
@@
 export class AddCollectionQueryDialogComponent implements OnChanges {
@@
   constructor(private collectionService: QueryCollectionService) {
     effect(() => {
       const cols = this.collections();
       if (cols) this.setTreeNodes(cols);
     });
   }

Also apply the same pattern at lines 51–59.

packages/altair-app/src/app/modules/altair/components/query-result/query-result.component.ts (1)

70-75: Reuse signals only after initialization

this.tabSize() runs while creating class fields, before Angular wires up the input signal. This will crash or at least lock in the default value, so later input changes never update the editor config. Move the array setup into a lifecycle hook (e.g., ngOnInit) or wrap it in a computed(() => …) so it reads tabSize() lazily.

packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.ts (1)

164-227: Replace ngOnChanges logic with signal effects

All the properties referenced here are now input() signals. Angular does not invoke ngOnChanges for signal inputs, so none of these update branches (schema, tab size, line numbers, variables, window ID, shortcut mapping, etc.) will ever fire after the initial render. Any runtime updates pushed in from the parent will silently be ignored, leaving the editor desynced. Please move these reactions into effect(() => …) blocks (or convert the inputs back to @Input) so they run whenever the corresponding signal changes, and drop the SimpleChanges plumbing altogether. The betaDisableNewEditor branch can be removed at the same time—it references an input that no longer exists.

packages/altair-app/src/app/modules/altair/components/codemirror/codemirror.component.ts (1)

69-77: Signal input migration complete.

All @Input properties have been successfully migrated to signal-based input() functions with appropriate defaults and types.

Note: The past review comment about an unmigrated @Input decorator is no longer applicable, as all inputs have now been migrated.

packages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.ts (1)

25-25: Signal inputs don't trigger ngOnChanges (duplicate issue).

The expanded input was migrated to a signal at line 29, but ngOnChanges at lines 53-57 attempts to react to changes in expanded. Signal-based inputs created with input() do not trigger the OnChanges lifecycle hook, so the logic updating showContent will never execute when expanded changes externally.

This issue was previously flagged. Apply the suggested fix from the earlier review: replace ngOnChanges with an effect() that watches the expanded signal and updates showContent accordingly.

Also applies to: 53-57

packages/altair-app/src/app/modules/altair/containers/window/window.component.ts (1)

297-301: TODO reminder: Consider completing the signal migration for store selects.

The current implementation correctly uses this.windowId() to read the signal value. However, as noted in the TODO comment, the entire store subscription pattern could be migrated to use signal-based selectors for consistency.

Do you want me to generate a signal-based refactor for this store subscription or open a new issue to track this migration task?

packages/altair-app/src/app/modules/altair/components/banner/banner.component.ts (1)

6-6: Remove unused Input import.

The Input decorator is no longer used after migrating to the signal-based input() function.

Apply this diff to remove the unused import:

 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   input,
-  Input,
   Output,
 } from '@angular/core';

packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.ts (1)

93-101: Remove commented-out code.

The old subscription-based code should be deleted now that the migration to effects is complete.

Apply this diff:

-    // this.selectedTeam$.subscribe(async (team) => {
-    //   if (!team) {
-    //     return;
-    //   }
-    //   this.teamName = team.name;
-    //   this.teamDescription = team.description ?? '';
-
-    //   this.membersOfSelectedTeam = await accountService.getTeamMembers(team.id);
-    // });

packages/altair-app/src/app/modules/altair/components/query-result/query-result.component.ts (1)

72-77: Initialize CodeMirror extensions reactively.

editorExtensions is constructed in a class field, so this.tabSize() is read before Angular delivers input updates and never re-evaluates. After the migration, any runtime tabSize changes silently stop updating the editor configuration. Move this setup into a computed (or a lifecycle hook) so it reacts to signal updates, and add the corresponding import.

-  editorExtensions: Extension[] = [
-    json(),
-    EditorState.readOnly.of(true),
-    indentUnit.of(' '.repeat(this.tabSize())),
-    EditorState.tabSize.of(this.tabSize()),
-  ];
+  readonly editorExtensions = computed<Extension[]>(() => [
+    json(),
+    EditorState.readOnly.of(true),
+    indentUnit.of(' '.repeat(this.tabSize())),
+    EditorState.tabSize.of(this.tabSize()),
+  ]);

Don’t forget to import computed from @angular/core.

packages/altair-app/src/app/modules/altair/directives/theme/theme.directive.ts (1)

22-25: Handle CSP nonce changes when caching Emotion instance.

The effect never re-reads cspNonce() once the Emotion instance is cached, so a nonce rotation leaves the cached instance stuck with the stale nonce and the effect won’t rerun. This recreates the CSP issue noted earlier. Please track cspNonce() inside the effect and clear/recreate the cache whenever it changes.

-  constructor() {
-    effect(() => {
-      this.applyTheme(this.appTheme(), this.appDarkTheme(), this.appAccentColor());
-    });
-  }
+  private lastNonce?: string;
+
+  constructor() {
+    effect(() => {
+      const nonce = this.cspNonce();
+      if (this.lastNonce !== nonce) {
+        this.emotionInstance = undefined;
+        this.lastNonce = nonce || undefined;
+      }
+
+      this.applyTheme(
+        this.appTheme(),
+        this.appDarkTheme(),
+        this.appAccentColor(),
+      );
+    });
+  }
@@
-        nonce: this.cspNonce() || undefined,
+        nonce: this.lastNonce,
       });

Also applies to: 63-66

packages/altair-app/src/app/modules/altair/components/query-revision-dialog/query-revision-dialog.component.ts (1)

1-1: Critical: Signal-based inputs don't trigger OnChanges (still unresolved).

The migration from @Input() to input() signals breaks the ngOnChanges lifecycle hook. Signal-based inputs don't populate the SimpleChanges object, so changes.queryId?.currentValue (line 23) will always be undefined, preventing revisions from being fetched when queryId changes.

This issue was already flagged in the previous review but remains unaddressed.

Replace the OnChanges approach with an effect() that watches the queryId signal:

 import {
   Component,
   EventEmitter,
-  OnChanges,
   Output,
-  SimpleChanges,
   input,
-  inject
+  inject,
+  effect
 } from '@angular/core';
 import { ApiService } from '../../services';
 import { QueryItemRevision } from '@altairgraphql/db';
 import { QueryItemRevisionWithUsername } from '@altairgraphql/api-utils';

 @Component({
   selector: 'app-query-revision-dialog',
   templateUrl: './query-revision-dialog.component.html',
   styles: ``,
   standalone: false,
 })
-export class QueryRevisionDialogComponent implements OnChanges {
+export class QueryRevisionDialogComponent {
-  private api = inject(ApiService);
-
   readonly showDialog = input(true);
   readonly queryId = input('');
   @Output() restoreRevision = new EventEmitter<QueryItemRevision>();
   @Output() toggleDialogChange = new EventEmitter<boolean>();

   revisions: QueryItemRevisionWithUsername[] = [];
+  
+  private api = inject(ApiService);
+
+  constructor() {
+    effect(() => {
+      const id = this.queryId();
+      if (id) {
+        this.api.getQueryRevisions(id).then((res) => {
+          this.revisions = res;
+        });
+      }
+    });
+  }

-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.queryId?.currentValue) {
-      const queryId = changes.queryId.currentValue;
-      // fetch revisions
-      this.api.getQueryRevisions(queryId).then((res) => {
-        this.revisions = res;
-      });
-    }
-  }
 }

Also applies to: 12-12, 22-30

packages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.ts (2)

61-66: Use effect() instead of ngOnInit to react to signal input changes.

With signal-based inputs, ngOnInit only executes once during component initialization. If authData changes after initialization, the form will not be updated, leading to stale data.

As noted in the previous review, replace ngOnInit with an effect() in the constructor to ensure the form updates whenever the authData signal changes:

+import { effect } from '@angular/core';
+
 export class AuthorizationOauth2Component implements OnInit {
+  constructor() {
+    effect(() => {
+      const authData = this.authData();
+      if (authData) {
+        this.form.patchValue(authData);
+      }
+    });
+  }
+
-  ngOnInit(): void {
-    const authData = this.authData();
-    if (authData) {
-      this.form.patchValue(authData);
-    }
-  }
+  ngOnInit(): void {}

---

62-65: Add type guard and cast for authData before patchValue.

authData is typed as unknown, but FormGroup.patchValue() expects a shape compatible with the form structure. Guard and cast the value to ensure type safety at build time and prevent runtime errors.

Apply this diff:

 const authData = this.authData();
-if (authData) {
-  this.form.patchValue(authData);
+if (authData && typeof authData === 'object') {
+  this.form.patchValue(authData as Partial<typeof this.form.value>);
 }

packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.ts (1)

164-227: Critical: ngOnChanges does not work with signal inputs.

Signal inputs declared with input() do not participate in ngOnChanges or provide SimpleChanges when updated. The current implementation will not respond to input changes as expected.

Additionally, the betaDisableNewEditor block (lines 214-226) references a non-existent input and should be removed.

Recommended fix:

Remove the ngOnChanges hook entirely and replace with targeted effect() calls to react to signal changes:

-  ngOnChanges(changes: SimpleChanges) {
-    // If there is a new schema, update the editor schema
-    if (changes?.gqlSchema?.currentValue) {
-      this.updateNewEditorSchema(changes.gqlSchema.currentValue);
-      // Validate the schema to know if we can work with it
-      const validationErrors = this.gqlService.validateSchema(
-        changes.gqlSchema.currentValue
-      );
-      if (validationErrors.length) {
-        const errorList = validationErrors
-          .map((error) => '<br><br>' + error.message)
-          .join('');
-        this.notifyService.warning(
-          `
-          The schema definition is invalid according to the GraphQL specs.
-          Linting and other functionalities would be unavailable.
-          ${errorList}
-        `,
-          'Altair',
-          { disableTimeOut: true }
-        );
-      }
-    }
-
-    if (changes?.tabSize?.currentValue) {
-      this.updateNewEditorTabSize(changes.tabSize.currentValue);
-    }
-
-    if (changes?.disableLineNumbers?.currentValue) {
-      this.updateNewEditorDisableLineNumber(this.disableLineNumbers());
-    }
-
-    if (changes?.query?.currentValue && this.selectedIndex !== 0) {
-      // Set current tab to Query if query is updated
-      this.selectedIndex = 0;
-    }
-
-    if (changes?.shortcutMapping?.currentValue) {
-      // Update the editor shortcuts based on the provided shortcuts
-      this.updateEditorShortcuts(changes.shortcutMapping.currentValue);
-    }
-
-    if (changes?.variables?.currentValue && this.editor?.view) {
-      this.updateNewEditorVariableState(changes.variables.currentValue);
-    }
-
-    if (changes?.windowId?.currentValue && this.editor?.view) {
-      this.updateNewEditorWindowId(changes.windowId.currentValue);
-    }
-
-    if (changes?.betaDisableNewEditor) {
-      // Using timeout to wait for editor to be initialized.
-      // This is hacky but should be fine since the beta should be temporary
-      setTimeout(() => {
-        if (this.editor?.view) {
-          this.updateNewEditorSchema(this.gqlSchema());
-          this.updateNewEditorVariableState(this.variables());
-          this.updateNewEditorWindowId(this.windowId());
-          this.updateNewEditorTabSize(this.tabSize());
-          this.updateNewEditorDisableLineNumber(this.disableLineNumbers());
-        }
-      }, 10);
-    }
-  }

Add effects in the constructor or as class properties:

constructor() {
  // Schema change effect
  effect(() => {
    const schema = this.gqlSchema();
    if (schema && this.editor?.view) {
      this.updateNewEditorSchema(schema);
      const validationErrors = this.gqlService.validateSchema(schema);
      if (validationErrors.length) {
        const errorList = validationErrors
          .map((error) => '<br><br>' + error.message)
          .join('');
        this.notifyService.warning(
          `
          The schema definition is invalid according to the GraphQL specs.
          Linting and other functionalities would be unavailable.
          ${errorList}
        `,
          'Altair',
          { disableTimeOut: true }
        );
      }
    }
  });

  // Tab size change effect
  effect(() => {
    const tabSize = this.tabSize();
    if (this.editor?.view) {
      this.updateNewEditorTabSize(tabSize);
    }
  });

  // Line numbers change effect
  effect(() => {
    const disableLineNumbers = this.disableLineNumbers();
    if (this.editor?.view) {
      this.updateNewEditorDisableLineNumber(disableLineNumbers);
    }
  });

  // Query change effect (switch to query tab)
  effect(() => {
    const query = this.query();
    if (query && this.selectedIndex !== 0) {
      this.selectedIndex = 0;
    }
  });

  // Shortcut mapping change effect
  effect(() => {
    const shortcuts = this.shortcutMapping();
    if (this.editor?.view) {
      this.updateEditorShortcuts(shortcuts);
    }
  });

  // Variables change effect
  effect(() => {
    const variables = this.variables();
    if (this.editor?.view) {
      this.updateNewEditorVariableState(variables);
    }
  });

  // Window ID change effect
  effect(() => {
    const windowId = this.windowId();
    if (this.editor?.view) {
      this.updateNewEditorWindowId(windowId);
    }
  });
}

Note: The effects will run after view initialization, so the guards checking this.editor?.view will work correctly.

packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.ts (2)

65-74: The race condition flagged in the previous review is still present.

This async effect remains vulnerable to race conditions when selectedTeamId changes rapidly. The previous review comment suggesting switchMap or request cancellation is still valid.

---

108-111: The type inconsistency flagged in the previous review is still present.

Line 109 still sets editTeamId to an empty string instead of undefined, which is inconsistent with the signal's type and with line 167 where editUserId.set(undefined) is used correctly.

packages/altair-app/src/app/modules/altair/components/window-switcher-item/window-switcher-item.component.ts (1)

43-52: Restore the null guard before calling getWindowCollection.

This repeats the regression flagged earlier: collections$ | async feeds null initially, so this.collections() can be nullish and getWindowCollection will blow up when it forwards that to getCollection(...). Please bail out (or coerce to []) before invoking the helper.

   readonly isWindowInCollection = computed(() => {
     const w = this.window();
     const collections = this.collections();
-    return !!w && !!getWindowCollection(w, collections);
+    if (!w || !Array.isArray(collections) || !collections.length) {
+      return false;
+    }
+    return !!getWindowCollection(w, collections);
   });
   readonly isWindowUnsaved = computed(() => {
     const w = this.window();
     const collections = this.collections();
-    return !!w && windowHasUnsavedChanges(w, collections);
+    if (!w || !Array.isArray(collections) || !collections.length) {
+      return false;
+    }
+    return windowHasUnsavedChanges(w, collections);
   });

packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.ts (1)

223-226: Remove dead code on Line 224.

Line 224 calls self.store.select(selectActiveEnvironmentsList(windowId)) without subscribing or assigning the result, making it dead code.

Apply this diff to remove the unused line:

 constructor(view: EditorView) {
   const windowId = self.windowId();
-  self.store.select(selectActiveEnvironmentsList(windowId));
   this.unsubscribe = self.store
     .select(selectActiveEnvironmentsList(windowId))

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.ts (2)

162-166: Critical: Signal array mutation - duplicate of previous review.

This code still directly calls .pop() on the signal's array value, which mutates it. Signals require immutable updates using .set() or .update().

Apply the fix from the previous review:

   goBack() {
-    if (this.docHistory().length) {
-      this.setDocView(this.docHistory().pop());
+    const history = [...this.docHistory()];
+    const lastView = history.pop();
+    if (lastView) {
+      this.docHistory.set(history);
+      this.setDocView(lastView);
     }
   }

---

179-183: Critical: Signal array mutation - duplicate of previous review.

This code still directly calls .push() on the signal's array value, which mutates it. Signals require immutable updates using .update(). Additionally, the this.docView() existence check is unnecessary since docView is always a signal function.

Apply the fix from the previous review:

   updateDocHistory() {
-    if (this.docView() && this.docView().view !== 'search') {
-      this.docHistory().push({ ...this.docView() });
+    if (this.docView().view !== 'search') {
+      this.docHistory.update(history => [...history, { ...this.docView() }]);
     }
   }

packages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.ts (2)

1-1: Remove unused lifecycle imports.

OnChanges and SimpleChanges are no longer needed since signal inputs don't trigger ngOnChanges. These should be removed as part of fixing the critical reactivity issue flagged in the previous review.

Apply this diff:

-import { Component, OnInit, Output, EventEmitter, ViewChild, ElementRef, OnChanges, SimpleChanges, ChangeDetectionStrategy, input, inject } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, ViewChild, ElementRef, ChangeDetectionStrategy, input, inject } from '@angular/core';

---

13-13: Remove OnChanges interface implementation.

The OnChanges interface is incompatible with signal-based inputs. This should be removed as part of addressing the critical reactivity issue identified in the previous review.

Apply this diff:

-export class VariableFileItemComponent implements OnInit, OnChanges {
+export class VariableFileItemComponent implements OnInit {

packages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.ts (1)

26-26: Signal inputs don't trigger ngOnChanges.

The expanded input was migrated to a signal, but the component still implements OnChanges and has an ngOnChanges method that attempts to react to changes in expanded. Signal-based inputs created with input() do not trigger the OnChanges lifecycle hook, so the logic updating showContent will never execute when expanded changes externally.

Replace ngOnChanges with an effect() to react to the expanded signal:

 import {
   Component,
   Output,
   EventEmitter,
   ChangeDetectionStrategy,
-  OnChanges,
-  SimpleChanges,
   input,
   inject,
+  effect,
 } from '@angular/core';

-export class QueryCollectionItemComponent implements OnChanges {
+export class QueryCollectionItemComponent {
   private modal = inject(NzModalService);

   readonly collectionTree = input.required<IQueryCollectionTree>();
   readonly loggedIn = input(false);
   readonly queriesSortBy = input<SortByOptions>('newest');
   readonly expanded = input(true);

   ...

   showContent = true;

-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.expanded?.currentValue !== undefined) {
-      this.showContent = changes.expanded.currentValue;
-    }
+  constructor() {
+    effect(() => {
+      this.showContent = this.expanded();
+    });
   }

Also applies to: 54-58

packages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.ts (1)

1-26: Keep the form reactive to authData.

With the new signal-based authData, patching the form only in ngOnInit means later input changes are ignored, so the form shows stale credentials. Wire the signal into an effect (and bring in the effect import) so every authData() change refreshes the form, then drop the now-unused ngOnInit logic.

-import { ChangeDetectionStrategy, Component, OnInit, Output, input, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, Output, effect, input, inject } from '@angular/core';
@@
-  readonly authData = input<unknown>();
+  readonly authData = input<unknown>();
+  private readonly syncAuthData = effect(() => {
+    const authData = this.authData();
+    if (authData) {
+      this.basicForm.patchValue(authData as Partial<typeof this.basicForm.value>);
+    }
+  });
@@
-    const authData = this.authData();
-    if (authData) {
-      this.basicForm.patchValue(authData);
-    }
+    // kept empty because the signal-backed effect handles updates
   }

packages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.ts (1)

1-45: Keep form state in sync with the authorizationState signal

You still patch typeForm only in ngOnInit, so later updates to authorizationState() never reach the form. With signal inputs we need an effect that reacts whenever the signal changes. Please wire it reactively instead of relying on one-time init.

-import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, input, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, effect, input, inject } from '@angular/core';
@@
-export class AuthorizationEditorComponent implements OnInit {
+export class AuthorizationEditorComponent {
@@
-  ngOnInit(): void {
-    const authorizationState = this.authorizationState();
-    if (authorizationState) {
-      this.typeForm.patchValue({
-        type: authorizationState.type,
-      });
-    }
-  }
+  private readonly syncAuthorizationTypeEffect = effect(() => {
+    const authorizationState = this.authorizationState();
+    if (authorizationState) {
+      this.typeForm.patchValue({ type: authorizationState.type });
+    }
+  });

packages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.ts (1)

1-26: Sync bearerForm with authData signal reactively

authData() is read only in ngOnInit, so later input updates never update the form. Hook an effect to the signal so the form stays current.

-import { ChangeDetectionStrategy, Component, OnInit, Output, input, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Output, effect, input, inject } from '@angular/core';
@@
-export class AuthorizationBearerComponent implements OnInit {
+export class AuthorizationBearerComponent {
@@
-  readonly authData = input<unknown>();
+  readonly authData = input<unknown>();
+  private readonly syncAuthDataEffect = effect(() => {
+    const authData = this.authData();
+    if (authData) {
+      this.bearerForm.patchValue(authData as Partial<{ token: string }>);
+    }
+  });
@@
-  ngOnInit(): void {
-    const authData = this.authData();
-    if (authData) {
-      this.bearerForm.patchValue(authData);
-    }
-  }

packages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.ts (1)

1-55: Signal inputs no longer trigger ngOnChanges.

With input() signals, Angular never calls ngOnChanges, so updateLocalSettings() is never invoked when the settings input updates. The dialog therefore shows stale data and fails to react to parent changes. Please remove the OnChanges implementation and replace it with an effect() that watches the signal.

-import { Component, OnInit, Output, EventEmitter, SimpleChanges, OnChanges, input, inject } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, input, inject, effect } from '@angular/core';
@@
-export class SettingsDialogComponent implements OnInit, OnChanges {
+export class SettingsDialogComponent implements OnInit {
@@
   readonly showSettingsDialog = input(false);
@@
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes?.settings?.currentValue) {
-      this.updateLocalSettings(
-        JSON.stringify(changes.settings.currentValue, null, 2)
-      );
-    }
-  }
+  private readonly syncSettingsEffect = effect(() => {
+    const currentSettings = this.settings();
+    if (currentSettings) {
+      this.updateLocalSettings(JSON.stringify(currentSettings, null, 2));
+    }
+  });

packages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.ts (1)

12-23: Critical: Add cleanup to prevent memory leak in debounce effect.

The debounce function's effect doesn't register a cleanup callback, which means:

1. If the component is destroyed while a timeout is pending, the timeout won't be cleared, causing a memory leak
2. The setTimeout callback may execute after component destruction, potentially causing errors

Apply this diff to add proper cleanup:

 export function debounce<T>(input: Signal<T>, delay = 300) {
   const out = signal(input());
-  let timeout: any;
+  let timeout: ReturnType<typeof setTimeout> | undefined;
 
-  effect(() => {
+  effect((onCleanup) => {
     const value = input();
     clearTimeout(timeout);
     timeout = setTimeout(() => out.set(value), delay);
+    onCleanup(() => {
+      if (timeout) clearTimeout(timeout);
+      timeout = undefined;
+    });
   });
 
   return out.asReadonly();
 }

Additionally, consider moving this utility to a shared utilities file (e.g., packages/altair-app/src/app/modules/altair/utils/signals.ts) rather than exporting from a component file, as it's likely to be reused across components.

packages/altair-app/src/app/modules/altair/components/banner-container/banner-container.component.ts (1)

7-12: Consider OnPush change detection strategy.

For components that rely primarily on observables with the async pipe (as this one likely does), ChangeDetectionStrategy.OnPush can improve performance by reducing unnecessary change detection cycles.

Apply this diff to add OnPush:

-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';

 @Component({
   selector: 'app-banner-container',
   templateUrl: './banner-container.component.html',
   styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })

As per coding guidelines.

packages/altair-app/.eslintrc.js (2)

43-43: Remove commented-out code.

The commented rule appears to be replaced by the active prefer-standalone rule on line 44. Remove the comment to keep the configuration clean.

Apply this diff:

       '@angular-eslint/prefer-on-push-component-change-detection': 'warn',
-      // '@angular-eslint/prefer-standalone-component': 'warn',
       '@angular-eslint/prefer-standalone': 'warn',

---

42-52: Add explanatory comments for rule configurations.

Consider adding brief comments explaining why rules are set to 'off' or 'warn', especially for rules that are disabled. This improves maintainability and helps future contributors understand the rationale.

Example pattern:

// Disabled during signals migration; re-evaluate after completion
'@angular-eslint/consistent-component-styles': 'off',
// Defer key sorting to avoid noise during refactoring
'@angular-eslint/sort-keys-in-type-decorator': 'off',

packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.ts (1)

85-93: Remove commented-out code.

This commented code appears to be the old subscription-based implementation that was replaced by the effect above. It should be removed to keep the codebase clean.

Apply this diff:

     });
-    // this.selectedTeam$.subscribe(async (team) => {
-    //   if (!team) {
-    //     return;
-    //   }
-    //   this.teamName = team.name;
-    //   this.teamDescription = team.description ?? '';
-
-    //   this.membersOfSelectedTeam = await accountService.getTeamMembers(team.id);
-    // });
   }

packages/altair-app/src/app/modules/altair/components/beta-indicator/beta-indicator.component.ts (1)

17-21: Consider adding explicit type annotations for signal inputs.

While the input signals correctly default to InputSignal<string>, adding explicit type annotations improves code clarity and catches type mismatches earlier.

-  readonly title = input('');
-  readonly description = input('');
+  readonly title = input<string>('');
+  readonly description = input<string>('');
...
-  readonly featureKey = input('');
+  readonly featureKey = input<string>('');

packages/altair-app/src/app/modules/altair/directives/cached-if.directive.ts (2)

8-9: Inconsistent type parameter usage in inject() calls.

Line 8 explicitly provides a type parameter inject<TemplateRef<unknown>>(TemplateRef) while line 9 omits it inject(ViewContainerRef). For consistency and clarity, either provide type parameters for both or rely on type inference consistently.

Apply this diff for consistency:

-private templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-private viewContainer = inject(ViewContainerRef);
+private templateRef = inject(TemplateRef<unknown>);
+private viewContainer = inject(ViewContainerRef);

Or explicitly annotate both if preferred:

-private templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-private viewContainer = inject(ViewContainerRef);
+private templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+private viewContainer = inject<ViewContainerRef>(ViewContainerRef);

---

28-28: Consider preserving original view position on re-attachment.

viewContainer.insert(this.cachedViewRef) without an index parameter inserts the view at the end of the container. If the directive's original position matters, this could cause layout shifts. Consider inserting at index 0 or storing the original index.

If position matters, apply this diff:

-this.viewContainer.insert(this.cachedViewRef);
+this.viewContainer.insert(this.cachedViewRef, 0);

packages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts (1)

43-43: Consider initializing with empty string for clarity.

The signal is initialized with this.windowTitle() which will return the default value (empty string) at construction time before Angular sets the input. The resetEffect (lines 56-60) then updates it when the input changes. While this works correctly, initializing directly to signal('') would make the intent clearer since the effect handles all updates.

Apply this diff if you prefer explicit initialization:

-  readonly newCollectionQueryTitle = signal(this.windowTitle());
+  readonly newCollectionQueryTitle = signal('');

packages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.ts (1)

66-84: Normalize local storageType semantics
Ensure all local collections have storageType: 'local' (rather than relying on undefined) or update the filter to only check for 'local'. Confirm this aligns with how storageType is assigned in query-collection.service.

packages/altair-app/src/app/modules/altair/components/schema-form/schema-form-item/schema-form-item.component.html (1)

40-45: Fix select signal binding and dynamic name.

Same issue here: [(ngModel)]="data" overwrites the signal, and the literal name="item.key" never binds to the real key. Use the signal read/write helpers and bind the name.

-                <nz-select
-                  [(ngModel)]="data"
-                  name="item.key"
-                  nzPlaceHolder="Choose"
-                  (ngModelChange)="data.set($event)"
-                >
+                <nz-select
+                  [ngModel]="data()"
+                  [name]="item.key"
+                  nzPlaceHolder="Choose"
+                  (ngModelChange)="data.set($event)"
+                >

packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html (5)

79-79: ARIA labels added — consider redundancy and state.

• If visible text matches, aria-label may be redundant and can override inner text. Prefer relying on visible text unless you need a different label.
• For active/toggle items, consider adding [attr.aria-current]="true" or [attr.aria-pressed]="..." appropriately.

As per coding guidelines; Based on learnings

Also applies to: 92-92, 104-104, 117-117, 137-137, 149-149, 163-163, 175-175, 188-188, 201-201, 222-222, 246-247, 259-259, 273-273

---

82-83: Ensure decorative icons are hidden from AT, or provide labels when meaningful.

If app-icon is decorative, set aria-hidden="true" (ideally internally by the component). If it conveys meaning not otherwise exposed, ensure an accessible name exists on the control/container.

As per coding guidelines; Based on learnings

Also applies to: 95-96, 108-109, 121-122, 130-131, 140-141, 153-154, 167-167, 179-179, 192-193, 204-205, 229-232, 249-250, 264-265, 281-282, 300-301, 314-315, 323-324, 331-332, 339-340

---

284-289: Use charAt(0) instead of at(0) for broader runtime support (avatar initial).

String.prototype.at is ES2022 and may not exist in older runtimes. Prefer charAt(0) or a safe fallback.

- [nzText]="(account$ | async)?.firstName?.at(0)"
+ [nzText]="(account$ | async)?.firstName?.charAt(0)"

---

214-239: Reduce repeated async pipe subscriptions with @let locals.

Multiple uses of (account$ | async), (windowsMeta$ | async), etc. cause multiple subscriptions and change detections. Use @let to cache.

Example:

@let account = account$ | async;
@let meta = windowsMeta$ | async;

<div [ngClass]="{ 'side-menu-item--active': account?.loggedIn }">...</div>
<app-upgrade-dialog [showDialog]="meta?.showUpgradeDialog" [userPlan]="account?.plan" ... />

Also applies to: 352-372, 443-461

---

242-255: Plugin manager menu visibility — OK. Consider aria-expanded on trigger if submenu toggles.

Looks good behind enableExperimental. If this item controls a submenu/popup, expose [attr.aria-expanded] reflecting the open state.

As per coding guidelines; Based on learnings

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/angular-components.instructions.md:0-0
Timestamp: 2025-10-03T16:35:29.117Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.component.html : Use semantic HTML elements in templates

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/angular-components.instructions.md:0-0
Timestamp: 2025-10-03T16:35:29.117Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.component.html : Include proper ARIA attributes in templates for accessibility

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/angular-components.instructions.md:0-0
Timestamp: 2025-10-03T16:35:29.117Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.component.html : Use ng-zorro Ant Design components for UI in templates

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/main.instructions.md:0-0
Timestamp: 2025-10-03T16:39:27.517Z
Learning: Applies to packages/altair-app/**/*.{ts,html} : Implement and modify the main web app using Angular conventions within packages/altair-app

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/angular-components.instructions.md:0-0
Timestamp: 2025-10-03T16:35:29.117Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.component.ts : Place Angular component classes under packages/altair-app/src/app/modules/altair/components/

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/angular-components.instructions.md:0-0
Timestamp: 2025-10-03T16:35:29.117Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.component.ts : Implement appropriate Angular lifecycle hooks (e.g., OnInit, OnDestroy)

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/angular-components.instructions.md:0-0
Timestamp: 2025-10-03T16:35:29.117Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.component.{ts,html,scss,spec.ts} : Use kebab-case for all component-related filenames (e.g., query-editor.component.ts/html/scss/spec.ts)

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/angular-components.instructions.md:0-0
Timestamp: 2025-10-03T16:35:29.117Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.component.ts : Use Input and Output decorators to define the component API

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/app-testing.instructions.md:0-0
Timestamp: 2025-09-24T19:40:17.905Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.spec.ts : Test component interactions with services using mocks

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/app-testing.instructions.md:0-0
Timestamp: 2025-09-24T19:40:17.905Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.spec.ts : Test state management and property changes of components

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/testing.instructions.md:0-0
Timestamp: 2025-10-03T16:41:45.498Z
Learning: Applies to packages/altair-app/**/*.{test,spec}.ts : In components, test methods, business logic, event emissions, state changes, lifecycle, and integration with injected services

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/app-testing.instructions.md:0-0
Timestamp: 2025-09-24T19:40:17.905Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.spec.ts : Test component lifecycle behavior

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/angular-components.instructions.md:0-0
Timestamp: 2025-10-03T16:35:29.117Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.component.spec.ts : Mock external dependencies and services in tests

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/nestjs-api.instructions.md:0-0
Timestamp: 2025-10-03T16:40:52.954Z
Learning: Applies to packages/altair-api/src/**/*.spec.ts : Mock dependencies properly in tests

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/app-testing.instructions.md:0-0
Timestamp: 2025-09-24T19:40:17.905Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.spec.ts : Avoid fragile emission index tracking across multiple actions in a single test; isolate scenarios per it block

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/app-testing.instructions.md:0-0
Timestamp: 2025-09-24T19:40:17.905Z
Learning: Applies to packages/altair-app/src/app/modules/altair/components/**/*.spec.ts : Focus on asserting state changes in response to actions

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/nestjs-api.instructions.md:0-0
Timestamp: 2025-10-03T16:40:52.954Z
Learning: Applies to packages/altair-api/src/**/*.spec.ts : Use NestJS testing utilities (TestingModule, Test) in unit tests

Learnt from: CR
PR: altair-graphql/altair#0
File: .github/instructions/testing.instructions.md:0-0
Timestamp: 2025-10-03T16:41:45.498Z
Learning: Applies to packages/altair-app/**/*.{test,spec}.ts : Mock services and external dependencies in component tests

packages/altair-app/src/app/modules/altair/containers/window/window.component.spec.ts (1)

100-101: Same concern as previously flagged.

The ngOnInit override remains problematic as noted in the previous review comment. This bypasses initialization logic and could hide bugs during the signals migration.

packages/altair-app/src/app/modules/altair/components/schema-form/schema-form-item/schema-form-item.component.spec.ts (1)

32-32: LGTM: Correct migration to signal-based API.

The change from direct assignment to .set() correctly adapts to the signal/model-based data property.

Consider adding tests for signal behavior and state changes:

it('should update data signal when set is called', () => {
  const testData = { key: 'value' };
  component.data.set(testData);
  expect(component.data()).toEqual(testData);
});

it('should handle null or undefined data', () => {
  expect(() => component.data.set(null)).not.toThrow();
  expect(() => component.data.set(undefined)).not.toThrow();
});

packages/altair-app/src/app/modules/altair/components/schema-form/schema-form-item-input/schema-form-item-input.component.spec.ts (1)

25-25: LGTM: Correct migration to signal-based API.

The change from direct assignment to .set('') correctly adapts to the signal/model-based data property.

Consider adding tests for string input handling:

it('should update data signal with string values', () => {
  component.data.set('test value');
  expect(component.data()).toBe('test value');
});

it('should handle empty string', () => {
  component.data.set('');
  expect(component.data()).toBe('');
});

packages/altair-app/src/app/modules/altair/components/schema-form/schema-form-item-list/schema-form-item-list.component.spec.ts (1)

27-27: LGTM: Correct migration to signal-based API.

The change from direct assignment to .set([]) correctly adapts to the signal/model-based data property.

Consider adding tests for array data handling:

it('should update data signal with array values', () => {
  const testData = [{ id: 1 }, { id: 2 }];
  component.data.set(testData);
  expect(component.data()).toEqual(testData);
});

it('should handle empty array', () => {
  component.data.set([]);
  expect(component.data()).toEqual([]);
});

packages/altair-app/src/app/modules/altair/directives/cached-if.directive.spec.ts (2)

1-1: Remove unused imports.

MockInstance (line 1) and ElementRef (line 3) are imported but never used in the test. Removing them improves code cleanliness.

-import { MockInstance } from 'ng-mocks';
 import { CachedIfDirective } from './cached-if.directive';
-import { ElementRef, TemplateRef, ViewContainerRef } from '@angular/core';
+import { TemplateRef, ViewContainerRef } from '@angular/core';
 import { mock } from 'testing';
 import { inject, TestBed } from '@angular/core/testing';

Also applies to: 3-3

---

26-31: Expand test coverage to verify directive behavior.

The test currently only verifies instantiation. Per coding guidelines, tests should focus on business logic and behavior. Consider adding tests for:

• How the directive handles truthy/falsy conditions
• View creation and caching behavior
• Interaction with TemplateRef and ViewContainerRef

Example test structure:

it('should create view when condition is true', inject(
  [CachedIfDirective],
  (directive: CachedIfDirective) => {
    // Test view creation logic
  }
));

it('should cache and reuse view when toggling condition', inject(
  [CachedIfDirective],
  (directive: CachedIfDirective) => {
    // Test caching behavior
  }
));

packages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.ts (2)

36-40: Add OnPush change detection strategy.

The component is now fully signal-based and should use ChangeDetectionStrategy.OnPush for optimal performance. This aligns with the coding guidelines and matches the pattern used in related components like AddCollectionQueryDialogComponent and QueryCollectionItemComponent.

Apply this diff:

+import { ChangeDetectionStrategy } from '@angular/core';
+
 @Component({
   selector: 'app-query-collections',
   templateUrl: './query-collections.component.html',
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })

Based on coding guidelines.

---

71-73: Mark derived signal as readonly.

The searchTerm signal is derived from searchInput via the debounce utility and should be marked readonly to prevent accidental mutation and clarify that it's a computed value.

Apply this diff:

 readonly workspaceId = signal('');
 readonly searchInput = signal('');
-searchTerm = debounce(this.searchInput, 300);
+readonly searchTerm = debounce(this.searchInput, 300);

packages/altair-app/src/testing/utils.ts (1)

155-155: Consider preserving stricter propsData type.

The propsData variable is typed as Record<string, unknown>, which is less strict than mountOptions.propsData's type (Partial<{[K in AllowedPropsDataKeys<C>]-?: AllowedPropsDataValue<C, K>}>). This widens the type and loses compile-time safety.

Consider preserving the stricter type:

-  const propsData: Record<string, unknown> = mountOptions.propsData ?? {};
+  const propsData = mountOptions.propsData ?? {} as Partial<{
+    [K in AllowedPropsDataKeys<C>]-?: AllowedPropsDataValue<C, K>;
+  }>;

If the wider type is intentional for internal flexibility, this can be ignored.

packages/altair-app/src/app/modules/altair/directives/set-css-variables/set-css-variables.directive.spec.ts (1)

4-4: Simplify ElementRef mock.

The MockElementRef class is unnecessary since it doesn't add any functionality. You can provide ElementRef directly in the factory.

Apply this diff to simplify:

-class MockElementRef extends ElementRef {}
-
 describe('SetCssVariablesDirective', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
       teardown: { destroyAfterEach: false },
       imports: [],
       providers: [
         SetCssVariablesDirective,
         {
           provide: ElementRef,
-          useFactory: () => new MockElementRef(document.body),
+          useValue: new ElementRef(document.body),
         },
       ],
     })
   );

Also applies to: 13-16

packages/altair-app/src/app/modules/altair/directives/theme/theme.directive.spec.ts (2)

14-19: Modernize to use TestBed.inject() pattern.

The inject() function used here is from an older Angular testing pattern. Modern Angular tests use TestBed.inject() directly, which is more explicit and aligns with current best practices.

Apply this diff:

-  it('should create an instance', inject(
-    [ThemeDirective],
-    (directive: ThemeDirective) => {
-      expect(directive).toBeTruthy();
-    }
-  ));
+  it('should create an instance', () => {
+    const directive = TestBed.inject(ThemeDirective);
+    expect(directive).toBeTruthy();
+  });

---

9-9: Remove empty imports array.

The empty imports: [] array serves no purpose and can be removed for cleaner configuration.

Apply this diff:

     TestBed.configureTestingModule({
       teardown: { destroyAfterEach: false },
-      imports: [],
       providers: [ThemeDirective, NzConfigService],
     })

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro