[Lens] Introduces new chart switcher

x-pack/plugins/lens/public/datatable_visualization/visualization.tsx

@@ -10,7 +10,7 @@ import { render } from 'react-dom';
 import { Ast } from '@kbn/interpreter/common';
 import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import type {
+import {
   SuggestionRequest,
   Visualization,
   VisualizationSuggestion,
@@ -47,6 +47,9 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
       label: i18n.translate('xpack.lens.datatable.label', {
         defaultMessage: 'Data table',
       }),
+      groupLabel: i18n.translate('xpack.lens.datatable.groupLabel', {
+        defaultMessage: 'Tabular and single value',
+      }),
     },
   ],
 

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

@@ -72,6 +72,7 @@ describe('ConfigPanel', () => {
           icon: 'empty',
           id: 'testVis',
           label: 'TEST1',
+          groupLabel: 'testVisGroup',
         },
       ],
     };
@@ -85,6 +86,7 @@ describe('ConfigPanel', () => {
           icon: 'empty',
           id: 'testVis2',
           label: 'TEST2',
+          groupLabel: 'testVis2Group',
         },
       ],
     };

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

@@ -82,6 +82,7 @@ describe('LayerPanel', () => {
           icon: 'empty',
           id: 'testVis',
           label: 'TEST1',
+          groupLabel: 'testVisGroup',
         },
       ],
     };
@@ -94,6 +95,7 @@ describe('LayerPanel', () => {
           icon: 'empty',
           id: 'testVis2',
           label: 'TEST2',
+          groupLabel: 'testVis2Group',
         },
       ],
     };

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

@@ -7,6 +7,18 @@
 
 import React, { ReactElement } from 'react';
 import { ReactWrapper } from 'enzyme';
+
+// Tests are not ran within the browser and the AutoSizer will always compute a 0x0 size space
+// Mock the AutoSizer inside EuiSelectable (Chart Switch) and return some dimensions > 0
+jest.mock('react-virtualized-auto-sizer', () => {
+  return function (props: {
+    children: (dimensions: { width: number; height: number }) => React.ReactNode;
+  }) {
+    const { children, ...otherProps } = props;
+    return <div {...otherProps}>{children({ width: 100, height: 100 })}</div>;
+  };
+});
+
 import { EuiPanel, EuiToolTip } from '@elastic/eui';
 import { mountWithIntl as mount } from '@kbn/test/jest';
 import { EditorFrame } from './editor_frame';
@@ -83,6 +95,7 @@ describe('editor_frame', () => {
           icon: 'empty',
           id: 'testVis',
           label: 'TEST1',
+          groupLabel: 'testVisGroup',
         },
       ],
     };
@@ -94,6 +107,7 @@ describe('editor_frame', () => {
           icon: 'empty',
           id: 'testVis2',
           label: 'TEST2',
+          groupLabel: 'testVis2Group',
         },
       ],
     };
@@ -1372,6 +1386,7 @@ describe('editor_frame', () => {
             icon: 'empty',
             id: 'testVis3',
             label: 'TEST3',
+            groupLabel: 'testVis3Group',
           },
         ],
         getSuggestions: () => [

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss

@@ -18,5 +18,5 @@ img.lnsChartSwitch__chartIcon { // stylelint-disable-line selector-no-qualifying
 }
 
 .lnsChartSwitch__search {
-  width: 4 * $euiSizeXXL;
+  width: 7 * $euiSizeXXL;
 }

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

@@ -12,7 +12,18 @@ import {
   createMockFramePublicAPI,
   createMockDatasource,
 } from '../../mocks';
-import { EuiKeyPadMenuItem } from '@elastic/eui';
+
+// Tests are not ran within the browser and the AutoSizer will always compute a 0x0 size space
+// Mock the AutoSizer inside EuiSelectable (Chart Switch) and return some dimensions > 0
+jest.mock('react-virtualized-auto-sizer', () => {
+  return function (props: {
+    children: (dimensions: { width: number; height: number }) => React.ReactNode;
+  }) {
+    const { children } = props;
+    return <div>{children({ width: 100, height: 100 })}</div>;
+  };
+});
+
 import { mountWithIntl as mount } from '@kbn/test/jest';
 import { Visualization, FramePublicAPI, DatasourcePublicAPI } from '../../../types';
 import { Action } from '../state_management';
@@ -30,6 +41,7 @@ describe('chart_switch', () => {
           icon: 'empty',
           id,
           label: `Label ${id}`,
+          groupLabel: `${id}Group`,
         },
       ],
       initialize: jest.fn((_frame, state?: unknown) => {
@@ -70,16 +82,19 @@ describe('chart_switch', () => {
             icon: 'empty',
             id: 'subvisC1',
             label: 'C1',
+            groupLabel: 'visCGroup',
           },
           {
             icon: 'empty',
             id: 'subvisC2',
             label: 'C2',
+            groupLabel: 'visCGroup',
           },
           {
             icon: 'empty',
             id: 'subvisC3',
             label: 'C3',
+            groupLabel: 'visCGroup',
           },
         ],
         getVisualizationTypeId: jest.fn((state) => state.type),
@@ -166,10 +181,7 @@ describe('chart_switch', () => {
 
   function getMenuItem(subType: string, component: ReactWrapper) {
     showFlyout(component);
-    return component
-      .find(EuiKeyPadMenuItem)
-      .find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`)
-      .first();
+    return component.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).first();
   }
 
   it('should use suggested state if there is a suggestion from the target visualization', () => {
@@ -281,7 +293,12 @@ describe('chart_switch', () => {
       />
     );
 
-    expect(getMenuItem('visB', component).prop('betaBadgeIconType')).toEqual('alert');
+    expect(
+      getMenuItem('visB', component)
+        .find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
+        .first()
+        .props().type
+    ).toEqual('alert');
   });
 
   it('should indicate data loss if not all layers will be used', () => {
@@ -301,7 +318,12 @@ describe('chart_switch', () => {
       />
     );
 
-    expect(getMenuItem('visB', component).prop('betaBadgeIconType')).toEqual('alert');
+    expect(
+      getMenuItem('visB', component)
+        .find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
+        .first()
+        .props().type
+    ).toEqual('alert');
   });
 
   it('should support multi-layer suggestions without data loss', () => {
@@ -344,7 +366,9 @@ describe('chart_switch', () => {
       />
     );
 
-    expect(getMenuItem('visB', component).prop('betaBadgeIconType')).toBeUndefined();
+    expect(
+      getMenuItem('visB', component).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
+    ).toHaveLength(0);
   });
 
   it('should indicate data loss if no data will be used', () => {
@@ -365,7 +389,12 @@ describe('chart_switch', () => {
       />
     );
 
-    expect(getMenuItem('visB', component).prop('betaBadgeIconType')).toEqual('alert');
+    expect(
+      getMenuItem('visB', component)
+        .find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
+        .first()
+        .props().type
+    ).toEqual('alert');
   });
 
   it('should not indicate data loss if there is no data', () => {
@@ -387,7 +416,9 @@ describe('chart_switch', () => {
       />
     );
 
-    expect(getMenuItem('visB', component).prop('betaBadgeIconType')).toBeUndefined();
+    expect(
+      getMenuItem('visB', component).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
+    ).toHaveLength(0);
   });
 
   it('should not show a warning when the subvisualization is the same', () => {
@@ -411,7 +442,11 @@ describe('chart_switch', () => {
       />
     );
 
-    expect(getMenuItem('subvisC2', component).prop('betaBadgeIconType')).not.toBeDefined();
+    expect(
+      getMenuItem('subvisC2', component).find(
+        '[data-test-subj="lnsChartSwitchPopoverAlert_subvisC2"]'
+      )
+    ).toHaveLength(0);
   });
 
   it('should get suggestions when switching subvisualization', () => {