From 1567be984d0ac04b7865983d219446b1f80be3c6 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Fri, 18 Sep 2020 08:58:04 +0300
Subject: [PATCH] Aligns the y axis settings on horizontal mode (#77585)
 (#77781)

---
 .../shared_components/toolbar_popover.tsx     |  1 +
 .../xy_visualization/xy_config_panel.test.tsx | 46 ++++++++++++++++++-
 .../xy_visualization/xy_config_panel.tsx      | 45 +++++++++++++-----
 3 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
index 98f5878ec927e..07baf29fdd32a 100644
--- a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
+++ b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
@@ -56,6 +56,7 @@ export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
             onClick={() => {
               setOpen(!open);
             }}
+            title={title}
             hasArrow={false}
             isDisabled={isDisabled}
             groupPosition={groupPosition}
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
index 7e2e8f0453588..2114d63fcfacd 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
 import { EuiButtonGroupProps, EuiSuperSelect, EuiButtonGroup } from '@elastic/eui';
-import { LayerContextMenu, XyToolbar } from './xy_config_panel';
+import { LayerContextMenu, XyToolbar, DimensionEditor } from './xy_config_panel';
 import { ToolbarPopover } from '../shared_components';
 import { AxisSettingsPopover } from './axis_settings_popover';
 import { FramePublicAPI } from '../types';
@@ -171,4 +171,48 @@ describe('XY Config panels', () => {
       expect(component.find(AxisSettingsPopover).length).toEqual(3);
     });
   });
+
+  describe('Dimension Editor', () => {
+    test('shows the correct axis side options when in horizontal mode', () => {
+      const state = testState();
+      const component = mount(
+        <DimensionEditor
+          layerId={state.layers[0].layerId}
+          frame={frame}
+          setState={jest.fn()}
+          accessor="bar"
+          groupId="left"
+          state={{ ...state, layers: [{ ...state.layers[0], seriesType: 'bar_horizontal' }] }}
+        />
+      );
+
+      const options = component
+        .find(EuiButtonGroup)
+        .first()
+        .prop('options') as EuiButtonGroupProps['options'];
+
+      expect(options!.map(({ label }) => label)).toEqual(['Auto', 'Bottom', 'Top']);
+    });
+
+    test('shows the default axis side options when not in horizontal mode', () => {
+      const state = testState();
+      const component = mount(
+        <DimensionEditor
+          layerId={state.layers[0].layerId}
+          frame={frame}
+          setState={jest.fn()}
+          accessor="bar"
+          groupId="left"
+          state={state}
+        />
+      );
+
+      const options = component
+        .find(EuiButtonGroup)
+        .first()
+        .prop('options') as EuiButtonGroupProps['options'];
+
+      expect(options!.map(({ label }) => label)).toEqual(['Auto', 'Left', 'Right']);
+    });
+  });
 });
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
index bc98bf53d9f12..4aa5bd62c05a5 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -274,9 +274,15 @@ export function XyToolbar(props: VisualizationToolbarProps<State>) {
       <EuiFlexItem>
         <EuiFlexGroup gutterSize="none" responsive={false}>
           <TooltipWrapper
-            tooltipContent={i18n.translate('xpack.lens.xyChart.leftAxisDisabledHelpText', {
-              defaultMessage: 'This setting only applies when left axis is enabled.',
-            })}
+            tooltipContent={
+              shouldRotate
+                ? i18n.translate('xpack.lens.xyChart.bottomAxisDisabledHelpText', {
+                    defaultMessage: 'This setting only applies when bottom axis is enabled.',
+                  })
+                : i18n.translate('xpack.lens.xyChart.leftAxisDisabledHelpText', {
+                    defaultMessage: 'This setting only applies when left axis is enabled.',
+                  })
+            }
             condition={
               Object.keys(axisGroups.find((group) => group.groupId === 'left') || {}).length === 0
             }
@@ -310,9 +316,15 @@ export function XyToolbar(props: VisualizationToolbarProps<State>) {
             toggleAxisTitleVisibility={onAxisTitlesVisibilitySettingsChange}
           />
           <TooltipWrapper
-            tooltipContent={i18n.translate('xpack.lens.xyChart.rightAxisDisabledHelpText', {
-              defaultMessage: 'This setting only applies when right axis is enabled.',
-            })}
+            tooltipContent={
+              shouldRotate
+                ? i18n.translate('xpack.lens.xyChart.topAxisDisabledHelpText', {
+                    defaultMessage: 'This setting only applies when top axis is enabled.',
+                  })
+                : i18n.translate('xpack.lens.xyChart.rightAxisDisabledHelpText', {
+                    defaultMessage: 'This setting only applies when right axis is enabled.',
+                  })
+            }
             condition={
               Object.keys(axisGroups.find((group) => group.groupId === 'right') || {}).length === 0
             }
@@ -345,6 +357,7 @@ export function DimensionEditor(props: VisualizationDimensionEditorProps<State>)
   const { state, setState, layerId, accessor } = props;
   const index = state.layers.findIndex((l) => l.layerId === layerId);
   const layer = state.layers[index];
+  const isHorizontal = isHorizontalChart(state.layers);
   const axisMode =
     (layer.yConfig &&
       layer.yConfig?.find((yAxisConfig) => yAxisConfig.forAccessor === accessor)?.axisMode) ||
@@ -377,15 +390,23 @@ export function DimensionEditor(props: VisualizationDimensionEditorProps<State>)
             },
             {
               id: `${idPrefix}left`,
-              label: i18n.translate('xpack.lens.xyChart.axisSide.left', {
-                defaultMessage: 'Left',
-              }),
+              label: isHorizontal
+                ? i18n.translate('xpack.lens.xyChart.axisSide.bottom', {
+                    defaultMessage: 'Bottom',
+                  })
+                : i18n.translate('xpack.lens.xyChart.axisSide.left', {
+                    defaultMessage: 'Left',
+                  }),
             },
             {
               id: `${idPrefix}right`,
-              label: i18n.translate('xpack.lens.xyChart.axisSide.right', {
-                defaultMessage: 'Right',
-              }),
+              label: isHorizontal
+                ? i18n.translate('xpack.lens.xyChart.axisSide.top', {
+                    defaultMessage: 'Top',
+                  })
+                : i18n.translate('xpack.lens.xyChart.axisSide.right', {
+                    defaultMessage: 'Right',
+                  }),
             },
           ]}
           idSelected={`${idPrefix}${axisMode}`}