[8.16] [canvas] fix All embeddables rebuilt on refresh (#209677) (#209862)

# Backport This will backport the following commits from `main` to `8.16`: - [[canvas] fix All embeddables rebuilt on refresh (#209677)](https://github.com/elastic/kibana/pull/209677)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-23 09:19:04 -04:00 · 2025-02-05 14:33:25 -07:00 · 2025-02-05 14:33:25 -07:00 · 7bd84beb05
commit 7bd84beb05
parent baf44fa969
5 changed files with 80 additions and 26 deletions
--- a/packages/presentation/presentation_publishing/index.ts
+++ b/packages/presentation/presentation_publishing/index.ts
@ -35,6 +35,7 @@ export {
  initializeTimeRange,
  type SerializedTimeRange,
 } from './interfaces/fetch/initialize_time_range';
+export { apiPublishesReload, type PublishesReload } from './interfaces/fetch/publishes_reload';
 export {
  apiPublishesFilters,
  apiPublishesPartialUnifiedSearch,
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
@ -15,10 +15,18 @@ import {
  ReactEmbeddableRenderer,
 } from '@kbn/embeddable-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import ReactDOM from 'react-dom';
-import { useSearchApi } from '@kbn/presentation-publishing';
 import { omit } from 'lodash';
+import {
+  AggregateQuery,
+  COMPARE_ALL_OPTIONS,
+  Filter,
+  Query,
+  TimeRange,
+  onlyDisabledFiltersChanged,
+} from '@kbn/es-query';
+import { BehaviorSubject } from 'rxjs';
 import { CANVAS_EMBEDDABLE_CLASSNAME } from '../../../common/lib';
 import { RendererStrings } from '../../../i18n';
 import {
@ -35,11 +43,13 @@ import { embeddableService } from '../../../public/services/kibana_services';

 const { embeddable: strings } = RendererStrings;

-// registry of references to embeddables on the workpad
+// registry of references to legacy embeddables on the workpad
 const embeddablesRegistry: {
  [key: string]: IEmbeddable | Promise<IEmbeddable>;
 } = {};

+const children: Record<string, { setFilters: (filters: Filter[] | undefined) => void }> = {};
+
 const renderReactEmbeddable = ({
  type,
  uuid,
@ -58,7 +68,13 @@ const renderReactEmbeddable = ({
  // wrap in functional component to allow usage of hooks
  const RendererWrapper: FC<{}> = () => {
    const getAppContext = useGetAppContext(core);
-    const searchApi = useSearchApi({ filters: input.filters });
+    const searchApi = useMemo(() => {
+      return {
+        filters$: new BehaviorSubject<Filter[] | undefined>(input.filters),
+        query$: new BehaviorSubject<Query | AggregateQuery | undefined>(undefined),
+        timeRange$: new BehaviorSubject<TimeRange | undefined>(undefined),
+      };
+    }, []);

    return (
      <ReactEmbeddableRenderer
@ -82,6 +98,22 @@ const renderReactEmbeddable = ({
          );
          if (newExpression) handlers.onEmbeddableInputChange(newExpression);
        }}
+        onApiAvailable={(api) => {
+          children[uuid] = {
+            ...api,
+            setFilters: (filters: Filter[] | undefined) => {
+              if (
+                !onlyDisabledFiltersChanged(searchApi.filters$.getValue(), filters, {
+                  ...COMPARE_ALL_OPTIONS,
+                  // do not compare $state to avoid refreshing when filter is pinned/unpinned (which does not impact results)
+                  state: false,
+                })
+              ) {
+                searchApi.filters$.next(filters);
+              }
+            },
+          };
+        }}
      />
    );
  };
@ -138,26 +170,32 @@ export const embeddableRendererFactory = (
      );

      if (embeddableService.reactEmbeddableRegistryHasKey(embeddableType)) {
-        /**
-         * Prioritize React embeddables
-         */
-        ReactDOM.render(
-          renderReactEmbeddable({
-            input,
-            handlers,
-            uuid: uniqueId,
-            type: embeddableType,
-            container: canvasApi,
-            core,
-          }),
-          domNode,
-          () => handlers.done()
-        );
+        const api = children[uniqueId];
+        if (!api) {
+          /**
+           * Prioritize React embeddables
+           */
+          ReactDOM.render(
+            renderReactEmbeddable({
+              input,
+              handlers,
+              uuid: uniqueId,
+              type: embeddableType,
+              container: canvasApi,
+              core,
+            }),
+            domNode,
+            () => handlers.done()
+          );

-        handlers.onDestroy(() => {
-          handlers.onEmbeddableDestroyed();
-          return ReactDOM.unmountComponentAtNode(domNode);
-        });
+          handlers.onDestroy(() => {
+            delete children[uniqueId];
+            handlers.onEmbeddableDestroyed();
+            return ReactDOM.unmountComponentAtNode(domNode);
+          });
+        } else {
+          api.setFilters(input.filters);
+        }
      } else if (!embeddablesRegistry[uniqueId]) {
        /**
         * Handle legacy embeddables - embeddable does not exist in registry
--- a/x-pack/plugins/canvas/public/components/hooks/use_canvas_api.tsx
+++ b/x-pack/plugins/canvas/public/components/hooks/use_canvas_api.tsx
@ -7,7 +7,7 @@

 import { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';

 import { EmbeddableInput } from '@kbn/embeddable-plugin/common';
 import { ViewMode } from '@kbn/presentation-publishing';
@ -19,6 +19,8 @@ import { METRIC_TYPE, trackCanvasUiMetric } from '../../lib/ui_metric';
 import { addElement } from '../../state/actions/elements';
 import { getSelectedPage } from '../../state/selectors/workpad';

+const reload$ = new Subject<void>();
+
 export const useCanvasApi: () => CanvasContainerApi = () => {
  const selectedPageId = useSelector(getSelectedPage);
  const dispatch = useDispatch();
@ -38,6 +40,10 @@ 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,
--- a/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.component.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.component.tsx
@ -15,6 +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';

 const strings = {
  getRefreshAriaLabel: () =>
@ -30,7 +31,11 @@ const strings = {
 export const RefreshControl = () => {
  const dispatch = useDispatch();
  const inFlight = useSelector(getInFlight);
-  const doRefresh = useCallback(() => dispatch(fetchAllRenderables()), [dispatch]);
+  const canvasApi = useCanvasApi();
+  const doRefresh = useCallback(() => {
+    canvasApi.reload();
+    dispatch(fetchAllRenderables());
+  }, [canvasApi, dispatch]);

  return (
    <EuiToolTip
--- a/x-pack/plugins/canvas/types/embeddables.ts
+++ b/x-pack/plugins/canvas/types/embeddables.ts
@ -12,6 +12,7 @@ import type {
  HasAppContext,
  HasDisableTriggers,
  HasType,
+  PublishesReload,
  PublishesViewMode,
  PublishesUnifiedSearch,
 } from '@kbn/presentation-publishing';
@ -28,4 +29,7 @@ export type CanvasContainerApi = PublishesViewMode &
  HasDisableTriggers &
  HasType &
  HasSerializedChildState &
-  Partial<HasAppContext & PublishesUnifiedSearch>;
+  PublishesReload &
+  Partial<HasAppContext & PublishesUnifiedSearch> & {
+    reload: () => void;
+  };