[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/plugins/canvas/public/components/hooks/use_canvas_api.tsx

@@ -21,6 +21,10 @@ import { getSelectedPage } from '../../state/selectors/workpad';
 
 const reload$ = new Subject<void>();
 
+export function forceReload() {
+  reload$.next();
+}
+
 export const useCanvasApi: () => CanvasContainerApi = () => {
   const selectedPageId = useSelector(getSelectedPage);
   const dispatch = useDispatch();
@@ -41,9 +45,6 @@ export const useCanvasApi: () => CanvasContainerApi = () => {
   const getCanvasApi = useCallback((): CanvasContainerApi => {
     return {
       reload$,
-      reload: () => {
-        reload$.next();
-      },
       viewMode: new BehaviorSubject<ViewMode>('edit'), // always in edit mode
       addNewPanel: async ({
         panelType,

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>;