mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
remove reactEmbeddableRegistryHasKey usage from canvas (#203256)
Part of https://github.com/elastic/kibana/issues/203250 Removes `reactEmbeddableRegistryHasKey` usage from canvas --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
e706b6689d
commit
da93119780
1 changed files with 16 additions and 142 deletions
|
@ -6,14 +6,7 @@
|
|||
*/
|
||||
|
||||
import { CoreStart } from '@kbn/core/public';
|
||||
import {
|
||||
EmbeddableFactory,
|
||||
EmbeddableFactoryNotFoundError,
|
||||
EmbeddablePanel,
|
||||
IEmbeddable,
|
||||
isErrorEmbeddable,
|
||||
ReactEmbeddableRenderer,
|
||||
} from '@kbn/embeddable-plugin/public';
|
||||
import { ReactEmbeddableRenderer } from '@kbn/embeddable-plugin/public';
|
||||
import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
|
||||
import React, { FC } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
@ -31,15 +24,9 @@ import { EmbeddableExpression } from '../../expression_types/embeddable';
|
|||
import { StartDeps } from '../../plugin';
|
||||
import { embeddableInputToExpression } from './embeddable_input_to_expression';
|
||||
import { useGetAppContext } from './use_get_app_context';
|
||||
import { embeddableService } from '../../../public/services/kibana_services';
|
||||
|
||||
const { embeddable: strings } = RendererStrings;
|
||||
|
||||
// registry of references to embeddables on the workpad
|
||||
const embeddablesRegistry: {
|
||||
[key: string]: IEmbeddable | Promise<IEmbeddable>;
|
||||
} = {};
|
||||
|
||||
const renderReactEmbeddable = ({
|
||||
type,
|
||||
uuid,
|
||||
|
@ -98,34 +85,10 @@ const renderReactEmbeddable = ({
|
|||
);
|
||||
};
|
||||
|
||||
const renderEmbeddableFactory = (core: CoreStart, _plugins: StartDeps) => {
|
||||
const EmbeddableRenderer: FC<{ embeddable: IEmbeddable }> = ({ embeddable }) => {
|
||||
const getAppContext = useGetAppContext(core);
|
||||
|
||||
embeddable.getAppContext = getAppContext;
|
||||
|
||||
return <EmbeddablePanel embeddable={embeddable} />;
|
||||
};
|
||||
|
||||
return (embeddableObject: IEmbeddable) => {
|
||||
return (
|
||||
<KibanaRenderContextProvider {...core}>
|
||||
<div
|
||||
className={CANVAS_EMBEDDABLE_CLASSNAME}
|
||||
style={{ width: '100%', height: '100%', cursor: 'auto' }}
|
||||
>
|
||||
<EmbeddableRenderer embeddable={embeddableObject} />
|
||||
</div>
|
||||
</KibanaRenderContextProvider>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
export const embeddableRendererFactory = (
|
||||
core: CoreStart,
|
||||
plugins: StartDeps
|
||||
): RendererFactory<EmbeddableExpression<EmbeddableInput> & { canvasApi: CanvasContainerApi }> => {
|
||||
const renderEmbeddable = renderEmbeddableFactory(core, plugins);
|
||||
return () => ({
|
||||
name: 'embeddable',
|
||||
displayName: strings.getDisplayName(),
|
||||
|
@ -133,112 +96,23 @@ export const embeddableRendererFactory = (
|
|||
reuseDomNode: true,
|
||||
render: async (domNode, { input, embeddableType, canvasApi }, handlers) => {
|
||||
const uniqueId = handlers.getElementId();
|
||||
const isByValueEnabled = plugins.presentationUtil.labsService.isProjectEnabled(
|
||||
'labs:canvas:byValueEmbeddable'
|
||||
ReactDOM.render(
|
||||
renderReactEmbeddable({
|
||||
input,
|
||||
handlers,
|
||||
uuid: uniqueId,
|
||||
type: embeddableType,
|
||||
container: canvasApi,
|
||||
core,
|
||||
}),
|
||||
domNode,
|
||||
() => handlers.done()
|
||||
);
|
||||
|
||||
if (embeddableService.reactEmbeddableRegistryHasKey(embeddableType)) {
|
||||
/**
|
||||
* 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);
|
||||
});
|
||||
} else if (!embeddablesRegistry[uniqueId]) {
|
||||
/**
|
||||
* Handle legacy embeddables - embeddable does not exist in registry
|
||||
*/
|
||||
const factory = Array.from(plugins.embeddable.getEmbeddableFactories()).find(
|
||||
(embeddableFactory) => embeddableFactory.type === embeddableType
|
||||
) as EmbeddableFactory<EmbeddableInput>;
|
||||
|
||||
if (!factory) {
|
||||
handlers.done();
|
||||
throw new EmbeddableFactoryNotFoundError(embeddableType);
|
||||
}
|
||||
|
||||
const embeddableInput = {
|
||||
...input,
|
||||
id: uniqueId,
|
||||
executionContext: {
|
||||
type: 'canvas',
|
||||
},
|
||||
};
|
||||
|
||||
const embeddablePromise = input.savedObjectId
|
||||
? factory
|
||||
.createFromSavedObject(input.savedObjectId, embeddableInput)
|
||||
.then((embeddable) => {
|
||||
// stores embeddable in registrey
|
||||
embeddablesRegistry[uniqueId] = embeddable;
|
||||
return embeddable;
|
||||
})
|
||||
: factory.create(embeddableInput).then((embeddable) => {
|
||||
if (!embeddable || isErrorEmbeddable(embeddable)) {
|
||||
return;
|
||||
}
|
||||
// stores embeddable in registry
|
||||
embeddablesRegistry[uniqueId] = embeddable as IEmbeddable;
|
||||
return embeddable;
|
||||
});
|
||||
embeddablesRegistry[uniqueId] = embeddablePromise as Promise<IEmbeddable>;
|
||||
|
||||
const embeddableObject = (await (async () => embeddablePromise)()) as IEmbeddable;
|
||||
|
||||
const palettes = await plugins.charts.palettes.getPalettes();
|
||||
|
||||
embeddablesRegistry[uniqueId] = embeddableObject;
|
||||
ReactDOM.unmountComponentAtNode(domNode);
|
||||
|
||||
const subscription = embeddableObject.getInput$().subscribe(function (updatedInput) {
|
||||
const updatedExpression = embeddableInputToExpression(
|
||||
updatedInput,
|
||||
embeddableType,
|
||||
palettes,
|
||||
isByValueEnabled
|
||||
);
|
||||
|
||||
if (updatedExpression) {
|
||||
handlers.onEmbeddableInputChange(updatedExpression);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(renderEmbeddable(embeddableObject), domNode, () => handlers.done());
|
||||
|
||||
handlers.onDestroy(() => {
|
||||
subscription.unsubscribe();
|
||||
handlers.onEmbeddableDestroyed();
|
||||
|
||||
delete embeddablesRegistry[uniqueId];
|
||||
|
||||
return ReactDOM.unmountComponentAtNode(domNode);
|
||||
});
|
||||
} else {
|
||||
/**
|
||||
* Handle legacy embeddables - embeddable already exists in registry
|
||||
*/
|
||||
const embeddable = embeddablesRegistry[uniqueId];
|
||||
|
||||
// updating embeddable input with changes made to expression or filters
|
||||
if ('updateInput' in embeddable) {
|
||||
embeddable.updateInput(input);
|
||||
embeddable.reload();
|
||||
}
|
||||
}
|
||||
handlers.onDestroy(() => {
|
||||
handlers.onEmbeddableDestroyed();
|
||||
return ReactDOM.unmountComponentAtNode(domNode);
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue