[Embeddables Rebuild] [Range Slider] fix invalid step size by default (#187721)

Fixes https://github.com/elastic/kibana/issues/187380

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

examples/controls_example/public/react_controls/control_group/serialization_utils.ts

@@ -10,7 +10,7 @@ import { Reference } from '@kbn/content-management-utils';
 import { DEFAULT_CONTROL_GROW, DEFAULT_CONTROL_WIDTH } from '@kbn/controls-plugin/common';
 import { SerializedPanelState } from '@kbn/presentation-containers';
 import { omit } from 'lodash';
-import { DefaultControlApi, DefaultControlState } from '../types';
+import { DefaultControlApi } from '../types';
 import { ControlGroupRuntimeState, ControlGroupSerializedState } from './types';
 
 export const deserializeControlGroup = (
@@ -75,7 +75,7 @@ export const serializeControlGroup = (
     const {
       rawState: { grow, width, ...rest },
       references: childReferences,
-    } = (child.serializeState as () => SerializedPanelState<DefaultControlState>)();
+    } = child.serializeState();
 
     if (childReferences && childReferences.length > 0) {
       references = [...references, ...childReferences];

examples/controls_example/public/react_controls/data_controls/range_slider/get_range_slider_control_factory.test.tsx

@@ -19,6 +19,7 @@ import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
 import { ControlApiRegistration } from '../../types';
 import { RangesliderControlApi, RangesliderControlState } from './types';
 import { StateComparators } from '@kbn/presentation-publishing';
+import { SerializedPanelState } from '@kbn/presentation-containers';
 
 const DEFAULT_TOTAL_RESULTS = 20;
 const DEFAULT_MIN = 0;
@@ -207,4 +208,35 @@ describe('RangesliderControlApi', () => {
       });
     });
   });
+
+  describe('step state', () => {
+    test('default value provided when state.step is undefined', () => {
+      const { api } = factory.buildControl(
+        {
+          dataViewId: 'myDataViewId',
+          fieldName: 'myFieldName',
+        },
+        buildApiMock,
+        uuid,
+        controlGroupApi
+      );
+      const serializedState = api.serializeState() as SerializedPanelState<RangesliderControlState>;
+      expect(serializedState.rawState.step).toBe(1);
+    });
+
+    test('retains value from initial state', () => {
+      const { api } = factory.buildControl(
+        {
+          dataViewId: 'myDataViewId',
+          fieldName: 'myFieldName',
+          step: 1024,
+        },
+        buildApiMock,
+        uuid,
+        controlGroupApi
+      );
+      const serializedState = api.serializeState() as SerializedPanelState<RangesliderControlState>;
+      expect(serializedState.rawState.step).toBe(1024);
+    });
+  });
 });

examples/controls_example/public/react_controls/data_controls/range_slider/get_range_slider_control_factory.tsx

@@ -64,7 +64,7 @@ export const getRangesliderControlFactory = (
       const loadingMinMax$ = new BehaviorSubject<boolean>(false);
       const loadingHasNoResults$ = new BehaviorSubject<boolean>(false);
       const dataLoading$ = new BehaviorSubject<boolean | undefined>(undefined);
-      const step$ = new BehaviorSubject<number | undefined>(initialState.step);
+      const step$ = new BehaviorSubject<number | undefined>(initialState.step ?? 1);
       const value$ = new BehaviorSubject<RangeValue | undefined>(initialState.value);
       function setValue(nextValue: RangeValue | undefined) {
         value$.next(nextValue);

examples/controls_example/public/react_controls/types.ts

@@ -9,7 +9,7 @@
 import { BehaviorSubject } from 'rxjs';
 
 import { CanClearSelections, ControlWidth } from '@kbn/controls-plugin/public/types';
-import { HasSerializableState } from '@kbn/presentation-containers';
+import { SerializedPanelState } from '@kbn/presentation-containers';
 import { PanelCompatibleComponent } from '@kbn/presentation-panel-plugin/public/panel_component/types';
 import {
   HasParentApi,
@@ -43,8 +43,11 @@ export type DefaultControlApi = PublishesDataLoading &
   CanClearSelections &
   HasType &
   HasUniqueId &
-  HasSerializableState &
   HasParentApi<ControlGroupApi> & {
+    // Can not use HasSerializableState interface
+    // HasSerializableState types serializeState as function returning 'MaybePromise'
+    // Controls serializeState is sync
+    serializeState: () => SerializedPanelState<DefaultControlState>;
     /** TODO: Make these non-public as part of https://github.com/elastic/kibana/issues/174961 */
     setDataLoading: (loading: boolean) => void;
     setBlockingError: (error: Error | undefined) => void;