@openmrs/esm-patient-programs-app 3.2.1-pre.217 → 3.2.1-pre.219

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-programs-app",
-  "version": "3.2.1-pre.217",
+  "version": "3.2.1-pre.219",
   "license": "MPL-2.0",
   "description": "Patient programs microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-programs-app.js",
@@ -34,23 +34,19 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-chart/issues"
   },
   "dependencies": {
-    "@carbon/charts-react": "^0.49.4",
-    "@carbon/icons-react": "^10.18.0",
-    "@openmrs/esm-patient-common-lib": "^3.2.1-pre.217",
-    "carbon-components-react": "^7.25.0",
+    "@carbon/react": "^1.8.0",
+    "@openmrs/esm-patient-common-lib": "^3.2.1-pre.219",
     "d3": "^7.0.3",
     "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "3.x",
     "@openmrs/esm-patient-common-lib": "3.x",
-    "carbon-components": "10.x",
-    "carbon-icons": "7.x",
     "dayjs": "1.x",
-    "react": "16.x",
+    "react": "^18.2.0",
     "react-i18next": "11.x",
-    "react-router-dom": "5.x",
+    "react-router-dom": "6.x",
     "rxjs": "6.x"
   },
-  "gitHead": "99f3707d63ba78748b9457b3fdc293797f4d37b4"
+  "gitHead": "1b53149e0bae7918f85c340045a65422025bbfc5"
 }

package/src/index.ts

@@ -49,7 +49,7 @@ function setupOpenMRS() {
         name: 'programs-form-workspace',
         load: getAsyncLifecycle(() => import('./programs/programs-form.component'), options),
         meta: {
-          title: 'Record Program enrollment',
+          title: 'Record program enrollment',
         },
       },
     ],

package/src/programs/program-action-button/program-action-button.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
-import TaskAdd20 from '@carbon/icons-react/es/task--add/20';
+import { Button } from '@carbon/react';
+import { TaskAdd } from '@carbon/react/icons';
 import { formEntrySub, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { ConfigurableProgram } from '../../types';
 
@@ -24,7 +24,7 @@ const ProgramActionButton: React.FC<ProgramActionButton> = ({ enrollment }) => {
     return (
       <Button
         onClick={() => launchEnrollmentForm(t('enrollment', 'Enrollment'))}
-        renderIcon={TaskAdd20}
+        renderIcon={(props) => <TaskAdd size={20} {...props} />}
         kind="tertiary"
         size="small"
       >
@@ -35,7 +35,7 @@ const ProgramActionButton: React.FC<ProgramActionButton> = ({ enrollment }) => {
   return (
     <Button
       onClick={() => launchEnrollmentForm(t('discontinue', 'Discontinue'))}
-      renderIcon={TaskAdd20}
+      renderIcon={(props) => <TaskAdd size={20} {...props} />}
       kind="danger--ghost"
       size="small"
     >

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

@@ -1,34 +1,29 @@
 import React from 'react';
-import Add16 from '@carbon/icons-react/es/add/16';
-import Edit16 from '@carbon/icons-react/es/edit/16';
-import filter from 'lodash-es/filter';
-import includes from 'lodash-es/includes';
-import map from 'lodash-es/map';
-import styles from './programs-detailed-summary.scss';
-import { CardHeader, EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
-import { useAvailablePrograms, useEnrollments, usePrograms } from './programs.resource';
+import capitalize from 'lodash-es/capitalize';
 import {
   Button,
   DataTable,
+  DataTableHeader,
+  DataTableRow,
   DataTableSkeleton,
   InlineLoading,
+  InlineNotification,
   Table,
+  TableBody,
   TableCell,
   TableContainer,
-  TableBody,
   TableHead,
   TableHeader,
   TableRow,
-  DataTableHeader,
-  DataTableRow,
-  InlineNotification,
-} from 'carbon-components-react';
-import { formatDate, formatDatetime, useConfig, usePagination } from '@openmrs/esm-framework';
-import { ConfigObject } from '../config-schema';
+} from '@carbon/react';
+import { Add, Edit } from '@carbon/react/icons';
+import { formatDate, formatDatetime, useConfig, usePagination, ConfigObject } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { useAvailablePrograms, useEnrollments, usePrograms } from './programs.resource';
 import { ConfigurableProgram } from '../types';
-import capitalize from 'lodash-es/capitalize';
 import ProgramActionButton from './program-action-button/program-action-button.component';
+import styles from './programs-detailed-summary.scss';
 
 interface ProgramsDetailedSummaryProps {
   patientUuid: string;
@@ -78,23 +73,19 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
   );
 
   const tableRows = React.useMemo(() => {
-    return paginatedEnrollments?.map((enrollment: ConfigurableProgram) => ({
-      id: enrollment.uuid,
-      display: enrollment.display,
-      location: enrollment.location?.display,
-      dateEnrolled: enrollment.dateEnrolled ? formatDatetime(new Date(enrollment.dateEnrolled)) : '--',
-      status: isConfigurable
-        ? capitalize(enrollment.enrollmentStatus)
-        : enrollment.dateCompleted
-        ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(enrollment.dateCompleted))}`
-        : t('active', 'Active'),
-      actions: isConfigurable ? (
-        <ProgramActionButton enrollment={enrollment} />
-      ) : (
-        <ProgramEditButton programEnrollmentId={enrollment.uuid} />
-      ),
-    }));
-  }, [isConfigurable, paginatedEnrollments, t]);
+    return enrollments?.map((program) => {
+      return {
+        id: program.uuid,
+        display: program.display,
+        location: program.location?.display,
+        dateEnrolled: formatDatetime(new Date(program.dateEnrolled)),
+        status: program.dateCompleted
+          ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(program.dateCompleted))}`
+          : t('active', 'Active'),
+        actions: <ProgramEditButton programEnrollmentId={program.uuid} />,
+      };
+    });
+  }, [enrollments, t]);
 
   const launchProgramsForm = React.useCallback(() => launchPatientWorkspace('programs-form-workspace'), []);
 
@@ -107,7 +98,7 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
           <span>{isValidating ? <InlineLoading /> : null}</span>
           <Button
             kind="ghost"
-            renderIcon={Add16}
+            renderIcon={(props) => <Add size={16} {...props} />}
             iconDescription="Add programs"
             onClick={launchProgramsForm}
             disabled={availablePrograms?.length && eligiblePrograms?.length === 0}
@@ -115,19 +106,19 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
             {t('add', 'Add')}
           </Button>
         </CardHeader>
-        <TableContainer>
-          {availablePrograms?.length && eligiblePrograms?.length === 0 && (
-            <InlineNotification
-              style={{ minWidth: '100%', margin: '0rem', padding: '0rem' }}
-              kind={'info'}
-              lowContrast
-              subtitle={t('noEligibleEnrollments', 'There are no more programs left to enroll this patient in')}
-              title={t('fullyEnrolled', 'Enrolled in all programs')}
-            />
-          )}
-          <DataTable rows={tableRows} headers={tableHeaders} isSortable={true} size="short">
-            {({ rows, headers, getHeaderProps, getTableProps }) => (
-              <Table {...getTableProps()} useZebraStyles>
+        {availablePrograms?.length && eligiblePrograms?.length === 0 ? (
+          <InlineNotification
+            style={{ minWidth: '100%', margin: '0rem', padding: '0rem' }}
+            kind={'info'}
+            lowContrast
+            subtitle={t('noEligibleEnrollments', 'There are no more programs left to enroll this patient in')}
+            title={t('fullyEnrolled', 'Enrolled in all programs')}
+          />
+        ) : null}
+        <DataTable rows={tableRows} headers={tableHeaders} isSortable size="xs" useZebraStyles>
+          {({ rows, headers, getHeaderProps, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
@@ -153,9 +144,9 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
                   ))}
                 </TableBody>
               </Table>
-            )}
-          </DataTable>
-        </TableContainer>
+            </TableContainer>
+          )}
+        </DataTable>
       </div>
     );
   }
@@ -175,7 +166,7 @@ function ProgramEditButton({ programEnrollmentId }: ProgramEditButtonProps) {
   return (
     <Button
       kind="ghost"
-      renderIcon={Edit16}
+      renderIcon={(props) => <Edit size={16} {...props} />}
       iconDescription="Edit Program"
       onClick={launchEditProgramsForm}
       hasIconOnly

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

@@ -1,7 +1,4 @@
-
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;

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

@@ -1,12 +1,15 @@
 import React from 'react';
-import { screen, within } from '@testing-library/react';
+import { screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { openmrsFetch, usePagination } from '@openmrs/esm-framework';
+import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { mockPatient } from '../../../../__mocks__/patient.mock';
 import { mockEnrolledProgramsResponse } from '../../../../__mocks__/programs.mock';
 import { renderWithSwr, waitForLoadingToFinish } from '../../../../tools/test-helpers';
-import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import ProgramsDetailedSummary from './programs-detailed-summary.component';
 
+jest.setTimeout(20000);
+
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 const mockUsePagination = usePagination as jest.Mock;
 
@@ -70,6 +73,8 @@ describe('ProgramsDetailedSummary ', () => {
   });
 
   it("renders a detailed tabular summary of the patient's program enrollments", async () => {
+    const user = userEvent.setup();
+
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockEnrolledProgramsResponse } });
     mockUsePagination.mockImplementation(() => ({
       currentPage: 1,
@@ -97,11 +102,13 @@ describe('ProgramsDetailedSummary ', () => {
     expect(editButton).toBeInTheDocument();
 
     // Clicking "Add" launches the programs form in a workspace
-    userEvent.click(addButton);
+    await waitFor(() => user.click(addButton));
+
     expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace');
 
     // Clicking the edit button launches the edit form in a workspace
-    userEvent.click(editButton);
+    await waitFor(() => user.click(editButton));
+
     expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace', {
       programEnrollmentId: mockEnrolledProgramsResponse[0].uuid,
     });
@@ -109,5 +116,8 @@ describe('ProgramsDetailedSummary ', () => {
 });
 
 function renderProgramsOverview() {
-  renderWithSwr(<ProgramsDetailedSummary />);
+  const testProps = {
+    patientUuid: mockPatient.id,
+  };
+  renderWithSwr(<ProgramsDetailedSummary {...testProps} />);
 }

package/src/programs/programs-form.component.tsx

@@ -1,10 +1,10 @@
 import React, { SyntheticEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import filter from 'lodash-es/filter';
 import includes from 'lodash-es/includes';
 import map from 'lodash-es/map';
 import { useSWRConfig } from 'swr';
-import { useTranslation } from 'react-i18next';
 import {
   createErrorHandler,
   showNotification,
@@ -16,14 +16,15 @@ import {
 } from '@openmrs/esm-framework';
 import {
   Button,
+  ButtonSet,
   DatePicker,
   DatePickerInput,
-  Select,
-  SelectItem,
   Form,
   FormGroup,
-  ButtonSet,
-} from 'carbon-components-react';
+  Select,
+  SelectItem,
+  Stack,
+} from '@carbon/react';
 import {
   createProgramEnrollment,
   useAvailablePrograms,
@@ -161,8 +162,8 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
 
   return (
     <Form className={styles.form} onSubmit={handleSubmit}>
-      <div className={styles.formContainer}>
-        <FormGroup style={{ width: '50%' }} legendText={t('program', 'Program')}>
+      <Stack className={styles.formContainer} gap={7}>
+        <FormGroup style={{ maxWidth: '50%' }} legendText={t('programName', 'Program name')}>
           <div className={styles.selectContainer}>
             <Select
               id="program"
@@ -181,7 +182,7 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
             </Select>
           </div>
         </FormGroup>
-        <FormGroup legendText={t('dateEnrolled', 'Date enrolled')}>
+        <FormGroup style={{ maxWidth: '50%' }} legendText={t('dateEnrolled', 'Date enrolled')}>
           <DatePicker
             id="enrollmentDate"
             datePickerType="single"
@@ -195,7 +196,7 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
             <DatePickerInput id="enrollmentDateInput" labelText="" />
           </DatePicker>
         </FormGroup>
-        <FormGroup legendText={t('dateCompleted', 'Date completed')}>
+        <FormGroup style={{ width: '50%' }} legendText={t('dateCompleted', 'Date completed')}>
           <DatePicker
             id="completionDate"
             datePickerType="single"
@@ -228,7 +229,7 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
               ))}
           </Select>
         </FormGroup>
-      </div>
+      </Stack>
       <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
         <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
           {t('cancel', 'Cancel')}

package/src/programs/programs-form.scss

@@ -1,11 +1,4 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
-
-.selectContainer {
-  display: flex;
-  align-items: center;
-}
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .loading {
   margin-left: 1rem;
@@ -13,7 +6,6 @@
   min-height: 2.5rem;
 }
 
-
 .button {
   height: 4rem;
   display: flex;