Fixed #388 Show the document count in explore page next to tabs and also in services tabs (#399)

catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx

@@ -44,6 +44,7 @@ import { usePrevious } from '../../hooks/usePrevious';
 import useToastContext from '../../hooks/useToastContext';
 import { getAggregationList } from '../../utils/AggregationUtils';
 import { formatDataResponse } from '../../utils/APIUtils';
+import { getCountBadge } from '../../utils/CommonUtils';
 import { getFilterString } from '../../utils/FilterUtils';
 import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant';
 import { getAggrWithDefaultValue } from './explore.constants';
@@ -92,10 +93,13 @@ const ExplorePage: React.FC = (): React.ReactElement => {
   const [sortOrder, setSortOrder] = useState<string>('desc');
   const [searchIndex, setSearchIndex] = useState<string>(SearchIndex.TABLE);
   const [currentTab, setCurrentTab] = useState<number>(1);
+  const [tableCount, setTableCount] = useState<number>(0);
+  const [topicCount, setTopicCount] = useState<number>(0);
   const [fieldList, setFieldList] =
     useState<Array<{ name: string; value: string }>>(tableSortingFields);
   const isMounting = useRef(true);
   const previsouIndex = usePrevious(searchIndex);
+
   const handleSelectedFilter = (
     checked: boolean,
     selectedFilter: string,
@@ -174,6 +178,40 @@ const ExplorePage: React.FC = (): React.ReactElement => {
     }
   };
 
+  const fetchCounts = () => {
+    const emptyValue = '';
+    const tableCount = searchData(
+      searchText,
+      0,
+      0,
+      getFilterString(filters),
+      emptyValue,
+      emptyValue,
+      SearchIndex.TABLE
+    );
+    const topicCount = searchData(
+      searchText,
+      0,
+      0,
+      getFilterString(filters),
+      emptyValue,
+      emptyValue,
+      SearchIndex.TOPIC
+    );
+    Promise.all([tableCount, topicCount])
+      .then(([table, topic]: Array<SearchResponse>) => {
+        setTableCount(table.data.hits.total.value);
+        setTopicCount(topic.data.hits.total.value);
+      })
+      .catch((err: AxiosError) => {
+        setError(ERROR404);
+        showToast({
+          variant: 'error',
+          body: err.response?.data?.responseMessage ?? ERROR500,
+        });
+      });
+  };
+
   const fetchTableData = (forceSetAgg: boolean) => {
     setIsLoading(true);
 
@@ -358,6 +396,7 @@ const ExplorePage: React.FC = (): React.ReactElement => {
                 resetFilters();
               }}>
               Tables
+              {getCountBadge(tableCount)}
             </button>
             <button
               className={`tw-pb-2 tw-px-4 tw-gh-tabs ${getActiveTabClass(2)}`}
@@ -370,6 +409,7 @@ const ExplorePage: React.FC = (): React.ReactElement => {
                 resetFilters();
               }}>
               Topics
+              {getCountBadge(topicCount)}
             </button>
           </div>
           {getSortingElements()}
@@ -400,6 +440,10 @@ const ExplorePage: React.FC = (): React.ReactElement => {
     }
   }, [currentPage, filters, sortField, sortOrder]);
 
+  useEffect(() => {
+    fetchCounts();
+  }, [searchText, filters]);
+
   // alwyas Keep this useEffect at the end...
   useEffect(() => {
     isMounting.current = false;

catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx

@@ -49,7 +49,7 @@ import {
   servicesDisplayName,
 } from '../../constants/services.const';
 import { ServiceCategory } from '../../enums/service.enum';
-import { getTabClasses } from '../../utils/CommonUtils';
+import { getCountBadge, getTabClasses } from '../../utils/CommonUtils';
 import { getFrequencyTime, serviceTypeLogo } from '../../utils/ServiceUtils';
 import SVGIcons from '../../utils/SvgUtils';
 
@@ -281,6 +281,7 @@ const ServicesPage = () => {
                       setServiceList(services[tab.name]);
                     }}>
                     {tab.displayName}
+                    {getCountBadge(services[tab.name].length)}
                   </button>
                 ))}
               </nav>

catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx

@@ -37,7 +37,7 @@ import Loader from '../../components/Loader/Loader';
 import FormModal from '../../components/Modals/FormModal';
 import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
 import { ERROR404 } from '../../constants/constants';
-import { countBackground } from '../../utils/styleconstant';
+import { getCountBadge } from '../../utils/CommonUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import AddUsersModal from './AddUsersModal';
 import Form from './Form';
@@ -143,16 +143,6 @@ const TeamsPage = () => {
     return tab === currentTab ? 'active' : '';
   };
 
-  const getCount = (count = 0) => {
-    return (
-      <span
-        className=" tw-py-0.5 tw-px-1 tw-ml-1 tw-border tw-rounded tw-text-xs"
-        style={{ background: countBackground }}>
-        <span data-testid="filter-count">{count}</span>
-      </span>
-    );
-  };
-
   const getTabs = () => {
     return (
       <div className="tw-mb-3 ">
@@ -163,7 +153,7 @@ const TeamsPage = () => {
               setCurrentTab(1);
             }}>
             Users
-            {getCount(currentTeam?.users.length)}
+            {getCountBadge(currentTeam?.users.length)}
           </button>
           <button
             className={`tw-pb-2 tw-px-4 tw-gh-tabs ${getActiveTabClass(2)}`}
@@ -171,7 +161,7 @@ const TeamsPage = () => {
               setCurrentTab(2);
             }}>
             Assets
-            {getCount(currentTeam?.owns.length)}
+            {getCountBadge(currentTeam?.owns.length)}
           </button>
         </nav>
       </div>

catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts

@@ -24,3 +24,4 @@ declare module 'react-draft-wysiwyg';
 declare module 'markdown-draft-js';
 declare module 'react-syntax-highlighter';
 declare module 'rehype-raw';
+declare module 'react-codemirror2';

catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -1,6 +1,8 @@
 import { isEmpty } from 'lodash';
 import { UserTeam } from 'Models';
+import React from 'react';
 import AppState from '../AppState';
+import { countBackground } from './styleconstant';
 
 export const arraySorterByKey = (
   key: string,
@@ -91,3 +93,13 @@ export const getTabClasses = (
 ) => {
   return 'tw-gh-tabs' + (activeTab === tab ? ' active' : '');
 };
+
+export const getCountBadge = (count = 0) => {
+  return (
+    <span
+      className=" tw-py-0.5 tw-px-1 tw-ml-1 tw-border tw-rounded tw-text-xs"
+      style={{ background: countBackground }}>
+      <span data-testid="filter-count">{count}</span>
+    </span>
+  );
+};