[Customer Portal][FE][Web] Add case comments api with mock data

[dileepapeiris]

Description

This pull request introduces the initial Ballerina backend module structure for the customer portal, including configuration, dependency management, and foundational modules for authorization and entity management. The changes provide the groundwork for handling authentication, authorization, and communication with external entity services, as well as defining key constants and types.

Project Initialization and Configuration

• Added Ballerina project configuration files (Ballerina.toml, Dependencies.toml) and a .gitignore tailored for Ballerina builds, ensuring proper dependency management and exclusion of generated files from version control. [1] [2] [3]
• Introduced a sample configuration file (config.toml.local) for setting up environment-specific values such as service URLs and OAuth2 credentials.

Authorization Module

• Implemented the authorization module with:
  • A JWT-based request interceptor service class (JwtInterceptor) for extracting and validating user information from HTTP headers, with placeholder logic for future role-based authorization.
  • Definitions for constants, types (including JWT payload and user info structures), and a utility function to check user roles. [1] [2] [3]
  • Module documentation.

Entity Module

• Added the entity module to manage external service interactions:
  • HTTP client initialization with OAuth2 authentication and retry logic, using configurable endpoints and credentials.
  • Default pagination constants and module documentation. [1] [2]

Global Constants

• Defined application-wide constants for error messages, default pagination, and validation patterns in constants.bal.

Summary by CodeRabbit

• New Features

  • Added case comments functionality enabling users to view and browse comments associated with support cases.
  • Includes pagination support for efficient comment browsing.
  • Supports both live and mock data modes for testing.

• Tests

  • Comprehensive test suite added to validate case comments retrieval and behavior across different scenarios.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces a new React Query-based hook (useGetCaseComments) for fetching case comments with support for both mock and real backend data modes. It includes new TypeScript interfaces defining case comment structures, mock data, a query key constant, and comprehensive test coverage.

Changes

Cohort / File(s)	Summary
API Hook Implementation apps/customer-portal/webapp/src/api/useGetCaseComments.ts	Introduces useGetCaseComments hook with pagination support, mock data handling via useMockConfig, authentication token integration via useAsgardeo, error logging, and conditional query execution based on projectId/caseId presence and auth state.
Type Definitions apps/customer-portal/webapp/src/models/responses.ts	Adds two new interfaces: CaseComment (with id, content, type, timestamps, escalation flag) and CaseCommentsResponse (wrapping comments array with pagination metadata).
Constants & Mock Data apps/customer-portal/webapp/src/constants/apiConstants.ts, apps/customer-portal/webapp/src/models/mockData.ts	Adds CASE_COMMENTS query key constant and exports mockCaseComments array with three sample comment entries including code-formatted content and metadata.
Test Suite apps/customer-portal/webapp/src/api/__tests__/useGetCaseComments.test.tsx	Comprehensive test coverage validating mock data resolution, behavior when projectId/caseId is missing, and query key format using React Query test utilities.

Sequence Diagram(s)

sequenceDiagram
    participant Component
    participant Hook as useGetCaseComments
    participant MockConfig as useMockConfig
    participant Auth as useAsgardeo
    participant RQ as React Query
    participant API as Backend API

    Component->>Hook: Call with projectId, caseId, options
    Hook->>RQ: Check cache for query key
    Hook->>MockConfig: Check isMockEnabled flag
    
    alt Mock Mode Enabled
        Hook->>RQ: Return sliced mock data<br/>with totalRecords & pagination
        RQ->>Component: CaseCommentsResponse (mock)
    else Real API Mode
        Hook->>Auth: Retrieve idToken & check signIn state
        Hook->>API: GET /case/{id}/comments<br/>with auth header
        API-->>Hook: CaseCommentsResponse
        Hook->>RQ: Cache result with 5min staleTime
        RQ->>Component: CaseCommentsResponse (real)
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [Customer Portal] Add comments search endpoint #66: Adds backend comments search endpoint and response types that directly correspond to this PR's frontend hook and data models.

Suggested reviewers

• shayanmalinda
• Rashmika998

Poem

🐰 Hop along through comments we fetch,
Mock or real, a perfect match!
React Query caches what we find,
Pagination neat, authentication aligned.
Case comments bloom, oh what a sight! 🌻

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description discusses Ballerina backend modules, authorization, and entity management, but the actual changes are entirely frontend TypeScript code for a React Query hook and test suite for case comments.	Rewrite the description to accurately reflect the frontend changes: a React Query hook for fetching case comments, corresponding test suite, new response models, mock data, and API constants.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and clearly describes the main change: adding a case comments API with mock data for the customer portal frontend web app.
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

---

No actionable comments were generated in the recent review. 🎉

---

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.}

[dileepapeiris]

@CodeRabbit review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[Copilot]

Pull request overview

Introduces initial Customer Portal frontend UI components (dashboard/support/login/common widgets) and API hooks with mock/real data support, plus scaffolding for a Ballerina backend with authorization, SCIM, and entity-service integrations.

Changes:

• Added multiple React components (dashboard, support, login, common UI) with Vitest + React Testing Library coverage.
• Implemented TanStack Query hooks for fetching portal data with mock-mode support and backend fetch wiring.
• Bootstrapped Ballerina backend modules (authorization/entity/SCIM) and added backend tests + local configs.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
apps/customer-portal/webapp/src/components/support/case-creation-layout/header/tests/CaseCreationHeader.test.tsx	Adds unit tests for the case creation header UI.
apps/customer-portal/webapp/src/components/support/case-creation-layout/header/tests/AIInfoCard.test.tsx	Adds unit tests for the AI info card UI.
apps/customer-portal/webapp/src/components/support/case-creation-layout/header/CaseCreationHeader.tsx	Implements the case creation header component.
apps/customer-portal/webapp/src/components/support/case-creation-layout/header/AIInfoCard.tsx	Implements the AI info card component.
apps/customer-portal/webapp/src/components/support/all-cases/tests/AllCasesStatCards.test.tsx	Adds tests for all-cases stat cards rendering/loading.
apps/customer-portal/webapp/src/components/support/all-cases/tests/AllCasesList.test.tsx	Adds tests for all-cases list rendering/empty/loading.
apps/customer-portal/webapp/src/components/support/all-cases/tests/AllCasesFilters.test.tsx	Adds tests for all-cases filters UI and change handling.
apps/customer-portal/webapp/src/components/support/all-cases/AllCasesStatCards.tsx	Adds stat cards wrapper using SupportStatGrid + flatten helper.
apps/customer-portal/webapp/src/components/support/all-cases/AllCasesListSkeleton.tsx	Adds skeleton UI for the all-cases list loading state.
apps/customer-portal/webapp/src/components/support/all-cases/AllCasesFilters.tsx	Adds filter dropdowns for all-cases page based on metadata.
apps/customer-portal/webapp/src/components/project-hub/project-card/tests/ProjectCardSkeleton.test.tsx	Adds tests for project card skeleton UI.
apps/customer-portal/webapp/src/components/project-hub/project-card/tests/ProjectCardInfo.test.tsx	Adds tests for project card header/title/subtitle behavior.
apps/customer-portal/webapp/src/components/project-hub/project-card/tests/ProjectCardActions.test.tsx	Adds tests for project card actions and click propagation.
apps/customer-portal/webapp/src/components/project-hub/project-card/ProjectCardInfo.tsx	Implements project card title/subtitle rendering with stripping/truncation.
apps/customer-portal/webapp/src/components/project-hub/project-card/ProjectCardBadges.tsx	Implements project card badges + loading/error indicators.
apps/customer-portal/webapp/src/components/project-hub/project-card/ProjectCardActions.tsx	Implements project card actions button(s).
apps/customer-portal/webapp/src/components/project-details/time-tracking/tests/TimeTrackingStatCards.test.tsx	Adds tests for time tracking stat cards and grid state passing.
apps/customer-portal/webapp/src/components/project-details/time-tracking/TimeTrackingStatCards.tsx	Implements time tracking stat cards via SupportStatGrid.
apps/customer-portal/webapp/src/components/project-details/project-overview/recent-activity/RecentActivityCard.tsx	Implements recent activity card with loading/error states.
apps/customer-portal/webapp/src/components/project-details/project-overview/project-statistics/ProjectStatisticsCard.tsx	Implements project statistics card with StatCard + skeleton/error value UI.
apps/customer-portal/webapp/src/components/project-details/project-overview/project-information/tests/ProjectName.test.tsx	Adds tests for ProjectName loading vs loaded states.
apps/customer-portal/webapp/src/components/project-details/project-overview/project-information/tests/ProjectMetadata.test.tsx	Adds tests for ProjectMetadata rendering/loading/chip colors.
apps/customer-portal/webapp/src/components/project-details/project-overview/project-information/tests/ProjectHeader.test.tsx	Adds tests for ProjectHeader rendering.
apps/customer-portal/webapp/src/components/project-details/project-overview/project-information/tests/ProjectDescription.test.tsx	Adds tests for ProjectDescription loading vs loaded states.
apps/customer-portal/webapp/src/components/project-details/project-overview/project-information/ProjectName.tsx	Implements ProjectName display with loading/error states.
apps/customer-portal/webapp/src/components/project-details/project-overview/project-information/ProjectInformationCard.tsx	Composes project information subcomponents into a card.
apps/customer-portal/webapp/src/components/project-details/project-overview/project-information/ProjectHeader.tsx	Implements the “Project Information” section header.
apps/customer-portal/webapp/src/components/project-details/project-overview/project-information/ProjectDescription.tsx	Implements project description display with loading/error states.
apps/customer-portal/webapp/src/components/project-details/project-overview/contact-info/tests/ContactRow.test.tsx	Adds tests for ContactRow rendering and mailto link.
apps/customer-portal/webapp/src/components/project-details/project-overview/contact-info/tests/ContactInfoCard.test.tsx	Adds tests for ContactInfoCard and row count/content.
apps/customer-portal/webapp/src/components/project-details/project-overview/contact-info/ContactRow.tsx	Implements contact row UI with icon + mailto link.
apps/customer-portal/webapp/src/components/project-details/project-overview/contact-info/ContactInfoCard.tsx	Implements contact info card, iterating configured contacts.
apps/customer-portal/webapp/src/components/login-page/tests/LoginSlogan.test.tsx	Adds tests for login slogan content.
apps/customer-portal/webapp/src/components/login-page/tests/LoginFooter.test.tsx	Adds tests for login footer links and copyright rendering.
apps/customer-portal/webapp/src/components/login-page/tests/LoginBackground.test.tsx	Adds tests for login background image alt rendering.
apps/customer-portal/webapp/src/components/login-page/LoginSlogan.tsx	Implements login slogan section.
apps/customer-portal/webapp/src/components/login-page/LoginFooter.tsx	Implements login footer with policy links.
apps/customer-portal/webapp/src/components/login-page/LoginBox.tsx	Implements login method selection (mock vs real APIs).
apps/customer-portal/webapp/src/components/login-page/LoginBackground.tsx	Implements theme-aware login artwork.
apps/customer-portal/webapp/src/components/dashboard/stats/tests/TrendIndicator.test.tsx	Adds tests for TrendIndicator null/loading/up/down cases.
apps/customer-portal/webapp/src/components/dashboard/stats/TrendIndicator.tsx	Implements trend indicator with loading/error states.
apps/customer-portal/webapp/src/components/dashboard/charts/tests/ChartLegend.test.tsx	Adds tests for chart legend rendering and empty data handling.
apps/customer-portal/webapp/src/components/dashboard/charts/tests/ChartLayout.test.tsx	Adds tests for chart layout and isLoading prop propagation.
apps/customer-portal/webapp/src/components/dashboard/charts/tests/CasesTrendChart.test.tsx	Adds tests for cases trend chart title/loading/empty behavior.
apps/customer-portal/webapp/src/components/dashboard/charts/ChartLegend.tsx	Implements chart legend component with error rendering option.
apps/customer-portal/webapp/src/components/dashboard/charts/ChartLayout.tsx	Implements dashboard chart layout composition.
apps/customer-portal/webapp/src/components/dashboard/cases-table/tests/CasesTableHeader.test.tsx	Adds tests for cases table header actions and active filters.
apps/customer-portal/webapp/src/components/dashboard/cases-table/CasesTableSkeleton.tsx	Adds table skeleton rows for loading state.
apps/customer-portal/webapp/src/components/dashboard/cases-table/CasesTableHeader.tsx	Implements cases table header with filters/create actions.
apps/customer-portal/webapp/src/components/common/tab-bar/TabBar.tsx	Adds reusable tab-bar component.
apps/customer-portal/webapp/src/components/common/stat-grid/tests/SupportStatGrid.test.tsx	Adds tests for SupportStatGrid values/loading/missing stats handling.
apps/customer-portal/webapp/src/components/common/stat-grid/SupportStatGrid.tsx	Implements stat grid rendering using Oxygen UI StatCard.
apps/customer-portal/webapp/src/components/common/side-nav-bar/tests/SubscriptionWidget.test.tsx	Adds tests for subscription widget collapsed vs expanded behavior.
apps/customer-portal/webapp/src/components/common/side-nav-bar/SubscriptionWidget.tsx	Implements sidebar subscription widget.
apps/customer-portal/webapp/src/components/common/side-nav-bar/SideBar.tsx	Implements main sidebar nav with project routes + footer actions.
apps/customer-portal/webapp/src/components/common/notification-banner/tests/GlobalNotificationBanner.test.tsx	Adds tests for notification banner visibility and rerender sync.
apps/customer-portal/webapp/src/components/common/notification-banner/GlobalNotificationBanner.tsx	Implements global notification banner with dismiss state.
apps/customer-portal/webapp/src/components/common/header/tests/SearchBar.test.tsx	Adds tests for header search bar placeholder.
apps/customer-portal/webapp/src/components/common/header/tests/Brand.test.tsx	Adds tests for header brand logo/title.
apps/customer-portal/webapp/src/components/common/header/tests/Actions.test.tsx	Adds tests for header actions area.
apps/customer-portal/webapp/src/components/common/header/UserProfile.tsx	Implements user profile menu using user details hook.
apps/customer-portal/webapp/src/components/common/header/SearchBar.tsx	Implements reusable header search bar.
apps/customer-portal/webapp/src/components/common/header/Brand.tsx	Implements header branding.
apps/customer-portal/webapp/src/components/common/header/Actions.tsx	Implements header actions (community link, theme, user profile).
apps/customer-portal/webapp/src/components/common/footer/tests/Footer.test.tsx	Adds tests for footer URLs and company name.
apps/customer-portal/webapp/src/components/common/footer/Footer.tsx	Implements footer wrapper for Oxygen UI Footer component.
apps/customer-portal/webapp/src/components/common/error-indicator/ErrorIndicator.tsx	Adds tooltip-based error indicator component.
apps/customer-portal/webapp/src/api/useGetUserDetails.ts	Adds “current user details” hook with mock + real backend fetch.
apps/customer-portal/webapp/src/api/useGetProjectTimeTrackingStat.ts	Adds time-tracking stats hook with mock + real backend fetch.
apps/customer-portal/webapp/src/api/useGetProjectSupportStats.ts	Adds support stats hook with mock + real backend fetch.
apps/customer-portal/webapp/src/api/useGetProjectStat.ts	Adds project stats hook with mock validation + real backend fetch.
apps/customer-portal/webapp/src/api/useGetProjectDetails.ts	Adds project details hook with mock + real backend fetch.
apps/customer-portal/webapp/src/api/useGetProjectCasesStats.ts	Adds case stats hook with mock + real backend fetch.
apps/customer-portal/webapp/src/api/useGetDashboardMockStats.ts	Adds dashboard stats hook intended for mock trend data.
apps/customer-portal/webapp/src/api/useGetChatHistory.ts	Adds chat history hook with mock + real backend fetch.
apps/customer-portal/webapp/src/api/useGetCasesFilters.ts	Adds cases filter metadata hook with mock + real backend fetch.
apps/customer-portal/webapp/src/api/useGetCaseDetails.ts	Adds case details hook with mock + real backend fetch.
apps/customer-portal/webapp/src/api/useGetCaseCreationDetails.ts	Adds case creation metadata hook (mock-backed).
apps/customer-portal/webapp/src/api/tests/useGetProjectTimeTrackingStat.test.tsx	Adds tests for time tracking stats hook in mock mode.
apps/customer-portal/webapp/src/api/tests/useGetProjectStat.test.tsx	Adds tests for project stats hook including invalid project ID.
apps/customer-portal/webapp/src/api/tests/useGetProjectDetails.test.tsx	Adds tests for project details hook in mock mode.
apps/customer-portal/webapp/src/api/tests/useGetProjectCases.test.tsx	Adds tests for project cases hook query behavior.
apps/customer-portal/webapp/src/api/tests/useGetCaseDetails.test.tsx	Adds tests for case details hook in mock mode.
apps/customer-portal/webapp/src/api/tests/useGetCaseCreationDetails.test.tsx	Adds tests for case creation metadata hook success/error.
apps/customer-portal/webapp/src/tests/AuthGuard.test.tsx	Adds tests for auth guard behavior across auth states.
apps/customer-portal/webapp/src/AuthGuard.tsx	Adds route guard using Asgardeo auth + loader context.
apps/customer-portal/webapp/src/AppWithConfig.tsx	Adds app composition with providers (auth/theme/query/logger/mock).
apps/customer-portal/webapp/src/App.tsx	Adds router structure (public login + protected app routes).
apps/customer-portal/webapp/package.json	Adds webapp package setup and dependencies.
apps/customer-portal/webapp/index.html	Adds Vite entry HTML with config.js injection.
apps/customer-portal/webapp/eslint.config.js	Adds ESLint flat config for TS/React hooks/refresh.
apps/customer-portal/webapp/README.md	Adds developer documentation for running/config/testing.
apps/customer-portal/webapp/.gitignore	Adds webapp ignore rules including config.js and env files.
apps/customer-portal/backend/tests/utils.bal	Adds test utility for generating auth headers.
apps/customer-portal/backend/tests/types.bal	Adds backend test types for error detail payload parsing.
apps/customer-portal/backend/tests/service_test.bal	Adds basic backend service tests for user/projects/cases endpoints.
apps/customer-portal/backend/tests/constants.bal	Adds mock constants and responses for backend tests.
apps/customer-portal/backend/tests/config.toml.local	Adds local test config template for mock ID token.
apps/customer-portal/backend/modules/scim/utils.bal	Adds SCIM email validation + phone extraction helpers.
apps/customer-portal/backend/modules/scim/types.bal	Adds SCIM domain types for requests/responses.
apps/customer-portal/backend/modules/scim/scim.bal	Adds SCIM user search/update operations.
apps/customer-portal/backend/modules/scim/constants.bal	Adds SCIM constants (email regex, attribute names, etc.).
apps/customer-portal/backend/modules/scim/client.bal	Adds SCIM HTTP client configured via client credentials OAuth2.
apps/customer-portal/backend/modules/entity/utils.bal	Adds entity helper functions for comments/attachments retrieval.
apps/customer-portal/backend/modules/entity/constants.bal	Adds default pagination constants for entity module.
apps/customer-portal/backend/modules/entity/client.bal	Adds entity service HTTP client with retry configuration.
apps/customer-portal/backend/modules/entity/Module.md	Adds entity module documentation.
apps/customer-portal/backend/modules/authorization/utils.bal	Adds role-check helper for future authorization enforcement.
apps/customer-portal/backend/modules/authorization/types.bal	Adds authorization types for JWT/user info.
apps/customer-portal/backend/modules/authorization/constants.bal	Adds authorization header constants.
apps/customer-portal/backend/modules/authorization/Module.md	Adds authorization module documentation.
apps/customer-portal/backend/constants.bal	Adds global backend constants for errors/pagination/validation.
apps/customer-portal/backend/config.toml.local	Adds local backend config template for entity/auth/scim settings.
apps/customer-portal/backend/Ballerina.toml	Adds Ballerina package metadata and build options.
apps/customer-portal/backend/.gitignore	Adds backend ignore rules for build artifacts and config.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@apps/customer-portal/webapp/src/models/responses.ts`:
- Around line 190-193: CaseStatus.id is typed as number while
CaseListItem.status.id and .severity.id are strings, causing inconsistent ID
types between CaseDetails and CaseListItem; change CaseStatus.id from number to
string to match CaseListItem (and update any usages such as mockCaseDetails to
use string IDs like "10"), ensuring all code paths that consume CaseStatus
(e.g., CaseDetails, mockCaseDetails) treat IDs as strings to avoid
equality/comparison bugs.

🧹 Nitpick comments (1)

apps/customer-portal/webapp/src/api/useGetCaseComments.ts (1)

80-84: offset and limit are always defined — the undefined checks are dead branches.

Since both are destructured with defaults on line 47 (offset = 0, limit = 20), the conditions on lines 82-83 are always true. You can simplify:

Suggested simplification

-        const params = new URLSearchParams();
-        if (offset !== undefined) params.set("offset", String(offset));
-        if (limit !== undefined) params.set("limit", String(limit));
-        const query = params.toString();
-        const requestUrl = `${baseUrl}/projects/${projectId}/cases/${caseId}/comments${query ? `?${query}` : ""}`;
+        const requestUrl = `${baseUrl}/projects/${projectId}/cases/${caseId}/comments?offset=${offset}&limit=${limit}`;

[shayanmalinda]

There are some merge conflicts. Unable to merge. @dileepapeiris Can you fix those?

[dileepapeiris]

There are some merge conflicts. Unable to merge. @dileepapeiris Can you fix those?

Updated