(feat) O3-3818: Extend clinical forms workspace (openmrs#2017)

* (feat) extend clinical forms workspace

* (fix) fix failing test

packages/esm-form-engine-app/src/form-renderer/form-error.component.tsx

@@ -1,19 +1,23 @@
 import React from 'react';
 import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { clinicalFormsWorkspace, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import styles from './form-error.scss';
 
 interface FormErrorProps {
   closeWorkspace: () => void;
+  clinicalFormsWorkspaceName?: string;
 }
 
-const FormError: React.FC<FormErrorProps> = ({ closeWorkspace }) => {
+const FormError: React.FC<FormErrorProps> = ({
+  closeWorkspace,
+  clinicalFormsWorkspaceName = clinicalFormsWorkspace,
+}) => {
   const { t } = useTranslation();
 
   const handleOpenFormList = () => {
     closeWorkspace();
-    launchPatientWorkspace('clinical-forms-workspace');
+    launchPatientWorkspace(clinicalFormsWorkspaceName);
   };
 
   return (

packages/esm-form-engine-app/src/form-renderer/form-error.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { clinicalFormsWorkspace, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import FormError from './form-error.component';
 
 const mocklaunchPatientWorkspace = jest.mocked(launchPatientWorkspace);
@@ -46,6 +46,6 @@ describe('FormError', () => {
     await user.click(link);
 
     expect(closeWorkspace).toHaveBeenCalled();
-    expect(mocklaunchPatientWorkspace).toHaveBeenCalledWith('clinical-forms-workspace');
+    expect(mocklaunchPatientWorkspace).toHaveBeenCalledWith(clinicalFormsWorkspace);
   });
 });

packages/esm-form-engine-app/src/form-renderer/form-renderer.component.tsx

@@ -3,18 +3,22 @@ import { useTranslation } from 'react-i18next';
 import { InlineLoading } from '@carbon/react';
 import { FormEngine } from '@openmrs/esm-form-engine-lib';
 import { showModal, type Visit } from '@openmrs/esm-framework';
-import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import {
+  clinicalFormsWorkspace,
+  type DefaultPatientWorkspaceProps,
+  launchPatientWorkspace,
+} from '@openmrs/esm-patient-common-lib';
 import FormError from './form-error.component';
 import useFormSchema from '../hooks/useFormSchema';
 import styles from './form-renderer.scss';
-import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 
 interface FormRendererProps extends DefaultPatientWorkspaceProps {
   additionalProps?: Record<string, any>;
   encounterUuid?: string;
   formUuid: string;
   patientUuid: string;
   visit?: Visit;
+  clinicalFormsWorkspaceName?: string;
 }
 
 const FormRenderer: React.FC<FormRendererProps> = ({
@@ -26,6 +30,7 @@ const FormRenderer: React.FC<FormRendererProps> = ({
   patientUuid,
   promptBeforeClosing,
   visit,
+  clinicalFormsWorkspaceName = clinicalFormsWorkspace,
 }) => {
   const { t } = useTranslation();
   const { schema, error, isLoading } = useFormSchema(formUuid);
@@ -34,8 +39,8 @@ const FormRenderer: React.FC<FormRendererProps> = ({
 
   const handleCloseForm = useCallback(() => {
     closeWorkspace();
-    !encounterUuid && openClinicalFormsWorkspaceOnFormClose && launchPatientWorkspace('clinical-forms-workspace');
-  }, [closeWorkspace, encounterUuid, openClinicalFormsWorkspaceOnFormClose]);
+    !encounterUuid && openClinicalFormsWorkspaceOnFormClose && launchPatientWorkspace(clinicalFormsWorkspaceName);
+  }, [closeWorkspace, encounterUuid, openClinicalFormsWorkspaceOnFormClose, clinicalFormsWorkspaceName]);
 
   const handleConfirmQuestionDeletion = useCallback(() => {
     return new Promise<void>((resolve, reject) => {

packages/esm-patient-forms-app/src/clinical-form-action-button.component.tsx

@@ -1,13 +1,18 @@
 import React, { type ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionMenuButton, DocumentIcon, useWorkspaces } from '@openmrs/esm-framework';
-import { launchPatientWorkspace, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
-import { formEntryWorkspace, htmlFormEntryWorkspace } from './constants';
+import {
+  clinicalFormsWorkspace,
+  formEntryWorkspace,
+  htmlFormEntryWorkspace,
+  launchPatientWorkspace,
+  useLaunchWorkspaceRequiringVisit,
+} from '@openmrs/esm-patient-common-lib';
 
 const ClinicalFormActionButton: React.FC = () => {
   const { t } = useTranslation();
   const { workspaces } = useWorkspaces();
-  const launchFormsWorkspace = useLaunchWorkspaceRequiringVisit('clinical-forms-workspace');
+  const launchFormsWorkspace = useLaunchWorkspaceRequiringVisit(clinicalFormsWorkspace);
 
   const formEntryWorkspaces = workspaces.filter((w) => w.name === formEntryWorkspace);
   const recentlyOpenedForm = formEntryWorkspaces[0];

packages/esm-patient-forms-app/src/constants.ts

@@ -6,7 +6,3 @@ export const customEncounterRepresentation = `custom:(uuid,encounterDatetime,enc
 
 export const formEncounterUrl = `${restBaseUrl}/form?v=custom:${customFormRepresentation}`;
 export const formEncounterUrlPoc = `${restBaseUrl}/form?v=custom:${customFormRepresentation}&q=poc`;
-
-export const clinicalFormsWorkspace = 'clinical-forms-workspace';
-export const formEntryWorkspace = 'patient-form-entry-workspace';
-export const htmlFormEntryWorkspace = 'patient-html-form-entry-workspace';

packages/esm-patient-forms-app/src/forms/form-entry.workspace.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { ExtensionSlot, useConnectivity, usePatient } from '@openmrs/esm-framework';
 import {
+  clinicalFormsWorkspace,
   type DefaultPatientWorkspaceProps,
   type FormEntryProps,
   useVisitOrOfflineVisit,
@@ -9,10 +10,12 @@ import {
 interface FormEntryComponentProps extends DefaultPatientWorkspaceProps {
   mutateForm: () => void;
   formInfo: FormEntryProps;
+  clinicalFormsWorkspaceName?: string;
 }
 
 const FormEntry: React.FC<FormEntryComponentProps> = ({
   patientUuid,
+  clinicalFormsWorkspaceName = clinicalFormsWorkspace,
   closeWorkspace,
   closeWorkspaceWithSavedChanges,
   promptBeforeClosing,
@@ -47,6 +50,7 @@ const FormEntry: React.FC<FormEntryComponentProps> = ({
       },
       promptBeforeClosing,
       additionalProps,
+      clinicalFormsWorkspaceName,
     }),
     [
       formUuid,
@@ -67,6 +71,7 @@ const FormEntry: React.FC<FormEntryComponentProps> = ({
       closeWorkspaceWithSavedChanges,
       promptBeforeClosing,
       additionalProps,
+      clinicalFormsWorkspaceName,
     ],
   );
 

packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { Tile } from '@carbon/react';
-import { useConfig, useConnectivity, usePatient, ResponsiveWrapper } from '@openmrs/esm-framework';
+import { ResponsiveWrapper, useConfig, useConnectivity, usePatient } from '@openmrs/esm-framework';
 import {
   type DefaultPatientWorkspaceProps,
   EmptyDataIllustration,
@@ -13,31 +13,53 @@ import styles from './forms-dashboard.scss';
 import { useForms } from '../hooks/use-forms';
 import { useTranslation } from 'react-i18next';
 
-const FormsDashboard: React.FC<DefaultPatientWorkspaceProps> = () => {
+interface FormsDashboardProps extends DefaultPatientWorkspaceProps {
+  clinicalFormsWorkspaceName?: string;
+  formEntryWorkspaceName?: string;
+  htmlFormEntryWorkspaceName?: string;
+}
+
+const FormsDashboard: React.FC<FormsDashboardProps> = ({
+  patientUuid,
+  clinicalFormsWorkspaceName,
+  formEntryWorkspaceName,
+  htmlFormEntryWorkspaceName,
+}) => {
   const { t } = useTranslation();
   const config = useConfig<ConfigObject>();
   const isOnline = useConnectivity();
   const htmlFormEntryForms = config.htmlFormEntryForms;
-  const { patient, patientUuid } = usePatient();
+  const { patient, patientUuid: fetchedPatientUuid } = usePatient(patientUuid);
   const { data: forms, error, mutateForms } = useForms(patientUuid, undefined, undefined, !isOnline, config.orderBy);
   const { currentVisit } = useVisitOrOfflineVisit(patientUuid);
 
   const handleFormOpen = useCallback(
     (formUuid: string, encounterUuid: string, formName: string) => {
       launchFormEntryOrHtmlForms(
         htmlFormEntryForms,
-        patientUuid,
+        fetchedPatientUuid,
         formUuid,
-        currentVisit.uuid,
+        currentVisit?.uuid,
         encounterUuid,
         formName,
-        currentVisit.visitType.uuid,
-        currentVisit.startDatetime,
-        currentVisit.stopDatetime,
+        currentVisit?.visitType.uuid,
+        currentVisit?.startDatetime,
+        currentVisit?.stopDatetime,
         mutateForms,
+        clinicalFormsWorkspaceName,
+        formEntryWorkspaceName,
+        htmlFormEntryWorkspaceName,
       );
     },
-    [currentVisit, htmlFormEntryForms, mutateForms, patientUuid],
+    [
+      currentVisit,
+      htmlFormEntryForms,
+      mutateForms,
+      fetchedPatientUuid,
+      clinicalFormsWorkspaceName,
+      formEntryWorkspaceName,
+      htmlFormEntryWorkspaceName,
+    ],
   );
 
   const sections = useMemo(() => {

packages/esm-patient-forms-app/src/index.ts

@@ -39,6 +39,10 @@ export const patientHtmlFormEntryWorkspace = getAsyncLifecycle(
 
 // t('clinicalForms', 'Clinical forms')
 export const clinicalFormsWorkspace = getAsyncLifecycle(() => import('./forms/forms-dashboard.workspace'), options);
+export const clinicalFormsWorkspaceExtension = getAsyncLifecycle(
+  () => import('./forms/forms-dashboard.workspace'),
+  options,
+);
 
 export const clinicalFormActionMenu = getSyncLifecycle(clinicalFormActionMenuComponent, options);
 

packages/esm-patient-forms-app/src/routes.json

@@ -37,6 +37,11 @@
       "offline": true,
       "online": true,
       "order": 2
+    },
+    {
+      "name": "clinical-forms-workspaceExtension",
+      "component": "clinicalFormsWorkspaceExtension",
+      "slot": "ward-patient-clinical-forms-workspace-slot"
     }
   ],
   "workspaces": [
@@ -49,6 +54,17 @@
       "canHide": true,
       "width": "wider"
     },
+    {
+      "name": "ward-patient-form-entry-workspace",
+      "title": "clinicalForm",
+      "component": "patientFormEntryWorkspace",
+      "type": "ward-patient-clinical-form",
+      "canMaximize": true,
+      "canHide": false,
+      "width": "wider",
+      "hasOwnSidebar": true,
+      "sidebarFamily": "ward-patient"
+    },
     {
       "name": "patient-html-form-entry-workspace",
       "title": "clinicalForm",
@@ -58,6 +74,17 @@
       "canHide": false,
       "width": "extra-wide"
     },
+    {
+      "name": "ward-patient-html-form-entry-workspace",
+      "title": "clinicalForm",
+      "component": "patientHtmlFormEntryWorkspace",
+      "type": "ward-patient-clinical-form",
+      "canMaximize": true,
+      "canHide": false,
+      "width": "extra-wide",
+      "hasOwnSidebar": true,
+      "sidebarFamily": "ward-patient"
+    },
     {
       "name": "clinical-forms-workspace",
       "title": "clinicalForms",