(feat) O3-3818: Add clinical forms workspace to Ward app sidebar (#1319)

* feat: add clinical forms to ward app

* feat: add formentryworkspace name to props

* feat: add clinical forms

* (feat) add related workspace names props on clinical forms dashboard workspace

* (fix) package.json

packages/esm-ward-app/src/action-menu-buttons/clinical-forms-workspace-siderail.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Document } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { ActionMenuButton, launchWorkspace, useWorkspaces } from '@openmrs/esm-framework';
+import type { WardPatientWorkspaceProps } from '../types';
+
+const ClinicalFormsWorkspaceSideRailIcon: React.FC = () => {
+  const { t } = useTranslation();
+  const { workspaces } = useWorkspaces();
+
+  const formEntryWorkspaces = workspaces.filter((w) => w.name === 'ward-patient-form-entry-workspace');
+  const recentlyOpenedForm = formEntryWorkspaces[0];
+
+  const isClinicalFormOpen = formEntryWorkspaces?.length >= 1;
+
+  const launchPatientWorkspaceCb = () => {
+    if (isClinicalFormOpen) {
+      launchWorkspace('ward-patient-form-entry-workspace', {
+        workspaceTitle: recentlyOpenedForm?.additionalProps?.['workspaceTitle'],
+      });
+    } else {
+      launchWorkspace<WardPatientWorkspaceProps>('ward-patient-clinical-forms-workspace');
+    }
+  };
+
+  return (
+    <ActionMenuButton
+      getIcon={(props) => <Document {...props} />}
+      label={t('clinicalForms', 'Clinical forms')}
+      iconDescription={t('clinicalForms', 'Clinical forms')}
+      handler={launchPatientWorkspaceCb}
+      type="ward-patient-clinical-form"
+    />
+  );
+};
+
+export default ClinicalFormsWorkspaceSideRailIcon;

packages/esm-ward-app/src/index.ts

@@ -107,6 +107,16 @@ export const patientDischargeWorkspaceSideRailIcon = getAsyncLifecycle(
   options,
 );
 
+export const patientClinicalFormsWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-clinical-forms-workspace/patient-clinical-forms.workspace'),
+  options,
+);
+
+export const clinicalFormWorkspaceSideRailIcon = getAsyncLifecycle(
+  () => import('./action-menu-buttons/clinical-forms-workspace-siderail.component'),
+  options,
+);
+
 export function startupApp() {
   registerBreadcrumbs([]);
   defineConfigSchema(moduleName, configSchema);

packages/esm-ward-app/src/routes.json

@@ -55,6 +55,11 @@
       "slot": "action-menu-ward-patient-items-slot",
       "component": "patientDischargeWorkspaceSideRailIcon"
     },
+    {
+      "name": "clinical-forms-workspace-siderail-button",
+      "component": "clinicalFormWorkspaceSideRailIcon",
+      "slot": "action-menu-ward-patient-items-slot"
+    },
     {
       "component": "admissionRequestNoteRowExtension",
       "name": "admission-request-note-card-row",
@@ -122,6 +127,15 @@
       "type": "ward-patient-discharge",
       "hasOwnSidebar": true,
       "sidebarFamily": "ward-patient"
+    },
+    {
+      "name": "ward-patient-clinical-forms-workspace",
+      "component": "patientClinicalFormsWorkspace",
+      "title": "clinicalForms",
+      "type": "ward-patient-clinical-forms",
+      "hasOwnSidebar": true,
+      "sidebarFamily": "ward-patient",
+      "width": "wider"
     }
   ]
 }

packages/esm-ward-app/src/ward-workspace/patient-clinical-forms-workspace/patient-clinical-forms.workspace.tsx

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import type { WardPatientWorkspaceProps } from '../../types';
+
+const WardPatientClinicalFormsWorkspace: React.FC<WardPatientWorkspaceProps> = (props) => {
+  const { wardPatient, ...restWorkspaceProps } = props;
+  const patientUuid = wardPatient?.patient?.uuid;
+
+  const clinicalFormsExtensionState = useMemo(
+    () => ({
+      patientUuid,
+      clinicalFormsWorkspaceName: 'ward-patient-clinical-forms-workspace',
+      formEntryWorkspaceName: 'ward-patient-form-entry-workspace',
+      htmlFormEntryWorkspaceName: 'ward-patient-html-form-entry-workspace',
+      ...restWorkspaceProps,
+    }),
+    [patientUuid, restWorkspaceProps],
+  );
+
+  return <ExtensionSlot name="ward-patient-clinical-forms-workspace-slot" state={clinicalFormsExtensionState} />;
+};
+
+export default WardPatientClinicalFormsWorkspace;

packages/esm-ward-app/translations/en.json

@@ -12,6 +12,7 @@
   "capacity": "Capacity",
   "capacityMetricValue": "{{ metricValue }} %",
   "chooseAnOption": "Choose an option",
+  "clinicalForms": "Clinical forms",
   "clinicalNoteLabel": "Write your notes",
   "discharge": "Discharge",
   "empty": "Empty",