Merge branch 'subtask/tup-609-Improve-feedback-for-ticket-reply' into…

… dev
TACC · Dec 11, 2023 · 11cf627 · 11cf627
2 parents b7f6651 + 8537011
commit 11cf627
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 15 deletions.
diff --git 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(
+    <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()
+  );
+});
diff --git 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}
             />
+
             <FormGroup className="ticket-reply-submission">
-              {isError && (
-                <InlineMessage type="error">
-                  Something went wrong.
-                </InlineMessage>
-              )}
-              <Button
-                attr="submit"
-                type="primary"
-                disabled={!isValid || isSubmitting || isLoading || isError}
-                isLoading={isLoading}
-              >
-                Reply
-              </Button>
+              <ModalFooter>
+                <div>
+                  {isSuccess && (
+                    <InlineMessage type="success">
+                      Your reply has been sent.
+                    </InlineMessage>
+                  )}
+                  {isError && (
+                    <InlineMessage type="error">
+                      Something went wrong.
+                    </InlineMessage>
+                  )}
+                </div>
+                <Button
+                  attr="submit"
+                  type="primary"
+                  disabled={
+                    !isValid ||
+                    isSubmitting ||
+                    isLoading ||
+                    isError ||
+                    isSuccess
+                  }
+                  isLoading={isLoading}
+                >
+                  Reply
+                </Button>
+              </ModalFooter>
             </FormGroup>
           </Form>
         );