(feat) O3-3112: Re-instate the Form collapse (#244)

* feat: improve scroll to view when the form is in validation state

* feat: form collapse

* fix: fix hide toggle when form is canceld or closed

* Revert "feat: improve scroll to view when the form is in validation state"

This reverts commit c49e099.

* fix: hide the toggle after saving

* refactor: remove redundant add lister

* refactor: use usecallback for handleFormCollapsetoggle

src/components/sidebar/sidebar.component.tsx

@@ -18,6 +18,7 @@ const Sidebar = ({
   setValues,
   allowUnspecifiedAll,
   defaultPage,
+  hideFormCollapseToggle,
 }) => {
   const { t } = useTranslation();
   const [activeLink, setActiveLink] = useState(selectedPage);
@@ -114,6 +115,7 @@ const Sidebar = ({
           onClick={() => {
             onCancel && onCancel();
             handleClose && handleClose();
+            hideFormCollapseToggle();
           }}>
           {mode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
         </Button>

src/form-engine.component.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Formik, Form } from 'formik';
+import { Form, Formik } from 'formik';
 import classNames from 'classnames';
 import { Button, ButtonSet, InlineLoading } from '@carbon/react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
@@ -17,6 +17,7 @@ import { useWorkspaceLayout } from './hooks/useWorkspaceLayout';
 import { usePatientData } from './hooks/usePatientData';
 import { evaluatePostSubmissionExpression } from './utils/post-submission-action-helper';
 import { moduleName } from './globals';
+import { useFormCollapse } from './hooks/useFormCollapse';
 import EncounterForm from './components/encounter/encounter-form.component';
 import PatientBanner from './components/patient-banner/patient-banner.component';
 import MarkdownWrapper from './components/inputs/markdown/markdown-wrapper.component';
@@ -101,12 +102,12 @@ const FormEngine: React.FC<FormProps> = ({
   const [initialValues, setInitialValues] = useState({});
   const [scrollablePages, setScrollablePages] = useState(new Set<FormPageProps>());
   const [selectedPage, setSelectedPage] = useState('');
-  const [isFormExpanded, setIsFormExpanded] = useState<boolean | undefined>(undefined);
   const [isLoadingFormDependencies, setIsLoadingFormDependencies] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [pagesWithErrors, setPagesWithErrors] = useState([]);
   const postSubmissionHandlers = usePostSubmissionAction(refinedFormJson?.postSubmissionActions);
   const sessionMode = mode ? mode : encounterUUID || encounterUuid ? 'edit' : 'enter';
+  const { isFormExpanded, hideFormCollapseToggle } = useFormCollapse(sessionMode);
 
   const showSidebar = useMemo(() => {
     return workspaceLayout !== 'minimized' && scrollablePages.size > 1 && sessionMode !== 'embedded-view';
@@ -217,6 +218,7 @@ const FormEngine: React.FC<FormProps> = ({
             );
           }
           onSubmit?.();
+          hideFormCollapseToggle();
         })
         .catch((error) => {
           const errorMessages = extractErrorMessagesFromResponse(error);
@@ -272,6 +274,7 @@ const FormEngine: React.FC<FormProps> = ({
                       setValues={props.setValues}
                       allowUnspecifiedAll={formJson.allowUnspecifiedAll}
                       defaultPage={formJson.defaultPage}
+                      hideFormCollapseToggle={hideFormCollapseToggle}
                     />
                   )}
                   <div className={styles.formContent}>
@@ -316,6 +319,7 @@ const FormEngine: React.FC<FormProps> = ({
                           onClick={() => {
                             onCancel && onCancel();
                             handleClose && handleClose();
+                            hideFormCollapseToggle();
                           }}>
                           {mode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
                         </Button>

src/hooks/useFormCollapse.tsx

@@ -0,0 +1,36 @@
+import { SessionMode } from '../types';
+import { useCallback, useEffect, useState } from 'react';
+
+export function useFormCollapse(sessionMode: SessionMode) {
+  const [isFormExpanded, setIsFormExpanded] = useState(true);
+
+  const hideFormCollapseToggle = useCallback(() => {
+    const HideFormCollapseToggle = new CustomEvent('openmrs:form-view-embedded', { detail: { value: false } });
+    window.dispatchEvent(HideFormCollapseToggle);
+  }, []);
+
+  const handleFormCollapseToggle = useCallback((event) => {
+    setIsFormExpanded(event.detail.value);
+  }, []);
+
+  useEffect(() => {
+    const FormCollapseToggleVisibleEvent = new CustomEvent('openmrs:form-view-embedded', {
+      detail: { value: sessionMode != 'embedded-view' },
+    });
+
+    window.dispatchEvent(FormCollapseToggleVisibleEvent);
+  }, [sessionMode]);
+
+  useEffect(() => {
+    window.addEventListener('openmrs:form-collapse-toggle', handleFormCollapseToggle);
+
+    return () => {
+      window.removeEventListener('openmrs:form-collapse-toggle', handleFormCollapseToggle);
+    };
+  }, []);
+
+  return {
+    isFormExpanded,
+    hideFormCollapseToggle,
+  };
+}

src/hooks/useFormJson.tsx

@@ -33,6 +33,7 @@ export function useFormJson(formUuid: string, rawFormJson: any, encounterUuid: s
     formError: error,
   };
 }
+
 /**
  * Fetches a form JSON from OpenMRS and recursively fetches its subforms if they available.
  *
@@ -95,6 +96,7 @@ function validateFormsArgs(formUuid: string, rawFormJson: any): Error {
     return new Error('InvalidArgumentsErr: Both formUuid and formJson cannot be provided at the same time.');
   }
 }
+
 /**
  * Refines the input form JSON object by parsing it, removing inline subforms, applying form schema transformers, setting the encounter type, and applying form intents if provided.
  * @param {any} formJson - The input form JSON object or string.