Update request parameters for dropdown for appId field in user creati…

…on form. (#1532) * Update appID to use client side actions Select widget * Fix confusing dropdown render when pagainatedAsync is in load state * Fix test regressions * update select widgets dropdown render
onaio · Feb 11, 2025 · 6045939 · 6045939
1 parent 6cf79b7
commit 6045939
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 61 deletions.
diff --git a/packages/fhir-helpers/src/constants/codeSystems.ts b/packages/fhir-helpers/src/constants/codeSystems.ts
@@ -2,6 +2,7 @@ export const smartregisterSystemUri = 'http://smartregister.org/codes';
 export const eusmServicePointCodeSystemUri =
   'http://smartregister.org/CodeSystem/eusm-service-point-type';
 export const snomedCodeSystemUri = 'http://snomed.info/sct';
+export const loincCodeSystemUri = 'http://loinc.org';
 export const hl7PhysicalTypeCodeSystemUri =
   'http://terminology.hl7.org/CodeSystem/location-physical-type';
 export const administrativeLevelSystemUri = 'https://smartregister.org/codes/administrative-level';
@@ -11,6 +12,9 @@ export const unicefSectionValueSetURI = `${baseValuSetURI}/eusm-unicef-sections`
 export const unicefDonorValueSetURI = `${baseValuSetURI}/eusm-donors`;
 export const eusmServicePointValueSetURI = `${baseValuSetURI}/eusm-service-point-type`;
 
+export const deviceSettingCodeableCode = '1156600005';
+export const loincMedicalRecordCodeableCode = '11503-0';
+
 export const poNumberIdentifierCoding = {
   system: smartregisterSystemUri,
   code: 'PONUM',

diff --git a/packages/fhir-helpers/src/constants/resourceTypes.ts b/packages/fhir-helpers/src/constants/resourceTypes.ts
@@ -8,3 +8,4 @@ export const ListResourceType = 'List';
 export const EncounterResourceType = 'Encounter';
 export const ObservationResourceType = 'Observation';
 export const PractitionerResourceType = 'Practitioner';
+export const compositionResourceType = 'Composition';
diff --git a/...r-keycloak-user-management/src/components/CreateEditUser/tests/extra-fields-user.test.tsx b/...r-keycloak-user-management/src/components/CreateEditUser/tests/extra-fields-user.test.tsx
@@ -32,10 +32,16 @@ import {
 import userEvent from '@testing-library/user-event';
 import * as notifications from '@opensrp/notifications';
 import { practitionerResourceType, practitionerRoleResourceType } from '../../../constants';
-import { fetchKeycloakUsers } from '@opensrp/user-management';
+import { compositionResourceType, fetchKeycloakUsers } from '@opensrp/user-management';
 import { history } from '@onaio/connected-reducer-registry';
 import { opensrpI18nInstance } from '@opensrp/i18n';
 import { setConfig } from '@opensrp/pkg-config';
+import {
+  loincCodeSystemUri,
+  loincMedicalRecordCodeableCode,
+  snomedCodeSystemUri,
+  deviceSettingCodeableCode,
+} from '@opensrp/fhir-helpers';
 
 setConfig('projectCode', 'giz');
 
@@ -189,12 +195,18 @@ test('renders correctly for edit user', async () => {
     .reply(200, {});
 
   nock(props.baseUrl)
-    .get(`/Composition/_search`)
+    .get(`/${compositionResourceType}/_search`)
+    .query({
+      _summary: 'count',
+      type: `${loincCodeSystemUri}|${loincMedicalRecordCodeableCode}`,
+      category: `${snomedCodeSystemUri}|${deviceSettingCodeableCode}`,
+    })
+    .reply(200, { total: compositionResource.total })
+    .get(`/${compositionResourceType}/_search`)
     .query({
-      _getpagesoffset: '0',
-      _count: '20',
-      type: `http://snomed.info/sct|1156600005`,
-      _elements: 'identifier,title',
+      _count: compositionResource.total,
+      type: `${loincCodeSystemUri}|${loincMedicalRecordCodeableCode}`,
+      category: `${snomedCodeSystemUri}|${deviceSettingCodeableCode}`,
     })
     .reply(200, compositionResource)
     .persist();

diff --git a/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/index.test.tsx b/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/index.test.tsx
@@ -32,9 +32,15 @@ import {
 import userEvent from '@testing-library/user-event';
 import * as notifications from '@opensrp/notifications';
 import { practitionerResourceType, practitionerRoleResourceType } from '../../../constants';
-import { fetchKeycloakUsers } from '@opensrp/user-management';
+import { compositionResourceType, fetchKeycloakUsers } from '@opensrp/user-management';
 import { history } from '@onaio/connected-reducer-registry';
 import { opensrpI18nInstance } from '@opensrp/i18n';
+import {
+  loincCodeSystemUri,
+  loincMedicalRecordCodeableCode,
+  snomedCodeSystemUri,
+  deviceSettingCodeableCode,
+} from '@opensrp/fhir-helpers';
 
 jest.mock('fhirclient', () => {
   return jest.requireActual('fhirclient/lib/entry/browser');
@@ -175,12 +181,18 @@ test('renders correctly for edit user', async () => {
     .reply(200, {});
 
   nock(props.baseUrl)
-    .get(`/Composition/_search`)
+    .get(`/${compositionResourceType}/_search`)
+    .query({
+      _summary: 'count',
+      type: `${loincCodeSystemUri}|${loincMedicalRecordCodeableCode}`,
+      category: `${snomedCodeSystemUri}|${deviceSettingCodeableCode}`,
+    })
+    .reply(200, { total: compositionResource.total })
+    .get(`/${compositionResourceType}/_search`)
     .query({
-      _getpagesoffset: '0',
-      _count: '20',
-      type: `http://snomed.info/sct|1156600005`,
-      _elements: 'identifier,title',
+      _count: compositionResource.total,
+      type: `${loincCodeSystemUri}|${loincMedicalRecordCodeableCode}`,
+      category: `${snomedCodeSystemUri}|${deviceSettingCodeableCode}`,
     })
     .reply(200, compositionResource)
     .persist();

diff --git a/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/new-user.test.tsx b/packages/fhir-keycloak-user-management/src/components/CreateEditUser/tests/new-user.test.tsx
@@ -28,6 +28,13 @@ import { practitionerResourceType, practitionerRoleResourceType } from '../../..
 import { fetchKeycloakUsers } from '@opensrp/user-management';
 import { history } from '@onaio/connected-reducer-registry';
 import { opensrpI18nInstance } from '@opensrp/i18n';
+import {
+  compositionResourceType,
+  deviceSettingCodeableCode,
+  loincCodeSystemUri,
+  loincMedicalRecordCodeableCode,
+  snomedCodeSystemUri,
+} from '@opensrp/fhir-helpers';
 
 jest.setTimeout(10000);
 
@@ -187,12 +194,18 @@ test('renders correctly for new user', async () => {
   nock(props.baseUrl).put(`/Group/${mockId}`, newGroup).reply(200, {});
 
   nock(props.baseUrl)
-    .get(`/Composition/_search`)
+    .get(`/${compositionResourceType}/_search`)
+    .query({
+      _summary: 'count',
+      type: `${loincCodeSystemUri}|${loincMedicalRecordCodeableCode}`,
+      category: `${snomedCodeSystemUri}|${deviceSettingCodeableCode}`,
+    })
+    .reply(200, { total: compositionResource.total })
+    .get(`/${compositionResourceType}/_search`)
     .query({
-      _getpagesoffset: '0',
-      _count: '20',
-      type: `http://snomed.info/sct|1156600005`,
-      _elements: 'identifier,title',
+      _count: compositionResource.total,
+      type: `${loincCodeSystemUri}|${loincMedicalRecordCodeableCode}`,
+      category: `${snomedCodeSystemUri}|${deviceSettingCodeableCode}`,
     })
     .reply(200, compositionResource)
     .persist();

diff --git a/packages/keycloak-user-management/src/components/forms/UserForm/index.tsx b/packages/keycloak-user-management/src/components/forms/UserForm/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, FC } from 'react';
 import { useHistory } from 'react-router';
 import { Button, Col, Row, Form, Select, Input, Radio } from 'antd';
-import { BodyLayout } from '@opensrp/react-utils';
+import { BodyLayout, ClientSideActionsSelect } from '@opensrp/react-utils';
 import {
   compositionUrlFilter,
   getCompositionOptions,
@@ -30,7 +30,6 @@ import {
   usernameField,
   userTypeField,
 } from '../../../constants';
-import { PaginatedAsyncSelect } from '@opensrp/react-utils';
 import { IComposition } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IComposition';
 
 const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
@@ -312,13 +311,13 @@ const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
                 rules={[{ required: true, message: t('Application Id is required') }]}
                 data-testid="fhirCoreAppId"
               >
-                <PaginatedAsyncSelect<IComposition>
-                  baseUrl={baseUrl}
+                <ClientSideActionsSelect<IComposition>
+                  fhirBaseUrl={baseUrl}
                   resourceType={compositionResourceType}
                   transformOption={getCompositionOptions}
                   extraQueryParams={compositionUrlFilter}
                   showSearch={true}
-                ></PaginatedAsyncSelect>
+                ></ClientSideActionsSelect>
               </Form.Item>
             ) : null}
 

diff --git a/...ages/keycloak-user-management/src/components/forms/UserForm/tests/index.unmocked.test.tsx b/...ages/keycloak-user-management/src/components/forms/UserForm/tests/index.unmocked.test.tsx
@@ -156,7 +156,10 @@ describe('forms/userForm', () => {
 
     nock(propsOwn.baseUrl)
       .get(`/${compositionResourceType}/_search`)
-      .query({ _getpagesoffset: '0', _count: '20', ...compositionUrlFilter })
+      .query({ _summary: 'count', ...compositionUrlFilter })
+      .reply(200, { total: compositionPage1.entry.length })
+      .get(`/${compositionResourceType}/_search`)
+      .query({ _count: '5', ...compositionUrlFilter })
       .reply(200, compositionPage1);
 
     const newId = 'keycloakNewUserId';

diff --git a/packages/keycloak-user-management/src/components/forms/UserForm/utils.tsx b/packages/keycloak-user-management/src/components/forms/UserForm/utils.tsx
@@ -12,9 +12,13 @@ import {
   SUPERVISOR,
   PRACTITIONER_USER_TYPE_CODE,
   SUPERVISOR_USER_TYPE_CODE,
-  SNOMED_CODEABLE_SYSTEM,
-  DEVICE_SETTING_CODEABLE_CODE,
 } from '../../../constants';
+import {
+  snomedCodeSystemUri,
+  loincCodeSystemUri,
+  deviceSettingCodeableCode,
+  loincMedicalRecordCodeableCode,
+} from '@opensrp/fhir-helpers';
 import { OpenSRPService } from '@opensrp/react-utils';
 import { FormFields, PractitionerUpdaterFun, SelectOption } from './types';
 import { Practitioner } from '@opensrp/team-management';
@@ -407,6 +411,6 @@ export const getCompositionOptions = (composition: IComposition) => {
 
 /** search param for filter to get composition resources of the type device setting */
 export const compositionUrlFilter = {
-  type: `${SNOMED_CODEABLE_SYSTEM}|${DEVICE_SETTING_CODEABLE_CODE}`,
-  _elements: 'identifier,title',
+  type: `${loincCodeSystemUri}|${loincMedicalRecordCodeableCode}`,
+  category: `${snomedCodeSystemUri}|${deviceSettingCodeableCode}`,
 };
diff --git a/packages/keycloak-user-management/src/constants.ts b/packages/keycloak-user-management/src/constants.ts
@@ -42,8 +42,6 @@ export const UserQueryId = 'User';
 export const SUPERVISOR = 'supervisor';
 export const SUPERVISOR_USER_TYPE_CODE = '236321002';
 export const PRACTITIONER_USER_TYPE_CODE = '405623001';
-export const SNOMED_CODEABLE_SYSTEM = 'http://snomed.info/sct';
-export const DEVICE_SETTING_CODEABLE_CODE = '1156600005';
 
 // Form field name
 export const NATIONAL_ID_FORM_FIELD = 'nationalId' as const;

diff --git a/packages/react-utils/src/components/AsyncSelect/ClientSideActionsSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/ClientSideActionsSelect/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { URLParams } from '@opensrp/server-service';
 import { useQuery } from 'react-query';
-import { Divider, Select, Empty, Spin, Alert } from 'antd';
+import { Select, Empty, Spin, Alert } from 'antd';
 import { IResource } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IResource';
 import { getResourcesFromBundle } from '../../../helpers/utils';
 import { useTranslation } from '../../../mls';
@@ -79,8 +79,13 @@ export function ClientSideActionsSelect<ResourceT extends IResource>(
     options,
     dropdownRender: (menu: React.ReactNode) => (
       <>
-        {!error && options?.length && menu}
-        <Divider style={{ margin: '8px 0' }} />
+        {!error && options?.length ? (
+          menu
+        ) : isLoading ? (
+          <Spin size="small" />
+        ) : (
+          <Empty description={t('No data')} />
+        )}
         {error && <Alert message={t('Unable to load dropdown options.')} type="error" showIcon />}
       </>
     ),

diff --git a/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx
@@ -186,35 +186,43 @@ export function PaginatedAsyncSelect<ResourceT extends IResource>(
     filterOption: false,
     options: updatedOptions,
     searchValue,
-    dropdownRender: (menu: React.ReactNode) => (
-      <>
-        {!error && data.length && menu}
-        <Divider style={{ margin: '8px 0' }} />
-        {error ? (
-          <Alert message={t('Unable to load dropdown options.')} type="error" showIcon />
-        ) : (
-          <Space direction="vertical">
-            {data.length && (
-              <small style={{ padding: '4px 16px' }}>
-                {t('Showing {{recordsFetchedNum}}; {{remainingRecords}} more records.', {
-                  recordsFetchedNum,
-                  remainingRecords,
-                })}
-              </small>
-            )}
-            <Button
-              type="text"
-              icon={<VerticalAlignBottomOutlined />}
-              disabled={!hasNextPage || isFetchingNextPage || isFetching}
-              loading={isFetchingNextPage}
-              onClick={() => fetchNextPage()}
-            >
-              {isFetchingNextPage ? t('Fetching next page') : t('Load more options')}
-            </Button>
-          </Space>
-        )}
-      </>
-    ),
+    dropdownRender: (menu: React.ReactNode) => {
+      return (
+        <>
+          {!error && data.length ? (
+            menu
+          ) : isLoading ? (
+            <Spin size="small" />
+          ) : (
+            <Empty description={t('No data')} />
+          )}
+          <Divider style={{ margin: '8px 0' }} />
+          {error ? (
+            <Alert message={t('Unable to load dropdown options.')} type="error" showIcon />
+          ) : (
+            <Space direction="vertical">
+              {data.length ? (
+                <small style={{ padding: '4px 16px' }}>
+                  {t('Showing {{recordsFetchedNum}}; {{remainingRecords}} more records.', {
+                    recordsFetchedNum,
+                    remainingRecords,
+                  })}
+                </small>
+              ) : null}
+              <Button
+                type="text"
+                icon={<VerticalAlignBottomOutlined />}
+                disabled={!hasNextPage || isFetchingNextPage || isFetching}
+                loading={isFetchingNextPage}
+                onClick={() => fetchNextPage()}
+              >
+                {isFetchingNextPage ? t('Fetching next page') : t('Load more options')}
+              </Button>
+            </Space>
+          )}
+        </>
+      );
+    },
   };
   if (props.showSearch) {
     propsToSelect.onSearch = searchHandler;