(feat) O3-2971: Show a confirmation modal when the user submits an empty form

src/form-engine.component.tsx

@@ -32,6 +32,7 @@ interface FormEngineProps {
   onCancel?: () => void;
   handleClose?: () => void;
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
+  handleEmptyFormSubmission?: () => Promise<void>;
   markFormAsDirty?: (isDirty: boolean) => void;
 }
 
@@ -47,6 +48,7 @@ const FormEngine = ({
   onCancel,
   handleClose,
   handleConfirmQuestionDeletion,
+  handleEmptyFormSubmission,
   markFormAsDirty,
 }: FormEngineProps) => {
   const { t } = useTranslation();
@@ -127,13 +129,13 @@ const FormEngine = ({
           provider={session?.currentProvider}
           visit={visit}
           handleConfirmQuestionDeletion={handleConfirmQuestionDeletion}
+          handleEmptyFormSubmission={handleEmptyFormSubmission}
           isFormExpanded={isFormExpanded}
           formSubmissionProps={{
             isSubmitting,
             setIsSubmitting,
-            onSubmit,
-            onError: () => {},
-            handleClose: () => {},
+            onSubmit, 
+            handleClose: handleClose,
           }}
           hideFormCollapseToggle={hideFormCollapseToggle}
           setIsFormDirty={setIsFormDirty}>

src/provider/form-factory-helper.ts

@@ -46,6 +46,11 @@ export function validateForm(context: FormContextProps) {
   return errors.length === 0;
 }
 
+export function validateEmptyForm(context: FormContextProps) {
+  const { methods: { formState: { dirtyFields } } } = context;
+  return Object.keys(dirtyFields).length === 0;
+}
+
 export async function processPostSubmissionActions(
   postSubmissionHandlers: PostSubmissionActionMeta[],
   submissionResults: OpenmrsResource[],

src/provider/form-factory-provider.tsx

@@ -11,7 +11,7 @@ import {
 } from '@openmrs/esm-framework';
 import { type FormProcessorConstructor } from '../processors/form-processor';
 import { type FormContextProps } from './form-provider';
-import { processPostSubmissionActions, validateForm } from './form-factory-helper';
+import { processPostSubmissionActions, validateForm, validateEmptyForm } from './form-factory-helper';
 import { useTranslation } from 'react-i18next';
 import { usePostSubmissionActions } from '../hooks/usePostSubmissionActions';
 
@@ -47,11 +47,11 @@ interface FormFactoryProviderProps {
     isSubmitting: boolean;
     setIsSubmitting: (isSubmitting: boolean) => void;
     onSubmit: (data: any) => void;
-    onError: (error: any) => void;
     handleClose: () => void;
   };
   hideFormCollapseToggle: () => void;
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
+  handleEmptyFormSubmission?: () => Promise<void>;
   setIsFormDirty: (isFormDirty: boolean) => void;
 }
 
@@ -70,14 +70,15 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
   children,
   formSubmissionProps,
   hideFormCollapseToggle,
+  handleEmptyFormSubmission,
   handleConfirmQuestionDeletion,
   setIsFormDirty,
 }) => {
   const { t } = useTranslation();
   const rootForm = useRef<FormContextProps>();
   const subForms = useRef<Record<string, FormContextProps>>({});
   const layoutType = useLayoutType();
-  const { isSubmitting, setIsSubmitting, onSubmit, onError, handleClose } = formSubmissionProps;
+  const { isSubmitting, setIsSubmitting, onSubmit, handleClose } = formSubmissionProps;
   const postSubmissionHandlers = usePostSubmissionActions(formJson.postSubmissionActions);
 
   const abortController = new AbortController();
@@ -96,14 +97,31 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
   });
 
   useEffect(() => {
-    if (isSubmitting) {
-      // TODO: find a dynamic way of managing the form processing order
-      const forms = [rootForm.current, ...Object.values(subForms.current)];
-      // validate all forms
-      const isValid = forms.every((formContext) => validateForm(formContext));
-      if (isValid) {
-        Promise.all(forms.map((formContext) => formContext.processor.processSubmission(formContext, abortController)))
-          .then(async (results) => {
+    const handleFormSubmission = async () => {
+      if (isSubmitting) {
+        const forms = [rootForm.current, ...Object.values(subForms.current)];
+        // Validate all forms
+        const isValid = forms.every((formContext) => validateForm(formContext));
+        // Check if the form is empty
+        const isEmpty = forms.every((formContext) => validateEmptyForm(formContext));
+
+        if (isEmpty && isValid) {
+          if (handleEmptyFormSubmission && typeof handleEmptyFormSubmission === 'function') {
+            try {
+              await handleEmptyFormSubmission();
+              handleClose()
+              return setIsSubmitting(false)
+            } catch (error) {
+              return setIsSubmitting(false);
+            }
+          }
+        }
+
+        if (isValid) {
+          try {
+            const results = await Promise.all(
+              forms.map((formContext) => formContext.processor.processSubmission(formContext, abortController))
+            );
             formSubmissionProps.setIsSubmitting(false);
             if (sessionMode === 'edit') {
               showSnackbar({
@@ -129,8 +147,7 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
             } else {
               handleClose();
             }
-          })
-          .catch((errorObject: Error | ToastDescriptor) => {
+          } catch (errorObject) {
             setIsSubmitting(false);
             if (errorObject instanceof Error) {
               showToast({
@@ -142,11 +159,13 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
             } else {
               showToast(errorObject);
             }
-          });
-      } else {
-        setIsSubmitting(false);
+          }
+        } else {
+          setIsSubmitting(false);
+        }
       }
-    }
+    };
+    handleFormSubmission();
     return () => {
       abortController.abort();
     };
@@ -181,4 +200,4 @@ export const useFormFactory = () => {
     throw new Error('useFormFactoryContext must be used within a FormFactoryProvider');
   }
   return context;
-};
+};