Qa fixes (#1185)

* Hide Add groups button

* Update useSimpleTabularView; possible to pass params a funtion

* Search on both quest fileds: name and title

* Add hook to fetch fhir resources with client side search

* fix pagination props passed, and exports

* Update careTeam modules to use new changes

* Support local search in group management views

* Dry out search util function

* fix test in react-utils

* Update tests in group list

* Test view details mapper util in fhir-group-management

Author: peterMuriuki

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

@@ -7,7 +7,7 @@ import { RouteComponentProps, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import {
   FHIRServiceClass,
-  useSimpleTabularView,
+  useTabularViewWithLocalSearch,
   BrokenPage,
   SearchForm,
   TableLayout,
@@ -22,9 +22,9 @@ import {
 import { ViewDetails } from '../ViewDetails';
 import { Dictionary } from '@onaio/utils';
 import { sendErrorNotification, sendSuccessNotification } from '@opensrp/notifications';
-import { ICareTeam } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ICareTeam';
 import { useTranslation } from '../../mls';
 import type { TFunction } from '@opensrp/i18n';
+import { ICareTeam } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ICareTeam';
 
 // route params for care team pages
 interface RouteParams {
@@ -59,19 +59,19 @@ export const deleteCareTeam = async (
 export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamListPropTypes) => {
   const { fhirBaseURL } = props;
   const { t } = useTranslation();
-
   const { careTeamId: resourceId } = useParams<RouteParams>();
-  const { searchFormProps, tablePaginationProps, queryValues } = useSimpleTabularView<ICareTeam>(
-    fhirBaseURL,
-    careTeamResourceType
-  );
-  const { data, isFetching, isLoading, error, refetch } = queryValues;
+
+  const {
+    queryValues: { data, isFetching, isLoading, error, refetch },
+    tablePaginationProps,
+    searchFormProps,
+  } = useTabularViewWithLocalSearch<ICareTeam>(fhirBaseURL, careTeamResourceType);
 
   if (error && !data) {
     return <BrokenPage errorMessage={(error as Error).message} />;
   }
 
-  const tableData = (data?.records ?? []).map((datum: Dictionary) => {
+  const tableData = (data ?? []).map((datum: Dictionary) => {
     return {
       key: datum.id,
       id: datum.id,
@@ -149,7 +149,7 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
-            <SearchForm {...searchFormProps} disabled />
+            <SearchForm {...searchFormProps} />
             <Link to={URL_CREATE_CARE_TEAM}>
               <Button type="primary">
                 <PlusOutlined />

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

@@ -119,11 +119,16 @@ describe('Care Teams list view', () => {
     nock(props.fhirBaseURL)
       .get(`/${careTeamResourceType}/_search`)
       .query({
-        _getpagesoffset: 0,
-        _count: 20,
+        _summary: 'count',
       })
-      .reply(200, careTeams)
-      .persist();
+      .reply(200, { total: 100 });
+
+    nock(props.fhirBaseURL)
+      .get(`/${careTeamResourceType}/_search`)
+      .query({
+        _count: 100,
+      })
+      .reply(200, careTeams);
 
     const history = createMemoryHistory();
     history.push(URL_CARE_TEAM);
@@ -152,7 +157,7 @@ describe('Care Teams list view', () => {
     // target the initial row view details
     const dropdown = document.querySelector(
       'tbody tr:nth-child(1) [data-testid="action-dropdown"]'
-    );
+    ) as Element;
     fireEvent.click(dropdown);
 
     const viewDetailsLink = getByText(/View Details/);

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

@@ -3,16 +3,15 @@ import { Helmet } from 'react-helmet';
 import { Row, Col, PageHeader, Button } from 'antd';
 import { parseGroup, ViewDetailsProps, ViewDetailsWrapper } from '../GroupDetail';
 import { PlusOutlined } from '@ant-design/icons';
-import { Group } from '../../../types';
 import { groupResourceType } from '../../../constants';
 import { Link } from 'react-router-dom';
 import { useParams } from 'react-router';
 import {
   SearchForm,
   BrokenPage,
   TableLayout,
-  useSimpleTabularView,
   Column,
+  useTabularViewWithLocalSearch,
 } from '@opensrp/react-utils';
 import { IGroup } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IGroup';
 import { useTranslation } from '../../../mls';
@@ -25,7 +24,7 @@ export type BaseListViewProps = Pick<ViewDetailsProps, 'keyValueMapperRenderProp
   getColumns: (t: TFunction) => Column<TableData>[];
   extraQueryFilters?: Record<string, string>;
   createButtonLabel: string;
-  createButtonUrl: string;
+  createButtonUrl?: string;
   pageTitle: string;
   viewDetailsListUrl: string;
 };
@@ -55,18 +54,17 @@ export const BaseListView = (props: BaseListViewProps) => {
   const { id: resourceId } = useParams<RouteParams>();
   const { t } = useTranslation();
 
-  const { searchFormProps, tablePaginationProps, queryValues } = useSimpleTabularView<Group>(
-    fhirBaseURL,
-    groupResourceType,
-    extraQueryFilters
-  );
-  const { data, isFetching, isLoading, error } = queryValues;
+  const {
+    queryValues: { data, isFetching, isLoading, error },
+    tablePaginationProps,
+    searchFormProps,
+  } = useTabularViewWithLocalSearch<IGroup>(fhirBaseURL, groupResourceType, extraQueryFilters);
 
   if (error && !data) {
     return <BrokenPage errorMessage={(error as Error).message} />;
   }
 
-  const tableData = (data?.records ?? []).map((org: IGroup, index: number) => {
+  const tableData = (data ?? []).map((org: IGroup, index: number) => {
     return {
       ...parseGroup(org),
       key: `${index}`,
@@ -91,13 +89,15 @@ export const BaseListView = (props: BaseListViewProps) => {
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
-            <SearchForm data-testid="search-form" {...searchFormProps} disabled />
-            <Link to={createButtonUrl}>
-              <Button type="primary">
-                <PlusOutlined />
-                {createButtonLabel}
-              </Button>
-            </Link>
+            <SearchForm data-testid="search-form" {...searchFormProps} />
+            {createButtonUrl && (
+              <Link to={createButtonUrl}>
+                <Button type="primary">
+                  <PlusOutlined />
+                  {createButtonLabel}
+                </Button>
+              </Link>
+            )}
           </div>
           <TableLayout {...tableProps} />
         </Col>