[Lens] Use flyout toolbar for visualization configuration: appearance, titles and text, axis, and legend settings (#240804)

## Summary

Enables flyout toolbar in **dashboard visualization in-line editing**
and **Lens workspace**, for appearance, titles and text, axis and legend
settings configuration.

Closes #238794

> [!IMPORTANT]
> In #240088, we will delete all
the deprecated components related to the previously used toolbar
popover.

### Dashboard visualization in-line editing


https://github.com/user-attachments/assets/a2e54633-bb1a-4796-8682-70b2c9beb1be

### Lens workspace


https://github.com/user-attachments/assets/7eb2d165-180e-491c-a1d3-ea461d7c6a7e


## Checklist

- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [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
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Release Notes

In **dashboard visualization in-line editing** and **Lens workspace**,
the 'Appearance', 'Titles and text', 'Axis', and 'Legend' settings have
been moved from a popover into a dedicated flyout panel.

---------

Co-authored-by: kibanamachine <[email protected]>

Author: mariairiartef

src/platform/packages/shared/kbn-lens-common/visualizations/types.ts

@@ -375,8 +375,8 @@ export interface Visualization<T = unknown, P = T, ExtraAppendLayerArg = unknown
    * in a flyout panel. Provides configuration options for style, legend and filters.
    */
   FlyoutToolbarComponent?: (
-    props: VisualizationToolbarProps<T>
-  ) => null | ReactElement<VisualizationToolbarProps<T>>;
+    props: VisualizationToolbarProps<T> & { isInlineEditing: boolean }
+  ) => null | ReactElement<VisualizationToolbarProps<T> & { isInlineEditing: boolean }>;
 
   /**
    * The frame is telling the visualization to update or set a dimension based on user interaction

x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx

@@ -294,7 +294,9 @@ export function LensEditConfigurationFlyout({
           isSaveable={isSaveable}
           isReadOnly={isReadOnly}
           applyButtonLabel={applyButtonLabel}
-          toolbar={<VisualizationToolbarWrapper framePublicAPI={framePublicAPI} />}
+          toolbar={
+            <VisualizationToolbarWrapper framePublicAPI={framePublicAPI} isInlineEditing={true} />
+          }
         >
           <LayerConfiguration
             // TODO: remove this once we support switching to any chart in Discover
@@ -334,7 +336,9 @@ export function LensEditConfigurationFlyout({
         isNewPanel={isNewPanel}
         isReadOnly={isReadOnly}
         applyButtonLabel={applyButtonLabel}
-        toolbar={<VisualizationToolbarWrapper framePublicAPI={framePublicAPI} />}
+        toolbar={
+          <VisualizationToolbarWrapper framePublicAPI={framePublicAPI} isInlineEditing={true} />
+        }
       >
         <EuiFlexGroup
           css={css`

x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/editor_frame.tsx

@@ -218,5 +218,7 @@ export function EditorFrame(props: EditorFrameProps) {
 
 const componentStyles = {
   visualizationToolbar: ({ euiTheme }: UseEuiTheme) =>
-    css({ margin: `${euiTheme.size.base} ${euiTheme.size.base} 0 ${euiTheme.size.base}` }),
+    css({
+      margin: `${euiTheme.size.base} ${euiTheme.size.base} ${euiTheme.size.s} ${euiTheme.size.base}`,
+    }),
 };

x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/visualization_toolbar.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { memo, useCallback } from 'react';
-import type { FramePublicAPI, Visualization } from '@kbn/lens-common';
+import { memo, useCallback } from 'react';
+import type { FramePublicAPI } from '@kbn/lens-common';
 import {
   useLensDispatch,
   updateVisualizationState,
@@ -16,17 +16,25 @@ import {
 } from '../../state_management';
 import { useEditorFrameService } from '../editor_frame_service_context';
 
-const VisualizationToolbar = memo(function VisualizationToolbar({
-  activeVisualization,
+export const VisualizationToolbarWrapper = memo(function VisualizationToolbar({
   framePublicAPI,
-  enableFlyoutToolbar = false,
+  isInlineEditing = false,
+  enableFlyoutToolbar = true,
 }: {
-  activeVisualization: Visualization | null;
   framePublicAPI: FramePublicAPI;
+  isInlineEditing?: boolean;
   enableFlyoutToolbar?: boolean;
 }) {
   const dispatchLens = useLensDispatch();
-  const visualization = useLensSelector(selectVisualizationState);
+  const lensVisualization = useLensSelector(selectVisualization);
+  const visualizationState = useLensSelector(selectVisualizationState);
+
+  const { visualizationMap } = useEditorFrameService();
+
+  const activeVisualization = lensVisualization.activeId
+    ? visualizationMap[lensVisualization.activeId]
+    : null;
+
   const setVisualizationState = useCallback(
     (newState: unknown) => {
       if (!activeVisualization) {
@@ -42,43 +50,25 @@ const VisualizationToolbar = memo(function VisualizationToolbar({
     [dispatchLens, activeVisualization]
   );
 
+  if (!activeVisualization || !visualizationState) {
+    return null;
+  }
+
   const { FlyoutToolbarComponent, ToolbarComponent: RegularToolbarComponent } =
     activeVisualization ?? {};
 
-  let ToolbarComponent;
-  if (enableFlyoutToolbar) {
-    ToolbarComponent = FlyoutToolbarComponent ?? RegularToolbarComponent;
-  } else {
-    ToolbarComponent = RegularToolbarComponent;
-  }
+  const ToolbarComponent = enableFlyoutToolbar
+    ? FlyoutToolbarComponent ?? RegularToolbarComponent
+    : RegularToolbarComponent;
 
   if (!ToolbarComponent) {
     return null;
   }
 
   return ToolbarComponent({
     frame: framePublicAPI,
-    state: visualization.state,
+    state: visualizationState.state,
     setState: setVisualizationState,
+    isInlineEditing,
   });
 });
-
-export function VisualizationToolbarWrapper({
-  framePublicAPI,
-}: {
-  framePublicAPI: FramePublicAPI;
-}) {
-  const { visualizationMap } = useEditorFrameService();
-  const visualization = useLensSelector(selectVisualization);
-
-  const activeVisualization = visualization.activeId
-    ? visualizationMap[visualization.activeId]
-    : null;
-
-  return activeVisualization && visualization.state ? (
-    <VisualizationToolbar
-      framePublicAPI={framePublicAPI}
-      activeVisualization={activeVisualization}
-    />
-  ) : null;
-}

x-pack/platform/plugins/shared/lens/public/shared_components/flyout_container.tsx

@@ -88,6 +88,8 @@ export function FlyoutContainer({
     return null;
   }
 
+  const hideShadow = isInlineEditing || isFullscreen;
+
   return (
     <div ref={panelRef}>
       <EuiFocusTrap
@@ -107,7 +109,7 @@ export function FlyoutContainer({
           aria-labelledby="lnsDimensionContainerTitle"
           css={[
             css`
-              box-shadow: ${isInlineEditing || isFullscreen ? 'none !important' : 'inherit'};
+              box-shadow: ${hideShadow ? 'none !important' : 'inherit'};
             `,
             flyoutContainerStyles(euiThemeContext),
             dimensionContainerStyles.self(euiThemeContext),

x-pack/platform/plugins/shared/lens/public/shared_components/flyout_toolbar.tsx

@@ -61,9 +61,11 @@ export interface ToolbarContentMap<S> {
 
 export function FlyoutToolbar<S>({
   contentMap,
+  isInlineEditing = false,
   ...flyoutContentProps
 }: VisualizationToolbarProps<S> & {
   contentMap: ToolbarContentMap<S>;
+  isInlineEditing: boolean;
 }) {
   const [isFlyoutVisible, setFlyoutVisible] = useState(false);
   const [idSelected, setIdSelected] = useState<Options | ''>('');
@@ -109,7 +111,7 @@ export function FlyoutToolbar<S>({
       <FlyoutContainer
         isFullscreen={false}
         label={flyoutTitle}
-        isInlineEditing={true}
+        isInlineEditing={isInlineEditing}
         isOpen={isFlyoutVisible}
         handleClose={() => {
           setIdSelected('');

x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.test.tsx renamed to x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/appearance_settings.test.tsx

@@ -7,16 +7,15 @@
 
 import React from 'react';
 import { getSelectedButtonInGroup } from '@kbn/test-eui-helpers';
-import { DataTableToolbar } from './toolbar';
 import type {
   DatatableVisualizationState,
   PagingState,
   FramePublicAPI,
   VisualizationToolbarProps,
 } from '@kbn/lens-common';
 import { fireEvent, render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { DataGridDensity } from '@kbn/unified-data-table';
+import { DatatableAppearanceSettings } from './appearance_settings';
 
 // mocking random id generator function
 jest.mock('@elastic/eui', () => {
@@ -30,7 +29,7 @@ jest.mock('@elastic/eui', () => {
   };
 });
 
-describe('datatable toolbar', () => {
+describe('datatable appearance settings', () => {
   const defaultPagingState: PagingState = {
     size: 10,
     enabled: true,
@@ -46,17 +45,12 @@ describe('datatable toolbar', () => {
     };
   });
 
-  const renderAndOpenToolbar = async (overrides = {}) => {
+  const renderComponent = async (overrides = {}) => {
     const ROW_HEIGHT_SETTINGS_TEST_ID = 'lnsRowHeightSettings';
     const HEADER_HEIGHT_SETTINGS_TEST_ID = 'lnsHeaderHeightSettings';
     const DENSITY_SETTINGS_TEST_ID = 'lnsDensitySettings';
 
-    const rtlRender = render(<DataTableToolbar {...defaultProps} {...overrides} />);
-
-    const togglePopover = async () => {
-      await userEvent.click(screen.getByRole('button', { name: /visual options/i }));
-    };
-    await togglePopover();
+    const rtlRender = render(<DatatableAppearanceSettings {...defaultProps} {...overrides} />);
 
     const selectOptionFromButtonGroup = (testId: string) => (optionName: string | RegExp) => {
       const buttonGroup = screen.getByTestId(testId);
@@ -74,7 +68,6 @@ describe('datatable toolbar', () => {
 
     return {
       ...rtlRender,
-      togglePopover,
       getRowHeightValue: getSelectedButtonInGroup(ROW_HEIGHT_SETTINGS_TEST_ID),
       getRowHeightCustomValue: () => getNumberInput(ROW_HEIGHT_SETTINGS_TEST_ID),
       selectRowHeightOption: selectOptionFromButtonGroup(ROW_HEIGHT_SETTINGS_TEST_ID),
@@ -96,7 +89,7 @@ describe('datatable toolbar', () => {
       getHeaderHeightValue,
       getPaginationSwitch,
       getDensityValue,
-    } = await renderAndOpenToolbar();
+    } = await renderComponent();
 
     expect(getRowHeightValue()).toHaveTextContent(/custom/i);
     expect(getHeaderHeightValue()).toHaveTextContent(/custom/i);
@@ -113,7 +106,7 @@ describe('datatable toolbar', () => {
       getHeaderHeightCustomValue,
       getRowHeightCustomValue,
       getDensityValue,
-    } = await renderAndOpenToolbar({
+    } = await renderComponent({
       state: {
         ...defaultProps.state,
         rowHeight: 'custom',
@@ -134,7 +127,7 @@ describe('datatable toolbar', () => {
   });
 
   it('should change row height to "Auto" mode when selected', async () => {
-    const { selectRowHeightOption } = await renderAndOpenToolbar();
+    const { selectRowHeightOption } = await renderComponent();
 
     selectRowHeightOption(/auto/i);
     expect(defaultProps.setState).toHaveBeenCalledTimes(1);
@@ -144,7 +137,7 @@ describe('datatable toolbar', () => {
   });
 
   it('should toggle pagination on click', async () => {
-    const { clickPaginationSwitch } = await renderAndOpenToolbar();
+    const { clickPaginationSwitch } = await renderComponent();
 
     clickPaginationSwitch();
     expect(defaultProps.setState).toHaveBeenCalledTimes(1);
@@ -154,7 +147,7 @@ describe('datatable toolbar', () => {
   });
 
   it('should change row height to "Custom" mode when selected', async () => {
-    const { selectRowHeightOption } = await renderAndOpenToolbar();
+    const { selectRowHeightOption } = await renderComponent();
 
     selectRowHeightOption(/custom/i);
     expect(defaultProps.setState).toHaveBeenCalledTimes(1);
@@ -165,7 +158,7 @@ describe('datatable toolbar', () => {
   });
 
   it('should change header height to "Custom" mode', async () => {
-    const { selectHeaderHeightOption } = await renderAndOpenToolbar({
+    const { selectHeaderHeightOption } = await renderComponent({
       headerRowHeight: 'auto',
     });
 
@@ -178,7 +171,7 @@ describe('datatable toolbar', () => {
   });
 
   it('should toggle on table pagination', async () => {
-    const { clickPaginationSwitch } = await renderAndOpenToolbar();
+    const { clickPaginationSwitch } = await renderComponent();
 
     clickPaginationSwitch();
     expect(defaultProps.setState).toHaveBeenCalledTimes(1);
@@ -189,7 +182,7 @@ describe('datatable toolbar', () => {
     );
   });
   it('should toggle off table pagination', async () => {
-    const { clickPaginationSwitch } = await renderAndOpenToolbar({
+    const { clickPaginationSwitch } = await renderComponent({
       state: {
         ...defaultProps.state,
         paging: defaultPagingState,
@@ -205,7 +198,7 @@ describe('datatable toolbar', () => {
   });
 
   it('should change density to "Compact" when selected', async () => {
-    const { selectDensityOption } = await renderAndOpenToolbar();
+    const { selectDensityOption } = await renderComponent();
     selectDensityOption(/compact/i);
     expect(defaultProps.setState).toHaveBeenCalledTimes(1);
     expect(defaultProps.setState).toHaveBeenCalledWith({
@@ -214,7 +207,7 @@ describe('datatable toolbar', () => {
   });
 
   it('should change density to "Expanded" when selected', async () => {
-    const { selectDensityOption } = await renderAndOpenToolbar();
+    const { selectDensityOption } = await renderComponent();
     selectDensityOption(/expanded/i);
     expect(defaultProps.setState).toHaveBeenCalledTimes(1);
     expect(defaultProps.setState).toHaveBeenCalledWith({