Fix #3862 UI Search: Select a filter and go to a entity page and hitting back on the browser will reset the previous search results including selected filters (#3981)

openmetadata-ui/src/main/resources/ui/src/AppState.ts

@@ -52,6 +52,7 @@ class AppState {
       updateUserRole: action,
       updateUsers: action,
       updateUserPermissions: action,
+      updateExplorePageTab: action,
     });
   }
 
@@ -82,6 +83,9 @@ class AppState {
   updateUserPermissions(permissions: UserPermissions) {
     this.userPermissions = permissions;
   }
+  updateExplorePageTab(tab: string) {
+    this.explorePageTab = tab;
+  }
 }
 
 export default new AppState();

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx

@@ -11,6 +11,11 @@
  *  limitations under the License.
  */
 
+import {
+  faSortAmountDownAlt,
+  faSortAmountUpAlt,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { cloneDeep, isEmpty } from 'lodash';
 import {
@@ -59,15 +64,14 @@ import {
 } from '../../utils/AggregationUtils';
 import { formatDataResponse } from '../../utils/APIUtils';
 import { getCountBadge } from '../../utils/CommonUtils';
-import { getFilterCount, getFilterString } from '../../utils/FilterUtils';
+import {
+  getFilterCount,
+  getFilterString,
+  prepareQueryParams,
+} from '../../utils/FilterUtils';
 import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant';
 import PageLayout from '../containers/PageLayout';
 import { ExploreProps } from './explore.interface';
-import {
-  faSortAmountDownAlt,
-  faSortAmountUpAlt,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const Explore: React.FC<ExploreProps> = ({
   tabCounts,
@@ -450,6 +454,21 @@ const Explore: React.FC<ExploreProps> = ({
     }
   };
 
+  /**
+   * on filter change , change the route
+   * @param filtersObj - filter object
+   */
+  const handleFilterChange = (filtersObj: FilterObject) => {
+    const params = prepareQueryParams(filtersObj);
+
+    const explorePath = getExplorePathWithSearch(searchQuery);
+
+    history.push({
+      pathname: explorePath,
+      search: params,
+    });
+  };
+
   useEffect(() => {
     handleSearchText(searchQuery || emptyValue);
     setCurrentPage(1);
@@ -537,6 +556,9 @@ const Explore: React.FC<ExploreProps> = ({
     } else {
       setCurrentPage(1);
     }
+    if (!isMounting.current) {
+      handleFilterChange(filters);
+    }
   }, [filters]);
 
   // alwyas Keep this useEffect at the end...

openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts

@@ -40,6 +40,7 @@ export interface ExploreProps {
   error: string;
   searchQuery: string;
   showDeleted: boolean;
+  searchResult: ExploreSearchData | undefined;
   fetchCount: () => void;
   handlePathChange: (path: string) => void;
   handleSearchText: (text: string) => void;
@@ -50,5 +51,4 @@ export interface ExploreProps {
   updateDbtModelCount: (count: number) => void;
   fetchData: (value: SearchDataFunctionType[]) => void;
   onShowDeleted: (checked: boolean) => void;
-  searchResult: ExploreSearchData | undefined;
 }

openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx

@@ -57,8 +57,24 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
   const sortBuckets = (buckets: Array<Bucket>) => {
     return buckets.sort((a, b) => (a.key > b.key ? 1 : -1));
   };
-  const getBuckets = (buckets: Array<Bucket>, state: boolean) => {
+
+  const sortBucketbyCount = (buckets: Array<Bucket>) => {
+    return buckets.sort((a, b) => (a.doc_count < b.doc_count ? 1 : -1));
+  };
+
+  const getBuckets = (
+    buckets: Array<Bucket>,
+    state: boolean,
+    sortBycount = false
+  ) => {
+    if (sortBycount) {
+      return sortBucketbyCount(buckets).slice(
+        0,
+        state ? buckets.length : LIST_SIZE
+      );
+    } else {
       return sortBuckets(buckets).slice(0, state ? buckets.length : LIST_SIZE);
+    }
   };
 
   const getLinkTextByTitle = (title: string, bucketLength: number) => {
@@ -79,13 +95,14 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
   const getBucketsByTitle = (title: string, buckets: Array<Bucket>) => {
     switch (title) {
       case 'Service':
-        return getBuckets(buckets, showAllServices);
+        return getBuckets(buckets, showAllServices, true);
       case 'Tags':
-        return getBuckets(buckets, showAllTags);
+        return getBuckets(buckets, showAllTags, true);
+
       case 'Tier':
         return getBuckets(buckets, showAllTier);
       case 'Database':
-        return getBuckets(buckets, showAllDatabase);
+        return getBuckets(buckets, showAllDatabase, true);
       default:
         return [];
     }

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx

@@ -77,7 +77,6 @@ const TableDataCard: FunctionComponent<Props> = ({
 
   const OtherDetails: Array<ExtraInfo> = [
     { key: 'Owner', value: owner },
-    // { key: 'Service', value: serviceType },
     { key: 'Tier', value: getTier() },
   ];
   if (indexType !== SearchIndex.DASHBOARD && usage !== undefined) {
@@ -96,6 +95,7 @@ const TableDataCard: FunctionComponent<Props> = ({
       showLabel: true,
     });
   }
+  OtherDetails.push({ key: 'Service', value: serviceType, showLabel: true });
   if (database) {
     OtherDetails.push({
       key: 'Database',

openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx

@@ -13,7 +13,7 @@
 
 import { AxiosError } from 'axios';
 import { Bucket, SearchDataFunctionType, SearchResponse } from 'Models';
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import AppState from '../../AppState';
 import { searchData } from '../../axiosAPIs/miscAPI';
@@ -87,7 +87,7 @@ const ExplorePage: FunctionComponent = () => {
   };
 
   const handlePathChange = (path: string) => {
-    AppState.explorePageTab = path;
+    AppState.updateExplorePageTab(path);
   };
 
   const fetchCounts = () => {
@@ -209,7 +209,7 @@ const ExplorePage: FunctionComponent = () => {
   }, [searchText, showDeleted]);
 
   useEffect(() => {
-    AppState.explorePageTab = tab;
+    AppState.updateExplorePageTab(tab);
   }, [tab]);
 
   useEffect(() => {
@@ -254,7 +254,7 @@ const ExplorePage: FunctionComponent = () => {
   }, []);
 
   return (
-    <>
+    <Fragment>
       {isLoading || isLoadingForData ? (
         <Loader />
       ) : (
@@ -287,7 +287,7 @@ const ExplorePage: FunctionComponent = () => {
           />
         </PageContainerV1>
       )}
-    </>
+    </Fragment>
   );
 };
 

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

@@ -49,3 +49,17 @@ export const getFilterCount = (filterData) => {
 export const getFilterKey = (key) => {
   return key === 'service_type' ? 'service' : key;
 };
+
+/**
+ * Check for filters and return the filters in query param format
+ * @param filters - filter object
+ * @returns query param format
+ */
+export const prepareQueryParams = (filters) => {
+  const entries = Object.entries(filters);
+
+  return entries
+    .filter((entry) => entry[1].length)
+    .map((entry) => `${entry[0]}=${entry[1].join(',')}`)
+    .join('&');
+};