Skip to content

Commit 3ec9073

Browse files
anudeodharanudeodhar
authored
Merge pull request #708 from zendesk/anudeodhar/LB3515
[LB3515] Add ability to post approvals clarification comments
2 parents 1e43d17 + ebf3c2b commit 3ec9073

File tree

11 files changed

+499
-46
lines changed

11 files changed

+499
-46
lines changed

‎src/modules/approval-requests/ApprovalRequestPage.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,11 @@ function ApprovalRequestPage({
9595
setApprovalRequest,
9696
errorFetchingApprovalRequest: error,
9797
isLoading,
98-
} = useApprovalRequest(approvalWorkflowInstanceId, approvalRequestId);
98+
} = useApprovalRequest({
99+
approvalWorkflowInstanceId: approvalWorkflowInstanceId,
100+
approvalRequestId: approvalRequestId,
101+
enablePolling: true,
102+
});
99103

100104
const { hasUserViewedBefore, markUserViewed } = useUserViewedApprovalStatus({
101105
approvalRequestId: approvalRequest?.id,
@@ -171,6 +175,7 @@ function ApprovalRequestPage({
171175
{hasClarificationEnabled && (
172176
<ClarificationArea>
173177
<ClarificationContainer
178+
key={approvalRequest?.clarification_flow_messages?.length}
174179
approvalRequestId={approvalRequest.id}
175180
baseLocale={baseLocale}
176181
clarificationFlowMessages={

‎src/modules/approval-requests/components/approval-request/clarification/ClarificationCommentForm.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,15 @@ import { useSubmitComment } from "./hooks/useSubmitComment";
77
import { Button } from "@zendeskgarden/react-buttons";
88
import styled from "styled-components";
99
import { DEFAULT_AVATAR_URL } from "./constants";
10+
import type { ApprovalClarificationFlowMessage } from "../../../types";
1011

1112
interface ClarificationCommentFormProps {
1213
baseLocale: string;
1314
currentUserAvatarUrl: string;
1415
currentUserName: string;
1516
markAllCommentsAsRead: () => void;
17+
approvalRequestId: string;
18+
onUpdatedComments: (comments: ApprovalClarificationFlowMessage[]) => void;
1619
}
1720

1821
const FormContainer = styled(Grid)`
@@ -38,6 +41,8 @@ function ClarificationCommentForm({
3841
currentUserAvatarUrl,
3942
currentUserName,
4043
markAllCommentsAsRead,
44+
approvalRequestId,
45+
onUpdatedComments,
4146
}: ClarificationCommentFormProps) {
4247
const {
4348
comment_form_aria_label,
@@ -46,7 +51,18 @@ function ClarificationCommentForm({
4651
validation_empty_input,
4752
} = useGetClarificationCopy();
4853

49-
const { handleSubmitComment, isLoading = false } = useSubmitComment();
54+
const { submitComment, isLoading = false } = useSubmitComment();
55+
56+
const handleSubmitComment = async (
57+
approvalRequestId: string,
58+
comment: string
59+
) => {
60+
const result = await submitComment(approvalRequestId, comment);
61+
62+
if (result.success && result.data) {
63+
onUpdatedComments(result.data);
64+
}
65+
};
5066

5167
const {
5268
buttonsContainerRef,
@@ -65,6 +81,7 @@ function ClarificationCommentForm({
6581
onSubmit: handleSubmitComment,
6682
baseLocale,
6783
markAllCommentsAsRead,
84+
approvalRequestId,
6885
});
6986

7087
return (

‎src/modules/approval-requests/components/approval-request/clarification/ClarificationContainer.tsx‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from "react";
1+
import React, { useCallback, useEffect, useState } from "react";
22
import { useGetClarificationCopy } from "./hooks/useGetClarificationCopy";
33
import { getColor, getColorV8 } from "@zendeskgarden/react-theming";
44
import { MD } from "@zendeskgarden/react-typography";
@@ -68,13 +68,15 @@ export default function ClarificationContainer({
6868
status,
6969
}: ClarificationContainerProps) {
7070
const copy = useGetClarificationCopy();
71-
const hasComments =
72-
clarificationFlowMessages && clarificationFlowMessages.length > 0;
71+
const [comments, setComments] = useState<ApprovalClarificationFlowMessage[]>(
72+
clarificationFlowMessages
73+
);
74+
75+
const hasComments = comments && comments.length > 0;
7376
const isTerminalStatus =
7477
!!status &&
7578
(status === "withdrawn" || status === "approved" || status === "rejected");
76-
const canComment =
77-
!isTerminalStatus && clarificationFlowMessages!.length < MAX_COMMENTS;
79+
const canComment = !isTerminalStatus && comments!.length < MAX_COMMENTS;
7880

7981
const showCommentHeader = !isTerminalStatus || hasComments;
8082

@@ -84,7 +86,7 @@ export default function ClarificationContainer({
8486
markCommentAsVisible,
8587
markAllCommentsAsRead,
8688
} = useGetUnreadComments({
87-
comments: clarificationFlowMessages,
89+
comments,
8890
currentUserId,
8991
approvalRequestId,
9092
});
@@ -101,6 +103,13 @@ export default function ClarificationContainer({
101103
};
102104
}, [markAllCommentsAsRead]);
103105

106+
const handleUpdatedComments = useCallback(
107+
(newComments: ApprovalClarificationFlowMessage[]) => {
108+
setComments(newComments);
109+
},
110+
[]
111+
);
112+
104113
return (
105114
<Container showCommentHeader={showCommentHeader}>
106115
{showCommentHeader && (
@@ -113,7 +122,7 @@ export default function ClarificationContainer({
113122
)}
114123
<CommentListArea data-testid="comment-list-area">
115124
{hasComments &&
116-
clarificationFlowMessages.map((comment) => {
125+
comments.map((comment) => {
117126
const commentKey = buildCommentEntityKey(
118127
approvalRequestId,
119128
comment
@@ -145,7 +154,7 @@ export default function ClarificationContainer({
145154
</CommentListArea>
146155
<CommentLimitAlert
147156
approvalRequestId={approvalRequestId}
148-
commentCount={clarificationFlowMessages!.length}
157+
commentCount={comments!.length}
149158
currentUserId={currentUserId}
150159
isTerminalStatus={isTerminalStatus}
151160
/>
@@ -155,6 +164,8 @@ export default function ClarificationContainer({
155164
currentUserAvatarUrl={currentUserAvatarUrl}
156165
currentUserName={currentUserName}
157166
markAllCommentsAsRead={markAllCommentsAsRead}
167+
approvalRequestId={approvalRequestId}
168+
onUpdatedComments={handleUpdatedComments}
158169
/>
159170
)}
160171
</Container>

‎src/modules/approval-requests/components/approval-request/clarification/hooks/tests/useCommentForm.test.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ describe("useCommentForm", () => {
4141
it("should return initial values", () => {
4242
const { result } = renderHook(() =>
4343
useCommentForm({
44+
approvalRequestId: "123",
4445
onSubmit: successOnSubmit,
4546
baseLocale,
4647
markAllCommentsAsRead,
@@ -59,6 +60,7 @@ describe("useCommentForm", () => {
5960
it("should not submit when input is empty", () => {
6061
const { result } = renderHook(() =>
6162
useCommentForm({
63+
approvalRequestId: "123",
6264
onSubmit: successOnSubmit,
6365
baseLocale,
6466
markAllCommentsAsRead,
@@ -78,6 +80,7 @@ describe("useCommentForm", () => {
7880
it("should submit when input is not empty", async () => {
7981
const { result } = renderHook(() =>
8082
useCommentForm({
83+
approvalRequestId: "123",
8184
onSubmit: successOnSubmit,
8285
baseLocale,
8386
markAllCommentsAsRead,
@@ -102,6 +105,7 @@ describe("useCommentForm", () => {
102105
it("should handleBlur", () => {
103106
const { result } = renderHook(() =>
104107
useCommentForm({
108+
approvalRequestId: "123",
105109
onSubmit: successOnSubmit,
106110
baseLocale,
107111
markAllCommentsAsRead,
@@ -127,6 +131,7 @@ describe("useCommentForm", () => {
127131
it("should submit when input is not empty and user clicks enter", async () => {
128132
const { result } = renderHook(() =>
129133
useCommentForm({
134+
approvalRequestId: "123",
130135
onSubmit: successOnSubmit,
131136
baseLocale,
132137
markAllCommentsAsRead,
@@ -150,6 +155,7 @@ describe("useCommentForm", () => {
150155
it("should show charLimitMessage warning when 10 characters remaining", () => {
151156
const { result } = renderHook(() =>
152157
useCommentForm({
158+
approvalRequestId: "123",
153159
onSubmit: successOnSubmit,
154160
baseLocale,
155161
markAllCommentsAsRead,
@@ -172,6 +178,7 @@ describe("useCommentForm", () => {
172178
it("should update charLimitMessage and validation warning with 1 character remaining", () => {
173179
const { result } = renderHook(() =>
174180
useCommentForm({
181+
approvalRequestId: "123",
175182
onSubmit: successOnSubmit,
176183
baseLocale,
177184
markAllCommentsAsRead,
@@ -193,6 +200,7 @@ describe("useCommentForm", () => {
193200
it("should truncate input exceeding max length", () => {
194201
const { result } = renderHook(() =>
195202
useCommentForm({
203+
approvalRequestId: "123",
196204
onSubmit: successOnSubmit,
197205
baseLocale,
198206
markAllCommentsAsRead,
@@ -210,6 +218,7 @@ describe("useCommentForm", () => {
210218
it("should clear error validation when user types valid input after error", () => {
211219
const { result } = renderHook(() =>
212220
useCommentForm({
221+
approvalRequestId: "123",
213222
onSubmit: successOnSubmit,
214223
baseLocale,
215224
markAllCommentsAsRead,
@@ -230,6 +239,7 @@ describe("useCommentForm", () => {
230239
it("calls markAllCommentsAsRead after successful submit", async () => {
231240
const { result } = renderHook(() =>
232241
useCommentForm({
242+
approvalRequestId: "123",
233243
onSubmit: successOnSubmit,
234244
baseLocale,
235245
markAllCommentsAsRead,
@@ -251,6 +261,7 @@ describe("useCommentForm", () => {
251261
it("does not submit on Enter with Shift (allows newline)", () => {
252262
const { result } = renderHook(() =>
253263
useCommentForm({
264+
approvalRequestId: "123",
254265
onSubmit: successOnSubmit,
255266
baseLocale,
256267
markAllCommentsAsRead,
@@ -270,6 +281,7 @@ describe("useCommentForm", () => {
270281
it("submits on Enter", async () => {
271282
const { result } = renderHook(() =>
272283
useCommentForm({
284+
approvalRequestId: "123",
273285
onSubmit: successOnSubmit,
274286
baseLocale,
275287
markAllCommentsAsRead,
@@ -292,6 +304,7 @@ describe("useCommentForm", () => {
292304
it("cancels on Escape key", () => {
293305
const { result } = renderHook(() =>
294306
useCommentForm({
307+
approvalRequestId: "123",
295308
onSubmit: successOnSubmit,
296309
baseLocale,
297310
markAllCommentsAsRead,
@@ -318,6 +331,7 @@ describe("useCommentForm", () => {
318331
it("prevents input when max length reached and non-allowed key pressed", () => {
319332
const { result } = renderHook(() =>
320333
useCommentForm({
334+
approvalRequestId: "123",
321335
onSubmit: successOnSubmit,
322336
baseLocale,
323337
markAllCommentsAsRead,
@@ -342,6 +356,7 @@ describe("useCommentForm", () => {
342356
it("allows navigation keys and shortcuts at max length", () => {
343357
const { result } = renderHook(() =>
344358
useCommentForm({
359+
approvalRequestId: "123",
345360
onSubmit: successOnSubmit,
346361
baseLocale,
347362
markAllCommentsAsRead,

0 commit comments

Comments
 (0)