From 7e7abac3a304f08785e0a815f7fb8d0d4cd5e9b4 Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Thu, 17 Nov 2022 12:26:42 +0530 Subject: [PATCH] fix(ui): persist pagination on explore page when user hit back on browser (#8760) * fix the reset of the explore page once back for details page * fix page got reset when back from details page * fix unit tests * fix the reset info on sort change Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com> --- .../AdvancedSearch.component.tsx | 1 - .../components/Explore/Explore.component.tsx | 9 -- .../pages/explore/ExplorePage.component.tsx | 106 ++++++++++-------- .../ui/src/pages/explore/ExplorePage.test.tsx | 3 + .../resources/ui/src/utils/FilterUtils.ts | 2 +- 5 files changed, 63 insertions(+), 58 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearch.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearch.component.tsx index b6d6ffd607a..11631dc9cea 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearch.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearch.component.tsx @@ -18,7 +18,6 @@ import { Query, Utils as QbUtils, } from 'react-awesome-query-builder'; -import 'react-awesome-query-builder/css/antd.less'; import { elasticSearchFormat } from '../../utils/QueryBuilderElasticsearchFormatUtils'; import { emptyJsonTree, getQbConfigs } from './AdvancedSearch.constants'; import { AdvancedSearchProps } from './AdvancedSearch.interface'; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx index 682c31662fc..2c478c45570 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx @@ -20,7 +20,6 @@ import { Card, Col, Row, Tabs } from 'antd'; import { AxiosError } from 'axios'; import unique from 'fork-ts-checker-webpack-plugin/lib/utils/array/unique'; import { - isEmpty, isNil, isNumber, lowerCase, @@ -290,14 +289,6 @@ const Explore: React.FC = ({ term[filter.key] = filter.value; } }); - - onChangeAdvancedSearchQueryFilter( - isEmpty(term) - ? {} - : { - query: { bool: { must: [{ term }] } }, - } - ); }, [selectedQuickFilters]); return ( diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx index 18f37343b8b..5760899eb49 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx @@ -72,36 +72,6 @@ const ExplorePage: FunctionComponent = () => { [location.search] ); - const handleSearchIndexChange: (nSearchIndex: ExploreSearchIndex) => void = ( - nSearchIndex - ) => - history.push({ - pathname: `/explore/${tabsInfo[nSearchIndex].path}/${searchQueryParam}`, - }); - - const handleQueryFilterChange: ExploreProps['onChangeAdvancedSearchJsonTree'] = - (queryFilter) => - history.push({ - search: Qs.stringify({ - ...parsedSearch, - queryFilter: JSON.stringify(queryFilter), - }), - }); - - const handlePostFilterChange: ExploreProps['onChangePostFilter'] = ( - postFilter - ) => - history.push({ - search: Qs.stringify({ ...parsedSearch, postFilter }), - }); - - const handlePageChange: ExploreProps['onChangePage'] = (page) => - history.push({ search: Qs.stringify({ ...parsedSearch, page }) }); - - const handleShowDeletedChange: ExploreProps['onChangeShowDeleted'] = ( - showDeleted - ) => history.push({ search: Qs.stringify({ ...parsedSearch, showDeleted }) }); - const postFilter = useMemo( () => isFilterObject(parsedSearch.postFilter) @@ -115,6 +85,49 @@ const ExplorePage: FunctionComponent = () => { [postFilter] ); + const handlePageChange: ExploreProps['onChangePage'] = (page) => { + history.push({ search: Qs.stringify({ ...parsedSearch, page }) }); + }; + + const handleSearchIndexChange: (nSearchIndex: ExploreSearchIndex) => void = ( + nSearchIndex + ) => { + history.push({ + pathname: `/explore/${tabsInfo[nSearchIndex].path}/${searchQueryParam}`, + search: Qs.stringify({ page: 1 }), + }); + }; + + const handleQueryFilterChange: ExploreProps['onChangeAdvancedSearchJsonTree'] = + (queryFilter) => { + history.push({ + pathname: history.location.pathname, + search: Qs.stringify({ + ...parsedSearch, + queryFilter: JSON.stringify(queryFilter), + page: 1, + }), + }); + }; + + const handlePostFilterChange: ExploreProps['onChangePostFilter'] = ( + postFilter + ) => { + history.push({ + pathname: history.location.pathname, + search: Qs.stringify({ ...parsedSearch, postFilter, page: 1 }), + }); + }; + + const handleShowDeletedChange: ExploreProps['onChangeShowDeleted'] = ( + showDeleted + ) => { + history.push({ + pathname: history.location.pathname, + search: Qs.stringify({ ...parsedSearch, showDeleted, page: 1 }), + }); + }; + const queryFilter = useMemo(() => { if (!isString(parsedSearch.queryFilter)) { return undefined; @@ -150,7 +163,7 @@ const ExplorePage: FunctionComponent = () => { useEffect(() => { handleSearchIndexChange(searchIndex); - }, [searchIndex]); + }, [searchIndex, searchQueryParam]); const page = useMemo(() => { const pageParam = parsedSearch.page; @@ -238,19 +251,12 @@ const ExplorePage: FunctionComponent = () => { page, ]); - // Return to first page on filter change - useDeepCompareEffect( - () => handlePageChange(1), - [ - searchIndex, - searchQueryParam, - sortValue, - sortOrder, - showDeleted, - advancesSearchQueryFilter, - elasticsearchPostFilterQuery, - ] - ); + const handleAdvanceSearchQueryFilterChange = ( + filter?: Record + ) => { + handlePageChange(1); + setAdvancedSearchQueryFilter(filter); + }; useEffect(() => { AppState.updateExplorePageTab(tab); @@ -270,13 +276,19 @@ const ExplorePage: FunctionComponent = () => { sortValue={sortValue} tabCounts={searchHitCounts} onChangeAdvancedSearchJsonTree={handleQueryFilterChange} - onChangeAdvancedSearchQueryFilter={setAdvancedSearchQueryFilter} + onChangeAdvancedSearchQueryFilter={handleAdvanceSearchQueryFilterChange} onChangePage={handlePageChange} onChangePostFilter={handlePostFilterChange} onChangeSearchIndex={handleSearchIndexChange} onChangeShowDeleted={handleShowDeletedChange} - onChangeSortOder={setSortOrder} - onChangeSortValue={setSortValue} + onChangeSortOder={(sort) => { + handlePageChange(1); + setSortOrder(sort); + }} + onChangeSortValue={(sort) => { + handlePageChange(1); + setSortValue(sort); + }} /> ); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.test.tsx index 8d8b7ea8542..776bfe1ddb9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.test.tsx @@ -283,6 +283,9 @@ jest.mock('react-router-dom', () => ({ useParams: jest.fn().mockImplementation(() => ({ searchQuery: '' })), useHistory: () => ({ push: jest.fn(), + location: { + pathname: '', + }, }), useLocation: jest .fn() diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.ts index fdc8f15784c..9b907fa476d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.ts @@ -35,7 +35,7 @@ export const filterObjectToElasticsearchQuery: ( f: FilterObject | undefined ) => Record | undefined = (f) => { if (isNil(f)) { - return { query: { bool: {} } }; + return {}; } if (!Object.entries(f).length) { return undefined;