[Lens] Consolidate chart switch into one layer chart switch

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

@@ -27,7 +27,7 @@ export function LayerConfiguration({
   hasPadding,
   setIsInlineFlyoutVisible,
   getUserMessages,
-  shouldDisplayChartSwitch,
+  onlyAllowSwitchToSubtypes,
 }: LayerConfigurationProps) {
   const dispatch = useLensDispatch();
   const { euiTheme } = useEuiTheme();
@@ -59,7 +59,7 @@ export function LayerConfiguration({
     uiActions: startDependencies.uiActions,
     hideLayerHeader: datasourceId === 'textBased',
     // TODO: remove this prop once we display the chart switch in Discover
-    shouldDisplayChartSwitch,
+    onlyAllowSwitchToSubtypes,
     indexPatternService,
     setIsInlineFlyoutVisible,
     getUserMessages,

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

@@ -366,6 +366,8 @@ export function LensEditConfigurationFlyout({
         isSaveable={isSaveable}
       >
         <LayerConfiguration
+          // TODO: remove this once we support switching to any chart in Discover
+          onlyAllowSwitchToSubtypes
           getUserMessages={getUserMessages}
           attributes={attributes}
           coreStart={coreStart}
@@ -502,8 +504,6 @@ export function LensEditConfigurationFlyout({
             >
               <>
                 <LayerConfiguration
-                  // TODO: remove this prop once we add support for multiple layers (form-based mode)
-                  shouldDisplayChartSwitch={!!textBasedMode}
                   attributes={attributes}
                   getUserMessages={getUserMessages}
                   coreStart={coreStart}

x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/types.ts

@@ -102,5 +102,5 @@ export interface LayerConfigurationProps {
   hasPadding?: boolean;
   setIsInlineFlyoutVisible: (flag: boolean) => void;
   getUserMessages: UserMessagesGetter;
-  shouldDisplayChartSwitch?: boolean;
+  onlyAllowSwitchToSubtypes?: boolean;
 }

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx

@@ -280,7 +280,7 @@ export function LayerPanels(
               updateDatasource={updateDatasource}
               updateDatasourceAsync={updateDatasourceAsync}
               displayLayerSettings={!props.hideLayerHeader}
-              shouldDisplayChartSwitch={props.shouldDisplayChartSwitch}
+              onlyAllowSwitchToSubtypes={props.onlyAllowSwitchToSubtypes}
               onChangeIndexPattern={(args) => {
                 onChangeIndexPattern(args);
                 const layersToRemove =

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.test.tsx → x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_header.test.tsx

@@ -13,13 +13,13 @@ import {
   createMockFramePublicAPI,
   createMockVisualization,
 } from '../../../mocks';
-import { LayerSettings } from './layer_settings';
+import { LayerHeader } from './layer_header';
 import { renderWithReduxStore } from '../../../mocks';
 
-describe('LayerSettings', () => {
+describe('LayerHeader', () => {
   const renderLayerSettings = (propsOverrides = {}) => {
     return renderWithReduxStore(
-      <LayerSettings
+      <LayerHeader
         datasourceMap={{
           testDatasource: createMockDatasource(),
         }}
@@ -39,14 +39,14 @@ describe('LayerSettings', () => {
     );
   };
 
-  it('should render a static header if visualization has only a description value', () => {
+  it('should render chart switch if custom layer header was not passed', () => {
     renderLayerSettings({
       activeVisualization: {
         ...createMockVisualization(),
         getDescription: () => ({ icon: 'myIcon', label: 'myVisualizationType' }),
       },
     });
-    expect(screen.getByText('myVisualizationType')).toBeInTheDocument();
+    expect(screen.getByTestId('lnsChartSwitchPopover')).toBeInTheDocument();
   });
 
   it('should use custom renderer if passed', () => {
@@ -55,7 +55,7 @@ describe('LayerSettings', () => {
     renderLayerSettings({
       activeVisualization: {
         ...createMockVisualization(),
-        LayerHeaderComponent: () => <div>{customLayerHeader}</div>,
+        getCustomLayerHeader: () => <div>{customLayerHeader}</div>,
       },
     });
     expect(screen.getByText(customLayerHeader)).toBeInTheDocument();

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_header.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { StaticHeader } from '../../../shared_components';
+import {
+  DatasourceMap,
+  Visualization,
+  VisualizationLayerWidgetProps,
+  VisualizationMap,
+} from '../../../types';
+import { ChartSwitch } from '../workspace_panel/chart_switch';
+
+export function LayerHeader({
+  activeVisualization,
+  layerConfigProps,
+  visualizationMap,
+  datasourceMap,
+  onlyAllowSwitchToSubtypes,
+}: {
+  visualizationMap: VisualizationMap;
+  datasourceMap: DatasourceMap;
+  activeVisualization: Visualization;
+  layerConfigProps: VisualizationLayerWidgetProps;
+  onlyAllowSwitchToSubtypes?: boolean;
+}) {
+  const customLayerHeader = activeVisualization.getCustomLayerHeader?.(layerConfigProps);
+  if (customLayerHeader) {
+    return customLayerHeader;
+  }
+
+  let availableVisualizationMap = { ...visualizationMap };
+
+  // hides legacy metric for ES|QL charts
+  Object.keys(availableVisualizationMap).forEach((key) => {
+    if (availableVisualizationMap[key]?.hideFromChartSwitch?.(layerConfigProps.frame)) {
+      delete availableVisualizationMap[key];
+    }
+  });
+
+  // TODO: for Discover, we should only show the active visualization subtypes till we fix how the communication with Discover works
+  if (onlyAllowSwitchToSubtypes) {
+    availableVisualizationMap = {
+      [activeVisualization.id]: availableVisualizationMap[activeVisualization.id],
+    };
+  }
+
+  const hasOnlyOneVisAvailable =
+    Object.keys(availableVisualizationMap).length === 1 &&
+    Object.values(availableVisualizationMap)[0].visualizationTypes.length === 1;
+
+  if (hasOnlyOneVisAvailable) {
+    const description = activeVisualization.getDescription(layerConfigProps.state);
+    return <StaticHeader label={description.label} icon={description.icon} />;
+  }
+
+  return (
+    <ChartSwitch
+      datasourceMap={datasourceMap}
+      visualizationMap={availableVisualizationMap}
+      framePublicAPI={layerConfigProps.frame}
+      layerId={layerConfigProps.layerId}
+    />
+  );
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -24,7 +24,7 @@ import { DragDropIdentifier, ReorderProvider, DropType } from '@kbn/dom-drag-dro
 import { DimensionButton } from '@kbn/visualization-ui-components';
 import { LayerActions } from './layer_actions';
 import { isOperation, LayerAction, VisualizationDimensionGroupConfig } from '../../../types';
-import { LayerSettings } from './layer_settings';
+import { LayerHeader } from './layer_header';
 import { LayerPanelProps } from './types';
 import { DimensionContainer } from './dimension_container';
 import { EmptyDimensionButton } from './buttons/empty_dimension_button';
@@ -73,7 +73,7 @@ export function LayerPanel(props: LayerPanelProps) {
     core,
     onDropToDimension,
     setIsInlineFlyoutVisible,
-    shouldDisplayChartSwitch,
+    onlyAllowSwitchToSubtypes,
   } = props;
 
   const isInlineEditing = Boolean(props?.setIsInlineFlyoutVisible);
@@ -368,7 +368,7 @@ export function LayerPanel(props: LayerPanelProps) {
           <header className="lnsLayerPanel__layerHeader">
             <EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">
               <EuiFlexItem grow className="lnsLayerPanel__layerSettingsWrapper">
-                <LayerSettings
+                <LayerHeader
                   layerConfigProps={{
                     ...layerVisualizationConfigProps,
                     setState: props.updateVisualization,
@@ -382,7 +382,7 @@ export function LayerPanel(props: LayerPanelProps) {
                   activeVisualization={activeVisualization}
                   visualizationMap={visualizationMap}
                   datasourceMap={datasourceMap}
-                  shouldDisplayChartSwitch={shouldDisplayChartSwitch}
+                  onlyAllowSwitchToSubtypes={onlyAllowSwitchToSubtypes}
                 />
               </EuiFlexItem>
               {props.displayLayerSettings && (

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts

@@ -35,7 +35,7 @@ export interface ConfigPanelWrapperProps {
   getUserMessages?: UserMessagesGetter;
   hideLayerHeader?: boolean;
   setIsInlineFlyoutVisible?: (status: boolean) => void;
-  shouldDisplayChartSwitch?: boolean;
+  onlyAllowSwitchToSubtypes?: boolean;
 }
 
 export interface LayerPanelProps {
@@ -84,7 +84,7 @@ export interface LayerPanelProps {
   getUserMessages?: UserMessagesGetter;
   displayLayerSettings: boolean;
   setIsInlineFlyoutVisible?: (status: boolean) => void;
-  shouldDisplayChartSwitch?: boolean;
+  onlyAllowSwitchToSubtypes?: boolean;
 }
 
 export interface LayerDatasourceDropProps {

x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx

@@ -7,7 +7,7 @@
 
 import React, { useEffect } from 'react';
 import { ReactWrapper } from 'enzyme';
-import { screen, fireEvent, within, waitFor } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { EditorFrame, EditorFrameProps } from './editor_frame';
@@ -168,38 +168,16 @@ describe('editor_frame', () => {
       }
     );
 
-    const openChartSwitch = () => {
-      userEvent.click(screen.getByTestId('lnsChartSwitchPopover'));
-    };
-
-    const waitForChartSwitchClosed = () => {
-      waitFor(() => {
-        expect(screen.queryByTestId('lnsChartSwitchList')).not.toBeInTheDocument();
-      });
-    };
-
-    const getMenuItem = (subType: string) => {
-      const list = screen.getByTestId('lnsChartSwitchList');
-      return within(list).getByTestId(`lnsChartSwitchPopover_${subType}`);
-    };
-
-    const switchToVis = (subType: string) => {
-      fireEvent.click(getMenuItem(subType));
-    };
     const queryLayerPanel = () => screen.queryByTestId('lns-layerPanel-0');
     const queryWorkspacePanel = () => screen.queryByTestId('lnsWorkspace');
     const queryDataPanel = () => screen.queryByTestId('lnsDataPanelWrapper');
 
     return {
       ...rtlRender,
       store,
-      switchToVis,
-      getMenuItem,
-      openChartSwitch,
       queryLayerPanel,
       queryWorkspacePanel,
       queryDataPanel,
-      waitForChartSwitchClosed,
       simulateLoadingDatasource: () =>
         store.dispatch(
           setState({
@@ -345,57 +323,6 @@ describe('editor_frame', () => {
     });
   });
 
-  describe('switching', () => {
-    it('should initialize other visualization on switch', async () => {
-      const { openChartSwitch, switchToVis } = renderEditorFrame();
-      openChartSwitch();
-      switchToVis('testVis2');
-      expect(mockVisualization2.initialize).toHaveBeenCalled();
-    });
-
-    it('should use suggestions to switch to new visualization', async () => {
-      const { openChartSwitch, switchToVis } = renderEditorFrame();
-      const initialState = { suggested: true };
-      mockVisualization2.initialize.mockReturnValueOnce({ initial: true });
-      mockVisualization2.getVisualizationTypeId.mockReturnValueOnce('testVis2');
-      mockVisualization2.getSuggestions.mockReturnValueOnce([
-        {
-          title: 'Suggested vis',
-          score: 1,
-          state: initialState,
-          previewIcon: 'empty',
-        },
-      ]);
-      openChartSwitch();
-      switchToVis('testVis2');
-      expect(mockVisualization2.getSuggestions).toHaveBeenCalled();
-      expect(mockVisualization2.initialize).toHaveBeenCalledWith(expect.anything(), initialState);
-      expect(mockVisualization2.getConfiguration).toHaveBeenCalledWith(
-        expect.objectContaining({ state: { initial: true } })
-      );
-    });
-
-    it('should fall back when switching visualizations if the visualization has no suggested use', async () => {
-      mockVisualization2.initialize.mockReturnValueOnce({ initial: true });
-
-      const { openChartSwitch, switchToVis, waitForChartSwitchClosed } = renderEditorFrame();
-      openChartSwitch();
-      switchToVis('testVis2');
-
-      expect(mockDatasource.publicAPIMock.getTableSpec).toHaveBeenCalled();
-      expect(mockVisualization2.getSuggestions).toHaveBeenCalled();
-      expect(mockVisualization2.initialize).toHaveBeenCalledWith(
-        expect.any(Function), // generated layerId
-        undefined,
-        undefined
-      );
-      expect(mockVisualization2.getConfiguration).toHaveBeenCalledWith(
-        expect.objectContaining({ state: { initial: true } })
-      );
-      waitForChartSwitchClosed();
-    });
-  });
-
   describe('suggestions', () => {
     it('should fetch suggestions of currently active datasource', async () => {
       renderEditorFrame();