[Lens] update default legend size to medium

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/pie_vis_function.test.ts

@@ -31,6 +31,7 @@ describe('interpreter/functions#pieVis', () => {
     addTooltip: true,
     legendDisplay: LegendDisplay.SHOW,
     legendPosition: 'right',
+    legendSize: 80,
     isDonut: true,
     emptySizeRatio: EmptySizeRatios.SMALL,
     nestedLegend: true,

src/plugins/chart_expressions/expression_partition_vis/common/types/expression_renderers.ts

@@ -84,6 +84,7 @@ export interface PieVisConfig extends VisCommonConfig {
   respectSourceOrder?: boolean;
   startFromSecondLargestSlice?: boolean;
   distinctColors?: boolean;
+  legendSize: number;
   nestedLegend: boolean;
 }
 

src/plugins/vis_default_editor/kibana.json

@@ -3,7 +3,16 @@
   "version": "kibana",
   "ui": true,
   "optionalPlugins": ["visualizations"],
-  "requiredBundles": ["unifiedSearch", "kibanaUtils", "kibanaReact", "data", "fieldFormats", "discover", "esUiShared"],
+  "requiredBundles": [
+    "unifiedSearch",
+    "kibanaUtils",
+    "kibanaReact",
+    "data",
+    "fieldFormats",
+    "discover",
+    "esUiShared",
+    "visualizations"
+  ],
   "owner": {
     "name": "Vis Editors",
     "githubTeam": "kibana-vis-editors"

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

@@ -0,0 +1,79 @@
+/*
+ * 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 { LegendSizeSettings } from './legend_size_settings';
+import { LegendSizes, DEFAULT_LEGEND_SIZE } from '@kbn/visualizations-plugin/public';
+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

@@ -10,27 +10,11 @@ import React, { useCallback, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiFormRow, EuiSuperSelect, EuiToolTip } from '@elastic/eui';
+import { LegendSizes, DEFAULT_LEGEND_SIZE } from '@kbn/visualizations-plugin/public';
 
-enum LegendSizes {
-  AUTO = '0',
-  SMALL = '80',
-  MEDIUM = '130',
-  LARGE = '180',
-  EXTRA_LARGE = '230',
-}
-
-const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
+const legendSizeOptions: Array<{ value: string; inputDisplay: string }> = [
   {
-    value: LegendSizes.AUTO,
-    inputDisplay: i18n.translate(
-      'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.auto',
-      {
-        defaultMessage: 'Auto',
-      }
-    ),
-  },
-  {
-    value: LegendSizes.SMALL,
+    value: LegendSizes.SMALL.toString(),
     inputDisplay: i18n.translate(
       'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.small',
       {
@@ -39,7 +23,7 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
     ),
   },
   {
-    value: LegendSizes.MEDIUM,
+    value: LegendSizes.MEDIUM.toString(),
     inputDisplay: i18n.translate(
       'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.medium',
       {
@@ -48,7 +32,7 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
     ),
   },
   {
-    value: LegendSizes.LARGE,
+    value: LegendSizes.LARGE.toString(),
     inputDisplay: i18n.translate(
       'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.large',
       {
@@ -57,7 +41,7 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
     ),
   },
   {
-    value: LegendSizes.EXTRA_LARGE,
+    value: LegendSizes.EXTRA_LARGE.toString(),
     inputDisplay: i18n.translate(
       'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.extraLarge',
       {
@@ -85,16 +69,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 !== 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() ?? LegendSizes.AUTO}
-      options={legendSizeOptions}
+      valueOfSelected={legendSize?.toString() || DEFAULT_LEGEND_SIZE.toString()}
+      options={options}
       onChange={onLegendSizeOptionChange}
       disabled={!isVerticalLegend}
     />

src/plugins/vis_types/heatmap/public/to_ast.ts

@@ -8,6 +8,7 @@
 
 import { VisToExpressionAst, getVisSchemas, SchemaConfig } from '@kbn/visualizations-plugin/public';
 import { buildExpression, buildExpressionFunction } from '@kbn/expressions-plugin/public';
+import { DEFAULT_LEGEND_SIZE } from '@kbn/visualizations-plugin/public';
 import { getStopsWithColorsFromRanges, getStopsWithColorsFromColorsNumber } from './utils/palette';
 import type { HeatmapVisParams } from './types';
 import { getEsaggsFn } from './to_ast_esaggs';
@@ -20,7 +21,7 @@ const prepareLegend = (params: HeatmapVisParams) => {
     position: params.legendPosition,
     shouldTruncate: params.truncateLegend ?? true,
     maxLines: params.maxLegendLines ?? 1,
-    legendSize: params.legendSize,
+    legendSize: params.legendSize ?? DEFAULT_LEGEND_SIZE,
   });
 
   return buildExpression([legend]);

src/plugins/vis_types/pie/public/to_ast.ts

@@ -7,7 +7,12 @@
  */
 
 import type { PaletteOutput } from '@kbn/coloring';
-import { getVisSchemas, VisToExpressionAst, SchemaConfig } from '@kbn/visualizations-plugin/public';
+import {
+  getVisSchemas,
+  VisToExpressionAst,
+  SchemaConfig,
+  DEFAULT_LEGEND_SIZE,
+} from '@kbn/visualizations-plugin/public';
 import { buildExpression, buildExpressionFunction } from '@kbn/expressions-plugin/public';
 import {
   PIE_VIS_EXPRESSION_NAME,
@@ -65,7 +70,7 @@ export const toExpressionAst: VisToExpressionAst<PartitionVisParams> = async (vi
     nestedLegend: vis.params?.nestedLegend ?? false,
     truncateLegend: vis.params.truncateLegend,
     maxLegendLines: vis.params.maxLegendLines,
-    legendSize: vis.params.legendSize,
+    legendSize: vis.params.legendSize ?? DEFAULT_LEGEND_SIZE,
     distinctColors: vis.params?.distinctColors,
     isDonut: vis.params.isDonut ?? false,
     emptySizeRatio: vis.params.emptySizeRatio,

src/plugins/vis_types/xy/public/to_ast.ts

@@ -13,6 +13,7 @@ import {
   getVisSchemas,
   DateHistogramParams,
   HistogramParams,
+  DEFAULT_LEGEND_SIZE,
 } from '@kbn/visualizations-plugin/public';
 import { buildExpression, buildExpressionFunction } from '@kbn/expressions-plugin/public';
 import { BUCKET_TYPES } from '@kbn/data-plugin/public';
@@ -210,7 +211,7 @@ export const toExpressionAst: VisToExpressionAst<VisParams> = async (vis, params
     addTimeMarker: vis.params.addTimeMarker,
     truncateLegend: vis.params.truncateLegend,
     maxLegendLines: vis.params.maxLegendLines,
-    legendSize: vis.params.legendSize,
+    legendSize: vis.params.legendSize ?? DEFAULT_LEGEND_SIZE,
     addLegend: vis.params.addLegend,
     addTooltip: vis.params.addTooltip,
     legendPosition: vis.params.legendPosition,

src/plugins/vis_types/xy/public/types/param.ts

@@ -165,7 +165,7 @@ export interface XYVisConfig {
   addTimeMarker: boolean;
   truncateLegend: boolean;
   maxLegendLines: number;
-  legendSize?: number;
+  legendSize: number;
   orderBucketsBySum?: boolean;
   labels: ExpressionValueLabel;
   thresholdLine: ExpressionValueThresholdLine;

src/plugins/visualizations/common/constants.ts

@@ -26,3 +26,13 @@ export const VisualizeConstants = {
   EDIT_BY_VALUE_PATH: '/edit_by_value',
   APP_ID: 'visualize',
 };
+
+export const LegendSizes = {
+  AUTO: 0,
+  SMALL: 80,
+  MEDIUM: 130,
+  LARGE: 180,
+  EXTRA_LARGE: 230,
+} as const;
+
+export const DEFAULT_LEGEND_SIZE = LegendSizes.MEDIUM;

src/plugins/visualizations/public/index.ts

@@ -56,6 +56,8 @@ export {
   VISUALIZE_ENABLE_LABS_SETTING,
   SAVED_OBJECTS_LIMIT_SETTING,
   SAVED_OBJECTS_PER_PAGE_SETTING,
+  LegendSizes,
+  DEFAULT_LEGEND_SIZE,
 } from '../common/constants';
 export type { SavedVisState, VisParams, Dimension } from '../common';
 export { prepareLogTable } from '../common';

src/plugins/visualizations/server/embeddable/make_visualize_embeddable_factory.ts

@@ -27,6 +27,7 @@ import {
   commonAddDropLastBucketIntoTSVBModel714Above,
   commonRemoveMarkdownLessFromTSVB,
   commonUpdatePieVisApi,
+  commonPreserveOldLegendSizeDefault,
 } from '../migrations/visualization_common_migrations';
 import { SerializedVis } from '../../common';
 
@@ -98,6 +99,11 @@ const byValueUpdatePieVisApi = (state: SerializableRecord) => ({
   savedVis: commonUpdatePieVisApi(state.savedVis),
 });
 
+const byValuePreserveOldLegendSizeDefault = (state: SerializableRecord) => ({
+  ...state,
+  savedVis: commonPreserveOldLegendSizeDefault(state.savedVis),
+});
+
 const getEmbeddedVisualizationSearchSourceMigrations = (
   searchSourceMigrations: MigrateFunctionsObject
 ) =>
@@ -145,6 +151,7 @@ export const makeVisualizeEmbeddableFactory =
             '7.17.0': (state) => flow(byValueAddDropLastBucketIntoTSVBModel714Above)(state),
             '8.0.0': (state) => flow(byValueRemoveMarkdownLessFromTSVB)(state),
             '8.1.0': (state) => flow(byValueUpdatePieVisApi)(state),
+            '8.3.0': (state) => flow(byValuePreserveOldLegendSizeDefault)(state),
           }
         ),
     };

src/plugins/visualizations/server/migrations/visualization_common_migrations.ts

@@ -215,3 +215,28 @@ export const commonUpdatePieVisApi = (visState: any) => {
 
   return visState;
 };
+
+export const commonPreserveOldLegendSizeDefault = (visState: any) => {
+  const autoLegendSize = 0;
+
+  const visualizationTypesWithLegends = [
+    'pie',
+    'area',
+    'histogram',
+    'horizontal_bar',
+    'line',
+    'heatmap',
+  ];
+
+  if (visualizationTypesWithLegends.includes(visState?.type)) {
+    return {
+      ...visState,
+      params: {
+        ...visState.params,
+        legendSize: visState.params.legendSize ?? autoLegendSize,
+      },
+    };
+  }
+
+  return visState;
+};