[Customer Portal][FE][Web] Centralize API Header Logic and Upgrade Oxygen UI to 0.4.0

[dileepapeiris]

Purpose

This PR focuses on two main improvements: upgrading the Oxygen UI design system to version 0.4.0 to leverage latest components and fixes, and centralizing the API header construction logic into a reusable utility function to reduce code duplication and improve maintainability.

Goals

• Dependency Management: Upgrade @wso2/oxygen-ui to version 0.4.0.
• Code De-duplication: Extract redundant header objects from multiple API hooks into a single, standardized utility function.
• Maintainability: Ensure that future changes to authentication headers (e.g., adding new custom headers) only need to be made in one location.

Approach

• UI Upgrade: Updated package.json to reference Oxygen UI 0.4.0 and ran a clean install to verify compatibility.
• Utility Extraction: Created a new utility function addApiHeaders in the API utility layer. This function accepts an idToken and returns the standardized header object required by the backend.
• Refactoring: Systematic replacement of hardcoded header blocks across all API hooks (e.g., useGetProjects, useGetProjectDetails, useGetSupportStats, etc.) with calls to the new addApiHeaders function.

Code Refactoring Detail

Before:

headers: {
  "Content-Type": "application/json",
  Accept: "application/json",
  Authorization: `Bearer ${idToken}`,
  "x-user-id-token": idToken,
}

After:

headers: addApiHeaders(idToken)

User stories

• Developer Efficiency: As a developer, I want a single function to handle API headers so that I don't accidentally miss required security headers when creating new API hooks.
• System Stability: As a developer, I want to use the latest version of the design system to ensure the UI remains performant and bug-free.

Walkthrough

This PR upgrades the project's core UI library and introduces a centralized addApiHeaders utility. It refactors all existing data-fetching hooks to use this utility, ensuring that Authorization, Accept, and custom x-user-id-token headers are applied consistently across the application.

Changes

Cohort	File(s)	Summary
Dependencies	package.json	Upgraded @wso2/oxygen-ui from previous version to 0.4.0.
API Utilities	src/api/utils.ts (or relevant)	Implemented and exported the addApiHeaders function.
API Hooks	All files in src/api/	Refactored all useQuery and useMutation hooks to use the new header utility.
Testing	src/api/__tests__/utils.test.ts	Added unit tests for addApiHeaders to verify correct header mapping.

Automation tests

• Unit tests:
  • Verified that addApiHeaders correctly injects the idToken into both Authorization and x-user-id-token fields.
  • Verified that content types are correctly set to application/json.
• Integration tests:
  • Confirmed that API requests still succeed with the refactored hooks using the live/mock backend.
• Regression Testing: Checked UI components for any breaking changes following the Oxygen UI 0.4.0 upgrade.

Summary by CodeRabbit

• Chores

  • Upgraded oxygen-ui and oxygen-ui-icons-react to v0.4.0

• Refactor

  • Improved API request header handling

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR upgrades two WSO2 Oxygen UI dependencies to version 0.4.0 and introduces a centralized API header utility function (addApiHeaders) that replaces manual header construction across eight API hook files in the customer portal webapp.

Changes

Cohort / File(s)	Summary
Dependency Upgrades apps/customer-portal/webapp/package.json	Updated @wso2/oxygen-ui and @wso2/oxygen-ui-icons-react from ^0.3.0 to ^0.4.0.
API Utilities apps/customer-portal/webapp/src/utils/apiUtils.ts	New utility file exporting addApiHeaders(idToken: string) function that constructs standardized authenticated fetch headers (Content-Type, Accept, Authorization, x-user-id-token).
API Hooks Refactored apps/customer-portal/webapp/src/api/useGetCasesFilters.ts, useGetProjectCases.ts, useGetProjectCasesStats.ts, useGetProjectDetails.ts, useGetProjectStat.ts, useGetProjectSupportStats.ts, useGetProjects.ts, useGetUserDetails.ts	All eight API hooks refactored to import and use addApiHeaders(idToken) instead of manually constructing inline header objects, centralizing header composition logic.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

App/Customer Portal, Area/Frontend, Platform/Web

Suggested reviewers

• Rashmika998

Poem

🐰 Headers now bundled with care,
One function to manage them there!
Eight hooks rejoice, their code so lean,
The cleanest refactor I've ever seen!
Dependencies dance to version new,
The oxygen flows bright and true! 🎉

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes both major changes: centralizing API header logic and upgrading Oxygen UI to version 0.4.0, matching the changeset content.
Description check	✅ Passed	The PR description covers Purpose, Goals, Approach, User Stories, and Automation Tests sections comprehensively. However, it lacks several required template sections including Documentation, Training, Certification, Marketing, and Test Environment details.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}