(feat) O3-5151: Add past medication widget extension to patient summary (#2810)

* (feat)O3-5151: Add past medication widget extension to patient summary

* code reviews

* Code review fix

---------

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

Author: makombe

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

@@ -4,6 +4,7 @@ import { configSchema } from './config-schema';
 import { dashboardMeta, moduleName } from './dashboard.meta';
 import medicationsSummaryComponent from './medications-summary/medications-summary.component';
 import activeMedicationsComponent from './active-medications/active-medications.component';
+import pastMedicationsComponent from './past-medications/past-medications.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -20,6 +21,8 @@ export const medicationsSummary = getSyncLifecycle(medicationsSummaryComponent,
 
 export const activeMedications = getSyncLifecycle(activeMedicationsComponent, options);
 
+export const pastMedications = getSyncLifecycle(pastMedicationsComponent, options);
+
 export const drugOrderPanel = getAsyncLifecycle(
   () => import('./drug-order-basket-panel/drug-order-basket-panel.extension'),
   options,

packages/esm-patient-medications-app/src/past-medications/past-medications.component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton } from '@carbon/react';
+import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
+import MedicationsDetailsTable from '../components/medications-details-table.component';
+import { usePastPatientOrders } from '../api/api';
+
+interface PastMedicationsProps {
+  patient: fhir.Patient;
+}
+
+const PastMedications: React.FC<PastMedicationsProps> = ({ patient }) => {
+  const { t } = useTranslation();
+  const headerTitle = t('pastMedicationsHeaderTitle', 'Past medications');
+  const displayText = t('pastMedicationsDisplayText', 'past medications');
+
+  const { data: pastPatientOrders, error, isLoading, isValidating } = usePastPatientOrders(patient?.id);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={headerTitle} />;
+  }
+
+  if (pastPatientOrders?.length) {
+    return (
+      <MedicationsDetailsTable
+        isValidating={isValidating}
+        title={t('pastMedicationsTableTitle', 'Past Medications')}
+        medications={pastPatientOrders}
+        showDiscontinueButton={false}
+        showModifyButton={false}
+        showReorderButton={true}
+        patient={patient}
+      />
+    );
+  }
+
+  return <EmptyState displayText={displayText} headerTitle={headerTitle} />;
+};
+
+export default PastMedications;

packages/esm-patient-medications-app/src/past-medications/past-medications.scss

@@ -0,0 +1,7 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+  margin-bottom: layout.$spacing-05;
+}

packages/esm-patient-medications-app/src/past-medications/past-medications.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { openmrsFetch, useSession } from '@openmrs/esm-framework';
+import { screen, within } from '@testing-library/react';
+import { mockPatientDrugOrdersApiData, mockSessionDataResponse } from '__mocks__';
+import { mockPatient, renderWithSwr, waitForLoadingToFinish } from 'tools';
+import PastMedications from './past-medications.component';
+
+const mockUseSession = jest.mocked(useSession);
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+mockUseSession.mockReturnValue(mockSessionDataResponse.data);
+
+describe('PastMedications', () => {
+  test('renders an empty state view when there are no past medications to display', async () => {
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
+
+    renderWithSwr(<PastMedications patient={mockPatient} />);
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByRole('heading', { name: /past medications/i })).toBeInTheDocument();
+    expect(screen.getByTitle(/empty data illustration/i)).toBeInTheDocument();
+    expect(screen.getByText(/There are no past medications to display for this patient/i)).toBeInTheDocument();
+  });
+
+  test('renders an error state view if there is a problem fetching medications data', async () => {
+    const error = {
+      message: 'You are not logged in',
+      response: {
+        status: 401,
+        statusText: 'Unauthorized',
+      },
+    };
+
+    mockOpenmrsFetch.mockRejectedValueOnce(error);
+
+    renderWithSwr(<PastMedications patient={mockPatient} />);
+
+    await waitForLoadingToFinish();
+
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /past medications/i })).toBeInTheDocument();
+    expect(screen.getByText(/Error 401: Unauthorized/i)).toBeInTheDocument();
+    expect(screen.getByText(/Sorry, there was a problem displaying this information/i)).toBeInTheDocument();
+  });
+
+  test('renders a tabular overview of the past medications recorded for a patient', async () => {
+    mockOpenmrsFetch
+      .mockReturnValueOnce({
+        data: { results: mockPatientDrugOrdersApiData },
+      })
+      .mockReturnValueOnce({
+        data: { results: [] }, // simulate no active orders so all become "past"
+      });
+
+    renderWithSwr(<PastMedications patient={mockPatient} />);
+
+    await waitForLoadingToFinish();
+
+    const headingElements = screen.getAllByText(/Past Medications/i);
+    headingElements.forEach((headingElement) => {
+      expect(headingElement).toBeInTheDocument();
+    });
+
+    const table = screen.getByRole('table');
+    expect(table).toBeInTheDocument();
+
+    const expectedColumnHeaders = [/start date/i, /details/i];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: header })).toBeInTheDocument();
+    });
+
+    const expectedTableRows = [
+      /14-Aug-2023 Admin User Acetaminophen 325 mg — 325mg — tablet DOSE 2 tablet — oral — twice daily — indefinite duration — take it sometimes INDICATION Bad boo-boo/i,
+      /14-Aug-2023 Admin User Acetaminophen 325 mg — 325mg — tablet 14-Aug-2023 DOSE 2 tablet — oral — twice daily — indefinite duration INDICATION No good 0/i,
+      /14-Aug-2023 Admin User Sulfacetamide 0.1 — 10% DOSE 1 application — for 1 weeks — REFILLS 1 — apply it INDICATION Pain — QUANTITY 8 Application/i,
+      /14-Aug-2023 Admin User Aspirin 162.5mg — 162.5mg — tablet DOSE 1 tablet — oral — once daily — for 30 days INDICATION Heart — QUANTITY 30 Tablet/i,
+    ];
+
+    expectedTableRows.forEach((row) => {
+      expect(within(table).getByRole('row', { name: row })).toBeInTheDocument();
+    });
+  });
+});

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

@@ -39,6 +39,15 @@
       },
       "order": 4
     },
+    {
+      "name": "past-medications-widget",
+      "component": "pastMedications",
+      "slot": "patient-chart-summary-dashboard-slot",
+      "meta": {
+        "fullWidth": false
+      },
+      "order": 5
+    },
     {
       "name": "medications-summary-dashboard",
       "component": "medicationsDashboardLink",