[Vis: Default editor] Fix validation for bounds margin (#48216)

* Fix validation for bounds margin

* Update custom_extents_options.tsx

* Rename isValid property

* Revert boundsMargin type

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/validation_wrapper.tsx

@@ -29,7 +29,7 @@ interface ValidationWrapperProps<T> extends VisOptionsProps<T> {
 }
 
 interface Item {
-  valid: boolean;
+  isValid: boolean;
 }
 
 function ValidationWrapper<T = unknown>({
@@ -37,20 +37,17 @@ function ValidationWrapper<T = unknown>({
   ...rest
 }: ValidationWrapperProps<T>) {
   const [panelState, setPanelState] = useState({} as { [key: string]: Item });
-  const isPanelValid = Object.values(panelState).every(item => item.valid);
+  const isPanelValid = Object.values(panelState).every(item => item.isValid);
   const { setValidity } = rest;
 
-  const setValidityHandler = useCallback(
-    (paramName: string, isValid: boolean) => {
-      setPanelState({
-        ...panelState,
-        [paramName]: {
-          valid: isValid,
-        },
-      });
-    },
-    [panelState]
-  );
+  const setValidityHandler = useCallback((paramName: string, isValid: boolean) => {
+    setPanelState(state => ({
+      ...state,
+      [paramName]: {
+        isValid,
+      },
+    }));
+  }, []);
 
   useEffect(() => {
     setValidity(isPanelValid);

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.test.tsx

@@ -18,7 +18,7 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { CustomExtentsOptions, CustomExtentsOptionsProps } from './custom_extents_options';
 import { YExtents } from './y_extents';
 import { valueAxis } from './mocks';
@@ -55,23 +55,27 @@ describe('CustomExtentsOptions component', () => {
 
   describe('boundsMargin', () => {
     it('should set validity as true when value is positive', () => {
-      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
-      comp.find({ paramName: BOUNDS_MARGIN }).prop('setValue')(BOUNDS_MARGIN, 5);
+      defaultProps.axis.scale.boundsMargin = 5;
+      mount(<CustomExtentsOptions {...defaultProps} />);
 
       expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
     });
 
     it('should set validity as true when value is empty', () => {
-      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
-      comp.find({ paramName: BOUNDS_MARGIN }).prop('setValue')(BOUNDS_MARGIN, '');
+      const comp = mount(<CustomExtentsOptions {...defaultProps} />);
+      comp.setProps({
+        axis: { ...valueAxis, scale: { ...valueAxis.scale, boundsMargin: undefined } },
+      });
 
       expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
     });
 
     it('should set validity as false when value is negative', () => {
       defaultProps.axis.scale.defaultYExtents = true;
-      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
-      comp.find({ paramName: BOUNDS_MARGIN }).prop('setValue')(BOUNDS_MARGIN, -1);
+      const comp = mount(<CustomExtentsOptions {...defaultProps} />);
+      comp.setProps({
+        axis: { ...valueAxis, scale: { ...valueAxis.scale, boundsMargin: -1 } },
+      });
 
       expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, false);
     });
@@ -103,7 +107,6 @@ describe('CustomExtentsOptions component', () => {
       const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
       comp.find({ paramName: DEFAULT_Y_EXTENTS }).prop('setValue')(DEFAULT_Y_EXTENTS, false);
 
-      expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
       const newScale = {
         ...defaultProps.axis.scale,
         boundsMargin: undefined,

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { ValueAxis } from '../../../types';
@@ -38,21 +38,18 @@ function CustomExtentsOptions({
   setValueAxis,
   setValueAxisScale,
 }: CustomExtentsOptionsProps) {
-  const [isBoundsMarginValid, setIsBoundsMarginValid] = useState(true);
   const invalidBoundsMarginMessage = i18n.translate(
     'kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin',
     { defaultMessage: 'Bounds margin must be greater than or equal to 0.' }
   );
 
-  const setBoundsMargin = useCallback(
-    (paramName: 'boundsMargin', value: number | '') => {
-      const isValid = value === '' ? true : value >= 0;
-      setIsBoundsMarginValid(isValid);
-      setMultipleValidity('boundsMargin', isValid);
+  const isBoundsMarginValid =
+    !axis.scale.defaultYExtents || !axis.scale.boundsMargin || axis.scale.boundsMargin >= 0;
 
-      setValueAxisScale(paramName, value);
-    },
-    [setMultipleValidity, setValueAxisScale]
+  const setBoundsMargin = useCallback(
+    (paramName: 'boundsMargin', value: number | '') =>
+      setValueAxisScale(paramName, value === '' ? undefined : value),
+    [setValueAxisScale]
   );
 
   const onDefaultYExtentsChange = useCallback(
@@ -60,7 +57,6 @@ function CustomExtentsOptions({
       const scale = { ...axis.scale, [paramName]: value };
       if (!scale.defaultYExtents) {
         delete scale.boundsMargin;
-        setMultipleValidity('boundsMargin', true);
       }
       setValueAxis('scale', scale);
     },
@@ -79,6 +75,12 @@ function CustomExtentsOptions({
     [setValueAxis, axis.scale]
   );
 
+  useEffect(() => {
+    setMultipleValidity('boundsMargin', isBoundsMarginValid);
+
+    return () => setMultipleValidity('boundsMargin', true);
+  }, [isBoundsMarginValid, setMultipleValidity]);
+
   return (
     <>
       <SwitchOption

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/y_extents.tsx

@@ -80,7 +80,7 @@ function YExtents({ scale, setScale, setMultipleValidity }: YExtentsProps) {
     setMultipleValidity('yExtents', isValid);
 
     return () => setMultipleValidity('yExtents', true);
-  }, [isValid]);
+  }, [isValid, setMultipleValidity]);
 
   return (
     <EuiFormRow error={errors} isInvalid={!!errors.length} fullWidth compressed>