TAA-136: MVP of the Approval Request and Approval Request List page functionality

package.json

@@ -21,15 +21,18 @@
     "@zendeskgarden/container-grid": "^3.0.14",
     "@zendeskgarden/container-utilities": "^2.0.2",
     "@zendeskgarden/react-accordions": "8.76.9",
+    "@zendeskgarden/react-avatars": "8.76.9",
+    "@zendeskgarden/react-breadcrumbs": "8.76.9",
     "@zendeskgarden/react-buttons": "8.76.9",
     "@zendeskgarden/react-datepickers": "8.76.9",
     "@zendeskgarden/react-dropdowns.next": "8.76.9",
+    "@zendeskgarden/react-grid": "8.76.9",
     "@zendeskgarden/react-forms": "8.76.9",
-    "@zendeskgarden/react-grid": "^8.76.9",
     "@zendeskgarden/react-loaders": "8.76.9",
     "@zendeskgarden/react-modals": "8.76.9",
     "@zendeskgarden/react-notifications": "8.76.9",
     "@zendeskgarden/react-pagination": "8.76.9",
+    "@zendeskgarden/react-tables": "8.76.9",
     "@zendeskgarden/react-tags": "8.76.9",
     "@zendeskgarden/react-theming": "8.76.9",
     "@zendeskgarden/react-tooltips": "8.76.9",
@@ -66,7 +69,8 @@
     "@svgr/rollup": "^8.1.0",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.6.1",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",

rollup.config.mjs

@@ -36,6 +36,7 @@ export default defineConfig([
       "new-request-form": "src/modules/new-request-form/index.tsx",
       "flash-notifications": "src/modules/flash-notifications/index.ts",
       "service-catalog": "src/modules/service-catalog/index.tsx",
+      "approval-requests": "src/modules/approval-requests/index.tsx",
     },
     output: {
       dir: "assets",

src/modules/approval-requests/ApprovalRequestListPage.test.tsx

@@ -0,0 +1,168 @@
+import { screen, render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactElement } from "react";
+import { ThemeProvider } from "@zendeskgarden/react-theming";
+import ApprovalRequestListPage from "./ApprovalRequestListPage";
+import { useSearchApprovalRequests } from "./hooks/useSearchApprovalRequests";
+
+jest.mock(
+  "@zendeskgarden/svg-icons/src/16/search-stroke.svg",
+  () => "svg-mock"
+);
+
+jest.mock("./hooks/useSearchApprovalRequests");
+const mockUseSearchApprovalRequests = useSearchApprovalRequests as jest.Mock;
+
+const renderWithTheme = (ui: ReactElement) => {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+};
+
+const mockApprovalRequests = [
+  {
+    id: 123,
+    subject: "Hardware request",
+    requester_name: "Jane Doe",
+    created_by_name: "John Doe",
+    created_at: "2024-02-20T10:00:00Z",
+    status: "active",
+  },
+  {
+    id: 456,
+    subject: "Software license",
+    requester_name: "Jane Smith",
+    created_by_name: "Bob Smith",
+    created_at: "2024-02-19T15:00:00Z",
+    status: "approved",
+  },
+];
+
+describe("ApprovalRequestListPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the loading state initially", () => {
+    mockUseSearchApprovalRequests.mockReturnValue({
+      approvalRequests: [],
+      errorFetchingApprovalRequests: null,
+      approvalRequestStatus: "any",
+      setApprovalRequestStatus: jest.fn(),
+      isLoading: true,
+    });
+
+    renderWithTheme(
+      <ApprovalRequestListPage baseLocale="en-US" helpCenterPath="/hc/en-us" />
+    );
+
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
+  });
+
+  it("renders the approval requests list page with data", () => {
+    mockUseSearchApprovalRequests.mockReturnValue({
+      approvalRequests: mockApprovalRequests,
+      errorFetchingApprovalRequests: null,
+      approvalRequestStatus: "any",
+      setApprovalRequestStatus: jest.fn(),
+      isLoading: false,
+    });
+
+    renderWithTheme(
+      <ApprovalRequestListPage baseLocale="en-US" helpCenterPath="/hc/en-us" />
+    );
+
+    expect(screen.getByText("Approval requests")).toBeInTheDocument();
+    expect(screen.getByText("Hardware request")).toBeInTheDocument();
+    expect(screen.getByText("Software license")).toBeInTheDocument();
+  });
+
+  it("renders the empty state when there are no approval requests", () => {
+    mockUseSearchApprovalRequests.mockReturnValue({
+      approvalRequests: [],
+      errorFetchingApprovalRequests: null,
+      approvalRequestStatus: "any",
+      setApprovalRequestStatus: jest.fn(),
+      isLoading: false,
+    });
+
+    renderWithTheme(
+      <ApprovalRequestListPage baseLocale="en-US" helpCenterPath="/hc/en-us" />
+    );
+
+    expect(screen.getByText("No approval requests found.")).toBeInTheDocument();
+  });
+
+  it("filters the approval requests by search term", async () => {
+    const user = userEvent.setup();
+    mockUseSearchApprovalRequests.mockReturnValue({
+      approvalRequests: mockApprovalRequests,
+      errorFetchingApprovalRequests: null,
+      approvalRequestStatus: "any",
+      setApprovalRequestStatus: jest.fn(),
+      isLoading: false,
+    });
+
+    renderWithTheme(
+      <ApprovalRequestListPage baseLocale="en-US" helpCenterPath="/hc/en-us" />
+    );
+
+    const searchInput = screen.getByPlaceholderText(
+      /search approval requests/i
+    );
+    await user.type(searchInput, "Hardware");
+
+    waitFor(() => {
+      expect(screen.getByText("Hardware request")).toBeInTheDocument();
+      expect(screen.queryByText("Software license")).not.toBeInTheDocument();
+    });
+  });
+
+  it("sorts the approval requests by the sent on date", async () => {
+    const user = userEvent.setup();
+    mockUseSearchApprovalRequests.mockReturnValue({
+      approvalRequests: mockApprovalRequests,
+      errorFetchingApprovalRequests: null,
+      approvalRequestStatus: "any",
+      setApprovalRequestStatus: jest.fn(),
+      isLoading: false,
+    });
+
+    renderWithTheme(
+      <ApprovalRequestListPage baseLocale="en-US" helpCenterPath="/hc/en-us" />
+    );
+
+    const createdHeader = screen.getByText("Sent on");
+    await user.click(createdHeader);
+
+    // Wait for re-render after sort
+    await waitFor(() => {
+      const rows = screen.getAllByRole("row").slice(1); // Skip header row
+      expect(rows[0]).toHaveTextContent("Software license");
+      expect(rows[1]).toHaveTextContent("Hardware request");
+    });
+  });
+
+  it("throws an error when the request fails", () => {
+    const consoleSpy = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    const error = new Error("Failed to fetch");
+    mockUseSearchApprovalRequests.mockReturnValue({
+      approvalRequests: [],
+      errorFetchingApprovalRequests: error,
+      approvalRequestStatus: "any",
+      setApprovalRequestStatus: jest.fn(),
+      isLoading: false,
+    });
+
+    expect(() =>
+      renderWithTheme(
+        <ApprovalRequestListPage
+          baseLocale="en-US"
+          helpCenterPath="/hc/en-us"
+        />
+      )
+    ).toThrow("Failed to fetch");
+
+    consoleSpy.mockRestore();
+  });
+});

src/modules/approval-requests/ApprovalRequestListPage.tsx

@@ -0,0 +1,115 @@
+import { memo, useState, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { MD, XXL } from "@zendeskgarden/react-typography";
+import { getColorV8 } from "@zendeskgarden/react-theming";
+import { Spinner } from "@zendeskgarden/react-loaders";
+import { useSearchApprovalRequests } from "./hooks/useSearchApprovalRequests";
+import ApprovalRequestListFilters from "./components/approval-request-list/ApprovalRequestListFilters";
+import ApprovalRequestListTable from "./components/approval-request-list/ApprovalRequestListTable";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.space.lg};
+  margin-top: ${(props) => props.theme.space.xl}; /* 40px */
+`;
+
+const LoadingContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const NoApprovalRequestsText = styled(MD)`
+  color: ${(props) => getColorV8("grey", 600, props.theme)};
+`;
+
+export interface ApprovalRequestListPageProps {
+  baseLocale: string;
+  helpCenterPath: string;
+}
+
+type SortDirection = "asc" | "desc" | undefined;
+
+function ApprovalRequestListPage({
+  baseLocale,
+  helpCenterPath,
+}: ApprovalRequestListPageProps) {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortDirection, setSortDirection] = useState<SortDirection>(undefined);
+  const {
+    approvalRequests,
+    errorFetchingApprovalRequests: error,
+    approvalRequestStatus,
+    setApprovalRequestStatus,
+    isLoading,
+  } = useSearchApprovalRequests();
+
+  const sortedAndFilteredApprovalRequests = useMemo(() => {
+    let results = [...approvalRequests];
+
+    // Apply search filter
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase();
+      results = results.filter((request) =>
+        request.subject.toLowerCase().includes(term)
+      );
+    }
+
+    // Apply sorting
+    if (sortDirection) {
+      results.sort((a, b) => {
+        const dateA = new Date(a.created_at).getTime();
+        const dateB = new Date(b.created_at).getTime();
+        return sortDirection === "asc" ? dateA - dateB : dateB - dateA;
+      });
+    }
+
+    return results;
+  }, [approvalRequests, searchTerm, sortDirection]);
+
+  if (error) {
+    throw error;
+  }
+
+  if (isLoading) {
+    return (
+      <LoadingContainer>
+        <Spinner size="64" />
+      </LoadingContainer>
+    );
+  }
+
+  return (
+    <Container>
+      <XXL isBold>
+        {t("approval-requests.list.header", "Approval requests")}
+      </XXL>
+      <ApprovalRequestListFilters
+        approvalRequestStatus={approvalRequestStatus}
+        setApprovalRequestStatus={setApprovalRequestStatus}
+        setSearchTerm={setSearchTerm}
+      />
+      {approvalRequests.length === 0 ? (
+        <NoApprovalRequestsText>
+          {t(
+            "approval-requests.list.no-requests",
+            "No approval requests found."
+          )}
+        </NoApprovalRequestsText>
+      ) : (
+        <ApprovalRequestListTable
+          approvalRequests={sortedAndFilteredApprovalRequests}
+          baseLocale={baseLocale}
+          helpCenterPath={helpCenterPath}
+          sortDirection={sortDirection}
+          onSortChange={setSortDirection}
+        />
+      )}
+    </Container>
+  );
+}
+
+export default memo(ApprovalRequestListPage);