output migration #2911
output migration #2911
Conversation
Reviewer's GuideThis PR migrates Angular component outputs from EventEmitter-based @output properties to a signals-based API using the output() helper, and updates all dispatch calls and templates accordingly. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughReplaces many Angular @output() EventEmitter public outputs with signal-style Changes
Sequence Diagram(s)sequenceDiagram
participant Comp as Component
participant Parent as Parent/Consumer
Note over Comp,Parent #e6f7ff: Public outputs migrated to signal outputs (output()/outputFromObservable)
Comp->>Comp: internalAction()
activate Comp
Comp-->>Parent: outputSignal.emit(payload)
deactivate Comp
Note right of Parent #fff7e6: Parent receives via existing handler binding (no name change)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @imolorhe, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request undertakes a substantial refactoring effort to modernize the application's Angular components. It systematically replaces the traditional Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Hey there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.ts:98-99` </location>
<code_context>
async onDeleteTeam(id: string) {
if (confirm('Are you sure you want to delete this team?')) {
await this.accountService.deleteTeam(id);
+ // TODO: The 'emit' function requires a mandatory string argument
this.reloadTeamChange.emit();
}
}
</code_context>
<issue_to_address>
**issue (bug_risk):** Calling emit() without an argument may cause runtime errors.
Since 'reloadTeamChange' expects a string, ensure emit() is called with a string argument, such as the team ID or an empty string, to maintain type safety.
</issue_to_address>
### Comment 2
<location> `packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts:51` </location>
<code_context>
onClickWindow(windowId: string) {
- this.activeWindowChange.next(windowId);
+ this.activeWindowChange.emit(windowId);
}
</code_context>
<issue_to_address>
**nitpick:** Consider specifying the output type for activeWindowChange for clarity.
Specify output<string>() for 'activeWindowChange' to ensure type safety and consistency with the rest of the codebase.
</issue_to_address>
### Comment 3
<location> `packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.ts:22` </location>
<code_context>
readonly width = input(520);
- @Output() toggleDialog = new EventEmitter();
- @Output() saveChange = new EventEmitter();
+ readonly toggleDialog = output();
+ readonly saveChange = output();
</code_context>
<issue_to_address>
**nitpick:** toggleDialog output is used with emit(!this.showDialog()), but its type is not specified.
Specify output<boolean>() for toggleDialog to ensure type safety and improve code clarity.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.ts
Outdated
Show resolved
Hide resolved
...es/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts
Show resolved
Hide resolved
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Code Review
This pull request successfully migrates component outputs from @Output() with EventEmitter to the new signal-based output() API across the application. The changes are consistent and well-executed. I've found a few instances in teams-dialog.component.ts where the new output<string>() is used without providing the required string argument, which I've flagged with suggestions for fixes. Overall, this is a great modernization effort.
| if (confirm('Are you sure you want to delete this team?')) { | ||
| await this.accountService.deleteTeam(id); | ||
| // TODO: The 'emit' function requires a mandatory string argument | ||
| this.reloadTeamChange.emit(); |
There was a problem hiding this comment.
The reloadTeamChange output expects a string argument, but emit() is called without one. You should pass the id of the team being deleted.
| this.reloadTeamChange.emit(); | |
| this.reloadTeamChange.emit(id); |
|
|
||
| this.resetMemberForm(); | ||
| // TODO: The 'emit' function requires a mandatory string argument | ||
| this.reloadTeamChange.emit(); |
There was a problem hiding this comment.
The reloadTeamChange output expects a string argument. You should pass the selectedTeamId here to indicate which team's member list has been updated.
| this.reloadTeamChange.emit(); | |
| this.reloadTeamChange.emit(selectedTeamId); |
There was a problem hiding this comment.
Actionable comments posted: 15
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.html (1)
63-63: Trigger file picker or supply required payload on add files button
The(click)handler on line 63 callsaddFileVariableChange.emit()without the required{ name, data, isMultiple }payload and no<input type="file">is wired up. Bind a hidden file input and invokeonSelectFiles(...), or adjust the click handler to emit the correct payload.
🧹 Nitpick comments (11)
packages/altair-app/src/app/modules/altair/components/headers-editor/headers-editor.component.ts (1)
32-34: Restore explicitvoidpayload for no-arg outputs.With
output()untyped, the emitter now acceptsunknown, so future emits can accidentally carry data that templates/listeners were never meant to receive. Previously these wereEventEmitter<void>; please keep that contract withoutput<void>()(and similarly fordoneChange) to retain type safety.packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.ts (1)
66-67: Add type parameters for type safety.The signal-based output declarations are correctly implemented, but they lack explicit type parameters. Consider adding generic types to improve type safety:
blurChangeemits a string value (line 358:this.blurChange.emit(this.value())), so it should beoutput<string>()submitChangeemits no value (line 169:this.submitChange.emit()), so it should beoutput<void>()Apply this diff to add type parameters:
- readonly blurChange = output(); - readonly submitChange = output(); + readonly blurChange = output<string>(); + readonly submitChange = output<void>();packages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.ts (1)
37-38: Consider adding type parameter forsettingsJsonChange.The migration is correct and the outputs work as expected. However, since
settingsJsonChangeemits a string value (line 68 emitsthis.jsonSettingswhich is typed asstringat line 46), consider adding an explicit type parameter for better type safety.Apply this diff to add explicit typing:
readonly toggleDialogChange = output(); - readonly settingsJsonChange = output(); + readonly settingsJsonChange = output<string>();packages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.ts (1)
18-20: Consider adding type parameter forrestoreHistoryChange.The migration is correct. However, since
restoreHistoryChangeemits a number value (line 23 emitsindex), consider adding an explicit type parameter for better type safety.Apply this diff to add explicit typing:
readonly toggleDialogChange = output(); - readonly restoreHistoryChange = output(); + readonly restoreHistoryChange = output<number>(); readonly clearHistoryChange = output();packages/altair-app/src/app/modules/altair/components/pre-request-editor/pre-request-editor.component.ts (1)
24-25: Restore strict typing on new outputs
output()without a generic falls back tounknown, so downstream handlers lose the previous string/boolean typings. Please carry the concrete types forward.- readonly preRequestScriptChange = output(); - readonly preRequestEnabledChange = output(); + readonly preRequestScriptChange = output<string>(); + readonly preRequestEnabledChange = output<boolean>();As per coding guidelines
packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-directive/doc-viewer-directive.component.ts (1)
21-21: Consider adding explicit type annotation for better type safety.The output emits an object with shape
{ name: string }. Adding an explicit type parameter would improve type safety and make the API clearer.Apply this diff to add explicit typing:
- readonly goToTypeChange = output(); + readonly goToTypeChange = output<{ name: string }>();packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.ts (1)
51-53: Consider adding explicit type annotations for better type safety.The outputs emit objects with specific shapes. Adding explicit type parameters would improve type safety.
Apply this diff to add explicit typing:
- readonly goToFieldChange = output(); - readonly goToTypeChange = output(); - readonly goToDirectiveChange = output(); + readonly goToFieldChange = output<{ name: string; parentType: string }>(); + readonly goToTypeChange = output<{ name: string }>(); + readonly goToDirectiveChange = output<{ name: string }>();packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.ts (1)
25-28: Consider adding explicit type annotations for better type safety.The outputs emit objects with specific shapes. Adding explicit type parameters would improve type safety and API clarity.
Apply this diff to add explicit typing:
- readonly goToFieldChange = output(); - readonly goToTypeChange = output(); - readonly addToEditorChange = output(); - readonly sortFieldsByChange = output(); + readonly goToFieldChange = output<{ name: string; parentType: string }>(); + readonly goToTypeChange = output<{ name: string }>(); + readonly addToEditorChange = output<{ name: string; parentType: string }>(); + readonly sortFieldsByChange = output<SortByOptions>();packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.ts (1)
35-38: Consider adding explicit type annotations for better type safety.The outputs emit objects with specific shapes. Adding explicit type parameters would improve type safety.
Apply this diff to add explicit typing:
- readonly goToFieldChange = output(); - readonly goToTypeChange = output(); - readonly addToEditorChange = output(); - readonly sortFieldsByChange = output(); + readonly goToFieldChange = output<{ name: string; parentType: string }>(); + readonly goToTypeChange = output<{ name: string }>(); + readonly addToEditorChange = output<{ name: string; parentType: string }>(); + readonly sortFieldsByChange = output<SortByOptions>();packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.ts (1)
48-52: Good use of explicit type forsetDocViewChange!The explicit type parameter for
setDocViewChangeis great. Consider adding types to the other outputs as well for consistency and improved type safety.Apply this diff to add explicit typing to the remaining outputs:
- readonly toggleDocsChange = output(); + readonly toggleDocsChange = output<void>(); readonly setDocViewChange = output<DocView>(); - readonly addQueryToEditorChange = output(); - readonly exportSDLChange = output(); - readonly loadSchemaChange = output(); + readonly addQueryToEditorChange = output<string>(); + readonly exportSDLChange = output<void>(); + readonly loadSchemaChange = output<void>();packages/altair-app/src/app/modules/altair/components/set-variable-dialog/set-variable-dialog.component.ts (1)
18-19: Specify generic types for outputs and ensure event emissions use.emit()
- Add explicit type parameters:
- readonly toggleVariableDialog = output(); - readonly variablesChange = output(); + readonly toggleVariableDialog = output<void>(); + readonly variablesChange = output<string>();
- No
.next()calls remain; use.emit()on these outputs for any event emission.
...dules/altair/components/authorization/authorization-editor/authorization-editor.component.ts
Outdated
Show resolved
Hide resolved
packages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.ts
Outdated
Show resolved
Hide resolved
...es/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.html
Show resolved
Hide resolved
...air-app/src/app/modules/altair/components/import-curl-dialog/import-curl-dialog.component.ts
Outdated
Show resolved
Hide resolved
...p/src/app/modules/altair/components/query-collection-item/query-collection-item.component.ts
Outdated
Show resolved
Hide resolved
packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.ts
Outdated
Show resolved
Hide resolved
packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.ts
Show resolved
Hide resolved
packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts
Show resolved
Hide resolved
packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts
Outdated
Show resolved
Hide resolved
...es/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts (1)
35-43: Add explicitvoidtype parameters to outputs with no payload.Six outputs emit no values but lack explicit
output<void>()type parameters:toggleDocsChange,reloadDocsChange,addToCollectionChange,sendRequest,exportWindowChange, andupdateQueryInCollectionChange. While TypeScript infersvoid, explicit typing improves clarity and prevents accidental misuse.Apply this diff to add explicit void type parameters:
- readonly toggleDocsChange = output(); - readonly reloadDocsChange = output(); - readonly addToCollectionChange = output(); - readonly sendRequest = output(); + readonly toggleDocsChange = output<void>(); + readonly reloadDocsChange = output<void>(); + readonly addToCollectionChange = output<void>(); + readonly sendRequest = output<void>(); readonly urlChange = output<string>(); readonly httpVerbChange = output<HttpVerb>(); readonly selectedOperationChange = output<string | undefined>(); - readonly exportWindowChange = output(); - readonly updateQueryInCollectionChange = output(); + readonly exportWindowChange = output<void>(); + readonly updateQueryInCollectionChange = output<void>();packages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.ts (1)
51-78: Excellent type safety improvements!All outputs now have appropriate type parameters. The previous concerns about
selectQueryChangeandexportCollectionChangemissing explicit types have been addressed. The type definitions are clear and consistent with the emitted payloads.packages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.ts (1)
1-18: LGTM! Migration complete.The imports are correct for the signal-based output migration. The previous concern about a missing
Outputimport has been resolved by completing the migration to signal-based outputs.
🧹 Nitpick comments (8)
packages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.ts (1)
64-64: Correct migration to signal-based output.The use of
outputFromObservable()is appropriate here sinceform.valueChangesis an Observable. The previous approach of using@Output()with a raw Observable was non-standard; the new signal-based API is the proper way to expose Observable outputs in modern Angular.The
readonlymodifier is good practice.For improved clarity, consider adding an explicit type annotation:
- readonly authDataChange = outputFromObservable(this.form.valueChanges); + readonly authDataChange = outputFromObservable<Partial<typeof this.form.value>>(this.form.valueChanges);This makes the emitted type more explicit, though inference already works correctly.
packages/altair-app/src/app/modules/altair/containers/window/window.component.ts (2)
394-401: LGTM: Default parameter improves flexibility.The addition of a default empty string parameter allows
selectOperationto be called without arguments, maintaining backward compatibility while improving API flexibility. The behavior remains unchanged: it dispatches the action and triggers a request.Optional refinement: Consider adding explicit type annotations for clarity, as per coding guidelines:
- selectOperation(selectedOperation = '') { + selectOperation(selectedOperation: string = ''): void {
427-433: LGTM: Explicit optional parameter typing.The explicit type annotation
boolean | undefined = undefinedmakes the optional parameter clear and follows the same pattern astoggleHeader(line 419). The conditional check ensures the dialog only toggles when the requested state differs from the current state.Optional refinement: Consider adding an explicit return type annotation for consistency:
- toggleVariableDialog(isOpen: boolean | undefined = undefined) { + toggleVariableDialog(isOpen: boolean | undefined = undefined): void {packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.ts (1)
82-122: Great progress on adding explicit type parameters!The migration to signal-based
output()declarations is correctly implemented with explicit type parameters addressing the previous review feedback. However, consider these refinements:
authDataChange(line 122): Theunknowntype is imprecise. Based on the coding guidelines preference for explicit types, consider defining a proper type or interface for authorization data changes.Inline object types (lines 88-90, 94-100, 102-117): Multiple outputs use inline object types for their payloads. For better maintainability and reusability, consider extracting these to named interfaces, especially for the file variable change types which share similar structures (all include
index: number).
addFileVariableChangeundefined union (lines 94-101): The union withundefinedsuggests this output can emitundefined. Verify if this is intentional or if the emission sites should always provide a value. Ifundefinedemissions are needed, this is acceptable; otherwise, remove the union.Example refactor for file variable types:
interface FileVariableChangeBase { index: number; } interface FileVariableNameChange extends FileVariableChangeBase { name: string; } interface FileVariableDataChange extends FileVariableChangeBase { fileData: File[]; fromCache?: boolean; } // Then use: readonly fileVariableNameChange = output<FileVariableNameChange>(); readonly fileVariableDataChange = output<FileVariableDataChange>();packages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.ts (1)
35-48: Consider OnPush change detection strategy.Per coding guidelines, prefer
ChangeDetectionStrategy.OnPushwhen possible. This component could benefit from OnPush, but would require testing to ensure:
- Form control value changes trigger updates correctly
- Store subscription updates are detected
- Scroll syncing continues to work
As per coding guidelines.
Apply this diff to add OnPush:
+import { ChangeDetectionStrategy } from '@angular/core'; + @UntilDestroy({ checkProperties: true }) @Component({ selector: 'app-fancy-input', templateUrl: './fancy-input.component.html', styleUrls: ['./fancy-input.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false,packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.ts (1)
66-67: Consider adding explicitvoidtype parameters for clarity.While
output()defaults tooutput<void>(), explicitly specifying the type parameter improves code readability and makes the intent clear:- readonly blurChange = output(); - readonly submitChange = output(); + readonly blurChange = output<void>(); + readonly submitChange = output<void>();packages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.ts (1)
1-9: Remove unusedOutputimport.The
Outputimport on line 5 is no longer used after migrating to signal-based outputs.Apply this diff:
import { ChangeDetectionStrategy, Component, OnInit, - Output, input, inject, } from '@angular/core';packages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts (1)
47-47: Add explicit type parameter to newCollectionParentCollectionIdChangeDeclare the output with a string payload for consistency and type safety:
- readonly newCollectionParentCollectionIdChange = output(); + readonly newCollectionParentCollectionIdChange = output<string>();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (44)
.github/instructions/angular-components.instructions.md(2 hunks)packages/altair-app/.eslintrc.js(1 hunks)packages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/banner/banner.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.html(1 hunks)packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-directive/doc-viewer-directive.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.ts(3 hunks)packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.ts(3 hunks)packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.ts(3 hunks)packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.ts(4 hunks)packages/altair-app/src/app/modules/altair/components/edit-collection-dialog/edit-collection-dialog.component.ts(3 hunks)packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.html(3 hunks)packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.ts(5 hunks)packages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.ts(3 hunks)packages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.html(2 hunks)packages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/import-curl-dialog/import-curl-dialog.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/plugin-manager/plugin-manager.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/post-request-editor/post-request-editor.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/pre-request-editor/pre-request-editor.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.html(3 hunks)packages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.ts(3 hunks)packages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.html(2 hunks)packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.ts(7 hunks)packages/altair-app/src/app/modules/altair/components/query-result/query-result.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/request-extensions-dialog/request-extensions-dialog.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/request-handler-dialog/request-handler-dialog.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.ts(3 hunks)packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts(3 hunks)packages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.html(1 hunks)packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts(5 hunks)packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.ts(3 hunks)packages/altair-app/src/app/modules/altair/containers/altair/altair.component.ts(1 hunks)packages/altair-app/src/app/modules/altair/containers/window/window.component.ts(2 hunks)packages/altair-app/src/app/modules/altair/store/collection/collection.action.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (12)
- packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.html
- packages/altair-app/src/app/modules/altair/components/pre-request-editor/pre-request-editor.component.ts
- packages/altair-app/src/app/modules/altair/components/edit-collection-dialog/edit-collection-dialog.component.ts
- packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.ts
- packages/altair-app/src/app/modules/altair/components/post-request-editor/post-request-editor.component.ts
- packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.html
- packages/altair-app/src/app/modules/altair/components/request-extensions-dialog/request-extensions-dialog.component.ts
- packages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.html
- packages/altair-app/src/app/modules/altair/components/import-curl-dialog/import-curl-dialog.component.ts
- packages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.html
- packages/altair-app/src/app/modules/altair/components/request-handler-dialog/request-handler-dialog.component.ts
- packages/altair-app/src/app/modules/altair/components/plugin-manager/plugin-manager.component.ts
🧰 Additional context used
📓 Path-based instructions (7)
packages/altair-app/src/app/modules/altair/components/**/*.component.{ts,html,scss,spec.ts}
📄 CodeRabbit inference engine (.github/instructions/angular-components.instructions.md)
Use kebab-case for all component-related filenames (e.g., query-editor.component.ts/html/scss/spec.ts)
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.htmlpackages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.tspackages/altair-app/src/app/modules/altair/components/banner/banner.component.tspackages/altair-app/src/app/modules/altair/components/x-input/x-input.component.tspackages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.tspackages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.tspackages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.tspackages/altair-app/src/app/modules/altair/components/query-result/query-result.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-directive/doc-viewer-directive.component.tspackages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.tspackages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.tspackages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.tspackages/altair-app/src/app/modules/altair/components/url-box/url-box.component.tspackages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.tspackages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.htmlpackages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts
packages/altair-app/src/app/modules/altair/components/**/*.component.html
📄 CodeRabbit inference engine (.github/instructions/angular-components.instructions.md)
packages/altair-app/src/app/modules/altair/components/**/*.component.html: Use ng-zorro Ant Design components for UI in templates
Include proper ARIA attributes in templates for accessibility
Use semantic HTML elements in templates
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.htmlpackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.html
packages/altair-app/src/app/modules/altair/components/**/*.component.{html,ts}
📄 CodeRabbit inference engine (.github/instructions/angular-components.instructions.md)
Ensure keyboard navigation works (focus management and keyboard handlers)
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.htmlpackages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.tspackages/altair-app/src/app/modules/altair/components/banner/banner.component.tspackages/altair-app/src/app/modules/altair/components/x-input/x-input.component.tspackages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.tspackages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.tspackages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.tspackages/altair-app/src/app/modules/altair/components/query-result/query-result.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-directive/doc-viewer-directive.component.tspackages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.tspackages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.tspackages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.tspackages/altair-app/src/app/modules/altair/components/url-box/url-box.component.tspackages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.tspackages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.htmlpackages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts
packages/altair-app/**/*.{ts,html}
📄 CodeRabbit inference engine (.github/instructions/main.instructions.md)
Implement and modify the main web app using Angular conventions within packages/altair-app
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.htmlpackages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.tspackages/altair-app/src/app/modules/altair/components/banner/banner.component.tspackages/altair-app/src/app/modules/altair/components/x-input/x-input.component.tspackages/altair-app/src/app/modules/altair/store/collection/collection.action.tspackages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.tspackages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.tspackages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.tspackages/altair-app/src/app/modules/altair/containers/altair/altair.component.tspackages/altair-app/src/app/modules/altair/components/query-result/query-result.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-directive/doc-viewer-directive.component.tspackages/altair-app/src/app/modules/altair/containers/window/window.component.tspackages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.tspackages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.tspackages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.tspackages/altair-app/src/app/modules/altair/components/url-box/url-box.component.tspackages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.tspackages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.htmlpackages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts
**/*.ts
📄 CodeRabbit inference engine (.github/instructions/app-testing.instructions.md)
Follow project code style using ESLint and Prettier
**/*.ts: Use explicit type annotations for function parameters and return types
Prefer interfaces over type aliases for object shapes
Use union types and literal types for better type safety
Leverage generic types for reusable components
Group imports: external libraries first, then internal modules
Use absolute imports from package roots when possible
Prefer named exports over default exports
Use custom error classes that extend Error
Implement proper error boundaries and handling
Log errors with sufficient context for debugging
Use observables (RxJS) for reactive programming patterns where appropriate
Manage subscriptions to avoid memory leaks
Use appropriate RxJS operators for data transformation
Handle errors in observable streams
Use async/await for sequential operations
Handle promise rejections properly
Use Promise.all() for concurrent operations
Implement timeout handling for long-running operations
Dispose of resources properly (subscriptions, event listeners)
Use weak references where appropriate
Avoid creating unnecessary objects in hot paths
Profile memory usage for performance-critical code
Use tree-shaking-friendly imports
Lazy load heavy modules when possible
Monitor bundle size impacts of new dependencies
Use dynamic imports for code splitting
Validate and sanitize all user inputs
Implement proper XSS and injection prevention
Validate API responses before processing
Sanitize sensitive data in logs
Follow secure coding practices
Group related functionality in modules
Keep files focused and not too large
Use consistent naming conventions
Organize imports and exports clearly
Write JSDoc comments for public APIs
Keep documentation up to date with code changes (inline docs)
Use meaningful variable and function names
Handle environment-specific APIs properly
Use TypeScript features appropriate for the configured version
Files:
packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.tspackages/altair-app/src/app/modules/altair/components/banner/banner.component.tspackages/altair-app/src/app/modules/altair/components/x-input/x-input.component.tspackages/altair-app/src/app/modules/altair/store/collection/collection.action.tspackages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.tspackages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.tspackages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.tspackages/altair-app/src/app/modules/altair/containers/altair/altair.component.tspackages/altair-app/src/app/modules/altair/components/query-result/query-result.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-directive/doc-viewer-directive.component.tspackages/altair-app/src/app/modules/altair/containers/window/window.component.tspackages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.tspackages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.tspackages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.tspackages/altair-app/src/app/modules/altair/components/url-box/url-box.component.tspackages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.tspackages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.tspackages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts
packages/altair-app/src/app/modules/altair/components/**/*.component.ts
📄 CodeRabbit inference engine (.github/instructions/angular-components.instructions.md)
packages/altair-app/src/app/modules/altair/components/**/*.component.ts: Place Angular component classes under packages/altair-app/src/app/modules/altair/components/
Prefer ChangeDetectionStrategy.OnPush for components when possible
Implement appropriate Angular lifecycle hooks (e.g., OnInit, OnDestroy)
Use Angular dependency injection for services and dependencies
Favor reactive programming with RxJS Observables for component state
Manage subscriptions and clean them up in ngOnDestroy
Emit component events using EventEmitter and expose a clear component API
Use @input and @output decorators to define the component API
Use Angular reactive forms for complex forms
Implement proper form validation and error handling
Provide trackBy functions for ngFor loops to improve performance
Avoid memory leaks by unsubscribing from Observables
Files:
packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.tspackages/altair-app/src/app/modules/altair/components/banner/banner.component.tspackages/altair-app/src/app/modules/altair/components/x-input/x-input.component.tspackages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.tspackages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.tspackages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.tspackages/altair-app/src/app/modules/altair/components/query-result/query-result.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-directive/doc-viewer-directive.component.tspackages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.tspackages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.tspackages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.tspackages/altair-app/src/app/modules/altair/components/url-box/url-box.component.tspackages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.tspackages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.tspackages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/main.instructions.md)
Use TypeScript for implementation across the codebase
Files:
packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.tspackages/altair-app/src/app/modules/altair/components/banner/banner.component.tspackages/altair-app/src/app/modules/altair/components/x-input/x-input.component.tspackages/altair-app/src/app/modules/altair/store/collection/collection.action.tspackages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.tspackages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.tspackages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.tspackages/altair-app/src/app/modules/altair/containers/altair/altair.component.tspackages/altair-app/src/app/modules/altair/components/query-result/query-result.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-directive/doc-viewer-directive.component.tspackages/altair-app/src/app/modules/altair/containers/window/window.component.tspackages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.tspackages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.tspackages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.tspackages/altair-app/src/app/modules/altair/components/url-box/url-box.component.tspackages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.tspackages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.tspackages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts
🧠 Learnings (23)
📚 Learning: 2025-10-03T16:35:29.117Z
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
Applied to files:
packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.tspackages/altair-app/src/app/modules/altair/components/x-input/x-input.component.tspackages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.tspackages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.tspackages/altair-app/src/app/modules/altair/components/query-result/query-result.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-directive/doc-viewer-directive.component.tspackages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.ts.github/instructions/angular-components.instructions.mdpackages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.tspackages/altair-app/src/app/modules/altair/components/url-box/url-box.component.tspackages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.tspackages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts
📚 Learning: 2025-10-03T16:35:29.117Z
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 : Emit component events using EventEmitter and expose a clear component API
Applied to files:
packages/altair-app/src/app/modules/altair/components/teams-dialog/teams-dialog.component.tspackages/altair-app/src/app/modules/altair/components/banner/banner.component.tspackages/altair-app/src/app/modules/altair/components/x-input/x-input.component.tspackages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.tspackages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.tspackages/altair-app/src/app/modules/altair/components/query-result/query-result.component.ts.github/instructions/angular-components.instructions.mdpackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.tspackages/altair-app/src/app/modules/altair/components/url-box/url-box.component.tspackages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.tspackages/altair-app/src/app/modules/altair/components/variable-file-item/variable-file-item.component.tspackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.tspackages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.html
📚 Learning: 2025-10-03T16:35:29.117Z
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 : Favor reactive programming with RxJS Observables for component state
Applied to files:
packages/altair-app/src/app/modules/altair/components/x-input/x-input.component.tspackages/altair-app/src/app/modules/altair/components/history-dialog/history-dialog.component.tspackages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.ts.github/instructions/angular-components.instructions.mdpackages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.tspackages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.tspackages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts
📚 Learning: 2025-10-03T16:39:27.517Z
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
Applied to files:
packages/altair-app/.eslintrc.js.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:39:27.517Z
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-core/**/*.ts : Modify shared logic/types/utilities in packages/altair-core carefully, as changes impact multiple packages; ensure thorough testing
Applied to files:
packages/altair-app/.eslintrc.js
📚 Learning: 2025-10-03T16:41:45.498Z
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
Applied to files:
packages/altair-app/.eslintrc.js.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:35:29.117Z
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/
Applied to files:
packages/altair-app/.eslintrc.js.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:41:45.498Z
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 : Use the custom testing framework in packages/altair-app/src/testing for Angular component tests
Applied to files:
packages/altair-app/.eslintrc.js
📚 Learning: 2025-09-24T19:40:17.905Z
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 : Do not test Angular framework internals
Applied to files:
packages/altair-app/.eslintrc.js
📚 Learning: 2025-10-03T16:35:29.117Z
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)
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:35:29.117Z
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)
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-09-24T19:40:17.905Z
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
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:35:29.117Z
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 : Prefer ChangeDetectionStrategy.OnPush for components when possible
Applied to files:
.github/instructions/angular-components.instructions.mdpackages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.ts
📚 Learning: 2025-10-03T16:35:29.117Z
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
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-09-24T19:40:17.905Z
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 : Only write tests for component business logic; do not test UI libraries (e.g., ng-zorro, Angular Material)
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:35:29.117Z
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 : Do not test ng-zorro component properties in unit tests; focus on business logic
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:35:29.117Z
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: Follow existing patterns for modal dialogs, forms, and navigation when using ng-zorro
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:41:45.498Z
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 : Focus on component business logic rather than UI library behavior
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-09-24T19:40:17.905Z
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 : Do not test UI library component props (e.g., nz-modal, nz-button)
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:35:29.117Z
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 : Avoid testing UI library components or template rendering details in unit tests
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:35:29.117Z
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
Applied to files:
.github/instructions/angular-components.instructions.md
📚 Learning: 2025-10-03T16:35:29.117Z
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 Angular reactive forms for complex forms
Applied to files:
packages/altair-app/src/app/modules/altair/components/authorization/authorization-oauth2/authorization-oauth2.component.ts
📚 Learning: 2025-10-03T16:35:29.117Z
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 Angular dependency injection for services and dependencies
Applied to files:
packages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts
🧬 Code graph analysis (10)
packages/altair-app/src/app/modules/altair/components/query-result/query-result.component.ts (1)
packages/altair-core/src/plugin/panel.ts (1)
AltairPanel(14-35)
packages/altair-app/src/app/modules/altair/components/query-collections/query-collections.component.ts (1)
packages/altair-core/src/types/state/collection.interfaces.ts (3)
IQuery(16-21)IQueryCollection(29-56)SortByOptions(7-7)
packages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.ts (1)
packages/altair-core/src/types/state/collection.interfaces.ts (3)
IQuery(16-21)IQueryCollectionTree(65-68)SortByOptions(7-7)
packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.ts (4)
packages/altair-core/src/types/state/query.interfaces.ts (1)
QueryEditorState(6-10)packages/altair-core/src/types/state/docs.interfaces.ts (1)
DocView(21-26)packages/altair-core/src/types/state/authorization.interface.ts (1)
AuthorizationTypes(14-15)packages/altair-app/src/app/modules/altair/utils/editor/helpers.ts (1)
posToOffset(4-6)
packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.ts (1)
packages/altair-core/src/types/state/collection.interfaces.ts (1)
SortByOptions(7-7)
packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.ts (1)
packages/altair-core/src/types/state/collection.interfaces.ts (1)
SortByOptions(7-7)
packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts (1)
packages/altair-core/src/types/state/query.interfaces.ts (1)
HttpVerb(72-72)
packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.ts (1)
packages/altair-core/src/types/state/environments.interfaces.ts (1)
EnvironmentState(25-30)
packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.ts (1)
packages/altair-core/src/types/state/docs.interfaces.ts (1)
DocView(21-26)
packages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.ts (1)
packages/altair-core/src/types/state/authorization.interface.ts (1)
DEFAULT_AUTHORIZATION_TYPE(12-12)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (19)
- GitHub Check: sites / Deploy Sandbox / Deploy Iframe Sandbox
- GitHub Check: sites / Deploy Docs / Deploy Documentation
- GitHub Check: sites / Deploy Login Redirect / Deploy Login Redirect
- GitHub Check: sites / Deploy Web App / Deploy Web App
- GitHub Check: tauri / tauri (windows-latest)
- GitHub Check: tauri / tauri (ubuntu-22.04)
- GitHub Check: tauri / tauri (macos-latest, --target aarch64-apple-darwin)
- GitHub Check: tauri / tauri (macos-latest, --target x86_64-apple-darwin)
- GitHub Check: electron / electron (windows-latest)
- GitHub Check: electron / electron (ubuntu-latest)
- GitHub Check: tests / api-e2e-test
- GitHub Check: electron / electron (macos-latest)
- GitHub Check: tests / test (ubuntu-latest)
- GitHub Check: docker / docker
- GitHub Check: tests / test (macos-latest)
- GitHub Check: tests / e2e-test (macos-latest)
- GitHub Check: tests / e2e-test (ubuntu-latest)
- GitHub Check: Sourcery review
- GitHub Check: build_and_preview
...es/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts
Show resolved
Hide resolved
|
Visit the preview URL for this PR (updated for commit a474d05): https://altair-gql--pr2911-imolorhe-output-migr-l8arnx67.web.app (expires Mon, 20 Oct 2025 04:30:01 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 02d6323d75a99e532a38922862e269d63351a6cf |
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts(4 hunks)packages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts(1 hunks)packages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.ts(1 hunks)packages/altair-app/src/testing/wrapper/index.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
{**/__tests__/**/*.ts,**/*.{spec,test}.ts}
📄 CodeRabbit inference engine (.github/instructions/app-testing.instructions.md)
{**/__tests__/**/*.ts,**/*.{spec,test}.ts}: Use Jest as the testing framework for all tests
Organize tests next to the code under test: use a tests folder or .test.ts/.spec.ts files alongside sources
Use clear, descriptive test names explaining what is being verified
Mock dependencies with Jest to isolate the unit under test
Leverage TypeScript types in tests; define interfaces/types for expected data shapes
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
**/*.ts
📄 CodeRabbit inference engine (.github/instructions/app-testing.instructions.md)
Follow project code style using ESLint and Prettier
**/*.ts: Use explicit type annotations for function parameters and return types
Prefer interfaces over type aliases for object shapes
Use union types and literal types for better type safety
Leverage generic types for reusable components
Group imports: external libraries first, then internal modules
Use absolute imports from package roots when possible
Prefer named exports over default exports
Use custom error classes that extend Error
Implement proper error boundaries and handling
Log errors with sufficient context for debugging
Use observables (RxJS) for reactive programming patterns where appropriate
Manage subscriptions to avoid memory leaks
Use appropriate RxJS operators for data transformation
Handle errors in observable streams
Use async/await for sequential operations
Handle promise rejections properly
Use Promise.all() for concurrent operations
Implement timeout handling for long-running operations
Dispose of resources properly (subscriptions, event listeners)
Use weak references where appropriate
Avoid creating unnecessary objects in hot paths
Profile memory usage for performance-critical code
Use tree-shaking-friendly imports
Lazy load heavy modules when possible
Monitor bundle size impacts of new dependencies
Use dynamic imports for code splitting
Validate and sanitize all user inputs
Implement proper XSS and injection prevention
Validate API responses before processing
Sanitize sensitive data in logs
Follow secure coding practices
Group related functionality in modules
Keep files focused and not too large
Use consistent naming conventions
Organize imports and exports clearly
Write JSDoc comments for public APIs
Keep documentation up to date with code changes (inline docs)
Use meaningful variable and function names
Handle environment-specific APIs properly
Use TypeScript features appropriate for the configured version
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.tspackages/altair-app/src/testing/wrapper/index.ts
packages/altair-app/src/app/modules/altair/components/**/*.spec.ts
📄 CodeRabbit inference engine (.github/instructions/app-testing.instructions.md)
packages/altair-app/src/app/modules/altair/components/**/*.spec.ts: Only write tests for component business logic; do not test UI libraries (e.g., ng-zorro, Angular Material)
Test component business logic and methods
Test event emissions using wrapper.emitted()
Test state management and property changes of components
Test component lifecycle behavior
Always cover edge cases (null, rapid calls, invalid inputs) in component tests
Verify method return values and side effects in components
Test component interactions with services using mocks
Do not test UI library component props (e.g., nz-modal, nz-button)
Do not test template rendering details
Do not test third-party library behavior
Do not test Angular framework internals
Do not test CSS styling or visual appearance
Access component under test via wrapper.componentInstance for properties and methods
Use wrapper.emitted() to assert emitted events
Focus on asserting state changes in response to actions
Always include tests for error and edge conditions
Avoid fragile emission index tracking across multiple actions in a single test; isolate scenarios per it block
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
packages/altair-app/src/app/modules/altair/components/**/*.component.{ts,html,scss,spec.ts}
📄 CodeRabbit inference engine (.github/instructions/angular-components.instructions.md)
Use kebab-case for all component-related filenames (e.g., query-editor.component.ts/html/scss/spec.ts)
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
packages/altair-app/src/app/modules/altair/components/**/*.component.spec.ts
📄 CodeRabbit inference engine (.github/instructions/angular-components.instructions.md)
packages/altair-app/src/app/modules/altair/components/**/*.component.spec.ts: Do not test ng-zorro component properties in unit tests; focus on business logic
Write unit tests that focus on component business logic (events, state changes, methods)
Use the custom testing utilities from packages/altair-app/src/testing in unit tests
Mock external dependencies and services in tests
Avoid testing UI library components or template rendering details in unit tests
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/main.instructions.md)
Use TypeScript for implementation across the codebase
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.tspackages/altair-app/src/testing/wrapper/index.ts
packages/altair-app/**/*.{ts,html}
📄 CodeRabbit inference engine (.github/instructions/main.instructions.md)
Implement and modify the main web app using Angular conventions within packages/altair-app
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.tspackages/altair-app/src/testing/wrapper/index.ts
**/*.{spec,test}.{ts,tsx,js}
📄 CodeRabbit inference engine (.github/instructions/main.instructions.md)
Write and maintain tests; Jest is used for most testing
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
**/*.{test,spec}.{ts,js}
📄 CodeRabbit inference engine (.github/instructions/testing.instructions.md)
**/*.{test,spec}.{ts,js}: Follow the Arrange-Act-Assert (AAA) pattern in tests
Write descriptive test names that explain expected behavior
Keep tests focused and independent
Use consistent naming conventions across all test files
Group related tests using describe blocks
Use nested describe blocks for different methods or scenarios
Place setup code in beforeEach or beforeAll hooks
Clean up resources in afterEach or afterAll hooks
Mock external dependencies to isolate units under test
Use Jest's mocking capabilities effectively
Create reusable mock factories for common dependencies
Verify interactions with mocked dependencies when necessary
Use async/await for testing promises
Test both success and error scenarios in async code
Handle timeouts appropriately in async tests
Test concurrent operations when relevant
For NestJS controllers, test HTTP handling, response formatting, auth, and error/status codes; mock service dependencies
For NestJS services, test business logic, data transformations, error handling/validation, and verify logging/monitoring calls
For API integration tests, test endpoints end-to-end, use test DB/transactions, test auth flows, and verify API contracts/responses
For browser extensions, mock browser APIs (chrome., browser.), test message passing, content scripts, and verify manifest configuration
Write performance tests for critical code paths and set performance budgets/thresholds
Monitor test execution times and profile memory usage in tests
Load test API endpoints, verify graceful degradation, check for resource cleanup/memory leaks, and monitor performance metrics
E2E tests should focus on critical user journeys, use realistic data, test cross-browser, and verify integrations
Use dedicated test environments, mock external services appropriately, ensure data consistency, and clean up test artifacts
Create reusable test data factories and use realistic but anonymized data; version fixtures with code and clean up after tests
Maintain high t...
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
packages/altair-app/**/*.{test,spec}.ts
📄 CodeRabbit inference engine (.github/instructions/testing.instructions.md)
packages/altair-app/**/*.{test,spec}.ts: Use the custom testing framework in packages/altair-app/src/testing for Angular component tests
Focus on component business logic rather than UI library behavior
Mock services and external dependencies in component tests
Test component lifecycle methods appropriately
In components, test methods, business logic, event emissions, state changes, lifecycle, and integration with injected services
Do NOT test UI library component properties, template rendering details, CSS, or third-party library behavior in component tests
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
**/*.{spec,test}.ts
📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)
**/*.{spec,test}.ts: Write unit tests focusing on business logic and behavior
Use descriptive test names
Mock external dependencies appropriately in tests
Test edge cases and error conditions
Files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
🧠 Learnings (13)
📚 Learning: 2025-09-24T19:40:17.905Z
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
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
📚 Learning: 2025-09-24T19:40:17.905Z
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
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
📚 Learning: 2025-09-24T19:40:17.905Z
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 event emissions using wrapper.emitted()
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/testing/wrapper/index.ts
📚 Learning: 2025-09-24T19:40:17.905Z
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 : Use wrapper.emitted() to assert emitted events
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/testing/wrapper/index.ts
📚 Learning: 2025-09-24T19:40:17.905Z
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
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
📚 Learning: 2025-09-24T19:40:17.905Z
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
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
📚 Learning: 2025-10-03T16:41:45.498Z
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
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
📚 Learning: 2025-09-24T19:40:17.905Z
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 : Do not test Angular framework internals
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.tspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
📚 Learning: 2025-09-24T19:40:17.905Z
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 : Verify method return values and side effects in components
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
📚 Learning: 2025-09-24T19:40:17.905Z
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
Applied to files:
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
📚 Learning: 2025-10-03T16:41:45.498Z
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 : Use the custom testing framework in packages/altair-app/src/testing for Angular component tests
Applied to files:
packages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
📚 Learning: 2025-10-03T16:35:29.117Z
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 : Use the custom testing utilities from packages/altair-app/src/testing in unit tests
Applied to files:
packages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
📚 Learning: 2025-10-03T16:35:29.117Z
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 : Emit component events using EventEmitter and expose a clear component API
Applied to files:
packages/altair-app/src/testing/wrapper/index.ts
🧬 Code graph analysis (1)
packages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.ts (3)
packages/altair-app/src/app/modules/altair/directives/set-css-variables/set-css-variables.directive.ts (1)
Directive(4-30)packages/altair-app/src/app/modules/altair/directives/cached-if.directive.ts (1)
Directive(13-62)packages/altair-app/src/app/modules/altair/directives/theme/theme.directive.ts (1)
Directive(7-84)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (19)
- GitHub Check: sites / Deploy Login Redirect / Deploy Login Redirect
- GitHub Check: sites / Deploy Sandbox / Deploy Iframe Sandbox
- GitHub Check: sites / Deploy Docs / Deploy Documentation
- GitHub Check: sites / Deploy Web App / Deploy Web App
- GitHub Check: tauri / tauri (macos-latest, --target x86_64-apple-darwin)
- GitHub Check: tauri / tauri (ubuntu-22.04)
- GitHub Check: tauri / tauri (windows-latest)
- GitHub Check: electron / electron (windows-latest)
- GitHub Check: electron / electron (ubuntu-latest)
- GitHub Check: tauri / tauri (macos-latest, --target aarch64-apple-darwin)
- GitHub Check: docker / docker
- GitHub Check: electron / electron (macos-latest)
- GitHub Check: tests / e2e-test (macos-latest)
- GitHub Check: tests / test (macos-latest)
- GitHub Check: tests / test (ubuntu-latest)
- GitHub Check: tests / e2e-test (ubuntu-latest)
- GitHub Check: tests / api-e2e-test
- GitHub Check: Sourcery review
- GitHub Check: build_and_preview
🔇 Additional comments (5)
packages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.ts (3)
1-1: LGTM! Import changes align with signal-based output migration.The imports correctly reflect the migration from
@Outputdecorator andEventEmitterto the signal-basedoutput()helper.
8-8: LGTM! Type safety improved with signal-based output.The migration to
output<FileList>()is correct and improves type safety by replacing the previousanytype with the specificFileListtype.
23-30: LGTM! Drop handler correctly uses signal-based emit.The drop handler logic is sound:
- Prevents default behavior and stops propagation
- Uses optional chaining for safe access to
dataTransfer- Validates files existence before emitting
- Correctly uses
.emit()method for signal-based outputspackages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts (1)
5-10: LGTM! Test setup follows Angular best practices.The use of
TestBed.configureTestingModulewith the directive provided in theprovidersarray is the correct approach for testing Angular directives.packages/altair-app/src/testing/wrapper/index.ts (1)
3-3: LGTM! Import addition supports the output migration.The
OutputEmitterRefimport is necessary to support the new signal-based output API alongside traditional EventEmitters in tests.
|
|
||
| const toggleEmitted = wrapper.emitted('toggleDialog')![0][0]; | ||
| const saveEmitted = wrapper.emitted('saveChange')![0][0]; | ||
| expect(wrapper.emitted('saveChange')).toBeTruthy(); |
There was a problem hiding this comment.
Remove duplicate assertion.
Line 46 already verifies that saveChange was emitted, making this assertion redundant.
Apply this diff:
const toggleEmitted = wrapper.emitted('toggleDialog')![0][0];
- expect(wrapper.emitted('saveChange')).toBeTruthy();
expect(toggleEmitted).toBe(true);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| expect(wrapper.emitted('saveChange')).toBeTruthy(); | |
| const toggleEmitted = wrapper.emitted('toggleDialog')![0][0]; | |
| expect(toggleEmitted).toBe(true); |
🤖 Prompt for AI Agents
In
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
around line 49, the test contains a duplicate assertion
`expect(wrapper.emitted('saveChange')).toBeTruthy();` which is already checked
at line 46; remove the redundant assertion on line 49 so the test only asserts
emission once.
|
|
||
| const toggleEmitted = wrapper.emitted('toggleDialog')![0][0]; | ||
| const saveEmitted = wrapper.emitted('saveChange')![0][0]; | ||
| expect(wrapper.emitted('saveChange')).toBeTruthy(); |
There was a problem hiding this comment.
Remove duplicate assertion.
Line 63 already verifies that saveChange was emitted, making this assertion redundant.
Apply this diff:
const toggleEmitted = wrapper.emitted('toggleDialog')![0][0];
- expect(wrapper.emitted('saveChange')).toBeTruthy();
expect(toggleEmitted).toBe(false);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| expect(wrapper.emitted('saveChange')).toBeTruthy(); | |
| const toggleEmitted = wrapper.emitted('toggleDialog')![0][0]; | |
| expect(toggleEmitted).toBe(false); |
🤖 Prompt for AI Agents
In
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
around line 66, there is a duplicate assertion
expect(wrapper.emitted('saveChange')).toBeTruthy() that is redundant because the
same emission is already asserted at line 63; remove the redundant expect at
line 66 so the test only checks the emission once.
|
|
||
| const toggleEmitted = wrapper.emitted('toggleDialog')![0][0]; | ||
| const saveEmitted = wrapper.emitted('saveChange')![0][0]; | ||
| expect(wrapper.emitted('saveChange')).toBeTruthy(); |
There was a problem hiding this comment.
Remove duplicate assertion.
Line 79 already verifies that saveChange was emitted, making this assertion redundant.
Apply this diff:
const toggleEmitted = wrapper.emitted('toggleDialog')![0][0];
- expect(wrapper.emitted('saveChange')).toBeTruthy();
expect(toggleEmitted).toBe(true);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| expect(wrapper.emitted('saveChange')).toBeTruthy(); | |
| const toggleEmitted = wrapper.emitted('toggleDialog')![0][0]; | |
| expect(toggleEmitted).toBe(true); |
🤖 Prompt for AI Agents
In
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
around line 82, there is a duplicate assertion
expect(wrapper.emitted('saveChange')).toBeTruthy() that repeats the check
already performed at line 79; remove the redundant expect(...) at line 82 so the
test only asserts emission once.
|
|
||
| const toggleEmitted = wrapper.emitted('toggleDialog')![0][0]; | ||
| const saveEmitted = wrapper.emitted('saveChange')![0][0]; | ||
| expect(wrapper.emitted('saveChange')).toBeTruthy(); |
There was a problem hiding this comment.
Remove duplicate assertion.
Line 96 already verifies that saveChange was emitted, making this assertion redundant.
Apply this diff:
const toggleEmitted = wrapper.emitted('toggleDialog')![0][0];
- expect(wrapper.emitted('saveChange')).toBeTruthy();
expect(toggleEmitted).toBe(false);🤖 Prompt for AI Agents
In
packages/altair-app/src/app/modules/altair/components/dialog/dialog.component.spec.ts
around line 99, there is a duplicate assertion
expect(wrapper.emitted('saveChange')).toBeTruthy() that repeats the check
already performed at line 96; remove the redundant expect at line 99 so the test
only asserts the emission once.
| it('should create an instance', inject( | ||
| [FileDropDirective], | ||
| (directive: FileDropDirective) => { | ||
| expect(directive).toBeTruthy(); | ||
| } | ||
| )); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Expand test coverage for directive functionality.
The current test only verifies instantiation. Add tests for the core directive behavior:
- Drop event handling and file emission
- Verification that
fileDroppedChange.emit()is called with the correctFileList - Event prevention and propagation handling
- Edge cases: empty
FileList, missingdataTransfer, etc.
As per coding guidelines
Example test structure:
it('should emit fileDroppedChange when files are dropped', () => {
const directive = TestBed.inject(FileDropDirective);
const mockFiles = new DataTransfer().files;
const emitSpy = jest.spyOn(directive.fileDroppedChange, 'emit');
const dropEvent = new DragEvent('drop', {
dataTransfer: new DataTransfer()
});
// Add files to dataTransfer and trigger drop
directive.ondrop(dropEvent);
expect(emitSpy).toHaveBeenCalledWith(expect.any(FileList));
expect(dropEvent.defaultPrevented).toBe(true);
});
it('should not emit when no files are dropped', () => {
const directive = TestBed.inject(FileDropDirective);
const emitSpy = jest.spyOn(directive.fileDroppedChange, 'emit');
const dropEvent = new DragEvent('drop', {
dataTransfer: new DataTransfer() // empty files
});
directive.ondrop(dropEvent);
expect(emitSpy).not.toHaveBeenCalled();
});🤖 Prompt for AI Agents
In
packages/altair-app/src/app/modules/altair/directives/file-drop/file-drop.directive.spec.ts
around lines 12-17, the spec only asserts directive creation; add unit tests to
validate core behavior: create the directive via
TestBed.inject(FileDropDirective), spy on directive.fileDroppedChange.emit,
construct DragEvent objects with DataTransfer containing files (and an empty
DataTransfer) and with no dataTransfer to cover edge cases, call
directive.ondrop(dropEvent) and assert emit called with a FileList when files
exist and not called when empty/missing, and assert dropEvent.defaultPrevented
(and/or stopPropagation) to verify event prevention/propagation handling;
include a test for dragover if applicable to assert event prevention as well.
| emitted( | ||
| event?: FilteredKeys<C, typeof EventEmitter | OutputEmitterRef<any>> | ||
| ): any[] | undefined; | ||
| emitted(event?: FilteredKeys<C, typeof EventEmitter | OutputEmitterRef<any>>) { |
There was a problem hiding this comment.
Fix type inconsistency: use instance types for both emitters.
The type signature mixes a constructor type (typeof EventEmitter) with an instance type (OutputEmitterRef<any>). Since FilteredKeys filters component properties (which are instances), both should be instance types.
Apply this diff:
emitted(): IDictionary<any[]> | undefined;
emitted(
- event?: FilteredKeys<C, typeof EventEmitter | OutputEmitterRef<any>>
+ event?: FilteredKeys<C, EventEmitter<any> | OutputEmitterRef<any>>
): any[] | undefined;
- emitted(event?: FilteredKeys<C, typeof EventEmitter | OutputEmitterRef<any>>) {
+ emitted(event?: FilteredKeys<C, EventEmitter<any> | OutputEmitterRef<any>>) {
if (this._isWrapper) {Without this fix, the type filter will fail to match EventEmitter properties because typeof EventEmitter represents the constructor, not instances. Component outputs are instances of EventEmitter<T>, not the constructor itself.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| emitted( | |
| event?: FilteredKeys<C, typeof EventEmitter | OutputEmitterRef<any>> | |
| ): any[] | undefined; | |
| emitted(event?: FilteredKeys<C, typeof EventEmitter | OutputEmitterRef<any>>) { | |
| emitted( | |
| event?: FilteredKeys<C, EventEmitter<any> | OutputEmitterRef<any>> | |
| ): any[] | undefined; | |
| emitted(event?: FilteredKeys<C, EventEmitter<any> | OutputEmitterRef<any>>) { |
🤖 Prompt for AI Agents
In packages/altair-app/src/testing/wrapper/index.ts around lines 93 to 96, the
emitted() signature uses the constructor type typeof EventEmitter instead of the
EventEmitter instance type, causing FilteredKeys to miss EventEmitter
properties; update both occurrences to use the EventEmitter instance type (e.g.
replace typeof EventEmitter with EventEmitter) so FilteredKeys filters against
component output instances (EventEmitter | OutputEmitterRef<any>) consistently.
Fixes
Checks
yarn test-buildChanges proposed in this pull request:
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:
output()helper..next()invocations with.emit()and update event bindings in templates to use.emit().OutputandEventEmitteracross multiple components.Summary by CodeRabbit