@openmrs/esm-patient-programs-app 3.0.0-pre.65 → 3.0.0-pre.656

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-programs-app",
-  "version": "3.0.0-pre.65",
+  "version": "3.0.0-pre.656",
   "license": "MPL-2.0",
   "description": "Patient programs microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-programs-app.js",
@@ -8,12 +8,13 @@
   "source": true,
   "scripts": {
     "start": "openmrs develop",
-    "serve": "webpack-dev-server --mode=development",
+    "serve": "webpack serve --mode=development",
     "debug": "npm run serve",
     "build": "webpack --mode production",
-    "analyze": "webpack --mode=production --env.analyze=true",
+    "analyze": "webpack --mode=production --env analyze=true",
     "lint": "eslint src --ext tsx",
-    "typescript": "tsc"
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -33,14 +34,12 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-chart/issues"
   },
   "dependencies": {
-    "@carbon/charts-react": "^0.41.14",
+    "@carbon/charts-react": "^0.49.4",
     "@carbon/icons-react": "^10.18.0",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
+    "@openmrs/esm-patient-common-lib": "^3.0.0-pre.656",
     "carbon-components-react": "^7.25.0",
-    "d3": "^5.16.0",
-    "lodash-es": "^4.17.15",
-    "systemjs-webpack-interop": "^1.2.1"
+    "d3": "^7.0.3",
+    "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "3.x",
@@ -52,5 +51,5 @@
     "react-router-dom": "5.x",
     "rxjs": "6.x"
   },
-  "gitHead": "9c561dc987f568a72d84f14fe0a5441fbd1a899d"
+  "gitHead": "05cb6928412c65c483d301ede8b3d6385a6f9e8b"
 }

package/src/dashboard.meta.tsx

@@ -0,0 +1,6 @@
+export const dashboardMeta = {
+  name: 'programs',
+  slot: 'patient-chart-programs-dashboard-slot',
+  config: { columns: 1, type: 'grid' },
+  title: 'Programs',
+};

package/src/declarations.d.tsx

@@ -1,3 +1,3 @@
-declare module "*.css";
-declare module "*.scss";
-declare module "*.png";
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';

package/src/index.ts

@@ -1,19 +1,22 @@
-import { defineConfigSchema, getAsyncLifecycle } from "@openmrs/esm-framework";
-import { backendDependencies } from "./openmrs-backend-dependencies";
-import dashboardMeta from "./dashboard/dashboard.meta";
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { dashboardMeta } from './dashboard.meta';
 
-const importTranslation = require.context(
-  "../translations",
-  false,
-  /.json$/,
-  "lazy"
-);
+const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const backendDependencies = {
+  'webservices.rest': '^2.2.0',
+};
+
+const frontendDependencies = {
+  '@openmrs/esm-framework': process.env.FRAMEWORK_VERSION,
+};
 
 function setupOpenMRS() {
-  const moduleName = "@openmrs/esm-patient-programs-app";
+  const moduleName = '@openmrs/esm-patient-programs-app';
 
   const options = {
-    featureName: "patient-programs",
+    featureName: 'patient-programs',
     moduleName,
   };
 
@@ -22,38 +25,36 @@ function setupOpenMRS() {
   return {
     extensions: [
       {
-        id: "programs-overview-widget",
-        slot: "patient-chart-summary-dashboard-slot",
-        load: getAsyncLifecycle(
-          () => import("./programs/programs-overview.component"),
-          options
-        ),
+        id: 'programs-overview-widget',
+        slot: 'patient-chart-summary-dashboard-slot',
+        load: getAsyncLifecycle(() => import('./programs/programs-overview.component'), options),
         meta: {
-          columnSpan: 2,
+          columnSpan: 4,
         },
       },
       {
-        id: "programs-details-widget",
+        id: 'programs-details-widget',
         slot: dashboardMeta.slot,
-        load: getAsyncLifecycle(
-          () => import("./programs/programs.component"),
-          options
-        ),
+        load: getAsyncLifecycle(() => import('./programs/programs.component'), options),
         meta: {
           columnSpan: 1,
         },
       },
       {
-        id: "programs-summary-dashboard",
-        slot: "patient-chart-dashboard-slot",
-        load: getAsyncLifecycle(
-          () => import("./dashboard/dashboard-link.component"),
-          options
-        ),
+        id: 'programs-summary-dashboard',
+        slot: 'patient-chart-dashboard-slot',
+        load: getSyncLifecycle(createDashboardLink(dashboardMeta), options),
         meta: dashboardMeta,
       },
+      {
+        id: 'programs-form-workspace',
+        load: getAsyncLifecycle(() => import('./programs/programs-form.component'), options),
+        meta: {
+          title: 'Record Program enrollment',
+        },
+      },
     ],
   };
 }
 
-export { backendDependencies, importTranslation, setupOpenMRS };
+export { backendDependencies, frontendDependencies, importTranslation, setupOpenMRS };

package/src/programs/program-record.component.tsx

@@ -1,17 +1,15 @@
-import React, { useEffect, useState } from "react";
-import dayjs from "dayjs";
-import SummaryCard from "../cards/summary-card.component";
-import ProgramsForm from "./programs-form.component";
-import styles from "./program-record.css";
-import { RouteComponentProps } from "react-router-dom";
-import { useTranslation, Trans } from "react-i18next";
-import { createErrorHandler } from "@openmrs/esm-framework";
-import { getPatientProgramByUuid } from "./programs.resource";
-import { useProgramsContext } from "./programs.context";
-import { openWorkspaceTab } from "./openWorkspaceTab";
+import React, { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import ProgramsForm from './programs-form.component';
+import styles from './program-record.css';
+import { SummaryCard, openWorkspaceTab } from '@openmrs/esm-patient-common-lib';
+import { RouteComponentProps } from 'react-router-dom';
+import { useTranslation, Trans } from 'react-i18next';
+import { createErrorHandler } from '@openmrs/esm-framework';
+import { getPatientProgramByUuid } from './programs.resource';
+import { useProgramsContext } from './programs.context';
 
-interface ProgramRecordProps
-  extends RouteComponentProps<{ programUuid: string }> {}
+interface ProgramRecordProps extends RouteComponentProps<{ programUuid: string }> {}
 
 const ProgramRecord: React.FC<ProgramRecordProps> = ({ match }) => {
   const [patientProgram, setPatientProgram] = useState(null);
@@ -21,11 +19,9 @@ const ProgramRecord: React.FC<ProgramRecordProps> = ({ match }) => {
 
   useEffect(() => {
     if (patient && patientUuid) {
-      const subscription = getPatientProgramByUuid(programUuid).subscribe(
-        (program) => {
-          setPatientProgram(program), createErrorHandler();
-        }
-      );
+      const subscription = getPatientProgramByUuid(programUuid).subscribe((program) => {
+        setPatientProgram(program), createErrorHandler();
+      });
 
       return () => subscription.unsubscribe();
     }
@@ -36,23 +32,18 @@ const ProgramRecord: React.FC<ProgramRecordProps> = ({ match }) => {
       {!!(patientProgram && Object.entries(patientProgram).length) && (
         <div className={styles.programSummary}>
           <SummaryCard
-            name={t("program", "Program")}
-            styles={{ width: "100%" }}
-            editComponent={ProgramsForm}
+            name={t('program', 'Program')}
+            styles={{ width: '100%' }}
+            editComponent
             showComponent={() =>
-              openWorkspaceTab(
-                ProgramsForm,
-                `${t("editProgram", "Edit Program")}`,
-                {
-                  program: patientProgram?.program?.name,
-                  programUuid: patientProgram?.uuid,
-                  enrollmentDate: patientProgram?.dateEnrolled,
-                  completionDate: patientProgram?.dateCompleted,
-                  locationUuid: patientProgram?.location?.uuid,
-                }
-              )
-            }
-          >
+              openWorkspaceTab(ProgramsForm, `${t('editProgram', 'Edit program')}`, {
+                program: patientProgram?.program?.name,
+                programUuid: patientProgram?.uuid,
+                enrollmentDate: patientProgram?.dateEnrolled,
+                completionDate: patientProgram?.dateCompleted,
+                locationUuid: patientProgram?.location?.uuid,
+              })
+            }>
             <div className={`omrs-type-body-regular ${styles.programCard}`}>
               <div>
                 <p className="omrs-type-title-3" data-testid="program-name">
@@ -75,28 +66,18 @@ const ProgramRecord: React.FC<ProgramRecordProps> = ({ match }) => {
                 </thead>
                 <tbody>
                   <tr>
-                    <td>
-                      {dayjs(patientProgram?.dateEnrolled).format(
-                        "DD-MMM-YYYY"
-                      )}
-                    </td>
+                    <td>{dayjs(patientProgram?.dateEnrolled).format('DD-MMM-YYYY')}</td>
                     <td className={styles.completedProgram}>
                       {patientProgram?.dateCompleted ? (
                         <span className={styles.completionDate}>
-                          <Trans i18nKey="completedOn">Completed on</Trans>{" "}
-                          {dayjs(patientProgram?.dateCompleted).format(
-                            "DD-MMM-YYYY"
-                          )}
+                          <Trans i18nKey="completedOn">Completed on</Trans>{' '}
+                          {dayjs(patientProgram?.dateCompleted).format('DD-MMM-YYYY')}
                         </span>
                       ) : (
                         <Trans i18nKey="active">Active</Trans>
                       )}
                     </td>
-                    <td>
-                      {patientProgram?.location
-                        ? patientProgram?.location?.display
-                        : "-"}
-                    </td>
+                    <td>{patientProgram?.location?.display || '-'}</td>
                   </tr>
                 </tbody>
               </table>

package/src/programs/program-record.test.outdated.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-import ProgramRecord from "./program-record.component";
-import ProgramsForm from "./programs-form.component";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
-import { mockProgramResponse } from "../../../../__mocks__/programs.mock";
-import { getPatientProgramByUuid } from "./programs.resource";
-import { of } from "rxjs/internal/observable/of";
+import React from 'react';
+import ProgramRecord from './program-record.component';
+import ProgramsForm from './programs-form.component';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { mockProgramResponse } from '../../../../__mocks__/programs.mock';
+import { getPatientProgramByUuid } from './programs.resource';
+import { of } from 'rxjs/internal/observable/of';
 
 const mockFetchPatientProgram = getPatientProgramByUuid as jest.Mock;
 
-jest.mock("./programs.resource", () => ({
+jest.mock('./programs.resource', () => ({
   getPatientProgramByUuid: jest.fn(),
 }));
 
-describe("<ProgramRecord />", () => {
+describe('<ProgramRecord />', () => {
   beforeEach(() => {
     mockFetchPatientProgram.mockReset;
     mockFetchPatientProgram.mockReturnValue(of(mockProgramResponse));
@@ -21,41 +21,37 @@ describe("<ProgramRecord />", () => {
 
   afterEach(() => jest.restoreAllMocks());
 
-  it("displays a detailed summary of the selected care program", async () => {
+  it('displays a detailed summary of the selected care program', async () => {
     const mockOpenWorkspaceTab = jest.fn();
 
     render(
       <BrowserRouter>
-        <ProgramRecord match={{ params: { programUuid: "" } }} />
-      </BrowserRouter>
+        <ProgramRecord match={{ params: { programUuid: '' } }} />
+      </BrowserRouter>,
     );
 
-    await screen.findByRole("heading", { name: "Program" });
+    await screen.findByRole('heading', { name: 'Program' });
 
-    expect(screen.getByText("Program")).toBeInTheDocument();
-    const editBtn = screen.getByRole("button", { name: "Edit" });
+    expect(screen.getByText('Program')).toBeInTheDocument();
+    const editBtn = screen.getByRole('button', { name: 'Edit' });
     expect(editBtn).toBeInTheDocument();
-    expect(screen.getByText("HIV Care and Treatment")).toBeInTheDocument();
-    expect(screen.getByText("Enrolled on")).toBeInTheDocument();
-    expect(screen.getByText("Status")).toBeInTheDocument();
-    expect(screen.getByText("Enrolled at")).toBeInTheDocument();
-    expect(screen.getByText("01-Nov-2019")).toBeInTheDocument();
-    expect(screen.getByText("Active")).toBeInTheDocument();
-    expect(screen.getByText("-")).toBeInTheDocument();
+    expect(screen.getByText('HIV Care and Treatment')).toBeInTheDocument();
+    expect(screen.getByText('Enrolled on')).toBeInTheDocument();
+    expect(screen.getByText('Status')).toBeInTheDocument();
+    expect(screen.getByText('Enrolled at')).toBeInTheDocument();
+    expect(screen.getByText('01-Nov-2019')).toBeInTheDocument();
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    expect(screen.getByText('-')).toBeInTheDocument();
 
     // Clicking "Edit" launches edit form in workspace tab
     fireEvent.click(editBtn);
     expect(mockOpenWorkspaceTab).toHaveBeenCalled();
-    expect(mockOpenWorkspaceTab).toHaveBeenCalledWith(
-      ProgramsForm,
-      "Edit Program",
-      {
-        completionDate: null,
-        enrollmentDate: "2019-11-01T15:00:00.000+0000",
-        location: undefined,
-        program: "HIV Care and Treatment",
-        programUuid: "8ba6c08f-66d9-4a18-a233-5f658b1755bf",
-      }
-    );
+    expect(mockOpenWorkspaceTab).toHaveBeenCalledWith(ProgramsForm, 'Edit Program', {
+      completionDate: null,
+      enrollmentDate: '2019-11-01T15:00:00.000+0000',
+      location: undefined,
+      program: 'HIV Care and Treatment',
+      programUuid: '8ba6c08f-66d9-4a18-a233-5f658b1755bf',
+    });
   });
 });

package/src/programs/programs-detailed-summary.component.tsx

@@ -1,134 +1,143 @@
-import React, { useEffect, useState } from "react";
-import dayjs from "dayjs";
-import ProgramsForm from "./programs-form.component";
-import EmptyState from "./empty-state/empty-state.component";
-import SummaryCard from "../cards/summary-card.component";
-import styles from "./programs-detailed-summary.css";
-import { useTranslation, Trans } from "react-i18next";
-import { RouteComponentProps, Link } from "react-router-dom";
-import { createErrorHandler } from "@openmrs/esm-framework";
-import { fetchEnrolledPrograms } from "./programs.resource";
-import { useProgramsContext } from "./programs.context";
-import { openWorkspaceTab } from "./openWorkspaceTab";
-import { PatientProgram } from "../types";
+import React, { useEffect, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import Add16 from '@carbon/icons-react/es/add/16';
+import styles from './programs-detailed-summary.scss';
+import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
+import { useTranslation } from 'react-i18next';
+import { attach } from '@openmrs/esm-framework';
+import { fetchEnrolledPrograms } from './programs.resource';
+import { useProgramsContext } from './programs.context';
+import { PatientProgram } from '../types';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+  DataTableHeader,
+  DataTableRow,
+} from 'carbon-components-react';
 
-interface ProgramsDetailedSummaryProps extends RouteComponentProps<{}> {}
+interface ProgramsDetailedSummaryProps {}
 
 const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = () => {
-  const [enrolledPrograms, setEnrolledPrograms] = useState<
-    Array<PatientProgram>
-  >([]);
-  const { patientUuid } = useProgramsContext();
   const { t } = useTranslation();
+  const displayText = t('programEnrollments', 'Program enrollments');
+  const headerTitle = t('carePrograms', 'Care Programs');
+  const [enrolledPrograms, setEnrolledPrograms] = useState<Array<PatientProgram>>(null);
+  const { patientUuid } = useProgramsContext();
+  const [error, setError] = useState(null);
 
   useEffect(() => {
     if (patientUuid) {
       const subscription = fetchEnrolledPrograms(patientUuid).subscribe(
         (enrolledPrograms) => setEnrolledPrograms(enrolledPrograms),
-        createErrorHandler()
+        setError,
       );
       return () => subscription.unsubscribe();
     }
   }, [patientUuid]);
 
+  const tableHeader: Array<DataTableHeader> = useMemo(
+    () => [
+      {
+        key: 'display',
+        header: t('activePrograms', 'Active programs'),
+      },
+      {
+        key: 'dateEnrolled',
+        header: t('dateEnrolled', 'Date enrolled'),
+      },
+      {
+        key: 'status',
+        header: t('status', 'Status'),
+      },
+    ],
+    [t],
+  );
+
+  const tableRows: Array<DataTableRow> = useMemo(() => {
+    return enrolledPrograms?.map((programs) => {
+      return {
+        id: programs.uuid,
+        display: programs.display,
+        dateEnrolled: dayjs(programs.dateEnrolled).format('MMM-YYYY'),
+        status: programs.dateCompleted
+          ? `${t('completedOn', 'Completed On')} ${dayjs(programs.dateCompleted).format('MMM-YYYY')}`
+          : t('active', 'Active'),
+      };
+    });
+  }, [enrolledPrograms, t]);
+
+  const launchProgramsForm = React.useCallback(
+    () => attach('patient-chart-workspace-slot', 'programs-form-workspace'),
+    [],
+  );
+
+  const RenderPrograms = () => {
+    return (
+      <>
+        {enrolledPrograms?.length ? (
+          <div className={styles.widgetCard}>
+            <div className={styles.programsHeader}>
+              <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+              <Button kind="ghost" renderIcon={Add16} iconDescription="Add programs" onClick={launchProgramsForm}>
+                {t('add', 'Add')}
+              </Button>
+            </div>
+
+            <TableContainer>
+              <DataTable rows={tableRows} headers={tableHeader} isSortable={true} size="short">
+                {({ rows, headers, getHeaderProps, getTableProps }) => (
+                  <Table {...getTableProps()} useZebraStyles>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader
+                            className={`${styles.productiveHeading01} ${styles.text02}`}
+                            {...getHeaderProps({
+                              header,
+                              isSortable: header.isSortable,
+                            })}>
+                            {header.header?.content ?? header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </DataTable>
+            </TableContainer>
+          </div>
+        ) : (
+          <EmptyState displayText={displayText} headerTitle={headerTitle} launchForm={launchProgramsForm} />
+        )}
+      </>
+    );
+  };
+
   return (
     <>
-      {enrolledPrograms?.length ? (
-        <div className={styles.programsSummary}>
-          <SummaryCard
-            name={t("carePrograms", "Care Programs")}
-            styles={{
-              width: "100%",
-            }}
-            addComponent={ProgramsForm}
-            showComponent={() =>
-              openWorkspaceTab(
-                ProgramsForm,
-                `${t("programsForm", "Programs Form")}`,
-                {
-                  setEnrolledPrograms: setEnrolledPrograms,
-                  enrolledPrograms: enrolledPrograms,
-                }
-              )
-            }
-          >
-            <table className={`omrs-type-body-regular ${styles.programTable}`}>
-              <thead>
-                <tr>
-                  <th>
-                    <Trans i18nKey="activePrograms">Active Programs</Trans>
-                  </th>
-                  <th>
-                    <Trans i18nKey="since">Since</Trans>
-                  </th>
-                  <th>
-                    <Trans i18nKey="status">Status</Trans>
-                  </th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody>
-                {enrolledPrograms?.map((program) => {
-                  return (
-                    <React.Fragment key={program.uuid}>
-                      <tr
-                        className={`${
-                          program.dateCompleted
-                            ? `${styles.inactive}`
-                            : `${styles.active}`
-                        }`}
-                      >
-                        <td className="omrs-medium">{program.display}</td>
-                        <td>
-                          {dayjs(program.dateEnrolled).format("MMM-YYYY")}
-                        </td>
-                        <td>
-                          {program.dateCompleted ? (
-                            <span className={styles.completionDate}>
-                              <Trans i18nKey="Completed on">Completed on</Trans>{" "}
-                              {dayjs(program.dateCompleted).format(
-                                "DD-MMM-YYYY"
-                              )}
-                            </span>
-                          ) : (
-                            <Trans i18nKey="active">Active</Trans>
-                          )}
-                        </td>
-                        <td>
-                          {
-                            <Link to={`/${program.uuid}`}>
-                              <svg
-                                className="omrs-icon"
-                                fill="var(--omrs-color-ink-low-contrast)"
-                              >
-                                <use xlinkHref="#omrs-icon-chevron-right" />
-                              </svg>
-                            </Link>
-                          }
-                        </td>
-                      </tr>
-                    </React.Fragment>
-                  );
-                })}
-              </tbody>
-            </table>
-          </SummaryCard>
-        </div>
+      {enrolledPrograms ? (
+        <RenderPrograms />
+      ) : error ? (
+        <ErrorState error={error} headerTitle={headerTitle} />
       ) : (
-        <EmptyState
-          displayText={t("programEnrollments", "program enrollments")}
-          headerTitle={t("carePrograms", "Care Programs")}
-          launchForm={() =>
-            openWorkspaceTab(
-              ProgramsForm,
-              `${t("programsForm", "Programs Form")}`,
-              {
-                setEnrolledPrograms: setEnrolledPrograms,
-                enrolledPrograms: enrolledPrograms,
-              }
-            )
-          }
-        />
+        <DataTableSkeleton rowCount={5} />
       )}
     </>
   );

package/src/programs/programs-detailed-summary.scss

@@ -0,0 +1,24 @@
+
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.widgetCard {
+  border: 1px solid $ui-03;
+}
+
+.programsHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-04 0 $spacing-04 $spacing-05;
+  background-color: $ui-background;
+}
+
+.programsHeader > h4:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid $brand-teal-01;
+}