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

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

@@ -0,0 +1,76 @@
+/*
+ * 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 { 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 { 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;
+}
+
+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);
+
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiPopover
+        id="addFilterPopover"
+        button={props.renderButton(onAddFilterClick)}
+        isOpen={isAddFilterPopoverOpen}
+        closePopover={() => setIsAddFilterPopoverOpen(false)}
+        anchorPosition="downLeft"
+        panelPaddingSize="none"
+        initialFocus=".filterEditor__hiddenItem"
+        display="block"
+        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 { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage, 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);
@@ -191,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"
@@ -221,7 +179,12 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
           tabIndex={-1}
         >
           {renderItems()}
-          {renderAddFilter()}
+          <FilterAdd
+            renderButton={renderOpenPopoverButton}
+            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>
     );
   }

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

@@ -13,12 +13,11 @@ import { Filter, isFilterPinned } from '@kbn/es-query';
 import { FilterLabel } from '..';
 import type { FilterLabelStatus } from '../filter_item';
 
-interface Props {
+export interface Props {
   filter: Filter;
   valueLabel: string;
   filterLabelStatus: FilterLabelStatus;
   errorMessage?: string;
-  readonly?: boolean;
   hideAlias?: boolean;
   [propName: string]: any;
 }
@@ -30,7 +29,6 @@ export const FilterView: FC<Props> = ({
   valueLabel,
   errorMessage,
   filterLabelStatus,
-  readonly,
   hideAlias,
   ...rest
 }: Props) => {
@@ -54,45 +52,29 @@ export const FilterView: FC<Props> = ({
     })} ${title}`;
   }
 
-  const badgeProps: EuiBadgeProps = readonly
-    ? {
-        title,
-        color: 'hollow',
-        onClick,
-        onClickAriaLabel: i18n.translate(
-          'unifiedSearch.filter.filterBar.filterItemReadOnlyBadgeAriaLabel',
-          {
-            defaultMessage: 'Filter entry',
-          }
-        ),
-        iconOnClick,
+  const badgeProps: EuiBadgeProps = {
+    title,
+    color: 'hollow',
+    iconType: 'cross',
+    iconSide: 'right',
+    closeButtonProps: {
+      // Removing tab focus on close button because the same option can be obtained through the context menu
+      // Also, we may want to add a `DEL` keyboard press functionality
+      tabIndex: -1,
+    },
+    iconOnClick,
+    iconOnClickAriaLabel: i18n.translate(
+      'unifiedSearch.filter.filterBar.filterItemBadgeIconAriaLabel',
+      {
+        defaultMessage: 'Delete {filter}',
+        values: { filter: innerText },
       }
-    : {
-        title,
-        color: 'hollow',
-        iconType: 'cross',
-        iconSide: 'right',
-        closeButtonProps: {
-          // Removing tab focus on close button because the same option can be obtained through the context menu
-          // Also, we may want to add a `DEL` keyboard press functionality
-          tabIndex: -1,
-        },
-        iconOnClick,
-        iconOnClickAriaLabel: i18n.translate(
-          'unifiedSearch.filter.filterBar.filterItemBadgeIconAriaLabel',
-          {
-            defaultMessage: 'Delete {filter}',
-            values: { filter: innerText },
-          }
-        ),
-        onClick,
-        onClickAriaLabel: i18n.translate(
-          'unifiedSearch.filter.filterBar.filterItemBadgeAriaLabel',
-          {
-            defaultMessage: 'Filter actions',
-          }
-        ),
-      };
+    ),
+    onClick,
+    onClickAriaLabel: i18n.translate('unifiedSearch.filter.filterBar.filterItemBadgeAriaLabel', {
+      defaultMessage: 'Filter actions',
+    }),
+  };
 
   return (
     <EuiBadge {...badgeProps} {...rest}>

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

@@ -30,3 +30,10 @@ export const FilterItem = (props: React.ComponentProps<typeof LazyFilterItem>) =
     <LazyFilterItem {...props} />
   </React.Suspense>
 );
+
+const LazyFilterAdd = React.lazy(() => import('./filter_add'));
+export const FilterAdd = (props: React.ComponentProps<typeof LazyFilterAdd>) => (
+  <React.Suspense fallback={<Fallback />}>
+    <LazyFilterAdd {...props} />
+  </React.Suspense>
+);

src/plugins/unified_search/public/index.ts

@@ -15,7 +15,7 @@ export { QueryStringInput } from './query_string_input';
 export type { StatefulSearchBarProps, SearchBarProps } from './search_bar';
 export type { UnifiedSearchPublicPluginStart } from './types';
 export { SearchBar } from './search_bar';
-export { FilterLabel, FilterItem } from './filter_bar';
+export { FilterLabel, FilterItem, FilterAdd } from './filter_bar';
 
 export type { ApplyGlobalFilterActionContext } from './actions';
 export { ACTION_GLOBAL_APPLY_FILTER } from './actions';