TUP-609 Improve feedback when users reply to tickets (#382)

* TUP-609 Improve feedback when users reply to tickets

* Linting

* Create test for success message

* Linting test

* - Added timeout for error/success messages
- Removed disabled reply button on submit
- Added margin to button
- Centered reply response message with button

libs/tup-components/src/tickets/TicketDetailModal/TicketModal.global.css

@@ -34,6 +34,7 @@
 .ticket-reply-submission {
   display: flex;
   justify-content: right;
+  align-items: center;
 }
 
 .ticket-model-content {
@@ -130,4 +131,5 @@
 .ticket-reply-submission button {
   padding-left: 5rem;
   padding-right: 5rem;
+  margin-left: 1rem;
 }

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(
+    <TicketReplyForm ticketId="85411" />
+  );
+
+  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()
+  );
+});

libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx

@@ -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: '',
@@ -44,6 +44,11 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({
     if (values.status) formData.append('status', values.status);
     mutate(formData, {
       onSuccess: () => resetForm(),
+      onSettled: () => {
+        setTimeout(() => {
+          mutation.reset();
+        }, 5000);
+      },
     });
   };
 
@@ -77,7 +82,13 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({
               maxSizeMessage="Max File Size: 3MB"
               maxSize={3145728}
             />
+
             <FormGroup className="ticket-reply-submission">
+              {isSuccess && (
+                <InlineMessage type="success">
+                  Your reply has been sent.
+                </InlineMessage>
+              )}
               {isError && (
                 <InlineMessage type="error">
                   Something went wrong.