[Lens] Embeddable react refactor

src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx

@@ -20,14 +20,14 @@ import {
   EmbeddableComponent,
   FieldBasedIndexPatternColumn,
   TypedLensByValueInput,
+  LensByValueInput,
 } from '@kbn/lens-plugin/public';
 import { Datatable } from '@kbn/expressions-plugin/common';
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { I18nProvider } from '@kbn/i18n-react';
 import { GroupPreview } from './group_preview';
-import { LensByValueInput } from '@kbn/lens-plugin/public/embeddable';
 import { DATA_LAYER_ID, DATE_HISTOGRAM_COLUMN_ID, getCurrentTimeField } from './lens_attributes';
 import { EuiSuperDatePickerTestHarness } from '@kbn/test-eui-helpers';
 

src/plugins/expressions/public/react_expression_renderer/use_expression_renderer.ts

@@ -26,7 +26,7 @@ export interface ExpressionRendererParams extends IExpressionLoaderParams {
   debounce?: number;
   expression: string | ExpressionAstExpression;
   hasCustomErrorRenderer?: boolean;
-  onData$?<TData, TInspectorAdapters>(
+  onData$?<TData, TInspectorAdapters extends unknown>(
     data: TData,
     adapters?: TInspectorAdapters,
     partial?: boolean

src/plugins/navigation/public/mocks.ts → src/plugins/navigation/public/mocks.tsx

@@ -6,13 +6,20 @@
  * your election, the "Elastic License 2.0", the "GNU Affero General Public
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
-
+import React from 'react';
 import { of } from 'rxjs';
+import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import { Plugin } from '.';
+import { createTopNav } from './top_nav_menu';
 
 export type Setup = jest.Mocked<ReturnType<Plugin['setup']>>;
 export type Start = jest.Mocked<ReturnType<Plugin['start']>>;
 
+// mock mountPointPortal
+jest.mock('@kbn/react-kibana-mount', () => ({
+  MountPointPortal: jest.fn(({ children }) => children),
+}));
+
 const createSetupContract = (): jest.Mocked<Setup> => {
   const setupContract = {
     registerMenuItem: jest.fn(),
@@ -21,12 +28,21 @@ const createSetupContract = (): jest.Mocked<Setup> => {
   return setupContract;
 };
 
+export const unifiedSearchMock = {
+  ui: {
+    SearchBar: () => <div className="searchBar" />,
+    AggregateQuerySearchBar: () => <div className="searchBar" />,
+  },
+} as unknown as UnifiedSearchPublicPluginStart;
+
 const createStartContract = (): jest.Mocked<Start> => {
   const startContract = {
     ui: {
-      TopNavMenu: jest.fn(),
-      createTopNavWithCustomContext: jest.fn().mockImplementation(() => jest.fn()),
-      AggregateQueryTopNavMenu: jest.fn(),
+      TopNavMenu: jest.fn().mockImplementation(createTopNav(unifiedSearchMock, [])),
+      AggregateQueryTopNavMenu: jest.fn().mockImplementation(createTopNav(unifiedSearchMock, [])),
+      createTopNavWithCustomContext: jest
+        .fn()
+        .mockImplementation(createTopNav(unifiedSearchMock, [])),
     },
     addSolutionNavigation: jest.fn(),
     isSolutionNavEnabled$: of(false),

src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx

@@ -14,16 +14,9 @@ import { MountPoint } from '@kbn/core/public';
 import { TopNavMenu } from './top_nav_menu';
 import { TopNavMenuData } from './top_nav_menu_data';
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
-import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import { EuiToolTipProps } from '@elastic/eui';
 import type { TopNavMenuBadgeProps } from './top_nav_menu_badges';
-
-const unifiedSearch = {
-  ui: {
-    SearchBar: () => <div className="searchBar" />,
-    AggregateQuerySearchBar: () => <div className="searchBar" />,
-  },
-} as unknown as UnifiedSearchPublicPluginStart;
+import { unifiedSearchMock } from '../mocks';
 
 describe('TopNavMenu', () => {
   const WRAPPER_SELECTOR = '.kbnTopNavMenu__wrapper';
@@ -97,7 +90,7 @@ describe('TopNavMenu', () => {
 
   it('Should render search bar', () => {
     const component = mountWithIntl(
-      <TopNavMenu appName={'test'} showSearchBar={true} unifiedSearch={unifiedSearch} />
+      <TopNavMenu appName={'test'} showSearchBar={true} unifiedSearch={unifiedSearchMock} />
     );
     expect(component.find(WRAPPER_SELECTOR).length).toBe(1);
     expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
@@ -110,7 +103,7 @@ describe('TopNavMenu', () => {
         appName={'test'}
         config={menuItems}
         showSearchBar={true}
-        unifiedSearch={unifiedSearch}
+        unifiedSearch={unifiedSearchMock}
       />
     );
     expect(component.find(WRAPPER_SELECTOR).length).toBe(1);
@@ -124,7 +117,7 @@ describe('TopNavMenu', () => {
         appName={'test'}
         config={menuItems}
         showSearchBar={true}
-        unifiedSearch={unifiedSearch}
+        unifiedSearch={unifiedSearchMock}
         className={'myCoolClass'}
       />
     );
@@ -172,7 +165,7 @@ describe('TopNavMenu', () => {
           appName={'test'}
           config={menuItems}
           showSearchBar={true}
-          unifiedSearch={unifiedSearch}
+          unifiedSearch={unifiedSearchMock}
           setMenuMountPoint={setMountPoint}
         />
       );
@@ -195,7 +188,7 @@ describe('TopNavMenu', () => {
           appName={'test'}
           badges={badges}
           showSearchBar={true}
-          unifiedSearch={unifiedSearch}
+          unifiedSearch={unifiedSearchMock}
           setMenuMountPoint={setMountPoint}
         />
       );

src/plugins/unified_histogram/public/chart/chart.tsx

@@ -8,7 +8,6 @@
  */
 
 import React, { memo, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
-import type { Observable } from 'rxjs';
 import { Subject } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
 import { IconButtonGroup, type IconButtonGroupProps } from '@kbn/shared-ux-button-toolbar';
@@ -69,7 +68,7 @@ export interface ChartProps {
   disabledActions?: LensEmbeddableInput['disabledActions'];
   input$?: UnifiedHistogramInput$;
   lensAdapters?: UnifiedHistogramChartLoadEvent['adapters'];
-  lensEmbeddableOutput$?: Observable<LensEmbeddableOutput>;
+  dataLoading$?: LensEmbeddableOutput['dataLoading'];
   isChartLoading?: boolean;
   onChartHiddenChange?: (chartHidden: boolean) => void;
   onTimeIntervalChange?: (timeInterval: string) => void;
@@ -103,7 +102,7 @@ export function Chart({
   disabledActions,
   input$: originalInput$,
   lensAdapters,
-  lensEmbeddableOutput$,
+  dataLoading$,
   isChartLoading,
   onChartHiddenChange,
   onTimeIntervalChange,
@@ -389,18 +388,16 @@ export function Chart({
       )}
       {isFlyoutVisible && !!visContext && !!lensVisServiceCurrentSuggestionContext && (
         <ChartConfigPanel
-          {...{
-            services,
-            visContext,
-            lensAdapters,
-            lensEmbeddableOutput$,
-            isFlyoutVisible,
-            setIsFlyoutVisible,
-            isPlainRecord,
-            query,
-            currentSuggestionContext: lensVisServiceCurrentSuggestionContext,
-            onSuggestionContextEdit,
-          }}
+          services={services}
+          visContext={visContext}
+          lensAdapters={lensAdapters}
+          dataLoading$={dataLoading$}
+          isFlyoutVisible
+          setIsFlyoutVisible={setIsFlyoutVisible}
+          isPlainRecord
+          query={query}
+          currentSuggestionContext={lensVisServiceCurrentSuggestionContext}
+          onSuggestionContextEdit={onSuggestionContextEdit}
         />
       )}
     </EuiFlexGroup>

src/plugins/unified_histogram/public/chart/chart_config_panel.tsx

@@ -8,7 +8,6 @@
  */
 
 import React, { ComponentProps, useCallback, useEffect, useRef, useState } from 'react';
-import type { Observable } from 'rxjs';
 import type { AggregateQuery, Query } from '@kbn/es-query';
 import { isEqual, isObject } from 'lodash';
 import type { LensEmbeddableOutput, Suggestion } from '@kbn/lens-plugin/public';
@@ -28,7 +27,7 @@ export function ChartConfigPanel({
   services,
   visContext,
   lensAdapters,
-  lensEmbeddableOutput$,
+  dataLoading$,
   currentSuggestionContext,
   isFlyoutVisible,
   setIsFlyoutVisible,
@@ -41,7 +40,7 @@ export function ChartConfigPanel({
   isFlyoutVisible: boolean;
   setIsFlyoutVisible: (flag: boolean) => void;
   lensAdapters?: UnifiedHistogramChartLoadEvent['adapters'];
-  lensEmbeddableOutput$?: Observable<LensEmbeddableOutput>;
+  dataLoading$?: LensEmbeddableOutput['dataLoading'];
   currentSuggestionContext: UnifiedHistogramSuggestionContext;
   isPlainRecord?: boolean;
   query?: Query | AggregateQuery;
@@ -107,7 +106,7 @@ export function ChartConfigPanel({
           updateSuggestion={updateSuggestion}
           updatePanelState={updatePanelState}
           lensAdapters={lensAdapters}
-          output$={lensEmbeddableOutput$}
+          dataLoading$={dataLoading$}
           displayFlyoutHeader
           closeFlyout={() => {
             setIsFlyoutVisible(false);
@@ -140,7 +139,7 @@ export function ChartConfigPanel({
     isFlyoutVisible,
     setIsFlyoutVisible,
     lensAdapters,
-    lensEmbeddableOutput$,
+    dataLoading$,
     currentSuggestionType,
   ]);
 

src/plugins/unified_histogram/public/chart/histogram.test.tsx

@@ -10,7 +10,7 @@
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { Histogram } from './histogram';
 import React from 'react';
-import { of, Subject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { unifiedHistogramServicesMock } from '../__mocks__/services';
 import { getLensVisMock } from '../__mocks__/lens_vis';
 import { dataViewWithTimefieldMock } from '../__mocks__/data_view_with_timefield';
@@ -172,25 +172,25 @@ describe('Histogram', () => {
     jest
       .spyOn(adapters.requests, 'getRequests')
       .mockReturnValue([{ response: { json: { rawResponse } } } as any]);
-    const embeddableOutput$ = jest.fn().mockReturnValue(of('output$'));
-    onLoad(true, undefined, embeddableOutput$);
+    const dataLoading$ = new BehaviorSubject<boolean | undefined>(false);
+    onLoad?.(true, undefined, dataLoading$);
     expect(props.onTotalHitsChange).toHaveBeenLastCalledWith(
       UnifiedHistogramFetchStatus.loading,
       undefined
     );
-    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters: {}, embeddableOutput$ });
+    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters: {}, dataLoading$ });
     expect(buildBucketInterval.buildBucketInterval).not.toHaveBeenCalled();
     expect(useTimeRange.useTimeRange).toHaveBeenLastCalledWith(
       expect.objectContaining({ bucketInterval: undefined })
     );
     act(() => {
-      onLoad(false, adapters, embeddableOutput$);
+      onLoad?.(false, adapters, dataLoading$);
     });
     expect(props.onTotalHitsChange).toHaveBeenLastCalledWith(
       UnifiedHistogramFetchStatus.complete,
       100
     );
-    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters, embeddableOutput$ });
+    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters, dataLoading$ });
     expect(buildBucketInterval.buildBucketInterval).toHaveBeenCalled();
     expect(useTimeRange.useTimeRange).toHaveBeenLastCalledWith(
       expect.objectContaining({ bucketInterval: mockBucketInterval })
@@ -205,7 +205,7 @@ describe('Histogram', () => {
     jest
       .spyOn(adapters.requests, 'getRequests')
       .mockReturnValue([{ status: RequestStatus.ERROR } as any]);
-    onLoad(false, adapters);
+    onLoad?.(false, adapters);
     expect(props.onTotalHitsChange).toHaveBeenLastCalledWith(
       UnifiedHistogramFetchStatus.error,
       undefined
@@ -237,7 +237,7 @@ describe('Histogram', () => {
       .spyOn(adapters.requests, 'getRequests')
       .mockReturnValue([{ response: { json: { rawResponse } } } as any]);
     act(() => {
-      onLoad(false, adapters);
+      onLoad?.(false, adapters);
     });
     expect(props.onTotalHitsChange).toHaveBeenLastCalledWith(
       UnifiedHistogramFetchStatus.complete,
@@ -273,7 +273,7 @@ describe('Histogram', () => {
       ],
     } as any;
     act(() => {
-      onLoad(false, adapters);
+      onLoad?.(false, adapters);
     });
     expect(props.onTotalHitsChange).toHaveBeenLastCalledWith(
       UnifiedHistogramFetchStatus.complete,
@@ -309,7 +309,7 @@ describe('Histogram', () => {
       ],
     } as any;
     act(() => {
-      onLoad(false, adapters);
+      onLoad?.(false, adapters);
     });
     expect(props.onTotalHitsChange).toHaveBeenLastCalledWith(
       UnifiedHistogramFetchStatus.complete,

src/plugins/unified_histogram/public/chart/histogram.tsx

@@ -15,13 +15,10 @@ import type { DefaultInspectorAdapters, Datatable } from '@kbn/expressions-plugi
 import type { IKibanaSearchResponse } from '@kbn/search-types';
 import type { estypes } from '@elastic/elasticsearch';
 import type { TimeRange } from '@kbn/es-query';
-import type {
-  EmbeddableComponentProps,
-  LensEmbeddableInput,
-  LensEmbeddableOutput,
-} from '@kbn/lens-plugin/public';
+import type { EmbeddableComponentProps, LensEmbeddableInput } from '@kbn/lens-plugin/public';
 import { RequestStatus } from '@kbn/inspector-plugin/public';
 import type { Observable } from 'rxjs';
+import { PublishingSubject } from '@kbn/presentation-publishing';
 import {
   UnifiedHistogramBucketInterval,
   UnifiedHistogramChartContext,
@@ -121,7 +118,7 @@ export function Histogram({
     (
       isLoading: boolean,
       adapters: Partial<DefaultInspectorAdapters> | undefined,
-      lensEmbeddableOutput$?: Observable<LensEmbeddableOutput>
+      dataLoading$?: PublishingSubject<boolean | undefined>
     ) => {
       const lensRequest = adapters?.requests?.getRequests()[0];
       const requestFailed = lensRequest?.status === RequestStatus.ERROR;
@@ -159,7 +156,7 @@ export function Histogram({
         setBucketInterval(newBucketInterval);
       }
 
-      onChartLoad?.({ adapters: adapters ?? {}, embeddableOutput$: lensEmbeddableOutput$ });
+      onChartLoad?.({ adapters: adapters ?? {}, dataLoading$ });
     }
   );
 

src/plugins/unified_histogram/public/chart/hooks/use_lens_props.ts

@@ -66,7 +66,7 @@ export const getLensProps = ({
   searchSessionId?: string;
   getTimeRange: () => TimeRange;
   attributes: TypedLensByValueInput['attributes'];
-  onLoad: (isLoading: boolean, adapters: Partial<DefaultInspectorAdapters> | undefined) => void;
+  onLoad?: (isLoading: boolean, adapters: Partial<DefaultInspectorAdapters> | undefined) => void;
 }) => ({
   id: 'unifiedHistogramLensComponent',
   viewMode: ViewMode.VIEW,

src/plugins/unified_histogram/public/container/hooks/use_state_props.ts

@@ -24,7 +24,7 @@ import {
   totalHitsResultSelector,
   totalHitsStatusSelector,
   lensAdaptersSelector,
-  lensEmbeddableOutputSelector$,
+  lensDataLoadingSelector$,
 } from '../utils/state_selectors';
 import { useStateSelector } from '../utils/use_state_selector';
 
@@ -47,10 +47,7 @@ export const useStateProps = ({
   const totalHitsResult = useStateSelector(stateService?.state$, totalHitsResultSelector);
   const totalHitsStatus = useStateSelector(stateService?.state$, totalHitsStatusSelector);
   const lensAdapters = useStateSelector(stateService?.state$, lensAdaptersSelector);
-  const lensEmbeddableOutput$ = useStateSelector(
-    stateService?.state$,
-    lensEmbeddableOutputSelector$
-  );
+  const lensDataLoading$ = useStateSelector(stateService?.state$, lensDataLoadingSelector$);
   /**
    * Contexts
    */
@@ -142,7 +139,7 @@ export const useStateProps = ({
       // We need to store the Lens request adapter in order to inspect its requests
       stateService?.setLensRequestAdapter(event.adapters.requests);
       stateService?.setLensAdapters(event.adapters);
-      stateService?.setLensEmbeddableOutput$(event.embeddableOutput$);
+      stateService?.setLensDataLoading$(event.dataLoading$);
     },
     [stateService]
   );
@@ -179,7 +176,7 @@ export const useStateProps = ({
     request,
     isPlainRecord,
     lensAdapters,
-    lensEmbeddableOutput$,
+    lensDataLoading$,
     onTopPanelHeightChange,
     onTimeIntervalChange,
     onTotalHitsChange,