[Serialized State Only] Alerts embeddable serialized state only (#218684)

_This PR does not need to be reviewed by external teams. This PR merges
into a feature branch that Kibana presentation team is working on to
convert the embeddable framework to only expose serialized state. Your
team will be pinged for review once the work is complete and the final
PR opens that merges the feature branch into main._

## Summary

Converts the Alerts embeddable table to serialized state only

This embeddable is not in use yet. Testing requires uncommenting [this
line](f1eb019b7b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/plugin.ts (L36))
in the embeddable alerts table plugin.

src/platform/plugins/shared/dashboard/public/dashboard_api/panels_manager.ts

@@ -209,7 +209,7 @@ export function initializePanelsManager(
     layout$.next(await placeNewPanel(uuid, panelPackage, gridData));
 
     if (displaySuccessMessage) {
-      const title = (serializedState?.rawState as SerializedTitles).title;
+      const title = (serializedState?.rawState as SerializedTitles)?.title;
       coreServices.notifications.toasts.addSuccess({
         title: getPanelAddedSuccessString(title),
         'data-test-subj': 'addEmbeddableToDashboardSuccess',

x-pack/platform/plugins/shared/embeddable_alerts_table/public/factories/alerts_table_embeddable_factory.tsx

@@ -7,56 +7,66 @@
 
 import React from 'react';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
-import type { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
+import type { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import {
-  initializeTimeRange,
+  initializeTimeRangeManager,
   initializeTitleManager,
+  timeRangeComparators,
+  titleComparators,
   useFetchContext,
 } from '@kbn/presentation-publishing';
+import { initializeUnsavedChanges } from '@kbn/presentation-containers';
 import { AlertsTable } from '@kbn/response-ops-alerts-table';
 import { AlertActionsCell } from '@kbn/response-ops-alerts-table/components/alert_actions_cell';
 import { getTime } from '@kbn/data-plugin/common';
 import { ALERT_TIME_RANGE, TIMESTAMP } from '@kbn/rule-data-utils';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, map, merge } from 'rxjs';
 import type { EmbeddableAlertsTablePublicStartDependencies } from '../types';
 import { EMBEDDABLE_ALERTS_TABLE_ID, LOCAL_STORAGE_KEY_PREFIX } from '../constants';
-import type {
-  EmbeddableAlertsTableApi,
-  EmbeddableAlertsTableRuntimeState,
-  EmbeddableAlertsTableSerializedState,
-} from '../types';
+import type { EmbeddableAlertsTableApi, EmbeddableAlertsTableSerializedState } from '../types';
 
 export const getAlertsTableEmbeddableFactory = (
   core: CoreStart,
   deps: EmbeddableAlertsTablePublicStartDependencies
-): ReactEmbeddableFactory<
-  EmbeddableAlertsTableSerializedState,
-  EmbeddableAlertsTableRuntimeState,
-  EmbeddableAlertsTableApi
-> => ({
+): EmbeddableFactory<EmbeddableAlertsTableSerializedState, EmbeddableAlertsTableApi> => ({
   type: EMBEDDABLE_ALERTS_TABLE_ID,
-  deserializeState: (state) => {
-    return state.rawState;
-  },
-  buildEmbeddable: async (state, buildApi, uuid) => {
-    const timeRange = initializeTimeRange(state);
-    const titleManager = initializeTitleManager(state);
+  buildEmbeddable: async ({ initialState, finalizeApi, parentApi, uuid }) => {
+    const timeRangeManager = initializeTimeRangeManager(initialState?.rawState);
+    const titleManager = initializeTitleManager(initialState?.rawState ?? {});
     const queryLoading$ = new BehaviorSubject<boolean | undefined>(true);
     const { data, fieldFormats, licensing } = deps;
     const { http, application, notifications, settings } = core;
-    const api = buildApi(
-      {
-        ...timeRange.api,
-        ...titleManager.api,
-        dataLoading$: queryLoading$,
-        serializeState: () => {
-          return {
-            rawState: { ...titleManager.serialize(), ...timeRange.serialize() },
-          };
-        },
+
+    function serializeState() {
+      return {
+        rawState: { ...titleManager.getLatestState(), ...timeRangeManager.getLatestState() },
+      };
+    }
+
+    const unsavedChangesApi = initializeUnsavedChanges({
+      uuid,
+      parentApi,
+      anyStateChange$: merge(timeRangeManager.anyStateChange$, titleManager.anyStateChange$).pipe(
+        map(() => undefined)
+      ),
+      serializeState,
+      getComparators: () => ({
+        ...titleComparators,
+        ...timeRangeComparators,
+      }),
+      onReset: (lastSaved) => {
+        titleManager.reinitializeState(lastSaved?.rawState);
+        timeRangeManager.reinitializeState(lastSaved?.rawState);
       },
-      { ...titleManager.comparators, ...timeRange.comparators }
-    );
+    });
+
+    const api = finalizeApi({
+      ...timeRangeManager.api,
+      ...titleManager.api,
+      ...unsavedChangesApi,
+      dataLoading$: queryLoading$,
+      serializeState,
+    });
 
     return {
       api,

x-pack/platform/plugins/shared/embeddable_alerts_table/public/types.ts

@@ -42,7 +42,5 @@ export interface EmbeddableAlertsTablePublicStartDependencies {
 
 export type EmbeddableAlertsTableSerializedState = SerializedTitles & SerializedTimeRange;
 
-export type EmbeddableAlertsTableRuntimeState = EmbeddableAlertsTableSerializedState;
-
 export type EmbeddableAlertsTableApi = DefaultEmbeddableApi<EmbeddableAlertsTableSerializedState> &
   PublishesDataLoading;