From baab56a4be3b10a7ff1c4e914933cdbbead09dc6 Mon Sep 17 00:00:00 2001 From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com> Date: Thu, 16 Mar 2023 09:28:16 +0530 Subject: [PATCH] chore(ui): fix advance search modal getting stuck (#10494) * chore(ui): fix advance search modal getting stuck * update URL and make request to get data * remove unwanted code * listen location search change and update data --- .../AdvancedSearch.component.tsx | 74 ------- .../Explore/AdvanceSearchModal.component.tsx | 115 ++-------- .../AdvanceSearchProvider.component.tsx | 196 ++++++++++++++++++ .../AdvanceSearchProvider.interface.ts} | 25 ++- .../components/Explore/Explore.component.tsx | 28 +-- .../components/Explore/explore.interface.ts | 2 +- .../facetfilter/facetFilter.interface.ts | 2 +- .../components/router/withAdvanceSearch.tsx | 22 ++ .../pages/explore/ExplorePage.component.tsx | 48 +---- .../resources/ui/src/utils/FilterUtils.ts | 2 +- 10 files changed, 266 insertions(+), 248 deletions(-) delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearch.component.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.component.tsx rename openmetadata-ui/src/main/resources/ui/src/components/{AdvancedSearch/AdvancedSearch.interface.ts => Explore/AdvanceSearchProvider/AdvanceSearchProvider.interface.ts} (56%) create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/router/withAdvanceSearch.tsx 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 deleted file mode 100644 index 878117a1921..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearch.component.tsx +++ /dev/null @@ -1,74 +0,0 @@ -/* - * Copyright 2022 Collate. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0 - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { - Builder, - Config, - Query, - Utils as QbUtils, -} from 'react-awesome-query-builder'; -import { - emptyJsonTree, - getQbConfigs, -} from '../../constants/AdvancedSearch.constants'; -import { elasticSearchFormat } from '../../utils/QueryBuilderElasticsearchFormatUtils'; -import { AdvancedSearchProps } from './AdvancedSearch.interface'; - -const AdvancedSearch: React.FC = ({ - jsonTree = emptyJsonTree, - onChangeJsonTree, - onChangeQueryFilter, - searchIndex, -}) => { - const [config, setConfig] = useState(getQbConfigs(searchIndex)); - - const immutableTree = useMemo( - () => QbUtils.checkTree(QbUtils.loadTree(jsonTree), config), - [jsonTree] - ); - - useEffect(() => setConfig(getQbConfigs(searchIndex)), [searchIndex]); - - useEffect(() => { - onChangeQueryFilter( - { - query: elasticSearchFormat(immutableTree, config), - }, - QbUtils.sqlFormat(immutableTree, config) ?? '' - ); - }, [immutableTree, config]); - - const handleChange = useCallback( - (nTree, nConfig) => { - setConfig(nConfig); - onChangeJsonTree(QbUtils.getTree(nTree)); - }, - [setConfig, onChangeJsonTree] - ); - - return ( - ( -
- -
- )} - value={immutableTree} - onChange={handleChange} - /> - ); -}; - -export default AdvancedSearch; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchModal.component.tsx index 9a36381c6f3..a8aac87e152 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchModal.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchModal.component.tsx @@ -12,102 +12,24 @@ */ import { Button, Modal, Space, Typography } from 'antd'; -import { debounce, delay, isString } from 'lodash'; -import Qs from 'qs'; -import React, { - FunctionComponent, - useCallback, - useMemo, - useState, -} from 'react'; -import { JsonTree, Utils } from 'react-awesome-query-builder'; +import React, { FunctionComponent } from 'react'; +import { Builder, Query } from 'react-awesome-query-builder'; import { useTranslation } from 'react-i18next'; -import { useHistory, useLocation } from 'react-router-dom'; -import { SearchIndex } from '../../enums/search.enum'; -import AdvancedSearch from '../AdvancedSearch/AdvancedSearch.component'; +import { useAdvanceSearch } from './AdvanceSearchProvider/AdvanceSearchProvider.component'; interface Props { visible: boolean; - onSubmit: ( - filter: Record | undefined, - sqlFilter: string - ) => void; + onSubmit: () => void; onCancel: () => void; - searchIndex: SearchIndex; } export const AdvancedSearchModal: FunctionComponent = ({ visible, onSubmit, onCancel, - searchIndex, }: Props) => { - const [queryFilter, setQueryFilter] = useState< - Record | undefined - >(); - const [sqlFilter, setSQLFilter] = useState(''); - const { t } = useTranslation(); - const history = useHistory(); - const location = useLocation(); - - const parsedSearch = useMemo( - () => - Qs.parse( - location.search.startsWith('?') - ? location.search.substr(1) - : location.search - ), - [location.search] - ); - - const jsonTree = useMemo(() => { - if (!isString(parsedSearch.queryFilter)) { - return undefined; - } - - try { - const queryFilter = JSON.parse(parsedSearch.queryFilter); - const immutableTree = Utils.loadTree(queryFilter as JsonTree); - if (Utils.isValidTree(immutableTree)) { - return queryFilter as JsonTree; - } - } catch { - return undefined; - } - - return undefined; - }, [location.search]); - - const [treeInternal, setTreeInternal] = useState( - jsonTree - ); - - const handleTreeUpdate = useCallback( - (tree?: JsonTree) => { - history.push({ - pathname: history.location.pathname, - search: Qs.stringify({ - ...parsedSearch, - queryFilter: tree ? JSON.stringify(tree) : undefined, - page: 1, - }), - }); - setTreeInternal(undefined); - }, - [history, parsedSearch] - ); - - const handleAdvanceSearchReset = () => { - delay(handleTreeUpdate, 100); - }; - const handleQueryFilterUpdate = useCallback( - (queryFilter: Record | undefined, sqlFilter: string) => { - setQueryFilter(queryFilter); - setSQLFilter(sqlFilter); - }, - [setQueryFilter, setSQLFilter] - ); + const { config, treeInternal, onTreeUpdate, onReset } = useAdvanceSearch(); return ( = ({ closeIcon={null} footer={ -
-
@@ -146,11 +59,15 @@ export const AdvancedSearchModal: FunctionComponent = ({ {t('message.advanced-search-message')} - ( +
+ +
+ )} + value={treeInternal} + onChange={onTreeUpdate} /> ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.component.tsx new file mode 100644 index 00000000000..145f3134914 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.component.tsx @@ -0,0 +1,196 @@ +/* + * Copyright 2023 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import Loader from 'components/Loader/Loader'; +import { + emptyJsonTree, + getQbConfigs, +} from 'constants/AdvancedSearch.constants'; +import { tabsInfo } from 'constants/explore.constants'; +import { SearchIndex } from 'enums/search.enum'; +import { isNil, isString } from 'lodash'; +import Qs from 'qs'; +import React, { + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from 'react'; +import { + Config, + ImmutableTree, + JsonTree, + Utils as QbUtils, +} from 'react-awesome-query-builder'; +import { useHistory, useLocation, useParams } from 'react-router-dom'; +import { elasticSearchFormat } from '../../../utils/QueryBuilderElasticsearchFormatUtils'; +import { AdvancedSearchModal } from '../AdvanceSearchModal.component'; +import { ExploreSearchIndex, UrlParams } from '../explore.interface'; +import { + AdvanceSearchContext, + AdvanceSearchProviderProps, +} from './AdvanceSearchProvider.interface'; + +const AdvancedSearchContext = React.createContext( + {} as AdvanceSearchContext +); + +export const AdvanceSearchProvider = ({ + children, +}: AdvanceSearchProviderProps) => { + const location = useLocation(); + const history = useHistory(); + const { tab } = useParams(); + const [loading, setLoading] = useState(true); + const searchIndex = useMemo(() => { + const tabInfo = Object.entries(tabsInfo).find( + ([, tabInfo]) => tabInfo.path === tab + ); + if (isNil(tabInfo)) { + return SearchIndex.TABLE; + } + + return tabInfo[0] as ExploreSearchIndex; + }, [tab]); + const [config, setConfig] = useState(getQbConfigs(searchIndex)); + + const defaultTree = useMemo( + () => QbUtils.checkTree(QbUtils.loadTree(emptyJsonTree), config), + [] + ); + + const parsedSearch = useMemo( + () => + Qs.parse( + location.search.startsWith('?') + ? location.search.substr(1) + : location.search + ), + [location.search] + ); + + const jsonTree = useMemo(() => { + if (!isString(parsedSearch.queryFilter)) { + return undefined; + } + + try { + const filter = JSON.parse(parsedSearch.queryFilter); + const immutableTree = QbUtils.loadTree(filter as JsonTree); + if (QbUtils.isValidTree(immutableTree)) { + return filter as JsonTree; + } + } catch { + return undefined; + } + + return undefined; + }, [parsedSearch]); + + const [showModal, setShowModal] = useState(false); + const [treeInternal, setTreeInternal] = useState(() => + jsonTree + ? QbUtils.checkTree(QbUtils.loadTree(jsonTree), config) + : defaultTree + ); + const [queryFilter, setQueryFilter] = useState< + Record | undefined + >(); + const [sqlQuery, setSQLQuery] = useState( + treeInternal ? QbUtils.sqlFormat(treeInternal, config) ?? '' : '' + ); + + useEffect(() => setConfig(getQbConfigs(searchIndex)), [searchIndex]); + + const handleChange = useCallback( + (nTree, nConfig) => { + setConfig(nConfig); + setTreeInternal(nTree); + }, + [setConfig, setTreeInternal] + ); + + const handleTreeUpdate = useCallback( + (tree?: ImmutableTree) => { + history.push({ + pathname: location.pathname, + search: Qs.stringify({ + ...parsedSearch, + queryFilter: tree ? JSON.stringify(tree) : undefined, + page: 1, + }), + }); + }, + [history, parsedSearch, location.pathname] + ); + + const toggleModal = (show: boolean) => { + setShowModal(show); + }; + + const handleReset = useCallback(() => { + setTreeInternal(QbUtils.checkTree(QbUtils.loadTree(emptyJsonTree), config)); + setQueryFilter(undefined); + setSQLQuery(''); + }, []); + + useEffect(() => { + if (jsonTree) { + const tree = QbUtils.checkTree(QbUtils.loadTree(jsonTree), config); + setTreeInternal(tree); + const qFilter = { + query: elasticSearchFormat(tree, config), + }; + setQueryFilter(qFilter); + setSQLQuery(QbUtils.sqlFormat(tree, config) ?? ''); + } else { + handleReset(); + } + + setLoading(false); + }, [jsonTree]); + + const handleSubmit = useCallback(() => { + const qFilter = { + query: elasticSearchFormat(treeInternal, config), + }; + setQueryFilter(qFilter); + setSQLQuery( + treeInternal ? QbUtils.sqlFormat(treeInternal, config) ?? '' : '' + ); + handleTreeUpdate(treeInternal); + setShowModal(false); + }, [treeInternal, config, handleTreeUpdate]); + + return ( + + {loading ? : children} + setShowModal(false)} + onSubmit={handleSubmit} + /> + + ); +}; + +export const useAdvanceSearch = () => useContext(AdvancedSearchContext); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearch.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.interface.ts similarity index 56% rename from openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearch.interface.ts rename to openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.interface.ts index 5914a508343..663f7377b2c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearch.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.interface.ts @@ -1,5 +1,5 @@ /* - * Copyright 2022 Collate. + * Copyright 2023 Collate. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -10,18 +10,21 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { ReactNode } from 'react'; +import { Config, ImmutableTree } from 'react-awesome-query-builder'; -import { JsonTree } from 'react-awesome-query-builder'; -import { SearchIndex } from '../../enums/search.enum'; +export interface AdvanceSearchProviderProps { + children: ReactNode; +} -export interface AdvancedSearchProps { - jsonTree: JsonTree | undefined; - searchIndex: SearchIndex; - onChangeJsonTree: (tree: JsonTree) => void; - onChangeQueryFilter: ( - queryFilter: Record | undefined, - sqlFilter: string - ) => void; +export interface AdvanceSearchContext { + queryFilter?: Record; + sqlQuery: string; + onTreeUpdate: (nTree: ImmutableTree, nConfig: Config) => void; + toggleModal: (show: boolean) => void; + treeInternal: ImmutableTree; + config: Config; + onReset: () => void; } export type FilterObject = Record; 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 1c993e5a186..caec04bf38c 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 @@ -42,7 +42,7 @@ import { FacetFilterProps } from '../common/facetfilter/facetFilter.interface'; import PageLayoutV1 from '../containers/PageLayoutV1'; import Loader from '../Loader/Loader'; import ExploreSkeleton from '../Skeleton/Explore/ExploreLeftPanelSkeleton.component'; -import { AdvancedSearchModal } from './AdvanceSearchModal.component'; +import { useAdvanceSearch } from './AdvanceSearchProvider/AdvanceSearchProvider.component'; import AppliedFilterText from './AppliedFilterText/AppliedFilterText'; import EntitySummaryPanel from './EntitySummaryPanel/EntitySummaryPanel.component'; import { @@ -77,7 +77,6 @@ const Explore: React.FC = ({ }) => { const { t } = useTranslation(); const { tab } = useParams<{ tab: string }>(); - const [showAdvanceSearchModal, setShowAdvanceSearchModal] = useState(false); const [selectedQuickFilters, setSelectedQuickFilters] = useState< ExploreQuickFilterField[] @@ -86,8 +85,7 @@ const Explore: React.FC = ({ const [entityDetails, setEntityDetails] = useState<{ details: EntityDetailsType; entityType: string }>(); - const [appliedFilterSQLFormat, setAppliedFilterSQLFormat] = - useState(''); + const { toggleModal, sqlQuery } = useAdvanceSearch(); const handleClosePanel = () => { setShowSummaryPanel(false); @@ -242,11 +240,6 @@ const Explore: React.FC = ({ } }, [tab, searchResults]); - useEffect(() => { - // reset Applied Filter SQL Format on tab change - setAppliedFilterSQLFormat(''); - }, [tab]); - return ( = ({ setShowAdvanceSearchModal(true)} + onAdvanceSearch={() => toggleModal(true)} onFieldValueSelect={handleAdvanceFieldValueSelect} /> - {appliedFilterSQLFormat && ( + {sqlQuery && ( setShowAdvanceSearchModal(true)} + filterText={sqlQuery} + onEdit={() => toggleModal(true)} /> )} @@ -357,15 +350,6 @@ const Explore: React.FC = ({ )} - setShowAdvanceSearchModal(false)} - onSubmit={(query, sqlFilter) => { - onChangeAdvancedSearchQueryFilter(query); - setAppliedFilterSQLFormat(sqlFilter); - }} - /> ); }; 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 2ac000a5424..b9b8354efbd 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 @@ -20,8 +20,8 @@ import { Pipeline } from '../../generated/entity/data/pipeline'; import { Table } from '../../generated/entity/data/table'; import { Topic } from '../../generated/entity/data/topic'; import { SearchResponse } from '../../interface/search.interface'; -import { FilterObject } from '../AdvancedSearch/AdvancedSearch.interface'; import { SearchDropdownOption } from '../SearchDropdown/SearchDropdown.interface'; +import { FilterObject } from './AdvanceSearchProvider/AdvanceSearchProvider.interface'; export type UrlParams = { searchQuery: string; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/facetFilter.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/facetFilter.interface.ts index 8adba6f365a..84cd92dd10d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/facetFilter.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/facetFilter.interface.ts @@ -11,8 +11,8 @@ * limitations under the License. */ +import { FilterObject } from 'components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.interface'; import { Aggregations } from '../../../interface/search.interface'; -import { FilterObject } from '../../AdvancedSearch/AdvancedSearch.interface'; export interface FacetFilterProps { aggregations?: Aggregations; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/router/withAdvanceSearch.tsx b/openmetadata-ui/src/main/resources/ui/src/components/router/withAdvanceSearch.tsx new file mode 100644 index 00000000000..d2160ba8a16 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/router/withAdvanceSearch.tsx @@ -0,0 +1,22 @@ +/* + * Copyright 2023 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { AdvanceSearchProvider } from 'components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.component'; +import React, { FC } from 'react'; + +export const withAdvanceSearch = (Component: FC) => (props: any) => { + 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 ff94d3c3d45..c59368805f2 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 @@ -12,6 +12,7 @@ */ import PageContainerV1 from 'components/containers/PageContainerV1'; +import { useAdvanceSearch } from 'components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.component'; import Explore from 'components/Explore/Explore.component'; import { ExploreProps, @@ -19,6 +20,7 @@ import { SearchHitCounts, UrlParams, } from 'components/Explore/explore.interface'; +import { withAdvanceSearch } from 'components/router/withAdvanceSearch'; import { SORT_ORDER } from 'enums/common.enum'; import { isNil, isString } from 'lodash'; import Qs from 'qs'; @@ -29,7 +31,6 @@ import React, { useMemo, useState, } from 'react'; -import { JsonTree, Utils as QbUtils } from 'react-awesome-query-builder'; import { useHistory, useLocation, useParams } from 'react-router-dom'; import { searchQuery } from 'rest/searchAPI'; import useDeepCompareEffect from 'use-deep-compare-effect'; @@ -69,6 +70,8 @@ const ExplorePage: FunctionComponent = () => { const [isLoading, setIsLoading] = useState(true); + const { queryFilter } = useAdvanceSearch(); + const parsedSearch = useMemo( () => Qs.parse( @@ -114,19 +117,6 @@ const ExplorePage: FunctionComponent = () => { setAdvancedSearchQueryFilter(undefined); }; - const handleQueryFilterChange = useCallback( - (queryFilter) => { - history.push({ - search: Qs.stringify({ - ...parsedSearch, - queryFilter: queryFilter ? JSON.stringify(queryFilter) : undefined, - page: 1, - }), - }); - }, - [history, parsedSearch] - ); - const handlePostFilterChange: ExploreProps['onChangePostFilter'] = ( postFilter ) => { @@ -143,28 +133,6 @@ const ExplorePage: FunctionComponent = () => { }); }; - const queryFilter = useMemo(() => { - if (!isString(parsedSearch.queryFilter)) { - return undefined; - } - - try { - const queryFilter = JSON.parse(parsedSearch.queryFilter); - const immutableTree = QbUtils.loadTree(queryFilter as JsonTree); - if (QbUtils.isValidTree(immutableTree)) { - return queryFilter as JsonTree; - } - } catch { - return undefined; - } - - return undefined; - }, [location.search]); - - useEffect(() => { - handleQueryFilterChange(queryFilter); - }, [queryFilter]); - const searchIndex = useMemo(() => { const tabInfo = Object.entries(tabsInfo).find( ([, tabInfo]) => tabInfo.path === tab @@ -206,9 +174,10 @@ const ExplorePage: FunctionComponent = () => { // That is why I first did typecast it into QueryFilterInterface type to access the properties. getCombinedQueryFilterObject( elasticsearchQueryFilter as unknown as QueryFilterInterface, - advancesSearchQueryFilter as unknown as QueryFilterInterface + (advancesSearchQueryFilter as unknown as QueryFilterInterface) ?? + queryFilter ), - [elasticsearchQueryFilter, advancesSearchQueryFilter] + [elasticsearchQueryFilter, advancesSearchQueryFilter, queryFilter] ); useDeepCompareEffect(() => { @@ -275,6 +244,7 @@ const ExplorePage: FunctionComponent = () => { showDeleted, advancesSearchQueryFilter, elasticsearchQueryFilter, + queryFilter, page, ]); @@ -320,4 +290,4 @@ const ExplorePage: FunctionComponent = () => { ); }; -export default ExplorePage; +export default withAdvanceSearch(ExplorePage); 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 73d8cb29432..ede707489a3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/FilterUtils.ts @@ -11,7 +11,7 @@ * limitations under the License. */ -import { FilterObject } from 'components/AdvancedSearch/AdvancedSearch.interface'; +import { FilterObject } from 'components/Explore/AdvanceSearchProvider/AdvanceSearchProvider.interface'; import { isArray, isNil, isObject, isString } from 'lodash'; export function isFilterObject(obj: unknown): obj is FilterObject {