Repository: openmrs/openmrs-esm-laboratory-app
Pull request #138: (fix) O3-4663 :  Fix overlapping buttons in test orders section
Author: login: Muppasanipraneeth
Created: 2025-04-26T04:46:44Z | Merged: 2025-05-02T13:03:33Z

## Requirements

- [x] This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a [conventional commit](https://o3-dev.docs.openmrs.org/#/getting_started/contributing?id=your-pr-title-should-indicate-the-type-of-change-it-is) label. See existing PR titles for inspiration.
- [x] My work conforms to the [OpenMRS 3.0 Styleguide](https://om.rs/styleguide) and [design documentation](https://zeroheight.com/23a080e38/p/880723-introduction).
- [ ] My work includes tests or is validated by existing tests.

## Summary
<!-- Please describe what problems your PR addresses. -->
This PR fixes the issue where the `Reject lab request` and `Pick Lab Request` buttons were overlapping in the patient's test order section. 

## Screenshots
# Before
<img width="1470" alt="Screenshot 2025-04-26 at 9 48 22 AM" src="https://github.com/user-attachments/assets/b2d7d0d2-f100-40c4-807c-22e177201a30" />
<img width="1206" alt="Screenshot 2025-05-01 at 10 34 24 AM" src="https://github.com/user-attachments/assets/0b782a6f-58a7-4bd0-975d-630af02af869" />


# After
<img width="1470" alt="Screenshot 2025-05-02 at 2 48 16 PM" src="https://github.com/user-attachments/assets/e56e96c7-de44-4245-bef6-ac46af094c5e" />

<img width="1470" alt="Screenshot 2025-05-02 at 2 49 06 PM" src="https://github.com/user-attachments/assets/fbae10f0-ba28-4970-a922-71bb5806fe29" />




<!-- Required if you are making UI changes. -->

## Related Issue
<!-- Paste the link to the Jira ticket here if one exists. -->
<!-- https://issues.openmrs.org/browse/O3- -->
[Jira ticket](https://openmrs.atlassian.net/browse/O3-4663)

## Other
<!-- Anything not covered above -->
[discussion in slack link ]( https://openmrs.slack.com/archives/CKS32D55G/p1746016595752009)




Diff:
diff --git a/src/components/orders-table/list-order-details.component.tsx b/src/components/orders-table/list-order-details.component.tsx
index d88ac5ea..442bdce8 100644
--- a/src/components/orders-table/list-order-details.component.tsx
+++ b/src/components/orders-table/list-order-details.component.tsx
@@ -95,35 +95,27 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
               </StructuredListRow>
 
               <div className={styles.buttonSection}>
-                <div className={styles.actionButtons}>
-                  {/* @ts-ignore */}
-                  {row.fulfillerStatus === 'New' ||
-                  row.fulfillerStatus === 'RECEIVED' ||
-                  row.fulfillerStatus == null ? (
-                    <>
-                      <div className={styles.actionButtons}>
-                        <div className={styles.rejectButton}>
-                          <ExtensionSlot state={{ order: row }} name="rejected-ordered-actions-slot" />
-                        </div>
-                        <div className={styles.testsOrderedActions}>
-                          <ExtensionSlot state={{ order: row }} name="tests-ordered-actions-slot" />
-                        </div>
-                      </div>
-                    </>
-                  ) : row.fulfillerStatus === 'IN_PROGRESS' ? (
-                    <>
-                      <div className={styles.testsOrderedActions}>
-                        <ExtensionSlot
-                          className={styles.menuLink}
-                          state={{ order: row }}
-                          name="inprogress-tests-actions-slot"
-                        />
-                      </div>
-                    </>
-                  ) : (
-                    <div></div>
-                  )}
-                </div>
+                {/* @ts-ignore */}
+                {row.fulfillerStatus === 'New' || row.fulfillerStatus === 'RECEIVED' || row.fulfillerStatus == null ? (
+                  <>
+                    <div className={styles.testsOrderedActions}>
+                      <ExtensionSlot state={{ order: row }} name="rejected-ordered-actions-slot" />
+                      <ExtensionSlot state={{ order: row }} name="tests-ordered-actions-slot" />
+                    </div>
+                  </>
+                ) : row.fulfillerStatus === 'IN_PROGRESS' ? (
+                  <>
+                    <div className={styles.testsOrderedActions}>
+                      <ExtensionSlot
+                        className={styles.menuLink}
+                        state={{ order: row }}
+                        name="inprogress-tests-actions-slot"
+                      />
+                    </div>
+                  </>
+                ) : (
+                  <div></div>
+                )}
               </div>
             </div>
           </div>
diff --git a/src/components/orders-table/list-order-details.scss b/src/components/orders-table/list-order-details.scss
index 5a4c5448..65db5305 100644
--- a/src/components/orders-table/list-order-details.scss
+++ b/src/components/orders-table/list-order-details.scss
@@ -5,11 +5,11 @@
 
 .buttonSection {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
   padding-top: layout.$spacing-03;
   width: 100%;
-  gap: 10rem;
+  margin-left: layout.$spacing-05;
 }
 
 .nameOrderRow {
@@ -26,18 +26,10 @@
   font-weight: bold;
 }
 
-.actionButtons {
-  gap: layout.$spacing-03;
-}
-
 .testsOrderedActions {
   margin-left: auto;
   display: flex;
-}
-
-.rejectButton {
-  margin-right: auto;
-  display: flex;
+  padding-right: 1rem;
 }
 
 .menuLink {
diff --git a/src/lab-tabs/actions/actions.scss b/src/lab-tabs/actions/actions.scss
index e88f2783..5db60207 100644
--- a/src/lab-tabs/actions/actions.scss
+++ b/src/lab-tabs/actions/actions.scss
@@ -8,6 +8,11 @@
   text-align: center;
   padding: 0 layout.$spacing-04;
   font-size: type.type-scale(2);
+  .actionButtonIcon {
+    margin-right: layout.$spacing-02;
+    color: white;
+    fill: white;
+  }
 }
 
 .actionRejectButton {
@@ -17,4 +22,5 @@
   text-align: center;
   padding: 0 layout.$spacing-04;
   font-size: type.type-scale(2);
+  border: none;
 }
diff --git a/src/lab-tabs/actions/add-lab-request-results-action.component.tsx b/src/lab-tabs/actions/add-lab-request-results-action.component.tsx
index c57670cc..04e400ca 100644
--- a/src/lab-tabs/actions/add-lab-request-results-action.component.tsx
+++ b/src/lab-tabs/actions/add-lab-request-results-action.component.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from '@carbon/react';
 import { mutate } from 'swr';
 import { useTranslation } from 'react-i18next';
-import { launchWorkspace, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { AddIcon, launchWorkspace, restBaseUrl, useConfig } from '@openmrs/esm-framework';
 import { type Order } from '@openmrs/esm-patient-common-lib';
 import { type Config } from '../../config-schema';
 import styles from './actions.scss';
@@ -29,7 +29,14 @@ const AddLabRequestResultsAction: React.FC<AddLabRequestResultsActionProps> = ({
   };
 
   return (
-    <Button className={styles.actionButton} kind="primary" onClick={launchTestResultsWorkspace} size="sm">
+    <Button
+      className={styles.actionButton}
+      kind="primary"
+      renderIcon={() => <AddIcon className={styles.actionButtonIcon} />}
+      iconDescription="Add lab results"
+      onClick={launchTestResultsWorkspace}
+      size="sm"
+    >
       {t('addLabResult', 'Add lab results')}
     </Button>
   );
diff --git a/src/routes.json b/src/routes.json
index 8a8ca8fb..ebef3e88 100644
--- a/src/routes.json
+++ b/src/routes.json
@@ -107,14 +107,19 @@
       "slot": "rejected-ordered-actions-slot"
     },
     {
-      "name": "add-lab-request-results-action",
-      "component": "addLabRequestResultsAction",
-      "slot": "inprogress-tests-actions-slot"
+      "name": "edit-lab-request-tests-ordered-action",
+      "component": "editLabRequestAction",
+      "slot": "completed-ordered-actions-slot"
     },
     {
       "name": "reject-lab-request-worklist-action",
       "component": "rejectLabRequestAction",
       "slot": "inprogress-tests-actions-slot"
+    },
+    {
+      "name": "add-lab-request-results-action",
+      "component": "addLabRequestResultsAction",
+      "slot": "inprogress-tests-actions-slot"
     }
   ]
 }


Reviews:
user: login: Muppasanipraneeth
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T06:52:05Z
user: login: pirupius
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-02T11:32:59Z
user: login: pirupius
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-02T13:01:38Z
user: login: pirupius
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-02T13:02:17Z

Review comments:
diff_hunk: @@ -101,20 +101,25 @@
       "component": "pickupLabRequestAction",
       "slot": "tests-ordered-actions-slot"
     },
-    {
+   {
       "name": "reject-lab-request-tests-ordered-action",
       "component": "rejectLabRequestAction",
       "slot": "rejected-ordered-actions-slot"
     },
     {
-      "name": "add-lab-request-results-action",
-      "component": "addLabRequestResultsAction",
-      "slot": "inprogress-tests-actions-slot"
+      "name": "edit-lab-request-tests-ordered-action",
+      "component": "editLabRequestAction",
+      "slot": "completed-ordered-actions-slot"
     },
     {
       "name": "reject-lab-request-worklist-action",
       "component": "rejectLabRequestAction",
       "slot": "inprogress-tests-actions-slot"
+    },
+    {
+      "name": "add-lab-request-results-action",
+      "component": "addLabRequestResultsAction",
+      "slot": "inprogress-tests-actions-slot"
path: src/routes.json
user: login: Muppasanipraneeth
body: reordered
created_at: 2025-05-01T06:52:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -101,20 +101,25 @@
       "component": "pickupLabRequestAction",
       "slot": "tests-ordered-actions-slot"
     },
-    {
+   {
path: src/routes.json
user: login: pirupius
body: One final thing before we get this in, this indentation change looks unintentional
created_at: 2025-05-02T11:31:44Z
author_association: MEMBER
diff_hunk: @@ -101,20 +101,25 @@
       "component": "pickupLabRequestAction",
       "slot": "tests-ordered-actions-slot"
     },
-    {
+     {
path: src/routes.json
user: login: pirupius
body: ```suggestion
    {
```
created_at: 2025-05-02T13:01:38Z
author_association: MEMBER

PR comments:
user: login: Muppasanipraneeth
created_at: 2025-04-26T06:51:21Z
body: @denniskigen can you review : )
author_association: CONTRIBUTOR
user: login: pirupius
created_at: 2025-04-30T07:27:51Z
body: Hi @Muppasanipraneeth did you share this screenshot in the `ux-design-advisory` slack channel? The pattern for other places like the visits and forms is the 2 buttons being side by side to each other. If you haven't please share it and tag Paul Adams or Ciaran 
author_association: MEMBER
user: login: pirupius
created_at: 2025-05-02T08:31:59Z
body: @Muppasanipraneeth are u still working on this? I've seen the updated screenshots and the buttons don't match the design Paul Adams shared on slack or [zeplin](https://zpl.io/q11Nmkl) specifically the reject button for which u added an outline. This PR was focused on the buttons so would u prefer to update the rest of the UI to match the design in this PR or is this something you have bad width for in follow up PR's

![Screenshot 2025-04-30 at 14 39 37](https://github.com/user-attachments/assets/cfbcc2a7-3c12-4aa1-9519-144e77a8cf43)

author_association: MEMBER
user: login: Muppasanipraneeth
created_at: 2025-05-02T09:09:18Z
body: @pirupius In this PR, the focus is just on the button alignment. I will remove the red outline for the "Reject Lab Order" button. If you want me to update the entire card UI to match the design, I can do that in a separate PR. Just need clarification—should I proceed only with the button alignment, or also update the rest of the UI?


author_association: CONTRIBUTOR
user: login: pirupius
created_at: 2025-05-02T11:29:55Z
body: @Muppasanipraneeth Please proceed with the button fixes and remove the outline
author_association: MEMBER
user: login: pirupius
created_at: 2025-05-02T13:03:51Z
body: Thanks @Muppasanipraneeth for this fix
author_association: MEMBER
user: login: Muppasanipraneeth
created_at: 2025-05-02T13:05:10Z
body: Thanks @pirupius : )
author_association: CONTRIBUTOR