[Discover][Alerting] Implement editing of data view, query, filters

src/plugins/discover/kibana.json

@@ -12,6 +12,7 @@
     "urlForwarding",
     "navigation",
     "uiActions",
+    "unifiedSearch",
     "savedObjects",
     "dataViewFieldEditor",
     "dataViewEditor"

src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.tsx

@@ -74,6 +74,7 @@ export const getTopNavLinks = ({
         anchorElement,
         searchSource: savedSearch.searchSource,
         services,
+        savedQueryId: state.appStateContainer.getState().savedQuery,
       });
     },
     testId: 'discoverAlertsButton',

src/plugins/discover/public/application/main/components/top_nav/open_alerts_popover.tsx

@@ -26,9 +26,15 @@ interface AlertsPopoverProps {
   onClose: () => void;
   anchorElement: HTMLElement;
   searchSource: ISearchSource;
+  savedQueryId?: string;
 }
 
-export function AlertsPopover({ searchSource, anchorElement, onClose }: AlertsPopoverProps) {
+export function AlertsPopover({
+  searchSource,
+  anchorElement,
+  savedQueryId,
+  onClose,
+}: AlertsPopoverProps) {
   const dataView = searchSource.getField('index')!;
   const services = useDiscoverServices();
   const { triggersActionsUi } = services;
@@ -49,8 +55,9 @@ export function AlertsPopover({ searchSource, anchorElement, onClose }: AlertsPo
     return {
       searchType: 'searchSource',
       searchConfiguration: nextSearchSource.getSerializedFields(),
+      savedQueryId,
     };
-  }, [searchSource, services]);
+  }, [savedQueryId, searchSource, services]);
 
   const SearchThresholdAlertFlyout = useMemo(() => {
     if (!alertFlyoutVisible) {
@@ -156,11 +163,13 @@ export function openAlertsPopover({
   anchorElement,
   searchSource,
   services,
+  savedQueryId,
 }: {
   I18nContext: I18nStart['Context'];
   anchorElement: HTMLElement;
   searchSource: ISearchSource;
   services: DiscoverServices;
+  savedQueryId?: string;
 }) {
   if (isOpen) {
     closeAlertsPopover();
@@ -177,6 +186,7 @@ export function openAlertsPopover({
           onClose={closeAlertsPopover}
           anchorElement={anchorElement}
           searchSource={searchSource}
+          savedQueryId={savedQueryId}
         />
       </KibanaContextProvider>
     </I18nContext>

src/plugins/discover/public/build_services.ts

@@ -42,6 +42,7 @@ import { EmbeddableStart } from '@kbn/embeddable-plugin/public';
 import type { SpacesApi } from '@kbn/spaces-plugin/public';
 import { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public';
 import type { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
+import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import { DiscoverAppLocator } from './locator';
 import { getHistory } from './kibana_services';
 import { DiscoverStartPlugins } from './plugin';
@@ -81,6 +82,7 @@ export interface DiscoverServices {
   spaces?: SpacesApi;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
   locator: DiscoverAppLocator;
+  unifiedSearch: UnifiedSearchPublicPluginStart;
 }
 
 export const buildServices = memoize(function (
@@ -125,5 +127,6 @@ export const buildServices = memoize(function (
     dataViewEditor: plugins.dataViewEditor,
     triggersActionsUi: plugins.triggersActionsUi,
     locator,
+    unifiedSearch: plugins.unifiedSearch,
   };
 });

src/plugins/discover/public/plugin.tsx

@@ -35,6 +35,7 @@ import type { SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public';
 import type { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
+import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import { DocViewInput, DocViewInputFn } from './services/doc_views/doc_views_types';
 import { DocViewsRegistry } from './services/doc_views/doc_views_registry';
 import {
@@ -172,6 +173,7 @@ export interface DiscoverStartPlugins {
   dataViewFieldEditor: IndexPatternFieldEditorStart;
   spaces?: SpacesPluginStart;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+  unifiedSearch: UnifiedSearchPublicPluginStart;
 }
 
 /**

src/plugins/unified_search/public/filter_bar/filter_add.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiButtonEmpty, EuiFlexItem, EuiPopover } from '@elastic/eui';
+import { buildEmptyFilter, Filter } from '@kbn/es-query';
+import React, { useState } from 'react';
+
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { UI_SETTINGS } from '@kbn/data-plugin/common';
+import { IDataPluginServices } from '@kbn/data-plugin/public';
+import { DataView } from '@kbn/data-views-plugin/public';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { FILTER_EDITOR_WIDTH } from './filter_item';
+import { FilterEditor } from './filter_editor';
+
+export interface Props {
+  dataViews: DataView[];
+  onAdd: (filter: Filter) => void;
+  timeRangeForSuggestionsOverride?: boolean;
+}
+
+export const FilterAdd = (props: Props) => {
+  const kibana = useKibana<IDataPluginServices>();
+  const [isAddFilterPopoverOpen, setIsAddFilterPopoverOpen] = useState(false);
+  const { uiSettings } = kibana.services;
+
+  const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
+  const [indexPattern] = props.dataViews;
+  const index = indexPattern && indexPattern.id;
+  const newFilter = buildEmptyFilter(isPinned, index);
+
+  const onAddFilter = (filter: Filter) => {
+    setIsAddFilterPopoverOpen(false);
+    props.onAdd(filter);
+  };
+
+  const onAddFilterClick = () => setIsAddFilterPopoverOpen(!isAddFilterPopoverOpen);
+
+  const openPopoverButton = (
+    <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={openPopoverButton}
+        isOpen={isAddFilterPopoverOpen}
+        closePopover={() => setIsAddFilterPopoverOpen(false)}
+        anchorPosition="downLeft"
+        panelPaddingSize="none"
+        initialFocus=".filterEditor__hiddenItem"
+        ownFocus
+        repositionOnScroll
+      >
+        <EuiFlexItem grow={false}>
+          <div style={{ width: FILTER_EDITOR_WIDTH, maxWidth: '100%' }}>
+            <FilterEditor
+              filter={newFilter}
+              indexPatterns={props.dataViews}
+              onSubmit={onAddFilter}
+              onCancel={() => setIsAddFilterPopoverOpen(false)}
+              key={JSON.stringify(newFilter)}
+              timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
+            />
+          </div>
+        </EuiFlexItem>
+      </EuiPopover>
+    </EuiFlexItem>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default FilterAdd;

src/plugins/unified_search/public/filter_bar/filter_bar.tsx

@@ -6,10 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPopover } from '@elastic/eui';
-import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n-react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { InjectedIntl, injectI18n } from '@kbn/i18n-react';
 import {
-  buildEmptyFilter,
   Filter,
   enableFilter,
   disableFilter,
@@ -19,16 +18,15 @@ import {
   unpinFilter,
 } from '@kbn/es-query';
 import classNames from 'classnames';
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 
 import { METRIC_TYPE } from '@kbn/analytics';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { UI_SETTINGS } from '@kbn/data-plugin/common';
 import { IDataPluginServices } from '@kbn/data-plugin/public';
 import { DataView } from '@kbn/data-views-plugin/public';
 import { FilterOptions } from './filter_options';
-import { FILTER_EDITOR_WIDTH, FilterItem } from './filter_item';
-import { FilterEditor } from './filter_editor';
+import { FilterItem } from './filter_item';
+import { FilterAdd } from './filter_add';
 
 export interface Props {
   filters: Filter[];
@@ -42,7 +40,6 @@ export interface Props {
 
 const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
   const groupRef = useRef<HTMLDivElement>(null);
-  const [isAddFilterPopoverOpen, setIsAddFilterPopoverOpen] = useState(false);
   const kibana = useKibana<IDataPluginServices>();
   const { appName, usageCollection, uiSettings } = kibana.services;
   if (!uiSettings) return null;
@@ -55,8 +52,6 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
     }
   }
 
-  const onAddFilterClick = () => setIsAddFilterPopoverOpen(!isAddFilterPopoverOpen);
-
   function renderItems() {
     return props.filters.map((filter, i) => (
       <EuiFlexItem key={i} grow={false} className="globalFilterBar__flexItem">
@@ -74,60 +69,8 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
     ));
   }
 
-  function renderAddFilter() {
-    const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
-    const [indexPattern] = props.indexPatterns;
-    const index = indexPattern && indexPattern.id;
-    const newFilter = buildEmptyFilter(isPinned, index);
-
-    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}
-          isOpen={isAddFilterPopoverOpen}
-          closePopover={() => setIsAddFilterPopoverOpen(false)}
-          anchorPosition="downLeft"
-          panelPaddingSize="none"
-          initialFocus=".filterEditor__hiddenItem"
-          ownFocus
-          repositionOnScroll
-        >
-          <EuiFlexItem grow={false}>
-            <div style={{ width: FILTER_EDITOR_WIDTH, maxWidth: '100%' }}>
-              <FilterEditor
-                filter={newFilter}
-                indexPatterns={props.indexPatterns}
-                onSubmit={onAdd}
-                onCancel={() => setIsAddFilterPopoverOpen(false)}
-                key={JSON.stringify(newFilter)}
-                timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
-              />
-            </div>
-          </EuiFlexItem>
-        </EuiPopover>
-      </EuiFlexItem>
-    );
-  }
-
   function onAdd(filter: Filter) {
     reportUiCounter?.(METRIC_TYPE.CLICK, `filter:added`);
-    setIsAddFilterPopoverOpen(false);
 
     const filters = [...props.filters, filter];
     onFiltersUpdated(filters);
@@ -221,7 +164,11 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
           tabIndex={-1}
         >
           {renderItems()}
-          {renderAddFilter()}
+          <FilterAdd
+            dataViews={props.indexPatterns}
+            timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
+            onAdd={onAdd}
+          />
         </EuiFlexGroup>
       </EuiFlexItem>
     </EuiFlexGroup>

src/plugins/unified_search/public/filter_bar/filter_item.tsx

@@ -20,9 +20,9 @@ import React, { MouseEvent, useState, useEffect, HTMLAttributes } from 'react';
 import { IUiSettingsClient } from '@kbn/core/public';
 import { DataView } from '@kbn/data-views-plugin/public';
 import { getIndexPatternFromFilter, getDisplayValueFromFilter } from '@kbn/data-plugin/public';
-import { FilterEditor } from './filter_editor';
 import { FilterView } from './filter_view';
 import { getIndexPatterns } from '../services';
+import { FilterEditor } from './filter_editor';
 
 type PanelOptions = 'pinFilter' | 'editFilter' | 'negateFilter' | 'disableFilter' | 'deleteFilter';
 
@@ -37,7 +37,7 @@ export interface FilterItemProps {
   uiSettings: IUiSettingsClient;
   hiddenPanelOptions?: PanelOptions[];
   timeRangeForSuggestionsOverride?: boolean;
-  readonly?: boolean;
+  editOnly?: boolean;
 }
 
 type FilterPopoverProps = HTMLAttributes<HTMLDivElement> & EuiPopoverProps;
@@ -361,7 +361,6 @@ export function FilterItem(props: FilterItemProps) {
     iconOnClick: props.onRemove,
     onClick: handleBadgeClick,
     'data-test-subj': getDataTestSubj(valueLabelConfig),
-    readonly: props.readonly,
   };
 
   const popoverProps: FilterPopoverProps = {
@@ -376,14 +375,18 @@ export function FilterItem(props: FilterItemProps) {
     panelPaddingSize: 'none',
   };
 
-  if (props.readonly) {
+  if (props.editOnly) {
     return (
-      <EuiPopover
-        panelClassName="globalFilterItem__readonlyPanel"
-        anchorPosition="upCenter"
-        {...popoverProps}
-      >
-        <FilterView {...filterViewProps} hideAlias />
+      <EuiPopover panelClassName="globalFilterItem__editOnlyPanel" {...popoverProps}>
+        <FilterEditor
+          filter={filter}
+          indexPatterns={indexPatterns}
+          onSubmit={onSubmit}
+          onCancel={() => {
+            setIsPopoverOpen(false);
+          }}
+          timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
+        />
       </EuiPopover>
     );
   }