From 385eb9d686054df6d16f4cd5736f03f4597abdf0 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Sat, 9 Apr 2022 20:13:19 +0530 Subject: [PATCH] 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) --- .../src/main/resources/ui/src/AppState.ts | 4 +++ .../components/Explore/Explore.component.tsx | 34 +++++++++++++++---- .../components/Explore/explore.interface.ts | 2 +- .../common/facetfilter/FacetFilter.tsx | 27 ++++++++++++--- .../common/table-data-card/TableDataCard.tsx | 2 +- .../pages/explore/ExplorePage.component.tsx | 10 +++--- .../resources/ui/src/utils/FilterUtils.js | 14 ++++++++ 7 files changed, 75 insertions(+), 18 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/AppState.ts b/openmetadata-ui/src/main/resources/ui/src/AppState.ts index 96c07aee687..cbe93f48ef4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/AppState.ts +++ b/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(); 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 a162fba27c0..a085221fee0 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 @@ -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 = ({ tabCounts, @@ -450,6 +454,21 @@ const Explore: React.FC = ({ } }; + /** + * 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 = ({ } else { setCurrentPage(1); } + if (!isMounting.current) { + handleFilterChange(filters); + } }, [filters]); // alwyas Keep this useEffect at the end... diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts index 4b830d7d11a..4d0de1a8aca 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts +++ b/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; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx index 92b1ea73c19..ebc1b1475a2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx @@ -57,8 +57,24 @@ const FacetFilter: FunctionComponent = ({ const sortBuckets = (buckets: Array) => { return buckets.sort((a, b) => (a.key > b.key ? 1 : -1)); }; - const getBuckets = (buckets: Array, state: boolean) => { - return sortBuckets(buckets).slice(0, state ? buckets.length : LIST_SIZE); + + const sortBucketbyCount = (buckets: Array) => { + return buckets.sort((a, b) => (a.doc_count < b.doc_count ? 1 : -1)); + }; + + const getBuckets = ( + buckets: Array, + 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 = ({ const getBucketsByTitle = (title: string, buckets: Array) => { 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 []; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx index 7e681aba2e7..b3bb8bcf4be 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx @@ -77,7 +77,6 @@ const TableDataCard: FunctionComponent = ({ const OtherDetails: Array = [ { 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 = ({ showLabel: true, }); } + OtherDetails.push({ key: 'Service', value: serviceType, showLabel: true }); if (database) { OtherDetails.push({ key: 'Database', 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 3446aee209a..26eb943543c 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 @@ -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 ( - <> + {isLoading || isLoadingForData ? ( ) : ( @@ -287,7 +287,7 @@ const ExplorePage: FunctionComponent = () => { /> )} - + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.js b/openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.js index ed540f62e49..aca94b5f92a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.js +++ b/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('&'); +};