[8.x] [Lens][Embeddable] Fix display options regressions (#201998) (#…

…202294)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens][Embeddable] Fix display options regressions
(#201998)](#201998)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Marco
Liberati","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-29T12:42:09Z","message":"[Lens][Embeddable]
Fix display options regressions (#201998)\n\n## Summary\r\n\r\nFixes
#201829\r\n\r\nThis PR fixes a regression introduced with #178965 where
specific\r\nvisualization display options were ignored in the embeddable
context.\r\nAdditional tests have been added to avoid further
regressions in the\r\nfuture.\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"fd589b844c133284a504bad10c0d04288723badf","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Visualizations","release_note:skip","Feature:Lens","v9.0.0","backport:prev-minor"],"title":"[Lens][Embeddable]
Fix display options
regressions","number":201998,"url":"https://github.com/elastic/kibana/pull/201998","mergeCommit":{"message":"[Lens][Embeddable]
Fix display options regressions (#201998)\n\n## Summary\r\n\r\nFixes
#201829\r\n\r\nThis PR fixes a regression introduced with #178965 where
specific\r\nvisualization display options were ignored in the embeddable
context.\r\nAdditional tests have been added to avoid further
regressions in the\r\nfuture.\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"fd589b844c133284a504bad10c0d04288723badf"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201998","number":201998,"mergeCommit":{"message":"[Lens][Embeddable]
Fix display options regressions (#201998)\n\n## Summary\r\n\r\nFixes
#201829\r\n\r\nThis PR fixes a regression introduced with #178965 where
specific\r\nvisualization display options were ignored in the embeddable
context.\r\nAdditional tests have been added to avoid further
regressions in the\r\nfuture.\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"fd589b844c133284a504bad10c0d04288723badf"}}]}]
BACKPORT-->

Co-authored-by: Marco Liberati <[email protected]>

x-pack/plugins/lens/public/react_embeddable/data_loader.ts

@@ -226,7 +226,7 @@ export function loadEmbeddableData(
         handleEvent,
         disableTriggers,
         updateBlockingErrors,
-        renderCount: internalApi.renderCount$.getValue(),
+        getDisplayOptions: internalApi.getDisplayOptions,
       }),
       getUsedDataViews(
         currentState.attributes.references,

x-pack/plugins/lens/public/react_embeddable/expressions/expression_params.ts

@@ -24,6 +24,7 @@ import {
   IndexPatternMap,
   IndexPatternRef,
   UserMessage,
+  VisualizationDisplayOptions,
   isLensFilterEvent,
   isLensMultiFilterEvent,
   isLensTableRowContextMenuClickEvent,
@@ -61,7 +62,7 @@ interface GetExpressionRendererPropsParams {
   api: LensApi;
   addUserMessages: (messages: UserMessage[]) => void;
   updateBlockingErrors: (error: Error) => void;
-  renderCount: number;
+  getDisplayOptions: () => VisualizationDisplayOptions;
 }
 
 async function getExpressionFromDocument(
@@ -146,7 +147,7 @@ export async function getExpressionRendererParams(
     addUserMessages,
     updateBlockingErrors,
     searchContext,
-    renderCount,
+    getDisplayOptions,
   }: GetExpressionRendererPropsParams
 ): Promise<{
   params: ExpressionWrapperProps | null;
@@ -215,7 +216,7 @@ export async function getExpressionRendererParams(
       variables: getVariables(api, state),
       style: state.style,
       className: state.className,
-      noPadding: state.noPadding,
+      noPadding: getDisplayOptions().noPadding,
     };
     return {
       indexPatterns,

x-pack/plugins/lens/public/react_embeddable/initializers/initialize_dashboard_services.ts

@@ -142,7 +142,7 @@ export function initializeDashboardServices(
       },
     },
     serialize: () => {
-      const { style, noPadding, className } = apiHasLensComponentProps(parentApi)
+      const { style, className } = apiHasLensComponentProps(parentApi)
         ? parentApi
         : ({} as LensComponentProps);
       const settings = apiPublishesSettings(parentApi)
@@ -155,7 +155,6 @@ export function initializeDashboardServices(
       return {
         ...serializeTitles(),
         style,
-        noPadding,
         className,
         ...settings,
         palette: initialState.palette,

x-pack/plugins/lens/public/react_embeddable/initializers/initialize_internal_api.ts

@@ -6,21 +6,25 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
+import { initializeTitles } from '@kbn/presentation-publishing';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import { buildObservableVariable, createEmptyLensState } from '../helper';
 import type {
   ExpressionWrapperProps,
+  LensEmbeddableStartServices,
   LensInternalApi,
   LensOverrides,
   LensRuntimeState,
 } from '../types';
-import { apiHasAbortController } from '../type_guards';
+import { apiHasAbortController, apiHasLensComponentProps } from '../type_guards';
 import type { UserMessage } from '../../types';
 
 export function initializeInternalApi(
   initialState: LensRuntimeState,
-  parentApi: unknown
+  parentApi: unknown,
+  { visualizationMap }: LensEmbeddableStartServices
 ): LensInternalApi {
+  const { titlesApi } = initializeTitles(initialState);
   const [hasRenderCompleted$] = buildObservableVariable<boolean>(false);
   const [expressionParams$] = buildObservableVariable<ExpressionWrapperProps | null>(null);
   const expressionAbortController$ = new BehaviorSubject<AbortController | undefined>(undefined);
@@ -87,5 +91,30 @@ export function initializeInternalApi(
       validationMessages$.next([]);
     },
     setAsCreated: () => isNewlyCreated$.next(false),
+    getDisplayOptions: () => {
+      const latestAttributes = attributes$.getValue();
+      if (!latestAttributes.visualizationType) {
+        return {};
+      }
+
+      let displayOptions =
+        visualizationMap[latestAttributes.visualizationType]?.getDisplayOptions?.() ?? {};
+
+      if (apiHasLensComponentProps(parentApi) && parentApi.noPadding != null) {
+        displayOptions = {
+          ...displayOptions,
+          noPadding: parentApi.noPadding,
+        };
+      }
+
+      if (displayOptions.noPanelTitle == null && titlesApi.hidePanelTitle?.getValue()) {
+        displayOptions = {
+          ...displayOptions,
+          noPanelTitle: true,
+        };
+      }
+
+      return displayOptions;
+    },
   };
 }

x-pack/plugins/lens/public/react_embeddable/lens_embeddable.tsx

@@ -59,7 +59,7 @@ export const createLensEmbeddableFactory = (
        * Observables and functions declared here are used internally to store mutating state values
        * This is an internal API not exposed outside of the embeddable.
        */
-      const internalApi = initializeInternalApi(initialState, parentApi);
+      const internalApi = initializeInternalApi(initialState, parentApi, services);
 
       const visualizationContextHelper = initializeVisualizationContext(internalApi);
 

x-pack/plugins/lens/public/react_embeddable/mocks/index.tsx

@@ -309,6 +309,7 @@ const LensInternalApiMock: LensInternalApi = {
   dispatchError: jest.fn(),
   updateValidationMessages: jest.fn(),
   setAsCreated: jest.fn(),
+  getDisplayOptions: jest.fn(() => ({})),
 };
 
 export function getLensInternalApiMock(overrides: Partial<LensInternalApi> = {}): LensInternalApi {

x-pack/plugins/lens/public/react_embeddable/renderer/lens_embeddable_component.test.tsx

@@ -13,6 +13,12 @@ import { PublishingSubject } from '@kbn/presentation-publishing';
 import React from 'react';
 import { LensEmbeddableComponent } from './lens_embeddable_component';
 
+jest.mock('../expression_wrapper', () => ({
+  ExpressionWrapper: () => (
+    <div className="lnsExpressionRenderer" data-test-subj="lens-embeddable" />
+  ),
+}));
+
 type GetValueType<Type> = Type extends PublishingSubject<infer X> ? X : never;
 
 function getDefaultProps({
@@ -39,4 +45,17 @@ describe('Lens Embeddable component', () => {
     render(<LensEmbeddableComponent {...props} />);
     expect(screen.queryByTestId('lens-embeddable')).not.toBeInTheDocument();
   });
+
+  it('shoud not render the title if the visualization forces the title to be hidden', () => {
+    const getDisplayOptions = jest.fn(() => ({ noPanelTitle: true }));
+    const props = getDefaultProps({
+      internalApiOverrides: {
+        getDisplayOptions,
+      },
+    });
+
+    render(<LensEmbeddableComponent {...props} />);
+    expect(props.internalApi.getDisplayOptions).toHaveBeenCalled();
+    expect(screen.getByTestId('lens-embeddable').parentElement).not.toHaveAttribute('data-title');
+  });
 });

x-pack/plugins/lens/public/react_embeddable/renderer/lens_embeddable_component.tsx

@@ -57,7 +57,7 @@ export function LensEmbeddableComponent({
   const rootRef = useDispatcher(hasRendered, api);
 
   // Publish the data attributes only if avaialble/visible
-  const title = api.hidePanelTitle?.getValue()
+  const title = internalApi.getDisplayOptions()?.noPanelTitle
     ? undefined
     : { 'data-title': api.panelTitle?.getValue() ?? api.defaultPanelTitle?.getValue() };
   const description = api.panelDescription?.getValue()

x-pack/plugins/lens/public/react_embeddable/types.ts

@@ -81,6 +81,7 @@ import type {
   SharingSavedObjectProps,
   Simplify,
   UserMessage,
+  VisualizationDisplayOptions,
   VisualizationMap,
 } from '../types';
 import type { LensPluginStartDependencies } from '../plugin';
@@ -276,7 +277,7 @@ export type LensSerializedState = Simplify<
     LensUnifiedSearchContext &
     LensPanelProps &
     SerializedTitles &
-    LensSharedProps &
+    Omit<LensSharedProps, 'noPadding'> &
     Partial<DynamicActionsSerializedState> & { isNewPanel?: boolean }
 >;
 
@@ -414,6 +415,7 @@ export type LensInternalApi = Simplify<
       validationMessages$: PublishingSubject<UserMessage[]>;
       updateValidationMessages: (newMessages: UserMessage[]) => void;
       resetAllMessages: () => void;
+      getDisplayOptions: () => VisualizationDisplayOptions;
     }
 >;