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

package.json

@@ -24,12 +24,14 @@
     "@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 +68,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": "^16.2.0",
+    "@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.tsx

@@ -0,0 +1,75 @@
+import { memo, useState, useMemo } from "react";
+import styled from "styled-components";
+import { XXL } from "@zendeskgarden/react-typography";
+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};
+`;
+
+const LoadingContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export interface ApprovalRequestListPageProps {
+  baseLocale: string;
+  helpCenterPath: string;
+}
+
+function ApprovalRequestListPage({
+  baseLocale,
+  helpCenterPath,
+}: ApprovalRequestListPageProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const {
+    approvalRequests,
+    errorFetchingApprovalRequests: error,
+    setApprovalRequestStatus,
+    isLoading,
+  } = useSearchApprovalRequests();
+
+  const filteredRequests = useMemo(() => {
+    if (!searchTerm) return approvalRequests;
+
+    const term = searchTerm.toLowerCase();
+    return approvalRequests.filter((request) =>
+      request.subject.toLowerCase().includes(term)
+    );
+  }, [approvalRequests, searchTerm]);
+
+  if (error) {
+    throw error;
+  }
+
+  if (isLoading) {
+    return (
+      <LoadingContainer>
+        <Spinner size="64" />
+      </LoadingContainer>
+    );
+  }
+
+  return (
+    <Container>
+      <XXL isBold>Approval requests</XXL>
+      <ApprovalRequestListFilters
+        setApprovalRequestStatus={setApprovalRequestStatus}
+        setSearchTerm={setSearchTerm}
+      />
+      <ApprovalRequestListTable
+        requests={filteredRequests}
+        baseLocale={baseLocale}
+        helpCenterPath={helpCenterPath}
+      />
+    </Container>
+  );
+}
+
+export default memo(ApprovalRequestListPage);

src/modules/approval-requests/ApprovalRequestPage.tsx

@@ -0,0 +1,126 @@
+import { memo } from "react";
+import styled from "styled-components";
+import { MD, XXL } from "@zendeskgarden/react-typography";
+import { Spinner } from "@zendeskgarden/react-loaders";
+import ApprovalRequestDetails from "./components/approval-request/ApprovalRequestDetails";
+import ApprovalTicketDetails from "./components/approval-request/ApprovalTicketDetails";
+import ApproverActions from "./components/approval-request/ApproverActions";
+import { useApprovalRequest } from "./hooks/useApprovalRequest";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: ${(props) => props.theme.space.lg}; /* 32px */
+
+  @media (max-width: ${(props) => props.theme.breakpoints.md}) {
+    flex-direction: column;
+    margin-bottom: ${(props) => props.theme.space.xl}; /* 40px */
+  }
+`;
+
+const LoadingContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const LeftColumn = styled.div`
+  flex: 2;
+  display: grid;
+  grid-template-rows: auto;
+  margin-right: ${(props) => props.theme.space.xl};
+
+  & > *:first-child {
+    margin-bottom: ${(props) => props.theme.space.base * 4}px; /* 16px */
+  }
+
+  & > *:not(:first-child) {
+    margin-bottom: ${(props) => props.theme.space.lg}; /* 32px */
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+
+  @media (max-width: ${(props) => props.theme.breakpoints.md}) {
+    margin-right: 0;
+    margin-bottom: ${(props) => props.theme.space.lg};
+  }
+`;
+
+const RightColumn = styled.div`
+  flex: 1;
+  margin-left: ${(props) => props.theme.space.xl};
+
+  @media (max-width: ${(props) => props.theme.breakpoints.md}) {
+    margin-left: 0;
+  }
+`;
+
+export interface ApprovalRequestPageProps {
+  approvalWorkflowInstanceId: string;
+  approvalRequestId: string;
+  baseLocale: string;
+  userId: number;
+}
+
+function ApprovalRequestPage({
+  approvalWorkflowInstanceId,
+  approvalRequestId,
+  baseLocale,
+  userId,
+}: ApprovalRequestPageProps) {
+  const {
+    approvalRequest,
+    setApprovalRequest,
+    errorFetchingApprovalRequest: error,
+    isLoading,
+  } = useApprovalRequest(approvalWorkflowInstanceId, approvalRequestId);
+
+  if (error) {
+    throw error;
+  }
+
+  if (isLoading) {
+    return (
+      <LoadingContainer>
+        <Spinner size="64" />
+      </LoadingContainer>
+    );
+  }
+
+  const showApproverActions =
+    userId === approvalRequest?.assignee_user?.id &&
+    approvalRequest?.status === "active";
+
+  return (
+    <>
+      <Container>
+        <LeftColumn>
+          <XXL isBold>{approvalRequest?.subject}</XXL>
+          <MD>{approvalRequest?.message}</MD>
+          {approvalRequest?.ticket_details && (
+            <ApprovalTicketDetails ticket={approvalRequest.ticket_details} />
+          )}
+        </LeftColumn>
+        <RightColumn>
+          {approvalRequest && (
+            <ApprovalRequestDetails
+              approvalRequest={approvalRequest}
+              baseLocale={baseLocale}
+            />
+          )}
+        </RightColumn>
+      </Container>
+      {showApproverActions && (
+        <ApproverActions
+          approvalWorkflowInstanceId={approvalWorkflowInstanceId}
+          approvalRequestId={approvalRequestId}
+          setApprovalRequest={setApprovalRequest}
+        />
+      )}
+    </>
+  );
+}
+
+export default memo(ApprovalRequestPage);

src/modules/approval-requests/components/approval-request-list/ApprovalRequestListFilters.tsx

@@ -0,0 +1,107 @@
+import {
+  memo,
+  useCallback,
+  type Dispatch,
+  type SetStateAction,
+  useMemo,
+} from "react";
+import styled from "styled-components";
+import debounce from "lodash.debounce";
+import SearchIcon from "@zendeskgarden/svg-icons/src/16/search-stroke.svg";
+import {
+  Field,
+  Label,
+  Combobox,
+  Option,
+} from "@zendeskgarden/react-dropdowns.next";
+import { MediaInput } from "@zendeskgarden/react-forms";
+import type { IComboboxProps } from "@zendeskgarden/react-dropdowns.next";
+import type { ApprovalRequestDropdownStatus } from "../../types";
+
+const FiltersContainer = styled.div`
+  display: flex;
+  gap: ${(props) => props.theme.space.base * 17}px; /* 68px */
+  align-items: flex-end;
+
+  @media (max-width: ${(props) => props.theme.breakpoints.md}) {
+    flex-direction: column;
+    align-items: normal;
+    gap: ${(props) => props.theme.space.base * 4}px; /* 16px */
+  }
+`;
+
+const SearchField = styled(Field)`
+  flex: 3;
+`;
+
+const StyledMediaInput = styled(MediaInput)`
+  border-radius: 25px;
+`;
+
+const DropdownFilterField = styled(Field)`
+  flex: 1;
+`;
+
+interface ApprovalRequestListFiltersProps {
+  setApprovalRequestStatus: Dispatch<
+    SetStateAction<ApprovalRequestDropdownStatus>
+  >;
+  setSearchTerm: Dispatch<SetStateAction<string>>;
+}
+
+function ApprovalRequestListFilters({
+  setApprovalRequestStatus,
+  setSearchTerm,
+}: ApprovalRequestListFiltersProps) {
+  const handleChange = useCallback<NonNullable<IComboboxProps["onChange"]>>(
+    (changes) => {
+      if (!changes.selectionValue) {
+        return;
+      }
+
+      setApprovalRequestStatus(
+        changes.selectionValue as ApprovalRequestDropdownStatus
+      );
+      setSearchTerm(""); // Reset search term when changing status
+    },
+    [setApprovalRequestStatus]
+  );
+
+  const debouncedSetSearchTerm = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [setSearchTerm]
+  );
+
+  const handleSearch = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      debouncedSetSearchTerm(event.target.value);
+    },
+    [debouncedSetSearchTerm]
+  );
+
+  return (
+    <FiltersContainer>
+      <SearchField>
+        <Label hidden>Search approval requests</Label>
+        <StyledMediaInput
+          start={<SearchIcon />}
+          placeholder="Search approval requests"
+          onChange={handleSearch}
+        />
+      </SearchField>
+      <DropdownFilterField>
+        <Label>Status:</Label>
+        <Combobox isEditable={false} onChange={handleChange}>
+          <Option value="any" isSelected label="Any" />
+          <Option value="active" label="Decision pending" />
+          {/* <Option value="clarification_requested" label="Info needed" /> */}
+          <Option value="approved" label="Approved" />
+          <Option value="rejected" label="Denied" />
+          <Option value="withdrawn" label="Withdrawn" />
+        </Combobox>
+      </DropdownFilterField>
+    </FiltersContainer>
+  );
+}
+
+export default memo(ApprovalRequestListFilters);