[Lens] Introduces new chart switcher

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

@@ -37,16 +37,18 @@ 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',
       }),
@@ -71,9 +73,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
   getDescription() {
     return {
       icon: LensIconChartDatatable,
-      label: i18n.translate('xpack.lens.datatable.label', {
-        defaultMessage: 'Data table',
-      }),
+      label: visualizationLabel,
     };
   },
 

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

@@ -8,7 +8,8 @@
 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
+// 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: {

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

@@ -13,7 +13,8 @@ import {
   createMockDatasource,
 } from '../../mocks';
 
-// Tests are not ran within the browser and the AutoSizer will always compute a 0x0 size space
+// 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: {

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

@@ -15,6 +15,7 @@ import {
   EuiFlexItem,
   EuiSelectable,
   EuiIconTip,
+  EuiSelectableOption,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -51,17 +52,7 @@ interface Props {
   >;
 }
 
-interface SelectableEntry {
-  'aria-label'?: string;
-  checked?: 'on';
-  isGroupLabel: boolean;
-  key: string;
-  value?: string;
-  'data-test-subj'?: string;
-  label: string;
-  prepend?: React.ReactNode;
-  append?: React.ReactNode;
-}
+type SelectableEntry = EuiSelectableOption<{ value: string }>;
 
 function VisualizationSummary(props: Props) {
   const visualization = props.visualizationMap[props.visualizationId || ''];
@@ -98,6 +89,13 @@ function computeListHeight(list: SelectableEntry[], maxHeight: number): number {
   return Math.min(list.length * ENTRY_HEIGHT, maxHeight);
 }
 
+function getCurrentVisualizationId(
+  activeVisualization: Visualization,
+  visualizationState: unknown
+) {
+  return activeVisualization.getVisualizationTypeId(visualizationState);
+}
+
 export const ChartSwitch = memo(function ChartSwitch(props: Props) {
   const [flyoutOpen, setFlyoutOpen] = useState<boolean>(false);
 
@@ -213,8 +211,8 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
       if (!flyoutOpen) {
         return { visualizationTypes: [], visualizationsLookup: {} };
       }
-      const activeVisualization = props.visualizationMap[props.visualizationId || ''];
-      const subVisualizationId = activeVisualization.getVisualizationTypeId(
+      const subVisualizationId = getCurrentVisualizationId(
+        props.visualizationMap[props.visualizationId || ''],
         props.visualizationState
       );
       const lowercasedSearchTerm = searchTerm.toLowerCase();
@@ -262,38 +260,53 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
             if (visualizations.length === 0) {
               return [];
             }
-            return [{ key: group, label: group, isGroupLabel: true }].concat(
-              visualizations.map((v) => ({
-                'aria-label': v.fullLabel || v.label,
-                checked: subVisualizationId === v.id ? 'on' : null,
-                isGroupLabel: false,
-                key: `${v.visualizationId}:${v.id}`,
-                value: `${v.visualizationId}:${v.id}`,
-                'data-test-subj': `lnsChartSwitchPopover_${v.id}`,
-                label: v.fullLabel || v.label,
-                prepend: <EuiIcon className="lnsChartSwitch__chartIcon" type={v.icon || 'empty'} />,
-                append:
-                  v.selection.dataLoss !== 'nothing' ? (
-                    <EuiIconTip
-                      aria-label={i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
-                        defaultMessage: 'Data loss',
-                      })}
-                      type="alert"
-                      color="warning"
-                      title={i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
-                        defaultMessage: 'Data loss',
-                      })}
-                      content={i18n.translate('xpack.lens.chartSwitch.dataLossDescription', {
-                        defaultMessage:
-                          'Switching to this chart will lose some of the configuration',
-                      })}
-                      iconProps={{
-                        className: 'lnsChartSwitch__chartIcon',
-                        'data-test-subj': `lnsChartSwitchPopoverAlert_${v.id}`,
-                      }}
-                    />
-                  ) : null,
-              }))
+            return [
+              {
+                key: group,
+                label: group,
+                isGroupLabel: true,
+                'aria-label': group,
+                'data-test-subj': `lnsChartSwitchPopover_${group}`,
+              } as SelectableEntry,
+            ].concat(
+              visualizations
+                // alphabetical order within each group
+                .sort((a, b) => {
+                  return (a.fullLabel || a.label).localeCompare(b.fullLabel || b.label);
+                })
+                .map(
+                  (v): SelectableEntry => ({
+                    'aria-label': v.fullLabel || v.label,
+                    isGroupLabel: false,
+                    key: `${v.visualizationId}:${v.id}`,
+                    value: `${v.visualizationId}:${v.id}`,
+                    'data-test-subj': `lnsChartSwitchPopover_${v.id}`,
+                    label: v.fullLabel || v.label,
+                    prepend: (
+                      <EuiIcon className="lnsChartSwitch__chartIcon" type={v.icon || 'empty'} />
+                    ),
+                    append:
+                      v.selection.dataLoss !== 'nothing' ? (
+                        <EuiIconTip
+                          aria-label={i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
+                            defaultMessage: 'Warning',
+                          })}
+                          type="alert"
+                          color="warning"
+                          content={i18n.translate('xpack.lens.chartSwitch.dataLossDescription', {
+                            defaultMessage:
+                              'Selecting this chart type will result in a partial loss of currently applied configuration selections.',
+                          })}
+                          iconProps={{
+                            className: 'lnsChartSwitch__chartIcon',
+                            'data-test-subj': `lnsChartSwitchPopoverAlert_${v.id}`,
+                          }}
+                        />
+                      ) : null,
+                    // Apparently checked: null is not valid for TS
+                    ...(subVisualizationId === v.id && { checked: 'on' }),
+                  })
+                )
             );
           }),
         visualizationsLookup: lookup,
@@ -354,7 +367,11 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
           }}
           options={visualizationTypes}
           onChange={(newOptions) => {
-            const id = newOptions.find(({ checked }) => checked === 'on')!.value!;
+            const chosenType = newOptions.find(({ checked }) => checked === 'on')!;
+            if (!chosenType) {
+              return;
+            }
+            const id = chosenType.value!;
             commitSelection(visualizationsLookup[id].selection);
           }}
           noMatchesMessage={

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

@@ -444,7 +444,7 @@ export const visualizationTypes: VisualizationType[] = [
     id: 'bar',
     icon: LensIconChartBar,
     label: i18n.translate('xpack.lens.xyVisualization.barLabel', {
-      defaultMessage: 'Bar',
+      defaultMessage: 'Bar vertical',
     }),
     groupLabel: groupLabelForBar,
   },
@@ -463,15 +463,15 @@ export const visualizationTypes: VisualizationType[] = [
     id: 'bar_stacked',
     icon: LensIconChartBarStacked,
     label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', {
-      defaultMessage: 'Bar stacked',
+      defaultMessage: 'Bar vertical stacked',
     }),
     groupLabel: groupLabelForBar,
   },
   {
     id: 'bar_percentage_stacked',
     icon: LensIconChartBarPercentage,
     label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarLabel', {
-      defaultMessage: 'Bar percentage bar',
+      defaultMessage: 'Bar vertical percentage',
     }),
     groupLabel: groupLabelForBar,
   },
@@ -512,15 +512,15 @@ export const visualizationTypes: VisualizationType[] = [
     id: 'area_stacked',
     icon: LensIconChartAreaStacked,
     label: i18n.translate('xpack.lens.xyVisualization.stackedAreaLabel', {
-      defaultMessage: 'Stacked area',
+      defaultMessage: 'Area stacked',
     }),
     groupLabel: groupLabelForLineAndArea,
   },
   {
     id: 'area_percentage_stacked',
     icon: LensIconChartAreaPercentage,
     label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageAreaLabel', {
-      defaultMessage: 'Percentage area',
+      defaultMessage: 'Area percentage',
     }),
     groupLabel: groupLabelForLineAndArea,
   },

x-pack/plugins/lens/public/xy_visualization/visualization.test.ts

@@ -62,31 +62,31 @@ describe('xy_visualization', () => {
       const desc = xyVisualization.getDescription(mixedState());
 
       expect(desc.icon).toEqual(LensIconChartBar);
-      expect(desc.label).toEqual('Bar');
+      expect(desc.label).toEqual('Bar vertical');
     });
 
     it('should show mixed horizontal bar chart when multiple horizontal bar types', () => {
       const desc = xyVisualization.getDescription(
         mixedState('bar_horizontal', 'bar_horizontal_stacked')
       );
 
-      expect(desc.label).toEqual('Mixed H. bar');
+      expect(desc.label).toEqual('Mixed Bar horizontal');
     });
 
     it('should show bar chart when bar only', () => {
       const desc = xyVisualization.getDescription(mixedState('bar_horizontal', 'bar_horizontal'));
 
-      expect(desc.label).toEqual('H. Bar');
+      expect(desc.label).toEqual('Bar horizontal');
     });
 
     it('should show the chart description if not mixed', () => {
       expect(xyVisualization.getDescription(mixedState('area')).label).toEqual('Area');
       expect(xyVisualization.getDescription(mixedState('line')).label).toEqual('Line');
       expect(xyVisualization.getDescription(mixedState('area_stacked')).label).toEqual(
-        'Stacked area'
+        'Area stacked'
       );
       expect(xyVisualization.getDescription(mixedState('bar_horizontal_stacked')).label).toEqual(
-        'H. Stacked bar'
+        'Bar horizontal stacked'
       );
     });
   });

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

@@ -58,7 +58,7 @@ function getDescription(state?: State) {
     return {
       icon: LensIconChartBarHorizontal,
       label: i18n.translate('xpack.lens.xyVisualization.mixedBarHorizontalLabel', {
-        defaultMessage: 'Mixed H. bar',
+        defaultMessage: 'Mixed Bar horizontal',
       }),
     };
   }
@@ -74,7 +74,7 @@ function getDescription(state?: State) {
 
   return {
     icon: visualizationType.icon,
-    label: visualizationType.label,
+    label: visualizationType.fullLabel || visualizationType.label,
   };
 }
 

x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts

@@ -484,7 +484,7 @@ describe('xy_suggestions', () => {
     });
 
     expect(rest).toHaveLength(visualizationTypes.length - 1);
-    expect(suggestion.title).toEqual('Stacked bar');
+    expect(suggestion.title).toEqual('Bar vertical stacked');
     expect(suggestion.state).toEqual(
       expect.objectContaining({
         layers: [