[Dashboard] Fix setState in embeddables

examples/embeddable_examples/public/app/presentation_container_example/components/presentation_container_example.tsx

@@ -94,7 +94,7 @@ export const PresentationContainerExample = ({ uiActions }: { uiActions: UiActio
         <EuiFlexItem grow={false}>
           <TopNav
             onSave={componentApi.onSave}
-            resetUnsavedChanges={pageApi.resetUnsavedChanges}
+            onReset={componentApi.onReset}
             hasUnsavedChanges$={pageApi.hasUnsavedChanges$}
           />
         </EuiFlexItem>

examples/embeddable_examples/public/app/presentation_container_example/components/top_nav.tsx

@@ -14,7 +14,7 @@ import type { PublishesUnsavedChanges } from '@kbn/presentation-publishing';
 
 interface Props {
   onSave: () => Promise<void>;
-  resetUnsavedChanges: PublishesUnsavedChanges['resetUnsavedChanges'];
+  onReset: () => void;
   hasUnsavedChanges$: PublishesUnsavedChanges['hasUnsavedChanges$'];
 }
 
@@ -40,7 +40,7 @@ export function TopNav(props: Props) {
             <EuiBadge color="warning">Unsaved changes</EuiBadge>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty disabled={isSaving} onClick={props.resetUnsavedChanges}>
+            <EuiButtonEmpty disabled={isSaving} onClick={props.onReset}>
               Reset
             </EuiButtonEmpty>
           </EuiFlexItem>

examples/embeddable_examples/public/app/presentation_container_example/page_api.ts

@@ -20,7 +20,6 @@ import type {
 import {
   apiHasSerializableState,
   apiPublishesDataLoading,
-  apiPublishesUnsavedChanges,
   childrenUnsavedChanges$,
   combineCompatibleChildrenApis,
 } from '@kbn/presentation-publishing';
@@ -156,6 +155,31 @@ export function getPageApi() {
     unsavedChangesSessionStorage.save(serializePage());
   });
 
+  const applySerializedState = (state?: PageState) => {
+    const nextState = state ?? initialState;
+    timeRange$.next(nextState.timeRange);
+    const { layout: nextLayout, childState: nextChildState } = deserializePanels(nextState.panels);
+    layout$.next(nextLayout);
+    currentChildState = nextChildState;
+    let childrenModified = false;
+    const currentChildren = { ...children$.value };
+    for (const uuid of Object.keys(currentChildren)) {
+      const existsInNextLayout = nextLayout.some(({ id }) => id === uuid);
+      if (existsInNextLayout) {
+        const child = currentChildren[uuid];
+        if (apiHasSerializableState(child)) {
+          void child.applySerializedState(nextChildState[uuid]);
+        }
+      } else {
+        // if reset resulted in panel removal, we need to update the list of children
+        delete currentChildren[uuid];
+        delete currentChildState[uuid];
+        childrenModified = true;
+      }
+    }
+    if (childrenModified) children$.next(currentChildren);
+  };
+
   return {
     cleanUp: () => {
       childrenDataLoadingSubscripiton.unsubscribe();
@@ -176,6 +200,9 @@ export function getPageApi() {
         lastSavedStateSessionStorage.save(serializedPage);
         unsavedChangesSessionStorage.clear();
       },
+      onReset: () => {
+        applySerializedState(lastSavedState$.value);
+      },
       layout$,
       setChild: (id: string, api: unknown) => {
         children$.next({
@@ -219,30 +246,8 @@ export function getPageApi() {
       lastSavedStateForChild$: (panelId: string) =>
         lastSavedState$.pipe(map(() => getLastSavedStateForChild(panelId))),
       getLastSavedStateForChild,
-      resetUnsavedChanges: () => {
-        const lastSavedState = lastSavedState$.value;
-        timeRange$.next(lastSavedState.timeRange);
-        const { layout: lastSavedLayout, childState: lastSavedChildState } = deserializePanels(
-          lastSavedState.panels
-        );
-        layout$.next(lastSavedLayout);
-        currentChildState = lastSavedChildState;
-        let childrenModified = false;
-        const currentChildren = { ...children$.value };
-        for (const uuid of Object.keys(currentChildren)) {
-          const existsInLastSavedLayout = lastSavedLayout.some(({ id }) => id === uuid);
-          if (existsInLastSavedLayout) {
-            const child = currentChildren[uuid];
-            if (apiPublishesUnsavedChanges(child)) child.resetUnsavedChanges();
-          } else {
-            // if reset resulted in panel removal, we need to update the list of children
-            delete currentChildren[uuid];
-            delete currentChildState[uuid];
-            childrenModified = true;
-          }
-        }
-        if (childrenModified) children$.next(currentChildren);
-      },
+      serializeState: serializePage,
+      applySerializedState,
       timeRange$,
       hasUnsavedChanges$,
     } as PageApi,

examples/embeddable_examples/public/app/state_management_example/state_management_example.tsx

@@ -134,7 +134,9 @@ export const StateManagementExample = ({ uiActions }: { uiActions: UiActionsStar
               <EuiButtonEmpty
                 disabled={!bookApi}
                 onClick={() => {
-                  bookApi?.resetUnsavedChanges();
+                  bookApi?.applySerializedState(
+                    parentApi.getLastSavedStateForChild(BOOK_EMBEDDABLE_ID) as BookEmbeddableState
+                  );
                 }}
               >
                 Reset

examples/embeddable_examples/public/react_embeddables/field_list/field_list_embeddable.tsx

@@ -109,15 +109,15 @@ export const getFieldListFactory = (
           })
       );
 
-      function serializeState() {
+      function serializeState(): FieldListSerializedState {
         const { dataViews: selectedDataViews, ...rest } = fieldListStateManager.getLatestState();
         return {
           ...titleManager.getLatestState(),
           ...rest,
         };
       }
 
-      const unsavedChangesApi = initializeUnsavedChanges({
+      const unsavedChangesApi = initializeUnsavedChanges<FieldListSerializedState>({
         uuid,
         parentApi,
         serializeState,

examples/portable_dashboards_example/public/filter_debugger_embeddable.tsx

@@ -22,6 +22,7 @@ export const factory: EmbeddableFactory<{}, Api> = {
   buildEmbeddable: async ({ finalizeApi, parentApi }) => {
     const api = finalizeApi({
       serializeState: () => ({}),
+      applySerializedState: () => undefined,
     });
 
     return {

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.test.tsx

@@ -55,6 +55,7 @@ const mockOptionsListFactory: EmbeddableFactory<{ type: typeof OPTIONS_LIST_CONT
       serializeState: () => ({
         type: OPTIONS_LIST_CONTROL,
       }),
+      applySerializedState: () => undefined,
     });
     return {
       Component: () => <div data-test-subj="optionsListControl">Options list control</div>,

src/platform/packages/shared/controls/control-group-renderer/src/control_group_renderer.test.tsx

@@ -14,7 +14,7 @@ import {
   type EmbeddableFactory,
 } from '@kbn/embeddable-plugin/public/react_embeddable_system';
 import type { Filter } from '@kbn/es-query';
-import type { PublishesUnsavedChanges } from '@kbn/presentation-publishing';
+import type { HasSerializableState } from '@kbn/presentation-publishing';
 import { act, render, waitFor } from '@testing-library/react';
 
 import { BehaviorSubject } from 'rxjs';
@@ -44,13 +44,13 @@ const getTestEmbeddableFactory = () =>
         serializeState: () => ({
           selection: initialState.selection,
         }),
+        applySerializedState: jest.fn(),
       });
       return {
         Component: () => <div data-test-subj="testControl">{initialState.selection}</div>,
         api: {
           ...api,
           hasUnsavedChanges$: new BehaviorSubject(false),
-          resetUnsavedChanges: jest.fn(),
         },
       };
     },
@@ -87,7 +87,7 @@ describe('control group renderer', () => {
     return { component, api: controlGroupApi! as ControlGroupRendererApi };
   };
 
-  test('calling `updateInput` forces each child to be reset', async () => {
+  test('calling `updateInput` applies the updated child state', async () => {
     const { api } = await mountControlGroupRenderer({
       getCreationOptions: jest.fn().mockResolvedValue({
         initialState: {
@@ -99,9 +99,9 @@ describe('control group renderer', () => {
         },
       }),
     });
-    const resetSpy = jest.spyOn(
-      api.children$.getValue().test as PublishesUnsavedChanges,
-      'resetUnsavedChanges'
+    const applySpy = jest.spyOn(
+      api.children$.getValue().test as HasSerializableState,
+      'applySerializedState'
     );
     act(() =>
       api.updateInput({
@@ -114,7 +114,10 @@ describe('control group renderer', () => {
       })
     );
 
-    expect(resetSpy).toBeCalledTimes(1);
+    expect(applySpy).toBeCalledWith({
+      type: 'testControl',
+      selection: 'test selection',
+    });
   });
 
   test('filter changes are dispatched to control parent API if they are different', async () => {

src/platform/packages/shared/controls/control-group-renderer/src/control_group_renderer.tsx

@@ -22,7 +22,7 @@ import { ControlsRenderer, type ControlsRendererParentApi } from '@kbn/controls-
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import {
-  apiPublishesUnsavedChanges,
+  apiHasSerializableState,
   useSearchApi,
   type EmbeddableApiContext,
   type ViewMode,
@@ -172,17 +172,15 @@ export const ControlGroupRenderer = ({
       getInput$: () => input$,
       getInput: () => input$.value,
       updateInput: (newInput: Partial<ControlGroupRuntimeState>) => {
-        /** Set the last saved state to the new input and then reset each child to this state */
-        const newState = lastSavedState$Ref.current.getValue();
+        const newState = { ...lastSavedState$Ref.current.getValue() };
         Object.entries(newInput.initialChildControlState ?? {}).forEach(([id, control]) => {
           newState[id] = {
             ...lastSavedState$Ref.current.value[id],
             ...control,
           };
         });
-        lastSavedState$Ref.current.next(newState);
-        asyncForEach(Object.values(parentApi.children$.getValue()), async (child) => {
-          if (apiPublishesUnsavedChanges(child)) child.resetUnsavedChanges();
+        asyncForEach(Object.entries(parentApi.children$.getValue()), async ([id, child]) => {
+          if (apiHasSerializableState(child)) child.applySerializedState(newState[id]);
         });
       },
     };

src/platform/packages/shared/kbn-esql-utils/src/utils/get_esql_controls.test.ts

@@ -42,6 +42,7 @@ const createControlApi = (
   uuid,
   type,
   serializeState: () => state,
+  applySerializedState: () => undefined,
 });
 
 describe('getEsqlControls', () => {

src/platform/packages/shared/presentation/presentation_publishing/interfaces/containers/unsaved_changes/children_unsaved_changes.test.ts

@@ -15,12 +15,10 @@ describe('childrenUnsavedChanges$', () => {
   const child1Api = {
     uuid: 'child1',
     hasUnsavedChanges$: new BehaviorSubject<boolean>(false),
-    resetUnsavedChanges: () => undefined,
   };
   const child2Api = {
     uuid: 'child2',
     hasUnsavedChanges$: new BehaviorSubject<boolean>(false),
-    resetUnsavedChanges: () => undefined,
   };
   const children$ = new BehaviorSubject<{ [key: string]: unknown }>({});
   const onFireMock = jest.fn();
@@ -118,7 +116,6 @@ describe('childrenUnsavedChanges$', () => {
       child3: {
         uuid: 'child3',
         hasUnsavedChanges$: new BehaviorSubject<boolean>(true),
-        resetUnsavedChanges: () => undefined,
       },
     });
 

src/platform/packages/shared/presentation/presentation_publishing/interfaces/containers/unsaved_changes/initialize_unsaved_changes.ts

@@ -10,6 +10,7 @@
 import type { Observable } from 'rxjs';
 import type { MaybePromise } from '@kbn/utility-types';
 import { combineLatestWith, debounceTime, map, of } from 'rxjs';
+import type { HasSerializableState } from '../../has_serializable_state';
 import type { PublishesUnsavedChanges } from '../../publishes_unsaved_changes';
 import { type StateComparators, areComparatorsEqual } from '../../../state_manager';
 import { getTitle } from '../../titles/publishes_title';
@@ -33,13 +34,17 @@ export const initializeUnsavedChanges = <StateType extends object = object>({
   serializeState: () => StateType;
   getComparators: () => StateComparators<StateType>;
   defaultState?: Partial<StateType>;
-  onReset: (lastSavedPanelState?: StateType) => MaybePromise<void>;
+  onReset?: (lastSavedPanelState?: StateType) => MaybePromise<void>;
   checkRefEquality?: boolean;
-}): PublishesUnsavedChanges => {
+}): PublishesUnsavedChanges & Pick<HasSerializableState<StateType>, 'applySerializedState'> => {
+  const applySerializedState = async (state?: StateType) => {
+    await onReset?.(state);
+  };
+
   if (!apiHasLastSavedChildState<StateType>(parentApi)) {
     return {
+      applySerializedState,
       hasUnsavedChanges$: of(false),
-      resetUnsavedChanges: () => Promise.resolve(),
     };
   }
 
@@ -67,10 +72,5 @@ export const initializeUnsavedChanges = <StateType extends object = object>({
     })
   );
 
-  const resetUnsavedChanges = async () => {
-    const lastSavedState = parentApi.getLastSavedStateForChild(uuid);
-    await onReset(lastSavedState);
-  };
-
-  return { hasUnsavedChanges$, resetUnsavedChanges };
+  return { applySerializedState, hasUnsavedChanges$ };
 };

src/platform/packages/shared/presentation/presentation_publishing/interfaces/has_serializable_state.ts

@@ -7,14 +7,24 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { MaybePromise } from '@kbn/utility-types';
+
 export interface HasSerializableState<SerializedState extends object = object> {
   /**
    * Serializes all state into a format that can be saved into
    * some external store. The opposite of `deserialize` in the {@link ReactEmbeddableFactory}
    */
   serializeState: () => SerializedState;
+
+  /**
+   * Applies a serialized state snapshot owned by the parent container.
+   */
+  applySerializedState: (state?: SerializedState) => MaybePromise<void>;
 }
 
 export const apiHasSerializableState = (api: unknown | null): api is HasSerializableState => {
-  return Boolean((api as HasSerializableState)?.serializeState);
+  return Boolean(
+    (api as HasSerializableState)?.serializeState &&
+      (api as HasSerializableState)?.applySerializedState
+  );
 };

src/platform/packages/shared/presentation/presentation_publishing/interfaces/publishes_unsaved_changes.ts

@@ -7,18 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { MaybePromise } from '@kbn/utility-types';
 import type { Observable } from 'rxjs';
 
 export interface PublishesUnsavedChanges {
   hasUnsavedChanges$: Observable<boolean>; // Observable rather than publishingSubject because it should be derived.
-  resetUnsavedChanges: () => MaybePromise<void>;
 }
 
 export const apiPublishesUnsavedChanges = (api: unknown): api is PublishesUnsavedChanges => {
-  return Boolean(
-    api &&
-      (api as PublishesUnsavedChanges).hasUnsavedChanges$ &&
-      (api as PublishesUnsavedChanges).resetUnsavedChanges
-  );
+  return Boolean(api && (api as PublishesUnsavedChanges).hasUnsavedChanges$);
 };

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/get_options_list_control_factory.tsx

@@ -22,11 +22,7 @@ import {
 } from 'rxjs';
 
 import { OPTIONS_LIST_CONTROL, DEFAULT_DSL_OPTIONS_LIST_STATE } from '@kbn/controls-constants';
-import type {
-  OptionsListSelection,
-  OptionsListControlState,
-  OptionsListDSLControlState,
-} from '@kbn/controls-schemas';
+import type { OptionsListSelection, OptionsListControlState } from '@kbn/controls-schemas';
 import type { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import {
   apiHasPinnedPanels,
@@ -239,7 +235,7 @@ export const getOptionsListControlFactory = (): EmbeddableFactory<
           }
         );
 
-      function serializeState(): OptionsListDSLControlState {
+      function serializeState(): OptionsListControlState {
         return {
           ...dataControlManager.getLatestState(),
           ...selectionsManager.getLatestState(),
@@ -250,7 +246,7 @@ export const getOptionsListControlFactory = (): EmbeddableFactory<
         };
       }
 
-      const unsavedChangesApi = initializeUnsavedChanges<OptionsListDSLControlState>({
+      const unsavedChangesApi = initializeUnsavedChanges<OptionsListControlState>({
         uuid,
         parentApi,
         serializeState,

src/platform/plugins/shared/controls/public/controls/timeslider_control/get_timeslider_control_factory.test.tsx

@@ -269,7 +269,7 @@ describe('TimeSliderControlApi', () => {
     expect(new Date(api.appliedTimeslice$.value![1]).toISOString()).toEqual(
       '2024-06-09T18:00:00.000Z'
     );
-    await api.resetUnsavedChanges();
+    await api.applySerializedState(controlState);
 
     await new Promise((resolve) => setTimeout(resolve, 0));
     expect(new Date(api.appliedTimeslice$.value![0]).toISOString()).toEqual(