[8.18] [canvas] fix All embeddables rebuilt on refresh (#209677) (#209853)

# Backport This will backport the following commits from `main` to `8.18`: - [[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/sqren/backport)  Co-authored-by: Nathan Reese <reese.nathan@elastic.co>
2025-04-24 17:59:23 -04:00 · 2025-02-06 06:46:45 +11:00 · 2025-02-06 06:46:45 +11:00 · 4225d4db0f
commit 4225d4db0f
parent f7bb2f4769
4 changed files with 77 additions and 23 deletions
--- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
+++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
@ -8,10 +8,18 @@
 import { CoreStart } from '@kbn/core/public';
 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 {
@ -27,6 +35,8 @@ import { useGetAppContext } from './use_get_app_context';

 const { embeddable: strings } = RendererStrings;

+const children: Record<string, { setFilters: (filters: Filter[] | undefined) => void }> = {};
+
 const renderReactEmbeddable = ({
  type,
  uuid,
@ -45,7 +55,14 @@ 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
@ -69,6 +86,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);
+              }
+            },
+          };
+        }}
      />
    );
  };
@ -95,24 +128,30 @@ export const embeddableRendererFactory = (
    help: strings.getHelpDescription(),
    reuseDomNode: true,
    render: async (domNode, { input, embeddableType, canvasApi }, handlers) => {
-      const uniqueId = handlers.getElementId();
-      ReactDOM.render(
-        renderReactEmbeddable({
-          input,
-          handlers,
-          uuid: uniqueId,
-          type: embeddableType,
-          container: canvasApi,
-          core,
-        }),
-        domNode,
-        () => handlers.done()
-      );
+      const uuid = handlers.getElementId();
+      const api = children[uuid];
+      if (!api) {
+        ReactDOM.render(
+          renderReactEmbeddable({
+            input,
+            handlers,
+            uuid,
+            type: embeddableType,
+            container: canvasApi,
+            core,
+          }),
+          domNode,
+          () => handlers.done()
+        );

-      handlers.onDestroy(() => {
-        handlers.onEmbeddableDestroyed();
-        return ReactDOM.unmountComponentAtNode(domNode);
-      });
+        handlers.onDestroy(() => {
+          delete children[uuid];
+          handlers.onEmbeddableDestroyed();
+          return ReactDOM.unmountComponentAtNode(domNode);
+        });
+      } else {
+        api.setFilters(input.filters);
+      }
    },
  });
 };
--- a/x-pack/platform/plugins/private/canvas/public/components/hooks/use_canvas_api.tsx
+++ b/x-pack/platform/plugins/private/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/platform/plugins/private/canvas/public/components/workpad_header/refresh_control/refresh_control.component.tsx
+++ b/x-pack/platform/plugins/private/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/platform/plugins/private/canvas/types/embeddables.ts
+++ b/x-pack/platform/plugins/private/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;
+  };