(chore) O3-4230: Bump @carbon/react to v1.71.0

package.json

@@ -40,7 +40,7 @@
     "url": "https://github.com/openmrs/openmrs-esm-dispensing/issues"
   },
   "dependencies": {
-    "@carbon/react": "1.12.0",
+    "@carbon/react": "1.71.0",
     "classnames": "^2.5.1",
     "lodash-es": "^4.17.21"
   },

src/components/action-buttons.scss

@@ -1,5 +1,7 @@
+@use '@carbon/layout';
+
 .actionBtns {
   float: right;
-  margin-left: 1rem;
-  margin-top: 2rem;
+  margin-left: layout.$spacing-05;
+  margin-top: layout.$spacing-07;
 }

src/components/action-buttons.component.test.tsx → src/components/action-buttons.test.tsx

@@ -1,16 +1,22 @@
-import { render } from '@testing-library/react';
 import React from 'react';
-import ActionButtons from './action-buttons.component';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { configSchema, type PharmacyConfig } from '../config-schema';
 import { type MedicationRequest, MedicationRequestStatus } from '../types';
-import { useConfig } from '@openmrs/esm-framework';
+import ActionButtons from './action-buttons.component';
 
-const mockedUseConfig = useConfig as jest.Mock;
+const mockedUseConfig = jest.mocked(useConfig<PharmacyConfig>);
 const mockPatientUuid = '558494fe-5850-4b34-a3bf-06550334ba4a';
 const mockEncounterUuid = '7aee7123-9e50-4f72-a636-895d77a63e98';
 
-describe('Action Buttons Component tests', () => {
+const defaultPharmacyConfig: PharmacyConfig = {
+  ...getDefaultsFromConfigSchema(configSchema),
+};
+
+describe('ActionButtons', () => {
   beforeEach(() => {
     mockedUseConfig.mockReturnValue({
+      ...defaultPharmacyConfig,
       medicationRequestExpirationPeriodInDays: 90,
       actionButtons: {
         pauseButton: {
@@ -27,7 +33,7 @@ describe('Action Buttons Component tests', () => {
     });
   });
 
-  test('component should render dispense button if active medication', () => {
+  test('renders all the action buttons for an active medication request', () => {
     // status = active, and validity period start set to current datetime
     const medicationRequest: MedicationRequest = {
       resourceType: 'MedicationRequest',
@@ -124,18 +130,21 @@ describe('Action Buttons Component tests', () => {
       },
     };
 
-    const { getByText, container } = render(
+    render(
       <ActionButtons
         patientUuid={mockPatientUuid}
         encounterUuid={mockEncounterUuid}
         medicationRequestBundle={{ request: medicationRequest, dispenses: [] }}
       />,
     );
-    expect(getByText('Dispense')).toBeInTheDocument();
+
+    expect(screen.getByRole('button', { name: /dispense/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /pause/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
   });
 
   // status = active, but validity period start time years in the past
-  test('component should not render dispense button if expired medication', () => {
+  test('should not render the dispense button if the medication request is expired', () => {
     // status = active, and validity period start set to current datetime
     const medicationRequest: MedicationRequest = {
       resourceType: 'MedicationRequest',
@@ -232,13 +241,14 @@ describe('Action Buttons Component tests', () => {
       },
     };
 
-    const { queryByText, container } = render(
+    render(
       <ActionButtons
         patientUuid={mockPatientUuid}
         encounterUuid={mockEncounterUuid}
         medicationRequestBundle={{ request: medicationRequest, dispenses: [] }}
       />,
     );
-    expect(queryByText('Dispense')).not.toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: /dispense/i })).not.toBeInTheDocument();
   });
 });

src/components/medication-card.component.tsx

@@ -1,20 +1,29 @@
 import React from 'react';
-import { Tile } from '@carbon/react';
+import { IconButton, Tile } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
 import { type MedicationReferenceOrCodeableConcept } from '../types';
-import styles from './medication-card.scss';
 import { getMedicationDisplay } from '../utils';
+import styles from './medication-card.scss';
 
 const MedicationCard: React.FC<{
   medication: MedicationReferenceOrCodeableConcept;
-  editAction?: Function;
+  editAction?: () => void;
 }> = ({ medication, editAction }) => {
+  const { t } = useTranslation();
+
   return (
     <Tile className={styles.medicationTile}>
       <p className={styles.medicationName}>
         <strong>{getMedicationDisplay(medication)}</strong>
       </p>
-      {editAction && <Edit onClick={editAction} />}
+      {editAction && (
+        <span className={styles.editButton}>
+          <IconButton align="bottom" kind="ghost" label={t('edit', 'Edit')} onClick={editAction} size="sm">
+            <Edit />
+          </IconButton>
+        </span>
+      )}
     </Tile>
   );
 };

src/components/medication-card.scss

@@ -1,20 +1,25 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .medicationTile {
+  background-color: white;
+  border-left: layout.$spacing-02 solid var(--brand-03);
+  color: $text-02;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  margin: layout.$spacing-01 0 layout.$spacing-05 layout.$spacing-05;
+  padding: 0 layout.$spacing-05;
   width: 100%;
-  margin: 2px 0 8px;
-  padding: 0 8px 0 8px;
-  background-color: #fff;
-  border-left: 4px solid var(--brand-03);
-  color: $text-02;
-  margin-bottom: 1rem !important;
 }
 
 .medicationName {
-  font-size: 15px !important;
+  font-size: layout.$spacing-05 !important;
+}
+
+.editButton {
+  :global(.cds--tooltip-content) {
+    color: white !important;
+  }
 }

src/components/medication-card.component.test.tsx → src/components/medication-card.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { type MedicationReferenceOrCodeableConcept } from '../types';
 import MedicationCard from './medication-card.component';
 
-describe('Medication Card Component tests', () => {
-  test('component should render medication card without edit action button', () => {
+describe('MedicationCardComponent', () => {
+  test('renders the medication card without the edit action button', () => {
     const medication: MedicationReferenceOrCodeableConcept = {
       medicationReference: {
         display: 'Some Medication',
@@ -13,9 +13,10 @@ describe('Medication Card Component tests', () => {
       },
     };
 
-    const { getByText, container } = render(<MedicationCard medication={medication} />);
-    expect(getByText('Some Medication')).toBeInTheDocument();
-    expect(container.querySelector('svg')).not.toBeInTheDocument();
+    render(<MedicationCard medication={medication} />);
+
+    expect(screen.getByText('Some Medication')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 
   test('component should render medication card with edit action button', () => {
@@ -29,8 +30,8 @@ describe('Medication Card Component tests', () => {
 
     const action = () => 0;
 
-    const { getByText, container } = render(<MedicationCard medication={medication} editAction={action} />);
-    expect(getByText('Some Medication')).toBeInTheDocument();
-    expect(container.querySelector('svg')).toBeInTheDocument();
+    render(<MedicationCard medication={medication} editAction={action} />);
+    expect(screen.getByText('Some Medication')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).toBeInTheDocument();
   });
 });

src/components/medication-dispense-review.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .medicationDispenseReviewContainer {
   display: flex;
@@ -17,7 +17,7 @@
   display: flex;
   flex-direction: row;
   flex: 1;
-  gap: spacing.$spacing-05;
+  gap: layout.$spacing-05;
 }
 
 .substitutionReason {
@@ -43,8 +43,8 @@
 
 .formGroup {
   display: flex;
-  margin-bottom: spacing.$spacing-02;
-  padding: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-02;
+  padding: layout.$spacing-05;
 }
 
 :global(.omrs-breakpoint-lt-desktop) .formGroup > span {
@@ -55,15 +55,17 @@
   flex: 3;
 }
 
-.formGroup span {
-  @extend .productiveHeading02;
+.formGroup {
+  span {
+    @extend .productiveHeading02;
+  }
 }
 
 .patientInfo {
   position: sticky;
   z-index: 1000;
   background-color: $ui-02;
-  top: 3rem;
+  top: layout.$spacing-09;
   overflow-y: auto;
 }
 
@@ -83,13 +85,15 @@
 }
 
 :global(.omrs-breakpoint-lt-desktop) .buttonGroup {
-  padding: spacing.$spacing-05 spacing.$spacing-06;
+  padding: layout.$spacing-05 layout.$spacing-06;
   background-color: $ui-02;
 }
 
-.buttonGroup button {
-  max-width: none;
-  width: 50%;
-  height: spacing.$spacing-10;
-  align-items: flex-start;
+.buttonGroup {
+  button {
+    max-width: none;
+    width: 50%;
+    height: layout.$spacing-10;
+    align-items: flex-start;
+  }
 }

src/components/medication-event.component.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { type DosageInstruction, type MedicationDispense, type MedicationRequest, type Quantity } from '../types';
-import styles from './medication-event.scss';
 import {
   getDosageInstruction,
   getQuantity,
   getRefillsAllowed,
   getMedicationDisplay,
   getMedicationReferenceOrCodeableConcept,
 } from '../utils';
-import { useTranslation } from 'react-i18next';
+import styles from './medication-event.scss';
 
 // can render MedicationRequest or MedicationDispense
 const MedicationEvent: React.FC<{

src/components/medication-event.scss

@@ -1,18 +1,23 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .medicationName {
-  font-size: 15px !important;
-}
-
-.bodyLong01 {
-  font-size: 13px !important;
+  font-size: layout.$spacing-05 !important;
 }
 
 .dosage,
 .quantity,
 .refills {
-  color: #525252;
+  color: $text-02;
   font-weight: bold;
 }
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+  font-size: 13px !important;
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}

src/components/patient-details.component.tsx

@@ -1,19 +1,17 @@
-import React, { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { attach, detach, ExtensionSlot, type PatientUuid, usePatient } from '@openmrs/esm-framework';
 import styles from './patient-details.scss';
 
 const PatientDetails: React.FC<{
   patientUuid: PatientUuid;
 }> = ({ patientUuid }) => {
-  const { t } = useTranslation();
   const { patient } = usePatient(patientUuid);
 
   const patientName = patient;
-  const patientPhotoSlotState = React.useMemo(() => ({ patientUuid, patientName }), [patientUuid, patientName]);
+  const patientPhotoSlotState = useMemo(() => ({ patientUuid, patientName }), [patientUuid, patientName]);
 
-  const [showContactDetails, setShowContactDetails] = React.useState(false);
-  const toggleContactDetails = React.useCallback((event: MouseEvent) => {
+  const [showContactDetails, setShowContactDetails] = useState(false);
+  const toggleContactDetails = useCallback((event: MouseEvent) => {
     event.stopPropagation();
     setShowContactDetails((value) => !value);
   }, []);