[Discover] add query edit option

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 = (
-    <EuiButtonEmpty
-      size="s"
-      onClick={onAddFilterClick}
-      data-test-subj="addFilter"
-      className="globalFilterBar__addButton"
-    >
-      +{' '}
-      <FormattedMessage
-        id="unifiedSearch.filter.filterBar.addFilterButtonLabel"
-        defaultMessage="Add filter"
-      />
-    </EuiButtonEmpty>
-  );
-
   return (
     <EuiFlexItem grow={false}>
       <EuiPopover
         id="addFilterPopover"
-        button={button}
+        button={props.renderButton(onAddFilterClick)}
         isOpen={isAddFilterPopoverOpen}
         closePopover={() => setIsAddFilterPopoverOpen(false)}
         anchorPosition="downLeft"
         panelPaddingSize="none"
         initialFocus=".filterEditor__hiddenItem"
+        display="block"
         ownFocus
         repositionOnScroll
       >

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) => (
+    <EuiButtonEmpty
+      size="s"
+      onClick={onClick}
+      data-test-subj="addFilter"
+      className="globalFilterBar__addButton"
+    >
+      +{' '}
+      <FormattedMessage
+        id="unifiedSearch.filter.filterBar.addFilterButtonLabel"
+        defaultMessage="Add filter"
+      />
+    </EuiButtonEmpty>
+  );
+
   return (
     <EuiFlexGroup
       className="globalFilterGroup"
@@ -165,6 +180,7 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
         >
           {renderItems()}
           <FilterAdd
+            renderButton={renderOpenPopoverButton}
             dataViews={props.indexPatterns}
             timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
             onAdd={onAdd}

x-pack/plugins/stack_alerts/public/alert_types/components/data_view_select_popover.tsx

@@ -74,7 +74,7 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
         <EuiPopoverTitle>
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem>
-              {i18n.translate('xpack.stackAlerts.components.ui.alertParams.dataViewButtonLabel', {
+              {i18n.translate('xpack.stackAlerts.components.ui.alertParams.dataViewPopoverTitle', {
                 defaultMessage: 'Data view',
               })}
             </EuiFlexItem>

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 (
+    <EuiPopover
+      id="dataViewPopover"
+      button={
+        <EuiExpression
+          className="dscExpressionParam"
+          description={'Query'}
+          value={query.query}
+          display="columns"
+          onClick={openPopover}
+        />
+      }
+      isOpen={queryPopoverOpen}
+      closePopover={closeQueryPopover}
+      ownFocus
+      anchorPosition="downLeft"
+      zIndex={4000}
+      display="block"
+    >
+      <div style={{ width: '530px' }}>
+        <EuiPopoverTitle>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem>
+              {i18n.translate('xpack.stackAlerts.components.ui.alertParams.queryPopoverTitle', {
+                defaultMessage: 'Query',
+              })}
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                data-test-subj="closePopover"
+                iconType="cross"
+                color="danger"
+                aria-label={i18n.translate(
+                  'xpack.stackAlerts.components.ui.alertParams.closeDataViewPopoverLabel',
+                  { defaultMessage: 'Close' }
+                )}
+                onClick={closeQueryPopover}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPopoverTitle>
+        <EuiFormRow id="indexSelectSearchBox" fullWidth>
+          <QueryStringInput query={query} indexPatterns={dataViews} onChange={onChangeQuery} />
+        </EuiFormRow>
+      </div>
+    </EuiPopover>
+  );
+};

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%;

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 (
+      <EuiExpression
+        className="dscExpressionParam searchSourceAlertFilters"
+        title={'sas'}
+        description={'Filter'}
+        value={
+          <FiltersList filters={filters} dataView={dataView} onUpdateFilters={onUpdateFilters} />
+        }
+        display="columns"
+        onClick={onClick}
+      />
+    );
+  };
+
   return (
     <Fragment>
       <EuiTitle size="xs">
@@ -111,29 +128,14 @@ export const SearchSourceExpressionForm = (props: SearchSourceExpressionFormProp
         selectedDataViewTitle={dataView.title}
         onSelectDataView={onSelectDataView}
       />
-      {query.query !== '' && (
-        <EuiExpression
-          className="dscExpressionParam"
-          description={'Query'}
-          value={query.query}
-          display="columns"
-        />
-      )}
 
-      <EuiExpression
-        className="dscExpressionParam searchSourceAlertFilters"
-        title={'sas'}
-        description={'Filter'}
-        value={
-          filters.length > 0 ? (
-            <FiltersList filters={filters} dataView={dataView} onUpdateFilters={onUpdateFilters} />
-          ) : (
-            <FilterAdd dataViews={dataViews} onAdd={() => {}} />
-          )
-        }
-        display="columns"
-      />
+      <QueryPopover query={query} dataViews={dataViews} onChangeQuery={onChangeQuery} />
 
+      <FilterAdd
+        renderButton={renderAddFilterPopoverButton}
+        dataViews={dataViews}
+        onAdd={onAddFilter}
+      />
       <EuiSpacer size="s" />
       <EuiTitle size="xs">
         <h5>