MF-390: Rewrite Visit Notes form based on new designs (#174)

* MF-390: Rewrite Visit Notes form based on new designs

* More tests

* Add translation strings

* Improvements to tests and type annotations

* Primary diagnosis should be left-aligned

The primary diagnosis should appear as a left-aligned red tag when present. Subsequent (secondary) diagnoses should appear as blue tags to the right of the primary diagnosis.

* Fixup from Brandon's review

* Move RenderSearchResults inline

__mocks__/chart-widgets-config.mock.ts

@@ -8,14 +8,20 @@ export const ConfigMock = {
  heightUuid: "5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
  weightUuid: "5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
  respiratoryRateUuid: "5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
- generalPatientNoteUuid:"165095AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
- midUpperArmCircumferenceUuid:"1343AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
+ generalPatientNoteUuid: "165095AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+ midUpperArmCircumferenceUuid: "1343AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
  },
  vitals: {
  formUuid: "a000cb34-9ec1-4344-a1c8-f692232f6edd",
  encounterTypeUuid: "67a71486-1a54-468f-ac3e-7091a9a79584"
  },
  biometrics: {
  bmiUnit: "kg / m²"
+ },
+ visitNoteConfig: {
+ clinicianEncounterRole: "240b26f9-dd88-4172-823d-4a8bfeb7841f",
+ encounterNoteConceptUuid: "162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+ encounterTypeUuid: "d7151f82-c1f3-4152-a605-2f9ea7414a79",
+ formConceptUuid: "c75f120a-04ec-11e3-8780-2b40bef9a44b"
  }
 };

__mocks__/visit-note.mock.ts

@@ -96,6 +96,23 @@ export const locationsResponse = {
  }
 };
 
+export const mockFetchLocationByUuidResponse = {
+ data: {
+ uuid: "b1a8b05e-3542-4037-bbd3-998ee9c40574",
+ display: "Inpatient Ward"
+ }
+};
+
+export const mockFetchProviderByUuidResponse = {
+ data: {
+ person: {
+ uuid: "4c357d29-f3e7-4b82-b808-aef52b46d8bd",
+ display: "User 2"
+ },
+ uuid: "b0f8686c-9de0-466e-abe6-d14e133b9337"
+ }
+};
+
 export const diagnosisSearchResponse = {
  results: [
  {

src/config-schema.ts

@@ -7,6 +7,9 @@ import vitalsConfigSchema, {
 } from "./widgets/vitals/vitals-config-schema";
 import immunizationWidgetSchema from "./widgets/immunizations/immunization-widget-config-schema";
 import { ImmunizationWidgetConfigObject } from "./widgets/immunizations/immunization-domain";
+import visitNoteConfigSchema, {
+ VisitNoteConfigObject
+} from "./widgets/notes/visit-note-config-schema";
 
 const schema = {
  concepts: {
@@ -53,7 +56,8 @@ const schema = {
  },
  biometrics: biometricsConfigSchema,
  vitals: vitalsConfigSchema,
- immunizationsConfig: immunizationWidgetSchema
+ immunizationsConfig: immunizationWidgetSchema,
+ visitNoteConfig: visitNoteConfigSchema
 };
 
 export type ConfigObject = {
@@ -72,6 +76,7 @@ export type ConfigObject = {
  biometrics: BiometricsConfigObject;
  vitals: VitalsConfigObject;
  immunizationsConfig: ImmunizationWidgetConfigObject;
+ visitNote: VisitNoteConfigObject;
 };
 
 export default schema;

src/index.ts

@@ -76,6 +76,17 @@ function setupOpenMRS() {
  }
  )
  },
+ {
+ id: "visit-notes-form-ext",
+ slot: "/patient/:patientUuid/visitnotes/form",
+ load: getAsyncLifecycle(
+ () => import("./widgets/notes/visit-notes-form.component"),
+ {
+ featureName: "visit-notes-form",
+ moduleName
+ }
+ )
+ },
  {
  id: "vitals-biometric-form-widget",
  slot: "/patient/:patientUuid/vitalsbiometrics/form",

src/widgets/notes/notes-detailed-summary.component.tsx

@@ -9,7 +9,7 @@ import {
  getEncounterObservableRESTAPI,
  PatientNote
 } from "./encounter.resource";
-import VisitNotes from "./visit-note.component";
+import VisitNotes from "./visit-notes-form.component";
 import { openWorkspaceTab } from "../shared-utils";
 import EmptyState from "../../ui-components/empty-state/empty-state.component";
 import { formatDate } from "../biometrics/biometric.helper";

src/widgets/notes/notes-helper.ts

@@ -1,20 +1,5 @@
 import dayjs from "dayjs";
 
-export function getAuthorName(note: any): string {
- let author: any;
- if (note.participant) {
- author = note.participant[0].individual.display;
- return author.toUpperCase();
- } else if (note.extension) {
- author = note.extension.find(ext => ext.url === "changedBy");
- return author ? author.valueString.toUpperCase() : "";
- }
-}
-
-export function getNotes(notes) {
- return notes.map(note => note.resource);
-}
-
 export function formatNotesDate(date: string): string {
  const unprocessedDate = dayjs(date);
  if (unprocessedDate.format("DD-MMM-YYYY") === dayjs().format("DD-MMM-YYYY")) {

src/widgets/notes/notes-overview.component.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 
-import { useTranslation } from "react-i18next";
-
 import {
  Button,
  DataTable,
@@ -15,11 +13,12 @@ import {
  TableRow
 } from "carbon-components-react";
 import { Add16 } from "@carbon/icons-react";
+import { useTranslation } from "react-i18next";
 
 import { createErrorHandler } from "@openmrs/esm-error-handling";
 import { useCurrentPatient } from "@openmrs/esm-react-utils";
+import { switchTo } from "@openmrs/esm-extensions";
 
-import { openWorkspaceTab } from "../shared-utils";
 import EmptyState from "../../ui-components/empty-state/empty-state.component";
 import ErrorState from "../../ui-components/error-state/error-state.component";
 
@@ -28,7 +27,6 @@ import {
  PatientNote
 } from "./encounter.resource";
 import { formatNotesDate } from "./notes-helper";
-import VisitNotes from "./visit-note.component";
 import styles from "./notes-overview.scss";
 
 const NotesOverview: React.FC<NotesOverviewProps> = () => {
@@ -53,7 +51,10 @@ const NotesOverview: React.FC<NotesOverviewProps> = () => {
  }, [patient, patientUuid]);
 
  const launchVisitNoteForm = () => {
- openWorkspaceTab(VisitNotes, t("visitNotesForm", "Visit note form"));
+ const url = `/patient/${patientUuid}/visitnotes/form`;
+ switchTo("workspace", url, {
+ title: t("visitNote", "Visit Note")
+ });
  };
 
  const headers = [

src/widgets/notes/notes-overview.test.tsx

@@ -2,13 +2,12 @@ import React from "react";
 
 import { of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 
 import { mockFormattedNotes } from "../../../__mocks__/encounters.mock";
 import { getEncounterObservableRESTAPI } from "./encounter.resource";
 import { openWorkspaceTab } from "../shared-utils";
 import NotesOverview from "./notes-overview.component";
-import VisitNotes from "./visit-note.component";
 
 const mockGetEncounterObservableRESTAPI = getEncounterObservableRESTAPI as jest.Mock;
 const mockOpenWorkspaceTab = openWorkspaceTab as jest.Mock;
@@ -50,14 +49,6 @@ describe("<NotesOverview />", () => {
  expect(screen.getByText("Vitals")).toBeInTheDocument();
  expect(screen.getByText("Isolation Ward")).toBeInTheDocument();
  expect(screen.getByText("Dr. G. Testerson")).toBeInTheDocument();
-
- // Clicking "Add" launches the notes form in a new workspace tab
- fireEvent.click(screen.getByRole("button", { name: "Add" }));
- expect(mockOpenWorkspaceTab).toHaveBeenCalled();
- expect(mockOpenWorkspaceTab).toHaveBeenCalledWith(
- VisitNotes,
- "Visit note form"
- );
  });
 
  it("renders an empty state view when encounter data is absent", async () => {

src/widgets/notes/visit-note-config-schema.ts

@@ -0,0 +1,27 @@
+import { Type } from "@openmrs/esm-config";
+
+export default {
+ clinicianEncounterRole: {
+ _type: Type.UUID,
+ _default: "240b26f9-dd88-4172-823d-4a8bfeb7841f"
+ },
+ encounterNoteConceptUuid: {
+ _type: Type.ConceptUuid,
+ _default: "162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
+ },
+ encounterTypeUuid: {
+ _type: Type.UUID,
+ _default: "d7151f82-c1f3-4152-a605-2f9ea7414a79"
+ },
+ formConceptUuid: {
+ _type: Type.ConceptUuid,
+ _default: "c75f120a-04ec-11e3-8780-2b40bef9a44b"
+ }
+};
+
+export type VisitNoteConfigObject = {
+ clinicianEncounterRole: string;
+ encounterNoteConceptUuid: string;
+ encounterTypeUuid: string;
+ formConceptUuid: string;
+};