Fix: API call onClick of explore link from explore page (#1115)

* Fix: API call onClick of explore link from explore page

* fix failing test

catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx

@@ -66,6 +66,7 @@ const Explore: React.FC<ExploreProps> = ({
   searchResult,
   sortValue,
   error,
+  fetchCount,
   handlePathChange,
   handleSearchText,
   fetchData,
@@ -99,10 +100,6 @@ const Explore: React.FC<ExploreProps> = ({
   const isMounting = useRef(true);
   const forceSetAgg = useRef(false);
   const previsouIndex = usePrevious(searchIndex);
-  const keyOfPreviousIndex = searchIndex.split(
-    '_'
-  )[0] as keyof ExploreProps['tabCounts'];
-  const previousIndexCount = usePrevious(tabCounts[keyOfPreviousIndex]);
 
   const handleSelectedFilter = (
     checked: boolean,
@@ -136,6 +133,7 @@ const Explore: React.FC<ExploreProps> = ({
     setFilters((prevFilters) => {
       return {
         ...prevFilters,
+        ...getQueryParam(location.search),
         [type]: [],
       };
     });
@@ -250,7 +248,7 @@ const Explore: React.FC<ExploreProps> = ({
   };
 
   const getFacetedFilter = () => {
-    const facetFilters: FilterObject = filterObject;
+    const facetFilters: FilterObject = cloneDeep(filterObject);
     for (const key in filters) {
       if (visibleFilters.includes(key)) {
         facetFilters[key as keyof typeof filterObject] =
@@ -354,14 +352,8 @@ const Explore: React.FC<ExploreProps> = ({
           searchQuery,
           tabsInfo[selectedTab - 1].path
         ),
+        search: location.search,
       });
-
-      if (previousIndexCount) {
-        // setTimeout because we need to reset previous index count after tab change
-        setTimeout(() => {
-          setCount(previousIndexCount as number, previsouIndex as string);
-        }, 100);
-      }
     }
   };
   const getTabs = () => {
@@ -412,6 +404,9 @@ const Explore: React.FC<ExploreProps> = ({
     setCurrentTab(getCurrentTab(tab));
     setSearchIndex(getCurrentIndex(tab));
     setCurrentPage(1);
+    if (!isMounting.current) {
+      fetchCount();
+    }
   }, [tab]);
 
   useEffect(() => {
@@ -461,7 +456,7 @@ const Explore: React.FC<ExploreProps> = ({
 
   useEffect(() => {
     if (!isMounting.current && previsouIndex === getCurrentIndex(tab)) {
-      forceSetAgg.current = false;
+      forceSetAgg.current = Boolean(searchIndex);
       fetchTableData();
     }
   }, [currentPage, filters, sortField, sortOrder]);

catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.test.tsx

@@ -40,13 +40,7 @@ jest.mock('../../components/searched-data/SearchedData', () => {
     ));
 });
 
-const handleSearchText = jest.fn();
+const mockFunction = jest.fn();
-const updateTableCount = jest.fn();
-const updateTopicCount = jest.fn();
-const updateDashboardCount = jest.fn();
-const updatePipelineCount = jest.fn();
-const handlePathChange = jest.fn();
-const fetchData = jest.fn();
 
 const mockSearchResult = {
   resSearchResults: mockResponse as unknown as SearchResponse,
@@ -60,9 +54,10 @@ describe('Test Explore component', () => {
     const { container } = render(
       <Explore
         error=""
-        fetchData={fetchData}
+        fetchCount={mockFunction}
-        handlePathChange={handlePathChange}
+        fetchData={mockFunction}
-        handleSearchText={handleSearchText}
+        handlePathChange={mockFunction}
+        handleSearchText={mockFunction}
         searchQuery=""
         searchResult={mockSearchResult}
         searchText=""
@@ -74,10 +69,10 @@ describe('Test Explore component', () => {
           dashboard: 8,
           pipeline: 5,
         }}
-        updateDashboardCount={updateDashboardCount}
+        updateDashboardCount={mockFunction}
-        updatePipelineCount={updatePipelineCount}
+        updatePipelineCount={mockFunction}
-        updateTableCount={updateTableCount}
+        updateTableCount={mockFunction}
-        updateTopicCount={updateTopicCount}
+        updateTopicCount={mockFunction}
       />,
       {
         wrapper: MemoryRouter,

catalog-rest-service/src/main/resources/ui/src/components/Explore/explore.interface.ts

@@ -41,6 +41,7 @@ export interface ExploreProps {
   tab: string;
   error: string;
   searchQuery: string;
+  fetchCount: () => void;
   handlePathChange: (path: string) => void;
   handleSearchText: (text: string) => void;
   updateTableCount: (count: number) => void;

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

@@ -44,6 +44,7 @@ import { getFilterString } from '../../utils/FilterUtils';
 import { getTotalEntityCountByService } from '../../utils/ServiceUtils';
 
 const ExplorePage: FunctionComponent = () => {
+  const initialFilter = getFilterString(getQueryParam(location.search));
   const [isLoading, setIsLoading] = useState(true);
   const [isLoadingForData, setIsLoadingForData] = useState(true);
   const [error, setError] = useState<string>('');
@@ -93,7 +94,15 @@ const ExplorePage: FunctionComponent = () => {
     ];
 
     const entityCounts = entities.map((entity) =>
-      searchData(searchText, 0, 0, emptyValue, emptyValue, emptyValue, entity)
+      searchData(
+        searchText,
+        0,
+        0,
+        initialFilter,
+        emptyValue,
+        emptyValue,
+        entity
+      )
     );
 
     Promise.allSettled(entityCounts)
@@ -189,7 +198,7 @@ const ExplorePage: FunctionComponent = () => {
         queryString: searchText,
         from: INITIAL_FROM,
         size: PAGE_SIZE,
-        filters: getFilterString(getQueryParam(location.search)),
+        filters: initialFilter,
         sortField: initialSortField,
         sortOrder: INITIAL_SORT_ORDER,
         searchIndex: getCurrentIndex(tab),
@@ -198,7 +207,7 @@ const ExplorePage: FunctionComponent = () => {
         queryString: searchText,
         from: INITIAL_FROM,
         size: ZERO_SIZE,
-        filters: getFilterString(getQueryParam(location.search)),
+        filters: initialFilter,
         sortField: initialSortField,
         sortOrder: INITIAL_SORT_ORDER,
         searchIndex: getCurrentIndex(tab),
@@ -207,7 +216,7 @@ const ExplorePage: FunctionComponent = () => {
         queryString: searchText,
         from: INITIAL_FROM,
         size: ZERO_SIZE,
-        filters: getFilterString(getQueryParam(location.search)),
+        filters: initialFilter,
         sortField: initialSortField,
         sortOrder: INITIAL_SORT_ORDER,
         searchIndex: getCurrentIndex(tab),
@@ -216,7 +225,7 @@ const ExplorePage: FunctionComponent = () => {
         queryString: searchText,
         from: INITIAL_FROM,
         size: ZERO_SIZE,
-        filters: getFilterString(getQueryParam(location.search)),
+        filters: initialFilter,
         sortField: initialSortField,
         sortOrder: INITIAL_SORT_ORDER,
         searchIndex: getCurrentIndex(tab),
@@ -231,6 +240,7 @@ const ExplorePage: FunctionComponent = () => {
       ) : (
         <Explore
           error={error}
+          fetchCount={fetchCounts}
           fetchData={fetchData}
           handlePathChange={handlePathChange}
           handleSearchText={handleSearchText}