Update select component used on the location inventory view

onaio · Oct 9, 2024 · 80f7eea · 80f7eea
1 parent 8cc8589
commit 80f7eea
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 44 deletions.
diff --git a/packages/fhir-group-management/src/components/LocationInventory/form.tsx b/packages/fhir-group-management/src/components/LocationInventory/form.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { Form, Button, Input, DatePicker, Space, Switch } from 'antd';
 import {
-  PaginatedAsyncSelect,
   formItemLayout,
   tailLayout,
   SelectOption as ProductSelectOption,
   ValueSetAsyncSelect,
+  ClientSideActionsSelect,
 } from '@opensrp/react-utils';
 import { useTranslation } from '../../mls';
 import { useQueryClient, useMutation } from 'react-query';
@@ -162,12 +162,12 @@ const AddLocationInventoryForm = (props: LocationInventoryFormProps) => {
       initialValues={initialValues}
     >
       <FormItem id={product} name={product} label={t('Product name')}>
-        <PaginatedAsyncSelect<IGroup>
-          baseUrl={fhirBaseURL}
+        <ClientSideActionsSelect<IGroup>
+          fhirBaseUrl={fhirBaseURL}
           resourceType={groupResourceType}
           transformOption={processProductOptions}
           extraQueryParams={productQueryFilters}
-          showSearch={false}
+          showSearch={true}
           placeholder={t('Select product')}
           getFullOptionOnChange={productChangeHandler}
           disabled={editMode}

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
@@ -152,7 +152,13 @@ test('creates new inventory as expected', async () => {
   const preFetchScope = nock(props.fhirBaseURL)
     .get(`/${groupResourceType}/_search`)
     .query({
-      _getpagesoffset: 0,
+      _summary: 'count',
+      code: 'http://snomed.info/sct|386452003',
+      '_has:List:item:_id': props.commodityListId,
+    })
+    .reply(200, { total: 20 })
+    .get(`/${groupResourceType}/_search`)
+    .query({
       _count: 20,
       code: 'http://snomed.info/sct|386452003',
       '_has:List:item:_id': props.commodityListId,
@@ -194,29 +200,32 @@ test('creates new inventory as expected', async () => {
   render(<AppWrapper {...thisProps}></AppWrapper>);
 
   await waitFor(() => {
-    expect(preFetchScope.isDone()).toBeTruthy();
+    expect(preFetchScope.pendingMocks()).toEqual([]);
   });
 
-  // simulate value selection for product
-  const productSelectComponent = document.querySelector(`input#${product}`)!;
-  fireEvent.mouseDown(productSelectComponent);
-
-  const optionTexts = [
-    ...document.querySelectorAll(
-      `#${product}_list+div.rc-virtual-list .ant-select-item-option-content`
-    ),
-  ].map((option) => {
-    return option.textContent;
+  await waitFor(() => {
+    // simulate value selection for product
+    const productSelectComponent = document.querySelector(`input#${product}`)!;
+    fireEvent.mouseDown(productSelectComponent);
+
+    const optionTexts = [
+      ...document.querySelectorAll(
+        `#${product}_list+div.rc-virtual-list .ant-select-item-option-content`
+      ),
+    ].map((option) => {
+      return option.textContent;
+    });
+
+    expect(optionTexts).toEqual([
+      'Yellow sunshine',
+      'Fig tree',
+      'Lumpy nuts',
+      'Happy Feet',
+      'Lilly Flowers',
+      'Smartphone TEST',
+    ]);
   });
 
-  expect(optionTexts).toEqual([
-    'Yellow sunshine',
-    'Fig tree',
-    'Lumpy nuts',
-    'Happy Feet',
-    'Lilly Flowers',
-    'Smartphone TEST',
-  ]);
   fireEvent.click(document.querySelector(`[title="${'Lumpy nuts'}"]`)!);
 
   const quantity = screen.getByLabelText('Quantity');
@@ -269,7 +278,13 @@ test('#1384 - correctly updates location inventory', async () => {
   const preFetchScope = nock(props.fhirBaseURL)
     .get(`/${groupResourceType}/_search`)
     .query({
-      _getpagesoffset: 0,
+      _summary: 'count',
+      code: 'http://snomed.info/sct|386452003',
+      '_has:List:item:_id': props.commodityListId,
+    })
+    .reply(200, { total: 20 })
+    .get(`/${groupResourceType}/_search`)
+    .query({
       _count: 20,
       code: 'http://snomed.info/sct|386452003',
       '_has:List:item:_id': props.commodityListId,
@@ -322,26 +337,28 @@ test('#1384 - correctly updates location inventory', async () => {
   // serial number is initially not shown on the form
   expect(screen.queryByText('Serial number')).not.toBeInTheDocument();
 
-  // simulate value selection for product
-  const productSelectComponent = document.querySelector(`input#${product}`)!;
-  fireEvent.mouseDown(productSelectComponent);
-
-  const optionTexts = [
-    ...document.querySelectorAll(
-      `#${product}_list+div.rc-virtual-list .ant-select-item-option-content`
-    ),
-  ].map((option) => {
-    return option.textContent;
+  await waitFor(() => {
+    // simulate value selection for product
+    const productSelectComponent = document.querySelector(`input#${product}`)!;
+    fireEvent.mouseDown(productSelectComponent);
+
+    const optionTexts = [
+      ...document.querySelectorAll(
+        `#${product}_list+div.rc-virtual-list .ant-select-item-option-content`
+      ),
+    ].map((option) => {
+      return option.textContent;
+    });
+
+    expect(optionTexts).toEqual([
+      'Yellow sunshine',
+      'Fig tree',
+      'Lumpy nuts',
+      'Happy Feet',
+      'Lilly Flowers',
+      'Smartphone TEST',
+    ]);
   });
-
-  expect(optionTexts).toEqual([
-    'Yellow sunshine',
-    'Fig tree',
-    'Lumpy nuts',
-    'Happy Feet',
-    'Lilly Flowers',
-    'Smartphone TEST',
-  ]);
   fireEvent.click(document.querySelector(`[title="${'Lumpy nuts'}"]`)!);
 
   const quantity = screen.getByLabelText('Quantity');