[Lens] Introduces new chart switcher (#91844)

Co-authored-by: Wylie Conlon <wylieconlon@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Mar 2, 2021 · 03cc5cc · 03cc5cc
1 parent 657c273
commit 03cc5cc
Show file tree

Hide file tree

Showing 19 changed files with 346 additions and 155 deletions.
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/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,
@@ -37,15 +37,20 @@ export interface DatatableVisualizationState {
   sorting?: SortingState;
 }
 
+const visualizationLabel = i18n.translate('xpack.lens.datatable.label', {
+  defaultMessage: 'Table',
+});
+
 export const datatableVisualization: Visualization<DatatableVisualizationState> = {
   id: 'lnsDatatable',
 
   visualizationTypes: [
     {
       id: 'lnsDatatable',
       icon: LensIconChartDatatable,
-      label: i18n.translate('xpack.lens.datatable.label', {
-        defaultMessage: 'Data table',
+      label: visualizationLabel,
+      groupLabel: i18n.translate('xpack.lens.datatable.groupLabel', {
+        defaultMessage: 'Tabular and single value',
       }),
     },
   ],
@@ -68,9 +73,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
   getDescription() {
     return {
       icon: LensIconChartDatatable,
-      label: i18n.translate('xpack.lens.datatable.label', {
-        defaultMessage: 'Data table',
-      }),
+      label: visualizationLabel,
     };
   },
 

diff --git a/.../plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx b/.../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',
         },
       ],
     };

diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/...k/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',
         },
       ],
     };

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
@@ -7,6 +7,19 @@
 
 import React, { ReactElement } from 'react';
 import { ReactWrapper } from 'enzyme';
+
+// Tests are executed in a jsdom environment who does not have sizing methods,
+// thus 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 +96,7 @@ describe('editor_frame', () => {
           icon: 'empty',
           id: 'testVis',
           label: 'TEST1',
+          groupLabel: 'testVisGroup',
         },
       ],
     };
@@ -94,6 +108,7 @@ describe('editor_frame', () => {
           icon: 'empty',
           id: 'testVis2',
           label: 'TEST2',
+          groupLabel: 'testVis2Group',
         },
       ],
     };
@@ -1372,6 +1387,7 @@ describe('editor_frame', () => {
             icon: 'empty',
             id: 'testVis3',
             label: 'TEST3',
+            groupLabel: 'testVis3Group',
           },
         ],
         getSuggestions: () => [

diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/...k/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;
 }
diff --git a/...ugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx b/...ugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
@@ -12,7 +12,19 @@ import {
   createMockFramePublicAPI,
   createMockDatasource,
 } from '../../mocks';
-import { EuiKeyPadMenuItem } from '@elastic/eui';
+
+// Tests are executed in a jsdom environment who does not have sizing methods,
+// thus 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 +42,7 @@ describe('chart_switch', () => {
           icon: 'empty',
           id,
           label: `Label ${id}`,
+          groupLabel: `${id}Group`,
         },
       ],
       initialize: jest.fn((_frame, state?: unknown) => {
@@ -70,16 +83,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 +182,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 +294,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 +319,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 +367,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 +390,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 +417,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 +443,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', () => {