fix: Sentry issue loader issue for submit report page #3420
Conversation
WalkthroughIn a superstar style, I'll break down these changes faster than a bullet! 🚀 The pull request enhances the report submission experience in the Fyle application. By adding loading states and conditional rendering for submit buttons, the code now provides smoother user interactions. The modifications ensure that users get clear visual feedback during report submissions, preventing multiple unnecessary clicks and improving overall interface responsiveness. Changes
Suggested Reviewers
Suggested Labels
Possibly Related PRs
Poem
Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
| [disabled]="submitReportLoader" | ||
| appFormButtonValidation | ||
| [loadingText]="'Resubmitting'" | ||
| [loading]="submitReportLoader" |
There was a problem hiding this comment.
call was going twice/thrice due to button not being disabled.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/app/fyle/my-view-report/my-view-report.page.html(1 hunks)src/app/fyle/my-view-report/my-view-report.page.ts(2 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/app/fyle/my-view-report/my-view-report.page.ts
[error] 441-441: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
(lint/suspicious/noAssignInExpressions)
[error] 457-457: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
(lint/suspicious/noAssignInExpressions)
🔇 Additional comments (4)
src/app/fyle/my-view-report/my-view-report.page.ts (2)
116-116: Mind it! The loading state property looks perfect!The
submitReportLoaderboolean property is well-placed to handle loading states during report submission operations.
453-477: Kabali style implementation of submitReport!The implementation is solid with:
- Proper loading state management
- Comprehensive error handling with Sentry
- Clean success message handling
🧰 Tools
🪛 Biome (1.9.4)
[error] 457-457: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
src/app/fyle/my-view-report/my-view-report.page.html (2)
331-334: Style-ah implementation of the resubmit button!The button implementation is complete with:
- Loading state management
- Form validation
- User feedback through loading text
342-345: Thalaiva approves this submit button implementation!The button implementation is perfect with:
- Loading state management
- Form validation
- User feedback through loading text
| this.submitReportLoader = true; | ||
| this.spenderReportsService | ||
| .resubmit(this.reportId) | ||
| .pipe(finalize(() => (this.submitReportLoader = false))) | ||
| .subscribe(() => { | ||
| this.router.navigate(['/', 'enterprise', 'my_reports']); | ||
| const message = `Report submitted successfully.`; | ||
| const message = `Report resubmitted successfully.`; | ||
| this.matSnackBar.openFromComponent(ToastMessageComponent, { | ||
| ...this.snackbarProperties.setSnackbarProperties('success', { message }), | ||
| panelClass: ['msb-success-with-camera-icon'], | ||
| }); | ||
| this.trackingService.showToastMessage({ ToastContent: message }); | ||
| }, | ||
| error: (error) => { | ||
| // Capture error with additional details in Sentry | ||
| Sentry.captureException(error, { | ||
| extra: { | ||
| reportId: this.reportId, | ||
| errorResponse: error, | ||
| }, | ||
| }); | ||
| }, | ||
| }); | ||
| }); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Superstar implementation of resubmitReport, but let's make it even better!
The loading state management is implemented well with proper cleanup. However, we should handle potential errors to prevent silent failures.
Add error handling like this:
resubmitReport(): void {
this.submitReportLoader = true;
this.spenderReportsService
.resubmit(this.reportId)
.pipe(finalize(() => (this.submitReportLoader = false)))
- .subscribe(() => {
+ .subscribe({
+ next: () => {
this.router.navigate(['/', 'enterprise', 'my_reports']);
const message = `Report resubmitted successfully.`;
this.matSnackBar.openFromComponent(ToastMessageComponent, {
...this.snackbarProperties.setSnackbarProperties('success', { message }),
panelClass: ['msb-success-with-camera-icon'],
});
this.trackingService.showToastMessage({ ToastContent: message });
+ },
+ error: (error) => {
+ Sentry.captureException(error, {
+ extra: {
+ reportId: this.reportId,
+ errorResponse: error,
+ },
+ });
+ },
+ });
}Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Biome (1.9.4)
[error] 441-441: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
(lint/suspicious/noAssignInExpressions)
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/app/fyle/my-view-report/my-view-report.page.html(1 hunks)src/app/fyle/my-view-report/my-view-report.page.ts(2 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/app/fyle/my-view-report/my-view-report.page.ts
[error] 441-441: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
(lint/suspicious/noAssignInExpressions)
[error] 457-457: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
(lint/suspicious/noAssignInExpressions)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build (12.x)
🔇 Additional comments (3)
src/app/fyle/my-view-report/my-view-report.page.ts (1)
116-116: Mind it! This is a superstar addition!The
submitReportLoaderproperty is a powerful addition that prevents multiple report submissions, just like how I prevent villains from causing trouble!src/app/fyle/my-view-report/my-view-report.page.html (2)
331-334: Marana Mass! These button enhancements are perfect!The combination of disabled state and loading indicator will prevent multiple submissions like a boss!
342-345: Mind it! The consistency in button behavior is outstanding!Both submit and resubmit buttons now follow the same powerful pattern. This is how we maintain style consistency!
| this.submitReportLoader = true; | ||
| this.spenderReportsService | ||
| .resubmit(this.reportId) | ||
| .pipe(finalize(() => (this.submitReportLoader = false))) | ||
| .subscribe(() => { | ||
| this.router.navigate(['/', 'enterprise', 'my_reports']); | ||
| const message = `Report submitted successfully.`; | ||
| const message = `Report resubmitted successfully.`; | ||
| this.matSnackBar.openFromComponent(ToastMessageComponent, { | ||
| ...this.snackbarProperties.setSnackbarProperties('success', { message }), | ||
| panelClass: ['msb-success-with-camera-icon'], | ||
| }); | ||
| this.trackingService.showToastMessage({ ToastContent: message }); | ||
| }, | ||
| error: (error) => { | ||
| // Capture error with additional details in Sentry | ||
| Sentry.captureException(error, { | ||
| extra: { | ||
| reportId: this.reportId, | ||
| errorResponse: error, | ||
| }, | ||
| }); | ||
| }, | ||
| }); | ||
| }); | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Style! The loading state management is stylish, but needs a small fix!
The implementation is solid, but there's a style issue with the finalize operator. Let me show you the Rajini way to fix it!
- .pipe(finalize(() => (this.submitReportLoader = false)))
+ .pipe(
+ finalize(() => {
+ this.submitReportLoader = 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.
| this.submitReportLoader = true; | |
| this.spenderReportsService | |
| .resubmit(this.reportId) | |
| .pipe(finalize(() => (this.submitReportLoader = false))) | |
| .subscribe(() => { | |
| this.router.navigate(['/', 'enterprise', 'my_reports']); | |
| const message = `Report submitted successfully.`; | |
| const message = `Report resubmitted successfully.`; | |
| this.matSnackBar.openFromComponent(ToastMessageComponent, { | |
| ...this.snackbarProperties.setSnackbarProperties('success', { message }), | |
| panelClass: ['msb-success-with-camera-icon'], | |
| }); | |
| this.trackingService.showToastMessage({ ToastContent: message }); | |
| }, | |
| error: (error) => { | |
| // Capture error with additional details in Sentry | |
| Sentry.captureException(error, { | |
| extra: { | |
| reportId: this.reportId, | |
| errorResponse: error, | |
| }, | |
| }); | |
| }, | |
| }); | |
| }); | |
| } | |
| this.submitReportLoader = true; | |
| this.spenderReportsService | |
| .resubmit(this.reportId) | |
| .pipe( | |
| finalize(() => { | |
| this.submitReportLoader = false; | |
| }) | |
| ) | |
| .subscribe(() => { | |
| this.router.navigate(['/', 'enterprise', 'my_reports']); | |
| const message = `Report resubmitted successfully.`; | |
| this.matSnackBar.openFromComponent(ToastMessageComponent, { | |
| ...this.snackbarProperties.setSnackbarProperties('success', { message }), | |
| panelClass: ['msb-success-with-camera-icon'], | |
| }); | |
| this.trackingService.showToastMessage({ ToastContent: message }); | |
| }); | |
| } |
🧰 Tools
🪛 Biome (1.9.4)
[error] 441-441: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
(lint/suspicious/noAssignInExpressions)
| submitReport(): void { | ||
| this.submitReportLoader = true; | ||
| this.spenderReportsService | ||
| .submit(this.reportId) | ||
| .pipe(finalize(() => (this.submitReportLoader = false))) | ||
| .subscribe({ | ||
| next: () => { | ||
| this.router.navigate(['/', 'enterprise', 'my_reports']); | ||
| const message = `Report submitted successfully.`; | ||
| this.matSnackBar.openFromComponent(ToastMessageComponent, { | ||
| ...this.snackbarProperties.setSnackbarProperties('success', { message }), | ||
| panelClass: ['msb-success-with-camera-icon'], | ||
| }); | ||
| this.trackingService.showToastMessage({ ToastContent: message }); | ||
| }, | ||
| error: (error) => { | ||
| // Capture error with additional details in Sentry | ||
| Sentry.captureException(error, { | ||
| extra: { | ||
| reportId: this.reportId, | ||
| errorResponse: error, | ||
| }, | ||
| }); | ||
| }, | ||
| }); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Thalaiva approves this implementation with a small style suggestion!
The error handling with Sentry is top-notch, like my action sequences! But let's fix the finalize operator style.
- .pipe(finalize(() => (this.submitReportLoader = false)))
+ .pipe(
+ finalize(() => {
+ this.submitReportLoader = 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.
| submitReport(): void { | |
| this.submitReportLoader = true; | |
| this.spenderReportsService | |
| .submit(this.reportId) | |
| .pipe(finalize(() => (this.submitReportLoader = false))) | |
| .subscribe({ | |
| next: () => { | |
| this.router.navigate(['/', 'enterprise', 'my_reports']); | |
| const message = `Report submitted successfully.`; | |
| this.matSnackBar.openFromComponent(ToastMessageComponent, { | |
| ...this.snackbarProperties.setSnackbarProperties('success', { message }), | |
| panelClass: ['msb-success-with-camera-icon'], | |
| }); | |
| this.trackingService.showToastMessage({ ToastContent: message }); | |
| }, | |
| error: (error) => { | |
| // Capture error with additional details in Sentry | |
| Sentry.captureException(error, { | |
| extra: { | |
| reportId: this.reportId, | |
| errorResponse: error, | |
| }, | |
| }); | |
| }, | |
| }); | |
| submitReport(): void { | |
| this.submitReportLoader = true; | |
| this.spenderReportsService | |
| .submit(this.reportId) | |
| .pipe( | |
| finalize(() => { | |
| this.submitReportLoader = false; | |
| }) | |
| ) | |
| .subscribe({ | |
| next: () => { | |
| this.router.navigate(['/', 'enterprise', 'my_reports']); | |
| const message = `Report submitted successfully.`; | |
| this.matSnackBar.openFromComponent(ToastMessageComponent, { | |
| ...this.snackbarProperties.setSnackbarProperties('success', { message }), | |
| panelClass: ['msb-success-with-camera-icon'], | |
| }); | |
| this.trackingService.showToastMessage({ ToastContent: message }); | |
| }, | |
| error: (error) => { | |
| // Capture error with additional details in Sentry | |
| Sentry.captureException(error, { | |
| extra: { | |
| reportId: this.reportId, | |
| errorResponse: error, | |
| }, | |
| }); | |
| }, | |
| }); |
🧰 Tools
🪛 Biome (1.9.4)
[error] 457-457: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
(lint/suspicious/noAssignInExpressions)
|
Clickup
https://app.clickup.com/t/86cxndjxh
Code Coverage
Please add code coverage here
UI Preview
Please add screenshots for UI changes
Summary by CodeRabbit
New Features
Bug Fixes