[Discover] Context awareness toolkit

src/platform/packages/shared/kbn-react-hooks/src/use_stable_callback/use_stable_callback.ts

@@ -7,18 +7,18 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { useEffect, useRef } from 'react';
+import { useState } from 'react';
+import useLatest from 'react-use/lib/useLatest';
 
 /**
  * Accepts a callback and returns a function with a stable identity
  * that will always call the latest version of the callback when invoked
  */
-export const useStableCallback = <T extends (...args: never[]) => unknown>(fn: T | undefined) => {
-  const ref = useRef(fn);
+export const useStableCallback = <T extends (...args: Parameters<T>) => ReturnType<T>>(fn: T) => {
+  const latestFn = useLatest(fn);
+  const [stableFn] = useState(() => {
+    return ((...args: Parameters<T>) => latestFn.current(...args)) as T;
+  });
 
-  useEffect(() => {
-    ref.current = fn;
-  }, [fn]);
-
-  return useRef((...args: Parameters<T>) => ref.current?.(...args)).current;
+  return stableFn;
 };

src/platform/plugins/shared/discover/moon.yml

@@ -150,6 +150,7 @@ dependsOn:
   - '@kbn/reporting-public'
   - '@kbn/logging'
   - '@kbn/logging-mocks'
+  - '@kbn/react-hooks'
 tags:
   - plugin
   - prod

src/platform/plugins/shared/discover/public/__mocks__/test_provider.tsx

@@ -22,7 +22,7 @@ import {
   DiscoverCustomizationProvider,
   type DiscoverCustomizationService,
 } from '../customizations';
-import { type ScopedProfilesManager } from '../context_awareness';
+import { EMPTY_CONTEXT_AWARENESS_TOOLKIT, type ScopedProfilesManager } from '../context_awareness';
 import type { DiscoverServices } from '../build_services';
 import { createDiscoverServicesMock } from './services';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
@@ -121,7 +121,10 @@ export const DiscoverTestProvider = ({
   const scopedProfilesManager = useMemo(
     () =>
       originalScopedProfilesManager ??
-      services.profilesManager.createScopedProfilesManager({ scopedEbtManager }),
+      services.profilesManager.createScopedProfilesManager({
+        scopedEbtManager,
+        toolkit: EMPTY_CONTEXT_AWARENESS_TOOLKIT,
+      }),
     [originalScopedProfilesManager, scopedEbtManager, services.profilesManager]
   );
 

src/platform/plugins/shared/discover/public/application/context/context_app.test.tsx

@@ -14,7 +14,7 @@ import userEvent from '@testing-library/user-event';
 import { dataViewMock } from '@kbn/discover-utils/src/__mocks__';
 import { setUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public/plugin';
 import { mockUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public/__mocks__';
-import { DocViewsRegistry } from '@kbn/unified-doc-viewer';
+import { DocViewsRegistry, type DocViewerApi } from '@kbn/unified-doc-viewer';
 import { ContextApp, type ContextAppProps } from './context_app';
 import { createDiscoverServicesMock } from '../../__mocks__/services';
 import { DiscoverTestProvider } from '../../__mocks__/test_provider';
@@ -30,8 +30,6 @@ jest.mock('./hooks/use_context_app_fetch');
 jest.mock('./hooks/use_context_app_state');
 
 const services = createDiscoverServicesMock();
-const addFiltersMock = jest.spyOn(services.filterManager, 'addFilters');
-const updateSavedObjectMock = jest.spyOn(services.dataViews, 'updateSavedObject');
 const mockUseContextAppFetch = jest.mocked(useContextAppFetch);
 const mockUseContextAppState = jest.mocked(useContextAppState);
 
@@ -91,15 +89,44 @@ const setDocViewerRegistry = (render: (props: DocViewRenderProps) => React.React
 };
 
 describe('ContextApp test', () => {
+  const addFilterMock = jest.fn();
+  const setExpandedDocMock = jest.fn();
+  const docViewerRef = React.createRef<DocViewerApi>();
   const defaultProps: ContextAppProps = {
     dataView: dataViewMock,
     anchorId: 'mocked_anchor_id',
+    addFilter: addFilterMock,
+    expandedDoc: undefined,
+    initialDocViewerTabId: undefined,
+    docViewerRef,
+    setExpandedDoc: setExpandedDocMock,
   };
 
   const renderComponent = () => {
+    const StatefulContextApp = () => {
+      const [expandedDoc, setExpandedDocState] = React.useState(defaultProps.expandedDoc);
+      const [initialDocViewerTabId, setInitialDocViewerTabId] = React.useState(
+        defaultProps.initialDocViewerTabId
+      );
+      const setExpandedDoc: ContextAppProps['setExpandedDoc'] = (doc, options) => {
+        setExpandedDocMock(doc, options);
+        setExpandedDocState(doc);
+        setInitialDocViewerTabId(options?.initialTabId);
+      };
+
+      return (
+        <ContextApp
+          {...defaultProps}
+          expandedDoc={expandedDoc}
+          initialDocViewerTabId={initialDocViewerTabId}
+          setExpandedDoc={setExpandedDoc}
+        />
+      );
+    };
+
     renderWithKibanaRenderContext(
       <DiscoverTestProvider services={services}>
-        <ContextApp {...defaultProps} />
+        <StatefulContextApp />
       </DiscoverTestProvider>
     );
   };
@@ -148,7 +175,7 @@ describe('ContextApp test', () => {
     );
   });
 
-  it('should set filters correctly', async () => {
+  it('should call addFilter from the doc viewer', async () => {
     const user = userEvent.setup();
 
     setDocViewerRegistry(({ filter }) => (
@@ -168,15 +195,7 @@ describe('ContextApp test', () => {
 
     await user.click(await screen.findByTestId('docViewFilterButton'));
 
-    expect(addFiltersMock).toHaveBeenCalledTimes(1);
-    expect(addFiltersMock).toHaveBeenCalledWith([
-      {
-        $state: { store: 'appState' },
-        meta: { alias: null, disabled: false, index: 'the-data-view-id', negate: false },
-        query: { match_phrase: { extension: 'jpg' } },
-      },
-    ]);
-    expect(updateSavedObjectMock).toHaveBeenCalledTimes(1);
-    expect(updateSavedObjectMock).toHaveBeenCalledWith(dataViewMock, 0, true);
+    expect(addFilterMock).toHaveBeenCalledTimes(1);
+    expect(addFilterMock).toHaveBeenCalledWith('extension', 'jpg', '+');
   });
 });

src/platform/plugins/shared/discover/public/application/context/context_app.tsx

@@ -20,16 +20,17 @@ import {
 import { css } from '@emotion/react';
 import { cloneDeep } from 'lodash';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
-import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
+import type { DataView } from '@kbn/data-views-plugin/public';
 import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
-import { generateFilters } from '@kbn/data-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { SORT_DEFAULT_ORDER_SETTING } from '@kbn/discover-utils';
 import type { UseColumnsProps } from '@kbn/unified-data-table';
-import { popularizeField, useColumns } from '@kbn/unified-data-table';
+import { useColumns } from '@kbn/unified-data-table';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common';
 import { kbnFullBodyHeightCss } from '@kbn/css-utils/public/full_body_height_css';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import type { DocViewerApi } from '@kbn/unified-doc-viewer';
 import { ContextErrorMessage } from './components/context_error_message';
 import { LoadingStatus } from './services/context_query_state';
 import type { AppState, GlobalState } from './services/context_state';
@@ -48,23 +49,29 @@ export interface ContextAppProps {
   dataView: DataView;
   anchorId: string;
   referrer?: string;
+  addFilter: DocViewFilterFn;
+  expandedDoc: DataTableRecord | undefined;
+  initialDocViewerTabId: string | undefined;
+  docViewerRef: React.RefObject<DocViewerApi>;
+  setExpandedDoc: (doc: DataTableRecord | undefined, options?: { initialTabId?: string }) => void;
 }
 
-export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) => {
+export const ContextApp = ({
+  dataView,
+  anchorId,
+  referrer,
+  addFilter,
+  expandedDoc,
+  initialDocViewerTabId,
+  docViewerRef,
+  setExpandedDoc,
+}: ContextAppProps) => {
   const styles = useMemoCss(componentStyles);
 
   const services = useDiscoverServices();
   const { scopedEBTManager } = useScopedServices();
-  const {
-    locator,
-    uiSettings,
-    capabilities,
-    dataViews,
-    navigation,
-    filterManager,
-    core,
-    fieldsMetadata,
-  } = services;
+  const { locator, uiSettings, capabilities, dataViews, navigation, core, fieldsMetadata } =
+    services;
 
   /**
    * Context app state
@@ -199,23 +206,6 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
     ]
   );
 
-  const addFilter = useCallback(
-    async (field: DataViewField | string, values: unknown, operation: '+' | '-') => {
-      const newFilters = generateFilters(filterManager, field, values, operation, dataView);
-      filterManager.addFilters(newFilters);
-      if (dataViews) {
-        const fieldName = typeof field === 'string' ? field : field.name;
-        await popularizeField(dataView, fieldName, dataViews, capabilities);
-        void scopedEBTManager.trackFilterAddition({
-          fieldName: fieldName === '_exists_' ? String(values) : fieldName,
-          filterOperation: fieldName === '_exists_' ? '_exists_' : operation,
-          fieldsMetadata,
-        });
-      }
-    },
-    [filterManager, dataView, dataViews, capabilities, scopedEBTManager, fieldsMetadata]
-  );
-
   const onAddColumnWithTracking = useCallback(
     (columnName: string) => {
       onAddColumn(columnName);
@@ -289,7 +279,11 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
                 predecessorCount={appState.predecessorCount}
                 successorCount={appState.successorCount}
                 setAppState={stateContainer.setAppState}
-                addFilter={addFilter as DocViewFilterFn}
+                addFilter={addFilter}
+                expandedDoc={expandedDoc}
+                initialDocViewerTabId={initialDocViewerTabId}
+                docViewerRef={docViewerRef}
+                setExpandedDoc={setExpandedDoc}
                 rows={rows}
                 predecessors={fetchedState.predecessors}
                 successors={fetchedState.successors}

src/platform/plugins/shared/discover/public/application/context/context_app_content.tsx

@@ -8,7 +8,7 @@
  */
 
 import type { FC } from 'react';
-import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useMemo } from 'react';
 import { EuiSpacer, useEuiPaddingSize } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { DataView } from '@kbn/data-views-plugin/public';
@@ -67,6 +67,10 @@ export interface ContextAppContentProps {
   interceptedWarnings: SearchResponseWarning[];
   setAppState: (newState: Partial<AppState>) => void;
   addFilter: DocViewFilterFn;
+  expandedDoc: DataTableRecord | undefined;
+  initialDocViewerTabId: string | undefined;
+  docViewerRef: React.RefObject<DocViewerApi>;
+  setExpandedDoc: (doc: DataTableRecord | undefined, options?: { initialTabId?: string }) => void;
 }
 
 const controlColumnIds = ['openDetails'];
@@ -95,25 +99,14 @@ export function ContextAppContent({
   interceptedWarnings,
   setAppState,
   addFilter,
+  expandedDoc,
+  initialDocViewerTabId,
+  docViewerRef,
+  setExpandedDoc,
 }: ContextAppContentProps) {
   const { uiSettings: config, uiActions } = useDiscoverServices();
   const services = useDiscoverServices();
 
-  const [expandedDoc, setExpandedDoc] = useState<DataTableRecord | undefined>();
-  const [initialTabId, setInitialTabId] = useState<string | undefined>(undefined);
-  const docViewerRef = useRef<DocViewerApi>(null);
-
-  const setExpandedDocWithInitialTab = useCallback(
-    (doc: DataTableRecord | undefined, options?: { initialTabId?: string }) => {
-      setExpandedDoc(doc);
-      setInitialTabId(options?.initialTabId);
-      if (options?.initialTabId) {
-        docViewerRef.current?.setSelectedTabId(options.initialTabId);
-      }
-    },
-    []
-  );
-
   const isAnchorLoading =
     anchorStatus === LoadingStatus.LOADING || anchorStatus === LoadingStatus.UNINITIALIZED;
   const arePredecessorsLoading =
@@ -152,12 +145,20 @@ export function ContextAppContent({
         onRemoveColumn={onRemoveColumn}
         onAddColumn={onAddColumn}
         onClose={() => setExpandedDoc(undefined)}
-        initialTabId={initialTabId}
-        setExpandedDoc={setExpandedDocWithInitialTab}
+        initialTabId={initialDocViewerTabId}
+        setExpandedDoc={setExpandedDoc}
         docViewerRef={docViewerRef}
       />
     ),
-    [addFilter, dataView, onAddColumn, onRemoveColumn, setExpandedDocWithInitialTab, initialTabId]
+    [
+      addFilter,
+      dataView,
+      docViewerRef,
+      initialDocViewerTabId,
+      onAddColumn,
+      onRemoveColumn,
+      setExpandedDoc,
+    ]
   );
 
   const onResize = useCallback<NonNullable<UnifiedDataTableProps['onResize']>>(
@@ -172,7 +173,6 @@ export function ContextAppContent({
   const cellRenderers = useMemo(() => {
     const getCellRenderers = getCellRenderersAccessor(() => ({}));
     return getCellRenderers({
-      actions: { addFilter },
       dataView,
       density: getDataGridDensity(services.storage, 'discover'),
       rowHeight: getRowHeight({
@@ -181,7 +181,7 @@ export function ContextAppContent({
         configRowHeight,
       }),
     });
-  }, [addFilter, configRowHeight, dataView, getCellRenderersAccessor, services.storage]);
+  }, [configRowHeight, dataView, getCellRenderersAccessor, services.storage]);
 
   const dataSource = useMemo(() => createDataSource({ dataView, query: undefined }), [dataView]);
   const { filters } = useQuerySubscriber({ data: services.data });
@@ -236,7 +236,7 @@ export function ContextAppContent({
             isPaginationEnabled={false}
             rowsPerPageState={getDefaultRowsPerPage(services.uiSettings)}
             controlColumnIds={controlColumnIds}
-            setExpandedDoc={setExpandedDocWithInitialTab}
+            setExpandedDoc={setExpandedDoc}
             onFilter={addFilter}
             onSetColumns={onSetColumns}
             configRowHeight={configRowHeight}