Replace legend width setting input with select, make it disabled for …

…horizontal legends and move number of columns setting outside of legend location settings component to place legend width setting above
elastic · Mar 4, 2022 · 91840fd · 91840fd
1 parent 3db0748
commit 91840fd
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 208 deletions.
diff --git a/x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx b/x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx
@@ -0,0 +1,19 @@
+/*
+ * 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 { mountWithIntl as mount } from '@kbn/test-jest-helpers';
+import { ColumnsNumberSetting } from './columns_number_setting';
+
+describe('Columns Number Setting', () => {
+  it('should have default the columns input to 1 when no value is given', () => {
+    const component = mount(<ColumnsNumberSetting isDisabled={false} isLegendOutside={false} />);
+    expect(
+      component.find('[data-test-subj="lens-legend-location-columns-input"]').at(0).prop('value')
+    ).toEqual(1);
+  });
+});
diff --git a/x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx b/x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
+import { useDebouncedValue } from './debounced_value';
+import { TooltipWrapper } from './tooltip_wrapper';
+
+export const DEFAULT_FLOATING_COLUMNS = 1;
+
+interface ColumnsNumberSettingProps {
+  /**
+   * Sets the number of columns for legend inside chart
+   */
+  floatingColumns?: number;
+  /**
+   * Callback on horizontal alignment option change
+   */
+  onFloatingColumnsChange?: (value: number) => void;
+  /**
+   * Flag to disable the location settings
+   */
+  isDisabled: boolean;
+  /**
+   * Indicates if legend is located outside
+   */
+  isLegendOutside: boolean;
+}
+
+export const ColumnsNumberSetting = ({
+  floatingColumns,
+  onFloatingColumnsChange = () => {},
+  isDisabled,
+  isLegendOutside,
+}: ColumnsNumberSettingProps) => {
+  const { inputValue, handleInputChange } = useDebouncedValue({
+    value: floatingColumns ?? DEFAULT_FLOATING_COLUMNS,
+    onChange: onFloatingColumnsChange,
+  });
+
+  return (
+    <EuiFormRow
+      label={i18n.translate('xpack.lens.shared.legendInsideColumnsLabel', {
+        defaultMessage: 'Number of columns',
+      })}
+      fullWidth
+      display="columnCompressed"
+    >
+      <TooltipWrapper
+        tooltipContent={
+          isDisabled
+            ? i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
+                defaultMessage: 'Requires legend to be shown',
+              })
+            : i18n.translate('xpack.lens.shared.legendInsideTooltip', {
+                defaultMessage: 'Requires legend to be located inside visualization',
+              })
+        }
+        condition={isDisabled || isLegendOutside}
+        position="top"
+        delay="regular"
+        display="block"
+      >
+        <EuiFieldNumber
+          data-test-subj="lens-legend-location-columns-input"
+          value={inputValue}
+          min={1}
+          max={5}
+          compressed
+          disabled={isDisabled || isLegendOutside}
+          onChange={(e) => {
+            handleInputChange(Number(e.target.value));
+          }}
+          step={1}
+        />
+      </TooltipWrapper>
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx b/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { Position } from '@elastic/charts';
-import { shallowWithIntl as shallow, mountWithIntl as mount } from '@kbn/test-jest-helpers';
+import { shallowWithIntl as shallow } from '@kbn/test-jest-helpers';
 import { LegendLocationSettings, LegendLocationSettingsProps } from './legend_location_settings';
 
 describe('Legend Location Settings', () => {
@@ -104,17 +104,6 @@ describe('Legend Location Settings', () => {
     expect(newProps.onAlignmentChange).toHaveBeenCalled();
   });
 
-  it('should have default the columns input to 1 when no value is given', () => {
-    const newProps = {
-      ...props,
-      location: 'inside',
-    } as LegendLocationSettingsProps;
-    const component = mount(<LegendLocationSettings {...newProps} />);
-    expect(
-      component.find('[data-test-subj="lens-legend-location-columns-input"]').at(0).prop('value')
-    ).toEqual(1);
-  });
-
   it('should disable the components when is Disabled is true', () => {
     const newProps = {
       ...props,

diff --git a/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx b/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx
@@ -7,9 +7,8 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiButtonGroup, EuiFieldNumber } from '@elastic/eui';
+import { EuiFormRow, EuiButtonGroup } from '@elastic/eui';
 import { VerticalAlignment, HorizontalAlignment, Position } from '@elastic/charts';
-import { useDebouncedValue } from './debounced_value';
 import { TooltipWrapper } from './tooltip_wrapper';
 
 export interface LegendLocationSettingsProps {
@@ -41,22 +40,12 @@ export interface LegendLocationSettingsProps {
    * Callback on horizontal alignment option change
    */
   onAlignmentChange?: (id: string) => void;
-  /**
-   * Sets the number of columns for legend inside chart
-   */
-  floatingColumns?: number;
-  /**
-   * Callback on horizontal alignment option change
-   */
-  onFloatingColumnsChange?: (value: number) => void;
   /**
    * Flag to disable the location settings
    */
   isDisabled?: boolean;
 }
 
-const DEFAULT_FLOATING_COLUMNS = 1;
-
 const toggleButtonsIcons = [
   {
     id: Position.Top,
@@ -149,32 +138,6 @@ const locationAlignmentButtonsIcons: Array<{
   },
 ];
 
-const FloatingColumnsInput = ({
-  value,
-  setValue,
-  isDisabled,
-}: {
-  value: number;
-  setValue: (value: number) => void;
-  isDisabled: boolean;
-}) => {
-  const { inputValue, handleInputChange } = useDebouncedValue({ value, onChange: setValue });
-  return (
-    <EuiFieldNumber
-      data-test-subj="lens-legend-location-columns-input"
-      value={inputValue}
-      min={1}
-      max={5}
-      compressed
-      disabled={isDisabled}
-      onChange={(e) => {
-        handleInputChange(Number(e.target.value));
-      }}
-      step={1}
-    />
-  );
-};
-
 export const LegendLocationSettings: React.FunctionComponent<LegendLocationSettingsProps> = ({
   location,
   onLocationChange = () => {},
@@ -183,8 +146,6 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
   verticalAlignment,
   horizontalAlignment,
   onAlignmentChange = () => {},
-  floatingColumns,
-  onFloatingColumnsChange = () => {},
   isDisabled = false,
 }) => {
   const alignment = `${verticalAlignment || VerticalAlignment.Top}_${
@@ -294,37 +255,6 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
           )}
         </>
       </EuiFormRow>
-      {location && (
-        <EuiFormRow
-          label={i18n.translate('xpack.lens.shared.legendInsideColumnsLabel', {
-            defaultMessage: 'Number of columns',
-          })}
-          fullWidth
-          display="columnCompressed"
-        >
-          <TooltipWrapper
-            tooltipContent={
-              isDisabled
-                ? i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
-                    defaultMessage: 'Requires legend to be shown',
-                  })
-                : i18n.translate('xpack.lens.shared.legendInsideTooltip', {
-                    defaultMessage: 'Requires legend to be located inside visualization',
-                  })
-            }
-            condition={isDisabled || location === 'outside'}
-            position="top"
-            delay="regular"
-            display="block"
-          >
-            <FloatingColumnsInput
-              value={floatingColumns ?? DEFAULT_FLOATING_COLUMNS}
-              setValue={onFloatingColumnsChange}
-              isDisabled={isDisabled || location === 'outside'}
-            />
-          </TooltipWrapper>
-        </EuiFormRow>
-      )}
     </>
   );
 };
diff --git a/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx b/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx
@@ -17,6 +17,7 @@ import {
 import { Position, VerticalAlignment, HorizontalAlignment } from '@elastic/charts';
 import { ToolbarPopover } from '../shared_components';
 import { LegendLocationSettings } from './legend_location_settings';
+import { ColumnsNumberSetting } from './columns_number_setting';
 import { LegendSizeSettings } from './legend_size_settings';
 import { ToolbarButtonProps } from '../../../../../src/plugins/kibana_react/public';
 import { TooltipWrapper } from './tooltip_wrapper';
@@ -223,8 +224,6 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
         verticalAlignment={verticalAlignment}
         horizontalAlignment={horizontalAlignment}
         onAlignmentChange={onAlignmentChange}
-        floatingColumns={floatingColumns}
-        onFloatingColumnsChange={onFloatingColumnsChange}
         isDisabled={mode === 'hide'}
         position={position}
         onPositionChange={onPositionChange}
@@ -235,6 +234,14 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
         isVerticalLegend={!position || position === Position.Left || position === Position.Right}
         isDisabled={mode === 'hide'}
       />
+      {location && (
+        <ColumnsNumberSetting
+          floatingColumns={floatingColumns}
+          onFloatingColumnsChange={onFloatingColumnsChange}
+          isDisabled={mode === 'hide'}
+          isLegendOutside={location === 'outside'}
+        />
+      )}
       <EuiFormRow
         display="columnCompressedSwitch"
         label={i18n.translate('xpack.lens.shared.truncateLegend', {