[Discover] Enable esQuery alert for adhoc data views (#140885)

## Summary

Closes #142514 #142389

This PR does the following: 
- Enables to create `esQuery` (in KQL or Lucene mode) using adhoc data
views from discover and management pages
- Adds `explore matching indices` button to data view picker in alert
flyout
- Adding adhoc data views from alert flyout should propage them to a
main discover picker


### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>

src/plugins/data/common/search/search_source/search_source.test.ts

@@ -983,14 +983,19 @@ describe('SearchSource', () => {
       },
     ];
 
-    const indexPattern123 = { id: '123', isPersisted: () => true } as DataView;
+    const indexPattern123 = {
+      id: '123',
+      isPersisted: jest.fn(() => true),
+      toSpec: jest.fn(),
+    } as unknown as DataView;
 
     test('should return serialized fields', () => {
       searchSource.setField('index', indexPattern123);
       searchSource.setField('filter', () => {
         return filter;
       });
       const serializedFields = searchSource.getSerializedFields();
+      expect(indexPattern123.toSpec).toHaveBeenCalledTimes(0);
       expect(serializedFields).toMatchSnapshot();
     });
 
@@ -1000,11 +1005,19 @@ describe('SearchSource', () => {
       const childSearchSource = searchSource.createChild();
       childSearchSource.setField('timeout', '100');
       const serializedFields = childSearchSource.getSerializedFields(true);
+      expect(indexPattern123.toSpec).toHaveBeenCalledTimes(0);
       expect(serializedFields).toMatchObject({
         timeout: '100',
         parent: { index: '123', from: 123 },
       });
     });
+
+    test('should use spec', () => {
+      indexPattern123.isPersisted = jest.fn(() => false);
+      searchSource.setField('index', indexPattern123);
+      searchSource.getSerializedFields(true, false);
+      expect(indexPattern123.toSpec).toHaveBeenCalledWith(false);
+    });
   });
 
   describe('fetch$', () => {

src/plugins/data/common/search/search_source/search_source.ts

@@ -923,7 +923,7 @@ export class SearchSource {
   /**
    * serializes search source fields (which can later be passed to {@link ISearchStartSearchSource})
    */
-  public getSerializedFields(recurse = false): SerializedSearchSourceFields {
+  public getSerializedFields(recurse = false, includeFields = true): SerializedSearchSourceFields {
     const {
       filter: originalFilters,
       aggs: searchSourceAggs,
@@ -938,7 +938,9 @@ export class SearchSource {
       ...searchSourceFields,
     };
     if (index) {
-      serializedSearchSourceFields.index = index.isPersisted() ? index.id : index.toSpec();
+      serializedSearchSourceFields.index = index.isPersisted()
+        ? index.id
+        : index.toSpec(includeFields);
     }
     if (sort) {
       serializedSearchSourceFields.sort = !Array.isArray(sort) ? [sort] : sort;

src/plugins/discover/public/application/main/components/layout/discover_layout.test.tsx

@@ -188,6 +188,8 @@ async function mountComponent(
     persistDataView: jest.fn(),
     updateAdHocDataViewId: jest.fn(),
     adHocDataViewList: [],
+    savedDataViewList: [],
+    updateDataViewList: jest.fn(),
   };
 
   const component = mountWithIntl(

src/plugins/discover/public/application/main/components/layout/discover_layout.tsx

@@ -72,6 +72,8 @@ export function DiscoverLayout({
   persistDataView,
   updateAdHocDataViewId,
   adHocDataViewList,
+  savedDataViewList,
+  updateDataViewList,
 }: DiscoverLayoutProps) {
   const {
     trackUiMetric,
@@ -233,6 +235,8 @@ export function DiscoverLayout({
         persistDataView={persistDataView}
         updateAdHocDataViewId={updateAdHocDataViewId}
         adHocDataViewList={adHocDataViewList}
+        savedDataViewList={savedDataViewList}
+        updateDataViewList={updateDataViewList}
       />
       <EuiPageBody className="dscPageBody" aria-describedby="savedSearchTitle">
         <SavedSearchURLConflictCallout

src/plugins/discover/public/application/main/components/layout/types.ts

@@ -8,7 +8,7 @@
 
 import type { Query, TimeRange, AggregateQuery } from '@kbn/es-query';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import { DataViewListItem, ISearchSource } from '@kbn/data-plugin/public';
+import type { DataViewListItem, ISearchSource } from '@kbn/data-plugin/public';
 import { RequestAdapter } from '@kbn/inspector-plugin/common';
 import { SavedSearch } from '@kbn/saved-search-plugin/public';
 import { DataTableRecord } from '../../../../types';
@@ -35,6 +35,8 @@ export interface DiscoverLayoutProps {
   state: AppState;
   stateContainer: GetStateReturn;
   persistDataView: (dataView: DataView) => Promise<DataView | undefined>;
+  updateDataViewList: (dataViews: DataView[]) => Promise<void>;
   updateAdHocDataViewId: (dataView: DataView) => Promise<DataView>;
   adHocDataViewList: DataView[];
+  savedDataViewList: DataViewListItem[];
 }

src/plugins/discover/public/application/main/components/top_nav/discover_topnav.test.tsx

@@ -47,6 +47,8 @@ function getProps(savePermissions = true): DiscoverTopNavProps {
     persistDataView: jest.fn(),
     updateAdHocDataViewId: jest.fn(),
     adHocDataViewList: [],
+    savedDataViewList: [],
+    updateDataViewList: jest.fn(),
   };
 }
 

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

@@ -8,7 +8,7 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import type { Query, TimeRange, AggregateQuery } from '@kbn/es-query';
-import { DataViewType, type DataView } from '@kbn/data-views-plugin/public';
+import { DataViewListItem, DataViewType, type DataView } from '@kbn/data-views-plugin/public';
 import type { DataViewPickerProps } from '@kbn/unified-search-plugin/public';
 import { ENABLE_SQL } from '../../../../../common';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
@@ -38,6 +38,8 @@ export type DiscoverTopNavProps = Pick<
   persistDataView: (dataView: DataView) => Promise<DataView | undefined>;
   updateAdHocDataViewId: (dataView: DataView) => Promise<DataView>;
   adHocDataViewList: DataView[];
+  savedDataViewList: DataViewListItem[];
+  updateDataViewList: (DataViewEditorStart: DataView[]) => Promise<void>;
 };
 
 export const DiscoverTopNav = ({
@@ -58,6 +60,8 @@ export const DiscoverTopNav = ({
   persistDataView,
   updateAdHocDataViewId,
   adHocDataViewList,
+  savedDataViewList,
+  updateDataViewList,
 }: DiscoverTopNavProps) => {
   const history = useHistory();
 
@@ -161,6 +165,8 @@ export const DiscoverTopNav = ({
         searchSource,
         onOpenSavedSearch,
         isPlainRecord,
+        adHocDataViews: adHocDataViewList,
+        updateDataViewList,
         persistDataView,
         updateAdHocDataViewId,
       }),
@@ -174,8 +180,10 @@ export const DiscoverTopNav = ({
       searchSource,
       onOpenSavedSearch,
       isPlainRecord,
+      adHocDataViewList,
       persistDataView,
       updateAdHocDataViewId,
+      updateDataViewList,
     ]
   );
 
@@ -213,6 +221,7 @@ export const DiscoverTopNav = ({
     onChangeDataView,
     textBasedLanguages: supportedTextBasedLanguages as DataViewPickerProps['textBasedLanguages'],
     adHocDataViews: adHocDataViewList,
+    savedDataViewList,
   };
 
   const onTextBasedSavedAndExit = useCallback(

src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.test.ts

@@ -38,6 +38,8 @@ test('getTopNavLinks result', () => {
     onOpenSavedSearch: () => {},
     isPlainRecord: false,
     persistDataView: jest.fn(),
+    updateDataViewList: jest.fn(),
+    adHocDataViews: [],
     updateAdHocDataViewId: jest.fn(),
   });
   expect(topNavLinks).toMatchInlineSnapshot(`
@@ -102,6 +104,8 @@ test('getTopNavLinks result for sql mode', () => {
     onOpenSavedSearch: () => {},
     isPlainRecord: true,
     persistDataView: jest.fn(),
+    updateDataViewList: jest.fn(),
+    adHocDataViews: [],
     updateAdHocDataViewId: jest.fn(),
   });
   expect(topNavLinks).toMatchInlineSnapshot(`

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

@@ -34,6 +34,8 @@ export const getTopNavLinks = ({
   onOpenSavedSearch,
   isPlainRecord,
   persistDataView,
+  adHocDataViews,
+  updateDataViewList,
   updateAdHocDataViewId,
 }: {
   dataView: DataView;
@@ -45,6 +47,8 @@ export const getTopNavLinks = ({
   searchSource: ISearchSource;
   onOpenSavedSearch: (id: string) => void;
   isPlainRecord: boolean;
+  adHocDataViews: DataView[];
+  updateDataViewList: (dataView: DataView[]) => Promise<void>;
   persistDataView: (dataView: DataView) => Promise<DataView | undefined>;
   updateAdHocDataViewId: (dataView: DataView) => Promise<DataView>;
 }): TopNavMenuData[] => {
@@ -75,16 +79,15 @@ export const getTopNavLinks = ({
       defaultMessage: 'Alerts',
     }),
     run: async (anchorElement: HTMLElement) => {
-      const updatedDataView = await persistDataView(dataView);
-      if (updatedDataView) {
-        openAlertsPopover({
-          I18nContext: services.core.i18n.Context,
-          anchorElement,
-          searchSource: savedSearch.searchSource,
-          services,
-          savedQueryId: state.appStateContainer.getState().savedQuery,
-        });
-      }
+      openAlertsPopover({
+        I18nContext: services.core.i18n.Context,
+        anchorElement,
+        searchSource: savedSearch.searchSource,
+        services,
+        adHocDataViews,
+        updateDataViewList,
+        savedQueryId: state.appStateContainer.getState().savedQuery,
+      });
     },
     testId: 'discoverAlertsButton',
   };

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { createSearchSourceMock } from '@kbn/data-plugin/public/mocks';
@@ -16,14 +16,20 @@ import { discoverServiceMock } from '../../../../__mocks__/services';
 import { dataViewWithTimefieldMock } from '../../../../__mocks__/data_view_with_timefield';
 import { dataViewMock } from '../../../../__mocks__/data_view';
 
+const Context = ({ children }: { children: ReactNode }) => <>{children}</>;
+
 const mount = (dataView = dataViewMock) =>
   mountWithIntl(
     <KibanaContextProvider services={discoverServiceMock}>
       <AlertsPopover
         searchSource={createSearchSourceMock({ index: dataView })}
         anchorElement={document.createElement('div')}
         savedQueryId={undefined}
-        onClose={() => {}}
+        adHocDataViews={[]}
+        services={discoverServiceMock}
+        updateDataViewList={jest.fn()}
+        onClose={jest.fn()}
+        I18nContext={Context}
       />
     </KibanaContextProvider>
   );

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

@@ -11,11 +11,10 @@ import ReactDOM from 'react-dom';
 import { I18nStart } from '@kbn/core/public';
 import { EuiWrappingPopover, EuiContextMenu } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { ISearchSource } from '@kbn/data-plugin/common';
+import type { DataView, ISearchSource } from '@kbn/data-plugin/common';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { DiscoverServices } from '../../../../build_services';
 import { updateSearchSource } from '../../utils/update_search_source';
-import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 
 const container = document.createElement('div');
 let isOpen = false;
@@ -27,16 +26,27 @@ interface AlertsPopoverProps {
   anchorElement: HTMLElement;
   searchSource: ISearchSource;
   savedQueryId?: string;
+  adHocDataViews: DataView[];
+  I18nContext: I18nStart['Context'];
+  services: DiscoverServices;
+  updateDataViewList: (dataViews: DataView[]) => Promise<void>;
+}
+
+interface EsQueryAlertMetaData {
+  isManagementPage?: boolean;
+  adHocDataViewList: DataView[];
 }
 
 export function AlertsPopover({
   searchSource,
   anchorElement,
   savedQueryId,
+  adHocDataViews,
+  services,
   onClose: originalOnClose,
+  updateDataViewList,
 }: AlertsPopoverProps) {
   const dataView = searchSource.getField('index')!;
-  const services = useDiscoverServices();
   const { triggersActionsUi } = services;
   const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState(false);
   const onClose = useCallback(() => {
@@ -63,20 +73,45 @@ export function AlertsPopover({
     };
   }, [savedQueryId, searchSource, services]);
 
+  const discoverMetadata: EsQueryAlertMetaData = useMemo(
+    () => ({
+      isManagementPage: false,
+      adHocDataViewList: adHocDataViews,
+    }),
+    [adHocDataViews]
+  );
+
   const SearchThresholdAlertFlyout = useMemo(() => {
     if (!alertFlyoutVisible) {
       return;
     }
+
+    const onFinishFlyoutInteraction = (metadata: EsQueryAlertMetaData) => {
+      updateDataViewList(metadata.adHocDataViewList);
+    };
+
     return triggersActionsUi?.getAddAlertFlyout({
+      metadata: discoverMetadata,
       consumer: 'discover',
-      onClose,
+      onClose: (_, metadata) => {
+        onFinishFlyoutInteraction(metadata as EsQueryAlertMetaData);
+        onClose();
+      },
+      onSave: async (metadata) => {
+        onFinishFlyoutInteraction(metadata as EsQueryAlertMetaData);
+      },
       canChangeTrigger: false,
       ruleTypeId: ALERT_TYPE_ID,
-      initialValues: {
-        params: getParams(),
-      },
+      initialValues: { params: getParams() },
     });
-  }, [getParams, onClose, triggersActionsUi, alertFlyoutVisible]);
+  }, [
+    alertFlyoutVisible,
+    triggersActionsUi,
+    discoverMetadata,
+    getParams,
+    updateDataViewList,
+    onClose,
+  ]);
 
   const hasTimeFieldName = dataView.timeFieldName;
   const panels = [
@@ -145,13 +180,17 @@ export function openAlertsPopover({
   anchorElement,
   searchSource,
   services,
+  adHocDataViews,
   savedQueryId,
+  updateDataViewList,
 }: {
   I18nContext: I18nStart['Context'];
   anchorElement: HTMLElement;
   searchSource: ISearchSource;
   services: DiscoverServices;
+  adHocDataViews: DataView[];
   savedQueryId?: string;
+  updateDataViewList: (dataViews: DataView[]) => Promise<void>;
 }) {
   if (isOpen) {
     closeAlertsPopover();
@@ -169,6 +208,10 @@ export function openAlertsPopover({
           anchorElement={anchorElement}
           searchSource={searchSource}
           savedQueryId={savedQueryId}
+          adHocDataViews={adHocDataViews}
+          I18nContext={I18nContext}
+          services={services}
+          updateDataViewList={updateDataViewList}
         />
       </KibanaContextProvider>
     </I18nContext>