[Discover][Embeddable] Pass embeddable filters to Surrounding Docs page (#197190)

## Summary

This PR makes sure to pass `filters` to DocViewer from the search panel
on Dashboard. And DocViewer will pass `filters` over to Surrounding Docs
page.

### Checklist

- [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

src/plugins/discover/public/embeddable/components/saved_search_grid.tsx

@@ -9,7 +9,7 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
-import { AggregateQuery, Query } from '@kbn/es-query';
+import type { AggregateQuery, Query, Filter } from '@kbn/es-query';
 import type { SearchResponseWarning } from '@kbn/search-response-warnings';
 import { MAX_DOC_FIELDS_DISPLAYED, SHOW_MULTIFIELDS } from '@kbn/discover-utils';
 import {
@@ -30,7 +30,8 @@ import { useProfileAccessor } from '../../context_awareness';
 interface DiscoverGridEmbeddableProps extends Omit<UnifiedDataTableProps, 'sampleSizeState'> {
   sampleSizeState: number; // a required prop
   totalHitCount?: number;
-  query?: AggregateQuery | Query;
+  query: AggregateQuery | Query | undefined;
+  filters: Filter[] | undefined;
   interceptedWarnings?: SearchResponseWarning[];
   onAddColumn: (column: string) => void;
   onRemoveColumn: (column: string) => void;
@@ -65,6 +66,7 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
         onClose={() => setExpandedDoc(undefined)}
         setExpandedDoc={setExpandedDoc}
         query={props.query}
+        filters={props.filters}
       />
     ),
     [
@@ -73,6 +75,7 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
       props.onFilter,
       props.onRemoveColumn,
       props.query,
+      props.filters,
       props.savedSearchId,
     ]
   );

src/plugins/discover/public/embeddable/components/search_embeddable_grid_component.tsx

@@ -17,7 +17,6 @@ import {
   SORT_DEFAULT_ORDER_SETTING,
   isLegacyTableEnabled,
 } from '@kbn/discover-utils';
-import { Filter } from '@kbn/es-query';
 import {
   FetchContext,
   useBatchedOptionalPublishingSubjects,
@@ -27,7 +26,6 @@ import { SortOrder } from '@kbn/saved-search-plugin/public';
 import { SearchResponseIncompleteWarning } from '@kbn/search-response-warnings/src/types';
 import { DataGridDensity, DataLoadingState, useColumns } from '@kbn/unified-data-table';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
-
 import { DiscoverGridSettings } from '@kbn/saved-search-plugin/common';
 import useObservable from 'react-use/lib/useObservable';
 import { DiscoverDocTableEmbeddable } from '../../components/doc_table/create_doc_table_embeddable';
@@ -69,8 +67,8 @@ export function SearchEmbeddableGridComponent({
     savedSearch,
     savedSearchId,
     interceptedWarnings,
-    query,
-    filters,
+    apiQuery,
+    apiFilters,
     fetchContext,
     rows,
     totalHitCount,
@@ -90,6 +88,12 @@ export function SearchEmbeddableGridComponent({
     stateManager.grid
   );
 
+  // `api.query$` and `api.filters$` are the initial values from the saved search SO (as of now)
+  // `fetchContext.query` and `fetchContext.filters` are Dashboard's query and filters
+
+  const savedSearchQuery = apiQuery;
+  const savedSearchFilters = apiFilters;
+
   const [panelTitle, panelDescription, savedSearchTitle, savedSearchDescription] =
     useBatchedOptionalPublishingSubjects(
       api.panelTitle,
@@ -137,7 +141,10 @@ export function SearchEmbeddableGridComponent({
     settings: grid,
   });
 
-  const dataSource = useMemo(() => createDataSource({ dataView, query }), [dataView, query]);
+  const dataSource = useMemo(
+    () => createDataSource({ dataView, query: savedSearchQuery }),
+    [dataView, savedSearchQuery]
+  );
   const timeRange = useMemo(
     () => (fetchContext ? getTimeRangeFromFetchContext(fetchContext) : undefined),
     [fetchContext]
@@ -146,8 +153,8 @@ export function SearchEmbeddableGridComponent({
   const cellActionsMetadata = useAdditionalCellActions({
     dataSource,
     dataView,
-    query,
-    filters,
+    query: savedSearchQuery,
+    filters: savedSearchFilters,
     timeRange,
   });
 
@@ -229,7 +236,7 @@ export function SearchEmbeddableGridComponent({
       <DiscoverDocTableEmbeddableMemoized
         {...sharedProps}
         {...onStateEditedProps}
-        filters={savedSearch.searchSource.getField('filter') as Filter[]}
+        filters={savedSearchFilters}
         isEsqlMode={isEsql}
         isLoading={Boolean(loading)}
         sharedItemTitle={panelTitle || savedSearchTitle}
@@ -258,7 +265,8 @@ export function SearchEmbeddableGridComponent({
       isPlainRecord={isEsql}
       loadingState={Boolean(loading) ? DataLoadingState.loading : DataLoadingState.loaded}
       maxAllowedSampleSize={getMaxAllowedSampleSize(discoverServices.uiSettings)}
-      query={savedSearch.searchSource.getField('query')}
+      query={savedSearchQuery}
+      filters={savedSearchFilters}
       savedSearchId={savedSearchId}
       searchTitle={panelTitle || savedSearchTitle}
       services={discoverServices}

test/functional/apps/discover/group2_data_grid1/_data_grid_context.ts

@@ -104,6 +104,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('navigates to context view from embeddable', async () => {
       await common.navigateToApp('discover');
+      await header.waitUntilLoadingHasFinished();
+      await filterBar.addFilter({ field: 'extension.raw', operation: 'is', value: 'jpg' });
+      await header.waitUntilLoadingHasFinished();
       await discover.saveSearch('my search');
       await header.waitUntilLoadingHasFinished();
 
@@ -134,6 +137,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         log.debug('document table length', nrOfDocs);
         return nrOfDocs === 6;
       });
+      await filterBar.hasFilter('extension.raw', 'jpg', false);
     });
   });
 }