[Customer Portal][FE][Web] Implement Project Card Suite, Project Hub Page, and Loading Skeletons

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

@@ -17,7 +17,7 @@
 import { renderHook, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import useSearchProjects from "../useSearchProjects";
+import useSearchProjects from "@/api/useSearchProjects";
 import { mockProjects } from "@/models/mockData";
 import type { ReactNode } from "react";
 

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

@@ -40,7 +40,9 @@ export default function useSearchProjects(
   const logger = useLogger();
   const limit = fetchAll ? 100 : searchData.pagination?.limit || 10;
 
-  // A stable key for the "all projects" query ensures cache sharing
+  /**
+   * A stable key for the "all projects" query ensures cache sharing
+   */
   const queryKey = fetchAll
     ? [ApiQueryKeys.PROJECTS, "all"]
     : [ApiQueryKeys.PROJECTS, searchData];
@@ -60,7 +62,11 @@ export default function useSearchProjects(
         `Fetching projects... offset: ${pageParam}, limit: ${limit}, fetchAll: ${fetchAll}`,
       );
 
-      // Simulate a network delay
+      /**
+       * Mock behavior: simulate network latency for the in-memory `mockProjects` data.
+       * This is intended only for development/demo use and should be removed or
+       * replaced when wiring this hook to the real backend API.
+       */
       await new Promise((resolve) => setTimeout(resolve, 800));
 
       const offset = typeof pageParam === "number" ? pageParam : 0;

apps/customer-portal/webapp/src/components/header/Actions.tsx

@@ -23,7 +23,7 @@ import {
 import { Users } from "@wso2/oxygen-ui-icons-react";
 import type { JSX } from "react";
 import { JOIN_COMMUNITY_URL } from "@/constants/appLayoutConstants";
-import UserProfile from "./UserProfile";
+import UserProfile from "@/components/header/UserProfile";
 
 /**
  * Actions component for the header.

apps/customer-portal/webapp/src/components/header/Header.tsx

@@ -20,10 +20,10 @@ import { useNavigate, useLocation, useParams } from "react-router";
 import useSearchProjects from "@/api/useSearchProjects";
 import { useLogger } from "@/hooks/useLogger";
 import type { ProjectListItem } from "@/models/responses";
-import Brand from "./Brand";
-import Actions from "./Actions";
-import SearchBar from "./SearchBar";
-import ProjectSwitcher from "./ProjectSwitcher";
+import Brand from "@/components/header/Brand";
+import Actions from "@/components/header/Actions";
+import SearchBar from "@/components/header/SearchBar";
+import ProjectSwitcher from "@/components/header/ProjectSwitcher";
 
 /**
  * Props for the Header component.
@@ -74,16 +74,17 @@ export default function Header({ onToggleSidebar }: HeaderProps): JSX.Element {
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
+    isError,
   } = useSearchProjects({}, true);
 
   /**
    * Fetch next page of projects if available.
    */
   useEffect(() => {
-    if (hasNextPage && !isFetchingNextPage) {
+    if (hasNextPage && !isFetchingNextPage && !isError) {
       fetchNextPage();
     }
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  }, [hasNextPage, isFetchingNextPage, isError, fetchNextPage]);
 
   /**
    * Flatten the projects response.
@@ -94,7 +95,7 @@ export default function Header({ onToggleSidebar }: HeaderProps): JSX.Element {
   /**
    * Find the project from the URL parameters.
    */
-  const projectFromUrl = projects.find((project) => project.key === projectId);
+  const projectFromUrl = projects.find((project) => project.id === projectId);
 
   /**
    * State for the selected project.
@@ -111,25 +112,35 @@ export default function Header({ onToggleSidebar }: HeaderProps): JSX.Element {
       /**
        * Find the project from the URL parameters.
        */
-      const project = projects.find((project) => project.key === projectId);
+      const project = projects.find((p) => p.id === projectId);
       /**
        * Set the selected project if it is different from the current selected project.
+       * If no matching project is found, clear the selection.
        */
-      if (project && project.key !== selectedProject?.key) {
-        setProject(project);
+      if (project) {
+        if (project.id !== selectedProject?.id) {
+          setProject(project);
+        }
+      } else {
+        setProject(undefined);
       }
+    } else if (selectedProject) {
+      /**
+       * If projectId is missing (e.g., on the project hub), clear the selection.
+       */
+      setProject(undefined);
     }
-  }, [projectId, selectedProject?.key, projects]);
+  }, [projectId, selectedProject?.id, projects]);
 
   /**
    * Handles the project change.
    *
-   * @param {string} projectKey - Key of the project to switch to.
+   * @param {string} projectId - ID of the project to switch to.
    */
-  const handleProjectChange = (projectKey: string) => {
-    const project = projects.find((p) => p.key === projectKey);
+  const handleProjectChange = (id: string) => {
+    const project = projects.find((p) => p.id === id);
     if (project) {
-      logger.debug(`Switching to project: ${project.name} (${project.key})`);
+      logger.debug(`Switching to project: ${project.name} (${project.id})`);
       /**
        * Set the selected project.
        */
@@ -141,9 +152,9 @@ export default function Header({ onToggleSidebar }: HeaderProps): JSX.Element {
       /**
        * Navigate to the new project.
        */
-      navigate(`/${project.key}/${subPath || "dashboard"}`);
+      navigate(`/${project.id}/${subPath || "dashboard"}`);
     } else {
-      logger.warn(`Project with key ${projectKey} not found for switching`);
+      logger.warn(`Project with ID: ${id} not found for switching`);
     }
   };
 

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

@@ -34,7 +34,7 @@ interface ProjectSwitcherProps {
   /**
    * Callback function to handle project change.
    */
-  onProjectChange: (projectKey: string) => void;
+  onProjectChange: (projectId: string) => void;
 }
 
 /**
@@ -52,15 +52,15 @@ export default function ProjectSwitcher({
     <HeaderUI.Switchers showDivider={false}>
       {/* project switcher select */}
       <ComplexSelect
-        value={selectedProject?.key || ""}
+        value={selectedProject?.id || ""}
         onChange={(event: any) => onProjectChange(event.target.value)}
         size="small"
         sx={{ minWidth: 200 }}
         renderValue={(selected) => {
           /**
            * Find the project from the URL parameters.
            */
-          const project = projects.find((project) => project.key === selected);
+          const project = projects.find((project) => project.id === selected);
           /**
            * Return the project name and icon.
            */
@@ -77,7 +77,7 @@ export default function ProjectSwitcher({
         <ComplexSelect.ListHeader>Switch Project</ComplexSelect.ListHeader>
         {/* project switcher list items */}
         {projects.map((project) => (
-          <ComplexSelect.MenuItem key={project.key} value={project.key}>
+          <ComplexSelect.MenuItem key={project.id} value={project.id}>
             <ComplexSelect.MenuItem.Text
               primary={project.name}
               secondary={project.description}

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

@@ -16,7 +16,7 @@
 
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import Brand from "../Brand";
+import Brand from "@/components/header/Brand";
 
 // Mock @wso2/oxygen-ui
 vi.mock("@wso2/oxygen-ui", () => ({

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

@@ -103,15 +103,20 @@ vi.mock("@/hooks/useLogger", () => ({
   }),
 }));
 
+const mockFetchNextPage = vi.fn();
+const mockUseSearchProjects = vi.fn(() => ({
+  data: {
+    pages: [{ projects: mockProjects }],
+  },
+  fetchNextPage: mockFetchNextPage,
+  hasNextPage: false,
+  isFetchingNextPage: false,
+  isError: false,
+})) as any;
+
 vi.mock("@/api/useSearchProjects", () => ({
-  default: vi.fn(() => ({
-    data: {
-      pages: [{ projects: mockProjects }],
-    },
-    fetchNextPage: vi.fn(),
-    hasNextPage: false,
-    isFetchingNextPage: false,
-  })),
+  default: (searchData: any, fetchAll: any) =>
+    mockUseSearchProjects(searchData, fetchAll),
 }));
 
 // Mock sub-components
@@ -128,14 +133,19 @@ vi.mock("../SearchBar", () => ({
 }));
 
 vi.mock("../ProjectSwitcher", () => ({
-  default: ({ onProjectChange }: any) => (
-    <div data-testid="project-switcher">
+  default: ({ projects, selectedProject, onProjectChange }: any) => (
+    <div
+      data-testid="project-switcher"
+      data-selected-id={selectedProject?.id || ""}
+    >
       <select
         data-testid="project-select"
+        value={selectedProject?.id || ""}
         onChange={(e) => onProjectChange(e.target.value)}
       >
-        {mockProjects.map((p: any) => (
-          <option key={p.key} value={p.key}>
+        <option value="">None</option>
+        {projects.map((p: any) => (
+          <option key={p.id} value={p.id}>
             {p.name}
           </option>
         ))}
@@ -156,6 +166,15 @@ describe("Header", () => {
     vi.clearAllMocks();
     mockLocation.pathname = "/";
     mockParams.projectId = "";
+    mockUseSearchProjects.mockReturnValue({
+      data: {
+        pages: [{ projects: mockProjects }],
+      },
+      fetchNextPage: mockFetchNextPage,
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      isError: false,
+    });
   });
 
   it("should render the brand component", () => {
@@ -196,13 +215,62 @@ describe("Header", () => {
     render(<Header onToggleSidebar={mockOnToggleSidebar} />);
 
     const select = screen.getByTestId("project-select");
-    fireEvent.change(select, { target: { value: mockProjects[1].key } });
+    fireEvent.change(select, { target: { value: mockProjects[1].id } });
 
     expect(mockNavigate).toHaveBeenCalledWith(
-      `/${mockProjects[1].key}/dashboard`,
+      `/${mockProjects[1].id}/dashboard`,
     );
   });
 
+  it("should clear selection when projectId is invalid", () => {
+    mockLocation.pathname = "/invalid-project/dashboard";
+    mockParams.projectId = "invalid-project";
+
+    render(<Header onToggleSidebar={mockOnToggleSidebar} />);
+
+    const switcher = screen.getByTestId("project-switcher");
+    expect(switcher).toHaveAttribute("data-selected-id", "");
+  });
+
+  it("should clear selection when projectId is missing (hub page)", () => {
+    mockLocation.pathname = "/";
+    mockParams.projectId = "";
+
+    render(<Header onToggleSidebar={mockOnToggleSidebar} />);
+
+    // Switcher is not rendered on Hub, but we can verify the state if it was
+    // For coverage of the useEffect clearing logic, we check that it handles missing projectId
+    expect(screen.queryByTestId("project-switcher")).toBeNull();
+  });
+
+  it("should call fetchNextPage if hasNextPage is true", () => {
+    mockUseSearchProjects.mockReturnValue({
+      data: { pages: [{ projects: mockProjects }] },
+      fetchNextPage: mockFetchNextPage,
+      hasNextPage: true,
+      isFetchingNextPage: false,
+      isError: false,
+    });
+
+    render(<Header onToggleSidebar={mockOnToggleSidebar} />);
+
+    expect(mockFetchNextPage).toHaveBeenCalled();
+  });
+
+  it("should NOT call fetchNextPage if isError is true", () => {
+    mockUseSearchProjects.mockReturnValue({
+      data: { pages: [{ projects: mockProjects }] },
+      fetchNextPage: mockFetchNextPage,
+      hasNextPage: true,
+      isFetchingNextPage: false,
+      isError: true,
+    });
+
+    render(<Header onToggleSidebar={mockOnToggleSidebar} />);
+
+    expect(mockFetchNextPage).not.toHaveBeenCalled();
+  });
+
   it("should render Actions", () => {
     render(<Header onToggleSidebar={mockOnToggleSidebar} />);
     expect(screen.getByTestId("actions")).toBeInTheDocument();

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

@@ -15,7 +15,7 @@
 // under the License.
 
 import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import ProjectSwitcher from "@/components/header/ProjectSwitcher";
 import { mockProjects } from "@/models/mockData";
 
@@ -55,6 +55,10 @@ vi.mock("@wso2/oxygen-ui-icons-react", () => ({
 describe("ProjectSwitcher", () => {
   const mockOnProjectChange = vi.fn();
 
+  beforeEach(() => {
+    mockOnProjectChange.mockClear();
+  });
+
   it("should render projects in the dropdown", () => {
     render(
       <ProjectSwitcher
@@ -80,8 +84,8 @@ describe("ProjectSwitcher", () => {
     );
 
     const select = screen.getByTestId("project-select");
-    fireEvent.change(select, { target: { value: mockProjects[1].key } });
+    fireEvent.change(select, { target: { value: mockProjects[1].id } });
 
-    expect(mockOnProjectChange).toHaveBeenCalledWith(mockProjects[1].key);
+    expect(mockOnProjectChange).toHaveBeenCalledWith(mockProjects[1].id);
   });
 });