output migration (#2911)

### 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 -->

## Summary by Sourcery

Refactor all Angular components to use the new `output()` signal helper
for outputs instead of `@Output()` EventEmitter, replacing `.next()`
calls with `.emit()` and updating corresponding template bindings.

Enhancements:
- Migrate component outputs from EventEmitter to readonly signal-based
outputs using the `output()` helper.
- Replace all `.next()` invocations with `.emit()` and update event
bindings in templates to use `.emit()`.
- Remove obsolete imports of `Output` and `EventEmitter` across multiple
components.

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

- Refactor
- Migrated many components/directives from EventEmitter/@output to
Angular signal-based outputs; templates updated from next(...) to
emit(...). Minor public API signature tweaks and one action payload type
refined.
- Documentation
- Updated Angular component guidelines to recommend input/output
helpers.
- Style
  - Disabled standalone-component lint rule in ESLint.
- Bug Fixes
  - History dialog now closes automatically after restoring an entry.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: imolorhe

.github/instructions/angular-components.instructions.md

@@ -9,51 +9,55 @@ These instructions guide the development of Angular components in the Altair Gra
 ## Component Structure and Conventions
 
 ### File Naming and Organization
+
 - Components are located in `packages/altair-app/src/app/modules/altair/components/`
 - Follow kebab-case naming convention for component files (e.g., `query-editor.component.ts`)
 - Each component should have its own directory with related files (.ts, .html, .scss, .spec.ts)
 
 ### Component Class Structure
+
 - Use OnPush change detection strategy for better performance when possible
 - Implement lifecycle hooks appropriately (OnInit, OnDestroy, etc.)
 - Follow the single responsibility principle - each component should have one clear purpose
 - Use dependency injection for services and dependencies
 
 ### State Management
+
 - Use reactive programming patterns with RxJS observables
 - Properly manage subscriptions and clean them up in ngOnDestroy
 - Emit events using Angular's EventEmitter for parent-child communication
-- Use Input() and Output() decorators for component API
+- Use input and output for component API
 
 ### Example Component Pattern:
+
 ```typescript
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
   styleUrls: ['./example.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleComponent implements OnInit, OnDestroy {
-  @Input() inputProperty: string = '';
-  @Output() someEvent = new EventEmitter<SomeType>();
-  
+  readonly inputProperty = input<string>('');
+  readonly someEvent = output<SomeType>();
+
   private subscription: Subscription;
-  
+
   constructor(
     private store: Store<RootState>,
     private someService: SomeService
   ) {}
-  
+
   ngOnInit() {
-    this.subscription = this.store.select(selectSomeState).subscribe(state => {
+    this.subscription = this.store.select(selectSomeState).subscribe((state) => {
       // Handle state changes
     });
   }
-  
+
   ngOnDestroy() {
     this.subscription?.unsubscribe();
   }
-  
+
   onSomeAction() {
     this.someEvent.emit(someData);
   }
@@ -63,30 +67,35 @@ export class ExampleComponent implements OnInit, OnDestroy {
 ## UI Library Integration
 
 ### ng-zorro Components
+
 - Use ng-zorro ant design components for consistent UI
 - Follow existing patterns for modal dialogs, forms, and navigation
 - Don't test ng-zorro component properties in unit tests - focus on business logic
 
 ### Form Handling
+
 - Use Angular reactive forms for complex forms
 - Implement proper validation and error handling
 - Follow accessibility guidelines
 
 ## Testing Guidelines
+
 - Write unit tests focusing on component business logic only
 - Use the custom testing framework in `packages/altair-app/src/testing`
 - Test event emissions, state changes, and method behavior
 - Mock external dependencies and services
 - Don't test UI library components or template rendering details
 
 ## Performance Considerations
+
 - Use OnPush change detection where appropriate
 - Implement trackBy functions for ngFor loops
 - Lazy load components when possible
 - Avoid memory leaks by properly unsubscribing from observables
 
 ## Accessibility
+
 - Include proper ARIA attributes for screen readers
 - Ensure keyboard navigation works correctly
 - Use semantic HTML elements
-- Test with accessibility tools
+- Test with accessibility tools

packages/altair-app/.eslintrc.js

@@ -40,7 +40,7 @@ module.exports = {
         ],
         '@angular-eslint/prefer-on-push-component-change-detection': 'warn',
         // '@angular-eslint/prefer-standalone-component': 'warn',
-        '@angular-eslint/prefer-standalone': 'warn',
+        '@angular-eslint/prefer-standalone': 'off',
         '@angular-eslint/consistent-component-styles': 'off',
         '@angular-eslint/sort-keys-in-type-decorator': 'off',
         '@angular-eslint/use-injectable-provided-in': 'warn',

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

@@ -1,9 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Output,
   input,
+  output
 } from '@angular/core';
 import { AccountState } from 'altair-graphql-core/build/types/state/account.interfaces';
 import { apiClient } from '../../services/api/api.service';
@@ -20,9 +19,9 @@ import { IdentityProvider } from '@altairgraphql/db';
 export class AccountDialogComponent {
   readonly showDialog = input(true);
   readonly account = input<AccountState>();
-  @Output() toggleDialogChange = new EventEmitter<boolean>();
-  @Output() handleLoginChange = new EventEmitter<IdentityProvider>();
-  @Output() logoutChange = new EventEmitter();
+  readonly toggleDialogChange = output<boolean>();
+  readonly handleLoginChange = output<IdentityProvider>();
+  readonly logoutChange = output();
 
   submitLogin(provider: IdentityProvider = IdentityProvider.GOOGLE) {
     this.handleLoginChange.emit(provider);

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

@@ -1,9 +1,8 @@
 import {
   Component,
-  Output,
-  EventEmitter,
   ChangeDetectionStrategy,
-  input
+  input,
+  output
 } from '@angular/core';
 
 @Component({
@@ -16,12 +15,12 @@ import {
 export class ActionBarComponent {
   readonly showDocs = input(false);
   readonly isSubscribed = input(false);
-  @Output() toggleHeaderDialog = new EventEmitter();
-  @Output() toggleVariableDialog = new EventEmitter();
-  @Output() toggleDocsChange = new EventEmitter();
-  @Output() reloadDocsChange = new EventEmitter();
-  @Output() prettifyCodeChange = new EventEmitter();
-  @Output() sendRequest = new EventEmitter();
-  @Output() clearEditorChange = new EventEmitter();
-  @Output() toggleSubscriptionUrlDialog = new EventEmitter();
+  readonly toggleHeaderDialog = output();
+  readonly toggleVariableDialog = output();
+  readonly toggleDocsChange = output();
+  readonly reloadDocsChange = output();
+  readonly prettifyCodeChange = output();
+  readonly sendRequest = output();
+  readonly clearEditorChange = output();
+  readonly toggleSubscriptionUrlDialog = output();
 }

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

@@ -1,4 +1,13 @@
-import { Component, Output, EventEmitter, input, effect, ChangeDetectionStrategy, signal, computed, inject } from '@angular/core';
+import {
+  Component,
+  input,
+  effect,
+  ChangeDetectionStrategy,
+  signal,
+  computed,
+  inject,
+  output,
+} from '@angular/core';
 import { WORKSPACES } from 'altair-graphql-core/build/types/state/workspace.interface';
 import {
   IQueryCollection,
@@ -24,18 +33,18 @@ export class AddCollectionQueryDialogComponent {
   readonly loggedIn = input(false);
   readonly workspaces = input<WorkspaceOption[]>([]);
 
-  @Output() toggleDialogChange = new EventEmitter();
-  @Output() createCollectionAndSaveQueryToCollectionChange = new EventEmitter<{
+  readonly toggleDialogChange = output<boolean>();
+  readonly createCollectionAndSaveQueryToCollectionChange = output<{
     queryName: string;
     collectionName: string;
     parentCollectionId: string;
     workspaceId: string;
   }>();
-  @Output() saveQueryToCollectionChange = new EventEmitter<{
+  readonly saveQueryToCollectionChange = output<{
     queryName: string;
     collectionId: string;
   }>();
-  @Output() newCollectionParentCollectionIdChange = new EventEmitter();
+  readonly newCollectionParentCollectionIdChange = output();
 
   get parentCollectionRootId() {
     return '0'; // 0 for root

packages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.ts

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, OnInit, Output, input, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  input,
+  inject,
+} from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { NonNullableFormBuilder } from '@angular/forms';
 import { ApiKeyAuthorizationProviderInput } from 'altair-graphql-core/build/authorization/providers/api-key';
 
@@ -17,7 +24,7 @@ export class AuthorizationApikeyComponent implements OnInit {
     headerValue: '',
   });
   readonly authData = input<unknown>();
-  @Output() authDataChange = this.apiKeyForm.valueChanges;
+  readonly authDataChange = outputFromObservable(this.apiKeyForm.valueChanges);
 
   ngOnInit(): void {
     const authData = this.authData();

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

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, OnInit, Output, input, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  input,
+  inject,
+} from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { NonNullableFormBuilder } from '@angular/forms';
 
 @Component({
@@ -16,7 +23,7 @@ export class AuthorizationBasicComponent implements OnInit {
     password: '',
   });
   readonly authData = input<unknown>();
-  @Output() authDataChange = this.basicForm.valueChanges;
+  readonly authDataChange = outputFromObservable(this.basicForm.valueChanges);
 
   ngOnInit(): void {
     const authData = this.authData();

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

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, OnInit, Output, input, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  Output,
+  input,
+  inject,
+} from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { NonNullableFormBuilder } from '@angular/forms';
 
 @Component({
@@ -15,7 +23,7 @@ export class AuthorizationBearerComponent implements OnInit {
     token: '',
   });
   readonly authData = input<unknown>();
-  @Output() authDataChange = this.bearerForm.valueChanges;
+  readonly authDataChange = outputFromObservable(this.bearerForm.valueChanges);
 
   ngOnInit(): void {
     const authData = this.authData();

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

@@ -1,14 +1,21 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, input, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  input,
+  inject,
+  output,
+} from '@angular/core';
 import { NonNullableFormBuilder } from '@angular/forms';
 import {
-  AUTHORIZATION_TYPES,
   AUTHORIZATION_TYPE_LIST,
   AuthorizationState,
   AuthorizationTypes,
   DEFAULT_AUTHORIZATION_TYPE,
 } from 'altair-graphql-core/build/types/state/authorization.interface';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { AUTHORIZATION_MAPPING } from '../authorizations';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-authorization-editor',
@@ -27,11 +34,13 @@ export class AuthorizationEditorComponent implements OnInit {
   });
 
   readonly authorizationState = input<AuthorizationState>();
-  @Output() authTypeChange = this.typeForm.valueChanges.pipe(
-    map(({ type }) => type ?? DEFAULT_AUTHORIZATION_TYPE),
-    distinctUntilChanged()
+  readonly authTypeChange = outputFromObservable(
+    this.typeForm.valueChanges.pipe(
+      map(({ type }) => type ?? DEFAULT_AUTHORIZATION_TYPE),
+      distinctUntilChanged()
+    )
   );
-  @Output() authDataChange = new EventEmitter();
+  readonly authDataChange = output<unknown>();
   AUTH_MAPPING = AUTHORIZATION_MAPPING;
   AUTH_TYPES = AUTHORIZATION_TYPE_LIST;
 

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

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, OnInit, Output, input, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  input,
+  inject,
+} from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { NonNullableFormBuilder } from '@angular/forms';
 import { getAltairConfig } from 'altair-graphql-core/build/config';
 import {
@@ -54,7 +61,7 @@ export class AuthorizationOauth2Component implements OnInit {
   requestFormat = RequestFormat;
 
   readonly authData = input<unknown>();
-  @Output() authDataChange = this.form.valueChanges;
+  readonly authDataChange = outputFromObservable(this.form.valueChanges);
 
   optionsShape = this.getOptionsShape();