From 1fa4f9ea8084730a7e68a63fea93c18760ef4893 Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Tue, 21 Nov 2023 15:56:16 -0600
Subject: [PATCH 1/4] TUP-609 Improve feedback when users reply to tickets

---
 .../TicketDetailModal/TicketReplyForm.tsx        | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx
index 823173308..2439790d5 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,30 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({
               maxSizeMessage="Max File Size: 3MB"
               maxSize={3145728}
             />
+
             <FormGroup className="ticket-reply-submission">
+            <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}
+                disabled={!isValid || isSubmitting || isLoading || isError || isSuccess }
                 isLoading={isLoading}
               >
                 Reply
               </Button>
+              </ModalFooter>
             </FormGroup>
           </Form>
         );

From d3331682d27ae11a6bf87122aafb5d4f36799550 Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Tue, 21 Nov 2023 17:10:40 -0600
Subject: [PATCH 2/4] Linting

---
 .../TicketDetailModal/TicketReplyForm.tsx     | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx
index 2439790d5..e9e48630f 100644
--- a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx
+++ b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx
@@ -79,27 +79,33 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({
             />
 
             <FormGroup className="ticket-reply-submission">
-            <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>
+                <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>

From b56cfecc9407f07c95ea42de8d95566d6d0fc3d7 Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Tue, 21 Nov 2023 17:26:47 -0600
Subject: [PATCH 3/4] Create test for success message

---
 .../TicketDetailModal/TicketModal.test.tsx    | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx
index f9a734aa0..e76fdde31 100644
--- a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx
+++ b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx
@@ -69,3 +69,25 @@ 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()
+  );
+});
+

From 853701156cab55ea6dac76ffb47930387a4d1846 Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Tue, 21 Nov 2023 17:28:13 -0600
Subject: [PATCH 4/4] Linting test

---
 .../src/tickets/TicketDetailModal/TicketModal.test.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx
index e76fdde31..c3ddede69 100644
--- a/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx
+++ b/libs/tup-components/src/tickets/TicketDetailModal/TicketModal.test.tsx
@@ -90,4 +90,3 @@ it('should render an success message if an reply success is returned from the us
     expect(getByText(/Your reply has been sent/)).toBeDefined()
   );
 });
-