[Discover] change flyout, add saved query functionality

src/plugins/discover/kibana.json

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

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

@@ -6,20 +6,20 @@
  * Side Public License, v 1.
  */
 
-import { EuiFlexItem, EuiPopover } from '@elastic/eui';
+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[];
-  renderButton: (onClick: () => void) => JSX.Element;
   onAdd: (filter: Filter) => void;
   timeRangeForSuggestionsOverride?: boolean;
 }
@@ -41,17 +41,31 @@ export const FilterAdd = (props: Props) => {
 
   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={props.renderButton(onAddFilterClick)}
+        button={openPopoverButton}
         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 { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } 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 {
   Filter,
   enableFilter,
@@ -134,21 +134,6 @@ 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"
@@ -180,7 +165,6 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
         >
           {renderItems()}
           <FilterAdd
-            renderButton={renderOpenPopoverButton}
             dataViews={props.indexPatterns}
             timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
             onAdd={onAdd}

src/plugins/unified_search/public/search_bar/search_bar.tsx

@@ -364,7 +364,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           isLoading={this.props.isLoading}
           fillSubmitButton={this.props.fillSubmitButton || false}
           prepend={
-            this.props.showFilterBar && this.state.query
+            this.state.query
               ? this.renderSavedQueryManagement(
                   this.props.onClearSavedQuery,
                   this.props.showSaveQuery,

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { injectI18n } from '@kbn/i18n-react';
 
@@ -16,16 +16,15 @@ import { FilterItem } from '@kbn/unified-search-plugin/public';
 import { useTriggersAndActionsUiDeps } from '../es_query/util';
 
 interface FiltersListProps {
-  dataView: DataView;
   filters: Filter[];
+  dataViews: DataView[];
   onUpdateFilters: (filters: Filter[]) => void;
 }
 
 const FilterItemComponent = injectI18n(FilterItem);
 
-export const FiltersList = ({ filters, dataView, onUpdateFilters }: FiltersListProps) => {
+export const FiltersList = ({ filters, dataViews, onUpdateFilters }: FiltersListProps) => {
   const { uiSettings } = useTriggersAndActionsUiDeps();
-  const dataViews = useMemo(() => [dataView], [dataView]);
 
   const onUpdate = (newFilter: Filter, index: number) => {
     const newFilters = [...filters];

x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/expression.tsx

@@ -7,7 +7,7 @@
 
 import React, { memo, PropsWithChildren } from 'react';
 import { i18n } from '@kbn/i18n';
-import { isEqual } from 'lodash';
+import deepEqual from 'fast-deep-equal';
 
 import 'brace/theme/github';
 
@@ -23,8 +23,8 @@ function areSearchSourceExpressionPropsEqual(
   prevProps: Readonly<PropsWithChildren<SearchSourceExpressionProps>>,
   nextProps: Readonly<PropsWithChildren<SearchSourceExpressionProps>>
 ) {
-  const areErrorsEqual = isEqual(prevProps.errors, nextProps.errors);
-  const areRuleParamsEqual = isEqual(prevProps.ruleParams, nextProps.ruleParams);
+  const areErrorsEqual = deepEqual(prevProps.errors, nextProps.errors);
+  const areRuleParamsEqual = deepEqual(prevProps.ruleParams, nextProps.ruleParams);
   return areErrorsEqual && areRuleParamsEqual;
 }