Merge branch 'main' into id-field

README.md

@@ -8,7 +8,7 @@ This repository contains frontend modules for the OpenMRS SPA. These modules rel
 
 - [Active visits app](packages/esm-active-visits-app/)
 - [Appointments app](packages/esm-appointments-app/)
-- [Outpatient app](packages/esm-outpatient-app/README.md)
+- [Service queues](packages/esm-service-queues-app/README.md)
 - [Patient search](packages/esm-patient-search-app)
 - [Patient registration](packages/esm-patient-registration-app)
 - [Patient list](packages/esm-patient-list-app)

packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
-import { ContentSwitcher, DatePicker, DatePickerInput, Layer, Switch, TextInput } from '@carbon/react';
+import { ContentSwitcher, Layer, Switch, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
 import { generateFormatting } from '../../date-util';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
@@ -42,7 +42,7 @@ export const DobField: React.FC = () => {
     setFieldValue('monthsEstimated', '');
   };
 
-  const onDateChange = ([birthdate]) => {
+  const onDateChange = (birthdate) => {
     setFieldValue('birthdate', birthdate);
   };
 
@@ -89,17 +89,20 @@ export const DobField: React.FC = () => {
       <Layer>
         {!dobUnknown ? (
           <div className={styles.dobField}>
-            <DatePicker dateFormat={dateFormat} datePickerType="single" onChange={onDateChange} maxDate={format(today)}>
-              <DatePickerInput
-                id="birthdate"
-                {...birthdate}
-                placeholder={placeHolder}
-                labelText={t('dateOfBirthLabelText', 'Date of Birth')}
-                invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
-                invalidText={birthdateMeta.error && t(birthdateMeta.error)}
-                value={format(birthdate.value)}
-              />
-            </DatePicker>
+            <OpenmrsDatePicker
+              id="birthdate"
+              {...birthdate}
+              dateFormat={dateFormat}
+              onChange={onDateChange}
+              maxDate={format(today)}
+              labelText={t('dateOfBirthLabelText', 'Date of Birth')}
+              invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
+              invalidText={birthdateMeta.error && t(birthdateMeta.error)}
+              value={format(birthdate.value)}
+              carbonOptions={{
+                placeholder: placeHolder,
+              }}
+            />
           </div>
         ) : (
           <div className={styles.grid}>

packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.test.tsx

@@ -8,6 +8,7 @@ import { DobField } from './dob.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { initialFormValues } from '../../patient-registration.component';
 import { FormValues } from '../../patient-registration-types';
+import { OpenmrsDatePicker } from '@openmrs/esm-styleguide/src/public';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -21,6 +22,18 @@ jest.mock('@openmrs/esm-framework', () => {
         },
       },
     })),
+    getLocale: jest.fn().mockReturnValue('en'),
+    OpenmrsDatePicker: (datePickerProps) => (
+      <OpenmrsDatePicker
+        id={datePickerProps.id}
+        dateFormat={datePickerProps.dateFormat}
+        onChange={datePickerProps.onChange}
+        maxDate={datePickerProps.maxDate}
+        labelText={datePickerProps.labelText}
+        value={datePickerProps.value}
+        carbonOptions={datePickerProps.carbonOptions}
+      />
+    ),
   };
 });
 

packages/esm-patient-registration-app/src/patient-registration/patient-registration.test.tsx

@@ -11,22 +11,14 @@ import { PatientRegistration } from './patient-registration.component';
 import { RegistrationConfig } from '../config-schema';
 import { mockedAddressTemplate } from './field/address/tests/mocks';
 import { mockPatient } from '../../../../tools/test-helpers';
+import { OpenmrsDatePicker } from '@openmrs/esm-styleguide/src/public';
 
 const mockedUseConfig = useConfig as jest.Mock;
 const mockedUsePatient = usePatient as jest.Mock;
 const mockedSaveEncounter = saveEncounter as jest.Mock;
 const mockedSavePatient = savePatient as jest.Mock;
 const mockedShowToast = showToast as jest.Mock;
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    validator: jest.fn(),
-  };
-});
-
 // Mock field.resource using the manual mock (in __mocks__)
 jest.mock('./field/field.resource');
 
@@ -55,6 +47,18 @@ jest.mock('@openmrs/esm-framework', () => {
   return {
     ...originalModule,
     validator: jest.fn(),
+    getLocale: jest.fn().mockReturnValue('en'),
+    OpenmrsDatePicker: (datePickerProps) => (
+      <OpenmrsDatePicker
+        id={datePickerProps.id}
+        dateFormat={datePickerProps.dateFormat}
+        onChange={datePickerProps.onChange}
+        maxDate={datePickerProps.maxDate}
+        labelText={datePickerProps.labelText}
+        value={datePickerProps.value}
+        carbonOptions={datePickerProps.carbonOptions}
+      />
+    ),
   };
 });
 
@@ -345,7 +349,7 @@ describe('patient registration component', () => {
       jest.clearAllMocks();
     });
 
-    it('edits patient demographics', async () => {
+    fit('edits patient demographics', async () => {
       const user = userEvent.setup();
 
       mockedSavePatient.mockResolvedValue({});
@@ -379,7 +383,7 @@ describe('patient registration component', () => {
       expect(givenNameInput.value).toBe('John');
       expect(familyNameInput.value).toBe('Wilson');
       expect(middleNameInput.value).toBeFalsy();
-      expect(dateOfBirthInput.value).toBe('4/4/1972');
+      expect(dateOfBirthInput.value).toBe('04/04/1972');
       expect(genderInput.value).toBe('Male');
 
       // do some edits

packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.test.tsx

@@ -5,6 +5,7 @@ import { initialFormValues } from '../../patient-registration.component';
 import { DemographicsSection } from './demographics-section.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { FormValues } from '../../patient-registration-types';
+import { OpenmrsDatePicker } from '@openmrs/esm-styleguide/src/public';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -15,6 +16,18 @@ jest.mock('@openmrs/esm-framework', () => {
     useConfig: jest.fn().mockImplementation(() => ({
       fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
     })),
+    getLocale: jest.fn().mockReturnValue('en'),
+    OpenmrsDatePicker: (datePickerProps) => (
+      <OpenmrsDatePicker
+        id={datePickerProps.id}
+        dateFormat={datePickerProps.dateFormat}
+        onChange={datePickerProps.onChange}
+        maxDate={datePickerProps.maxDate}
+        labelText={datePickerProps.labelText}
+        value={datePickerProps.value}
+        carbonOptions={datePickerProps.carbonOptions}
+      />
+    ),
   };
 });
 

packages/esm-patient-search-app/src/compact-patient-search/compact-patient-banner.component.tsx

@@ -101,11 +101,11 @@ const PatientSearchResults = React.forwardRef<HTMLDivElement, PatientSearchResul
                   <h2 className={styles.patientName}>{`${patient.name?.[0]?.given?.join(' ')} ${
                     patient.name?.[0]?.family
                   }`}</h2>
-                  <ExtensionSlot
+                  {/* <ExtensionSlot
                     name="patient-banner-tags-slot"
                     state={{ patient, patientUuid: patient.id }}
                     className={styles.flexRow}
-                  />
+                  /> */}
                 </div>
                 <p className={styles.demographics}>
                   {getGender(patient.gender)} <span className={styles.middot}>&middot;</span> {age(patient.birthDate)}

packages/esm-outpatient-app/README.md → packages/esm-service-queues-app/README.md

@@ -9,7 +9,7 @@ The `Service Queues` app is a frontend module that enables users to track a pati
 The key component of the service queue app is the `Active Visits` table. It displays a tabular overview of the active visits ongoing in a facility and the wait time of patients. Users can add patients to the service queue by starting visits for them. They can also view information from the current active visits as well as the previous visit on each queue entry by clicking the table extension slot. Users can also change the priority and status of an entry in the queue from the UI, effectively moving a patient from one point in the queue to another. In order to indicate that a patient is currently attending service, click on the bell icon. In order to edit an entry, click the pencil icon. 
 
 Amend the following concepts in the configuration schema to get started using the module:
-- `priorityConceptSetUuid` - concept UUID for `prioritity`.
+- `priorityConceptSetUuid` - concept UUID for `priority`.
 - `defaultPriorityConceptUuid` - concept UUID for `not urgent`.
 - `serviceConceptSetUuid` - concept UUID for `service`.
 - `statusConceptSetUuid` - concept UUID for `status`.

packages/esm-outpatient-app/package.json → packages/esm-service-queues-app/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "@openmrs/esm-outpatient-app",
+  "name": "@openmrs/esm-service-queues-app",
   "version": "5.0.0",
   "description": "Outpatient front-end module for the OpenMRS SPA",
-  "browser": "dist/openmrs-esm-outpatient-app.js",
+  "browser": "dist/openmrs-esm-service-queues-app.js",
   "main": "src/index.ts",
   "source": true,
   "license": "MPL-2.0",

packages/esm-outpatient-app/src/index.ts → packages/esm-service-queues-app/src/index.ts

@@ -5,7 +5,7 @@ import { dashboardMeta } from './dashboard.meta';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-const moduleName = '@openmrs/esm-outpatient-app';
+const moduleName = '@openmrs/esm-service-queues-app';
 
 const options = {
   featureName: 'outpatient',

packages/esm-outpatient-app/src/patient-queue-header/patient-queue-header.component.tsx → packages/esm-service-queues-app/src/patient-queue-header/patient-queue-header.component.tsx

@@ -32,7 +32,7 @@ const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
         <div className={styles['left-justified-items']}>
           <PatientQueueIllustration />
           <div className={styles['page-labels']}>
-            <p>{t('serviceQueue', 'Service queue')}</p>
+            <p>{t('serviceQueues', 'Service queues')}</p>
             <p className={styles['page-name']}>{title ?? t('home', 'Home')}</p>
           </div>
         </div>