diff --git a/assets/approval-requests-bundle.js b/assets/approval-requests-bundle.js index 3e71fc23b..c49a03ccf 100644 --- a/assets/approval-requests-bundle.js +++ b/assets/approval-requests-bundle.js @@ -1,17 +1,4 @@ -import { s as styled, j as jsxRuntimeExports, a7 as reactDomExports, a8 as ThemeProviders, a9 as createTheme, z as Tag, J as getColorV8, ab as Grid, ac as MD, ad as Row, ae as Col, a0 as Button, r as reactExports, af as XXL } from 'shared'; - -const Container$2 = styled.div ` - display: flex; - flex-direction: column; -`; -function ApprovalRequestListPage() { - return (jsxRuntimeExports.jsx(Container$2, { children: jsxRuntimeExports.jsx("h2", { children: "Approval Request List Page" }) })); -} - -async function renderApprovalRequestList(container, settings, props) { - console.log("renderApprovalRequestList", container, settings, props); - reactDomExports.render(jsxRuntimeExports.jsx(ThemeProviders, { theme: createTheme(settings), children: jsxRuntimeExports.jsx(ApprovalRequestListPage, { ...props }) }), container); -} +import { j as jsxRuntimeExports, z as Tag, s as styled, J as getColorV8, d as Field, E as MediaInput, A as Anchor, r as reactExports, ab as XXL, e as Label, ac as SvgSearchStroke, h as Combobox, O as Option, ad as Table, ae as Head, af as HeaderRow, ag as HeaderCell, ah as Body, ai as Row, aj as Cell, a7 as reactDomExports, a8 as ThemeProviders, a9 as createTheme, ak as Grid, al as MD, am as Row$1, an as Col, a0 as Button } from 'shared'; const fetchMockApprovalRequest = async () => { // Simulate API delay @@ -26,14 +13,14 @@ const fetchMockApprovalRequest = async () => { id: 101, name: "Jane Smith", photo: { - content_url: "https://placekitten.com/100/100", + content_url: "https://example.com/100/100", }, }, created_by_user: { id: 102, name: "John Doe", photo: { - content_url: "https://placekitten.com/101/101", + content_url: "https://example.com/101/101", }, }, }; @@ -48,32 +35,142 @@ const fetchMockTicket = async () => { id: 102, name: "John Doe", photo: { - content_url: "https://placekitten.com/101/101", + content_url: "https://example.com/101/101", }, }, + custom_fields: [ + { + display_name: "Software", + display_value: "Adobe Creative Suite", + }, + { + display_name: "Cost per user", + display_value: "$15 monthly", + }, + { + display_name: "Role", + display_value: "Editor", + }, + ], }; }; +const fetchMockSearchApprovalRequestList = async () => { + // Simulate API delay + await new Promise((resolve) => setTimeout(resolve, 1000)); + return [ + { + id: 1, + subject: "Approval required for figma access request", + requester_name: "John Doe", + created_by_name: "Henry Martin", + created_at: "2024-01-15T10:00:00Z", + status: "PENDING", + }, + { + id: 2, + subject: "Approval required for Pendo access request", + requester_name: "Jane Smith", + created_by_name: "Henry Martin", + created_at: "2024-01-14T15:30:00Z", + status: "PENDING", + }, + { + id: 3, + subject: "Approval required for AWS access", + requester_name: "Mike Johnson", + created_by_name: "Henry Martin", + created_at: "2024-01-13T09:15:00Z", + status: "CLARIFICATION_REQUESTED", + }, + ]; +}; const APPROVAL_REQUEST_STATES = { PENDING: "PENDING", APPROVED: "APPROVED", REJECTED: "REJECTED", CLARIFICATION_REQUESTED: "CLARIFICATION_REQUESTED", + WITHDRAWN: "WITHDRAWN", }; const statusTagConfig = { [APPROVAL_REQUEST_STATES.PENDING]: { hue: "blue", label: "Decision pending" }, [APPROVAL_REQUEST_STATES.APPROVED]: { hue: "green", label: "Approved" }, [APPROVAL_REQUEST_STATES.REJECTED]: { hue: "red", label: "Denied" }, [APPROVAL_REQUEST_STATES.CLARIFICATION_REQUESTED]: { - hue: "grey", - label: "Clarification Needed", + hue: "yellow", + label: "Info needed", }, + [APPROVAL_REQUEST_STATES.WITHDRAWN]: { hue: "grey", label: "Withdrawn" }, }; function ApprovalStatusTag({ status }) { const { hue, label } = statusTagConfig[status]; return jsxRuntimeExports.jsx(Tag, { hue: hue, children: label }); } +// MKTODO: update to proper locale +const formatApprovalRequestDate = (timestamp, monthFormat = "long") => { + const date = new Date(timestamp); + return `${date.toLocaleDateString("en-US", { + month: monthFormat, + day: "numeric", + year: "numeric", + })} ${date.toLocaleTimeString("en-US", { + hour: "2-digit", + minute: "2-digit", + })}`; +}; + +const Container$2 = styled.div ` + display: flex; + flex-direction: column; + gap: ${(props) => props.theme.space.lg}; +`; +const FiltersContainer = styled.div ` + display: flex; + gap: ${(props) => props.theme.space.base * 17}px; /* 68px */ + align-items: flex-end; +`; +const SearchField = styled(Field) ` + flex: 3; +`; +const StyledMediaInput = styled(MediaInput) ` + border-radius: 25px; +`; +const DropdownFilterField = styled(Field) ` + flex: 1; +`; +const ApprovalRequestAnchor = styled(Anchor) ` + &:visited { + color: ${(props) => getColorV8("blue", 600, props.theme)}; + } +`; +function ApprovalRequestListPage({ helpCenterPath, }) { + const [requests, setRequests] = reactExports.useState([]); + const [status, setStatus] = reactExports.useState("pending"); + reactExports.useEffect(() => { + const fetchData = async () => { + try { + const data = await fetchMockSearchApprovalRequestList(); + setRequests(data); + setStatus("resolved"); + } + catch (error) { + setStatus("error"); + console.error("Error fetching data:", error); + } + }; + fetchData(); + }, []); + if (status === "pending") { + return jsxRuntimeExports.jsx(Container$2, { children: "Loading..." }); + } + return (jsxRuntimeExports.jsxs(Container$2, { children: [jsxRuntimeExports.jsx(XXL, { isBold: true, children: "Approval requests" }), jsxRuntimeExports.jsxs(FiltersContainer, { children: [jsxRuntimeExports.jsxs(SearchField, { children: [jsxRuntimeExports.jsx(Label, { hidden: true, children: "Search approval requests" }), jsxRuntimeExports.jsx(StyledMediaInput, { start: jsxRuntimeExports.jsx(SvgSearchStroke, {}), placeholder: "Search approval requests" })] }), jsxRuntimeExports.jsxs(DropdownFilterField, { children: [jsxRuntimeExports.jsx(Label, { children: "Status:" }), jsxRuntimeExports.jsxs(Combobox, { isEditable: false, children: [jsxRuntimeExports.jsx(Option, { value: "ALL", label: "Any" }), jsxRuntimeExports.jsx(Option, { value: "PENDING", isSelected: true, label: "Decision pending" }), jsxRuntimeExports.jsx(Option, { value: "CLARIFICATION_REQUESTED", label: "Clarification Needed" }), jsxRuntimeExports.jsx(Option, { value: "APPROVED", label: "Approved" }), jsxRuntimeExports.jsx(Option, { value: "REJECTED", label: "Denied" }), jsxRuntimeExports.jsx(Option, { value: "WITHDRAWN", label: "Withdrawn" })] })] })] }), jsxRuntimeExports.jsxs(Table, { size: "large", children: [jsxRuntimeExports.jsx(Head, { children: jsxRuntimeExports.jsxs(HeaderRow, { children: [jsxRuntimeExports.jsx(HeaderCell, { width: "40%", children: "Subject" }), jsxRuntimeExports.jsx(HeaderCell, { children: "Requester" }), jsxRuntimeExports.jsx(HeaderCell, { children: "Sent by" }), jsxRuntimeExports.jsx(HeaderCell, { children: "Sent on" }), jsxRuntimeExports.jsx(HeaderCell, { children: "Approval status" })] }) }), jsxRuntimeExports.jsx(Body, { children: requests.map((request) => (jsxRuntimeExports.jsxs(Row, { children: [jsxRuntimeExports.jsx(Cell, { children: jsxRuntimeExports.jsx(ApprovalRequestAnchor, { href: `${helpCenterPath}/approval_requests/${request.id}`, children: request.subject }) }), jsxRuntimeExports.jsx(Cell, { children: request.requester_name }), jsxRuntimeExports.jsx(Cell, { children: request.created_by_name }), jsxRuntimeExports.jsx(Cell, { children: formatApprovalRequestDate(request.created_at, "short") }), jsxRuntimeExports.jsx(Cell, { children: jsxRuntimeExports.jsx(ApprovalStatusTag, { status: request.status }) })] }, request.id))) })] })] })); +} + +async function renderApprovalRequestList(container, settings, props, helpCenterPath) { + reactDomExports.render(jsxRuntimeExports.jsx(ThemeProviders, { theme: createTheme(settings), children: jsxRuntimeExports.jsx(ApprovalRequestListPage, { ...props, helpCenterPath: helpCenterPath }) }), container); +} + const Container$1 = styled(Grid) ` padding: ${(props) => props.theme.space.base * 6}px; /* 24px */ background: ${(props) => getColorV8("grey", 100, props.theme)}; @@ -85,24 +182,13 @@ const ApprovalRequestHeader = styled(MD) ` const FieldLabel$1 = styled(MD) ` color: ${(props) => getColorV8("grey", 600, props.theme)}; `; -const DetailRow = styled(Row) ` +const DetailRow = styled(Row$1) ` margin-bottom: ${(props) => props.theme.space.sm}; /* 8px */ &:last-child { margin-bottom: 0; } `; -const formatApprovalRequestDate = (timestamp) => { - const date = new Date(timestamp); - return `${date.toLocaleDateString("en-US", { - month: "long", - day: "numeric", - year: "numeric", - })} ${date.toLocaleTimeString("en-US", { - hour: "2-digit", - minute: "2-digit", - })}`; -}; function ApprovalRequestDetails({ approvalRequest, }) { return (jsxRuntimeExports.jsxs(Container$1, { children: [jsxRuntimeExports.jsx(ApprovalRequestHeader, { isBold: true, children: "Approval request details" }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Sent by" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: approvalRequest.created_by_user.name }) })] }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Sent on" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: formatApprovalRequestDate(approvalRequest.created_at) }) })] }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Approver" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: approvalRequest.assignee_user.name }) })] }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Status" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: jsxRuntimeExports.jsx(ApprovalStatusTag, { status: approvalRequest.status }) }) })] })] })); } @@ -120,7 +206,7 @@ const FieldLabel = styled(MD) ` color: ${(props) => getColorV8("grey", 600, props.theme)}; `; function ApprovalTicketDetails({ ticket }) { - return (jsxRuntimeExports.jsxs(TicketContainer, { children: [jsxRuntimeExports.jsx(TicketDetailsHeader, { isBold: true, children: "Ticket Details" }), jsxRuntimeExports.jsxs(Row, { children: [jsxRuntimeExports.jsxs(Col, { size: 4, children: [jsxRuntimeExports.jsx(FieldLabel, { children: "Requester" }), jsxRuntimeExports.jsx(MD, { children: ticket.requester.name })] }), jsxRuntimeExports.jsxs(Col, { size: 4, children: [jsxRuntimeExports.jsx(FieldLabel, { children: "ID" }), jsxRuntimeExports.jsx(MD, { children: ticket.id })] }), jsxRuntimeExports.jsxs(Col, { size: 4, children: [jsxRuntimeExports.jsx(FieldLabel, { children: "Priority" }), jsxRuntimeExports.jsx(MD, { children: ticket.priority })] })] })] })); + return (jsxRuntimeExports.jsxs(TicketContainer, { children: [jsxRuntimeExports.jsx(TicketDetailsHeader, { isBold: true, children: "Ticket Details" }), jsxRuntimeExports.jsxs(Row$1, { children: [jsxRuntimeExports.jsxs(Col, { size: 4, children: [jsxRuntimeExports.jsx(FieldLabel, { children: "Requester" }), jsxRuntimeExports.jsx(MD, { children: ticket.requester.name })] }), jsxRuntimeExports.jsxs(Col, { size: 4, children: [jsxRuntimeExports.jsx(FieldLabel, { children: "ID" }), jsxRuntimeExports.jsx(MD, { children: ticket.id })] }), jsxRuntimeExports.jsxs(Col, { size: 4, children: [jsxRuntimeExports.jsx(FieldLabel, { children: "Priority" }), jsxRuntimeExports.jsx(MD, { children: ticket.priority })] })] })] })); } const ButtonContainer = styled.div ` @@ -128,7 +214,6 @@ const ButtonContainer = styled.div ` flex-direction: row; gap: ${(props) => props.theme.space.md}; /* 20px */ `; -// interface ApproverActionsProps {} function ApproverActions() { return (jsxRuntimeExports.jsxs(ButtonContainer, { children: [jsxRuntimeExports.jsx(Button, { isPrimary: true, children: "Approve request" }), jsxRuntimeExports.jsx(Button, { children: "Deny request" })] })); } diff --git a/package.json b/package.json index 6238735f3..af16fdee4 100644 --- a/package.json +++ b/package.json @@ -20,19 +20,20 @@ "@zendesk/help-center-wysiwyg": "0.0.5", "@zendeskgarden/container-grid": "^3.0.14", "@zendeskgarden/container-utilities": "^2.0.2", - "@zendeskgarden/react-accordions": "8.76.2", - "@zendeskgarden/react-buttons": "8.76.2", - "@zendeskgarden/react-datepickers": "8.76.2", - "@zendeskgarden/react-dropdowns.next": "8.76.2", + "@zendeskgarden/react-accordions": "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.2", - "@zendeskgarden/react-loaders": "8.76.2", - "@zendeskgarden/react-modals": "8.76.2", - "@zendeskgarden/react-notifications": "8.76.2", - "@zendeskgarden/react-tags": "8.76.2", - "@zendeskgarden/react-theming": "8.76.2", - "@zendeskgarden/react-tooltips": "8.76.2", - "@zendeskgarden/react-typography": "8.76.2", + "@zendeskgarden/react-forms": "8.76.9", + "@zendeskgarden/react-loaders": "8.76.9", + "@zendeskgarden/react-modals": "8.76.9", + "@zendeskgarden/react-notifications": "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", + "@zendeskgarden/react-typography": "8.76.9", "@zendeskgarden/svg-icons": "^6.34.0", "dompurify": "3.0.11", "eslint-plugin-check-file": "^2.6.2", diff --git a/src/modules/approval-requests/ApprovalRequestListPage.tsx b/src/modules/approval-requests/ApprovalRequestListPage.tsx index 45df32bbf..c8734ccc1 100644 --- a/src/modules/approval-requests/ApprovalRequestListPage.tsx +++ b/src/modules/approval-requests/ApprovalRequestListPage.tsx @@ -1,16 +1,147 @@ +import { useEffect, useState } from "react"; import styled from "styled-components"; +import { XXL } from "@zendeskgarden/react-typography"; +import { + Table, + Head, + Row, + Cell, + Body, + HeaderRow, + HeaderCell, +} from "@zendeskgarden/react-tables"; +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 { fetchMockSearchApprovalRequestList } from "./mockApi"; +import type { MockSearchApprovalRequest } from "./types"; +import { Anchor } from "@zendeskgarden/react-buttons"; +import { getColorV8 } from "@zendeskgarden/react-theming"; +import { ApprovalStatusTag } from "./components/approval-request/ApprovalStatusTag"; +import { formatApprovalRequestDate } from "./utils"; const Container = styled.div` display: flex; flex-direction: column; + gap: ${(props) => props.theme.space.lg}; `; -export interface ApprovalRequestListPageProps {} +const FiltersContainer = styled.div` + display: flex; + gap: ${(props) => props.theme.space.base * 17}px; /* 68px */ + align-items: flex-end; +`; + +const SearchField = styled(Field)` + flex: 3; +`; + +const StyledMediaInput = styled(MediaInput)` + border-radius: 25px; +`; + +const DropdownFilterField = styled(Field)` + flex: 1; +`; + +const ApprovalRequestAnchor = styled(Anchor)` + &:visited { + color: ${(props) => getColorV8("blue", 600, props.theme)}; + } +`; + +export interface ApprovalRequestListPageProps { + helpCenterPath: string; +} + +export function ApprovalRequestListPage({ + helpCenterPath, +}: ApprovalRequestListPageProps) { + const [requests, setRequests] = useState([]); + const [status, setStatus] = useState("pending"); + + useEffect(() => { + const fetchData = async () => { + try { + const data = await fetchMockSearchApprovalRequestList(); + setRequests(data); + setStatus("resolved"); + } catch (error) { + setStatus("error"); + console.error("Error fetching data:", error); + } + }; + + fetchData(); + }, []); + + if (status === "pending") { + return Loading...; + } -export function ApprovalRequestListPage() { return ( -

Approval Request List Page

+ Approval requests + + + + } + placeholder="Search approval requests" + /> + + + + + + + + + + + Subject + Requester + Sent by + Sent on + Approval status + + + + {requests.map((request) => ( + + + + {request.subject} + + + {request.requester_name} + {request.created_by_name} + + {formatApprovalRequestDate(request.created_at, "short")} + + + + + + ))} + +
); } diff --git a/src/modules/approval-requests/ApprovalRequestPage.tsx b/src/modules/approval-requests/ApprovalRequestPage.tsx index 5753e7cad..6fa775d1a 100644 --- a/src/modules/approval-requests/ApprovalRequestPage.tsx +++ b/src/modules/approval-requests/ApprovalRequestPage.tsx @@ -3,9 +3,9 @@ import styled from "styled-components"; import { MD, XXL } from "@zendeskgarden/react-typography"; import { fetchMockApprovalRequest, fetchMockTicket } from "./mockApi"; import type { MockApprovalRequest, MockTicket } from "./types"; -import { ApprovalRequestDetails } from "./components/ApprovalRequestDetails"; -import { ApprovalTicketDetails } from "./components/ApprovalTicketDetails"; -import { ApproverActions } from "./components/ApproverActions"; +import { ApprovalRequestDetails } from "./components/approval-request/ApprovalRequestDetails"; +import { ApprovalTicketDetails } from "./components/approval-request/ApprovalTicketDetails"; +import { ApproverActions } from "./components/approval-request/ApproverActions"; const Container = styled.div` display: flex; diff --git a/src/modules/approval-requests/components/approval-request-list/ApprovalRequestListFilters.tsx b/src/modules/approval-requests/components/approval-request-list/ApprovalRequestListFilters.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/modules/approval-requests/components/approval-request-list/ApprovalRequestListTable.tsx b/src/modules/approval-requests/components/approval-request-list/ApprovalRequestListTable.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/modules/approval-requests/components/ApprovalRequestDetails.tsx b/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx similarity index 85% rename from src/modules/approval-requests/components/ApprovalRequestDetails.tsx rename to src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx index 5bed7ecc0..e23e5dd92 100644 --- a/src/modules/approval-requests/components/ApprovalRequestDetails.tsx +++ b/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx @@ -2,8 +2,9 @@ import styled from "styled-components"; import { MD } from "@zendeskgarden/react-typography"; import { getColorV8 } from "@zendeskgarden/react-theming"; import { Grid, Row, Col } from "@zendeskgarden/react-grid"; -import type { MockApprovalRequest } from "../types"; +import type { MockApprovalRequest } from "../../types"; import { ApprovalStatusTag } from "./ApprovalStatusTag"; +import { formatApprovalRequestDate } from "../../utils"; const Container = styled(Grid)` padding: ${(props) => props.theme.space.base * 6}px; /* 24px */ @@ -27,18 +28,6 @@ const DetailRow = styled(Row)` } `; -export const formatApprovalRequestDate = (timestamp: string) => { - const date = new Date(timestamp); - return `${date.toLocaleDateString("en-US", { - month: "long", - day: "numeric", - year: "numeric", - })} ${date.toLocaleTimeString("en-US", { - hour: "2-digit", - minute: "2-digit", - })}`; -}; - interface ApprovalRequestDetailsProps { approvalRequest: MockApprovalRequest; } diff --git a/src/modules/approval-requests/components/ApprovalStatusTag.tsx b/src/modules/approval-requests/components/approval-request/ApprovalStatusTag.tsx similarity index 85% rename from src/modules/approval-requests/components/ApprovalStatusTag.tsx rename to src/modules/approval-requests/components/approval-request/ApprovalStatusTag.tsx index d611b4d99..0363bb141 100644 --- a/src/modules/approval-requests/components/ApprovalStatusTag.tsx +++ b/src/modules/approval-requests/components/approval-request/ApprovalStatusTag.tsx @@ -5,6 +5,7 @@ const APPROVAL_REQUEST_STATES = { APPROVED: "APPROVED", REJECTED: "REJECTED", CLARIFICATION_REQUESTED: "CLARIFICATION_REQUESTED", + WITHDRAWN: "WITHDRAWN", } as const; const statusTagConfig: Record< @@ -15,9 +16,10 @@ const statusTagConfig: Record< [APPROVAL_REQUEST_STATES.APPROVED]: { hue: "green", label: "Approved" }, [APPROVAL_REQUEST_STATES.REJECTED]: { hue: "red", label: "Denied" }, [APPROVAL_REQUEST_STATES.CLARIFICATION_REQUESTED]: { - hue: "grey", - label: "Clarification Needed", + hue: "yellow", + label: "Info needed", }, + [APPROVAL_REQUEST_STATES.WITHDRAWN]: { hue: "grey", label: "Withdrawn" }, }; interface ApprovalStatusTagProps { diff --git a/src/modules/approval-requests/components/ApprovalTicketDetails.tsx b/src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx similarity index 96% rename from src/modules/approval-requests/components/ApprovalTicketDetails.tsx rename to src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx index d0ebc8cd7..39374fc11 100644 --- a/src/modules/approval-requests/components/ApprovalTicketDetails.tsx +++ b/src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx @@ -2,7 +2,7 @@ import styled from "styled-components"; import { MD } from "@zendeskgarden/react-typography"; import { getColorV8 } from "@zendeskgarden/react-theming"; import { Grid, Row, Col } from "@zendeskgarden/react-grid"; -import type { MockTicket } from "../types"; +import type { MockTicket } from "../../types"; const TicketContainer = styled(Grid)` padding: ${(props) => props.theme.space.md}; /* 20px */ diff --git a/src/modules/approval-requests/components/ApproverActions.tsx b/src/modules/approval-requests/components/approval-request/ApproverActions.tsx similarity index 91% rename from src/modules/approval-requests/components/ApproverActions.tsx rename to src/modules/approval-requests/components/approval-request/ApproverActions.tsx index 0817e2805..ca6f28ea0 100644 --- a/src/modules/approval-requests/components/ApproverActions.tsx +++ b/src/modules/approval-requests/components/approval-request/ApproverActions.tsx @@ -7,8 +7,6 @@ const ButtonContainer = styled.div` gap: ${(props) => props.theme.space.md}; /* 20px */ `; -// interface ApproverActionsProps {} - export function ApproverActions() { return ( diff --git a/src/modules/approval-requests/mockApi.ts b/src/modules/approval-requests/mockApi.ts index 72c34774e..6daabfcd7 100644 --- a/src/modules/approval-requests/mockApi.ts +++ b/src/modules/approval-requests/mockApi.ts @@ -1,4 +1,8 @@ -import type { MockApprovalRequest, MockTicket } from "./types"; +import type { + MockApprovalRequest, + MockTicket, + MockSearchApprovalRequest, +} from "./types"; export const fetchMockApprovalRequest = async (): Promise => { @@ -15,14 +19,14 @@ export const fetchMockApprovalRequest = id: 101, name: "Jane Smith", photo: { - content_url: "https://placekitten.com/100/100", + content_url: "https://example.com/100/100", }, }, created_by_user: { id: 102, name: "John Doe", photo: { - content_url: "https://placekitten.com/101/101", + content_url: "https://example.com/101/101", }, }, }; @@ -39,8 +43,56 @@ export const fetchMockTicket = async (): Promise => { id: 102, name: "John Doe", photo: { - content_url: "https://placekitten.com/101/101", + content_url: "https://example.com/101/101", }, }, + custom_fields: [ + { + display_name: "Software", + display_value: "Adobe Creative Suite", + }, + { + display_name: "Cost per user", + display_value: "$15 monthly", + }, + { + display_name: "Role", + display_value: "Editor", + }, + ], }; }; + +export const fetchMockSearchApprovalRequestList = async (): Promise< + MockSearchApprovalRequest[] +> => { + // Simulate API delay + await new Promise((resolve) => setTimeout(resolve, 1000)); + + return [ + { + id: 1, + subject: "Approval required for figma access request", + requester_name: "John Doe", + created_by_name: "Henry Martin", + created_at: "2024-01-15T10:00:00Z", + status: "PENDING", + }, + { + id: 2, + subject: "Approval required for Pendo access request", + requester_name: "Jane Smith", + created_by_name: "Henry Martin", + created_at: "2024-01-14T15:30:00Z", + status: "PENDING", + }, + { + id: 3, + subject: "Approval required for AWS access", + requester_name: "Mike Johnson", + created_by_name: "Henry Martin", + created_at: "2024-01-13T09:15:00Z", + status: "CLARIFICATION_REQUESTED", + }, + ]; +}; diff --git a/src/modules/approval-requests/renderApprovalRequestList.tsx b/src/modules/approval-requests/renderApprovalRequestList.tsx index 18965250c..212612d68 100644 --- a/src/modules/approval-requests/renderApprovalRequestList.tsx +++ b/src/modules/approval-requests/renderApprovalRequestList.tsx @@ -9,13 +9,13 @@ import type { Settings } from "../shared"; export async function renderApprovalRequestList( container: HTMLElement, settings: Settings, - props: ApprovalRequestListPageProps + props: ApprovalRequestListPageProps, + helpCenterPath: string ) { - console.log("renderApprovalRequestList", container, settings, props); render( {/* MKTODO: add ErrorBoundary from shared once service catalog PR is merged */} - + , container ); diff --git a/src/modules/approval-requests/types.ts b/src/modules/approval-requests/types.ts index 304b48a01..ca36d9429 100644 --- a/src/modules/approval-requests/types.ts +++ b/src/modules/approval-requests/types.ts @@ -11,7 +11,8 @@ type MockApprovalRequestStatus = | "PENDING" | "APPROVED" | "REJECTED" - | "CLARIFICATION_REQUESTED"; + | "CLARIFICATION_REQUESTED" + | "WITHDRAWN"; export interface MockApprovalRequest { id: number; @@ -27,4 +28,14 @@ export interface MockTicket { id: number; priority: string; requester: MockUser; + custom_fields: Record[]; +} + +export interface MockSearchApprovalRequest { + id: number; + subject: string; + requester_name: string; + created_by_name: string; + created_at: string; + status: MockApprovalRequestStatus; } diff --git a/src/modules/approval-requests/utils.ts b/src/modules/approval-requests/utils.ts new file mode 100644 index 000000000..b6a393202 --- /dev/null +++ b/src/modules/approval-requests/utils.ts @@ -0,0 +1,15 @@ +// MKTODO: update to proper locale +export const formatApprovalRequestDate = ( + timestamp: string, + monthFormat: Intl.DateTimeFormatOptions["month"] = "long" +) => { + const date = new Date(timestamp); + return `${date.toLocaleDateString("en-US", { + month: monthFormat, + day: "numeric", + year: "numeric", + })} ${date.toLocaleTimeString("en-US", { + hour: "2-digit", + minute: "2-digit", + })}`; +}; diff --git a/templates/approval_request_page.hbs b/templates/approval_request_page.hbs index e70148186..7e9738c49 100644 --- a/templates/approval_request_page.hbs +++ b/templates/approval_request_page.hbs @@ -22,6 +22,7 @@ const props = { baseLocale: {{json help_center.base_locale}}, approvalRequestId: id, + userId: {{json user.id}}, } renderApprovalRequest(container, settings, props, helpCenterPath); diff --git a/yarn.lock b/yarn.lock index 75d30b410..28fbc6da2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1761,32 +1761,32 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.35.0.tgz#b7569632b0b788a0ca0e438235154e45d42813a7" integrity sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw== -"@floating-ui/core@^1.4.1": - version "1.4.1" - resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17" - integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ== +"@floating-ui/core@^1.6.0": + version "1.6.9" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.9.tgz#64d1da251433019dafa091de9b2886ff35ec14e6" + integrity sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw== dependencies: - "@floating-ui/utils" "^0.1.1" + "@floating-ui/utils" "^0.2.9" -"@floating-ui/dom@^1.5.1": - version "1.5.1" - resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7" - integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw== +"@floating-ui/dom@^1.0.0": + version "1.6.13" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.13.tgz#a8a938532aea27a95121ec16e667a7cbe8c59e34" + integrity sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w== dependencies: - "@floating-ui/core" "^1.4.1" - "@floating-ui/utils" "^0.1.1" + "@floating-ui/core" "^1.6.0" + "@floating-ui/utils" "^0.2.9" -"@floating-ui/react-dom@^2.0.0": - version "2.0.2" - resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20" - integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ== +"@floating-ui/react-dom@^2.1.0": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31" + integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A== dependencies: - "@floating-ui/dom" "^1.5.1" + "@floating-ui/dom" "^1.0.0" -"@floating-ui/utils@^0.1.1": - version "0.1.1" - resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83" - integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw== +"@floating-ui/utils@^0.2.9": + version "0.2.9" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429" + integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg== "@gar/promisify@^1.1.3": version "1.1.3" @@ -3747,20 +3747,20 @@ "@babel/runtime" "^7.8.4" "@zendeskgarden/container-utilities" "^2.0.0" -"@zendeskgarden/container-focusjail@^2.0.12": - version "2.0.12" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-focusjail/-/container-focusjail-2.0.12.tgz#f5cbc670ef1a33641caa67684b2f461a291e3c4e" - integrity sha512-LbHe9yxpdeFVvzlue9PSKazXixh+QuT7AX1LzFy+qtMM+f5y462IcGvUahbr14Mqks1GBMJU5xAt5v+qyK/Ycw== +"@zendeskgarden/container-focusjail@^2.0.19": + version "2.0.19" + resolved "https://registry.yarnpkg.com/@zendeskgarden/container-focusjail/-/container-focusjail-2.0.19.tgz#56b5b95922569bc1578ab0d85c3a3f65abc1de0b" + integrity sha512-cj+4Dfy5Vjzargq6qAvPAqPhgsFUT3EHkJY3KUsTfZn0M3/Lsxa7X5dzGQZS3d2sMtnhMuMM8bY3/t79QKnCAg== dependencies: "@babel/runtime" "^7.8.4" - "@zendeskgarden/container-utilities" "^1.0.12" + "@zendeskgarden/container-utilities" "^2.0.2" dom-helpers "^5.1.0" tabbable "^6.0.0" -"@zendeskgarden/container-focusvisible@^2.0.0": - version "2.0.3" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-focusvisible/-/container-focusvisible-2.0.3.tgz#ec74f8d609598ff4f7a3229cba246ee8315254e5" - integrity sha512-uG/02EUaiViZHzNOo786dNacBTwkXZz7M13GzGnwTftkrLiKerYp45xtNJVdgdSlawwhnyohQ4s3Qkcg/3iqYg== +"@zendeskgarden/container-focusvisible@^2.0.3": + version "2.0.6" + resolved "https://registry.yarnpkg.com/@zendeskgarden/container-focusvisible/-/container-focusvisible-2.0.6.tgz#6d0435b71ccee8b02497eb48cafb59d227524b30" + integrity sha512-P7PM5oy6HlitkifAxMYEfKrKMyB1IpwdWplFqeoU0B4EnGiMaJsEdJLbFsQVw/qa7YK5ScXetK+/kL4HKi+Bfw== dependencies: "@babel/runtime" "^7.8.4" @@ -3772,47 +3772,47 @@ "@babel/runtime" "^7.8.4" "@zendeskgarden/container-utilities" "^2.0.0" -"@zendeskgarden/container-menu@^0.3.0": - version "0.3.3" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-menu/-/container-menu-0.3.3.tgz#6836003626a28b61efdf115e839187adc1e9589f" - integrity sha512-7DJMXe10hmoTizGy5csUGrdPNg9recYkC1PApReFyAXRgLakjU//MGzkv1JTc6iyGLYYTpW9PiaJ0st+oBO02A== +"@zendeskgarden/container-menu@^0.3.3": + version "0.3.4" + resolved "https://registry.yarnpkg.com/@zendeskgarden/container-menu/-/container-menu-0.3.4.tgz#ea1efafa171b066022d6333947142857e9519e7a" + integrity sha512-KZKFLoQEDrZk+Q6abkziykNvXxu5zRtb24KQr26vleN6NeqwRWIWZ+M3tWnYPKbDovfs3yvyG3d2ixZnGfKnJw== dependencies: "@babel/runtime" "^7.8.4" - "@zendeskgarden/container-selection" "^3.0.9" + "@zendeskgarden/container-selection" "^3.0.10" "@zendeskgarden/container-utilities" "^2.0.0" -"@zendeskgarden/container-modal@^1.0.0": - version "1.0.12" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-modal/-/container-modal-1.0.12.tgz#b642560bfaace11c3af5dfb542df0d4751de5a63" - integrity sha512-lp1Qjvqf1lb+eKtTVLUspRWBSjwqVSAP5aoSJfvce//OP+a+9TmYIexrpSj4srgXLr5l2G7SYykfdnavhVjcYg== +"@zendeskgarden/container-modal@^1.0.15": + version "1.0.19" + resolved "https://registry.yarnpkg.com/@zendeskgarden/container-modal/-/container-modal-1.0.19.tgz#b995d18cd47b5f20f038c547b4a1eb18ae1a8896" + integrity sha512-KBDEKf1f32xcE2sN2uSebbN6AhFE54kAYT8v2BiffLIIExkfyejnPWEBXv32PVpiOEgITK+Mxf+x1DkX0MFjfg== dependencies: "@babel/runtime" "^7.8.4" - "@zendeskgarden/container-focusjail" "^2.0.12" - "@zendeskgarden/container-utilities" "^1.0.12" + "@zendeskgarden/container-focusjail" "^2.0.19" + "@zendeskgarden/container-utilities" "^2.0.2" -"@zendeskgarden/container-schedule@^2.0.0": - version "2.0.7" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-schedule/-/container-schedule-2.0.7.tgz#09b2a3194c8955ea0d9d86b7b278ac33ab475179" - integrity sha512-WSydwk6dS0ETNR+60oDI6nyqh2e00w3rF61ryQDgG4JAesZhFVPgjlqrUYQjkAPRWJXi8rh5uevooDT5SAfDCA== +"@zendeskgarden/container-schedule@^2.0.9": + version "2.0.12" + resolved "https://registry.yarnpkg.com/@zendeskgarden/container-schedule/-/container-schedule-2.0.12.tgz#bb7764400a10ef3b677a68b6524ef47ff0871087" + integrity sha512-uz6mYGTQd9PQopBIQ3BY2fqFXBC1CCQacBiUOTemFWXZIDpzA7t3/iddLafevMvhknHF9G9X41llKT0jTiCwKA== dependencies: "@babel/runtime" "^7.8.4" -"@zendeskgarden/container-scrollregion@^1.0.0": - version "1.0.7" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-scrollregion/-/container-scrollregion-1.0.7.tgz#56b2f7411c7307e7bd471f6bf978bbaa12edf603" - integrity sha512-j9nDdy5XV7QgjO1rNr11Jqjf3tHY3flm/ovfTEfYIwxqvC8UVzzoGV3uLIGWy4HjRsqQj++oxZeFtN9kQtAMUw== +"@zendeskgarden/container-scrollregion@^1.0.9": + version "1.0.12" + resolved "https://registry.yarnpkg.com/@zendeskgarden/container-scrollregion/-/container-scrollregion-1.0.12.tgz#81ac72f14f17190ef5e0baaa551bbfad9daa0f44" + integrity sha512-S7FmnTDcR73Mffv3UW9txubi9H79DJ6+FeqIYd07KjcwZmjaK4rbwwmWhyIFYmJR+ShyCPu2v0ejeb0bK+3kKw== dependencies: "@babel/runtime" "^7.8.4" lodash.debounce "^4.0.8" prop-types "^15.7.2" -"@zendeskgarden/container-selection@^3.0.0": - version "3.0.4" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-selection/-/container-selection-3.0.4.tgz#e969222af8c27c67ae7244ff585e8f4e3e907cee" - integrity sha512-cJU4X/FMR142ewvHBSY1MgXzDo+NSIbcWEYrLA05Y80Bi05OdW41Uq+n2gzvm6aj3Ui+slMufADnvzoQtukYdw== +"@zendeskgarden/container-selection@^3.0.10": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@zendeskgarden/container-selection/-/container-selection-3.1.2.tgz#e6862e1e14df3520d990578ebce25b4ce4e8758e" + integrity sha512-UXJfa0ohCEtelUW0sFoI4eREwibnpymOpXLAFax+u5DwcWAVWb1IzIK06XD90EmDRO/yauKQU5md1bzfSSFHIg== dependencies: "@babel/runtime" "^7.8.4" - "@zendeskgarden/container-utilities" "^1.0.10" + "@zendeskgarden/container-utilities" "^2.0.2" "@zendeskgarden/container-selection@^3.0.9": version "3.0.9" @@ -3822,12 +3822,13 @@ "@babel/runtime" "^7.8.4" "@zendeskgarden/container-utilities" "^2.0.0" -"@zendeskgarden/container-slider@^0.1.1": - version "0.1.7" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-slider/-/container-slider-0.1.7.tgz#19f10f1b2ea76bb4b086c85f3024cdf70430889b" - integrity sha512-y8Bv2NorBYKtUMoOtMqt7/nbIxrjlScTNpFgE6xyHMj9nhs/tt2IKJSGGTWz5luLKntMRrK4/2NgY/g7pwwChA== +"@zendeskgarden/container-slider@^0.1.11": + version "0.1.14" + resolved "https://registry.yarnpkg.com/@zendeskgarden/container-slider/-/container-slider-0.1.14.tgz#cff692210692161d3b3c73c01243d5797a056aa3" + integrity sha512-IStd3tkEwJOndukv9E8TtMEL6X0iH04k0SYMDkJXqzmgh/sbDeZtj/eXe0Cq/5PDuxCJ836HGXj9bTC9rzUyAA== dependencies: "@babel/runtime" "^7.8.4" + "@zendeskgarden/container-utilities" "^2.0.2" lodash.debounce "^4.0.8" "@zendeskgarden/container-splitter@^2.0.17": @@ -3838,15 +3839,6 @@ "@babel/runtime" "^7.8.4" "@zendeskgarden/container-utilities" "^2.0.2" -"@zendeskgarden/container-tooltip@^1.0.0": - version "1.0.10" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-tooltip/-/container-tooltip-1.0.10.tgz#a4a60d31504169dd9b394ebe1d6d5842a0a308c3" - integrity sha512-3ZyFuep46oZBesLsn7SiXbW1x3+Q+t6w+NKuxSuwG9Oq8+QnGN8vp6wkdSzykAM6FK3WWQZmL9UeJvm4QeRDHA== - dependencies: - "@babel/runtime" "^7.8.4" - "@zendeskgarden/container-utilities" "^1.0.10" - react-uid "^2.2.0" - "@zendeskgarden/container-tooltip@^1.0.16": version "1.0.20" resolved "https://registry.yarnpkg.com/@zendeskgarden/container-tooltip/-/container-tooltip-1.0.20.tgz#6d24eb52a6d0f92c5f3459c72662bff6790ad65f" @@ -3856,14 +3848,6 @@ "@zendeskgarden/container-utilities" "^2.0.2" react-uid "^2.2.0" -"@zendeskgarden/container-utilities@^1.0.10": - version "1.0.10" - resolved "https://registry.yarnpkg.com/@zendeskgarden/container-utilities/-/container-utilities-1.0.10.tgz#1550160d221bfb4b3be4ec850f632acf21c800dc" - integrity sha512-c1x3xph/7IE5+zNSDF8B27nbh6LSURQ0pFMdyusbbxo9fIUerh/85+kCk8t1wElYFeNFeB6vVABqKbhO4nlFqw== - dependencies: - "@babel/runtime" "^7.8.4" - "@reach/auto-id" "^0.18.0" - "@zendeskgarden/container-utilities@^1.0.12": version "1.0.12" resolved "https://registry.yarnpkg.com/@zendeskgarden/container-utilities/-/container-utilities-1.0.12.tgz#c2843a6a2bba00690bca877c85b32c9409a7bba9" @@ -3893,28 +3877,17 @@ resolved "https://registry.yarnpkg.com/@zendeskgarden/css-variables/-/css-variables-6.4.6.tgz#0beb30a3716141450d3b4496baca63fa43528b4c" integrity sha512-jx5N3Vn4zHNWwZnkCFkk5VpXKB5404h/mcCR2Y7HR8XwSH5nfUugwsH/5AyPOng/atyHz3XNORuuEJ0mZ/vi5w== -"@zendeskgarden/react-accordions@8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-accordions/-/react-accordions-8.76.2.tgz#552d369d9dbbde52c1123ebbb1be070313cf3aed" - integrity sha512-Xc8d9BZ1i8KTlAAlAopcIz95K9PKHxPlu4/5kth5yVsNQb+e/Qhr6EaHXGTTItPgyKtVlmudzG+US8LZQXwC4Q== +"@zendeskgarden/react-accordions@8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-accordions/-/react-accordions-8.76.9.tgz#aff672c511242caa65e7595fb9fe392e73b39049" + integrity sha512-/k3ZXZV3BE6JmHVje83eOeCBkJUJVsu0EVGHv0IYwvUOzEJ8w3eC2W+ATj3Y7JKjvHswWslMrZWUWyWLEHRIHg== dependencies: "@zendeskgarden/container-accordion" "^3.0.0" "@zendeskgarden/container-utilities" "^2.0.0" - polished "^4.0.0" - prop-types "^15.5.7" - -"@zendeskgarden/react-buttons@8.76.2", "@zendeskgarden/react-buttons@^8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-buttons/-/react-buttons-8.76.2.tgz#72ff42d991c5eca50bc75e932aef0fca63b8e88e" - integrity sha512-Ge7DWITphnzOPn0Q7Gplv/8/h9/Nt5v8gz+AUGXXn2TyjJNEpoA2tykZ+1xhom4bkJRE3kFLt7avecHjpHumMw== - dependencies: - "@zendeskgarden/container-selection" "^3.0.0" - "@zendeskgarden/container-utilities" "^2.0.0" - polished "^4.0.0" + polished "^4.3.1" prop-types "^15.5.7" - react-merge-refs "^1.1.0" -"@zendeskgarden/react-buttons@^8.76.9": +"@zendeskgarden/react-buttons@8.76.9", "@zendeskgarden/react-buttons@^8.76.9": version "8.76.9" resolved "https://registry.yarnpkg.com/@zendeskgarden/react-buttons/-/react-buttons-8.76.9.tgz#03d45c8fd3fa95e2087593b9df0f4c360843a3d7" integrity sha512-DLQ63s2pkvvTbZn32UPcYhq5eh3Cp0uWPDNuw9hB4oE+sK7MunFD39hIZBqXxy5F9JPmNwZ6264qdOt/H0nIfg== @@ -3925,43 +3898,43 @@ prop-types "^15.5.7" react-merge-refs "^1.1.0" -"@zendeskgarden/react-datepickers@8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-datepickers/-/react-datepickers-8.76.2.tgz#111fda3d61ec9cb0537d13319f45a9c50ca2ddd7" - integrity sha512-FjJ/CjipiQ/7feFdkBFvlv5S9JqTMHQotSkbrZsKtupZsrNXNfjXmWwmrobMU9jquw7o76KhVODs2KIpjUBAbQ== +"@zendeskgarden/react-datepickers@8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-datepickers/-/react-datepickers-8.76.9.tgz#ad76c0e08260598d8598972ac2ca3c46e0e67a5d" + integrity sha512-NDnj5Ea5V0MNZ3bRGIlDZkUFMNnLSyKGSFY5CjfbxCrngl9q4r7E0j/IS8Fp2NJQBzDU4ozWv1a3h9P54f7tgA== dependencies: "@zendeskgarden/container-utilities" "^2.0.0" - date-fns "^3.0.0" + date-fns "^3.6.0" prop-types "^15.5.7" react-popper "^1.3.4" -"@zendeskgarden/react-dropdowns.next@8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-dropdowns.next/-/react-dropdowns.next-8.76.2.tgz#30de80b784c54d1755b99932cde06b696962dbb3" - integrity sha512-jzpaqNZ9b7gisKGXA4Y+oqNVcN81ujrOHTBrrfH4A//50xZ6mmac/iteLRRvlIFcSS9YMYXSUH2SBKWx47FSig== +"@zendeskgarden/react-dropdowns.next@8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-dropdowns.next/-/react-dropdowns.next-8.76.9.tgz#f843a959e8815f41d1f0992bfe84e8dd877e8588" + integrity sha512-aa0McVIkDVYGRASp+dpVVn27g+qH7u31a1hDfM2KFDwU/0hG97yHKivl++ljtPkPCGYZKl3vhFLAYIG3sqrOnA== dependencies: - "@floating-ui/react-dom" "^2.0.0" + "@floating-ui/react-dom" "^2.1.0" "@zendeskgarden/container-combobox" "^1.1.4" - "@zendeskgarden/container-menu" "^0.3.0" + "@zendeskgarden/container-menu" "^0.3.3" "@zendeskgarden/container-utilities" "^2.0.0" - "@zendeskgarden/react-buttons" "^8.76.2" - "@zendeskgarden/react-forms" "^8.76.2" - "@zendeskgarden/react-tags" "^8.76.2" - "@zendeskgarden/react-tooltips" "^8.76.2" - polished "^4.0.0" + "@zendeskgarden/react-buttons" "^8.76.9" + "@zendeskgarden/react-forms" "^8.76.9" + "@zendeskgarden/react-tags" "^8.76.9" + "@zendeskgarden/react-tooltips" "^8.76.9" + polished "^4.3.1" prop-types "^15.7.2" react-merge-refs "^1.1.0" -"@zendeskgarden/react-forms@8.76.2", "@zendeskgarden/react-forms@^8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.76.2.tgz#8b23f88122ee98ed19e966aa6e823423b4ddbdf5" - integrity sha512-rBTCFGPfzgizj/9v1u1Bp7u2WZS+aVn3zmiDkgQWY1pT7szBHfPPz/ro8nQuW8fgFY5yL+Z4GQuA0FO7F7QLpg== +"@zendeskgarden/react-forms@8.76.9", "@zendeskgarden/react-forms@^8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.76.9.tgz#8582e7a09302e984a54d2b1bd0193cea4916064d" + integrity sha512-mSFZW9ysXz93PVmNLMOjwPmZxIkCmBaIGx6b2D+k595+h5OY/hL1ZFu2cIg8m3dGD8exgJiW6qRPM+FsTiA2dg== dependencies: "@zendeskgarden/container-field" "^3.0.0" - "@zendeskgarden/container-slider" "^0.1.1" + "@zendeskgarden/container-slider" "^0.1.11" "@zendeskgarden/container-utilities" "^2.0.0" lodash.debounce "^4.0.8" - polished "^4.0.0" + polished "^4.3.1" prop-types "^15.5.7" react-merge-refs "^1.1.0" @@ -3979,23 +3952,23 @@ react-merge-refs "^1.1.0" use-resize-observer "^9.1.0" -"@zendeskgarden/react-loaders@8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-loaders/-/react-loaders-8.76.2.tgz#b571d8758a6ff58af93abcb1c54481bb9d1a667e" - integrity sha512-9o1lcVTSrhQC7rbPufqS5poBfUdGViPjT6hfaP0bHuwYMKi0Ap2NvETRrTReyhjKxKyh2WiOaPC392lRperg2g== +"@zendeskgarden/react-loaders@8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-loaders/-/react-loaders-8.76.9.tgz#68510528d02d27023cda658a4f2c0bd0d035f24a" + integrity sha512-d3MynQYkr48JbhUYJ+9ipwUcKB/FfYtGnicsVFq84kGzCY90oDRZs7xkZinrCEpsdSQcWC/VJrVPMF+DASp+dA== dependencies: - "@zendeskgarden/container-schedule" "^2.0.0" - polished "^4.0.0" + "@zendeskgarden/container-schedule" "^2.0.9" + polished "^4.3.1" prop-types "^15.5.7" -"@zendeskgarden/react-modals@8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-modals/-/react-modals-8.76.2.tgz#76883010de34d7667255a8cd77923b4c162bc8d7" - integrity sha512-eiCUzh8FrB2mL68aGC9mq/MWDAZURrgIPr5I2ny7J3PkCKGHRWPzirbpQhdetN+6irvsCFZal1qkBZ55s6j07w== +"@zendeskgarden/react-modals@8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-modals/-/react-modals-8.76.9.tgz#eb18c4f62e076648085839061d26b3d22926d2e8" + integrity sha512-z1B1i08KDxbbq/P0blRUc9HvTznjI60e6qJWOag+RErNabaLfO2bUo/XraIJk0b/Q858iRTymhCHLCC5F6gAHg== dependencies: "@popperjs/core" "^2.4.4" - "@zendeskgarden/container-focusvisible" "^2.0.0" - "@zendeskgarden/container-modal" "^1.0.0" + "@zendeskgarden/container-focusvisible" "^2.0.3" + "@zendeskgarden/container-modal" "^1.0.15" "@zendeskgarden/container-utilities" "^2.0.0" dom-helpers "^5.1.0" prop-types "^15.5.7" @@ -4003,50 +3976,48 @@ react-popper "^2.2.3" react-transition-group "^4.4.2" -"@zendeskgarden/react-notifications@8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-notifications/-/react-notifications-8.76.2.tgz#b145ec7ac3600a117aa0fcfe267583cb4ca1c6b3" - integrity sha512-fkrclNbHGW6wwizqt4L/YI/aHRw72gzZTUw78UftcYlBAZY369WIE9R9jHCcg5JyTEs/oDePky59XVBFgY/S6Q== +"@zendeskgarden/react-notifications@8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-notifications/-/react-notifications-8.76.9.tgz#97ed492bb358b43e3dbb816c4ee4d1d8bca32ddc" + integrity sha512-0UcboUwx6IwXFiR30FgGFwArMx7M8I9hOuCy8vZAFPsZ8gUUTx+TGJ9tOq/5Qign4KcYJQ7fp6Dijm4aeg7TdQ== dependencies: - "@zendeskgarden/react-buttons" "^8.76.2" - polished "^4.1.1" + "@zendeskgarden/react-buttons" "^8.76.9" + polished "^4.3.1" prop-types "^15.5.7" react-transition-group "^4.4.2" react-uid "^2.3.1" -"@zendeskgarden/react-tags@8.76.2", "@zendeskgarden/react-tags@^8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tags/-/react-tags-8.76.2.tgz#a5cb86f5251479ba93db4bc5d67e5ad727149ff5" - integrity sha512-7yKjrtXamEjxmYVS1PuLDGaXcgUPBpQpmt5IiZ0denf+/J6akjjkA10Vb9ongx5f/tApaS83NsYvPTrxKrwdXA== +"@zendeskgarden/react-tables@8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tables/-/react-tables-8.76.9.tgz#6a417fa087ddb7e9758c5c6f7fb335d85a2f2a95" + integrity sha512-EnePRplpYlCTu9oBHs+t/FZ5dOH9SPcgAHLFKGjf59dDKAjxY37BvwNqUTIgWyPMOBFg0ZOMSmWU1WnQ/yqEHg== dependencies: "@zendeskgarden/container-utilities" "^2.0.0" - polished "^4.0.0" + dom-helpers "^5.1.0" + polished "^4.3.1" prop-types "^15.5.7" -"@zendeskgarden/react-theming@8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.76.2.tgz#80c3a268a1d523414fac79a4e948bad3e052a60f" - integrity sha512-DScBE/qnVRJwjIh2YrTfLQiSjMV6HATfldOx8zgYM2O1fUS+1CCUN2/FsD4s5tBZPs89qHkPMDHk1bKlzgyzsA== +"@zendeskgarden/react-tags@8.76.9", "@zendeskgarden/react-tags@^8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tags/-/react-tags-8.76.9.tgz#1ff18828b6d83c545de724e02a568111f48cf885" + integrity sha512-MZAjXhFQMdXbZP/FsS76yKyjvOuO8fxnODRuEAoCBsSpeVZQxgYvF8P8D1JB4tT3Qj9mY65PrcRHBXGo+/fl6w== dependencies: - "@zendeskgarden/container-focusvisible" "^2.0.0" "@zendeskgarden/container-utilities" "^2.0.0" - lodash.memoize "^4.1.2" - polished "^4.0.0" + polished "^4.3.1" prop-types "^15.5.7" -"@zendeskgarden/react-tooltips@8.76.2", "@zendeskgarden/react-tooltips@^8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.76.2.tgz#205b5fd21cb370e08b5c3bcfc78cd0931c2a239b" - integrity sha512-VyKDdZoQoRye+s63QqHA91c5kBc9oVldKpAhNszJiwJ4aez6jAqIT0a1PffmwyJudgPSj57wvjYLIc8IOxmLFQ== +"@zendeskgarden/react-theming@8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.76.9.tgz#05035270208698e9af9798f1ea63e8672b790f36" + integrity sha512-EYSwaFn/Dkr6ufCkFlCY5c8rGYyHVwox55tTZ+tEKVr52nLdKcVuV5Vih3Qn4+wizElJ0j1J+o5bDmKrHBKXxQ== dependencies: - "@zendeskgarden/container-tooltip" "^1.0.0" + "@zendeskgarden/container-focusvisible" "^2.0.3" "@zendeskgarden/container-utilities" "^2.0.0" - polished "^4.0.0" + lodash.memoize "^4.1.2" + polished "^4.3.1" prop-types "^15.5.7" - react-merge-refs "^1.1.0" - react-popper "^1.3.4" -"@zendeskgarden/react-tooltips@^8.76.9": +"@zendeskgarden/react-tooltips@8.76.9", "@zendeskgarden/react-tooltips@^8.76.9": version "8.76.9" resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.76.9.tgz#3e604af5892cb4c539283213e3a677ed9a2e73d6" integrity sha512-qT1evm8DKekqqEToYd19GhYZ/pBSq84FeaAeCypu4D37evvyHBrosczz47rWk1dOPhheSrrkH2mZFMOLJLw9Lg== @@ -4058,13 +4029,13 @@ react-merge-refs "^1.1.0" react-popper "^1.3.4" -"@zendeskgarden/react-typography@8.76.2": - version "8.76.2" - resolved "https://registry.yarnpkg.com/@zendeskgarden/react-typography/-/react-typography-8.76.2.tgz#d0720e31318d59aee0a16ad8b2f1e8b75db1e2a5" - integrity sha512-bCzS8zaDbE+8QJ5zfORtC8NfsZhK3GOFNEtNQmGSuJDrPv+THF6OkreCcA2D6iR/7b/mUtcB5jKii8Qtuo2fYQ== +"@zendeskgarden/react-typography@8.76.9": + version "8.76.9" + resolved "https://registry.yarnpkg.com/@zendeskgarden/react-typography/-/react-typography-8.76.9.tgz#5a863bba7700e8e8d5a552fb69f199913c047d31" + integrity sha512-XlXePlRBbTX2W4koAQOjb2y+FFa2rNUxush1BSXkXjd9OnoihOZ51tTxNZghly7ye4H0KTaYzKUq0dqI3xdVnQ== dependencies: - "@zendeskgarden/container-scrollregion" "^1.0.0" - polished "^4.0.0" + "@zendeskgarden/container-scrollregion" "^1.0.9" + polished "^4.3.1" prism-react-renderer "^1.1.1" prop-types "^15.5.7" @@ -5827,7 +5798,7 @@ date-fns@^2.29.3: dependencies: "@babel/runtime" "^7.21.0" -date-fns@^3.0.0: +date-fns@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf" integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww== @@ -11078,13 +11049,6 @@ pluralize@^8.0.0: resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1" integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA== -polished@^4.0.0, polished@^4.1.1: - version "4.2.2" - resolved "https://registry.yarnpkg.com/polished/-/polished-4.2.2.tgz#2529bb7c3198945373c52e34618c8fe7b1aa84d1" - integrity sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ== - dependencies: - "@babel/runtime" "^7.17.8" - polished@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548"