[Customer Portal][FE][Web] Implement Case Details Page + Routing, Table Accessibility, and API Refinement

apps/customer-portal/webapp/src/App.tsx

@@ -23,6 +23,7 @@ import DashboardPage from "@pages/DashboardPage";
 import SupportPage from "@pages/SupportPage";
 import UpdatesPage from "@pages/UpdatesPage";
 import AllCasesPage from "@pages/AllCasesPage";
+import CaseDetailsPage from "@pages/CaseDetailsPage";
 import NoveraChatPage from "@pages/NoveraChatPage";
 import CreateCasePage from "@pages/CreateCasePage";
 import AppLayout from "@layouts/AppLayout";
@@ -57,7 +58,10 @@ export default function App(): JSX.Element {
                 {/* Support */}
                 <Route path="support">
                   <Route index element={<SupportPage />} />
-                  <Route path="cases" element={<AllCasesPage />} />
+                  <Route path="cases">
+                    <Route index element={<AllCasesPage />} />
+                    <Route path=":caseId" element={<CaseDetailsPage />} />
+                  </Route>
                   <Route path="chat">
                     <Route index element={<NoveraChatPage />} />
                     <Route path="create-case" element={<CreateCasePage />} />

apps/customer-portal/webapp/src/api/__tests__/useGetCaseAttachments.test.tsx

@@ -63,10 +63,9 @@ describe("useGetCaseAttachments", () => {
   });
 
   it("should return mock attachments when isMockEnabled is true", async () => {
-    const { result } = renderHook(
-      () => useGetCaseAttachments("case-001"),
-      { wrapper },
-    );
+    const { result } = renderHook(() => useGetCaseAttachments("case-001"), {
+      wrapper,
+    });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
 

apps/customer-portal/webapp/src/api/__tests__/useGetProductUpdateLevels.test.tsx

@@ -29,7 +29,9 @@ vi.mock("@hooks/useLogger", () => ({
 }));
 
 vi.mock("@constants/apiConstants", async (importOriginal) => {
-  const actual = (await importOriginal()) as { ApiQueryKeys: Record<string, string> };
+  const actual = (await importOriginal()) as {
+    ApiQueryKeys: Record<string, string>;
+  };
   return {
     ...actual,
     API_MOCK_DELAY: 0,
@@ -132,8 +134,12 @@ describe("useGetProductUpdateLevels", () => {
       },
     ];
 
-    const originalWindowConfig = (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config;
-    (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config = {
+    const originalWindowConfig = (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config;
+    (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config = {
       CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.example.com",
     };
 
@@ -166,8 +172,12 @@ describe("useGetProductUpdateLevels", () => {
   it("should handle API error when isMockEnabled is false", async () => {
     mockIsMockEnabled = false;
 
-    const originalWindowConfig = (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config;
-    (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config = {
+    const originalWindowConfig = (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config;
+    (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config = {
       CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.example.com",
     };
 

apps/customer-portal/webapp/src/api/__tests__/useGetProductUpdatesStats.test.tsx

@@ -29,7 +29,9 @@ vi.mock("@hooks/useLogger", () => ({
 }));
 
 vi.mock("@constants/apiConstants", async (importOriginal) => {
-  const actual = (await importOriginal()) as { ApiQueryKeys: Record<string, string> };
+  const actual = (await importOriginal()) as {
+    ApiQueryKeys: Record<string, string>;
+  };
   return {
     ...actual,
     API_MOCK_DELAY: 0,
@@ -78,18 +80,24 @@ describe("useGetProductUpdatesStats", () => {
   );
 
   it("should return loading state initially", async () => {
-    const { result } = renderHook(() => useGetProductUpdatesStats("project-1"), {
-      wrapper,
-    });
+    const { result } = renderHook(
+      () => useGetProductUpdatesStats("project-1"),
+      {
+        wrapper,
+      },
+    );
 
     expect(result.current.isLoading).toBe(true);
   });
 
   it("should return mock data when isMockEnabled is true", async () => {
     mockIsMockEnabled = true;
-    const { result } = renderHook(() => useGetProductUpdatesStats("project-1"), {
-      wrapper,
-    });
+    const { result } = renderHook(
+      () => useGetProductUpdatesStats("project-1"),
+      {
+        wrapper,
+      },
+    );
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
 
@@ -130,8 +138,12 @@ describe("useGetProductUpdatesStats", () => {
       securityUpdatesPending: 25,
     };
 
-    const originalWindowConfig = (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config;
-    (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config = {
+    const originalWindowConfig = (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config;
+    (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config = {
       CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.example.com",
     };
 
@@ -145,9 +157,12 @@ describe("useGetProductUpdatesStats", () => {
         } as Response),
       );
 
-      const { result } = renderHook(() => useGetProductUpdatesStats("project-1"), {
-        wrapper,
-      });
+      const { result } = renderHook(
+        () => useGetProductUpdatesStats("project-1"),
+        {
+          wrapper,
+        },
+      );
 
       await waitFor(() => expect(result.current.isSuccess).toBe(true));
 
@@ -166,8 +181,12 @@ describe("useGetProductUpdatesStats", () => {
   it("should handle API error when isMockEnabled is false", async () => {
     mockIsMockEnabled = false;
 
-    const originalWindowConfig = (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config;
-    (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config = {
+    const originalWindowConfig = (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config;
+    (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config = {
       CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.example.com",
     };
 
@@ -181,9 +200,12 @@ describe("useGetProductUpdatesStats", () => {
         } as Response),
       );
 
-      const { result } = renderHook(() => useGetProductUpdatesStats("project-1"), {
-        wrapper,
-      });
+      const { result } = renderHook(
+        () => useGetProductUpdatesStats("project-1"),
+        {
+          wrapper,
+        },
+      );
 
       await waitFor(() => expect(result.current.isError).toBe(true));
       expect(result.current.error?.message).toContain(

apps/customer-portal/webapp/src/api/__tests__/useGetUpdatesStats.test.tsx

@@ -29,7 +29,9 @@ vi.mock("@hooks/useLogger", () => ({
 }));
 
 vi.mock("@constants/apiConstants", async (importOriginal) => {
-  const actual = (await importOriginal()) as { ApiQueryKeys: Record<string, string> };
+  const actual = (await importOriginal()) as {
+    ApiQueryKeys: Record<string, string>;
+  };
   return {
     ...actual,
     API_MOCK_DELAY: 0,
@@ -126,8 +128,12 @@ describe("useGetUpdatesStats", () => {
       securityUpdatesPending: 25,
     };
 
-    const originalWindowConfig = (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config;
-    (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config = {
+    const originalWindowConfig = (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config;
+    (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config = {
       CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.example.com",
     };
 
@@ -162,8 +168,12 @@ describe("useGetUpdatesStats", () => {
   it("should handle API error when isMockEnabled is false", async () => {
     mockIsMockEnabled = false;
 
-    const originalWindowConfig = (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config;
-    (window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config = {
+    const originalWindowConfig = (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config;
+    (
+      window as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }
+    ).config = {
       CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.example.com",
     };
 

apps/customer-portal/webapp/src/api/useGetCaseAttachments.ts

@@ -98,8 +98,7 @@ export default function useGetCaseAttachments(
         throw error;
       }
     },
-    enabled:
-      !!caseId && (isMockEnabled || (isSignedIn && !isAuthLoading)),
+    enabled: !!caseId && (isMockEnabled || (isSignedIn && !isAuthLoading)),
     staleTime: 5 * 60 * 1000, // 5 minutes
   });
 }

apps/customer-portal/webapp/src/api/useGetCaseDetails.ts

@@ -57,7 +57,7 @@ export default function useGetCaseDetails(
         }
 
         const idToken = await getIdToken();
-        const requestUrl = `${baseUrl}/projects/${projectId}/cases/${caseId}`;
+        const requestUrl = `${baseUrl}/cases/${caseId}`;
         const response = await fetch(requestUrl, {
           method: "GET",
           headers: addApiHeaders(idToken),

apps/customer-portal/webapp/src/api/useGetProductUpdateLevels.ts

@@ -40,9 +40,7 @@ export function useGetProductUpdateLevels(): UseQueryResult<
   return useQuery<ProductUpdateLevelsResponse, Error>({
     queryKey: [ApiQueryKeys.PRODUCT_UPDATE_LEVELS, isMockEnabled],
     queryFn: async (): Promise<ProductUpdateLevelsResponse> => {
-      logger.debug(
-        `Fetching product update levels, mock: ${isMockEnabled}`,
-      );
+      logger.debug(`Fetching product update levels, mock: ${isMockEnabled}`);
 
       if (isMockEnabled) {
         await new Promise((resolve) => setTimeout(resolve, API_MOCK_DELAY));

apps/customer-portal/webapp/src/components/dashboard/cases-table/CasesList.tsx

@@ -31,7 +31,7 @@ import {
 } from "@wso2/oxygen-ui";
 import { ExternalLink, MoreVertical } from "@wso2/oxygen-ui-icons-react";
 import { type JSX, type ChangeEvent } from "react";
-import type { CaseSearchResponse } from "@models/responses";
+import type { CaseSearchResponse, CaseListItem } from "@models/responses";
 import { getSeverityColor, getStatusColor } from "@utils/casesTable";
 import ErrorIndicator from "@components/common/error-indicator/ErrorIndicator";
 import CasesTableSkeleton from "@components/dashboard/cases-table/CasesTableSkeleton";
@@ -44,6 +44,8 @@ interface CasesListProps {
   rowsPerPage: number;
   onPageChange: (event: unknown, newPage: number) => void;
   onRowsPerPageChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  /** When provided, case title is clickable and navigates to case details. */
+  onCaseClick?: (caseItem: CaseListItem) => void;
 }
 
 const CasesList = ({
@@ -54,6 +56,7 @@ const CasesList = ({
   rowsPerPage,
   onPageChange,
   onRowsPerPageChange,
+  onCaseClick,
 }: CasesListProps): JSX.Element => {
   return (
     <>
@@ -111,17 +114,46 @@ const CasesList = ({
                     </Box>
                   </TableCell>
                   <TableCell>
-                    <Box>
+                    <Box
+                      sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 0.25,
+                      }}
+                    >
                       <Typography
+                        component="span"
                         variant="body2"
                         color="text.primary"
+                        role={onCaseClick ? "button" : undefined}
+                        tabIndex={onCaseClick ? 0 : undefined}
+                        onKeyDown={
+                          onCaseClick
+                            ? (e) => {
+                                if (
+                                  e.key === "Enter" ||
+                                  e.key === " "
+                                ) {
+                                  e.preventDefault();
+                                  onCaseClick(row);
+                                }
+                              }
+                            : undefined
+                        }
+                        onClick={
+                          onCaseClick
+                            ? () => onCaseClick(row)
+                            : undefined
+                        }
                         sx={{
-                          display: "flex",
+                          display: "inline-flex",
                           alignItems: "center",
                           gap: 0.5,
-                          cursor: "pointer",
+                          cursor: onCaseClick ? "pointer" : "default",
                           fontWeight: 500,
-                          "&:hover": { color: "primary.main" },
+                          "&:hover": onCaseClick
+                            ? { color: "primary.main" }
+                            : undefined,
                         }}
                       >
                         {row.title || "--"}

apps/customer-portal/webapp/src/components/dashboard/cases-table/CasesTable.tsx

@@ -227,6 +227,7 @@ const CasesTable = ({ projectId }: CasesTableProps): JSX.Element => {
         rowsPerPage={rowsPerPage}
         onPageChange={handleChangePage}
         onRowsPerPageChange={handleChangeRowsPerPage}
+        onCaseClick={(c) => navigate(`/${projectId}/support/cases/${c.id}`)}
       />
 
       {/* Filter popover */}

apps/customer-portal/webapp/src/components/dashboard/cases-table/__tests__/CasesList.test.tsx

@@ -35,7 +35,11 @@ vi.mock("@wso2/oxygen-ui", () => ({
     <thead data-testid="table-head">{children}</thead>
   ),
   TableRow: ({ children }: any) => <tr data-testid="table-row">{children}</tr>,
-  Typography: ({ children }: any) => <span>{children}</span>,
+  Typography: ({ children, onClick, ...rest }: any) => (
+    <span onClick={onClick} {...rest}>
+      {children}
+    </span>
+  ),
   Chip: ({ label }: any) => <span data-testid="chip">{label}</span>,
   IconButton: ({ children }: any) => <button>{children}</button>,
   Paper: ({ children }: any) => <div>{children}</div>,
@@ -193,6 +197,49 @@ describe("CasesList", () => {
     expect(mockOnRowsPerPageChange).toHaveBeenCalled();
   });
 
+  it("should call onCaseClick with case when case title is clicked", () => {
+    const mockOnCaseClick = vi.fn();
+    render(
+      <CasesList
+        isLoading={false}
+        data={mockData}
+        page={0}
+        rowsPerPage={10}
+        onPageChange={mockOnPageChange}
+        onRowsPerPageChange={mockOnRowsPerPageChange}
+        onCaseClick={mockOnCaseClick}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Test Case 1"));
+    expect(mockOnCaseClick).toHaveBeenCalledTimes(1);
+    expect(mockOnCaseClick).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "1", title: "Test Case 1", number: "CS-001" }),
+    );
+
+    fireEvent.click(screen.getByText("Test Case 2"));
+    expect(mockOnCaseClick).toHaveBeenCalledTimes(2);
+    expect(mockOnCaseClick).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: "2", title: "Test Case 2", number: "CS-002" }),
+    );
+  });
+
+  it("should not call onCaseClick when not provided (title still rendered)", () => {
+    render(
+      <CasesList
+        isLoading={false}
+        data={mockData}
+        page={0}
+        rowsPerPage={10}
+        onPageChange={mockOnPageChange}
+        onRowsPerPageChange={mockOnRowsPerPageChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Test Case 1"));
+    expect(screen.getByText("Test Case 1")).toBeInTheDocument();
+  });
+
   it("should render '--' for null or undefined values", () => {
     const dataWithNulls = {
       cases: [