Show friendly message when table has no data

Author: ciremusyoka

packages/fhir-location-management/src/components/AllLocationListFlat/index.tsx

@@ -1,18 +1,13 @@
 import React, { useState } from 'react';
-import { useSimpleTabularView } from '@opensrp/react-utils';
+import { useSimpleTabularView, NoData } from '@opensrp/react-utils';
 import { RouteComponentProps } from 'react-router';
 import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation';
 import {
   locationResourceType,
   URL_LOCATION_UNIT_EDIT,
   URL_LOCATION_UNIT_ADD,
 } from '../../constants';
-import {
-  BrokenPage,
-  TableLayout,
-  PageHeader,
-  SearchForm,
-} from '@opensrp/react-utils';
+import { BrokenPage, TableLayout, PageHeader, SearchForm } from '@opensrp/react-utils';
 import { Dictionary } from '@onaio/utils';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from '../../mls';
@@ -32,9 +27,9 @@ interface Props {
 }
 
 const getSearchParams = (search: string | null) => {
-  const baseSearchParam = {"_include": "Location:partof"};
-  if(search) {
-    return {"name:contains": search, ...baseSearchParam}
+  const baseSearchParam = { _include: 'Location:partof' };
+  if (search) {
+    return { 'name:contains': search, ...baseSearchParam };
   }
   return baseSearchParam;
 };
@@ -48,7 +43,7 @@ export const AllLocationListFlat: React.FC<LocationListPropTypes> = (props) => {
   const [_, setDetailId] = useState<string>();
 
   const {
-    queryValues: { data, isFetching, isLoading, error},
+    queryValues: { data, isFetching, isLoading, error },
     tablePaginationProps,
     searchFormProps,
   } = useSimpleTabularView<ILocation>(fhirBaseURL, locationResourceType, getSearchParams);
@@ -78,7 +73,8 @@ export const AllLocationListFlat: React.FC<LocationListPropTypes> = (props) => {
           </Button>
         ),
       },
-    ]};
+    ];
+  };
 
   const columns = [
     {
@@ -129,11 +125,34 @@ export const AllLocationListFlat: React.FC<LocationListPropTypes> = (props) => {
     },
   ];
 
+  const AddLocationBtn = () => (
+    <Button type="primary" onClick={() => history.push(URL_LOCATION_UNIT_ADD)}>
+      <PlusOutlined />
+      {t('Add Location')}
+    </Button>
+  );
+
+  const getTableLocale = () => {
+    const urlQuery = history.location.search;
+    const nameSearchActive = urlQuery.includes('search=');
+    if (!tableData.length && (!isFetching || !isLoading)) {
+      const description = nameSearchActive
+        ? ''
+        : t('No data available to display, you can start adding data now ');
+      return {
+        emptyText: (
+          <NoData description={description}>{!nameSearchActive && <AddLocationBtn />}</NoData>
+        ),
+      };
+    }
+  };
+
   const tableProps = {
     datasource: tableData,
     columns,
     loading: isFetching || isLoading,
     pagination: tablePaginationProps,
+    locale: getTableLocale(),
   };
 
   return (
@@ -148,10 +167,7 @@ export const AllLocationListFlat: React.FC<LocationListPropTypes> = (props) => {
             <SearchForm {...searchFormProps} />
             <RbacCheck permissions={['Location.create']}>
               <Link to={URL_LOCATION_UNIT_ADD}>
-                <Button type="primary" onClick={() => history.push(URL_LOCATION_UNIT_ADD)}>
-                  <PlusOutlined />
-                  {t('Add Location')}
-                </Button>
+                <AddLocationBtn />
               </Link>
             </RbacCheck>
           </div>

packages/fhir-location-management/src/components/LocationUnitList/Table.tsx

@@ -7,6 +7,7 @@ import { URL_LOCATION_UNIT_EDIT } from '../../constants';
 import { Column, TableLayout } from '@opensrp/react-utils';
 import { useTranslation } from '../../mls';
 import { RbacCheck } from '@opensrp/rbac';
+import { TableLocale } from 'antd/es/table/interface';
 
 export interface TableData {
   id: string;
@@ -21,10 +22,11 @@ export interface TableData {
 export interface Props {
   data: TableData[];
   onViewDetails?: (row: TableData) => void;
+  locale?: TableLocale;
 }
 
 const Table: React.FC<Props> = (props: Props) => {
-  const { onViewDetails } = props;
+  const { onViewDetails, ...rest } = props;
   const { t } = useTranslation();
   const columns: Column<TableData>[] = [
     {
@@ -93,6 +95,7 @@ const Table: React.FC<Props> = (props: Props) => {
           </>
         ),
       }}
+      {...rest}
     />
   );
 };