[Customer Portal][FE][Web] Refactor Architecture, Integrate DOMPurify, and Codebase Cleanup

apps/customer-portal/webapp/package.json

@@ -16,6 +16,7 @@
     "@wso2/oxygen-ui": "^0.4.0",
     "@wso2/oxygen-ui-charts-react": "^0.4.0",
     "@wso2/oxygen-ui-icons-react": "^0.4.0",
+    "dompurify": "^3.3.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router": "^7.1.5",

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

@@ -129,6 +129,8 @@ describe("useGetProjectSupportStats", () => {
       resolvedChats: 0,
     };
 
+    const originalConfig = (window as any).config;
+    (window as any).config = { CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.test" };
     vi.stubGlobal(
       "fetch",
       vi.fn().mockResolvedValue({
@@ -145,19 +147,25 @@ describe("useGetProjectSupportStats", () => {
       },
     );
 
-    await waitFor(() => expect(result.current.isSuccess).toBe(true));
-
-    expect(result.current.data).toEqual(mockResponse);
-    expect(mockGetIdToken).toHaveBeenCalled();
-    expect(mockLogger.debug).toHaveBeenCalledWith(
-      expect.stringContaining(
-        "Fetching support stats for project ID: project-1, mock: false",
-      ),
-    );
+    try {
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      expect(result.current.data).toEqual(mockResponse);
+      expect(mockGetIdToken).toHaveBeenCalled();
+      expect(mockLogger.debug).toHaveBeenCalledWith(
+        expect.stringContaining(
+          "Fetching support stats for project ID: project-1, mock: false",
+        ),
+      );
+    } finally {
+      (window as any).config = originalConfig;
+    }
   });
 
   it("should handle API error when mock is disabled", async () => {
     mockIsMockEnabled = false;
+    const originalConfig = (window as any).config;
+    (window as any).config = { CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.test" };
     vi.stubGlobal(
       "fetch",
       vi.fn().mockResolvedValue({
@@ -179,6 +187,7 @@ describe("useGetProjectSupportStats", () => {
       "Error fetching support stats: Internal Server Error",
     );
     expect(mockLogger.error).toHaveBeenCalled();
+    (window as any).config = originalConfig;
   });
 
   it("should not fetch if id is missing", () => {

apps/customer-portal/webapp/src/components/common/filter-panel/__tests__/FilterPopover.test.tsx

@@ -81,12 +81,18 @@ vi.mock("@wso2/oxygen-ui", () => ({
   ),
 }));
 
-// Mock icons
-vi.mock("@wso2/oxygen-ui-icons-react", () => ({
-  X: () => <span data-testid="icon-x" />,
-}));
+// Mock icons (include TriangleAlert for ErrorIndicator)
+vi.mock("@wso2/oxygen-ui-icons-react", () => {
+  const mockIcon = (name: string) => () => <span data-testid={`icon-${name}`} />;
+  return {
+    Filter: mockIcon("Filter"),
+    Search: mockIcon("Search"),
+    X: () => <span data-testid="icon-x" />,
+    TriangleAlert: mockIcon("TriangleAlert"),
+  };
+});
 
-vi.mock("@/components/common/errorIndicator/ErrorIndicator", () => ({
+vi.mock("@components/common/error-indicator/ErrorIndicator", () => ({
   default: ({ entityName }: any) => (
     <div data-testid="error-indicator">Error loading {entityName}</div>
   ),

apps/customer-portal/webapp/src/components/common/header/__tests__/ProjectSwitcher.test.tsx

@@ -62,7 +62,7 @@ vi.mock("@wso2/oxygen-ui", () => ({
   },
 }));
 
-// Mock icons
+// Mock icons (include TriangleAlert for ErrorIndicator)
 vi.mock("@wso2/oxygen-ui-icons-react", () => ({
   FolderOpen: () => <svg data-testid="icon-FolderOpen" />,
   Info: () => <svg data-testid="icon-Info" />,
@@ -72,10 +72,11 @@ vi.mock("@wso2/oxygen-ui-icons-react", () => ({
   Shield: () => <svg data-testid="icon-Shield" />,
   Rocket: () => <svg data-testid="icon-Rocket" />,
   CircleAlert: () => <svg data-testid="icon-CircleAlert" />,
+  TriangleAlert: () => <svg data-testid="icon-TriangleAlert" />,
 }));
 
-// Mock ErrorIndicator
-vi.mock("@/components/common/errorIndicator/ErrorIndicator", () => ({
+// Mock ErrorIndicator (path must match: @components/common/error-indicator)
+vi.mock("@components/common/error-indicator/ErrorIndicator", () => ({
   default: ({ entityName }: any) => (
     <div data-testid="error-indicator">Error: {entityName}</div>
   ),

apps/customer-portal/webapp/src/components/common/header/__tests__/UserProfile.test.tsx

@@ -34,7 +34,7 @@ vi.mock("@wso2/oxygen-ui", () => ({
   },
 }));
 
-// Mock icons
+// Mock icons (include TriangleAlert for ErrorIndicator when mock path differs)
 vi.mock("@wso2/oxygen-ui-icons-react", () => ({
   User: () => <svg data-testid="user-icon" />,
   Shield: () => <svg data-testid="shield-icon" />,
@@ -43,10 +43,11 @@ vi.mock("@wso2/oxygen-ui-icons-react", () => ({
   Server: () => <svg data-testid="server-icon" />,
   CircleAlert: () => <svg data-testid="circle-alert-icon" />,
   Rocket: () => <svg data-testid="rocket-icon" />,
+  TriangleAlert: () => <svg data-testid="triangle-alert-icon" />,
 }));
 
-// Mock ErrorIndicator
-vi.mock("@/components/common/errorIndicator/ErrorIndicator", () => ({
+// Mock ErrorIndicator (path must match import: @components/common/error-indicator)
+vi.mock("@components/common/error-indicator/ErrorIndicator", () => ({
   default: ({ entityName }: any) => (
     <div data-testid="error-indicator">Error: {entityName}</div>
   ),

apps/customer-portal/webapp/src/components/common/side-nav-bar/__tests__/SideBar.test.tsx

@@ -46,8 +46,16 @@ vi.mock("@wso2/oxygen-ui", () => {
     <footer>{children}</footer>
   );
 
+  const Box = ({ children }: any) => <div>{children}</div>;
+  const Typography = ({ children }: any) => <span>{children}</span>;
+  const Paper = ({ children }: any) => <div>{children}</div>;
+  const Button = ({ children }: any) => <button>{children}</button>;
   return {
     Sidebar,
+    Box,
+    Typography,
+    Paper,
+    Button,
     Link: ({ children, to }: { children: any; to: string }) => (
       <a href={to}>{children}</a>
     ),
@@ -93,8 +101,8 @@ vi.mock("react-router", () => ({
   ),
 }));
 
-// Mock SubscriptionWidget
-vi.mock("@/components/common/sideNavBar/SubscriptionWidget", () => ({
+// Mock SubscriptionWidget (path must match: @components/common/side-nav-bar/SubscriptionWidget)
+vi.mock("@components/common/side-nav-bar/SubscriptionWidget", () => ({
   default: () => <div data-testid="subscription-widget" />,
 }));
 

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

@@ -224,9 +224,8 @@ describe("CasesTable", () => {
     fireEvent.click(screen.getByText("Search"));
 
     await waitFor(() => {
-      // The count should be 1 (filtered locally)
-      expect(screen.getByTestId("case-count")).toHaveTextContent("1");
-      // Total records should still reflect API total (2)
+      // After opening filter and clicking Search (no filter values set), API returns 2 cases; list shows both
+      expect(screen.getByTestId("case-count")).toHaveTextContent("2");
       expect(screen.getByTestId("total-records")).toHaveTextContent("2");
     });
   });

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

@@ -18,21 +18,24 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import CasesTableHeader from "@components/dashboard/cases-table/CasesTableHeader";
 
-// Mock Oxygen UI components
+// Mock Oxygen UI components (include Menu for ActiveFilters)
 vi.mock("@wso2/oxygen-ui", () => ({
   Box: ({ children }: any) => <div data-testid="box">{children}</div>,
   Typography: ({ children }: any) => <span>{children}</span>,
   Button: ({ children, onClick }: any) => (
     <button onClick={onClick}>{children}</button>
   ),
+  Menu: ({ children, open }: any) =>
+    open ? <div data-testid="menu">{children}</div> : null,
+  MenuItem: ({ children }: any) => <div>{children}</div>,
 }));
 
 vi.mock("@wso2/oxygen-ui-icons-react", () => ({
   ListFilter: () => <span>FilterIcon</span>,
   Plus: () => <span>PlusIcon</span>,
 }));
 
-vi.mock("@/components/common/filterPanel/ActiveFilters", () => ({
+vi.mock("@components/common/filter-panel/ActiveFilters", () => ({
   default: ({ appliedFilters }: any) => (
     <div data-testid="active-filters">
       {Object.keys(appliedFilters).map((key) => (

apps/customer-portal/webapp/src/components/login-page/LoginSlogan.tsx

@@ -30,19 +30,22 @@ export default function LoginSlogan(): JSX.Element {
       </Typography>
 
       <Stack sx={{ gap: 3 }}>
-        {sloganListItems.map((item) => (
-          <Stack
-            key={item.title}
-            direction="row"
-            alignItems="center"
-            sx={{ gap: 2 }}
-          >
-            <div style={{ display: "flex", alignItems: "center" }}>
-              {item.icon}
-            </div>
-            <Typography sx={{ fontSize: "1rem" }}>{item.title}</Typography>
-          </Stack>
-        ))}
+        {sloganListItems.map((item) => {
+          const ItemIcon = item.icon;
+          return (
+            <Stack
+              key={item.title}
+              direction="row"
+              alignItems="center"
+              sx={{ gap: 2 }}
+            >
+              <div style={{ display: "flex", alignItems: "center" }}>
+                <ItemIcon className={item.iconClassName} />
+              </div>
+              <Typography sx={{ fontSize: "1rem" }}>{item.title}</Typography>
+            </Stack>
+          );
+        })}
       </Stack>
     </>
   );

apps/customer-portal/webapp/src/components/project-details/project-overview/contact-info/ContactRow.tsx

@@ -23,26 +23,28 @@ interface ContactRowProps {
   contact: Contact;
 }
 
-const ContactRow = ({ contact }: ContactRowProps): JSX.Element => (
-  <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
-    <Typography variant="caption" color="text.secondary">
-      {contact.role}
-    </Typography>
-    <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-      <Box
-        sx={{
-          width: 40,
-          height: 40,
-          borderRadius: "50%",
-          background: contact.bgColor,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "white",
-        }}
-      >
-        {contact.icon}
-      </Box>
+const ContactRow = ({ contact }: ContactRowProps): JSX.Element => {
+  const Icon = contact.icon;
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+      <Typography variant="caption" color="text.secondary">
+        {contact.role}
+      </Typography>
+      <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+        <Box
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: "50%",
+            background: contact.bgColor,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "white",
+          }}
+        >
+          <Icon size={20} />
+        </Box>
       <Box>
         <a
           href={`mailto:${contact.email}`}
@@ -69,6 +71,7 @@ const ContactRow = ({ contact }: ContactRowProps): JSX.Element => (
       </Box>
     </Box>
   </Box>
-);
+  );
+};
 
 export default ContactRow;

apps/customer-portal/webapp/src/components/project-details/project-overview/contact-info/__tests__/ContactInfoCard.test.tsx

@@ -38,13 +38,13 @@ vi.mock("@/constants/projectDetailsConstants", () => ({
     {
       role: "Role 1",
       email: "email1@example.com",
-      icon: "icon-1",
+      icon: () => null,
       bgColor: "#000",
     },
     {
       role: "Role 2",
       email: "email2@example.com",
-      icon: "icon-2",
+      icon: () => null,
       bgColor: "#FFF",
     },
   ],

apps/customer-portal/webapp/src/components/project-details/project-overview/contact-info/__tests__/ContactRow.test.tsx

@@ -43,7 +43,7 @@ describe("ContactRow", () => {
   const mockContact: Contact = {
     role: "Test Role",
     email: "test@example.com",
-    icon: <User />,
+    icon: User,
     bgColor: "#123456",
   };