@openmrs/esm-patient-forms-app 11.3.1-pre.9452 → 11.3.1-pre.9455

package/src/clinical-form-action-button.component.tsx

@@ -1,54 +1,27 @@
 import React, { type ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActionMenuButton, DocumentIcon, launchWorkspace, useWorkspaces } from '@openmrs/esm-framework';
-import {
-  clinicalFormsWorkspace,
-  formEntryWorkspace,
-  htmlFormEntryWorkspace,
-  useLaunchWorkspaceRequiringVisit,
-} from '@openmrs/esm-patient-common-lib';
+import { ActionMenuButton2, DocumentIcon } from '@openmrs/esm-framework';
+import { type PatientChartWorkspaceActionButtonProps, useStartVisitIfNeeded } from '@openmrs/esm-patient-common-lib';
 
 /**
  * This button uses the patient chart store and MUST only be used
  * within the patient chart
  */
-const ClinicalFormActionButton: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+const ClinicalFormActionButton: React.FC<PatientChartWorkspaceActionButtonProps> = ({
+  groupProps: { patientUuid },
+}) => {
   const { t } = useTranslation();
-  const { workspaces } = useWorkspaces();
-  const launchFormsWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, clinicalFormsWorkspace);
-
-  const formEntryWorkspaces = workspaces.filter((w) => w.name === formEntryWorkspace);
-  const recentlyOpenedForm = formEntryWorkspaces[0];
-
-  const htmlFormEntryWorkspaces = workspaces.filter((w) => w.name === htmlFormEntryWorkspace);
-  const recentlyOpenedHtmlForm = htmlFormEntryWorkspaces[0];
-
-  const isFormOpen = formEntryWorkspaces?.length >= 1;
-  const isHtmlFormOpen = htmlFormEntryWorkspaces?.length >= 1;
-
-  const launchPatientWorkspaceCb = () => {
-    if (isFormOpen) {
-      launchWorkspace(formEntryWorkspace, {
-        workspaceTitle: recentlyOpenedForm?.additionalProps?.['workspaceTitle'],
-      });
-    }
-    // we aren't currently supporting keeping HTML Form workspaces open, but just in case
-    else if (isHtmlFormOpen) {
-      launchWorkspace(htmlFormEntryWorkspace, {
-        workspaceTitle: recentlyOpenedHtmlForm?.additionalProps?.['workspaceTitle'],
-      });
-    } else {
-      launchFormsWorkspace();
-    }
-  };
+  const startVisitIfNeeded = useStartVisitIfNeeded(patientUuid);
 
   return (
-    <ActionMenuButton
-      getIcon={(props: ComponentProps<typeof DocumentIcon>) => <DocumentIcon {...props} />}
+    <ActionMenuButton2
+      icon={(props: ComponentProps<typeof DocumentIcon>) => <DocumentIcon {...props} />}
       label={t('clinicalForms', 'Clinical forms')}
-      iconDescription={t('clinicalForms', 'Clinical forms')}
-      handler={launchPatientWorkspaceCb}
-      type={'clinical-form'}
+      workspaceToLaunch={{
+        workspaceName: 'clinical-forms-workspace',
+        workspaceProps: {},
+      }}
+      onBeforeWorkspaceLaunch={startVisitIfNeeded}
     />
   );
 };

package/src/clinical-form-action-button.test.tsx

@@ -1,46 +1,47 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { ActionMenuButton, useLayoutType, useWorkspaces } from '@openmrs/esm-framework';
+import { ActionMenuButton2, useLayoutType } from '@openmrs/esm-framework';
 import ClinicalFormActionButton from './clinical-form-action-button.component';
+import { mockPatient } from 'tools';
 
+const mockActionMenuButton = jest.mocked(ActionMenuButton2);
 const mockUseLayoutType = jest.mocked(useLayoutType);
-const mockUseWorkspaces = useWorkspaces as jest.Mock;
-const mockActionMenuButton = jest.mocked(ActionMenuButton);
 
-mockActionMenuButton.mockImplementation(({ handler, label, tagContent }) => (
-  <button onClick={handler}>
+mockActionMenuButton.mockImplementation(({ label, tagContent }) => (
+  <button>
     {tagContent} {label}
   </button>
 ));
 
-mockUseWorkspaces.mockImplementation(() => ({
-  active: true,
-  windowState: 'normal',
-  workspaces: [
-    {
-      canHide: false,
-      name: 'clinical-forms-workspace',
-      title: 'Clinical forms',
-      preferredWindowSize: 'normal',
-      type: 'form',
-    },
-  ],
-  workspaceWindowState: 'normal',
-  prompt: null,
-}));
+jest.mock('@openmrs/esm-patient-common-lib', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-patient-common-lib');
+
+  return {
+    ...originalModule,
+    useStartVisitIfNeeded: jest.fn(() => () => Promise.resolve(true)),
+  };
+});
 
 describe('<ClinicalFormActionButton>', () => {
   test('should display clinical form action button on tablet view', () => {
     mockUseLayoutType.mockReturnValue('tablet');
 
-    render(<ClinicalFormActionButton patientUuid={'some-uuid'} />);
+    render(
+      <ClinicalFormActionButton
+        groupProps={{ patientUuid: mockPatient.id, patient: mockPatient, visitContext: null, mutateVisitContext: null }}
+      />,
+    );
     expect(screen.getByRole('button', { name: /Clinical forms/i })).toBeInTheDocument();
   });
 
   test('should display clinical form action button on desktop view', () => {
     mockUseLayoutType.mockReturnValue('small-desktop');
 
-    render(<ClinicalFormActionButton patientUuid={'some-uuid'} />);
+    render(
+      <ClinicalFormActionButton
+        groupProps={{ patientUuid: mockPatient.id, patient: mockPatient, visitContext: null, mutateVisitContext: null }}
+      />,
+    );
     const clinicalActionButton = screen.getByRole('button', { name: /Form/i });
     expect(clinicalActionButton).toBeInTheDocument();
   });

package/src/config-schema.ts

@@ -123,7 +123,7 @@ export interface FormsSection {
   forms: Array<string>;
 }
 
-export interface ConfigObject {
+export interface FormEntryConfigSchema {
   htmlFormEntryForms: Array<HtmlFormEntryForm>;
   formSections: Array<FormsSection>;
   customFormsUrl: string;

package/src/forms/exported-form-entry.workspace.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import { type Form } from '@openmrs/esm-patient-common-lib';
+import FormEntry from './form-entry.component';
+import { type ExportedClinicalFormsWindowProps } from './exported-forms-dashboard.workspace';
+
+interface FormEntryWorkspaceProps {
+  form: Form;
+  encounterUuid: string;
+}
+
+/**
+ * This workspace is meant for use outside the patient chart.
+ *
+ * @see form-entry.workspace.tsx
+ */
+const ExportedFormEntryWorkspace: React.FC<
+  Workspace2DefinitionProps<FormEntryWorkspaceProps, ExportedClinicalFormsWindowProps, {}>
+> = ({
+  closeWorkspace,
+  workspaceProps: { form, encounterUuid },
+  windowProps: { patient, patientUuid, visitContext, mutateVisitContext },
+}) => {
+  return (
+    <FormEntry
+      form={form}
+      encounterUuid={encounterUuid}
+      patient={patient}
+      patientUuid={patientUuid}
+      visitContext={visitContext}
+      mutateVisitContext={mutateVisitContext}
+      closeWorkspace={closeWorkspace}
+    />
+  );
+};
+
+export default ExportedFormEntryWorkspace;

package/src/forms/exported-forms-dashboard.workspace.tsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import FormsDashboard from './forms-dashboard.component';
+import styles from './forms-dashboard-workspace.scss';
+import { type Form } from '@openmrs/esm-patient-common-lib';
+import { type Visit, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+
+export interface ExportedClinicalFormsWindowProps {
+  formEntryWorkspaceName: string;
+  patient: fhir.Patient;
+  patientUuid: string;
+  visitContext: Visit;
+  mutateVisitContext: () => void;
+}
+
+/**
+ * This workspace is meant for use outside the patient chart.
+ * @see forms-dashboard.workspace.tsx
+ */
+const ExportedFormsDashboardWorkspace: React.FC<
+  Workspace2DefinitionProps<{}, ExportedClinicalFormsWindowProps, {}>
+> = ({ launchChildWorkspace, windowProps: { formEntryWorkspaceName, patient, visitContext } }) => {
+  const { t } = useTranslation();
+  const handleFormOpen = useCallback(
+    (form: Form, encounterUuid: string) => {
+      launchChildWorkspace(formEntryWorkspaceName, {
+        form,
+        encounterUuid,
+      });
+    },
+    [launchChildWorkspace, formEntryWorkspaceName],
+  );
+
+  return (
+    <Workspace2 title={t('clinicalForms', 'Clinical forms')} hasUnsavedChanges={false}>
+      <div className={styles.container}>
+        <FormsDashboard {...{ patient, visitContext, handleFormOpen }} />
+      </div>
+    </Workspace2>
+  );
+};
+
+export default ExportedFormsDashboardWorkspace;

package/src/forms/form-entry.component.tsx

@@ -0,0 +1,138 @@
+import React, { useMemo, useState } from 'react';
+import { useSWRConfig } from 'swr';
+import {
+  ExtensionSlot,
+  useConfig,
+  useConnectivity,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import { type Form, type FormRendererProps, invalidateVisitAndEncounterData } from '@openmrs/esm-patient-common-lib';
+import { useTranslation } from 'react-i18next';
+import { type FormEntryConfigSchema } from '../config-schema';
+import { toHtmlForm } from './form-entry.resources';
+import HtmlFormEntryWrapper from '../htmlformentry/html-form-entry-wrapper.component';
+
+export interface FormEntryProps {
+  form: Form;
+  encounterUuid: string;
+  patientUuid;
+  patient;
+  visitContext;
+  mutateVisitContext;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
+}
+
+const FormEntry: React.FC<FormEntryProps> = ({
+  form,
+  encounterUuid,
+  patientUuid,
+  patient,
+  visitContext,
+  mutateVisitContext,
+  closeWorkspace,
+}) => {
+  const formUuid = form.uuid;
+  const visitStartDatetime = visitContext?.startDatetime;
+  const visitStopDatetime = visitContext?.stopDatetime;
+  const visitTypeUuid = visitContext?.visitType.uuid;
+  const visitUuid = visitContext?.uuid;
+  const { htmlFormEntryForms } = useConfig<FormEntryConfigSchema>();
+  const htmlForm = toHtmlForm(form, htmlFormEntryForms);
+  const isHtmlForm = htmlForm != null;
+  const isOnline = useConnectivity();
+  const { mutate: globalMutate } = useSWRConfig();
+  const { t } = useTranslation();
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const state = useMemo(
+    () => ({
+      view: 'form',
+      formUuid: formUuid ?? null,
+      visitUuid: visitUuid ?? visitContext?.uuid ?? null,
+      visitTypeUuid: visitTypeUuid ?? visitContext?.visitType?.uuid ?? null,
+      visitStartDatetime: visitStartDatetime ?? visitContext?.startDatetime ?? null,
+      visitStopDatetime: visitStopDatetime ?? visitContext?.stopDatetime ?? null,
+      isOffline: !isOnline,
+      patientUuid: patientUuid ?? null,
+      patient,
+      encounterUuid: encounterUuid ?? null,
+      closeWorkspace: () => {
+        return closeWorkspace();
+      },
+      closeWorkspaceWithSavedChanges: () => {
+        // Update current visit data for critical components
+        mutateVisitContext?.();
+
+        // Also invalidate visit history and encounter tables since form submission may create/update encounters
+        invalidateVisitAndEncounterData(globalMutate, patientUuid);
+
+        return closeWorkspace({ discardUnsavedChanges: true, closeWindow: true });
+      },
+      promptBeforeClosing: (func) => setHasUnsavedChanges(func()),
+    }),
+    [
+      closeWorkspace,
+      visitContext?.startDatetime,
+      visitContext?.stopDatetime,
+      visitContext?.uuid,
+      visitContext?.visitType?.uuid,
+      encounterUuid,
+      formUuid,
+      globalMutate,
+      isOnline,
+      mutateVisitContext,
+      patient,
+      patientUuid,
+      setHasUnsavedChanges,
+      visitStartDatetime,
+      visitStopDatetime,
+      visitTypeUuid,
+      visitUuid,
+    ],
+  ) satisfies FormRendererProps;
+
+  const htmlFormEntryUrl = useMemo(() => {
+    if (!htmlForm) {
+      return null;
+    }
+    const uiPage = encounterUuid ? htmlForm.formEditUiPage : htmlForm.formUiPage;
+    const url = `${window.openmrsBase}/htmlformentryui/htmlform/${uiPage}.page?`;
+    const searchParams = new URLSearchParams();
+    searchParams.append('patientId', patientUuid);
+    if (visitUuid) {
+      searchParams.append('visitId', visitUuid);
+    }
+    if (encounterUuid) {
+      searchParams.append('encounterId', encounterUuid);
+    }
+    if (htmlForm.formUiResource) {
+      searchParams.append('definitionUiResource', htmlForm.formUiResource);
+    } else {
+      searchParams.append('formUuid', htmlForm.formUuid);
+    }
+    searchParams.append('returnUrl', 'post-message:close-workspace');
+    return url + searchParams;
+  }, [encounterUuid, htmlForm, patientUuid, visitUuid]);
+
+  const showFormAndLoadedData = form && patientUuid;
+
+  return (
+    <Workspace2 title={form.display ?? t('clinicalForm', 'Clinical form')} hasUnsavedChanges={hasUnsavedChanges}>
+      <div>
+        <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
+        {showFormAndLoadedData &&
+          (isHtmlForm ? (
+            <HtmlFormEntryWrapper
+              src={htmlFormEntryUrl}
+              closeWorkspaceWithSavedChanges={() => closeWorkspace({ discardUnsavedChanges: true })}
+            />
+          ) : (
+            <ExtensionSlot key={state.formUuid} name="form-widget-slot" state={state} />
+          ))}
+      </div>
+    </Workspace2>
+  );
+};
+
+export default FormEntry;

package/src/forms/form-entry.resources.ts

@@ -0,0 +1,37 @@
+import { type HtmlFormEntryForm } from '@openmrs/esm-patient-common-lib';
+import { type Form } from '../types';
+
+const formEngineResourceName = 'formEngine';
+const htmlformentryFormEngine = 'htmlformentry';
+const uiStyleResourceName = 'uiStyle';
+const uiStyleSimple = 'simple';
+
+/**
+ * For a given form , check if it is an HTML form. If it is, return the HtmlFormEntryForm object,
+ * otherwise return null
+ * @param form
+ * @param htmlFormEntryForms A list of HTML forms configured in @esm-patient-forms-app's config
+ *
+ * @returns
+ */
+export function toHtmlForm(form: Form, htmlFormEntryForms: Array<HtmlFormEntryForm>): HtmlFormEntryForm {
+  const isHtmlForm =
+    htmlFormEntryForms?.some((hfeForm) => hfeForm.formUuid === form.uuid) ||
+    form.resources?.some((resource) => {
+      return resource.name === formEngineResourceName && resource.valueReference === htmlformentryFormEngine;
+    });
+  if (isHtmlForm) {
+    const hfeForm = htmlFormEntryForms?.find((f) => f.formUuid === form.uuid);
+    const simple = form.resources?.some((r) => r.name === uiStyleResourceName && r.valueReference === uiStyleSimple);
+
+    return {
+      formUuid: form.uuid,
+      formName: hfeForm?.formName ?? form.display ?? form.name,
+      formUiResource: hfeForm?.formUiResource,
+      formUiPage: hfeForm?.formUiPage ?? (simple ? 'enterHtmlFormWithSimpleUi' : 'enterHtmlFormWithStandardUi'),
+      formEditUiPage: hfeForm?.formEditUiPage ?? (simple ? 'editHtmlFormWithSimpleUi' : 'editHtmlFormWithStandardUi'),
+    };
+  } else {
+    return null;
+  }
+}

package/src/forms/form-entry.test.tsx

@@ -1,39 +1,25 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { BehaviorSubject } from 'rxjs';
-import { ExtensionSlot, useConnectivity, useFeatureFlag } from '@openmrs/esm-framework';
+import { ExtensionSlot, useConnectivity } from '@openmrs/esm-framework';
 import { mockPatient } from 'tools';
-import FormEntry from './form-entry.workspace';
+import FormEntry, { type FormEntryProps } from './form-entry.component';
 
-const mockCurrentVisit = {
-  uuid: '17f512b4-d264-4113-a6fe-160cb38cb46e',
-  encounters: [],
-  patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
-  visitType: {
-    uuid: '7b0f5697-27e3-40c4-8bae-f4049abfb4ed',
-    display: 'Facility Visit',
+const defaultProps: FormEntryProps = {
+  form: {
+    uuid: 'some-form-uuid',
+    name: '',
+    version: '',
+    published: false,
+    retired: false,
+    resources: [],
   },
-  attributes: [],
-  startDatetime: '2021-03-16T08:16:00.000+0000',
-  stopDatetime: null,
-  location: {
-    uuid: '6351fcf4-e311-4a19-90f9-35667d99a8af',
-    name: 'Registration Desk',
-    display: 'Registration Desk',
-  },
-};
-
-const testProps = {
-  closeWorkspace: jest.fn(),
-  closeWorkspaceWithSavedChanges: jest.fn(),
-  promptBeforeClosing: jest.fn(),
+  encounterUuid: 'some-encounter-uuid',
   patientUuid: mockPatient.id,
   patient: mockPatient,
-  formInfo: { formUuid: 'some-form-uuid' },
-  mutateForm: jest.fn(),
-  setTitle: jest.fn(),
-  visitContext: mockCurrentVisit,
+  visitContext: null,
   mutateVisitContext: null,
+  closeWorkspace: jest.fn(),
 };
 
 const mockFormEntrySub = jest.fn();
@@ -49,7 +35,7 @@ describe('FormEntry', () => {
     );
     mockExtensionSlot.mockImplementation((ext) => ext.name as any);
 
-    render(<FormEntry {...testProps} />);
+    render(<FormEntry {...defaultProps} />);
 
     await screen.findByText(/form-widget-slot/);
     expect(screen.getByText(/form-widget-slot/)).toBeInTheDocument();

package/src/forms/form-entry.workspace.tsx

@@ -1,108 +1,34 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useSWRConfig } from 'swr';
-import { ExtensionSlot, useConnectivity } from '@openmrs/esm-framework';
-import {
-  clinicalFormsWorkspace,
-  invalidateVisitAndEncounterData,
-  type DefaultPatientWorkspaceProps,
-  type FormEntryProps,
-} from '@openmrs/esm-patient-common-lib';
+import React from 'react';
+import { type Form, type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
+import FormEntry from './form-entry.component';
 
-interface FormEntryComponentProps extends DefaultPatientWorkspaceProps {
-  mutateForm: () => void;
-  formInfo: FormEntryProps;
-  clinicalFormsWorkspaceName?: string;
+interface FormEntryWorkspaceProps {
+  form: Form;
+  encounterUuid: string;
 }
 
-const FormEntry: React.FC<FormEntryComponentProps> = ({
-  patientUuid,
-  patient,
-  clinicalFormsWorkspaceName = clinicalFormsWorkspace,
+/**
+ * This workspace renders a React or HTML form to be filled out for a given patient.
+ *
+ * This workspace must only be used within the patient chart.
+ * @see exported-form-entry.workspace.tsx
+ */
+const FormEntryWorkspace: React.FC<PatientWorkspace2DefinitionProps<FormEntryWorkspaceProps, {}>> = ({
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
-  mutateForm,
-  formInfo,
-  visitContext,
-  mutateVisitContext,
+  workspaceProps: { form, encounterUuid },
+  groupProps: { patientUuid, patient, visitContext, mutateVisitContext },
 }) => {
-  const { encounterUuid, formUuid, visitStartDatetime, visitStopDatetime, visitTypeUuid, visitUuid, additionalProps } =
-    formInfo || {};
-  const [showForm, setShowForm] = useState(true);
-  const isOnline = useConnectivity();
-  const { mutate: globalMutate } = useSWRConfig();
-
-  const state = useMemo(
-    () => ({
-      view: 'form',
-      formUuid: formUuid ?? null,
-      visitUuid: visitUuid ?? visitContext?.uuid ?? null,
-      visitTypeUuid: visitTypeUuid ?? visitContext?.visitType?.uuid ?? null,
-      visitStartDatetime: visitStartDatetime ?? visitContext?.startDatetime ?? null,
-      visitStopDatetime: visitStopDatetime ?? visitContext?.stopDatetime ?? null,
-      isOffline: !isOnline,
-      patientUuid: patientUuid ?? null,
-      patient,
-      encounterUuid: encounterUuid ?? null,
-      closeWorkspace: () => {
-        typeof mutateForm === 'function' && mutateForm();
-        closeWorkspace();
-      },
-      closeWorkspaceWithSavedChanges: () => {
-        typeof mutateForm === 'function' && mutateForm();
-        // Update current visit data for critical components
-        mutateVisitContext?.();
-
-        // Also invalidate visit history and encounter tables since form submission may create/update encounters
-        invalidateVisitAndEncounterData(globalMutate, patientUuid);
-
-        closeWorkspaceWithSavedChanges();
-      },
-      promptBeforeClosing,
-      additionalProps,
-      clinicalFormsWorkspaceName,
-    }),
-    [
-      additionalProps,
-      clinicalFormsWorkspaceName,
-      closeWorkspace,
-      closeWorkspaceWithSavedChanges,
-      visitContext?.startDatetime,
-      visitContext?.stopDatetime,
-      visitContext?.uuid,
-      visitContext?.visitType?.uuid,
-      encounterUuid,
-      formUuid,
-      globalMutate,
-      isOnline,
-      mutateVisitContext,
-      mutateForm,
-      patient,
-      patientUuid,
-      promptBeforeClosing,
-      visitStartDatetime,
-      visitStopDatetime,
-      visitTypeUuid,
-      visitUuid,
-    ],
-  );
-
-  // FIXME: This logic triggers a reload of the form when the formUuid changes. It's a workaround for the fact that the form doesn't reload when the formUuid changes.
-  useEffect(() => {
-    if (state.formUuid) {
-      setShowForm(false);
-      setTimeout(() => {
-        setShowForm(true);
-      });
-    }
-  }, [state]);
-
   return (
-    <div>
-      <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
-      {showForm && formInfo && patientUuid && patient && <ExtensionSlot name="form-widget-slot" state={state} />}
-    </div>
+    <FormEntry
+      form={form}
+      encounterUuid={encounterUuid}
+      patient={patient}
+      patientUuid={patientUuid}
+      visitContext={visitContext}
+      mutateVisitContext={mutateVisitContext}
+      closeWorkspace={closeWorkspace}
+    />
   );
 };
 
-export default FormEntry;
+export default FormEntryWorkspace;