task/TUP-468: Allow users to set ticket status from the reply form (#238

) * Allow users to set ticket status from the reply form * Update labels to match tickets table --------- Co-authored-by: Jake Rosenberg <[email protected]>
TACC · May 25, 2023 · 013a328 · 013a328
1 parent 8ca4297
commit 013a328
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx b/libs/tup-components/src/tickets/TicketDetailModal/TicketReplyForm.tsx
@@ -1,32 +1,39 @@
 import React from 'react';
 
 import { Formik, Form, FormikHelpers } from 'formik';
-import { FormikFileInput, FormikTextarea } from '@tacc/core-wrappers';
+import {
+  FormikFileInput,
+  FormikTextarea,
+  FormikSelect,
+} from '@tacc/core-wrappers';
 import { FormGroup } from 'reactstrap';
 import { Button, InlineMessage } from '@tacc/core-components';
-import { useTicketReply } from '@tacc/tup-hooks';
+import { useGetTicketDetails, useTicketReply } from '@tacc/tup-hooks';
 import * as Yup from 'yup';
 import './TicketModal.global.css';
 
 interface TicketReplyFormValues {
   text: string;
   files: File[];
+  status: string;
 }
 
 const formSchema = Yup.object().shape({
   text: Yup.string().required('Required'),
 });
 
-const defaultValues: TicketReplyFormValues = {
-  text: '',
-  files: [],
-};
-
 export const TicketReplyForm: React.FC<{ ticketId: string }> = ({
   ticketId,
 }) => {
   const mutation = useTicketReply(ticketId);
   const { mutate, isLoading, isError } = mutation;
+  const { data: ticketData } = useGetTicketDetails(ticketId);
+
+  const defaultValues: TicketReplyFormValues = {
+    text: '',
+    files: [],
+    status: ticketData?.Status ?? 'open',
+  };
 
   const onSubmit = (
     values: TicketReplyFormValues,
@@ -35,6 +42,7 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({
     const formData = new FormData();
     formData.append('text', values['text']);
     (values.files || []).forEach((file) => formData.append('files', file));
+    formData.append('status', values['status']);
     mutate(formData, {
       onSuccess: () => resetForm(),
     });
@@ -58,6 +66,13 @@ export const TicketReplyForm: React.FC<{ ticketId: string }> = ({
               style={{ maxWidth: '100%' }}
               required
             />
+            <FormikSelect name="status" label="Status" required>
+              <option value="new">New</option>
+              <option value="resolved">Resolved</option>
+              <option value="open">In Progress</option>
+              <option value="user_wait">Reply Required</option>
+              <option value="internal_wait">Reply Sent</option>
+            </FormikSelect>
             <FormikFileInput
               name="files"
               required={false}

diff --git a/libs/tup-hooks/src/tickets/useTickets.ts b/libs/tup-hooks/src/tickets/useTickets.ts
@@ -106,8 +106,11 @@ export const useTicketReply = (ticketId: string) => {
   const mutation = usePost<FormData, string>({
     endpoint: `/tickets/${ticketId}/reply`,
     options: {
-      onSuccess: () =>
-        queryClient.invalidateQueries([`tickets/${ticketId}/history`]),
+      onSuccess: () => {
+        queryClient.invalidateQueries([`tickets/${ticketId}/history`]);
+        queryClient.invalidateQueries([`tickets/${ticketId}`]);
+        queryClient.invalidateQueries(['tickets']);
+      },
     },
   });
   return mutation;