Update valueset async select component (#1376)

* Valuset async select use url to query data * Update failing tests * Move valueset URLs to fhir helpers package
onaio · Apr 16, 2024 · e472a7a · e472a7a
1 parent d54eed2
commit e472a7a
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 32 deletions.
diff --git a/packages/fhir-group-management/package.json b/packages/fhir-group-management/package.json
@@ -32,6 +32,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
+    "@opensrp/fhir-helpers": "workspace:^",
     "@opensrp/notifications": "^0.0.5",
     "@opensrp/pkg-config": "^0.0.9",
     "@opensrp/rbac": "workspace:^",

diff --git a/packages/fhir-group-management/src/components/LocationInventory/form.tsx b/packages/fhir-group-management/src/components/LocationInventory/form.tsx
@@ -26,13 +26,11 @@ import {
   donor,
   PONumber,
   groupResourceType,
-  unicefSectionValueSetId,
   id,
   active,
   name,
   type,
   actual,
-  unicefDonorValueSetId,
 } from '../../constants';
 import {
   getLocationInventoryPayload,
@@ -50,6 +48,7 @@ import { useHistory } from 'react-router';
 import { Dayjs } from 'dayjs';
 import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation';
 import { Dictionary } from '@onaio/utils';
+import { unicefSectionValueSetURI, unicefDonorValueSetURI } from '@opensrp/fhir-helpers';
 
 const { Item: FormItem } = Form;
 
@@ -214,7 +213,7 @@ const AddLocationInventoryForm = (props: LocationInventoryFormProps) => {
         <ValueSetAsyncSelect
           placeholder={t('Select UNICEF section')}
           showSearch={true}
-          valueSetId={unicefSectionValueSetId}
+          valueSetURL={unicefSectionValueSetURI}
           fhirBaseUrl={fhirBaseURL}
         />
       </FormItem>
@@ -232,7 +231,7 @@ const AddLocationInventoryForm = (props: LocationInventoryFormProps) => {
         <ValueSetAsyncSelect
           placeholder={t('Select donor')}
           showSearch={true}
-          valueSetId={unicefDonorValueSetId}
+          valueSetURL={unicefDonorValueSetURI}
           fhirBaseUrl={fhirBaseURL}
         />
       </FormItem>

diff --git a/packages/fhir-group-management/src/components/LocationInventory/tests/form.test.tsx b/packages/fhir-group-management/src/components/LocationInventory/tests/form.test.tsx
@@ -26,11 +26,10 @@ import {
   groupResourceType,
   listResourceType,
   product,
-  unicefDonorValueSetId,
   unicefSection,
-  unicefSectionValueSetId,
 } from '../../../constants';
 import { valueSetResourceType } from '@opensrp/react-utils';
+import { unicefDonorValueSetURI, unicefSectionValueSetURI } from '@opensrp/fhir-helpers';
 
 import dayjs from 'dayjs';
 import { fillSearchableSelect } from '../../CommodityAddEdit/Default/tests/test-utils';
@@ -153,9 +152,9 @@ test('creates new inventory as expected', async () => {
       '_has:List:item:_id': props.commodityListId,
     })
     .reply(200, productsList)
-    .get(`/${valueSetResourceType}/${unicefSectionValueSetId}/$expand`)
+    .get(`/${valueSetResourceType}/$expand?url=${unicefSectionValueSetURI}`)
     .reply(200, unicefSectionValueSet)
-    .get(`/${valueSetResourceType}/${unicefDonorValueSetId}/$expand`)
+    .get(`/${valueSetResourceType}/$expand?url=${unicefDonorValueSetURI}`)
     .reply(200, unicefDonorsValueSet)
     .persist();
 

diff --git a/packages/fhir-group-management/src/constants.tsx b/packages/fhir-group-management/src/constants.tsx
@@ -5,10 +5,6 @@ export const LIST_GROUP_URL = '/groups/list';
 export const LIST_COMMODITY_URL = '/commodity/list';
 export const ADD_LOCATION_INVENTORY = '/location/inventory';
 
-// unicef and donor endpoints
-export const unicefSectionValueSetId = 'eusm-unicef-sections';
-export const unicefDonorValueSetId = 'eusm-donors';
-
 // magic strings
 export const groupResourceType = 'Group';
 export const listResourceType = 'List';

diff --git a/packages/fhir-helpers/src/constants/codeSystems.ts b/packages/fhir-helpers/src/constants/codeSystems.ts
@@ -7,6 +7,11 @@ export const hl7PhysicalTypeCodeSystemUri =
 export const administrativeLevelSystemUri =
   'https://smartregister.org/CodeSystem/administrative-level';
 
+const baseValuSetURI = 'http://smartregister.org/ValueSet';
+export const unicefSectionValueSetURI = `${baseValuSetURI}/eusm-unicef-sections`;
+export const unicefDonorValueSetURI = `${baseValuSetURI}/eusm-donors`;
+export const eusmServicePointValueSetURI = `${baseValuSetURI}/eusm-service-point-type`;
+
 export const poNumberIdentifierCoding = {
   system: smartregisterSystemUri,
   code: 'PONUM',

diff --git a/packages/fhir-location-management/src/components/AddEditLocationUnit/tests/eusm.test.tsx b/packages/fhir-location-management/src/components/AddEditLocationUnit/tests/eusm.test.tsx
@@ -8,18 +8,18 @@ import { Provider } from 'react-redux';
 import { authenticateUser } from '@onaio/session-reducer';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import nock from 'nock';
-import {
-  eusmServicePointValueSetId,
-  locationHierarchyResourceType,
-  serviceType,
-} from '../../../constants';
+import { locationHierarchyResourceType, serviceType } from '../../../constants';
 import { fhirHierarchy } from '../../../ducks/tests/fixtures';
 import { waitForElementToBeRemoved } from '@testing-library/dom';
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as notifications from '@opensrp/notifications';
 import { createdLoc, editedLoc, servicePointTypeValueSet } from './fixtures';
-import { locationResourceType, valueSetResourceType } from '@opensrp/fhir-helpers';
+import {
+  locationResourceType,
+  valueSetResourceType,
+  eusmServicePointValueSetURI,
+} from '@opensrp/fhir-helpers';
 
 jest.mock('@opensrp/notifications', () => ({
   __esModule: true,
@@ -105,7 +105,7 @@ test('works ok for new locations', async () => {
     .get(`/${locationHierarchyResourceType}/_search`)
     .query({ _id: props.fhirRootLocationId })
     .reply(200, fhirHierarchy)
-    .get(`/${valueSetResourceType}/${eusmServicePointValueSetId}/$expand`)
+    .get(`/${valueSetResourceType}/$expand?url=${eusmServicePointValueSetURI}`)
     .reply(200, servicePointTypeValueSet)
     .persist();
 
@@ -187,7 +187,7 @@ test('editing works correctly', async () => {
     .get(`/${locationHierarchyResourceType}/_search`)
     .query({ _id: props.fhirRootLocationId })
     .reply(200, fhirHierarchy)
-    .get(`/${valueSetResourceType}/${eusmServicePointValueSetId}/$expand`)
+    .get(`/${valueSetResourceType}/$expand?url=${eusmServicePointValueSetURI}`)
     .reply(200, servicePointTypeValueSet)
     .persist();
 

diff --git a/packages/fhir-location-management/src/components/LocationForm/index.tsx b/packages/fhir-location-management/src/components/LocationForm/index.tsx
@@ -11,7 +11,6 @@ import {
   ValidationFactory,
 } from './utils';
 import {
-  eusmServicePointValueSetId,
   geometry,
   isJurisdiction,
   latitude,
@@ -29,6 +28,7 @@ import { useQueryClient } from 'react-query';
 import { useMls } from '../../mls';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { ValueSetAsyncSelect } from '@opensrp/react-utils';
+import { eusmServicePointValueSetURI } from '@opensrp/fhir-helpers';
 
 const { Item: FormItem } = Form;
 
@@ -296,7 +296,7 @@ const LocationForm = (props: LocationFormProps) => {
                   rules={validationRules.serviceType}
                 >
                   <ValueSetAsyncSelect
-                    valueSetId={eusmServicePointValueSetId}
+                    valueSetURL={eusmServicePointValueSetURI}
                     fhirBaseUrl={fhirBaseURL}
                   />
                 </FormItem>

diff --git a/packages/fhir-location-management/src/constants.ts b/packages/fhir-location-management/src/constants.ts
@@ -26,9 +26,6 @@ export const isJurisdiction = 'isJurisdiction' as const;
 export const locationGeoJsonExtensionUrl =
   'http://build.fhir.org/extension-location-boundary-geojson.html';
 
-// fhir resource ids
-export const eusmServicePointValueSetId = 'eusm-service-point-type';
-
 // i18n namespaces
 export const namespace = 'fhir-location-management' as const;
 export const servicePointNamespace = 'fhir-service-point' as const;

diff --git a/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx
@@ -7,7 +7,7 @@ import { FHIRServiceClass } from '../../../helpers/dataLoaders';
 import { Coding } from '@smile-cdr/fhirts/dist/FHIR-R4/classes/coding';
 
 export interface ValueSetAsyncSelectProps extends SelectProps<RawValueType> {
-  valueSetId: string;
+  valueSetURL: string;
   fhirBaseUrl: string;
 }
 
@@ -20,13 +20,13 @@ export const valueSetResourceType = 'ValueSet';
  * @param props - AsyncSelect component props
  */
 export function ValueSetAsyncSelect(props: ValueSetAsyncSelectProps) {
-  const { valueSetId, fhirBaseUrl, ...selectProps } = props;
+  const { valueSetURL, fhirBaseUrl, ...selectProps } = props;
 
   const queryParams = {
-    queryKey: [valueSetResourceType, valueSetId],
+    queryKey: [valueSetResourceType, valueSetURL],
     queryFn: async () =>
       new FHIRServiceClass<IValueSet>(fhirBaseUrl, valueSetResourceType).read(
-        `${valueSetId}/$expand`
+        `$expand?url=${valueSetURL}`
       ),
     select: (data: IValueSet) => getValueSetSelectOptions(data),
   };

diff --git a/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/tests/index.test.tsx b/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/tests/index.test.tsx
@@ -53,7 +53,7 @@ const queryClient = new QueryClient({
 
 const commonProps = {
   fhirBaseUrl: 'http://test.server.org/fhir',
-  valueSetId: 'eusmServicePointValueSetId',
+  valueSetURL: 'http://smartregister.org/ValueSet/eusmServicePointValueSetId',
 };
 
 const AppWrapper = (props: { children: React.ReactNode }) => {
@@ -66,7 +66,7 @@ test('works correctly when api errors out', async () => {
     id: 'select',
   };
   nock(props.fhirBaseUrl)
-    .get(`/${valueSetResourceType}/${props.valueSetId}/$expand`)
+    .get(`/${valueSetResourceType}/$expand?url=${props.valueSetURL}`)
     .reply(500, 'Ran into an error');
   render(
     <AppWrapper>
@@ -99,7 +99,7 @@ test('chooses correctly dropdown', async () => {
     showSearch: true,
   };
   nock(props.fhirBaseUrl)
-    .get(`/${valueSetResourceType}/${props.valueSetId}/$expand`)
+    .get(`/${valueSetResourceType}/$expand?url=${props.valueSetURL}`)
     .reply(200, eusmServicePoint);
 
   render(

diff --git a/yarn.lock b/yarn.lock
@@ -3873,6 +3873,7 @@ __metadata:
   dependencies:
     "@ant-design/icons": ^4.7.0
     "@onaio/redux-reducer-registry": ^0.0.9
+    "@opensrp/fhir-helpers": "workspace:^"
     "@opensrp/notifications": ^0.0.5
     "@opensrp/pkg-config": ^0.0.9
     "@opensrp/rbac": "workspace:^"