(feat) O3-4208: Add Configuration to Display Lab Reference Number Inp…

…ut on the Test Order Form (#2111) * feat: add config to show lab reference number input * change to showLabReferenceNumberField Co-authored-by: Dennis Kigen <[email protected]> * update config description Co-authored-by: Dennis Kigen <[email protected]> * fix: fix build --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Nov 21, 2024 · 94e956b · 94e956b
1 parent ecdaee3
commit 94e956b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 27 deletions.
diff --git a/packages/esm-patient-tests-app/src/config-schema.ts b/packages/esm-patient-tests-app/src/config-schema.ts
@@ -48,6 +48,12 @@ export const configSchema = {
       _default: ['1748a953-d12e-4be1-914c-f6b096c6cdef'],
     },
   },
+  showLabReferenceNumberField: {
+    _type: Type.Boolean,
+    _default: true,
+    _description:
+      'Whether to display the Lab Reference number field in the Lab Order form. This field maps to the accesion_number property in the Order data model',
+  },
   labTestsWithOrderReasons: {
     _type: Type.Array,
     _elements: {
@@ -98,5 +104,6 @@ export interface ConfigObject {
     labOrderTypeUuid: string;
     labOrderableConcepts: Array<string>;
   };
+  showLabReferenceNumberField: boolean;
   resultsViewerConcepts: Array<ObsTreeEntry>;
 }
diff --git a/packages/esm-patient-tests-app/src/lab-orders/add-lab-order/lab-order-form.component.tsx b/packages/esm-patient-tests-app/src/lab-orders/add-lab-order/lab-order-form.component.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import {
-  type LabOrderBasketItem,
   type DefaultPatientWorkspaceProps,
+  type LabOrderBasketItem,
   launchPatientWorkspace,
   useOrderBasket,
 } from '@openmrs/esm-patient-common-lib';
-import { translateFrom, useLayoutType, useSession, useConfig, ExtensionSlot } from '@openmrs/esm-framework';
+import { ExtensionSlot, translateFrom, useConfig, useLayoutType, useSession } from '@openmrs/esm-framework';
 import { prepLabOrderPostData, useOrderReasons } from '../api';
 import {
   Button,
@@ -182,29 +182,31 @@ export function LabOrderForm({
               </InputWrapper>
             </Column>
           </Grid>
-          <Grid className={styles.gridRow}>
-            <Column lg={16} md={8} sm={4}>
-              <InputWrapper>
-                <Controller
-                  name="accessionNumber"
-                  control={control}
-                  render={({ field: { onChange, onBlur, value } }) => (
-                    <TextInput
-                      id="labReferenceNumberInput"
-                      invalid={!!errors.accessionNumber}
-                      invalidText={errors.accessionNumber?.message}
-                      labelText={t('labReferenceNumber', 'Lab reference number')}
-                      maxLength={150}
-                      onBlur={onBlur}
-                      onChange={onChange}
-                      size={responsiveSize}
-                      value={value}
-                    />
-                  )}
-                />
-              </InputWrapper>
-            </Column>
-          </Grid>
+          {config.showLabReferenceNumberField ? (
+            <Grid className={styles.gridRow}>
+              <Column lg={16} md={8} sm={4}>
+                <InputWrapper>
+                  <Controller
+                    name="accessionNumber"
+                    control={control}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <TextInput
+                        id="labReferenceNumberInput"
+                        invalid={!!errors.accessionNumber}
+                        invalidText={errors.accessionNumber?.message}
+                        labelText={t('labReferenceNumber', 'Lab reference number')}
+                        maxLength={150}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                        size={responsiveSize}
+                        value={value}
+                      />
+                    )}
+                  />
+                </InputWrapper>
+              </Column>
+            </Grid>
+          ) : null}
           <Grid className={styles.gridRow}>
             <Column lg={8} md={8} sm={4}>
               <InputWrapper>

diff --git a/...s/esm-patient-tests-app/src/test-results/results-viewer/results-viewer.extension.test.tsx b/...s/esm-patient-tests-app/src/test-results/results-viewer/results-viewer.extension.test.tsx
@@ -10,6 +10,7 @@ const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseGetManyObstreeData = jest.fn();
 
 mockUseConfig.mockReturnValue({
+  ...getDefaultsFromConfigSchema(configSchema),
   resultsViewerConcepts: [
     {
       conceptUuid: '9a6f10d6-7fc5-4fb7-9428-24ef7b8d01f7',

diff --git a/packages/esm-patient-tests-app/src/test-results/tree-view/tree-view-wrapper.test.tsx b/packages/esm-patient-tests-app/src/test-results/tree-view/tree-view-wrapper.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useConfig, useLayoutType, usePatient } from '@openmrs/esm-framework';
+import { getDefaultsFromConfigSchema, useConfig, useLayoutType, usePatient } from '@openmrs/esm-framework';
 import { mockPatient } from 'tools';
 import { mockGroupedResults, mockResults } from '__mocks__';
-import { type ConfigObject } from '../../config-schema';
+import { type ConfigObject, configSchema } from '../../config-schema';
 import { type FilterContextProps } from '../filter/filter-types';
 import { useGetManyObstreeData } from '../grouped-timeline';
 import TreeViewWrapper from './tree-view-wrapper.component';
@@ -69,6 +69,7 @@ describe('TreeViewWrapper', () => {
     });
 
     mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
       resultsViewerConcepts: [
         {
           conceptUuid: '9a6f10d6-7fc5-4fb7-9428-24ef7b8d01f7',