(feat) O3-5020: Add a review & approval workflow for lab results configurable

.eslintrc

@@ -65,4 +65,4 @@
     "react-hooks/exhaustive-deps": "warn",
     "react-hooks/rules-of-hooks": "error"
   }
-}
+}

.github/workflows/e2e.yml

@@ -53,8 +53,7 @@ jobs:
           key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
 
       - name: 🎭 Install Playwright Browsers
-        run: npx playwright install chromium --with-deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: yarn playwright install chromium --with-deps
 
       - name: 🚀 Setup local cache server for Turborepo
         uses: felixmosh/turborepo-gh-artifacts@v3
@@ -100,5 +99,4 @@ jobs:
           name: server-logs
           path: './logs'
           retention-days: 2
-          overwrite: true
-
+          overwrite: true

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

@@ -82,7 +82,7 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = ({ groupedOrders }) =
               )}
             </StructuredListBody>
           </StructuredListWrapper>
-          {order.fulfillerStatus === 'COMPLETED' && (
+          {(order.fulfillerStatus === 'COMPLETED' || order.fulfillerStatus === 'DRAFT') && (
             <Accordion>
               <AccordionItem
                 title={<span className={styles.accordionTitle}>{t('viewTestResults', 'View test results')}</span>}
@@ -116,6 +116,21 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = ({ groupedOrders }) =
                   />
                 </div>
               </>
+            ) : order.fulfillerStatus === 'DRAFT' ? (
+              <>
+                <div className={styles.testsOrderedActions}>
+                  <ExtensionSlot
+                    className={styles.menuLink}
+                    state={{ order: order }}
+                    name="amended-ordered-actions-slot"
+                  />
+                  <ExtensionSlot
+                    className={styles.menuLink}
+                    state={{ order: order }}
+                    name="approved-ordered-actions-slot"
+                  />
+                </div>
+              </>
             ) : null}
           </div>
         </div>

src/components/orders-table/orders-data-table.component.tsx

@@ -32,8 +32,7 @@ import {
   usePagination,
 } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { type Order, type FulfillerStatus } from '@openmrs/esm-patient-common-lib';
-import { type FlattenedOrder, type OrderAction } from '../../types';
+import { type FulfillerStatus, type FlattenedOrder, type OrderAction, type Order } from '../../types';
 import { useLabOrders } from '../../laboratory-resource';
 import { OrdersDateRangePicker } from './orders-date-range-picker.component';
 import ListOrderDetails from './list-order-details.component';

src/config-schema.ts

@@ -41,8 +41,13 @@ export const configSchema = {
     _default: '05a29f94-c0ed-11e2-94be-8c13b969e334',
     _description: 'Needed if the "id" column of "labTableColumns" is used. Is the OpenMRS ID by default.',
   },
+  enableReviewingLabResultsBeforeApproval: {
+    _type: Type.Boolean,
+    _default: true,
+    _description:
+      'Enable reviewing lab results before final approval. When enabled, lab results will be submitted for review before being approved and finalized.',
+  },
 };
-
 export type Config = {
   laboratoryOrderTypeUuid: string;
   encounterTypeUuid: string;
@@ -52,4 +57,5 @@ export type Config = {
   };
   labTableColumns: Array<LabTableColumnName>;
   patientIdIdentifierTypeUuid: string;
+  enableReviewingLabResultsBeforeApproval: boolean;
 };

src/index.ts

@@ -31,6 +31,11 @@ export const pickupLabRequestModal = getAsyncLifecycle(
   options,
 );
 
+export const approvalLabResultsModal = getAsyncLifecycle(
+  () => import('./lab-tabs/modals/approval-lab-results-modal.component'),
+  options,
+);
+
 export const rejectLabRequestModal = getAsyncLifecycle(
   () => import('./lab-tabs/modals/reject-lab-request-modal.component'),
   options,
@@ -61,12 +66,24 @@ export const declinedLabRequestsTable = getAsyncLifecycle(
   options,
 );
 
+// t('pending review tests', 'pending review tests')
+export const pendingReviewLabRequestsTable = getAsyncLifecycle(
+  () => import('./lab-tabs/data-table-extensions/pending-review-lab-request-table.extension'),
+  options,
+);
+
 // t('Worklist', 'Worklist')
 export const worklistTile = getAsyncLifecycle(
   () => import('./lab-tiles/in-progress-lab-requests-tile.component'),
   options,
 );
 
+// t('Pending review tests', 'Pending review tests')
+export const pendingReviewListTile = getAsyncLifecycle(
+  () => import('./lab-tiles/pending-review-lab-results-tile.component'),
+  options,
+);
+
 // t("Referred tests", "Referred tests")
 export const completedTile = getAsyncLifecycle(
   () => import('./lab-tiles/completed-lab-requests-tile.component'),
@@ -93,6 +110,16 @@ export const rejectLabRequestAction = getAsyncLifecycle(
   options,
 );
 
+export const approveLabResultsAction = getAsyncLifecycle(
+  () => import('./lab-tabs/actions/approve-lab-results-action.component'),
+  options,
+);
+
+export const amendLabResultsAction = getAsyncLifecycle(
+  () => import('./lab-tabs/actions/amend-lab-results-action.component'),
+  options,
+);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }

src/lab-tabs/actions/amend-lab-results-action.component.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { showModal } from '@openmrs/esm-framework';
+import { type Order } from '@openmrs/esm-patient-common-lib';
+import styles from './actions.scss';
+
+interface AmendLabResultsActionMenuProps {
+  order: Order;
+  orders?: Order[];
+}
+
+const AmendLabResultsAction: React.FC<AmendLabResultsActionMenuProps> = ({ order, orders }) => {
+  const { t } = useTranslation();
+  const unsupportedStatuses = ['DECLINED', 'IN_PROGRESS', 'NEW'];
+
+  const handleLaunchModal = () => {
+    const editableOrders = orders
+      ? orders.filter((order) => ['COMPLETED', 'ON_HOLD'].includes(order.fulfillerStatus))
+      : [order].filter((order) => ['COMPLETED', 'ON_HOLD'].includes(order.fulfillerStatus));
+
+    const dispose = showModal('edit-lab-results-modal', {
+      closeModal: () => dispose(),
+      orders: editableOrders,
+    });
+  };
+
+  return (
+    <Button
+      className={styles.actionButton}
+      disabled={unsupportedStatuses.includes(order.fulfillerStatus)}
+      size="sm"
+      kind="danger"
+      onClick={handleLaunchModal}
+    >
+      {t('amendLabResults', 'Amend lab results')}
+    </Button>
+  );
+};
+
+export default AmendLabResultsAction;

src/lab-tabs/actions/approve-lab-results-action.component.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { showModal } from '@openmrs/esm-framework';
+import { type Order } from '@openmrs/esm-patient-common-lib';
+import styles from './actions.scss';
+
+interface ApproveLabRequestActionMenuProps {
+  order: Order;
+}
+
+const ApproveLabRequestAction: React.FC<ApproveLabRequestActionMenuProps> = ({ order }) => {
+  const { t } = useTranslation();
+  const unsupportedStatuses = ['COMPLETED', 'DECLINED', 'IN_PROGRESS'];
+
+  const launchModal = useCallback(() => {
+    const dispose = showModal('approval-lab-results-modal', {
+      closeModal: () => dispose(),
+      order,
+    });
+  }, [order]);
+
+  return (
+    <Button
+      className={styles.actionButton}
+      disabled={unsupportedStatuses.includes(order.fulfillerStatus)}
+      size="sm"
+      kind="primary"
+      key={order.uuid}
+      onClick={launchModal}
+    >
+      {t('approveLabResults', 'Approve lab results')}
+    </Button>
+  );
+};
+
+export default ApproveLabRequestAction;

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

@@ -11,7 +11,7 @@ interface PickLabRequestActionMenuProps {
 
 const PickupLabRequestAction: React.FC<PickLabRequestActionMenuProps> = ({ order }) => {
   const { t } = useTranslation();
-  const unsupportedStatuses = ['COMPLETED', 'DECLINED', 'IN_PROGRESS'];
+  const unsupportedStatuses = ['COMPLETED', 'DECLINED', 'IN_PROGRESS', 'ON_HOLD'];
 
   const launchModal = useCallback(() => {
     const dispose = showModal('pickup-lab-request-modal', {

src/lab-tabs/data-table-extensions/pending-review-lab-request-table.extension.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import OrdersDataTable from '../../components/orders-table/orders-data-table.component';
+
+const PendingReviewLabRequestsTable: React.FC = () => {
+  return (
+    <OrdersDataTable
+      excludeColumns={[]}
+      fulfillerStatus="DRAFT"
+      useFilter={false}
+      excludeCanceledAndDiscontinuedOrders={false}
+      actions={[]}
+    />
+  );
+};
+
+export default PendingReviewLabRequestsTable;

src/lab-tabs/laboratory-tabs.component.tsx

@@ -1,65 +1,72 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
-import { type AssignedExtension, Extension, useAssignedExtensions } from '@openmrs/esm-framework';
+import { type AssignedExtension, Extension, useAssignedExtensions, useConfig } from '@openmrs/esm-framework';
 import { ComponentContext } from '@openmrs/esm-framework/src/internal';
 import styles from './laboratory-tabs.scss';
+import { type Config } from '../config-schema';
 
 const labPanelSlot = 'lab-panels-slot';
 
 const LaboratoryOrdersTabs: React.FC = () => {
   const { t } = useTranslation();
+  const { enableReviewingLabResultsBeforeApproval } = useConfig<Config>();
   const [selectedTab, setSelectedTab] = useState(0);
   const tabExtensions = useAssignedExtensions(labPanelSlot) as AssignedExtension[];
 
+  const filteredExtensions = tabExtensions
+    .filter((extension) => Object.keys(extension.meta).length > 0)
+    .filter((extension) => {
+      if (extension.meta.name === 'pendingReviewPanel') {
+        return enableReviewingLabResultsBeforeApproval === true;
+      }
+      return true;
+    });
+
   return (
     <main>
       <section>
         <div className={styles.tabs}>
           <Tabs selectedIndex={selectedTab} onChange={({ selectedIndex }) => setSelectedTab(selectedIndex)}>
             <TabList style={{ paddingLeft: '1rem' }} aria-label="Laboratory tabs" contained>
-              {tabExtensions
-                .filter((extension) => Object.keys(extension.meta).length > 0)
-                .map((extension, index) => {
-                  const { name, title } = extension.meta;
+              {filteredExtensions.map((extension, index) => {
+                const { name, title } = extension.meta;
 
-                  if (name && title) {
-                    return (
-                      <Tab key={index} className={styles.tab} id={`${title || index}-tab`}>
-                        {t(title, {
-                          ns: extension.moduleName,
-                          defaultValue: title,
-                        })}
-                      </Tab>
-                    );
-                  } else {
-                    return null;
-                  }
-                })}
-            </TabList>
-            <TabPanels>
-              {tabExtensions
-                .filter((extension) => Object.keys(extension.meta).length > 0)
-                .map((extension, index) => {
+                if (name && title) {
                   return (
-                    <TabPanel key={`${extension.meta.title}-tab-${index}`}>
-                      <ComponentContext.Provider
-                        key={extension.id}
-                        value={{
-                          moduleName: extension.moduleName,
-                          featureName: 'laboratory',
-                          extension: {
-                            extensionId: extension.id,
-                            extensionSlotName: labPanelSlot,
-                            extensionSlotModuleName: extension.moduleName,
-                          },
-                        }}
-                      >
-                        <Extension />
-                      </ComponentContext.Provider>
-                    </TabPanel>
+                    <Tab key={index} className={styles.tab} id={`${title || index}-tab`}>
+                      {t(title, {
+                        ns: extension.moduleName,
+                        defaultValue: title,
+                      })}
+                    </Tab>
                   );
-                })}
+                } else {
+                  return null;
+                }
+              })}
+            </TabList>
+            <TabPanels>
+              {filteredExtensions.map((extension, index) => {
+                return (
+                  <TabPanel key={`${extension.meta.title}-tab-${index}`}>
+                    <ComponentContext.Provider
+                      key={extension.id}
+                      value={{
+                        moduleName: extension.moduleName,
+                        featureName: 'laboratory',
+                        extension: {
+                          extensionId: extension.id,
+                          extensionSlotName: labPanelSlot,
+                          extensionSlotModuleName: extension.moduleName,
+                        },
+                      }}
+                    >
+                      <Extension />
+                    </ComponentContext.Provider>
+                  </TabPanel>
+                );
+              })}
             </TabPanels>
           </Tabs>
         </div>