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 df9d5d7501a..e344922207d 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 @@ -30,6 +30,7 @@ const AdvancedSearch: React.FC = ({ onChangeJsonTree, onChangeQueryFilter, searchIndex, + onAppliedFilterChange, }) => { const [config, setConfig] = useState(getQbConfigs(searchIndex)); @@ -40,13 +41,12 @@ const AdvancedSearch: React.FC = ({ useEffect(() => setConfig(getQbConfigs(searchIndex)), [searchIndex]); - useEffect( - () => - onChangeQueryFilter({ - query: elasticSearchFormat(immutableTree, config), - }), - [immutableTree, config] - ); + useEffect(() => { + onAppliedFilterChange(QbUtils.sqlFormat(immutableTree, config) ?? ''); + onChangeQueryFilter({ + query: elasticSearchFormat(immutableTree, config), + }); + }, [immutableTree, config]); return ( | undefined ) => void; + onAppliedFilterChange: (value: string) => void; } export type FilterObject = Record; 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 d3970f27c89..df91ecebfc2 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 @@ -1,4 +1,4 @@ -import { Button, Modal, Space } from 'antd'; +import { Button, Modal, Space, Typography } from 'antd'; import { delay } from 'lodash'; import React, { FunctionComponent, useState } from 'react'; import { JsonTree } from 'react-awesome-query-builder'; @@ -13,6 +13,7 @@ interface Props { searchIndex: SearchIndex; onChangeJsonTree: (tree?: JsonTree) => void; jsonTree?: JsonTree; + onAppliedFilterChange: (value: string) => void; } export const AdvancedSearchModal: FunctionComponent = ({ @@ -22,6 +23,7 @@ export const AdvancedSearchModal: FunctionComponent = ({ searchIndex, onChangeJsonTree, jsonTree, + onAppliedFilterChange, }: Props) => { const [queryFilter, setQueryFilter] = useState< Record | undefined @@ -62,9 +64,13 @@ export const AdvancedSearchModal: FunctionComponent = ({ title={t('label.advanced-search')} visible={visible} width={950}> + + {t('message.advanced-search-message')} + onChangeJsonTree(nTree)} onChangeQueryFilter={setQueryFilter} /> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/AppliedFilterText/AppliedFilterText.less b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AppliedFilterText/AppliedFilterText.less new file mode 100644 index 00000000000..ee6bbd347ce --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AppliedFilterText/AppliedFilterText.less @@ -0,0 +1,20 @@ +/* + * Copyright 2021 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. + */ + +@gray-color: #dde3ea; + +.advanced-filter-text { + background: @gray-color; + border-radius: 4px; + padding: 4px 8px; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/AppliedFilterText/AppliedFilterText.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AppliedFilterText/AppliedFilterText.tsx new file mode 100644 index 00000000000..c8ffc356071 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/AppliedFilterText/AppliedFilterText.tsx @@ -0,0 +1,60 @@ +/* + * Copyright 2021 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 { Button, Space, Typography } from 'antd'; +import React, { FC } from 'react'; +import { useTranslation } from 'react-i18next'; +import SVGIcons, { Icons } from '../../../utils/SvgUtils'; +import './AppliedFilterText.less'; + +interface AppliedFilterTextProps { + filterText: string; + onEdit: () => void; +} + +const AppliedFilterText: FC = ({ + filterText, + onEdit, +}) => { + const { t } = useTranslation(); + + return ( + + + {t('label.applied-advanced-search')} + + + + + {filterText} + +