Merge pull request #3797 from Northeastern-Electric-Racing/#3667-maintenence-error-handling-for-saving-a-task-without-assigning

#3667 maintenence error handling for saving a task without assigning

Author: chpy04

src/frontend/src/components/NERFormModal.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { FieldValues, UseFormHandleSubmit, UseFormReset } from 'react-hook-form';
 import NERModal, { NERModalProps } from './NERModal';
+import { useToast } from '../hooks/toasts.hooks';
 
 interface NERFormModalProps<T extends FieldValues> extends NERModalProps {
   reset: UseFormReset<T>;
@@ -31,18 +32,23 @@ const NERFormModal = ({
   titleChildren,
   actionsLeftChildren
 }: NERFormModalProps<any>) => {
+  const toast = useToast();
   /**
    * Wrapper function for onSubmit so that form data is reset after submit
    */
   const onSubmitWrapper = async (data: any) => {
-    await onFormSubmit(data);
-    reset();
+    try {
+      await onFormSubmit(data);
+      reset();
+    } catch (e: unknown) {
+      if (e instanceof Error) toast.error(e.message, 6000);
+    }
   };
 
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     e.stopPropagation(); // Prevent event bubbling
-    handleUseFormSubmit(onSubmitWrapper)(e);
+    await handleUseFormSubmit(onSubmitWrapper)(e);
   };
 
   return (

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/TaskFormModal.tsx

@@ -2,24 +2,14 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { Autocomplete, FormControl, FormHelperText, FormLabel, Grid, MenuItem, TextField } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers';
 import { Controller, useForm } from 'react-hook-form';
-import { countWords, isGuest, isUnderWordCount, Task, TaskPriority, TeamPreview } from 'shared';
+import { countWords, isGuest, isUnderWordCount, Task, TaskPriority, TaskStatus, TeamPreview } from 'shared';
 import { useAllUsers, useCurrentUser } from '../../../../hooks/users.hooks';
 import * as yup from 'yup';
 import { taskUserToAutocompleteOption } from '../../../../utils/task.utils';
 import NERFormModal from '../../../../components/NERFormModal';
 import LoadingIndicator from '../../../../components/LoadingIndicator';
 import ErrorPage from '../../../ErrorPage';
 
-const schema = yup.object().shape({
-  notes: yup.string().optional(),
-  startDate: yup.date().optional(),
-  deadline: yup.date().optional(),
-  priority: yup.mixed<TaskPriority>().oneOf(Object.values(TaskPriority)).required(),
-  assignees: yup.array().required(),
-  title: yup.string().required(),
-  taskId: yup.string().required()
-});
-
 export interface EditTaskFormInput {
   taskId: string;
   title: string;
@@ -32,14 +22,53 @@ export interface EditTaskFormInput {
 
 interface TaskFormModalProps {
   task?: Task;
+  status?: Task['status'];
   teams: TeamPreview[];
   modalShow: boolean;
   onHide: () => void;
   onSubmit: (data: EditTaskFormInput) => Promise<void>;
   onReset?: () => void;
 }
 
-const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, onSubmit, modalShow, onHide, onReset }) => {
+const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, status, onSubmit, modalShow, onHide, onReset }) => {
+  let schema;
+
+  if (status === TaskStatus.IN_PROGRESS) {
+    schema = yup.object().shape({
+      notes: yup
+        .string()
+        .optional()
+        .test((value) => {
+          if (!value) return true;
+          const wordCount = countWords(value);
+          return wordCount < 250;
+        }),
+      startDate: yup.date().optional(),
+      deadline: yup.date().required('Deadline is required for In Progress tasks'),
+      priority: yup.mixed<TaskPriority>().oneOf(Object.values(TaskPriority)).required(),
+      assignees: yup.array().required().min(1, 'At least one assignee is required for In Progress tasks'),
+      title: yup.string().required(),
+      taskId: yup.string().required()
+    });
+  } else {
+    schema = yup.object().shape({
+      notes: yup
+        .string()
+        .optional()
+        .test((value) => {
+          if (!value) return true;
+          const wordCount = countWords(value);
+          return wordCount < 250;
+        }),
+      startDate: yup.date().optional(),
+      deadline: yup.date().optional(),
+      priority: yup.mixed<TaskPriority>().oneOf(Object.values(TaskPriority)).required(),
+      assignees: yup.array().required(),
+      title: yup.string().required(),
+      taskId: yup.string().required()
+    });
+  }
+
   const user = useCurrentUser();
 
   const { data: users, isLoading, isError, error } = useAllUsers();
@@ -162,6 +191,7 @@ const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, onSubmit, modalShow
                   />
                 )}
               />
+              <FormHelperText error={!!errors.assignees}>{errors.assignees?.message}</FormHelperText>
             </FormControl>
           </Grid>
           <Grid item md={6}>
@@ -200,6 +230,7 @@ const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, onSubmit, modalShow
                   />
                 )}
               />
+              <FormHelperText error={!!errors.deadline}>{errors.deadline?.message}</FormHelperText>
             </FormControl>
           </Grid>
           <Grid item xs={12} md={12}>

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskColumn.tsx

@@ -71,6 +71,7 @@ export const TaskColumn = ({
   return (
     <>
       <TaskFormModal
+        status={status}
         onSubmit={handleCreateTask}
         onHide={() => setShowCreateTaskModal(false)}
         modalShow={showCreateTaskModal}

src/frontend/src/tests/pages/WorkPackageDetailPage/StageGateWorkPackageModalContainer/StageGateWorkPackageModal.test.tsx

@@ -7,6 +7,7 @@ import { render, screen, routerWrapperBuilder } from '../../../test-support/test
 import { wbsPipe } from '../../../../utils/pipes';
 import { exampleWbs1 } from '../../../test-support/test-data/wbs-numbers.stub';
 import StageGateWorkPackageModal from '../../../../pages/WorkPackageDetailPage/StageGateWorkPackageModalContainer/StageGateWorkPackageModal';
+import { ToastProvider } from '../../../../components/Toast/ToastProvider';
 
 /**
  * Mock function for submitting the form, use if there is additional functionality added while submitting
@@ -24,12 +25,14 @@ const renderComponent = (modalShow: boolean) => {
   const RouterWrapper = routerWrapperBuilder({});
   return render(
     <RouterWrapper>
-      <StageGateWorkPackageModal
-        modalShow={modalShow}
-        onHide={mockHandleHide}
-        onSubmit={mockHandleSubmit}
-        wbsNum={exampleWbs1}
-      />
+      <ToastProvider>
+        <StageGateWorkPackageModal
+          modalShow={modalShow}
+          onHide={mockHandleHide}
+          onSubmit={mockHandleSubmit}
+          wbsNum={exampleWbs1}
+        />
+      </ToastProvider>
     </RouterWrapper>
   );
 };