Update CareTeam and groups module to use server side pagination and s…

…earch (#1251)

* Remove build cache target causes false negatives

* Refactor pagination and search to resort to server capabilities

* Refactor pagination and search in groups to be server side

* Add extra filter to make sure total records are included in bundle response

* Revert "Remove build cache target causes false negatives"

This reverts commit d29e852.

Will need to create an issue to look into this

* Add contextual hint ot fixing error for unsupported name filter

* Fix regressions in fhir-group commodity list

* Fix regressions in fhir-group management

* Fix regressions in care teams

* Fix regression in fhir-views package

* Fix regressionsin other package tests

* Remove custom error handling note

packages/fhir-care-team/src/components/ListView/index.tsx

@@ -9,7 +9,7 @@ import { RouteComponentProps } from 'react-router';
 import { useHistory, Link } from 'react-router-dom';
 import {
   FHIRServiceClass,
-  useTabularViewWithLocalSearch,
+  useSimpleTabularView,
   BrokenPage,
   SearchForm,
   TableLayout,
@@ -53,6 +53,13 @@ export const deleteCareTeam = async (
     .catch(() => sendErrorNotification(t('There was a problem deleting the Care Team')));
 };
 
+const getSearchParams = (search: string | null) => {
+  if (search) {
+    return { [`name:contains`]: search };
+  }
+  return {};
+};
+
 /**
  * Function which shows the list of all roles and their details
  *
@@ -71,13 +78,13 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
     queryValues: { data, isFetching, isLoading, error, refetch },
     tablePaginationProps,
     searchFormProps,
-  } = useTabularViewWithLocalSearch<ICareTeam>(fhirBaseURL, careTeamResourceType);
+  } = useSimpleTabularView<ICareTeam>(fhirBaseURL, careTeamResourceType, getSearchParams);
 
   if (error && !data) {
     return <BrokenPage errorMessage={(error as Error).message} />;
   }
 
-  const tableData = (data ?? []).map((datum: Dictionary) => {
+  const tableData = (data?.records ?? []).map((datum: Dictionary) => {
     return {
       key: datum.id,
       id: datum.id,

packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx

@@ -119,16 +119,12 @@ describe('Care Teams list view', () => {
     nock(props.fhirBaseURL)
       .get(`/${careTeamResourceType}/_search`)
       .query({
-        _summary: 'count',
+        _total: 'accurate',
+        _getpagesoffset: 0,
+        _count: 20,
       })
-      .reply(200, { total: 100 });
-
-    nock(props.fhirBaseURL)
-      .get(`/${careTeamResourceType}/_search`)
-      .query({
-        _count: 100,
-      })
-      .reply(200, careTeams);
+      .reply(200, careTeams)
+      .persist();
 
     const history = createMemoryHistory();
     history.push(URL_CARE_TEAM);

packages/fhir-client/src/components/PatientsList/tests/index.test.tsx

@@ -94,20 +94,13 @@ test('renders correctly in list view', async () => {
 
   nock(props.fhirBaseURL)
     .get(`/${patientResourceType}/_search`)
-    .query({
-      _getpagesoffset: 0,
-      _count: 20,
-    })
+    .query({ _total: 'accurate', _getpagesoffset: 0, _count: 20 })
     .reply(200, patients)
     .persist();
 
   nock(props.fhirBaseURL)
     .get(`/${patientResourceType}/_search`)
-    .query({
-      _getpagesoffset: 0,
-      _count: 20,
-      'name:contains': '345',
-    })
+    .query({ _total: 'accurate', _getpagesoffset: 0, _count: 20, 'name:contains': '345' })
     .reply(200, patients);
 
   render(
@@ -158,17 +151,14 @@ test('renders correctly in list view', async () => {
   // mock requests due to sort
   nock(props.fhirBaseURL)
     .get(`/${patientResourceType}/_search`)
-    .query({
-      _getpagesoffset: 0,
-      _count: 20,
-      _sort: 'birthdate',
-    })
+    .query({ _total: 'accurate', _getpagesoffset: 0, _count: 20, _sort: 'birthdate' })
     .reply(200, sortedAscPatients)
     .persist();
 
   nock(props.fhirBaseURL)
     .get(`/${patientResourceType}/_search`)
     .query({
+      _total: 'accurate',
       _getpagesoffset: 0,
       _count: 20,
       _sort: 'birthdate',
@@ -201,17 +191,14 @@ test('renders correctly in list view', async () => {
 
   nock(props.fhirBaseURL)
     .get(`/${patientResourceType}/_search`)
-    .query({
-      _getpagesoffset: 0,
-      _count: 20,
-      _sort: '-birthdate',
-    })
+    .query({ _total: 'accurate', _getpagesoffset: 0, _count: 20, _sort: '-birthdate' })
     .reply(200, sortedDescPatients)
     .persist();
 
   nock(props.fhirBaseURL)
     .get(`/${patientResourceType}/_search`)
     .query({
+      _total: 'accurate',
       _getpagesoffset: 0,
       _count: 20,
       _sort: '-birthdate',
@@ -245,10 +232,7 @@ test('responds as expected to errors', async () => {
 
   nock(props.fhirBaseURL)
     .get(`/${patientResourceType}/_search`)
-    .query({
-      _getpagesoffset: 0,
-      _count: 20,
-    })
+    .query({ _total: 'accurate', _getpagesoffset: 0, _count: 20 })
     .replyWithError('An error happened');
 
   render(

packages/fhir-group-management/src/components/BaseComponents/BaseGroupsListView/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col, Button } from 'antd';
-import { PageHeader } from '@opensrp/react-utils';
+import { PageHeader, useSimpleTabularView } from '@opensrp/react-utils';
 import { parseGroup, ViewDetailsProps, ViewDetailsWrapper } from '../GroupDetail';
 import { PlusOutlined } from '@ant-design/icons';
 import { groupResourceType } from '../../../constants';
@@ -11,7 +11,6 @@ import {
   BrokenPage,
   TableLayout,
   Column,
-  useTabularViewWithLocalSearch,
   viewDetailsQuery,
   useSearchParams,
 } from '@opensrp/react-utils';
@@ -52,17 +51,24 @@ export const BaseListView = (props: BaseListViewProps) => {
   const { t } = useTranslation();
   const history = useHistory();
 
+  const getSearchParams = (search: string | null) => {
+    if (search) {
+      return { [`name:contains`]: search, ...extraQueryFilters };
+    }
+    return { ...extraQueryFilters };
+  };
+
   const {
     queryValues: { data, isFetching, isLoading, error },
     tablePaginationProps,
     searchFormProps,
-  } = useTabularViewWithLocalSearch<IGroup>(fhirBaseURL, groupResourceType, extraQueryFilters);
+  } = useSimpleTabularView<IGroup>(fhirBaseURL, groupResourceType, getSearchParams);
 
   if (error && !data) {
     return <BrokenPage errorMessage={(error as Error).message} />;
   }
 
-  const tableData = (data ?? []).map((org: IGroup, index: number) => {
+  const tableData = (data?.records ?? []).map((org: IGroup, index: number) => {
     return {
       ...parseGroup(org),
       key: `${index}`,