Skip to content

chore(calm-hub-ui): migrate from fetch to axios#2137

Open
selwyntheo wants to merge 6 commits intofinos:mainfrom
selwyntheo:chore/issue-979-migrate-fetch-to-axios
Open

chore(calm-hub-ui): migrate from fetch to axios#2137
selwyntheo wants to merge 6 commits intofinos:mainfrom
selwyntheo:chore/issue-979-migrate-fetch-to-axios

Conversation

@selwyntheo
Copy link

@selwyntheo selwyntheo commented Feb 15, 2026

Summary

  • Converts calm-service.tsx from standalone fetch-based functions to a CalmService class with injectable AxiosInstance, following the existing AdrService pattern
  • Replaces the fetch call in authService.tsx (checkAuthorityService) with axios.head()
  • Updates TreeNavigation.tsx and its tests to consume the new class-based API
  • Adds comprehensive tests for CalmService (20 tests) and checkAuthorityService (2 tests)

Closes #979

Test plan

  • All 196 existing + new tests pass (npm test in calm-hub-ui/)
  • Build compiles without errors (npm run build in calm-hub-ui/)
  • No remaining fetch( calls in calm-hub-ui/src/service/ or calm-hub-ui/src/authService.tsx

@selwyntheo selwyntheo requested a review from a team as a code owner February 15, 2026 13:37
@linux-foundation-easycla
Copy link

linux-foundation-easycla bot commented Feb 15, 2026

CLA Signed

The committers listed above are authorized under a signed CLA.

  • ✅ login: rocketstack-matt / name: Matthew Bain (f6fab76)
  • ✅ login: selwyntheo / name: Selwyn (330cb5d)

Replace native fetch calls with axios in calm-service and authService
for better testability via dependency injection. Convert calm-service
from standalone functions to a CalmService class following the existing
AdrService pattern, and add comprehensive tests for both services.
@selwyntheo selwyntheo force-pushed the chore/issue-979-migrate-fetch-to-axios branch from a23c7a3 to 71323fd Compare February 15, 2026 13:44
@markscott-ms
Copy link
Contributor

@selwyntheo thanks for the contribution! We'll take a look over this soon as we have some other PRs pending or coming up for calm-hub-ui. FYI @aamanrebello

@selwyntheo
Copy link
Author

@markscott-ms - Thanks much!. Let me know how I can help on other issues.

@markscott-ms
Copy link
Contributor

@selwyntheo if able, come along to an Office Hours meeting, every Thursday 1530 UK / 1030 EST. See https://github.com/finos/architecture-as-code?tab=readme-ov-file#getting-involved for details and #2136 for this week's - where we intend to agree what's next from #2075 as a focus area.

If unable, you can always drop a comment on an office hours issue letting us know that you might pick up any issue from the backlog. It's definitely worth commenting before picking up anything just in case someone else is working on it or about to introduce a conflicting change. We will usually get back to any comments promptly.

@selwyntheo
Copy link
Author

#2075

Thanks @markscott-ms . Will definitely try to attend office hours. Appreciate it

Copy link
Contributor

@aamanrebello aamanrebello left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only change I am actually requesting is to add public access modifiers in the CalmService class. Apart from this I had a few questions. I am sorry again for taking so long to review this PR.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Selwyn, sorry for taking so long to review this. Is it possible to fix the linting error in this file (around ReachHook having a missing dependency)? I'd rather we did not let this stuff creep in. If not possible, please explain why before I approve.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aamanrebello Thanks for reviewing this. I will add the lint error and push the changes requested here.

}

export async function getAuthHeaders(): Promise<HeadersInit> {
export async function getAuthHeaders(): Promise<Record<string, string>> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain why the type has been changed here? The new type is less restrictive, offering less type safety.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Record<string, string> is more type-safe, not less is my view. It's a specific subset of HeadersInit that precisely describes what the function returns (an object with string keys/values), rather than a union of three possible types. This provides better type safety for consumers. But let me know your thoughts.

Copy link
Contributor

@aamanrebello aamanrebello Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is the case, then could you create a type for the auth header response and for now set it to be Record<string, string e.g. export type AuthHeaders = Record<string, string>

const resourceId = '1';
const version = '1.0.0';

const errorStatusCodes = [400, 401, 403, 404, 500];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why specifically these codes alone?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These cover the most common HTTP error scenarios: But we can generalize

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we want to cover different HTTP error scenarios, we should either cover all of them or cover just one and say that it can be extended to any other error code. Using only the "most common" scenarios feels a little arbitrary.

Could you possibly enumerate all the error codes. Or just use one error code.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for creating these tests, is there any reason why you have only tested checkAuthorityService and not the other functions?

@rocketstack-matt rocketstack-matt mentioned this pull request Mar 5, 2026
4 tasks
- Fix linting error in TreeNavigation by memoizing service instances with useMemo
- Add public access modifiers to all CalmService methods for consistency
- Expand authService tests to cover getToken, getAuthHeaders, and isAuthServiceEnabled
- Add JSDoc comment documenting future type safety improvements for API responses

Resolves PR review comments regarding:
1. React Hook useEffect missing dependency warning
2. Type safety explanation for HeadersInit -> Record<string, string>
3. Error status codes selection rationale
4. Limited test coverage in authService
5. Missing public modifiers on CalmService methods
6. Future type safety improvements for API responses
@YoofiTT96
Copy link
Member

Second Aaman's comments. Awaiting resolution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Migrate from fetch to HTTP library/axios

5 participants