(feat) Restore ability to collapse and expand the entire form

src/components/renderer/form/form-renderer.component.tsx

@@ -24,7 +24,7 @@ export const FormRenderer = ({
   setIsLoadingFormDependencies,
 }: FormRendererProps) => {
   const { evaluatedFields, evaluatedFormJson } = useEvaluateFormFieldExpressions(initialValues, processorContext);
-  const { registerForm, setIsFormDirty, workspaceLayout } = useFormFactory();
+  const { registerForm, setIsFormDirty, workspaceLayout, isFormExpanded } = useFormFactory();
   const methods = useForm({
     defaultValues: initialValues,
   });
@@ -97,7 +97,7 @@ export const FormRenderer = ({
             />
           );
         }
-        return <PageRenderer key={page.label} page={page} />;
+        return <PageRenderer key={page.label} page={page} isFormExpanded={isFormExpanded} />;
       })}
     </FormProvider>
   );

src/components/renderer/page/page.renderer.component.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo, useState } from 'react';
-import { type FormPage } from '../../../types';
+import React, { useEffect, useMemo, useState } from 'react';
+import { type FormSection, type FormPage } from '../../../types';
 import { isTrue } from '../../../utils/boolean-utils';
 import { useTranslation } from 'react-i18next';
 import { SectionRenderer } from '../section/section-renderer.component';
@@ -8,24 +8,41 @@ import styles from './page.renderer.scss';
 import { Accordion, AccordionItem } from '@carbon/react';
 import { useFormFactory } from '../../../provider/form-factory-provider';
 import { ChevronDownIcon, ChevronUpIcon } from '@openmrs/esm-framework';
+import classNames from 'classnames';
 
 interface PageRendererProps {
   page: FormPage;
+  isFormExpanded: boolean;
 }
 
-function PageRenderer({ page }: PageRendererProps) {
+interface CollapsibleSectionContainerProps {
+  section: FormSection;
+  sectionIndex: number;
+  visibleSections: FormSection[];
+  isFormExpanded: boolean;
+}
+
+function PageRenderer({ page, isFormExpanded }: PageRendererProps) {
   const { t } = useTranslation();
   const pageId = useMemo(() => page.label.replace(/\s/g, ''), [page.label]);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const { setCurrentPage } = useFormFactory();
-  const visibleSections = page.sections.filter((section) => {
-    const hasVisibleQuestions = section.questions.some((question) => !isTrue(question.isHidden));
-    return !isTrue(section.isHidden) && hasVisibleQuestions;
-  });
+  const visibleSections = useMemo(
+    () =>
+      page.sections.filter((section) => {
+        const hasVisibleQuestions = section.questions.some((question) => !isTrue(question.isHidden));
+        return !isTrue(section.isHidden) && hasVisibleQuestions;
+      }),
+    [page.sections],
+  );
 
   const toggleCollapse = () => setIsCollapsed(!isCollapsed);
 
+  useEffect(() => {
+    setIsCollapsed(!isFormExpanded);
+  }, [isFormExpanded]);
+
   return (
     <div>
       <Waypoint onEnter={() => setCurrentPage(pageId)} topOffset="50%" bottomOffset="60%">
@@ -42,25 +59,55 @@ function PageRenderer({ page }: PageRendererProps) {
               </span>
             </p>
           </div>
-          {!isCollapsed && (
+          <div
+            className={classNames({
+              [styles.hiddenAccordion]: isCollapsed,
+              [styles.accordionContainer]: !isCollapsed,
+            })}>
             <Accordion>
-              {visibleSections.map((section) => (
-                <AccordionItem
-                  title={t(section.label)}
-                  open={true}
-                  className={styles.sectionContainer}
-                  key={`section-${section.label}`}>
-                  <div className={styles.formSection}>
-                    <SectionRenderer section={section} />
-                  </div>
-                </AccordionItem>
+              {visibleSections.map((section, index) => (
+                <CollapsibleSectionContainer
+                  key={`section-${section.label}`}
+                  section={section}
+                  sectionIndex={index}
+                  visibleSections={visibleSections}
+                  isFormExpanded={isFormExpanded}
+                />
               ))}
             </Accordion>
-          )}
+          </div>
         </div>
       </Waypoint>
     </div>
   );
 }
 
+function CollapsibleSectionContainer({
+  section,
+  sectionIndex,
+  visibleSections,
+  isFormExpanded,
+}: CollapsibleSectionContainerProps) {
+  const { t } = useTranslation();
+  const [isSectionOpen, setIsSectionOpen] = useState(isFormExpanded);
+
+  useEffect(() => {
+    setIsSectionOpen(isFormExpanded);
+  }, [isFormExpanded]);
+
+  return (
+    <AccordionItem
+      title={t(section.label)}
+      open={isSectionOpen}
+      className={classNames(styles.sectionContainer, {
+        [styles.firstSection]: sectionIndex === 0,
+        [styles.lastSection]: sectionIndex === visibleSections.length - 1,
+      })}>
+      <div className={styles.formSection}>
+        <SectionRenderer section={section} />
+      </div>
+    </AccordionItem>
+  );
+}
+
 export default PageRenderer;

src/components/renderer/page/page.renderer.scss

@@ -10,7 +10,8 @@
   transition: background-color 0.1s;
   border-radius: 1px;
   padding: 0.5rem 1rem;
-
+  border-top: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
   &:hover {
     background-color: colors.$gray-20;
   }
@@ -38,10 +39,26 @@
   background-color: colors.$gray-10;
 }
 
+.accordionContainer {
+  width: 95%;
+}
+
+.firstSection {
+  border-top: none;
+}
+
+.lastSection {
+  border-bottom: none !important;
+}
+
 .formSection {
   flex: 1 1 65%;
 }
 
+.hiddenAccordion {
+  display: none;
+}
+
 .formSection > div > fieldset {
   margin-bottom: 0 !important;
 }

src/form-engine.component.tsx

@@ -16,6 +16,7 @@ import MarkdownWrapper from './components/inputs/markdown/markdown-wrapper.compo
 import { init, teardown } from './lifecycle';
 import { reportError } from './utils/error-utils';
 import { moduleName } from './globals';
+import { useFormCollapse } from './hooks/useFormCollapse';
 
 interface FormEngineProps {
   patientUUID: string;
@@ -62,6 +63,8 @@ const FormEngine = ({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isFormDirty, setIsFormDirty] = useState(false);
   const sessionMode = !isEmpty(mode) ? mode : !isEmpty(encounterUUID) ? 'edit' : 'enter';
+  const { isFormExpanded, hideFormCollapseToggle } = useFormCollapse(sessionMode);
+
   // TODO: Updating this prop triggers a rerender of the entire form. This means whenever we scroll into a new page, the form is rerendered.
   // Figure out a way to avoid this. Maybe use a ref with an observer instead of a state?
   const [currentPage, setCurrentPage] = useState('');
@@ -118,13 +121,15 @@ const FormEngine = ({
           provider={session?.currentProvider}
           visit={visit}
           handleConfirmQuestionDeletion={handleConfirmQuestionDeletion}
+          isFormExpanded={isFormExpanded}
           formSubmissionProps={{
             isSubmitting,
             setIsSubmitting,
             onSubmit,
             onError: () => {},
             handleClose: () => {},
           }}
+          hideFormCollapseToggle={hideFormCollapseToggle}
           setIsFormDirty={setIsFormDirty}
           setCurrentPage={setCurrentPage}>
           <div className={styles.formContainer}>

src/provider/form-factory-provider.tsx

@@ -26,6 +26,7 @@ interface FormFactoryProviderContextProps {
   visit: OpenmrsResource;
   location: OpenmrsResource;
   provider: OpenmrsResource;
+  isFormExpanded: boolean;
   registerForm: (formId: string, isSubForm: boolean, context: FormContextProps) => void;
   setCurrentPage: (page: string) => void;
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
@@ -41,6 +42,7 @@ interface FormFactoryProviderProps {
   location: OpenmrsResource;
   provider: OpenmrsResource;
   visit: OpenmrsResource;
+  isFormExpanded: boolean;
   children: React.ReactNode;
   formSubmissionProps: {
     isSubmitting: boolean;
@@ -49,6 +51,7 @@ interface FormFactoryProviderProps {
     onError: (error: any) => void;
     handleClose: () => void;
   };
+  hideFormCollapseToggle: () => void;
   setCurrentPage: (page: string) => void;
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
   setIsFormDirty: (isFormDirty: boolean) => void;
@@ -65,8 +68,10 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
   location,
   provider,
   visit,
+  isFormExpanded = true,
   children,
   formSubmissionProps,
+  hideFormCollapseToggle,
   setCurrentPage,
   handleConfirmQuestionDeletion,
   setIsFormDirty,
@@ -121,6 +126,7 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
             if (postSubmissionHandlers) {
               await processPostSubmissionActions(postSubmissionHandlers, results, patient, sessionMode, t);
             }
+            hideFormCollapseToggle();
             if (onSubmit) {
               onSubmit(results);
             } else {
@@ -162,6 +168,7 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
         visit,
         location,
         provider,
+        isFormExpanded,
         registerForm,
         setCurrentPage,
         handleConfirmQuestionDeletion,