hide auto option and update default legend size for agg-based visuali…

…zations

src/plugins/vis_default_editor/public/components/options/legend_size_settings.test.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { DEFAULT_LEGEND_SIZE, LegendSizes, LegendSizeSettings } from './legend_size_settings';
+import { EuiSuperSelect } from '@elastic/eui';
+import { shallow } from 'enzyme';
+
+describe('legend size settings', () => {
+  it('select is disabled if not vertical legend', () => {
+    const instance = shallow(
+      <LegendSizeSettings
+        legendSize={undefined}
+        onLegendSizeChange={() => {}}
+        isVerticalLegend={false}
+      />
+    );
+
+    expect(instance.find(EuiSuperSelect).props().disabled).toBeTruthy();
+  });
+
+  it('reflects current setting in select', () => {
+    const CURRENT_SIZE = LegendSizes.SMALL;
+
+    const instance = shallow(
+      <LegendSizeSettings
+        legendSize={Number(CURRENT_SIZE)}
+        onLegendSizeChange={() => {}}
+        isVerticalLegend={true}
+      />
+    );
+
+    expect(instance.find(EuiSuperSelect).props().valueOfSelected).toBe(CURRENT_SIZE.toString());
+  });
+
+  it('allows user to select a new option', () => {
+    const onSizeChange = jest.fn();
+
+    const instance = shallow(
+      <LegendSizeSettings
+        legendSize={Number(LegendSizes.SMALL)}
+        onLegendSizeChange={onSizeChange}
+        isVerticalLegend={true}
+      />
+    );
+
+    const onChange = instance.find(EuiSuperSelect).props().onChange;
+
+    onChange(LegendSizes.EXTRA_LARGE);
+    onChange(DEFAULT_LEGEND_SIZE);
+
+    expect(onSizeChange).toHaveBeenNthCalledWith(1, Number(LegendSizes.EXTRA_LARGE));
+    expect(onSizeChange).toHaveBeenNthCalledWith(2, undefined);
+  });
+
+  it('hides "auto" option if visualization not using it', () => {
+    const getOptions = (legendSize: number | undefined) =>
+      shallow(
+        <LegendSizeSettings
+          legendSize={legendSize}
+          onLegendSizeChange={() => {}}
+          isVerticalLegend={true}
+        />
+      )
+        .find(EuiSuperSelect)
+        .props().options;
+
+    const autoOption = expect.objectContaining({ value: LegendSizes.AUTO });
+    expect(getOptions(Number(LegendSizes.AUTO))).toContainEqual(autoOption);
+    expect(getOptions(undefined)).not.toContainEqual(autoOption);
+    expect(getOptions(Number(LegendSizes.LARGE))).not.toContainEqual(autoOption);
+  });
+});

src/plugins/vis_default_editor/public/components/options/legend_size_settings.tsx

@@ -11,15 +11,15 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiFormRow, EuiSuperSelect, EuiToolTip } from '@elastic/eui';
 
-enum LegendSizes {
+export enum LegendSizes {
   AUTO = '0',
   SMALL = '80',
   MEDIUM = '130',
   LARGE = '180',
   EXTRA_LARGE = '230',
 }
 
-const DEFAULT_LEGEND_SIZE = LegendSizes.MEDIUM;
+export const DEFAULT_LEGEND_SIZE = Number(LegendSizes.MEDIUM);
 
 const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
   {
@@ -78,16 +78,32 @@ export const LegendSizeSettings = ({
   }, [isVerticalLegend, legendSize, onLegendSizeChange]);
 
   const onLegendSizeOptionChange = useCallback(
-    (option) => onLegendSizeChange(Number(option) || undefined),
+    (option) => onLegendSizeChange(option === DEFAULT_LEGEND_SIZE ? undefined : Number(option)),
     [onLegendSizeChange]
   );
 
+  const options =
+    legendSize?.toString() !== LegendSizes.AUTO
+      ? legendSizeOptions
+      : [
+          {
+            value: LegendSizes.AUTO.toString(),
+            inputDisplay: i18n.translate(
+              'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.auto',
+              {
+                defaultMessage: 'Auto',
+              }
+            ),
+          },
+          ...legendSizeOptions,
+        ];
+
   const legendSizeSelect = (
     <EuiSuperSelect
       fullWidth
       compressed
-      valueOfSelected={legendSize?.toString() ?? DEFAULT_LEGEND_SIZE}
-      options={legendSizeOptions}
+      valueOfSelected={legendSize?.toString() || DEFAULT_LEGEND_SIZE.toString()}
+      options={options}
       onChange={onLegendSizeOptionChange}
       disabled={!isVerticalLegend}
     />