feat: fetch data from integrations API and show connected apps #1143
Conversation
WalkthroughThis pull request introduces a new Changes
Sequence DiagramsequenceDiagram
participant Component as LandingV2Component
participant Service as IntegrationsService
participant API as ApiService
Component->>Service: getIntegrations()
Service->>API: GET /integrations/
API-->>Service: Return Integration[]
Service-->>Component: Provide Integration Data
Component->>Component: Process Connected Apps
Component->>Component: Update UI with Connection Status
Suggested labels
Suggested reviewers
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 (
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (6)
src/app/core/services/common/integrations.service.ts (1)
12-17: Consider moving base URL configuration to a more appropriate locationSetting the base URL in the constructor couples the service initialization with side effects. Consider moving this configuration to a separate initialization method or to a higher level in the application.
src/app/core/models/integrations/integrations.model.ts (1)
3-12: Add JSDoc documentation and consider more specific typesThe Integration type would benefit from documentation explaining each field's purpose. Also, consider using more specific types for certain fields.
+/** + * Represents an integration between Fyle and a third-party application + */ export type Integration = { id: number; org_id: string; org_name: string; tpa_id: string; tpa_name: string; - type: string; + type: 'ACCOUNTING' | 'HRMS' | 'TRAVEL'; is_active: boolean; is_beta: boolean; }src/app/integrations/landing-v2/landing-v2.component.ts (1)
78-89: Consider moving integration mappings to a configuration fileThe
tpaNameToIntegrationKeyMapcontains hard-coded strings that would be better maintained in a separate configuration file. This would improve maintainability and reduce the risk of typos.src/app/integrations/landing-v2/landing-v2.component.html (3)
44-50: Enhance accessibility for connection status indicatorsWhile the UI changes effectively show connection status, consider improving accessibility by:
- Adding ARIA labels to indicate connection status
- Ensuring the Connect buttons have proper focus states
- Adding proper role attributes to the status badges
Example implementation for one block:
-<button class="btn-connect">Connect</button> +<button + class="btn-connect" + aria-label="Connect to NetSuite" +>Connect</button> -<app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge> +<app-badge + text="Connected" + [theme]="ThemeOption.SUCCESS" + role="status" + aria-label="NetSuite is connected" +></app-badge>Also applies to: 64-70, 83-89, 102-108, 121-127, 141-147, 159-165, 178-184, 198-204, 219-225
46-48: Consider caching connection status checksThe template calls
isAppConnected()multiple times for each integration. Consider caching these results to optimize performance:
- Create a map of connection statuses in the component
private connectionStatusMap = new Map<string, boolean>(); ngOnInit() { this.storeConnectedApps().subscribe(() => { // Cache connection status for each app ['NETSUITE', 'INTACCT', 'QBO', /* ... */].forEach(app => { this.connectionStatusMap.set(app, this.isAppConnected(app)); }); }); }
- Use the cached values in template:
-@if (isAppConnected('NETSUITE')) { +@if (connectionStatusMap.get('NETSUITE')) {Also applies to: 66-67, 85-86, 104-105, 123-124, 143-144, 161-162, 180-181, 200-201, 221-222
Line range hint
173-175: Simplify beta badge managementThe current implementation uses separate arrays (
orgsToHideSage300BetaBadge,orgsToHideBusinessCentralBetaBadge) to manage beta badge visibility. Consider a more maintainable approach:
- Define a single configuration object:
interface IntegrationConfig { id: string; name: string; type: 'Accounting' | 'HRMS' | 'Travel'; isBeta?: boolean; betaExcludedOrgs?: string[]; } const INTEGRATIONS_CONFIG: IntegrationConfig[] = [ { id: 'SAGE300', name: 'Sage 300 CRE', type: 'Accounting', isBeta: true, betaExcludedOrgs: ['org1', 'org2'] }, // ... other integrations ];
- Create a helper method:
shouldShowBetaBadge(integrationId: string): boolean { const config = INTEGRATIONS_CONFIG.find(i => i.id === integrationId); return config?.isBeta && !config?.betaExcludedOrgs?.includes(this.org.fyle_org_id); }
- Update template:
-<app-badge *ngIf="!orgsToHideSage300BetaBadge.includes(org.fyle_org_id)" +<app-badge *ngIf="shouldShowBetaBadge('SAGE300')" [theme]="ThemeOption.DARK" text="Beta"> </app-badge>Also applies to: 191-194
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/app/core/models/integrations/integrations.model.ts(1 hunks)src/app/core/services/common/integrations.service.spec.ts(1 hunks)src/app/core/services/common/integrations.service.ts(1 hunks)src/app/integrations/landing-v2/landing-v2.component.html(10 hunks)src/app/integrations/landing-v2/landing-v2.component.ts(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: unit-test
| it('should be created', () => { | ||
| expect(service).toBeTruthy(); | ||
| }); |
There was a problem hiding this comment.
Add test coverage for getIntegrations method
The test suite only verifies service creation. Add tests for the getIntegrations method to ensure it correctly fetches and returns integration data.
it('should fetch integrations', (done) => {
const mockIntegrations = [
{
id: 1,
org_id: 'org1',
org_name: 'Org 1',
tpa_id: 'tpa1',
tpa_name: 'TPA 1',
type: 'type1',
is_active: true,
is_beta: false
}
];
const apiService = TestBed.inject(ApiService) as jasmine.SpyObj<ApiService>;
apiService.get.and.returnValue(of(mockIntegrations));
service.getIntegrations().subscribe(integrations => {
expect(apiService.get).toHaveBeenCalledWith('/integrations/', {});
expect(integrations).toEqual(mockIntegrations);
done();
});
});|
|
||
| import { IntegrationsService } from './integrations.service'; | ||
|
|
||
| xdescribe('IntegrationsService', () => { |
There was a problem hiding this comment.
Enable the test suite by removing the 'x' prefix
The test suite is currently disabled with xdescribe. Enable it by changing to describe.
-xdescribe('IntegrationsService', () => {
+describe('IntegrationsService', () => {📝 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.
| xdescribe('IntegrationsService', () => { | |
| describe('IntegrationsService', () => { |
| beforeEach(() => { | ||
| TestBed.configureTestingModule({}); | ||
| service = TestBed.inject(IntegrationsService); | ||
| }); |
There was a problem hiding this comment.
Add missing ApiService provider in TestBed configuration
The service depends on ApiService but it's not provided in the testing module.
beforeEach(() => {
- TestBed.configureTestingModule({});
+ TestBed.configureTestingModule({
+ providers: [
+ IntegrationsService,
+ {
+ provide: ApiService,
+ useValue: jasmine.createSpyObj('ApiService', ['get'])
+ }
+ ]
+ });
service = TestBed.inject(IntegrationsService);
});📝 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.
| beforeEach(() => { | |
| TestBed.configureTestingModule({}); | |
| service = TestBed.inject(IntegrationsService); | |
| }); | |
| beforeEach(() => { | |
| TestBed.configureTestingModule({ | |
| providers: [ | |
| IntegrationsService, | |
| { | |
| provide: ApiService, | |
| useValue: jasmine.createSpyObj('ApiService', ['get']) | |
| } | |
| ] | |
| }); | |
| service = TestBed.inject(IntegrationsService); | |
| }); |
| getIntegrations(): Observable<Integration[]> { | ||
| return this.apiService.get(`/integrations/`, {}); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for API requests
The getIntegrations method should handle potential API errors to prevent them from propagating to components.
getIntegrations(): Observable<Integration[]> {
- return this.apiService.get(`/integrations/`, {});
+ return this.apiService.get(`/integrations/`, {}).pipe(
+ catchError(error => {
+ console.error('Error fetching integrations:', error);
+ return throwError(() => new Error('Failed to fetch integrations'));
+ })
+ );
}Committable suggestion skipped: line range outside the PR's diff.
| isAppConnected(appKey: IntegrationAppKey) { | ||
| return this.connectedApps.includes(appKey); | ||
| } |
There was a problem hiding this comment.
Add null check for connectedApps array
The isAppConnected method might be called before connectedApps is initialized, potentially causing runtime errors.
isAppConnected(appKey: IntegrationAppKey) {
- return this.connectedApps.includes(appKey);
+ return this.connectedApps?.includes(appKey) ?? 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.
| isAppConnected(appKey: IntegrationAppKey) { | |
| return this.connectedApps.includes(appKey); | |
| } | |
| isAppConnected(appKey: IntegrationAppKey) { | |
| return this.connectedApps?.includes(appKey) ?? false; | |
| } |
| private storeConnectedApps() { | ||
| this.integrationService.getIntegrations().subscribe(integrations => { | ||
| const tpaNames = integrations.map(integration => integration.tpa_name); | ||
| const connectedApps = tpaNames.map(tpaName => this.tpaNameToIntegrationKeyMap[tpaName]); | ||
|
|
||
| this.connectedApps = connectedApps; | ||
| }); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling and loading state for integration fetching
The storeConnectedApps method lacks error handling and doesn't manage loading state. This could lead to silent failures and poor user experience.
+private isLoading = false;
+private error: string | null = null;
private storeConnectedApps() {
+ this.isLoading = true;
+ this.error = null;
this.integrationService.getIntegrations().subscribe({
- integrations => {
+ next: (integrations) => {
const tpaNames = integrations.map(integration => integration.tpa_name);
const connectedApps = tpaNames.map(tpaName => this.tpaNameToIntegrationKeyMap[tpaName]);
this.connectedApps = connectedApps;
+ this.isLoading = false;
+ },
+ error: (error) => {
+ console.error('Failed to fetch integrations:', error);
+ this.error = 'Failed to load connected apps';
+ this.isLoading = 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.
| private storeConnectedApps() { | |
| this.integrationService.getIntegrations().subscribe(integrations => { | |
| const tpaNames = integrations.map(integration => integration.tpa_name); | |
| const connectedApps = tpaNames.map(tpaName => this.tpaNameToIntegrationKeyMap[tpaName]); | |
| this.connectedApps = connectedApps; | |
| }); | |
| } | |
| private isLoading = false; | |
| private error: string | null = null; | |
| private storeConnectedApps() { | |
| this.isLoading = true; | |
| this.error = null; | |
| this.integrationService.getIntegrations().subscribe({ | |
| next: (integrations) => { | |
| const tpaNames = integrations.map(integration => integration.tpa_name); | |
| const connectedApps = tpaNames.map(tpaName => this.tpaNameToIntegrationKeyMap[tpaName]); | |
| this.connectedApps = connectedApps; | |
| this.isLoading = false; | |
| }, | |
| error: (error) => { | |
| console.error('Failed to fetch integrations:', error); | |
| this.error = 'Failed to load connected apps'; | |
| this.isLoading = false; | |
| } | |
| }); | |
| } |
| @if (isAppConnected('NETSUITE')) { | ||
| <app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge> | ||
| } @else { | ||
| <button class="btn-connect">Connect</button> | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add loading and error states for connection status
The current implementation doesn't handle loading or error states when checking connection status. Consider adding these states for better user experience:
-@if (isAppConnected('NETSUITE')) {
+@if (isLoading) {
+ <app-spinner size="small"></app-spinner>
+} @else if (connectionError) {
+ <app-badge
+ text="Check Status"
+ [theme]="ThemeOption.WARNING"
+ (click)="retryConnectionCheck('NETSUITE')"
+ ></app-badge>
+} @else if (isAppConnected('NETSUITE')) {
<app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge>
} @else {
<button class="btn-connect">Connect</button>
}Also applies to: 66-70, 85-89, 104-108, 121-127, 141-147, 159-165, 178-184, 198-204, 219-225
Clickup
https://app.clickup.com/t/86cxhewex
Summary by CodeRabbit
Release Notes
New Features
Improvements
Technical Updates
The updates provide a more dynamic and informative experience for managing integrations, with real-time connection status tracking.