Skip to content

feat: route config loading #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Feb 28, 2025
Merged

feat: route config loading #95

merged 8 commits into from
Feb 28, 2025

Conversation

fvoska
Copy link
Contributor

@fvoska fvoska commented May 9, 2023

Description

createRouteConfigLoadingObservable function receives Router and returns an Observable that emits true/false during route configuration loading. This can be useful to show global loading states during lazy chunk loading. Feel free do add debounce or other operators as needed for your specific use case.

import { createRouteConfigLoadingObservable } from '@infinum/ngx-nuts-and-bolts';

...

class MyComponent {
	public readonly isRouteConfigLoading$ = createRouteConfigLoadingObservable(this.router);
}

We leave it up to you to decide what to do with this Observable<boolean> and hook it up to some loading state indication in your UI.

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update
  • Documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes

@nx-cloud
Copy link

nx-cloud bot commented May 9, 2023

View your CI Pipeline Execution ↗ for commit 83af669.

Command Status Duration Result
nx affected -t lint build test ✅ Succeeded 38s View ↗

☁️ Nx Cloud last updated this comment at 2025-02-28 17:45:48 UTC

@fvoska fvoska marked this pull request as draft February 13, 2024 11:30
Copy link

nx-cloud bot commented Feb 13, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2536494. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 2 targets

Sent with 💌 from NxCloud.

Copy link

Quality Gate Passed Quality Gate passed

Issues
1 New issue

Measures
0 Security Hotspots
No data about Coverage
30.2% Duplication on New Code

See analysis details on SonarCloud

@fvoska fvoska marked this pull request as ready for review February 13, 2024 11:45
@fvoska
Copy link
Contributor Author

fvoska commented Mar 7, 2024

@CodiumAI-Agent /review

@CodiumAI-Agent
Copy link

PR Review

⏱️ Estimated effort to review [1-5]

3, because the PR introduces a new feature across multiple files, including Angular components, services, and Observable utilities. The changes involve Angular Router configurations, lazy loading, and Observable streams, which require a good understanding of Angular's advanced features. The PR also includes unit tests, which adds to the review complexity.

🧪 Relevant tests

Yes

🔍 Possible issues

Possible Bug: The createRouteConfigLoadingObservable function emits false for both NavigationError and NavigationCancel events, which might not always reflect the actual loading state accurately. Consider handling these cases more explicitly to ensure the loading state is correctly managed.

Performance Concern: The use of RouteConfigLoadStart and RouteConfigLoadEnd events to toggle the loading state might lead to multiple emissions in quick succession, especially in applications with complex routing. Consider debouncing the output to prevent rapid flickering of the loading indicator.

🔒 Security concerns

No

Code feedback:
relevant filelibs/ngx-nuts-and-bolts/routing-utils/src/lib/route-config-loading.ts
suggestion      

Consider adding a debounce mechanism to the createRouteConfigLoadingObservable function to prevent rapid toggling of the loading state in scenarios with complex routing. This can improve user experience by preventing the loading indicator from flickering. [important]

relevant linemap((event) => event instanceof RouteConfigLoadStart)

relevant filelibs/ngx-nuts-and-bolts/routing-utils/src/lib/route-config-loading.ts
suggestion      

To improve error handling, differentiate between NavigationError and NavigationCancel events when mapping to the loading state. This allows for more precise control over the loading indicator, especially in error scenarios. [important]

relevant lineevent instanceof NavigationCancel

relevant filelibs/environment-variables-example-app-base/src/lib/variable-selection.component.ts
suggestion      

Since inject is used for dependency injection in VariableSelectionComponent, consider removing the constructor altogether to align with the Angular's modern standalone components approach. This can simplify the component's instantiation and align with best practices. [medium]

relevant lineprivate readonly router = inject(Router);

relevant fileapps/environment-variables-fetch-example/src/app/app.config.ts
suggestion      

Ensure that provideRouter is correctly configured with appropriate route guards and resolvers to manage access to the lazy-loaded modules. This is crucial for maintaining application security and integrity. [important]

relevant lineprovideRouter(envExampleAppRoutes),


✨ Review tool usage guide:

Overview:
The review tool scans the PR code changes, and generates a PR review. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.
When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...
Utilizing extra instructions

The review tool can be configured with extra instructions, which can be used to guide the model to a feedback tailored to the needs of your project.

Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify the relevant sub-tool, and the relevant aspects of the PR that you want to emphasize.

Examples for extra instructions:

[pr_reviewer] # /review #
extra_instructions="""
In the 'possible issues' section, emphasize the following:
- Does the code logic cover relevant edge cases?
- Is the code logic clear and easy to understand?
- Is the code logic efficient?
...
"""

Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

How to enable\disable automation
  • When you first install PR-Agent app, the default mode for the review tool is:
pr_commands = ["/review", ...]

meaning the review tool will run automatically on every PR, with the default configuration.
Edit this field to enable/disable the tool, or to change the used configurations

Auto-labels

The review tool can auto-generate two specific types of labels for a PR:

  • a possible security issue label, that detects possible security issues (enable_review_labels_security flag)
  • a Review effort [1-5]: x label, where x is the estimated effort to review the PR (enable_review_labels_effort flag)
Extra sub-tools

The review tool provides a collection of possible feedbacks about a PR.
It is recommended to review the possible options, and choose the ones relevant for your use case.
Some of the feature that are disabled by default are quite useful, and should be considered for enabling. For example:
require_score_review, require_soc2_ticket, and more.

Auto-approve PRs

By invoking:

/review auto_approve

The tool will automatically approve the PR, and add a comment with the approval.

To ensure safety, the auto-approval feature is disabled by default. To enable auto-approval, you need to actively set in a pre-defined configuration file the following:

[pr_reviewer]
enable_auto_approval = true

(this specific flag cannot be set with a command line argument, only in the configuration file, committed to the repository)

You can also enable auto-approval only if the PR meets certain requirements, such as that the estimated_review_effort is equal or below a certain threshold, by adjusting the flag:

[pr_reviewer]
maximal_review_effort = 5
More PR-Agent commands

To invoke the PR-Agent, add a comment using one of the following commands:

  • /review: Request a review of your Pull Request.
  • /describe: Update the PR title and description based on the contents of the PR.
  • /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback.
  • /ask <QUESTION>: Ask a question about the PR.
  • /update_changelog: Update the changelog based on the PR's contents.
  • /add_docs 💎: Generate docstring for new components introduced in the PR.
  • /generate_labels 💎: Generate labels for the PR based on the PR's contents.
  • /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component.

See the tools guide for more details.
To list the possible configuration parameters, add a /config comment.

See the review usage page for a comprehensive guide on using this tool.

@CodiumAI-Agent
Copy link

PR Analysis

  • 🎯 Main theme: Adding a feature for route configuration loading
  • 📝 PR summary: This PR introduces a new feature to the ngx-nuts-and-bolts library that allows observing the loading state of route configurations. This can be useful for displaying loading states during lazy chunk loading. The PR also includes updates to the example applications to demonstrate the usage of this new feature.
  • 📌 Type of PR: Enhancement
  • 🧪 Relevant tests added: Yes
  • ⏱️ Estimated effort to review [1-5]: 3, because the PR involves changes across multiple files and introduces a new feature which needs to be thoroughly reviewed for potential issues and improvements.
  • 🔒 Security concerns: No security concerns found

PR Feedback

💡 General suggestions: The PR is well-structured and the new feature is well-implemented. It would be beneficial to include more detailed comments in the code to explain the logic and usage of the new feature. This can help other developers understand the code more quickly and easily.

🤖 Code feedback:
relevant filelibs/ngx-nuts-and-bolts/routing-utils/src/lib/route-config-loading.ts
suggestion      

Consider adding error handling within the createRouteConfigLoadingObservable function. This can help to catch and handle any potential errors that may occur during the route configuration loading process. [important]

relevant lineexport function createRouteConfigLoadingObservable(router: Router): Observable {

relevant filelibs/environment-variables-example-app-base/src/lib/variable-selection.component.ts
suggestion      

It would be better to move the logic inside the constructor to a separate function. This can make the code more modular and easier to test. [medium]

relevant lineconstructor() {

relevant filelibs/ngx-nuts-and-bolts/routing-utils/src/lib/route-config-loading.spec.ts
suggestion      

Consider adding more test cases to cover different scenarios and edge cases. This can help to ensure the robustness of the new feature. [medium]

relevant linedescribe('createRouteConfigLoadingObservable', () => {

relevant filelibs/environment-variables-example-app-base/src/lib/variable-selection.component.html
suggestion      

Consider using a loading spinner or other visual indicator to show the loading state. This can provide a better user experience. [medium]

relevant line

Is route loading: {{ isRouteConfigLoading$ | async }}



✨ Usage guide:

Overview:
The review tool scans the PR code changes, and generates a PR review. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.
When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...
Utilizing extra instructions

The review tool can be configured with extra instructions, which can be used to guide the model to a feedback tailored to the needs of your project.

Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify the relevant sub-tool, and the relevant aspects of the PR that you want to emphasize.

Examples for extra instructions:

[pr_reviewer] # /review #
extra_instructions="""
In the code feedback section, emphasize the following:
- Does the code logic cover relevant edge cases?
- Is the code logic clear and easy to understand?
- Is the code logic efficient?
...
"""

Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

How to enable\disable automation
  • When you first install PR-Agent app, the default mode for the review tool is:
pr_commands = ["/review", ...]

meaning the review tool will run automatically on every PR, with the default configuration.
Edit this field to enable/disable the tool, or to change the used configurations

About the 'Code feedback' section

The review tool provides several type of feedbacks, one of them is code suggestions.
If you are interested only in the code suggestions, it is recommended to use the improve feature instead, since it dedicated only to code suggestions, and usually gives better results.
Use the review tool if you want to get a more comprehensive feedback, which includes code suggestions as well.

Auto-labels

The review tool can auto-generate two specific types of labels for a PR:

  • a possible security issue label, that detects possible security issues (enable_review_labels_security flag)
  • a Review effort [1-5]: x label, where x is the estimated effort to review the PR (enable_review_labels_effort flag)
Extra sub-tools

The review tool provides a collection of possible feedbacks about a PR.
It is recommended to review the possible options, and choose the ones relevant for your use case.
Some of the feature that are disabled by default are quite useful, and should be considered for enabling. For example:
require_score_review, require_soc2_review, enable_review_labels_effort, and more.

More PR-Agent commands

To invoke the PR-Agent, add a comment using one of the following commands:

  • /review: Request a review of your Pull Request.
  • /describe: Update the PR title and description based on the contents of the PR.
  • /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback.
  • /ask <QUESTION>: Ask a question about the PR.
  • /update_changelog: Update the changelog based on the PR's contents.
  • /add_docs 💎: Generate docstring for new components introduced in the PR.
  • /generate_labels 💎: Generate labels for the PR based on the PR's contents.
  • /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component.

See the tools guide for more details.
To list the possible configuration parameters, add a /config comment.

See the review usage page for a comprehensive guide on using this tool.

@CodiumAI-Agent
Copy link

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Concurrency Handling

The observable emitted by createRouteConfigLoadingObservable only toggles true on RouteConfigLoadStart and false on related events. Consider assessing whether overlapping lazy loading events might occur and if additional state tracking is needed to accurately reflect the loading status.

import { NavigationCancel, NavigationError, RouteConfigLoadEnd, RouteConfigLoadStart, Router } from '@angular/router';
import { Observable, filter, map } from 'rxjs';

export function createRouteConfigLoadingObservable(router: Router): Observable<boolean> {
	return router.events.pipe(
		filter(
			(event) =>
				event instanceof RouteConfigLoadStart ||
				event instanceof RouteConfigLoadEnd ||
				event instanceof NavigationError ||
				event instanceof NavigationCancel
		),
		map((event) => event instanceof RouteConfigLoadStart)
	);
}
Selector Update

The root element was changed from to . Please ensure that the corresponding component registration and bootstrapping logic are also updated to prevent potential runtime issues.

	<body>
		<inf-root></inf-root>
	</body>
</html>

Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
30.3% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

@fvoska fvoska merged commit 23d7a33 into main Feb 28, 2025
6 of 7 checks passed
@fvoska fvoska deleted the feature/route-config-loading branch February 28, 2025 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants