From 042561857ea5246f6a6e6be9b5e283ddadb006d9 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Tue, 9 Nov 2021 19:32:49 +0530 Subject: [PATCH] Fix: API call onClick of explore link from explore page (#1115) * Fix: API call onClick of explore link from explore page * fix failing test --- .../components/Explore/Explore.component.tsx | 21 +++++++---------- .../src/components/Explore/Explore.test.tsx | 23 ++++++++----------- .../components/Explore/explore.interface.ts | 1 + .../pages/explore/ExplorePage.component.tsx | 20 ++++++++++++---- 4 files changed, 33 insertions(+), 32 deletions(-) diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx index e2c9a9e8750..be9fde8fd0f 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx @@ -66,6 +66,7 @@ const Explore: React.FC = ({ searchResult, sortValue, error, + fetchCount, handlePathChange, handleSearchText, fetchData, @@ -99,10 +100,6 @@ const Explore: React.FC = ({ 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 = ({ setFilters((prevFilters) => { return { ...prevFilters, + ...getQueryParam(location.search), [type]: [], }; }); @@ -250,7 +248,7 @@ const Explore: React.FC = ({ }; 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 = ({ 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 = ({ setCurrentTab(getCurrentTab(tab)); setSearchIndex(getCurrentIndex(tab)); setCurrentPage(1); + if (!isMounting.current) { + fetchCount(); + } }, [tab]); useEffect(() => { @@ -461,7 +456,7 @@ const Explore: React.FC = ({ useEffect(() => { if (!isMounting.current && previsouIndex === getCurrentIndex(tab)) { - forceSetAgg.current = false; + forceSetAgg.current = Boolean(searchIndex); fetchTableData(); } }, [currentPage, filters, sortField, sortOrder]); diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.test.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.test.tsx index 498c1c54390..3237901c38c 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.test.tsx +++ b/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 updateTableCount = jest.fn(); -const updateTopicCount = jest.fn(); -const updateDashboardCount = jest.fn(); -const updatePipelineCount = jest.fn(); -const handlePathChange = jest.fn(); -const fetchData = jest.fn(); +const mockFunction = jest.fn(); const mockSearchResult = { resSearchResults: mockResponse as unknown as SearchResponse, @@ -60,9 +54,10 @@ describe('Test Explore component', () => { const { container } = render( { dashboard: 8, pipeline: 5, }} - updateDashboardCount={updateDashboardCount} - updatePipelineCount={updatePipelineCount} - updateTableCount={updateTableCount} - updateTopicCount={updateTopicCount} + updateDashboardCount={mockFunction} + updatePipelineCount={mockFunction} + updateTableCount={mockFunction} + updateTopicCount={mockFunction} />, { wrapper: MemoryRouter, diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Explore/explore.interface.ts b/catalog-rest-service/src/main/resources/ui/src/components/Explore/explore.interface.ts index 7f3ab4e396a..2c6b008e280 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/Explore/explore.interface.ts +++ b/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; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx index 7fe191b8fab..6203b24d23c 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx +++ b/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(''); @@ -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 = () => { ) : (