(refactor) O3-3445: Action button items should use the OverflowMenuIt…

…em component (#1869) * (refactor) O3-3445: Action button items in the patient banner should use OverflowMenuItem * Rename closeModal function for consistency
openmrs · Jun 21, 2024 · 0819080 · 0819080
1 parent d3a791a
commit 0819080
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 96 deletions.
diff --git a/packages/esm-patient-chart-app/src/actions-buttons/action-button.scss b/packages/esm-patient-chart-app/src/actions-buttons/action-button.scss
@@ -0,0 +1,3 @@
+.menuitem {
+  max-width: none;
+}
diff --git a/packages/esm-patient-chart-app/src/actions-buttons/add-past-visit.component.tsx b/packages/esm-patient-chart-app/src/actions-buttons/add-past-visit.component.tsx
@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { showModal } from '@openmrs/esm-framework';
+import styles from './action-button.scss';
 
 interface AddPastVisitOverflowMenuItemProps {
   patientUuid?: string;
@@ -13,29 +15,20 @@ const AddPastVisitOverflowMenuItem: React.FC<AddPastVisitOverflowMenuItemProps>
 }) => {
   const { t } = useTranslation();
 
-  const openModal = useCallback(() => {
+  const handleLaunchModal = useCallback(() => {
     const dispose = showModal('start-visit-dialog', {
-      patientUuid,
-      launchPatientChart,
       closeModal: () => dispose(),
+      launchPatientChart,
+      patientUuid,
     });
   }, [patientUuid, launchPatientChart]);
 
   return (
-    <li className="cds--overflow-menu-options__option">
-      <button
-        className="cds--overflow-menu-options__btn"
-        role="menuitem"
-        title={t('addPastVisit', 'Add past visit')}
-        data-floating-menu-primary-focus
-        onClick={openModal}
-        style={{
-          maxWidth: '100vw',
-        }}
-      >
-        <span className="cds--overflow-menu-options__option-content">{t('addPastVisit', 'Add past visit')}</span>
-      </button>
-    </li>
+    <OverflowMenuItem
+      className={styles.menuitem}
+      itemText={t('addPastVisit', 'Add past visit')}
+      onClick={handleLaunchModal}
+    />
   );
 };
 

diff --git a/packages/esm-patient-chart-app/src/actions-buttons/cancel-visit.component.tsx b/packages/esm-patient-chart-app/src/actions-buttons/cancel-visit.component.tsx
@@ -1,16 +1,18 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { useVisit, showModal } from '@openmrs/esm-framework';
+import styles from './action-button.scss';
 
 interface CancelVisitOverflowMenuItemProps {
   patientUuid: string;
 }
 
 const CancelVisitOverflowMenuItem: React.FC<CancelVisitOverflowMenuItemProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-
   const { currentVisit } = useVisit(patientUuid);
-  const openModal = useCallback(() => {
+
+  const handleLaunchModal = useCallback(() => {
     const dispose = showModal('cancel-visit-dialog', {
       closeModal: () => dispose(),
       patientUuid,
@@ -19,20 +21,11 @@ const CancelVisitOverflowMenuItem: React.FC<CancelVisitOverflowMenuItemProps> =
 
   return (
     currentVisit && (
-      <li className="cds--overflow-menu-options__option">
-        <button
-          className="cds--overflow-menu-options__btn"
-          role="menuitem"
-          title={t('cancelVisit', 'Cancel visit')}
-          data-floating-menu-primary-focus
-          onClick={openModal}
-          style={{
-            maxWidth: '100vw',
-          }}
-        >
-          <span className="cds--overflow-menu-options__option-content">{t('cancelVisit', 'Cancel visit')}</span>
-        </button>
-      </li>
+      <OverflowMenuItem
+        className={styles.menuitem}
+        itemText={t('cancelVisit', 'Cancel visit')}
+        onClick={handleLaunchModal}
+      />
     )
   );
 };

diff --git a/packages/esm-patient-chart-app/src/actions-buttons/mark-patient-alive.component.tsx b/packages/esm-patient-chart-app/src/actions-buttons/mark-patient-alive.component.tsx
@@ -1,34 +1,32 @@
 import React, { useCallback } from 'react';
-import { OverflowMenuItem } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { showModal } from '@openmrs/esm-framework';
 import { usePatientDeceased } from '../deceased/deceased.resource';
+import styles from './action-button.scss';
 
 interface MarkPatientAliveOverflowMenuItemProps {
   patientUuid?: string;
 }
 
 const MarkPatientAliveOverflowMenuItem: React.FC<MarkPatientAliveOverflowMenuItemProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-
   const { isDead, isLoading: isPatientLoading } = usePatientDeceased(patientUuid);
 
-  const openModal = useCallback(() => {
+  const handleLaunchModal = useCallback(() => {
     const dispose = showModal('confirm-alive-modal', {
       patientUuid,
-      closeDialog: () => dispose(),
+      closeModal: () => dispose(),
     });
   }, [patientUuid]);
 
   return (
     !isPatientLoading &&
     isDead && (
       <OverflowMenuItem
+        className={styles.menuitem}
         itemText={t('markAlive', 'Mark alive')}
-        onClick={openModal}
-        style={{
-          maxWidth: '100vw',
-        }}
+        onClick={handleLaunchModal}
       />
     )
   );

diff --git a/packages/esm-patient-chart-app/src/actions-buttons/mark-patient-deceased.component.tsx b/packages/esm-patient-chart-app/src/actions-buttons/mark-patient-deceased.component.tsx
@@ -1,23 +1,23 @@
 import React, { useCallback } from 'react';
-import { OverflowMenuItem } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { usePatientDeceased } from '../deceased/deceased.resource';
+import styles from './action-button.scss';
 
 const MarkPatientDeceasedOverflowMenuItem = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const handleClick = useCallback(() => launchPatientWorkspace('mark-patient-deceased-workspace-form'), []);
   const { isDead, isLoading: isPatientLoading } = usePatientDeceased(patientUuid);
 
+  const handleLaunchModal = useCallback(() => launchPatientWorkspace('mark-patient-deceased-workspace-form'), []);
+
   return (
     !isPatientLoading &&
     !isDead && (
       <OverflowMenuItem
+        className={styles.menuitem}
         itemText={t('markDeceased', 'Mark deceased')}
-        onClick={handleClick}
-        style={{
-          maxWidth: '100vw',
-        }}
+        onClick={handleLaunchModal}
       />
     )
   );

diff --git a/packages/esm-patient-chart-app/src/actions-buttons/print-identifier-sticker.component.tsx b/packages/esm-patient-chart-app/src/actions-buttons/print-identifier-sticker.component.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
-import { OverflowMenuItem } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { showModal, useConfig, usePatient } from '@openmrs/esm-framework';
+import styles from './action-button.scss';
 
 interface PrintIdentifierStickerOverflowMenuItemProps {
   patientUuid: string;
@@ -16,7 +17,7 @@ const PrintIdentifierStickerOverflowMenuItem: React.FC<PrintIdentifierStickerOve
     externalModuleName: '@openmrs/esm-patient-banner-app',
   });
 
-  const launchModal = useCallback(() => {
+  const handleLaunchModal = useCallback(() => {
     const dispose = showModal('print-identifier-sticker-modal', {
       closeModal: () => dispose(),
       patient,
@@ -27,11 +28,9 @@ const PrintIdentifierStickerOverflowMenuItem: React.FC<PrintIdentifierStickerOve
     patient &&
     Boolean(showPrintIdentifierStickerButton) && (
       <OverflowMenuItem
+        className={styles.menuitem}
         itemText={t('printIdentifierSticker', 'Print identifier sticker')}
-        onClick={launchModal}
-        style={{
-          maxWidth: '100vw',
-        }}
+        onClick={handleLaunchModal}
       />
     )
   );

diff --git a/packages/esm-patient-chart-app/src/actions-buttons/start-visit.component.tsx b/packages/esm-patient-chart-app/src/actions-buttons/start-visit.component.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { usePatient, useVisit } from '@openmrs/esm-framework';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import styles from './action-button.scss';
 
 interface StartVisitOverflowMenuItemProps {
   patientUuid: string;
@@ -11,26 +13,18 @@ const StartVisitOverflowMenuItem: React.FC<StartVisitOverflowMenuItemProps> = ({
   const { t } = useTranslation();
   const { currentVisit } = useVisit(patientUuid);
   const { patient } = usePatient(patientUuid);
-  const handleClick = useCallback(() => launchPatientWorkspace('start-visit-workspace-form'), []);
-
   const isDeceased = Boolean(patient?.deceasedDateTime);
 
+  const handleLaunchModal = useCallback(() => launchPatientWorkspace('start-visit-workspace-form'), []);
+
   return (
     !currentVisit &&
     !isDeceased && (
-      <li className="cds--overflow-menu-options__option">
-        <button
-          className="cds--overflow-menu-options__btn"
-          role="menuitem"
-          data-floating-menu-primary-focus
-          onClick={handleClick}
-          style={{
-            maxWidth: '100vw',
-          }}
-        >
-          <span className="cds--overflow-menu-options__option-content">{t('startVisit', 'Start visit')}</span>
-        </button>
-      </li>
+      <OverflowMenuItem
+        className={styles.menuitem}
+        itemText={t('startVisit', 'Start visit')}
+        onClick={handleLaunchModal}
+      />
     )
   );
 };

diff --git a/packages/esm-patient-chart-app/src/actions-buttons/stop-visit.component.tsx b/packages/esm-patient-chart-app/src/actions-buttons/stop-visit.component.tsx
@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { showModal, useVisit } from '@openmrs/esm-framework';
+import { OverflowMenuItem } from '@carbon/react';
+import styles from './action-button.scss';
 
 interface StopVisitOverflowMenuItemProps {
   patientUuid: string;
@@ -10,7 +12,7 @@ const StopVisitOverflowMenuItem: React.FC<StopVisitOverflowMenuItemProps> = ({ p
   const { t } = useTranslation();
   const { currentVisit } = useVisit(patientUuid);
 
-  const openModal = useCallback(() => {
+  const handleLaunchModal = useCallback(() => {
     const dispose = showModal('end-visit-dialog', {
       closeModal: () => dispose(),
       patientUuid,
@@ -19,20 +21,11 @@ const StopVisitOverflowMenuItem: React.FC<StopVisitOverflowMenuItemProps> = ({ p
 
   return (
     currentVisit && (
-      <li className="cds--overflow-menu-options__option">
-        <button
-          className="cds--overflow-menu-options__btn"
-          role="menuitem"
-          title={`${t('endVisit', 'End visit')}`}
-          data-floating-menu-primary-focus
-          onClick={openModal}
-          style={{
-            maxWidth: '100vw',
-          }}
-        >
-          <span className="cds--overflow-menu-options__option-content">{t('endVisit', 'End visit')}</span>
-        </button>
-      </li>
+      <OverflowMenuItem
+        className={styles.menuitem}
+        itemText={`${t('endVisit', 'End visit')}`}
+        onClick={handleLaunchModal}
+      />
     )
   );
 };

diff --git a/packages/esm-patient-chart-app/src/deceased/confirmation-dialog.component.tsx b/packages/esm-patient-chart-app/src/deceased/confirmation-dialog.component.tsx
@@ -4,25 +4,25 @@ import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 
 interface ConfirmationDialogProps {
-  closeDialog: () => void;
+  closeModal: () => void;
   handleSubmit: (e: any) => void;
 }
 
-const ConfirmMarkAsDeceasedDialog: React.FC<ConfirmationDialogProps> = ({ closeDialog, handleSubmit }) => {
+const ConfirmMarkAsDeceasedDialog: React.FC<ConfirmationDialogProps> = ({ closeModal, handleSubmit }) => {
   const { t } = useTranslation();
 
   return (
     <div>
-      <ModalHeader closeModal={closeDialog} title={t('confirmDeceased', 'Confirm Deceased')} />
+      <ModalHeader closeModal={closeModal} title={t('confirmDeceased', 'Confirm Deceased')} />
       <ModalBody>{t('markAsDeceased', 'Are you sure you want to mark patient as deceased?')}</ModalBody>
       <ModalFooter>
-        <Button kind="secondary" onClick={closeDialog}>
+        <Button kind="secondary" onClick={closeModal}>
           {t('no', 'No')}
         </Button>
         <Button
           kind="danger"
           onClick={(e) => {
-            closeDialog();
+            closeModal();
             handleSubmit(e);
           }}
         >

diff --git a/packages/esm-patient-chart-app/src/deceased/deceased-form.component.tsx b/packages/esm-patient-chart-app/src/deceased/deceased-form.component.tsx
@@ -16,7 +16,6 @@ import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-l
 import { ExtensionSlot, useLayoutType, showSnackbar, showModal, ResponsiveWrapper } from '@openmrs/esm-framework';
 import { markPatientDeceased, usePatientDeathConcepts, usePatientDeceased } from './deceased.resource';
 import BaseConceptAnswer from './base-concept-answer.component';
-
 import styles from './deceased-form.scss';
 
 const MarkPatientDeceasedForm: React.FC<DefaultPatientWorkspaceProps> = ({ patientUuid, closeWorkspace }) => {
@@ -56,7 +55,7 @@ const MarkPatientDeceasedForm: React.FC<DefaultPatientWorkspaceProps> = ({ patie
 
   const onSaveClick = () => {
     const dispose = showModal('confirm-deceased-dialog', {
-      closeDialog: () => dispose(),
+      closeModal: () => dispose(),
       handleSubmit,
     });
   };

diff --git a/packages/esm-patient-chart-app/src/deceased/mark-alive.modal.tsx b/packages/esm-patient-chart-app/src/deceased/mark-alive.modal.tsx
@@ -6,20 +6,20 @@ import { Button, ModalFooter, ModalHeader, ModalBody } from '@carbon/react';
 import { markPatientAlive } from './deceased.resource';
 
 interface ConfirmationDialogProps {
-  closeDialog: () => void;
+  closeModal: () => void;
   patientUuid: string;
 }
 
-const MarkPatientAsAlive: React.FC<ConfirmationDialogProps> = ({ closeDialog, patientUuid }) => {
+const MarkPatientAsAlive: React.FC<ConfirmationDialogProps> = ({ closeModal, patientUuid }) => {
   const { t } = useTranslation();
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    closeDialog();
+    closeModal();
     markPatientAlive(patientUuid, new AbortController())
       .then((response) => {
         if (response.ok) {
-          closeDialog();
+          closeModal();
           showSnackbar({
             isLowContrast: true,
             kind: 'success',
@@ -40,10 +40,10 @@ const MarkPatientAsAlive: React.FC<ConfirmationDialogProps> = ({ closeDialog, pa
 
   return (
     <div>
-      <ModalHeader closeModal={closeDialog} title={t('markAsAlive', 'Mark As Alive')} />
+      <ModalHeader closeModal={closeModal} title={t('markAsAlive', 'Mark As Alive')} />
       <ModalBody>{t('confirmMarkAsAlive', 'Are you sure, you want to mark patient as alive?')}</ModalBody>
       <ModalFooter>
-        <Button kind="secondary" onClick={closeDialog}>
+        <Button kind="secondary" onClick={closeModal}>
           {t('no', 'No')}
         </Button>
         <Button onClick={(e) => handleSubmit(e)}>{t('yes', 'Yes')}</Button>