[Discover][Alerting] Implement editing of dataView, query & filters

src/plugins/data/public/mocks.ts

@@ -38,6 +38,7 @@ const createStartContract = (): Start => {
     }),
     get: jest.fn().mockReturnValue(Promise.resolve({})),
     clearCache: jest.fn(),
+    getIdsWithTitle: jest.fn(),
   } as unknown as DataViewsContract;
 
   return {

src/plugins/data/public/query/mocks.ts

@@ -31,7 +31,7 @@ const createStartContractMock = () => {
     addToQueryLog: jest.fn(),
     filterManager: createFilterManagerMock(),
     queryString: queryStringManagerMock.createStartContract(),
-    savedQueries: jest.fn() as any,
+    savedQueries: { getSavedQuery: jest.fn() } as any,
     state$: new Observable(),
     timefilter: timefilterServiceMock.createStartContract(),
     getEsQuery: jest.fn(),

src/plugins/data_views/public/mocks.ts

@@ -28,6 +28,7 @@ const createStartContract = (): Start => {
     get: jest.fn().mockReturnValue(Promise.resolve({})),
     clearCache: jest.fn(),
     getCanSaveSync: jest.fn(),
+    getIdsWithTitle: jest.fn(),
   } as unknown as jest.Mocked<DataViewsContract>;
 };
 

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/unified_search/public/filter_bar/filter_item/filter_item.tsx

@@ -42,7 +42,6 @@ export interface FilterItemProps {
   uiSettings: IUiSettingsClient;
   hiddenPanelOptions?: FilterPanelOption[];
   timeRangeForSuggestionsOverride?: boolean;
-  readonly?: boolean;
 }
 
 type FilterPopoverProps = HTMLAttributes<HTMLDivElement> & EuiPopoverProps;
@@ -364,7 +363,6 @@ export function FilterItem(props: FilterItemProps) {
     iconOnClick: handleIconClick,
     onClick: handleBadgeClick,
     'data-test-subj': getDataTestSubj(valueLabelConfig),
-    readonly: props.readonly,
   };
 
   const popoverProps: FilterPopoverProps = {
@@ -379,18 +377,6 @@ export function FilterItem(props: FilterItemProps) {
     panelPaddingSize: 'none',
   };
 
-  if (props.readonly) {
-    return (
-      <EuiPopover
-        panelClassName="globalFilterItem__readonlyPanel"
-        anchorPosition="upCenter"
-        {...popoverProps}
-      >
-        <FilterView {...filterViewProps} hideAlias />
-      </EuiPopover>
-    );
-  }
-
   return (
     <EuiPopover anchorPosition="downLeft" {...popoverProps}>
       {renderedComponent === 'menu' ? (

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

@@ -19,7 +19,6 @@ interface Props {
   fieldLabel?: string;
   filterLabelStatus: FilterLabelStatus;
   errorMessage?: string;
-  readonly?: boolean;
   hideAlias?: boolean;
   [propName: string]: any;
 }
@@ -32,7 +31,6 @@ export const FilterView: FC<Props> = ({
   fieldLabel,
   errorMessage,
   filterLabelStatus,
-  readonly,
   hideAlias,
   ...rest
 }: Props) => {
@@ -56,45 +54,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/query_string_input/query_bar_top_row.tsx

@@ -43,6 +43,7 @@ import { shallowEqual } from '../utils/shallow_equal';
 import { AddFilterPopover } from './add_filter_popover';
 import { DataViewPicker, DataViewPickerProps } from '../dataview_picker';
 import { FilterButtonGroup } from '../filter_bar/filter_button_group/filter_button_group';
+import type { SuggestionsListSize } from '../typeahead/suggestions_component';
 import './query_bar.scss';
 
 const SuperDatePicker = React.memo(
@@ -88,6 +89,7 @@ export interface QueryBarTopRowProps {
   filterBar?: React.ReactNode;
   showDatePickerAsBadge?: boolean;
   showSubmitButton?: boolean;
+  suggestionsSize?: SuggestionsListSize;
   isScreenshotMode?: boolean;
 }
 
@@ -469,6 +471,7 @@ export const QueryBarTopRow = React.memo(
                 timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
                 disableLanguageSwitcher={true}
                 prepend={renderFilterMenuOnly() && renderFilterButtonGroup()}
+                size={props.suggestionsSize}
               />
             </EuiFlexItem>
           )}

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

@@ -29,6 +29,7 @@ import { QueryBarMenu, QueryBarMenuProps } from '../query_string_input/query_bar
 import type { DataViewPickerProps } from '../dataview_picker';
 import QueryBarTopRow from '../query_string_input/query_bar_top_row';
 import { FilterBar, FilterItems } from '../filter_bar';
+import type { SuggestionsListSize } from '../typeahead/suggestions_component';
 import { searchBarStyles } from './search_bar.styles';
 
 export interface SearchBarInjectedDeps {
@@ -88,6 +89,8 @@ export interface SearchBarOwnProps {
   fillSubmitButton?: boolean;
   dataViewPickerComponentProps?: DataViewPickerProps;
   showSubmitButton?: boolean;
+  // defines size of suggestions query popover
+  suggestionsSize?: SuggestionsListSize;
   isScreenshotMode?: boolean;
 }
 
@@ -478,6 +481,7 @@ class SearchBarUI extends Component<SearchBarProps & WithEuiThemeProps, State> {
           dataViewPickerComponentProps={this.props.dataViewPickerComponentProps}
           showDatePickerAsBadge={this.shouldShowDatePickerAsBadge()}
           filterBar={filterBar}
+          suggestionsSize={this.props.suggestionsSize}
           isScreenshotMode={this.props.isScreenshotMode}
         />
       </div>

x-pack/plugins/monitoring/public/alerts/alert_form.test.tsx

@@ -157,8 +157,8 @@ describe('alert_form', () => {
 
     it('renders alert name', async () => {
       const alertNameField = wrapper.find('[data-test-subj="ruleNameInput"]');
-      expect(alertNameField.exists()).toBeTruthy();
       expect(alertNameField.first().prop('value')).toBe('test');
+      expect(alertNameField.exists()).toBeTruthy();
     });
 
     it('renders registered selected alert type', async () => {

x-pack/plugins/stack_alerts/kibana.json

@@ -14,7 +14,8 @@
     "triggersActionsUi",
     "kibanaReact",
     "savedObjects",
-    "data"
+    "data",
+    "kibanaUtils"
   ],
   "configPath": ["xpack", "stack_alerts"],
   "requiredBundles": ["esUiShared"],

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

@@ -0,0 +1,75 @@
+/*
+ * 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 from 'react';
+import { mountWithIntl, nextTick } from '@kbn/test-jest-helpers';
+import { DataViewSelectPopover } from './data_view_select_popover';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
+import { act } from 'react-dom/test-utils';
+
+const props = {
+  onSelectDataView: () => {},
+  initialDataViewTitle: 'kibana_sample_data_logs',
+  initialDataViewId: 'mock-data-logs-id',
+};
+
+const dataViewOptions = [
+  {
+    id: 'mock-data-logs-id',
+    namespaces: ['default'],
+    title: 'kibana_sample_data_logs',
+  },
+  {
+    id: 'mock-flyghts-id',
+    namespaces: ['default'],
+    title: 'kibana_sample_data_flights',
+  },
+  {
+    id: 'mock-ecommerce-id',
+    namespaces: ['default'],
+    title: 'kibana_sample_data_ecommerce',
+    typeMeta: {},
+  },
+  {
+    id: 'mock-test-id',
+    namespaces: ['default'],
+    title: 'test',
+    typeMeta: {},
+  },
+];
+
+const mount = () => {
+  const dataViewsMock = dataViewPluginMocks.createStartContract();
+  dataViewsMock.getIdsWithTitle.mockImplementation(() => Promise.resolve(dataViewOptions));
+
+  return {
+    wrapper: mountWithIntl(
+      <KibanaContextProvider services={{ data: { dataViews: dataViewsMock } }}>
+        <DataViewSelectPopover {...props} />
+      </KibanaContextProvider>
+    ),
+    dataViewsMock,
+  };
+};
+
+describe('DataViewSelectPopover', () => {
+  test('renders properly', async () => {
+    const { wrapper, dataViewsMock } = mount();
+
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+
+    expect(dataViewsMock.getIdsWithTitle).toHaveBeenCalled();
+    expect(wrapper.find('[data-test-subj="selectDataViewExpression"]').exists()).toBeTruthy();
+
+    const getIdsWithTitleResult = await dataViewsMock.getIdsWithTitle.mock.results[0].value;
+    expect(getIdsWithTitleResult).toBe(dataViewOptions);
+  });
+});