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>

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';

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<ExploreProps> = ({
         term[filter.key] = filter.value;
       }
     });
-
-    onChangeAdvancedSearchQueryFilter(
-      isEmpty(term)
-        ? {}
-        : {
-            query: { bool: { must: [{ term }] } },
-          }
-    );
   }, [selectedQuickFilters]);
 
   return (

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<string, unknown>
+  ) => {
+    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);
+        }}
       />
     </PageContainerV1>
   );

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()

openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.ts

@@ -35,7 +35,7 @@ export const filterObjectToElasticsearchQuery: (
   f: FilterObject | undefined
 ) => Record<string, unknown> | undefined = (f) => {
   if (isNil(f)) {
-    return { query: { bool: {} } };
+    return {};
   }
   if (!Object.entries(f).length) {
     return undefined;