[8.x] [Lens] Embeddable react refactor (#186642) (#201739)

# Backport This will backport the following commits from `main` to `8.x`: - [[Lens] Embeddable react refactor (#186642)](#186642) I've skipped a flaky test here to carry on with the merge. The same test is flaky in `main` too: #201744 . Will push a test fix asap.  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Nov 27, 2024 · 556deb0 · 556deb0
1 parent edab1bb
commit 556deb0
Show file tree

Hide file tree

Showing 209 changed files with 8,921 additions and 6,873 deletions.
diff --git a/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx b/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx
@@ -65,6 +65,7 @@ export const ReactEmbeddableRenderer = <
     | 'hideLoader'
     | 'hideHeader'
     | 'hideInspector'
+    | 'getActions'
   >;
   hidePanelChrome?: boolean;
   /**

diff --git a/...ins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx b/...ins/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';
 

diff --git a/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.tsx b/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.tsx
@@ -198,28 +198,25 @@ export const GroupPreview = ({
             justifyContent="center"
           >
             <EuiFlexItem grow={0}>
-              <div
+              <LensEmbeddableComponent
                 css={css`
                   & > div {
                     height: 400px;
                     width: 100%;
                   }
                 `}
-              >
-                <LensEmbeddableComponent
-                  data-test-subj="chart"
-                  id="annotation-library-preview"
-                  timeRange={chartTimeRange}
-                  attributes={lensAttributes}
-                  onBrushEnd={({ range }) =>
-                    setChartTimeRange({
-                      from: new Date(range[0]).toISOString(),
-                      to: new Date(range[1]).toISOString(),
-                    })
-                  }
-                  searchSessionId={searchSessionId}
-                />
-              </div>
+                data-test-subj="chart"
+                id="annotation-library-preview"
+                timeRange={chartTimeRange}
+                attributes={lensAttributes}
+                onBrushEnd={({ range }) =>
+                  setChartTimeRange({
+                    from: new Date(range[0]).toISOString(),
+                    to: new Date(range[1]).toISOString(),
+                  })
+                }
+                searchSessionId={searchSessionId}
+              />
             </EuiFlexItem>
           </EuiFlexGroup>
         ) : (

diff --git a/src/plugins/expressions/public/react_expression_renderer/use_expression_renderer.ts b/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

diff --git a/src/plugins/navigation/public/mocks.ts → src/plugins/navigation/public/mocks.tsx b/src/plugins/navigation/public/mocks.ts → src/plugins/navigation/public/mocks.tsx
@@ -6,13 +6,24 @@
  * 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', () => {
+  const original = jest.requireActual('@kbn/react-kibana-mount');
+  return {
+    ...original,
+    MountPointPortal: jest.fn(({ children }) => children),
+  };
+});
+
 const createSetupContract = (): jest.Mocked<Setup> => {
   const setupContract = {
     registerMenuItem: jest.fn(),
@@ -21,12 +32,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),

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx b/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}
         />
       );

diff --git a/src/plugins/unified_histogram/public/chart/chart.tsx b/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';
@@ -70,7 +69,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;
@@ -105,7 +104,7 @@ export function Chart({
   disabledActions,
   input$: originalInput$,
   lensAdapters,
-  lensEmbeddableOutput$,
+  dataLoading$,
   isChartLoading,
   onChartHiddenChange,
   onTimeIntervalChange,
@@ -383,28 +382,24 @@ export function Chart({
       )}
       {canSaveVisualization && isSaveModalVisible && visContext.attributes && (
         <LensSaveModalComponent
-          initialInput={
-            removeTablesFromLensAttributes(visContext.attributes) as unknown as LensEmbeddableInput
-          }
+          initialInput={removeTablesFromLensAttributes(visContext.attributes)}
           onSave={() => {}}
           onClose={() => setIsSaveModalVisible(false)}
           isSaveable={false}
         />
       )}
       {isFlyoutVisible && !!visContext && !!lensVisServiceCurrentSuggestionContext && (
         <ChartConfigPanel
-          {...{
-            services,
-            visContext,
-            lensAdapters,
-            lensEmbeddableOutput$,
-            isFlyoutVisible,
-            setIsFlyoutVisible,
-            isPlainRecord,
-            query,
-            currentSuggestionContext: lensVisServiceCurrentSuggestionContext,
-            onSuggestionContextEdit,
-          }}
+          services={services}
+          visContext={visContext}
+          lensAdapters={lensAdapters}
+          dataLoading$={dataLoading$}
+          isFlyoutVisible={isFlyoutVisible}
+          setIsFlyoutVisible={setIsFlyoutVisible}
+          isPlainRecord={isPlainRecord}
+          query={query}
+          currentSuggestionContext={lensVisServiceCurrentSuggestionContext}
+          onSuggestionContextEdit={onSuggestionContextEdit}
         />
       )}
     </EuiFlexGroup>

diff --git a/src/plugins/unified_histogram/public/chart/chart_config_panel.tsx b/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';
@@ -29,7 +28,7 @@ export function ChartConfigPanel({
   services,
   visContext,
   lensAdapters,
-  lensEmbeddableOutput$,
+  dataLoading$,
   currentSuggestionContext,
   isFlyoutVisible,
   setIsFlyoutVisible,
@@ -42,7 +41,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;
@@ -108,7 +107,7 @@ export function ChartConfigPanel({
           updateSuggestion={updateSuggestion}
           updatePanelState={updatePanelState}
           lensAdapters={lensAdapters}
-          output$={lensEmbeddableOutput$}
+          dataLoading$={dataLoading$}
           displayFlyoutHeader
           closeFlyout={() => {
             setIsFlyoutVisible(false);
@@ -141,7 +140,7 @@ export function ChartConfigPanel({
     isFlyoutVisible,
     setIsFlyoutVisible,
     lensAdapters,
-    lensEmbeddableOutput$,
+    dataLoading$,
     currentSuggestionType,
   ]);