diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx index f9a734aa0..c3ddede69 100644 --- a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx +++ b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx @@ -69,3 +69,24 @@ describe('Ticket Modal', () => { ); }); }); + +it('should render an success message if an reply success is returned from the useMutation hook', async () => { + const user = userEvent.setup(); + server.use( + rest.post('http://localhost:8001/tickets/85411/reply', (req, res, ctx) => + res.once(ctx.status(200)) + ) + ); + const { getByLabelText, getByText, getByRole } = testRender( + + ); + + const reply = getByLabelText(/Reply/); + const submit = getByRole('button', { name: 'Reply' }); + await user.type(reply, 'success message?'); + fireEvent.click(submit); + + await waitFor(() => + expect(getByText(/Your reply has been sent/)).toBeDefined() + ); +}); diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx index 823173308..e9e48630f 100644 --- a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx +++ b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx @@ -6,7 +6,7 @@ import { FormikTextarea, FormikSelect, } from '@tacc/core-wrappers'; -import { FormGroup } from 'reactstrap'; +import { FormGroup, ModalFooter } from 'reactstrap'; import { Button, InlineMessage } from '@tacc/core-components'; import { useTicketReply } from '@tacc/tup-hooks'; import * as Yup from 'yup'; @@ -26,7 +26,7 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({ ticketId, }) => { const mutation = useTicketReply(ticketId); - const { mutate, isLoading, isError } = mutation; + const { mutate, isSuccess, isLoading, isError } = mutation; const defaultValues: TicketReplyFormValues = { text: '', @@ -77,20 +77,36 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({ maxSizeMessage="Max File Size: 3MB" maxSize={3145728} /> + - {isError && ( - - Something went wrong. - - )} - + +
+ {isSuccess && ( + + Your reply has been sent. + + )} + {isError && ( + + Something went wrong. + + )} +
+ +
);