[8.13] [dashboard] fix console error "Panel not found" when…

… linking or unlinking panel to library (#178464) (#178590) # Backport This will backport the following commits from `main` to `8.13`: - [[dashboard] fix console error "Panel not found" when linking or unlinking panel to library (#178464)](#178464)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Nathan Reese <reese.nathan@elastic.co>
elastic · Mar 13, 2024 · 6f8e044 · 6f8e044
1 parent 5950c69
commit 6f8e044
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/src/plugins/embeddable/public/embeddable_panel/embeddable_panel.tsx b/src/plugins/embeddable/public/embeddable_panel/embeddable_panel.tsx
@@ -10,17 +10,21 @@ import { css } from '@emotion/react';
 import { PresentationPanel } from '@kbn/presentation-panel-plugin/public';
 import { PanelCompatibleComponent } from '@kbn/presentation-panel-plugin/public/panel_component/types';
 import { isPromise } from '@kbn/std';
-import React, { ReactNode, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import React, { ReactNode, useEffect, useImperativeHandle, useMemo, useState, useRef } from 'react';
 import { untilPluginStartServicesReady } from '../kibana_services';
 import { EmbeddablePanelProps } from './types';
 
 const getComponentFromEmbeddable = async (
-  embeddable: EmbeddablePanelProps['embeddable']
-): Promise<PanelCompatibleComponent> => {
+  embeddable: EmbeddablePanelProps['embeddable'],
+  isMounted: () => boolean
+): Promise<PanelCompatibleComponent | null> => {
   const startServicesPromise = untilPluginStartServicesReady();
   const embeddablePromise =
     typeof embeddable === 'function' ? embeddable() : Promise.resolve(embeddable);
   const [, unwrappedEmbeddable] = await Promise.all([startServicesPromise, embeddablePromise]);
+  if (!isMounted()) {
+    return null;
+  }
   if (unwrappedEmbeddable.parent) {
     await unwrappedEmbeddable.parent.untilEmbeddableLoaded(unwrappedEmbeddable.id);
   }
@@ -55,9 +59,33 @@ const getComponentFromEmbeddable = async (
 
 /**
  * Loads and renders a legacy embeddable.
+ *
+ * Ancestry chain must use 'key' attribute to reset DOM and state when embeddable changes
+ * For example <Parent key={embeddableId}><EmbeddablePanel/></Parent>
  */
 export const EmbeddablePanel = (props: EmbeddablePanelProps) => {
+  // can not use useMountedState
+  // 1. useMountedState defaults mountedRef to false and sets mountedRef to true in useEffect
+  // 2. embeddable can be an object or a function that returns a promise
+  // 3. when embeddable is an object, Promise.resolve(embeddable) returns before
+  //    useMountedState useEffect is called and thus isMounted() returns false when component has not been unmounted
+  const mountedRef = useRef<boolean>(true);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const isMounted = () => {
+    return mountedRef.current;
+  };
   const { embeddable, ...passThroughProps } = props;
-  const componentPromise = useMemo(() => getComponentFromEmbeddable(embeddable), [embeddable]);
+  const componentPromise = useMemo(
+    () => getComponentFromEmbeddable(embeddable, isMounted),
+    // Ancestry chain is expected to use 'key' attribute to reset DOM and state
+    // when embeddable needs to be re-loaded
+    // empty array is consistent with PresentationPanel useAsync dependency check
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   return <PresentationPanel {...passThroughProps} Component={componentPromise} />;
 };
diff --git a/src/plugins/presentation_panel/public/panel_component/presentation_panel.tsx b/src/plugins/presentation_panel/public/panel_component/presentation_panel.tsx
@@ -36,6 +36,8 @@ export const PresentationPanel = <
     ]);
     const Panel = panelModule.PresentationPanelInternal;
     return { Panel, unwrappedComponent };
+    // Ancestry chain is expected to use 'key' attribute to reset DOM and state
+    // when unwrappedComponent needs to be re-loaded
   }, []);
 
   if (error || (!loading && (!value?.Panel || !value?.unwrappedComponent))) {

diff --git a/src/plugins/presentation_panel/public/panel_component/types.ts b/src/plugins/presentation_panel/public/panel_component/types.ts
@@ -77,5 +77,5 @@ export type PresentationPanelProps<
   ApiType extends DefaultPresentationPanelApi = DefaultPresentationPanelApi,
   PropsType extends {} = {}
 > = Omit<PresentationPanelInternalProps<ApiType, PropsType>, 'Component'> & {
-  Component: MaybePromise<PanelCompatibleComponent<ApiType, PropsType>>;
+  Component: MaybePromise<PanelCompatibleComponent<ApiType, PropsType> | null>;
 };