From e87de4fbb59d78d8dbff4d13c0e611cd05e1480e Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Tue, 3 Oct 2023 08:21:03 +0530
Subject: [PATCH 1/2] Fix Flaky Cypress test in Facility Module  (#6384)

* fix random facility page failure

* fix random facility page failure
---
 cypress/e2e/facility_spec/locations.cy.ts       | 1 +
 cypress/pageobject/Facility/FacilityCreation.ts | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/facility_spec/locations.cy.ts b/cypress/e2e/facility_spec/locations.cy.ts
index d5b3cc9990f..cac9adbdde1 100644
--- a/cypress/e2e/facility_spec/locations.cy.ts
+++ b/cypress/e2e/facility_spec/locations.cy.ts
@@ -13,6 +13,7 @@ describe("Location Management Section", () => {
     cy.intercept("GET", "**/api/v1/facility/**").as("getFacilities");
     cy.get("[id='facility-details']").first().click();
     cy.wait("@getFacilities").its("response.statusCode").should("eq", 200);
+    cy.get("h1.text-3xl.font-bold", { timeout: 10000 }).should("be.visible");
     cy.get("#manage-facility-dropdown button").should("be.visible");
     cy.get("[id='manage-facility-dropdown']").scrollIntoView().click();
     cy.get("[id=location-management]").click();
diff --git a/cypress/pageobject/Facility/FacilityCreation.ts b/cypress/pageobject/Facility/FacilityCreation.ts
index 42ec6d8fd7c..e0a572ccaec 100644
--- a/cypress/pageobject/Facility/FacilityCreation.ts
+++ b/cypress/pageobject/Facility/FacilityCreation.ts
@@ -106,6 +106,7 @@ class FacilityPage {
   }
 
   clickManageFacilityDropdown() {
+    cy.get("h1.text-3xl.font-bold", { timeout: 20000 }).should("be.visible");
     cy.get("#manage-facility-dropdown button").scrollIntoView();
     cy.get("#manage-facility-dropdown button")
       .contains("Manage Facility")
@@ -198,8 +199,6 @@ class FacilityPage {
     cy.intercept("GET", "**/api/v1/facility/**").as("getManagePage");
     cy.go("back");
     cy.wait("@getManagePage").its("response.statusCode").should("eq", 200);
-    cy.get("#manage-facility-dropdown").scrollIntoView();
-    cy.get("#manage-facility-dropdown").should("exist");
   }
 
   verifyfacilityviewassetredirection() {

From b7fc53c670bb85e68631f8ce3b02defcda675ae7 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Tue, 3 Oct 2023 12:15:41 +0530
Subject: [PATCH 2/2] Revert "Prescriptions: Shrink discontinued prescriptions
 + Flip MAR timeline + Freeze primary columns in horizontal scroll (#6282)"
 (#6386)

This reverts commit 5009a86abfb96e9b21f8371635176e4c3f73c5a7.
---
 src/Common/hooks/useRangePagination.ts        |  32 +--
 .../PrescriptionAdministrationsTable.tsx      | 266 +++++++-----------
 src/Redux/actions.tsx                         |   2 +-
 3 files changed, 120 insertions(+), 180 deletions(-)

diff --git a/src/Common/hooks/useRangePagination.ts b/src/Common/hooks/useRangePagination.ts
index e6bbe9f573e..7652ae546c1 100644
--- a/src/Common/hooks/useRangePagination.ts
+++ b/src/Common/hooks/useRangePagination.ts
@@ -9,18 +9,17 @@ interface Props {
   bounds: DateRange;
   perPage: number;
   slots?: number;
-  snapToLatest?: boolean;
-  reverse?: boolean;
+  defaultEnd?: boolean;
 }
 
 const useRangePagination = ({ bounds, perPage, ...props }: Props) => {
   const [currentRange, setCurrentRange] = useState(
-    getInitialBounds(bounds, perPage, props.snapToLatest)
+    getInitialBounds(bounds, perPage, props.defaultEnd)
   );
 
   useEffect(() => {
-    setCurrentRange(getInitialBounds(bounds, perPage, props.snapToLatest));
-  }, [bounds, perPage, props.snapToLatest]);
+    setCurrentRange(getInitialBounds(bounds, perPage, props.defaultEnd));
+  }, [bounds, perPage, props.defaultEnd]);
 
   const next = () => {
     const { end } = currentRange;
@@ -63,24 +62,17 @@ const useRangePagination = ({ bounds, perPage, ...props }: Props) => {
     }
 
     const slots: DateRange[] = [];
-    const { start, end } = currentRange;
+    const { start } = currentRange;
     const delta = perPage / props.slots;
 
     for (let i = 0; i < props.slots; i++) {
-      if (props.snapToLatest) {
-        slots.push({
-          start: new Date(end.valueOf() - delta * (i - 1)),
-          end: new Date(end.valueOf() - delta * i),
-        });
-      } else {
-        slots.push({
-          start: new Date(start.valueOf() + delta * i),
-          end: new Date(start.valueOf() + delta * (i + 1)),
-        });
-      }
+      slots.push({
+        start: new Date(start.valueOf() + delta * i),
+        end: new Date(start.valueOf() + delta * (i + 1)),
+      });
     }
 
-    return props.reverse ? slots.reverse() : slots;
+    return slots;
   }, [currentRange, props.slots, perPage]);
 
   return {
@@ -98,7 +90,7 @@ export default useRangePagination;
 const getInitialBounds = (
   bounds: DateRange,
   perPage: number,
-  snapToLatest?: boolean
+  defaultEnd?: boolean
 ) => {
   const deltaBounds = bounds.end.valueOf() - bounds.start.valueOf();
 
@@ -106,7 +98,7 @@ const getInitialBounds = (
     return bounds;
   }
 
-  if (snapToLatest) {
+  if (defaultEnd) {
     return {
       start: new Date(bounds.end.valueOf() - perPage),
       end: bounds.end,
diff --git a/src/Components/Medicine/PrescriptionAdministrationsTable.tsx b/src/Components/Medicine/PrescriptionAdministrationsTable.tsx
index 470caa1042b..81282126d7c 100644
--- a/src/Components/Medicine/PrescriptionAdministrationsTable.tsx
+++ b/src/Components/Medicine/PrescriptionAdministrationsTable.tsx
@@ -47,10 +47,6 @@ export default function PrescriptionAdministrationsTable({
   const { t } = useTranslation();
 
   const [state, setState] = useState<State>();
-
-  const [showDiscontinued, setShowDiscontinued] = useState(false);
-  const [discontinuedCount, setDiscontinuedCount] = useState<number>();
-
   const pagination = useRangePagination({
     bounds: state?.administrationsTimeBounds ?? {
       start: new Date(),
@@ -58,8 +54,7 @@ export default function PrescriptionAdministrationsTable({
     },
     perPage: 24 * 60 * 60 * 1000,
     slots: 24,
-    snapToLatest: true,
-    reverse: true,
+    defaultEnd: true,
   });
   const [showBulkAdminister, setShowBulkAdminister] = useState(false);
 
@@ -69,13 +64,8 @@ export default function PrescriptionAdministrationsTable({
   );
 
   const refetch = useCallback(async () => {
-    const filters = {
-      is_prn: prn,
-      prescription_type: "REGULAR",
-    };
-
     const res = await dispatch(
-      list(showDiscontinued ? filters : { ...filters, discontinued: false })
+      list({ is_prn: prn, prescription_type: "REGULAR" })
     );
 
     setState({
@@ -84,14 +74,7 @@ export default function PrescriptionAdministrationsTable({
       ),
       administrationsTimeBounds: getAdministrationBounds(res.data.results),
     });
-
-    if (showDiscontinued === false) {
-      const discontinuedRes = await dispatch(
-        list({ ...filters, discontinued: true, limit: 0 })
-      );
-      setDiscontinuedCount(discontinuedRes.data.count);
-    }
-  }, [consultation_id, showDiscontinued, dispatch]);
+  }, [consultation_id, dispatch]);
 
   useEffect(() => {
     refetch();
@@ -158,22 +141,17 @@ export default function PrescriptionAdministrationsTable({
         }
       />
 
-      <div className="relative overflow-x-auto rounded border border-white shadow">
-        <table className="w-full whitespace-nowrap rounded">
+      <div className="overflow-x-auto rounded border border-white shadow">
+        <table className="w-full overflow-x-scroll whitespace-nowrap rounded">
           <thead className="bg-white text-xs font-medium text-black">
             <tr>
-              <th className="sticky left-0 z-10 bg-white py-3 pl-4 text-left">
-                <div className="flex justify-between gap-2">
-                  <span className="text-sm">{t("medicine")}</span>
-                  <span className="hidden px-2 text-center text-xs leading-none lg:block">
-                    <p>Dosage &</p>
-                    <p>
-                      {!state?.prescriptions[0]?.is_prn
-                        ? "Frequency"
-                        : "Indicator"}
-                    </p>
-                  </span>
-                </div>
+              <th className="py-3 pl-4 text-left text-sm">{t("medicine")}</th>
+
+              <th className="px-2 text-center leading-none">
+                <p>Dosage &</p>
+                <p>
+                  {!state?.prescriptions[0]?.is_prn ? "Frequency" : "Indicator"}
+                </p>
               </th>
 
               <th>
@@ -184,10 +162,8 @@ export default function PrescriptionAdministrationsTable({
                   border
                   className="mx-2 px-1"
                   variant="secondary"
-                  disabled={!pagination.hasNext}
-                  onClick={pagination.next}
-                  tooltip="Next 24 hours"
-                  tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
+                  disabled={!pagination.hasPrevious}
+                  onClick={pagination.previous}
                 >
                   <CareIcon icon="l-angle-left-b" className="text-base" />
                 </ButtonV2>
@@ -201,26 +177,24 @@ export default function PrescriptionAdministrationsTable({
                       <p className="h-4 w-6 animate-pulse rounded bg-gray-500" />
                     </th>
                   ))
-                : pagination.slots
-                    ?.map(({ start, end }, index) => (
-                      <th
-                        className="tooltip px-0.5 py-2 text-center font-semibold leading-none text-gray-900"
-                        key={index}
-                      >
-                        <p>{formatDateTime(end, "DD/MM")}</p>
-                        <p>{formatDateTime(end, "HH:mm")}</p>
-
-                        <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs font-normal">
-                          Administration(s) between
-                          <br />
-                          <strong>{formatTime(start)}</strong> and{" "}
-                          <strong>{formatTime(end)}</strong>
-                          <br />
-                          on <strong>{formatDate(start)}</strong>
-                        </span>
-                      </th>
-                    ))
-                    .reverse()}
+                : pagination.slots?.map(({ start, end }, index) => (
+                    <th
+                      className="tooltip px-0.5 py-2 text-center font-semibold leading-none text-gray-900"
+                      key={index}
+                    >
+                      <p>{formatDateTime(start, "DD/MM")}</p>
+                      <p>{formatDateTime(start, "HH:mm")}</p>
+
+                      <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs font-normal">
+                        Administration(s) between
+                        <br />
+                        <strong>{formatTime(start)}</strong> and{" "}
+                        <strong>{formatTime(end)}</strong>
+                        <br />
+                        on <strong>{formatDate(start)}</strong>
+                      </span>
+                    </th>
+                  ))}
               <th>
                 <ButtonV2
                   size="small"
@@ -229,10 +203,8 @@ export default function PrescriptionAdministrationsTable({
                   border
                   className="mx-2 px-1"
                   variant="secondary"
-                  disabled={!pagination.hasPrevious}
-                  onClick={pagination.previous}
-                  tooltip="Previous 24 hours"
-                  tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
+                  disabled={!pagination.hasNext}
+                  onClick={pagination.next}
                 >
                   <CareIcon icon="l-angle-right-b" className="text-base" />
                 </ButtonV2>
@@ -255,23 +227,6 @@ export default function PrescriptionAdministrationsTable({
           </tbody>
         </table>
 
-        {showDiscontinued === false && !!discontinuedCount && (
-          <ButtonV2
-            variant="secondary"
-            className="sticky left-0 z-10 w-full"
-            ghost
-            onClick={() => setShowDiscontinued(true)}
-          >
-            <span className="flex w-full justify-start gap-1 text-sm">
-              <CareIcon icon="l-eye" className="text-lg" />
-              <span>
-                Show <strong>{discontinuedCount}</strong> other discontinued
-                prescription(s)
-              </span>
-            </span>
-          </ButtonV2>
-        )}
-
         {state?.prescriptions.length === 0 && (
           <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-gray-500">
             <CareIcon className="care-l-tablets text-5xl" />
@@ -328,7 +283,12 @@ const PrescriptionRow = ({ prescription, ...props }: PrescriptionRowProps) => {
   }, [prescription.id, dispatch, props.intervals]);
 
   return (
-    <>
+    <tr
+      className={classNames(
+        "border-separate border border-gray-300 bg-gray-100 transition-all duration-200 ease-in-out hover:border-primary-300 hover:bg-primary-100"
+        // prescription.discontinued && "opacity-60"
+      )}
+    >
       {showDiscontinue && (
         <DiscontinuePrescription
           prescription={prescription}
@@ -396,89 +356,77 @@ const PrescriptionRow = ({ prescription, ...props }: PrescriptionRowProps) => {
           </div>
         </DialogModal>
       )}
-      <tr
-        className={classNames(
-          "group border-separate border border-gray-300 bg-gray-100 transition-all duration-200 ease-in-out hover:border-primary-300 hover:bg-primary-100"
-          // prescription.discontinued && "opacity-60"
-        )}
+      <td
+        className="cursor-pointer py-3 pl-4 text-left"
+        onClick={() => setShowDetails(true)}
       >
-        <td
-          className="sticky left-0 z-10 cursor-pointer bg-gray-100 py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
-          onClick={() => setShowDetails(true)}
-        >
-          <div className="flex flex-col gap-1 lg:flex-row lg:justify-between lg:gap-2">
-            <div className="flex items-center gap-2">
-              <span
-                className={classNames(
-                  "text-sm font-semibold",
-                  prescription.discontinued ? "text-gray-700" : "text-gray-900"
-                )}
-              >
-                {prescription.medicine_object?.name ??
-                  prescription.medicine_old}
-              </span>
-
-              {prescription.discontinued && (
-                <span className="hidden rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700 lg:block">
-                  {t("discontinued")}
-                </span>
-              )}
-
-              {prescription.route && (
-                <span className="hidden rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700 lg:block">
-                  {t(prescription.route)}
-                </span>
-              )}
-            </div>
+        <div className="flex items-center gap-2">
+          <span
+            className={classNames(
+              "text-sm font-semibold",
+              prescription.discontinued ? "text-gray-700" : "text-gray-900"
+            )}
+          >
+            {prescription.medicine_object?.name ?? prescription.medicine_old}
+          </span>
 
-            <div className="flex gap-1 text-xs font-semibold text-gray-900 lg:flex-col lg:px-2 lg:text-center">
-              <p>{prescription.dosage}</p>
-              <p>
-                {!prescription.is_prn
-                  ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
-                  : prescription.indicator}
-              </p>
-            </div>
-          </div>
-        </td>
+          {prescription.discontinued && (
+            <span className="rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700">
+              {t("discontinued")}
+            </span>
+          )}
 
-        <td />
-        {/* Administration Cells */}
-        {props.intervals
-          .map(({ start, end }, index) => (
-            <td className="text-center" key={index}>
-              {administrations === undefined ? (
-                <CareIcon
-                  icon="l-spinner"
-                  className="animate-spin text-lg text-gray-500"
-                />
-              ) : (
-                <AdministrationCell
-                  administrations={administrations}
-                  interval={{ start, end }}
-                  prescription={prescription}
-                />
-              )}
-            </td>
-          ))
-          .reverse()}
-        <td />
-
-        {/* Action Buttons */}
-        <td className="space-x-1 pr-2 text-right">
-          <ButtonV2
-            type="button"
-            size="small"
-            disabled={prescription.discontinued}
-            ghost
-            border
-            onClick={() => setShowAdminister(true)}
-          >
-            {t("administer")}
-          </ButtonV2>
+          {prescription.route && (
+            <span className="rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700">
+              {t(prescription.route)}
+            </span>
+          )}
+        </div>
+      </td>
+
+      <td className="text-center text-xs font-semibold text-gray-900">
+        <p>{prescription.dosage}</p>
+        <p>
+          {!prescription.is_prn
+            ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
+            : prescription.indicator}
+        </p>
+      </td>
+
+      <td />
+      {/* Administration Cells */}
+      {props.intervals.map(({ start, end }, index) => (
+        <td className="text-center" key={index}>
+          {administrations === undefined ? (
+            <CareIcon
+              icon="l-spinner"
+              className="animate-spin text-lg text-gray-500"
+            />
+          ) : (
+            <AdministrationCell
+              administrations={administrations}
+              interval={{ start, end }}
+              prescription={prescription}
+            />
+          )}
         </td>
-      </tr>
-    </>
+      ))}
+      <td />
+
+      {/* Action Buttons */}
+      <td className="space-x-1 pr-2 text-right">
+        <ButtonV2
+          type="button"
+          size="small"
+          disabled={prescription.discontinued}
+          ghost
+          border
+          onClick={() => setShowAdminister(true)}
+        >
+          {t("administer")}
+        </ButtonV2>
+      </td>
+    </tr>
   );
 };
 
diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx
index 1a5bd7e4fb1..6e0d91fc59d 100644
--- a/src/Redux/actions.tsx
+++ b/src/Redux/actions.tsx
@@ -1003,7 +1003,7 @@ export const PrescriptionActions = (consultation_external_id: string) => {
   const pathParams = { consultation_external_id };
 
   return {
-    list: (query?: Record<string, string | boolean | number>) => {
+    list: (query?: Partial<Prescription>) => {
       let altKey;
       if (query?.is_prn !== undefined) {
         altKey = query?.is_prn