(feat) add tests-ordered-actions-slot

src/components/orders-table/list-order-details.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Tile } from '@carbon/react';
-import { launchWorkspace, showModal } from '@openmrs/esm-framework';
+import { ExtensionSlot, launchWorkspace, showModal } from '@openmrs/esm-framework';
 import { ListOrdersDetailsProps } from '../../types';
 import { OrderDetail } from './order-detail.component';
 import styles from './list-order-details.scss';
@@ -25,58 +25,17 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
               <OrderDetail label={t('instructions', 'Instructions').toUpperCase()} value={row.instructions ?? '--'} />
             </div>
             <div className={styles.actionButtons}>
-              {props.actions
-                .sort((a, b) => {
-                  // Replace 'property' with the actual property you want to sort by
-                  if (a.order < b.order) return -1;
-                  if (a.order > b.order) return 1;
-                  return 0;
-                })
-                .map((action) => {
-                  if (action.actionName === 'pickupLabRequest') {
-                    return (
-                      <Button
-                        kind="primary"
-                        key={`${action.actionName}-${row.uuid}`}
-                        onClick={() => {
-                          const dispose = showModal('pickup-lab-request-modal', {
-                            closeModal: () => dispose(),
-                            order: row,
-                          });
-                        }}
-                      >
-                        {t('pickupLabRequest', 'Pick up lab request')}
-                      </Button>
-                    );
-                  }
-                  if (action.actionName === 'labResultsForm') {
-                    return (
-                      <Button
-                        key={`${action.actionName}-${row.uuid}`}
-                        kind="primary"
-                        onClick={() => launchWorkspace('test-results-form-workspace', { order: row })}
-                      >
-                        {t('labResultsForm', 'Lab results form')}
-                      </Button>
-                    );
-                  }
-                  if (action.actionName === 'rejectLabRequest') {
-                    return (
-                      <Button
-                        key={`${action.actionName}-${row.uuid}`}
-                        kind="danger"
-                        onClick={() => {
-                          const dispose = showModal('reject-lab-request-modal', {
-                            closeModal: () => dispose(),
-                            order: row,
-                          });
-                        }}
-                      >
-                        {t('rejectLabRequest', 'Reject lab request')}
-                      </Button>
-                    );
-                  }
-                })}
+              {row.fulfillerStatus === 'New' || row.fulfillerStatus === 'RECEIVED' || row.fulfillerStatus == null ? (
+                <ExtensionSlot className={styles.menuLink} state={{ order: row }} name="tests-ordered-actions-slot" />
+              ) : row.fulfillerStatus === 'IN_PROGRESS' ? (
+                <ExtensionSlot
+                  className={styles.menuLink}
+                  state={{ order: row }}
+                  name="inprogress-tests-actions-slot"
+                />
+              ) : (
+                <div></div>
+              )}
             </div>
           </Tile>
         ))}

src/components/orders-table/list-order-details.scss

@@ -54,8 +54,4 @@
 .actionButtons {
   margin-left: layout.$spacing-05;
   margin-top: layout.$spacing-07;
-
-  > * + * {
-    margin-left: layout.$spacing-03;
-  }
 }

src/lab-tabs/actions/actions.scss

@@ -1,3 +1,9 @@
-.menuItem {
-  max-width: none;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+
+.actionButton {
+ margin-top: layout.$spacing-01;
 }

src/lab-tabs/actions/add-lab-request-results-action.component.tsx

@@ -1,6 +1,6 @@
 import { Order } from '@openmrs/esm-patient-common-lib';
 import React from 'react';
-import { OverflowMenuItem } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import styles from './actions.scss';
 import { launchWorkspace } from '@openmrs/esm-framework';
@@ -12,11 +12,14 @@ const AddLabRequestResultsAction: React.FC<AddLabRequestResultsActionProps> = ({
   const { t } = useTranslation();
 
   return (
-    <OverflowMenuItem
-      itemText={t('labResultsForm', 'Lab Results Form')}
+    <Button
+      className={styles.actionButton}
+      kind="primary"
+      key={`${order.uuid}`}
       onClick={() => launchWorkspace('test-results-form-workspace', { order })}
-      className={styles.menuItem}
-    />
+    >
+      {t('labResultsForm', 'Lab Results Form')}
+    </Button>
   );
 };
 

src/lab-tabs/actions/pickup-lab-request-action.component.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { OverflowMenuItem } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { showModal } from '@openmrs/esm-framework';
 import { Order } from '@openmrs/esm-patient-common-lib';
 import styles from './actions.scss';
@@ -21,12 +21,15 @@ const PickupLabRequestAction: React.FC<PickLabRequestActionMenuProps> = ({ order
   }, [order]);
 
   return (
-    <OverflowMenuItem
-      itemText={t('pickupLabRequest', 'Pick up lab request')}
-      onClick={launchModal}
+    <Button
+      className={styles.actionButton}
       disabled={unSupportedStatuses.includes(order.fulfillerStatus)}
-      className={styles.menuItem}
-    />
+      kind="primary"
+      key={`${order.uuid}`}
+      onClick={launchModal}
+    >
+      {t('pickLabRequest', 'Pick Lab Request')}
+    </Button>
   );
 };
 

src/lab-tabs/actions/reject-lab-request-action.component.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { OverflowMenuItem } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { showModal } from '@openmrs/esm-framework';
 import { Order } from '@openmrs/esm-patient-common-lib';
@@ -20,14 +20,15 @@ const RejectLabRequestAction: React.FC<RejectLabRequestActionProps> = ({ order }
   }, [order]);
 
   return (
-    <OverflowMenuItem
-      className={styles.menuItem}
+    <Button
+      kind="danger"
+      className={styles.actionButton}
       disabled={unSupportedStatuses.includes(order.fulfillerStatus)}
-      hasDivider
-      isDelete
-      itemText={t('rejectLabRequest', 'Reject lab request')}
+      key={`${order.uuid}`}
       onClick={launchRejectLabRequestModal}
-    />
+    >
+      {t('rejectLabRequest', 'Reject lab request')}
+    </Button>
   );
 };