Group all async selects

packages/fhir-group-management/src/components/LocationInventory/form.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Form, Button, Input, DatePicker, Space, Switch } from 'antd';
 import {
-  FhirSelect,
+  PaginatedAsyncSelect,
   formItemLayout,
   tailLayout,
   SelectOption as ProductSelectOption,
@@ -144,7 +144,7 @@ const AddLocationInventoryForm = (props: LocationInventoryFormProps) => {
       initialValues={initialValues}
     >
       <FormItem id="project" name={product} label={t('Product name')}>
-        <FhirSelect<IGroup>
+        <PaginatedAsyncSelect<IGroup>
           baseUrl={fhirBaseURL}
           resourceType={groupResourceType}
           transformOption={processProductOptions}

packages/keycloak-user-management/src/components/forms/UserForm/index.tsx

@@ -22,7 +22,7 @@ import {
 import { SelectProps } from 'antd/lib/select';
 import { useTranslation } from '../../../mls';
 import { compositionResourceType, PRACTITIONER, SUPERVISOR } from '../../../constants';
-import { FhirSelect } from '@opensrp/react-utils';
+import { PaginatedAsyncSelect } from '@opensrp/react-utils';
 import { IComposition } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IComposition';
 
 const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
@@ -244,13 +244,13 @@ const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
               rules={[{ required: true, message: t('Application Id is required') }]}
               data-testid="fhirCoreAppId"
             >
-              <FhirSelect<IComposition>
+              <PaginatedAsyncSelect<IComposition>
                 baseUrl={baseUrl}
                 resourceType={compositionResourceType}
                 transformOption={getCompositionOptions}
                 extraQueryParams={compositionUrlFilter}
                 showSearch={true}
-              ></FhirSelect>
+              ></PaginatedAsyncSelect>
             </Form.Item>
           ) : null}
 

packages/react-utils/src/components/ValueSetAsyncSelect/base.tsx → packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx

@@ -2,7 +2,7 @@ import { Alert, Select } from 'antd';
 import { useMemo } from 'react';
 import React from 'react';
 import { SelectProps, DefaultOptionType } from 'antd/lib/select';
-import { useTranslation } from '../../mls';
+import { useTranslation } from '../../../mls';
 import { UseQueryOptions, useQuery } from 'react-query';
 
 export type RawValueType = string | number | (string | number)[];
@@ -19,7 +19,7 @@ export interface AsyncSelectProps<QueryResponse = unknown, QueryProcessedData =
  *
  * @param props - AsyncSelect component props
  */
-function AsyncSelect<QueryResponse = unknown, QueryProcessedData = unknown>(
+function BaseAsyncSelect<QueryResponse = unknown, QueryProcessedData = unknown>(
   props: AsyncSelectProps<QueryResponse, QueryProcessedData>
 ) {
   const { optionsGetter, queryParams: useQueryParams, ...restProps } = props;
@@ -45,4 +45,4 @@ function AsyncSelect<QueryResponse = unknown, QueryProcessedData = unknown>(
   return <Select {...singleSelectProps} />;
 }
 
-export { AsyncSelect };
+export { BaseAsyncSelect };

packages/react-utils/src/components/FhirSelect/index.tsx → packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx

@@ -7,8 +7,8 @@ import { Button, Divider, Select, Empty, Space, Spin, Alert } from 'antd';
 import type { SelectProps } from 'antd';
 import { IResource } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IResource';
 import { debounce } from 'lodash';
-import { getResourcesFromBundle } from '../../helpers/utils';
-import { useTranslation } from '../../mls';
+import { getResourcesFromBundle } from '../../../helpers/utils';
+import { useTranslation } from '../../../mls';
 import { loadResources, getTotalRecordsInBundles, getTotalRecordsOnApi } from './utils';
 
 export type SelectOption<T extends IResource> = {
@@ -26,7 +26,7 @@ export type AbstractedSelectOptions<ResourceT extends IResource> = Omit<
   'loading' | 'options' | 'searchValue'
 >;
 
-export interface FhirSelectProps<ResourceT extends IResource>
+export interface PaginatedAsyncSelectProps<ResourceT extends IResource>
   extends AbstractedSelectOptions<ResourceT> {
   resourceType: string;
   baseUrl: string;
@@ -48,7 +48,9 @@ const debouncedFn = debounce((callback) => callback(), 500);
  *
  * @param props - component props
  */
-export function FhirSelect<ResourceT extends IResource>(props: FhirSelectProps<ResourceT>) {
+export function PaginatedAsyncSelect<ResourceT extends IResource>(
+  props: PaginatedAsyncSelectProps<ResourceT>
+) {
   const {
     resourceType,
     baseUrl,

packages/react-utils/src/components/FhirSelect/tests/index.test.tsx → packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/tests/index.test.tsx

@@ -7,7 +7,7 @@ import {
 } from '@testing-library/react';
 import React from 'react';
 import * as reactQuery from 'react-query';
-import { FhirSelect } from '../index';
+import { PaginatedAsyncSelect } from '../index';
 import { IOrganization } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IOrganization';
 import nock from 'nock';
 import { store } from '@opensrp/store';
@@ -98,7 +98,7 @@ test('works correctly nominal case', async () => {
 
   const { queryByText, getByRole, getByTitle } = render(
     <QueryWrapper>
-      <FhirSelect<IOrganization> {...props}></FhirSelect>
+      <PaginatedAsyncSelect<IOrganization> {...props}></PaginatedAsyncSelect>
     </QueryWrapper>
   );
 
@@ -224,7 +224,7 @@ test('handles error in request', async () => {
 
   const { queryByText } = render(
     <QueryWrapper>
-      <FhirSelect<IOrganization> {...props}></FhirSelect>
+      <PaginatedAsyncSelect<IOrganization> {...props}></PaginatedAsyncSelect>
     </QueryWrapper>
   );
 

packages/react-utils/src/components/FhirSelect/utils.ts → packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/utils.ts

@@ -1,7 +1,7 @@
 import { URLParams } from '@opensrp/server-service';
 import { IBundle } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IBundle';
-import { FHIRServiceClass } from '../../helpers/dataLoaders';
-import { FhirApiFilter } from '../../hooks/useSimpleTabularView';
+import { FHIRServiceClass } from '../../../helpers/dataLoaders';
+import { FhirApiFilter } from '../../../hooks/useSimpleTabularView';
 
 /**
  * Unified function that gets a list of FHIR resources from a FHIR hapi server

packages/react-utils/src/components/ValueSetAsyncSelect/valueSetAsyncSelect.tsx → packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { DefaultOptionType, SelectProps } from 'antd/lib/select';
 import { ValueSetContains } from '@smile-cdr/fhirts/dist/FHIR-R4/classes/valueSetContains';
 import { IValueSet } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IValueSet';
-import { AsyncSelect, RawValueType } from './base';
-import { FHIRServiceClass } from '../../helpers/dataLoaders';
+import { BaseAsyncSelect, RawValueType } from '../BaseAsyncSelect';
+import { FHIRServiceClass } from '../../../helpers/dataLoaders';
 
 export interface ValueSetAsyncSelectProps extends SelectProps<RawValueType> {
   valueSetId: string;
@@ -37,7 +37,7 @@ export function ValueSetAsyncSelect(props: ValueSetAsyncSelectProps) {
     ...selectProps,
   };
 
-  return <AsyncSelect<IValueSet, DefaultOptionType> {...asyncSelectProps} />;
+  return <BaseAsyncSelect<IValueSet, DefaultOptionType> {...asyncSelectProps} />;
 }
 
 /**

packages/react-utils/src/components/ValueSetAsyncSelect/tests/valueSetAsyncSelect.test.tsx → packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/tests/index.test.tsx

@@ -5,7 +5,7 @@ import { authenticateUser } from '@onaio/session-reducer';
 import nock from 'nock';
 import { cleanup, fireEvent, render, waitFor, screen } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { ValueSetAsyncSelect, valueSetResourceType } from '../valueSetAsyncSelect';
+import { ValueSetAsyncSelect, valueSetResourceType } from '..';
 import { eusmServicePoint } from './fixtures';
 import userEvent from '@testing-library/user-event';
 

packages/react-utils/src/components/AsyncSelect/index.tsx

@@ -0,0 +1,3 @@
+export * from './BaseAsyncSelect';
+export * from './PaginatedAsyncSelect';
+export * from './ValueSetAsyncSelect';

packages/react-utils/src/index.tsx

@@ -15,12 +15,11 @@ export * from './helpers/fhir-utils';
 export * from './hooks/useSimpleTabularView';
 export * from './hooks/useTabularViewWithLocalSearch';
 export * from './hooks/useSearchParams';
-export * from './components/FhirSelect';
 export * from './hooks/utils';
 export * from './components/PageHeader';
 export * from './components/ButtonLink';
 export * from './helpers/test-utils';
 export * from './components/PrivateRoute';
 export * from './components/fhirDataTypes';
 export * from './components/NoData';
-export * from './components/ValueSetAsyncSelect';
+export * from './components/AsyncSelect';