[canvas] fix embeddables not refreshing on manual refresh or auto-refresh (elastic#221326)

Fixes elastic#221321

### test instructions
1) install sample web logs
2) import canvas saved object
https://github.com/nreese/notes/blob/master/empty-canvas-workpad-saved-object-export.ndjson
3) refresh kibana
4) open canvas and add map embeddable
5) open browser network tab
6) click "Refresh data" button. Verify map requests new data
7) open "View" menu. Click "Refresh data". Verify map requests new data
8) set auto internal to "5s". Verify map requests new data on each
interval

---------

Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit e937e91)

# Conflicts:
#	x-pack/platform/plugins/private/canvas/public/components/hooks/use_canvas_api.tsx
#	x-pack/plugins/canvas/types/embeddables.ts

Author: nreese

x-pack/platform/plugins/private/canvas/public/components/hooks/use_canvas_api.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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 { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { BehaviorSubject, Subject, of } from 'rxjs';
+
+import { SerializedPanelState, ViewMode } from '@kbn/presentation-publishing';
+
+import { embeddableInputToExpression } from '../../../canvas_plugin_src/renderers/embeddable/embeddable_input_to_expression';
+import { CanvasContainerApi } from '../../../types';
+import { METRIC_TYPE, trackCanvasUiMetric } from '../../lib/ui_metric';
+// @ts-expect-error unconverted file
+import { addElement } from '../../state/actions/elements';
+import { getSelectedPage } from '../../state/selectors/workpad';
+import { CANVAS_APP } from '../../../common/lib';
+import { coreServices } from '../../services/kibana_services';
+
+const reload$ = new Subject<void>();
+
+export function forceReload() {
+  reload$.next();
+}
+
+export const useCanvasApi: () => CanvasContainerApi = () => {
+  const selectedPageId = useSelector(getSelectedPage);
+  const dispatch = useDispatch();
+
+  const createNewEmbeddable = useCallback(
+    (type: string, embeddableInput: object) => {
+      if (trackCanvasUiMetric) {
+        trackCanvasUiMetric(METRIC_TYPE.CLICK, type);
+      }
+      if (embeddableInput) {
+        const expression = embeddableInputToExpression(embeddableInput, type, undefined, true);
+        dispatch(addElement(selectedPageId, { expression }));
+      }
+    },
+    [selectedPageId, dispatch]
+  );
+
+  const getCanvasApi = useCallback((): CanvasContainerApi => {
+    const panelStateMap: Record<string, BehaviorSubject<SerializedPanelState<object>>> = {};
+
+    function getSerializedStateForChild(childId: string) {
+      return panelStateMap[childId]?.value ?? { rawState: {} };
+    }
+
+    return {
+      getAppContext: () => ({
+        getCurrentPath: () => {
+          const urlToApp = coreServices.application.getUrlForApp(CANVAS_APP);
+          const inAppPath = window.location.pathname.replace(urlToApp, '');
+          return inAppPath + window.location.search + window.location.hash;
+        },
+        currentAppId: CANVAS_APP,
+      }),
+      reload$,
+      viewMode$: new BehaviorSubject<ViewMode>('edit'), // always in edit mode
+      addNewPanel: async ({
+        panelType,
+        serializedState,
+      }: {
+        panelType: string;
+        serializedState: SerializedPanelState<object>;
+      }) => {
+        createNewEmbeddable(panelType, serializedState.rawState);
+      },
+      disableTriggers: true,
+      // this is required to disable inline editing now enabled by default
+      canEditInline: false,
+      type: 'canvas',
+      getSerializedStateForChild,
+      lastSavedStateForChild$: (childId: string) => panelStateMap[childId] ?? of(undefined),
+      // Canvas auto saves so lastSavedState is the same as currentState
+      getLastSavedStateForChild: getSerializedStateForChild,
+      setSerializedStateForChild: (
+        childId: string,
+        serializePanelState: SerializedPanelState<object>
+      ) => {
+        if (!panelStateMap[childId]) {
+          panelStateMap[childId] = new BehaviorSubject(serializePanelState);
+          return;
+        }
+        panelStateMap[childId].next(serializePanelState);
+      },
+    } as CanvasContainerApi;
+  }, [createNewEmbeddable]);
+
+  return useMemo(() => getCanvasApi(), [getCanvasApi]);
+};

x-pack/plugins/canvas/public/components/workpad/workpad_shortcuts.component.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import { Shortcuts } from 'react-shortcuts';
 import { isTextInput } from '../../lib/is_text_input';
 import { Props } from './workpad.component';
+import { forceReload } from '../hooks/use_canvas_api';
 
 type ShortcutProps = Pick<
   Props,
@@ -69,7 +70,10 @@ export class WorkpadShortcuts extends React.Component<ShortcutProps> {
 
   // handle keypress events for editor events
   _keyMap: Shortcuts = {
-    REFRESH: this.props.fetchAllRenderables,
+    REFRESH: () => {
+      forceReload();
+      this.props.fetchAllRenderables();
+    },
     UNDO: this.props.undoHistory,
     REDO: this.props.redoHistory,
     GRID: () => this.props.setGrid(!this.props.grid),

x-pack/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.tsx

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 // @ts-expect-error no @types definition
 import { Shortcuts } from 'react-shortcuts';
 import { isTextInput } from '../../../lib/is_text_input';
+import { forceReload } from '../../hooks/use_canvas_api';
 
 interface ChildrenProps {
   isFullscreen: boolean;
@@ -64,7 +65,10 @@ export class FullscreenControl extends React.PureComponent<Props> {
 
   // handle keypress events for presentation events
   _keyMap: { [key: string]: (...args: any[]) => void } = {
-    REFRESH: this.props.fetchAllRenderables,
+    REFRESH: () => {
+      forceReload();
+      this.props.fetchAllRenderables();
+    },
     PREV: this.previousPage,
     NEXT: this.nextPage,
     FULLSCREEN: this._toggleFullscreen,

x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.component.tsx

@@ -15,7 +15,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { fetchAllRenderables } from '../../../state/actions/elements';
 import { getInFlight } from '../../../state/selectors/resolved_args';
 import { ToolTipShortcut } from '../../tool_tip_shortcut';
-import { useCanvasApi } from '../../hooks/use_canvas_api';
+import { forceReload } from '../../hooks/use_canvas_api';
 
 const strings = {
   getRefreshAriaLabel: () =>
@@ -31,11 +31,10 @@ const strings = {
 export const RefreshControl = () => {
   const dispatch = useDispatch();
   const inFlight = useSelector(getInFlight);
-  const canvasApi = useCanvasApi();
   const doRefresh = useCallback(() => {
-    canvasApi.reload();
+    forceReload();
     dispatch(fetchAllRenderables());
-  }, [canvasApi, dispatch]);
+  }, [dispatch]);
 
   return (
     <EuiToolTip

x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx

@@ -25,6 +25,7 @@ import {
 import { WorkpadRoutingContext } from '../../../routes/workpad';
 import { ViewMenu as Component, Props as ComponentProps } from './view_menu.component';
 import { getFitZoomScale } from './lib/get_fit_zoom_scale';
+import { forceReload } from '../../hooks/use_canvas_api';
 
 interface StateProps {
   zoomScale: number;
@@ -61,7 +62,10 @@ const mapStateToProps = (state: State) => {
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   setZoomScale: (scale: number) => dispatch(setZoomScale(scale)),
   setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
-  doRefresh: () => dispatch(fetchAllRenderables()),
+  doRefresh: () => {
+    forceReload();
+    dispatch(fetchAllRenderables());
+  },
 });
 
 const mergeProps = (

x-pack/plugins/canvas/public/routes/workpad/hooks/use_refresh_helper.ts

@@ -11,6 +11,7 @@ import { WorkpadRoutingContext } from '../workpad_routing_context';
 import { getInFlight } from '../../../state/selectors/resolved_args';
 // @ts-expect-error untyped local
 import { fetchAllRenderables } from '../../../state/actions/elements';
+import { forceReload } from '../../../components/hooks/use_canvas_api';
 
 export const useRefreshHelper = () => {
   const dispatch = useDispatch();
@@ -25,6 +26,7 @@ export const useRefreshHelper = () => {
 
     if (refreshInterval > 0 && !inFlight) {
       timer.current = window.setTimeout(() => {
+        forceReload();
         dispatch(fetchAllRenderables());
       }, refreshInterval);
     }

x-pack/plugins/canvas/types/embeddables.ts

@@ -30,6 +30,4 @@ export type CanvasContainerApi = PublishesViewMode &
   HasType &
   HasSerializedChildState &
   PublishesReload &
-  Partial<HasAppContext & PublishesUnifiedSearch> & {
-    reload: () => void;
-  };
+  Partial<HasAppContext & PublishesUnifiedSearch>;