[Lens] fix limits to format selector (#121294)

* test

* flatten the structure

* fix test

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/format_selector.test.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { FormatSelector } from './format_selector';
+import { act } from 'react-dom/test-utils';
+import { GenericIndexPatternColumn } from '../..';
+
+const bytesColumn: GenericIndexPatternColumn = {
+  label: 'Max of bytes',
+  dataType: 'number',
+  isBucketed: false,
+
+  // Private
+  operationType: 'max',
+  sourceField: 'bytes',
+  params: { format: { id: 'bytes' } },
+};
+
+const getDefaultProps = () => ({
+  onChange: jest.fn(),
+  selectedColumn: bytesColumn,
+});
+describe('FormatSelector', () => {
+  it('updates the format decimals', () => {
+    const props = getDefaultProps();
+    const component = shallow(<FormatSelector {...props} />);
+    act(() => {
+      component
+        .find('[data-test-subj="indexPattern-dimension-formatDecimals"]')
+        .simulate('change', {
+          currentTarget: { value: '10' },
+        });
+    });
+    expect(props.onChange).toBeCalledWith({ id: 'bytes', params: { decimals: 10 } });
+  });
+  it('updates the format decimals to upper range when input exceeds the range', () => {
+    const props = getDefaultProps();
+    const component = shallow(<FormatSelector {...props} />);
+    act(() => {
+      component
+        .find('[data-test-subj="indexPattern-dimension-formatDecimals"]')
+        .simulate('change', {
+          currentTarget: { value: '100' },
+        });
+    });
+    expect(props.onChange).toBeCalledWith({ id: 'bytes', params: { decimals: 15 } });
+  });
+  it('updates the format decimals to lower range when input is smaller than range', () => {
+    const props = getDefaultProps();
+    const component = shallow(<FormatSelector {...props} />);
+    act(() => {
+      component
+        .find('[data-test-subj="indexPattern-dimension-formatDecimals"]')
+        .simulate('change', {
+          currentTarget: { value: '-2' },
+        });
+    });
+    expect(props.onChange).toBeCalledWith({ id: 'bytes', params: { decimals: 0 } });
+  });
+});

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/format_selector.tsx

@@ -35,16 +35,23 @@ const defaultOption = {
   }),
 };
 
+const singleSelectionOption = { asPlainText: true };
+
+const label = i18n.translate('xpack.lens.indexPattern.columnFormatLabel', {
+  defaultMessage: 'Value format',
+});
+
+const decimalsLabel = i18n.translate('xpack.lens.indexPattern.decimalPlacesLabel', {
+  defaultMessage: 'Decimals',
+});
+
 interface FormatSelectorProps {
   selectedColumn: GenericIndexPatternColumn;
   onChange: (newFormat?: { id: string; params?: Record<string, unknown> }) => void;
 }
 
-interface State {
-  decimalPlaces: number;
-}
-
-const singleSelectionOption = { asPlainText: true };
+const RANGE_MIN = 0;
+const RANGE_MAX = 15;
 
 export function FormatSelector(props: FormatSelectorProps) {
   const { selectedColumn, onChange } = props;
@@ -53,21 +60,10 @@ export function FormatSelector(props: FormatSelectorProps) {
     'params' in selectedColumn && selectedColumn.params && 'format' in selectedColumn.params
       ? selectedColumn.params.format
       : undefined;
-  const [state, setState] = useState<State>({
-    decimalPlaces:
-      typeof currentFormat?.params?.decimals === 'number' ? currentFormat.params.decimals : 2,
-  });
+
+  const [decimals, setDecimals] = useState(currentFormat?.params?.decimals ?? 2);
 
   const selectedFormat = currentFormat?.id ? supportedFormats[currentFormat.id] : undefined;
-
-  const label = i18n.translate('xpack.lens.indexPattern.columnFormatLabel', {
-    defaultMessage: 'Value format',
-  });
-
-  const decimalsLabel = i18n.translate('xpack.lens.indexPattern.decimalPlacesLabel', {
-    defaultMessage: 'Decimals',
-  });
-
   const stableOptions = useMemo(
     () => [
       defaultOption,
@@ -91,10 +87,10 @@ export function FormatSelector(props: FormatSelectorProps) {
       }
       onChange({
         id: choices[0].value,
-        params: { decimals: state.decimalPlaces },
+        params: { decimals },
       });
     },
-    [onChange, state.decimalPlaces]
+    [onChange, decimals]
   );
 
   const currentOption = useMemo(
@@ -130,15 +126,17 @@ export function FormatSelector(props: FormatSelectorProps) {
               <EuiSpacer size="xs" />
               <EuiRange
                 showInput="inputWithPopover"
-                min={0}
-                max={20}
-                value={state.decimalPlaces}
+                value={decimals}
+                min={RANGE_MIN}
+                max={RANGE_MAX}
                 onChange={(e) => {
-                  setState({ decimalPlaces: Number(e.currentTarget.value) });
+                  const value = Number(e.currentTarget.value);
+                  setDecimals(value);
+                  const validatedValue = Math.min(RANGE_MAX, Math.max(RANGE_MIN, value));
                   onChange({
                     id: currentFormat.id,
                     params: {
-                      decimals: Number(e.currentTarget.value),
+                      decimals: validatedValue,
                     },
                   });
                 }}

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx

@@ -39,16 +39,6 @@ jest.mock('@elastic/eui', () => {
   };
 });
 
-// mocking random id generator function
-jest.mock('@elastic/eui', () => {
-  const original = jest.requireActual('@elastic/eui');
-
-  return {
-    ...original,
-    htmlIdGenerator: () => () => '',
-  };
-});
-
 const uiSettingsMock = {} as IUiSettingsClient;
 
 const defaultProps = {
@@ -1528,8 +1518,7 @@ describe('terms', () => {
       );
 
       const selection = instance.find(EuiButtonGroup);
-
-      expect(selection.prop('idSelected')).toEqual('asc');
+      expect(selection.prop('idSelected')).toContain('asc');
       expect(selection.prop('options').map(({ value }) => value)).toEqual(['asc', 'desc']);
     });