Skip to content

Commit 60bc29b

Browse files
Corey Robertsonelasticmachine
Corey Robertson
and
elasticmachine
authored
Move away from npStart for embeddables in canvas (#62680) (#63705)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
1 parent 07c7ee2 commit 60bc29b

File tree

7 files changed

+114
-90
lines changed

7 files changed

+114
-90
lines changed

‎x-pack/legacy/plugins/canvas/canvas_plugin_src/plugin.ts‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@
66

77
import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
88
import { CanvasSetup } from '../public';
9+
import { EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
10+
import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
11+
import { Start as InspectorStart } from '../../../../../src/plugins/inspector/public';
912

1013
import { functions } from './functions/browser';
1114
import { typeFunctions } from './expression_types';
1215
// @ts-ignore: untyped local
13-
import { renderFunctions } from './renderers';
16+
import { renderFunctions, renderFunctionFactories } from './renderers';
1417

1518
import { elementSpecs } from './elements';
1619
// @ts-ignore Untyped Local
@@ -30,13 +33,26 @@ interface SetupDeps {
3033
canvas: CanvasSetup;
3134
}
3235

36+
export interface StartDeps {
37+
embeddable: EmbeddableStart;
38+
uiActions: UiActionsStart;
39+
inspector: InspectorStart;
40+
}
41+
3342
/** @internal */
34-
export class CanvasSrcPlugin implements Plugin<{}, {}, SetupDeps, {}> {
35-
public setup(core: CoreSetup, plugins: SetupDeps) {
43+
export class CanvasSrcPlugin implements Plugin<void, void, SetupDeps, StartDeps> {
44+
public setup(core: CoreSetup<StartDeps>, plugins: SetupDeps) {
3645
plugins.canvas.addFunctions(functions);
3746
plugins.canvas.addTypes(typeFunctions);
47+
3848
plugins.canvas.addRenderers(renderFunctions);
3949

50+
core.getStartServices().then(([coreStart, depsStart]) => {
51+
plugins.canvas.addRenderers(
52+
renderFunctionFactories.map((factory: any) => factory(coreStart, depsStart))
53+
);
54+
});
55+
4056
plugins.canvas.addElements(elementSpecs);
4157
plugins.canvas.addDatasourceUIs(datasourceSpecs);
4258
plugins.canvas.addModelUIs(modelSpecs);
@@ -45,11 +61,7 @@ export class CanvasSrcPlugin implements Plugin<{}, {}, SetupDeps, {}> {
4561
plugins.canvas.addTagUIs(tagSpecs);
4662
plugins.canvas.addTemplates(templateSpecs);
4763
plugins.canvas.addTransformUIs(transformSpecs);
48-
49-
return {};
5064
}
5165

52-
public start(core: CoreStart, plugins: {}) {
53-
return {};
54-
}
66+
public start(core: CoreStart, plugins: StartDeps) {}
5567
}

‎x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx‎

Lines changed: 73 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
import React from 'react';
88
import ReactDOM from 'react-dom';
99
import { I18nContext } from 'ui/i18n';
10-
import { npStart } from 'ui/new_platform';
10+
import { CoreStart } from '../../../../../../../src/core/public';
11+
import { StartDeps } from '../../plugin';
1112
import {
1213
IEmbeddable,
1314
EmbeddableFactory,
@@ -28,86 +29,88 @@ const embeddablesRegistry: {
2829
[key: string]: IEmbeddable;
2930
} = {};
3031

31-
const renderEmbeddable = (embeddableObject: IEmbeddable, domNode: HTMLElement) => {
32-
return (
33-
<div
34-
className={CANVAS_EMBEDDABLE_CLASSNAME}
35-
style={{ width: domNode.offsetWidth, height: domNode.offsetHeight, cursor: 'auto' }}
36-
>
37-
<I18nContext>
38-
<EmbeddablePanel
39-
embeddable={embeddableObject}
40-
getActions={npStart.plugins.uiActions.getTriggerCompatibleActions}
41-
getEmbeddableFactory={npStart.plugins.embeddable.getEmbeddableFactory}
42-
getAllEmbeddableFactories={npStart.plugins.embeddable.getEmbeddableFactories}
43-
notifications={npStart.core.notifications}
44-
overlays={npStart.core.overlays}
45-
inspector={npStart.plugins.inspector}
46-
SavedObjectFinder={getSavedObjectFinder(
47-
npStart.core.savedObjects,
48-
npStart.core.uiSettings
49-
)}
50-
/>
51-
</I18nContext>
52-
</div>
53-
);
32+
const renderEmbeddableFactory = (core: CoreStart, plugins: StartDeps) => {
33+
return (embeddableObject: IEmbeddable, domNode: HTMLElement) => {
34+
return (
35+
<div
36+
className={CANVAS_EMBEDDABLE_CLASSNAME}
37+
style={{ width: domNode.offsetWidth, height: domNode.offsetHeight, cursor: 'auto' }}
38+
>
39+
<I18nContext>
40+
<EmbeddablePanel
41+
embeddable={embeddableObject}
42+
getActions={plugins.uiActions.getTriggerCompatibleActions}
43+
getEmbeddableFactory={plugins.embeddable.getEmbeddableFactory}
44+
getAllEmbeddableFactories={plugins.embeddable.getEmbeddableFactories}
45+
notifications={core.notifications}
46+
overlays={core.overlays}
47+
inspector={plugins.inspector}
48+
SavedObjectFinder={getSavedObjectFinder(core.savedObjects, core.uiSettings)}
49+
/>
50+
</I18nContext>
51+
</div>
52+
);
53+
};
5454
};
5555

56-
const embeddable = () => ({
57-
name: 'embeddable',
58-
displayName: strings.getDisplayName(),
59-
help: strings.getHelpDescription(),
60-
reuseDomNode: true,
61-
render: async (
62-
domNode: HTMLElement,
63-
{ input, embeddableType }: EmbeddableExpression<EmbeddableInput>,
64-
handlers: RendererHandlers
65-
) => {
66-
const uniqueId = handlers.getElementId();
67-
68-
if (!embeddablesRegistry[uniqueId]) {
69-
const factory = Array.from(npStart.plugins.embeddable.getEmbeddableFactories()).find(
70-
embeddableFactory => embeddableFactory.type === embeddableType
71-
) as EmbeddableFactory<EmbeddableInput>;
72-
73-
if (!factory) {
74-
handlers.done();
75-
throw new EmbeddableFactoryNotFoundError(embeddableType);
76-
}
77-
78-
const embeddableObject = await factory.createFromSavedObject(input.id, input);
56+
export const embeddableRendererFactory = (core: CoreStart, plugins: StartDeps) => {
57+
const renderEmbeddable = renderEmbeddableFactory(core, plugins);
58+
return () => ({
59+
name: 'embeddable',
60+
displayName: strings.getDisplayName(),
61+
help: strings.getHelpDescription(),
62+
reuseDomNode: true,
63+
render: async (
64+
domNode: HTMLElement,
65+
{ input, embeddableType }: EmbeddableExpression<EmbeddableInput>,
66+
handlers: RendererHandlers
67+
) => {
68+
const uniqueId = handlers.getElementId();
69+
70+
if (!embeddablesRegistry[uniqueId]) {
71+
const factory = Array.from(plugins.embeddable.getEmbeddableFactories()).find(
72+
embeddableFactory => embeddableFactory.type === embeddableType
73+
) as EmbeddableFactory<EmbeddableInput>;
74+
75+
if (!factory) {
76+
handlers.done();
77+
throw new EmbeddableFactoryNotFoundError(embeddableType);
78+
}
7979

80-
embeddablesRegistry[uniqueId] = embeddableObject;
81-
ReactDOM.unmountComponentAtNode(domNode);
80+
const embeddableObject = await factory.createFromSavedObject(input.id, input);
8281

83-
const subscription = embeddableObject.getInput$().subscribe(function(updatedInput) {
84-
const updatedExpression = embeddableInputToExpression(updatedInput, embeddableType);
82+
embeddablesRegistry[uniqueId] = embeddableObject;
83+
ReactDOM.unmountComponentAtNode(domNode);
8584

86-
if (updatedExpression) {
87-
handlers.onEmbeddableInputChange(updatedExpression);
88-
}
89-
});
85+
const subscription = embeddableObject.getInput$().subscribe(function(updatedInput) {
86+
const updatedExpression = embeddableInputToExpression(updatedInput, embeddableType);
9087

91-
ReactDOM.render(renderEmbeddable(embeddableObject, domNode), domNode, () => handlers.done());
88+
if (updatedExpression) {
89+
handlers.onEmbeddableInputChange(updatedExpression);
90+
}
91+
});
9292

93-
handlers.onResize(() => {
9493
ReactDOM.render(renderEmbeddable(embeddableObject, domNode), domNode, () =>
9594
handlers.done()
9695
);
97-
});
9896

99-
handlers.onDestroy(() => {
100-
subscription.unsubscribe();
101-
handlers.onEmbeddableDestroyed();
97+
handlers.onResize(() => {
98+
ReactDOM.render(renderEmbeddable(embeddableObject, domNode), domNode, () =>
99+
handlers.done()
100+
);
101+
});
102102

103-
delete embeddablesRegistry[uniqueId];
103+
handlers.onDestroy(() => {
104+
subscription.unsubscribe();
105+
handlers.onEmbeddableDestroyed();
104106

105-
return ReactDOM.unmountComponentAtNode(domNode);
106-
});
107-
} else {
108-
embeddablesRegistry[uniqueId].updateInput(input);
109-
}
110-
},
111-
});
107+
delete embeddablesRegistry[uniqueId];
112108

113-
export { embeddable };
109+
return ReactDOM.unmountComponentAtNode(domNode);
110+
});
111+
} else {
112+
embeddablesRegistry[uniqueId].updateInput(input);
113+
}
114+
},
115+
});
116+
};

‎x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import { advancedFilter } from './advanced_filter';
88
import { debug } from './debug';
99
import { dropdownFilter } from './dropdown_filter';
10-
import { embeddable } from './embeddable/embeddable';
10+
import { embeddableRendererFactory } from './embeddable/embeddable';
1111
import { error } from './error';
1212
import { image } from './image';
1313
import { markdown } from './markdown';
@@ -26,7 +26,6 @@ export const renderFunctions = [
2626
advancedFilter,
2727
debug,
2828
dropdownFilter,
29-
embeddable,
3029
error,
3130
image,
3231
markdown,
@@ -41,3 +40,5 @@ export const renderFunctions = [
4140
text,
4241
timeFilter,
4342
];
43+
44+
export const renderFunctionFactories = [embeddableRendererFactory];

‎x-pack/legacy/plugins/canvas/public/components/embeddable_flyout/flyout.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
*/
66

77
import React from 'react';
8-
import { npStart } from 'ui/new_platform';
98
import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
109
import {
1110
SavedObjectFinderUi,
1211
SavedObjectMetaData,
1312
} from '../../../../../../../src/plugins/saved_objects/public/';
1413
import { ComponentStrings } from '../../../i18n';
1514
import { CoreStart } from '../../../../../../../src/core/public';
15+
import { CanvasStartDeps } from '../../plugin';
1616

1717
const { AddEmbeddableFlyout: strings } = ComponentStrings;
1818

@@ -22,11 +22,12 @@ export interface Props {
2222
availableEmbeddables: string[];
2323
savedObjects: CoreStart['savedObjects'];
2424
uiSettings: CoreStart['uiSettings'];
25+
getEmbeddableFactories: CanvasStartDeps['embeddable']['getEmbeddableFactories'];
2526
}
2627

2728
export class AddEmbeddableFlyout extends React.Component<Props> {
2829
onAddPanel = (id: string, savedObjectType: string, name: string) => {
29-
const embeddableFactories = npStart.plugins.embeddable.getEmbeddableFactories();
30+
const embeddableFactories = this.props.getEmbeddableFactories();
3031

3132
// Find the embeddable type from the saved object type
3233
const found = Array.from(embeddableFactories).find(embeddableFactory => {
@@ -42,7 +43,7 @@ export class AddEmbeddableFlyout extends React.Component<Props> {
4243
};
4344

4445
render() {
45-
const embeddableFactories = npStart.plugins.embeddable.getEmbeddableFactories();
46+
const embeddableFactories = this.props.getEmbeddableFactories();
4647

4748
const availableSavedObjects = Array.from(embeddableFactories)
4849
.filter(factory => {

‎x-pack/legacy/plugins/canvas/public/components/embeddable_flyout/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export class EmbeddableFlyoutPortal extends React.Component<Props & WithKibanaPr
105105
availableEmbeddables={Object.keys(allowedEmbeddables)}
106106
savedObjects={this.props.kibana.services.savedObjects}
107107
uiSettings={this.props.kibana.services.uiSettings}
108+
getEmbeddableFactories={this.props.kibana.services.embeddable.getEmbeddableFactories}
108109
/>,
109110
this.el
110111
);

‎x-pack/legacy/plugins/canvas/public/legacy.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ const shimSetupPlugins: CanvasSetupDeps = {
2626
};
2727
const shimStartPlugins: CanvasStartDeps = {
2828
...npStart.plugins,
29+
embeddable: npStart.plugins.embeddable,
2930
expressions: npStart.plugins.expressions,
31+
inspector: npStart.plugins.inspector,
3032
uiActions: npStart.plugins.uiActions,
3133
__LEGACY: {
3234
// ToDo: Copy directly into canvas

‎x-pack/legacy/plugins/canvas/public/plugin.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { initLoadingIndicator } from './lib/loading_indicator';
1111
import { featureCatalogueEntry } from './feature_catalogue_entry';
1212
import { ExpressionsSetup, ExpressionsStart } from '../../../../../src/plugins/expressions/public';
1313
import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
14+
import { EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
15+
import { Start as InspectorStart } from '../../../../../src/plugins/inspector/public';
1416
// @ts-ignore untyped local
1517
import { argTypeSpecs } from './expression_types/arg_types';
1618
import { transitions } from './transitions';
@@ -31,7 +33,9 @@ export interface CanvasSetupDeps {
3133
}
3234

3335
export interface CanvasStartDeps {
36+
embeddable: EmbeddableStart;
3437
expressions: ExpressionsStart;
38+
inspector: InspectorStart;
3539
uiActions: UiActionsStart;
3640
__LEGACY: {
3741
absoluteToParsedUrl: (url: string, basePath: string) => any;
@@ -48,14 +52,19 @@ export interface CanvasStartDeps {
4852
// These interfaces are empty for now but will be populate as we need to export
4953
// things for other plugins to use at startup or runtime
5054
export type CanvasSetup = CanvasApi;
51-
export interface CanvasStart {} // eslint-disable-line @typescript-eslint/no-empty-interface
55+
export type CanvasStart = void;
5256

5357
/** @internal */
5458
export class CanvasPlugin
5559
implements Plugin<CanvasSetup, CanvasStart, CanvasSetupDeps, CanvasStartDeps> {
60+
// TODO: Do we want to completely move canvas_plugin_src into it's own plugin?
61+
private srcPlugin = new CanvasSrcPlugin();
62+
5663
public setup(core: CoreSetup<CanvasStartDeps>, plugins: CanvasSetupDeps) {
5764
const { api: canvasApi, registries } = getPluginApi(plugins.expressions);
5865

66+
this.srcPlugin.setup(core, { canvas: canvasApi });
67+
5968
core.application.register({
6069
id: 'canvas',
6170
title: 'Canvas App',
@@ -84,10 +93,6 @@ export class CanvasPlugin
8493
canvasApi.addElements(legacyRegistries.elements.getOriginalFns());
8594
canvasApi.addTypes(legacyRegistries.types.getOriginalFns());
8695

87-
// TODO: Do we want to completely move canvas_plugin_src into it's own plugin?
88-
const srcPlugin = new CanvasSrcPlugin();
89-
srcPlugin.setup(core, { canvas: canvasApi });
90-
9196
// Register core canvas stuff
9297
canvasApi.addFunctions(initFunctions({ typesRegistry: plugins.expressions.__LEGACY.types }));
9398
canvasApi.addArgumentUIs(argTypeSpecs);
@@ -99,8 +104,7 @@ export class CanvasPlugin
99104
}
100105

101106
public start(core: CoreStart, plugins: CanvasStartDeps) {
107+
this.srcPlugin.start(core, plugins);
102108
initLoadingIndicator(core.http.addLoadingCountSource);
103-
104-
return {};
105109
}
106110
}

0 commit comments

Comments
 (0)