Update new-visits-widget with work in main (#1850)

* (feat) O3-3156: Submitting the start visit form should mutate appointments (#1825)

* (fix) O3-2852: Fix the viewport size of the Start Visit form on tablet (#1765)

* Overlapping issue fixed in visit-form

* Make viewport height responsive - different values for desktop and tablet

---------

Co-authored-by: Mutesasira Moses <[email protected]>
Co-authored-by: Dennis Kigen <[email protected]>

* (refactor) O3-2626: Reuse useAllowedFileExtensions hook from Common Lib (#1827)

(refactor) Reuse allowedFileExtensions hook from Common Lib

* (feat) O3-3158: Conditionally render Patient Header in the Start Visit form (#1823)

* (feat) O3-3158: Visit Form should support (optionally) rendering Patient Header

* (feat) O3-3158: Visit Form should support (optionally) rendering Patient Header

---------

Co-authored-by: Dennis Kigen <[email protected]>

* (chore) Bump form-engine lib (#1828)

Bump form-engine lib

* (chore) Bump form-engine lib (#1829)

Bump form-engine lib

* (fix) Widen range to detect "current" data entry

* (fix) O3-3158: Follow-up commit fixing patientUuid sometimes undefined (#1831)

* (feat) O3 3128: Add extension slots to lab and drug order forms (#1818)

* (feat) Add slots to labs and drug form

* O3-3128 (feat) Enhance lab, orders and dispensing form with addition slot

* Fixup

---------

Co-authored-by: Dennis Kigen <[email protected]>

* (chore) Bump RFE version (#1833)

* Bump RFE version

* Update to next

* (fix) O3-3196: Fix diagnoses tags display on tablet (#1834)

* (fix) O3-3195: Fix rendering logic for the weight tile (#1835)

* (fix) return encounter type uuid from encounter type object (#1836)

return uuid from encounter type object

* (chore) Bump React form engine and yarn (#1837)

* (chore) Release v8.0.0 (#1839)

* (feat) O3-2430: User should be able to look up frequency in dropdown by abbreviation (#1767)

Co-authored-by: Dennis Kigen <[email protected]>
Co-authored-by: Ian <[email protected]>

* (chore) Release v8.0.1 (#1841)

Co-authored-by: Dennis Kigen <[email protected]>

* (chore) Bump react and related types (#1842)

* (chore) Bump react and related types

* Fixup

* Bump test deps to remove warnings

* (fix) O3-3158: Restore abortControllers

* Revert "(fix) O3-3158: Restore abortControllers"

This reverts commit 0895e27.

* (fix) O3-3158: Restore abortControllers (#1843)

* (chore) Bump react form engine

* (fix) O3-3175: Remove Breadcrumbs menu from Patient Chart (#1832)

* (fix)- O3-3175 Remove Breadcrumbs

* Remove translation strings

* Remove more occurrences of breadcrumbs

---------

Co-authored-by: Dennis Kigen <[email protected]>

* (feat) Update custom representation to match required properties for encounter observation (#1845)

* Make attachment upload modal span full-width

* (chore) Bump react form engine (#1846)

* (feat) O3-2626: Add the ability to upload multiple images in the Visit Note form (#1826)

Co-authored-by: Dennis Kigen <[email protected]>

* (fix) O3-3284: Display correctly formatted patient name throughout patient chart apps (#1849)

* Display formatted patient name in visit-header and patient-details-tile components

* Display formatted patient name in patient-banner component.

* Display formatted patient name in esm-patient-labs-app

* Display formatted patient name in esm-patient-medications-app

* Display formatted patient name in esm-patient-orders-app

* Display formatted patient name in esm-patient-vitals-app

* Bump core tooling

* (feat) O3-3165: Add confirmation modal when deleting repeat question (#1840)

* (feat): Add confirmation modal when deleting repeat question

* (refactor): register modal as extension

* (refactor): change modal registration name

* Bump form engine and core tooling

---------

Co-authored-by: Dennis Kigen <[email protected]>

---------

Co-authored-by: Mark Goodrich <[email protected]>
Co-authored-by: Madhu Lokesh <[email protected]>
Co-authored-by: Mutesasira Moses <[email protected]>
Co-authored-by: Dennis Kigen <[email protected]>
Co-authored-by: Samuel Male <[email protected]>
Co-authored-by: Ian <[email protected]>
Co-authored-by: Ian <[email protected]>
Co-authored-by: Donald Kibet <[email protected]>
Co-authored-by: Jamie Arodi <[email protected]>
Co-authored-by: Thembo Jonathan <[email protected]>
Co-authored-by: Piyush Mishra <[email protected]>
Co-authored-by: Vineet Sharma <[email protected]>
Co-authored-by: Bhargav kodali <[email protected]>
Co-authored-by: jwnasambu <[email protected]>
Co-authored-by: Gavin Falconer <[email protected]>
Co-authored-by: Nethmi Rodrigo <[email protected]>

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.1.cjs
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

README.md

@@ -133,16 +133,13 @@ yarn
 The patient chart consists of the following parts:
 
 - Navigation menu
-- Breadcrumbs menu
 - Patient header
 - Chart review / Dashboards
 - Workspace
 - Side menu
 
 The **navigation menu** lives on the left side of the screen and provides links to dashboards in the patient chart.
 
-The **breadcrumbs menu** gets shown at the top of the page under the navigation bar. It shows the user their current location relative to the information architecture and helps them quickly navigate to a parent level or previous step.
-
 The **patient header** contains the [patient banner](packages/esm-patient-banner-app/README.md). Uninvasive notifications also appear in this area following actions such as form submissions.
 
 The **chart review** area is the main part of the screen. It displays whatever dashboard is active.

e2e/specs/drug-orders.spec.ts

@@ -137,7 +137,25 @@ test('Record, edit and discontinue a drug order', async ({ page }) => {
   });
 
   await test.step('And I change the frequency to `Twice daily`', async () => {
-    await page.getByPlaceholder(/frequency/i).click();
+    await page.getByPlaceholder(/frequency/i).clear();
+    await page.getByText('Twice daily', { exact: true }).click();
+  });
+
+  await test.step('And I set the frequency to `q12`', async () => {
+    await page.getByPlaceholder(/frequency/i).clear();
+    await page.getByPlaceholder(/frequency/i).fill('q12');
+    await page.getByText('Every twelve hours', { exact: true }).click();
+  });
+
+  await test.step('And I set the frequency to `od`', async () => {
+    await page.getByPlaceholder(/frequency/i).clear();
+    await page.getByPlaceholder(/frequency/i).fill('od');
+    await page.getByText('Once daily', { exact: true }).click();
+  });
+
+  await test.step('And I set the frequency to `bd`', async () => {
+    await page.getByPlaceholder(/frequency/i).clear();
+    await page.getByPlaceholder(/frequency/i).fill('bd');
     await page.getByText('Twice daily', { exact: true }).click();
   });
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openmrs/esm-patient-chart",
   "private": true,
-  "version": "7.1.0",
+  "version": "8.0.1",
   "workspaces": [
     "packages/*"
   ],
@@ -15,21 +15,28 @@
     "postinstall": "husky install",
     "test-e2e": "playwright test"
   },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.1",
+    "classnames": "^2.3.2",
+    "react-hook-form": "^7.46.2",
+    "react-to-print": "^2.14.13",
+    "zod": "^3.22.2"
+  },
   "devDependencies": {
     "@openmrs/esm-framework": "next",
     "@playwright/test": "1.44.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.89",
     "@swc/jest": "^0.2.29",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
     "@types/fhir": "^0.0.31",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.9",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "babel-preset-minify": "^0.5.2",
@@ -53,8 +60,8 @@
     "lodash": "^4.17.21",
     "openmrs": "next",
     "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.16.0",
     "rxjs": "^7.8.0",
@@ -73,12 +80,5 @@
   "resolutions": {
     "sass": "^1.54.3"
   },
-  "packageManager": "[email protected]",
-  "dependencies": {
-    "@hookform/resolvers": "^3.3.1",
-    "classnames": "^2.3.2",
-    "react-hook-form": "^7.46.2",
-    "react-to-print": "^2.14.13",
-    "zod": "^3.22.2"
-  }
+  "packageManager": "[email protected]"
 }

packages/esm-form-engine-app/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@openmrs/esm-form-engine-app",
-  "version": "7.1.0",
+  "version": "8.0.1",
   "license": "MPL-2.0",
-  "description": "Forms engine microfrontend for the OpenMRS SPA",
+  "description": "Wrapper ESM for the O3 React Form Engine",
   "browser": "dist/openmrs-esm-form-engine-app.js",
   "main": "src/index.ts",
   "source": true,
@@ -40,11 +40,11 @@
     "@carbon/react": "^1.12.0",
     "@openmrs/openmrs-form-engine-lib": "next",
     "lodash-es": "^4.17.21",
-    "react-error-boundary": "^4.0.11"
+    "react-error-boundary": "^4.0.13"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "5.x",
-    "@openmrs/esm-patient-common-lib": "7.x",
+    "@openmrs/esm-patient-common-lib": "8.x",
     "dayjs": "1.x",
     "react": "18.x",
     "react-i18next": "11.x",

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InlineLoading } from '@carbon/react';
 import { FormEngine } from '@openmrs/openmrs-form-engine-lib';
-import { type Visit } from '@openmrs/esm-framework';
+import { showModal, type Visit } from '@openmrs/esm-framework';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import FormError from './form-error.component';
 import useFormSchema from '../hooks/useFormSchema';
@@ -35,6 +35,21 @@ const FormRenderer: React.FC<FormRendererProps> = ({
     !encounterUuid && launchPatientWorkspace('clinical-forms-workspace');
   }, [closeWorkspace, encounterUuid]);
 
+  const handleConfirmQuestionDeletion = useCallback(() => {
+    return new Promise<void>((resolve, reject) => {
+      const dispose = showModal('form-engine-delete-question-confirm-modal', {
+        onCancel() {
+          dispose();
+          reject();
+        },
+        onConfirm() {
+          dispose();
+          resolve();
+        },
+      });
+    });
+  }, []);
+
   const handleMarkFormAsDirty = useCallback(
     (isDirty: boolean) => promptBeforeClosing(() => isDirty),
     [promptBeforeClosing],
@@ -63,6 +78,7 @@ const FormRenderer: React.FC<FormRendererProps> = ({
           encounterUUID={encounterUuid}
           formJson={schema}
           handleClose={handleCloseForm}
+          handleConfirmQuestionDeletion={handleConfirmQuestionDeletion}
           markFormAsDirty={handleMarkFormAsDirty}
           mode={additionalProps?.mode}
           onSubmit={closeWorkspaceWithSavedChanges}

packages/esm-form-engine-app/src/form-renderer/repeat/delete-question-modal.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
+
+interface DeleteModalProps {
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const DeleteModal: React.FC<DeleteModalProps> = ({ onConfirm, onCancel }) => {
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      <ModalHeader
+        closeModal={onCancel}
+        title={t('deleteQuestionConfirmation', 'Are you sure you want to delete this question?')}
+      />
+      <ModalBody>
+        <p>{t('deleteQuestionExplainerText', 'This action cannot be undone.')}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={onCancel}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={onConfirm}>
+          {t('deleteQuestion', 'Delete question')}
+        </Button>
+      </ModalFooter>
+    </React.Fragment>
+  );
+};
+
+export default DeleteModal;

packages/esm-form-engine-app/src/hooks/useFormSchema.tsx

@@ -14,7 +14,9 @@ const useFormSchema = (formUuid: string) => {
 
   const { data, error, isLoading } = useSWR<{ data: FormSchema }>(url, openmrsFetch);
 
-  return { schema: data?.data, error, isLoading };
+  const schema = { ...data?.data, encounterType: data?.data.encounterType['uuid'] };
+
+  return { schema, error, isLoading };
 };
 
 export default useFormSchema;

packages/esm-form-engine-app/src/index.ts

@@ -23,3 +23,8 @@ export const formCollapseToggle = getAsyncLifecycle(
     moduleName,
   },
 );
+
+export const deleteQuestionModal = getAsyncLifecycle(
+  () => import('./form-renderer/repeat/delete-question-modal.component'),
+  options,
+);

packages/esm-form-engine-app/src/routes.json

@@ -15,5 +15,11 @@
       "slot": "patient-chart-workspace-header-slot"
     }
   ],
+  "modals": [
+    {
+      "name": "form-engine-delete-question-confirm-modal",
+      "component": "deleteQuestionModal"
+    }
+  ],
   "pages": []
 }

packages/esm-form-engine-app/translations/en.json

@@ -1,6 +1,10 @@
 {
+  "cancel": "Cancel",
   "closeThisPanel": "Close this panel",
   "collapseAll": "Collapse all",
+  "deleteQuestion": "Delete question",
+  "deleteQuestionConfirmation": "Are you sure you want to delete this question?",
+  "deleteQuestionExplainerText": "This action cannot be undone.",
   "errorTitle": "There was an error with this form",
   "expandAll": "Expand all",
   "loading": "Loading",

packages/esm-form-entry-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-entry-app",
-  "version": "7.1.0",
+  "version": "8.0.1",
   "license": "MPL-2.0",
   "description": "Form engine entry capabilities for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-form-entry-app.js",

packages/esm-generic-patient-widgets-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-generic-patient-widgets-app",
-  "version": "7.1.0",
+  "version": "8.0.1",
   "license": "MPL-2.0",
   "description": "Generic widgets for the patient chart",
   "browser": "dist/openmrs-esm-generic-patient-widgets-app.js",
@@ -44,7 +44,7 @@
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "5.x",
-    "@openmrs/esm-patient-common-lib": "7.x",
+    "@openmrs/esm-patient-common-lib": "8.x",
     "dayjs": "1.x",
     "react": "^18.2.0",
     "react-i18next": "11.x",

packages/esm-patient-allergies-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-allergies-app",
-  "version": "7.1.0",
+  "version": "8.0.1",
   "license": "MPL-2.0",
   "description": "Patient allergies microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-allergies-app.js",
@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "5.x",
-    "@openmrs/esm-patient-common-lib": "7.x",
+    "@openmrs/esm-patient-common-lib": "8.x",
     "dayjs": "1.x",
     "react": "^18.2.0",
     "react-i18next": "11.x",

packages/esm-patient-attachments-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-attachments-app",
-  "version": "7.1.0",
+  "version": "8.0.1",
   "license": "MPL-2.0",
   "description": "Patient attachments microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-attachments-app.js",
@@ -38,14 +38,14 @@
   },
   "dependencies": {
     "@carbon/react": "^1.12.0",
-    "@openmrs/esm-patient-common-lib": "^7.1.0",
+    "@openmrs/esm-patient-common-lib": "^8.0.1",
     "lodash-es": "^4.17.21",
     "react-grid-gallery": "^0.5.6",
     "react-html5-camera-photo": "^1.5.11"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "5.x",
-    "@openmrs/esm-patient-common-lib": "7.x",
+    "@openmrs/esm-patient-common-lib": "8.x",
     "dayjs": "1.x",
     "react": "^18.2.0",
     "react-i18next": "11.x",

packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx

@@ -13,9 +13,8 @@ import {
   type Attachment,
   type UploadedFile,
 } from '@openmrs/esm-framework';
-import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib';
+import { CardHeader, EmptyState, useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib';
 import { createGalleryEntry } from '../utils';
-import { useAllowedExtensions } from './use-allowed-extensions';
 import AttachmentPreview from './attachment-preview.component';
 import AttachmentsGridOverview from './attachments-grid-overview.component';
 import AttachmentsTableOverview from './attachments-table-overview.component';
@@ -38,7 +37,7 @@ const AttachmentsOverview: React.FC<AttachmentsOverviewProps> = ({ patientUuid }
   const isTablet = useLayoutType() === 'tablet';
   const { t } = useTranslation();
   const { data, mutate, isValidating, isLoading } = useAttachments(patientUuid, true);
-  const { allowedExtensions } = useAllowedExtensions();
+  const { allowedFileExtensions } = useAllowedFileExtensions();
 
   const [attachmentToPreview, setAttachmentToPreview] = useState<Attachment>(null);
   const [hasUploadError, setHasUploadError] = useState(false);
@@ -99,13 +98,13 @@ const AttachmentsOverview: React.FC<AttachmentsOverviewProps> = ({ patientUuid }
   const showAddAttachmentModal = useCallback(() => {
     const close = showModal('capture-photo-modal', {
       saveFile: (file: UploadedFile) => createAttachment(patientUuid, file),
-      allowedExtensions: allowedExtensions,
+      allowedExtensions: allowedFileExtensions,
       closeModal: () => close(),
       onCompletion: () => mutate(),
       multipleFiles: true,
       collectDescription: true,
     });
-  }, [patientUuid, mutate, allowedExtensions]);
+  }, [allowedFileExtensions, mutate, patientUuid]);
 
   const showDeleteAttachmentModal = useCallback(
     (attachment: Attachment) => {