From e2c2418c56ff9f8d23df9ca17d272ad373f9dc48 Mon Sep 17 00:00:00 2001 From: dej611 Date: Tue, 1 Mar 2022 09:16:10 +0100 Subject: [PATCH 1/4] :bug: Push to the bottom embeddable creation to better handle lifecycles --- .../embeddable/embeddable_component.tsx | 55 ++++++++++++------- 1 file changed, 36 insertions(+), 19 deletions(-) diff --git a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx index 482a5b931ed78..5b498dcb8bf9f 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx +++ b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx @@ -10,7 +10,10 @@ import type { CoreStart, ThemeServiceStart } from 'kibana/public'; import type { Action, UiActionsStart } from 'src/plugins/ui_actions/public'; import type { Start as InspectorStartContract } from 'src/plugins/inspector/public'; import { EuiLoadingChart } from '@elastic/eui'; +// import useUnmount from 'react-use/lib/useUnmount'; +// import useOnmount from 'react-use/lib/useOnmount'; import { + EmbeddableFactory, EmbeddableInput, EmbeddableOutput, EmbeddablePanel, @@ -69,41 +72,48 @@ interface PluginsStartDependencies { } export function getEmbeddableComponent(core: CoreStart, plugins: PluginsStartDependencies) { + const { embeddable: embeddableStart, uiActions, inspector } = plugins; + const factory = embeddableStart.getEmbeddableFactory('lens')!; + const theme = core.theme; return (props: EmbeddableComponentProps) => { - const { embeddable: embeddableStart, uiActions, inspector } = plugins; - const factory = embeddableStart.getEmbeddableFactory('lens')!; const input = { ...props }; - const [embeddable, loading, error] = useEmbeddableFactory({ factory, input }); const hasActions = - Boolean(props.withDefaultActions) || (props.extraActions && props.extraActions?.length > 0); + Boolean(input.withDefaultActions) || (input.extraActions && input.extraActions?.length > 0); - const theme = core.theme; - - if (loading) { - return ; - } - - if (embeddable && hasActions) { + if (hasActions) { return ( } + factory={factory} uiActions={uiActions} inspector={inspector} actionPredicate={() => hasActions} input={input} theme={theme} - extraActions={props.extraActions} - withDefaultActions={props.withDefaultActions} + extraActions={input.extraActions} + withDefaultActions={input.withDefaultActions} /> ); } - - return ; + return ; }; } +function EmbeddableRootWrapper({ + factory, + input, +}: { + factory: EmbeddableFactory; + input: EmbeddableComponentProps; +}) { + const [embeddable, loading, error] = useEmbeddableFactory({ factory, input }); + if (loading) { + return ; + } + return ; +} + interface EmbeddablePanelWrapperProps { - embeddable: IEmbeddable; + factory: EmbeddableFactory; uiActions: PluginsStartDependencies['uiActions']; inspector: PluginsStartDependencies['inspector']; actionPredicate: (id: string) => boolean; @@ -114,7 +124,7 @@ interface EmbeddablePanelWrapperProps { } const EmbeddablePanelWrapper: FC = ({ - embeddable, + factory, uiActions, actionPredicate, inspector, @@ -123,10 +133,17 @@ const EmbeddablePanelWrapper: FC = ({ extraActions, withDefaultActions, }) => { + const [embeddable, loading] = useEmbeddableFactory({ factory, input }); useEffect(() => { - embeddable.updateInput(input); + if (embeddable) { + embeddable.updateInput(input); + } }, [embeddable, input]); + if (loading || !embeddable) { + return ; + } + return ( Date: Mon, 7 Mar 2022 12:48:27 +0100 Subject: [PATCH 2/4] Update x-pack/plugins/lens/public/embeddable/embeddable_component.tsx --- x-pack/plugins/lens/public/embeddable/embeddable_component.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx index 5b498dcb8bf9f..2ba0f7cd7d2c7 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx +++ b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx @@ -10,7 +10,6 @@ import type { CoreStart, ThemeServiceStart } from 'kibana/public'; import type { Action, UiActionsStart } from 'src/plugins/ui_actions/public'; import type { Start as InspectorStartContract } from 'src/plugins/inspector/public'; import { EuiLoadingChart } from '@elastic/eui'; -// import useUnmount from 'react-use/lib/useUnmount'; // import useOnmount from 'react-use/lib/useOnmount'; import { EmbeddableFactory, From 6f3e04d8e25d9c985e8d829f197c4b97f1288150 Mon Sep 17 00:00:00 2001 From: Marco Liberati Date: Mon, 7 Mar 2022 12:48:44 +0100 Subject: [PATCH 3/4] Update x-pack/plugins/lens/public/embeddable/embeddable_component.tsx --- x-pack/plugins/lens/public/embeddable/embeddable_component.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx index 2ba0f7cd7d2c7..e1acc90a40dbc 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx +++ b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx @@ -9,8 +9,6 @@ import React, { FC, useEffect } from 'react'; import type { CoreStart, ThemeServiceStart } from 'kibana/public'; import type { Action, UiActionsStart } from 'src/plugins/ui_actions/public'; import type { Start as InspectorStartContract } from 'src/plugins/inspector/public'; -import { EuiLoadingChart } from '@elastic/eui'; -// import useOnmount from 'react-use/lib/useOnmount'; import { EmbeddableFactory, EmbeddableInput, From fdab14da9309543490c31ba50670ea15a0055643 Mon Sep 17 00:00:00 2001 From: Marco Liberati Date: Mon, 7 Mar 2022 12:49:45 +0100 Subject: [PATCH 4/4] Update x-pack/plugins/lens/public/embeddable/embeddable_component.tsx --- x-pack/plugins/lens/public/embeddable/embeddable_component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx index e1acc90a40dbc..f44aef76ab83d 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx +++ b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx @@ -9,6 +9,7 @@ import React, { FC, useEffect } from 'react'; import type { CoreStart, ThemeServiceStart } from 'kibana/public'; import type { Action, UiActionsStart } from 'src/plugins/ui_actions/public'; import type { Start as InspectorStartContract } from 'src/plugins/inspector/public'; +import { EuiLoadingChart } from '@elastic/eui'; import { EmbeddableFactory, EmbeddableInput,