From 485b2098ecf69ebbaa35741ef404ecc8b881b2b3 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Wed, 20 Apr 2022 15:25:21 +0500 Subject: [PATCH] [Discover] add query edit option --- .../public/filter_bar/filter_add.tsx | 22 +---- .../public/filter_bar/filter_bar.tsx | 20 ++++- .../components/data_view_select_popover.tsx | 2 +- .../alert_types/components/query_popover.tsx | 81 +++++++++++++++++++ .../expression/search_source_expression.scss | 4 + .../search_source_expression_form.tsx | 58 ++++++------- 6 files changed, 138 insertions(+), 49 deletions(-) create mode 100644 x-pack/plugins/stack_alerts/public/alert_types/components/query_popover.tsx diff --git a/src/plugins/unified_search/public/filter_bar/filter_add.tsx b/src/plugins/unified_search/public/filter_bar/filter_add.tsx index faac634c2dff7..b490fd9df54fc 100644 --- a/src/plugins/unified_search/public/filter_bar/filter_add.tsx +++ b/src/plugins/unified_search/public/filter_bar/filter_add.tsx @@ -6,8 +6,7 @@ * Side Public License, v 1. */ -import { EuiButtonEmpty, EuiFlexItem, EuiPopover } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n-react'; +import { EuiFlexItem, EuiPopover } from '@elastic/eui'; import { buildEmptyFilter, Filter } from '@kbn/es-query'; import React, { useState } from 'react'; @@ -20,6 +19,7 @@ import { FilterEditor } from './filter_editor'; export interface Props { dataViews: DataView[]; + renderButton: (onClick: () => void) => JSX.Element; onAdd: (filter: Filter) => void; timeRangeForSuggestionsOverride?: boolean; } @@ -41,31 +41,17 @@ export const FilterAdd = (props: Props) => { const onAddFilterClick = () => setIsAddFilterPopoverOpen(!isAddFilterPopoverOpen); - const button = ( - - +{' '} - - - ); - return ( setIsAddFilterPopoverOpen(false)} anchorPosition="downLeft" panelPaddingSize="none" initialFocus=".filterEditor__hiddenItem" + display="block" ownFocus repositionOnScroll > diff --git a/src/plugins/unified_search/public/filter_bar/filter_bar.tsx b/src/plugins/unified_search/public/filter_bar/filter_bar.tsx index 7d93a1d968f03..d15b9b9cd4d57 100644 --- a/src/plugins/unified_search/public/filter_bar/filter_bar.tsx +++ b/src/plugins/unified_search/public/filter_bar/filter_bar.tsx @@ -6,8 +6,8 @@ * Side Public License, v 1. */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { InjectedIntl, injectI18n } from '@kbn/i18n-react'; +import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n-react'; import { Filter, enableFilter, @@ -134,6 +134,21 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { const classes = classNames('globalFilterBar', props.className); + const renderOpenPopoverButton = (onClick: () => void) => ( + + +{' '} + + + ); + return ( {renderItems()} - {i18n.translate('xpack.stackAlerts.components.ui.alertParams.dataViewButtonLabel', { + {i18n.translate('xpack.stackAlerts.components.ui.alertParams.dataViewPopoverTitle', { defaultMessage: 'Data view', })} diff --git a/x-pack/plugins/stack_alerts/public/alert_types/components/query_popover.tsx b/x-pack/plugins/stack_alerts/public/alert_types/components/query_popover.tsx new file mode 100644 index 0000000000000..51282894b95b5 --- /dev/null +++ b/x-pack/plugins/stack_alerts/public/alert_types/components/query_popover.tsx @@ -0,0 +1,81 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { useState } from 'react'; +import { + EuiButtonIcon, + EuiExpression, + EuiFlexGroup, + EuiFlexItem, + EuiFormRow, + EuiPopover, + EuiPopoverTitle, +} from '@elastic/eui'; +import { Query, DataView } from '@kbn/data-plugin/common'; +import { i18n } from '@kbn/i18n'; +import { QueryStringInput } from '@kbn/unified-search-plugin/public'; + +interface QueryPopoverProps { + query: Query; + dataViews: DataView[]; + onChangeQuery: (query: Query) => void; +} + +export const QueryPopover = ({ query, dataViews, onChangeQuery }: QueryPopoverProps) => { + const [queryPopoverOpen, setQueryPopoverOpen] = useState(false); + + const openPopover = () => setQueryPopoverOpen(true); + const closeQueryPopover = () => setQueryPopoverOpen(false); + + return ( + + } + isOpen={queryPopoverOpen} + closePopover={closeQueryPopover} + ownFocus + anchorPosition="downLeft" + zIndex={4000} + display="block" + > +
+ + + + {i18n.translate('xpack.stackAlerts.components.ui.alertParams.queryPopoverTitle', { + defaultMessage: 'Query', + })} + + + + + + + + + +
+ + ); +}; diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/search_source_expression.scss b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/search_source_expression.scss index 418449eb792c1..4bf4a7f69d4e7 100644 --- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/search_source_expression.scss +++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/search_source_expression.scss @@ -1,3 +1,7 @@ +html { + overflow: hidden; +} + .searchSourceAlertFilters { .euiExpression__value { width: 80%; diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/search_source_expression_form.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/search_source_expression_form.tsx index 66e49bc458a36..a73eef803a766 100644 --- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/search_source_expression_form.tsx +++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/search_source_expression_form.tsx @@ -18,11 +18,13 @@ import { ValueExpression, } from '@kbn/triggers-actions-ui-plugin/public'; import { FilterAdd } from '@kbn/unified-search-plugin/public'; +import { mapAndFlattenFilters } from '@kbn/data-plugin/public'; import { DataViewOption, EsQueryAlertParams, SearchType } from '../types'; import { DEFAULT_VALUES } from '../constants'; import { DataViewSelectPopover } from '../../components/data_view_select_popover'; import { useTriggersAndActionsUiDeps } from '../util'; import { FiltersList } from '../../components/filters_list'; +import { QueryPopover } from '../../components/query_popover'; interface SearchSourceParamsState { index: DataView; @@ -32,7 +34,7 @@ interface SearchSourceParamsState { interface SearchSourceAction { type: 'index' | 'filter' | 'query'; - payload: DataView | Filter | Query; + payload: DataView | Filter[] | Query; } type SearchSourceStateReducer = ( @@ -77,14 +79,29 @@ export const SearchSourceExpressionForm = (props: SearchSourceExpressionFormProp ); const onUpdateFilters = useCallback( - (newFilters) => { - // mutates new filter properties for migration purpose and further proper usage - data.query.filterManager.setFilters(newFilters, false); - dispatch({ type: 'filter', payload: newFilters }); - }, - [data.query.filterManager] + (newFilters) => dispatch({ type: 'filter', payload: mapAndFlattenFilters(newFilters) }), + [] ); + const onAddFilter = (newFilter: Filter) => onUpdateFilters([...filters, newFilter]); + + const onChangeQuery = (newQuery: Query) => dispatch({ type: 'query', payload: newQuery }); + + const renderAddFilterPopoverButton = (onClick: () => void) => { + return ( + + } + display="columns" + onClick={onClick} + /> + ); + }; + return ( @@ -111,29 +128,14 @@ export const SearchSourceExpressionForm = (props: SearchSourceExpressionFormProp selectedDataViewTitle={dataView.title} onSelectDataView={onSelectDataView} /> - {query.query !== '' && ( - - )} - 0 ? ( - - ) : ( - {}} /> - ) - } - display="columns" - /> + +