diff --git a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx b/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx index 7ba3915c6d386..348f86007ae16 100644 --- a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx +++ b/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx @@ -22,8 +22,8 @@ import { EMPTY, merge, pipe, Subject, Subscription } from 'rxjs'; import { EuiContextMenuPanel } from '@elastic/eui'; import { + ReduxEmbeddablePackage, ReduxEmbeddableTools, - createReduxEmbeddableTools, SolutionToolbarPopover, } from '@kbn/presentation-util-plugin/public'; import { OverlayRef } from '@kbn/core/public'; @@ -160,7 +160,11 @@ export class ControlGroupContainer extends Container< ); }; - constructor(initialInput: ControlGroupInput, parent?: Container) { + constructor( + reduxEmbeddablePackage: ReduxEmbeddablePackage, + initialInput: ControlGroupInput, + parent?: Container + ) { super( initialInput, { dataViewIds: [], loading: false, embeddableLoaded: {}, filters: [] }, @@ -172,7 +176,7 @@ export class ControlGroupContainer extends Container< this.recalculateFilters$ = new Subject(); // build redux embeddable tools - this.reduxEmbeddableTools = createReduxEmbeddableTools< + this.reduxEmbeddableTools = reduxEmbeddablePackage.createTools< ControlGroupReduxState, typeof controlGroupReducers >({ diff --git a/src/plugins/controls/public/control_group/embeddable/control_group_container_factory.ts b/src/plugins/controls/public/control_group/embeddable/control_group_container_factory.ts index f55c49101dc40..bcbd31955f36e 100644 --- a/src/plugins/controls/public/control_group/embeddable/control_group_container_factory.ts +++ b/src/plugins/controls/public/control_group/embeddable/control_group_container_factory.ts @@ -15,6 +15,7 @@ */ import { Container, EmbeddableFactoryDefinition } from '@kbn/embeddable-plugin/public'; +import { lazyLoadReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public'; import { EmbeddablePersistableStateService } from '@kbn/embeddable-plugin/common'; import { ControlGroupInput, CONTROL_GROUP_TYPE } from '../types'; @@ -47,7 +48,8 @@ export class ControlGroupContainerFactory implements EmbeddableFactoryDefinition } public create = async (initialInput: ControlGroupInput, parent?: Container) => { + const reduxEmbeddablePackage = await lazyLoadReduxEmbeddablePackage(); const { ControlGroupContainer } = await import('./control_group_container'); - return new ControlGroupContainer(initialInput, parent); + return new ControlGroupContainer(reduxEmbeddablePackage, initialInput, parent); }; } diff --git a/src/plugins/controls/public/control_types/options_list/options_list_embeddable.tsx b/src/plugins/controls/public/control_types/options_list/options_list_embeddable.tsx index 815ed56e7faee..4df4000c9fc88 100644 --- a/src/plugins/controls/public/control_types/options_list/options_list_embeddable.tsx +++ b/src/plugins/controls/public/control_types/options_list/options_list_embeddable.tsx @@ -21,10 +21,7 @@ import { buildPhrasesFilter, COMPARE_ALL_OPTIONS, } from '@kbn/es-query'; -import { - createReduxEmbeddableTools, - ReduxEmbeddableTools, -} from '@kbn/presentation-util-plugin/public'; +import { ReduxEmbeddableTools, ReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public'; import { DataView } from '@kbn/data-views-plugin/public'; import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public'; import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; @@ -87,7 +84,12 @@ export class OptionsListEmbeddable extends Embeddable; - constructor(input: OptionsListEmbeddableInput, output: ControlOutput, parent?: IContainer) { + constructor( + reduxEmbeddablePackage: ReduxEmbeddablePackage, + input: OptionsListEmbeddableInput, + output: ControlOutput, + parent?: IContainer + ) { super(input, output, parent); // Destructure controls services @@ -97,7 +99,7 @@ export class OptionsListEmbeddable extends Embeddable(); // build redux embeddable tools - this.reduxEmbeddableTools = createReduxEmbeddableTools< + this.reduxEmbeddableTools = reduxEmbeddablePackage.createTools< OptionsListReduxState, typeof optionsListReducers >({ diff --git a/src/plugins/controls/public/control_types/options_list/options_list_embeddable_factory.tsx b/src/plugins/controls/public/control_types/options_list/options_list_embeddable_factory.tsx index c95159a0c9dce..1b49350181906 100644 --- a/src/plugins/controls/public/control_types/options_list/options_list_embeddable_factory.tsx +++ b/src/plugins/controls/public/control_types/options_list/options_list_embeddable_factory.tsx @@ -8,7 +8,9 @@ import deepEqual from 'fast-deep-equal'; +import { lazyLoadReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public'; import { EmbeddableFactoryDefinition, IContainer } from '@kbn/embeddable-plugin/public'; + import { OptionsListEditorOptions } from './options_list_editor_options'; import { ControlEmbeddable, DataControlField, IEditableControlFactory } from '../../types'; import { OptionsListEmbeddableInput, OPTIONS_LIST_CONTROL } from './types'; @@ -27,8 +29,11 @@ export class OptionsListEmbeddableFactory constructor() {} public async create(initialInput: OptionsListEmbeddableInput, parent?: IContainer) { + const reduxEmbeddablePackage = await lazyLoadReduxEmbeddablePackage(); const { OptionsListEmbeddable } = await import('./options_list_embeddable'); - return Promise.resolve(new OptionsListEmbeddable(initialInput, {}, parent)); + return Promise.resolve( + new OptionsListEmbeddable(reduxEmbeddablePackage, initialInput, {}, parent) + ); } public presaveTransformFunction = ( diff --git a/src/plugins/controls/public/control_types/range_slider/range_slider_embeddable.tsx b/src/plugins/controls/public/control_types/range_slider/range_slider_embeddable.tsx index e4dfa9d406b95..699c0c42ceae7 100644 --- a/src/plugins/controls/public/control_types/range_slider/range_slider_embeddable.tsx +++ b/src/plugins/controls/public/control_types/range_slider/range_slider_embeddable.tsx @@ -23,10 +23,7 @@ import deepEqual from 'fast-deep-equal'; import { Subscription, lastValueFrom } from 'rxjs'; import { debounceTime, distinctUntilChanged, skip, map } from 'rxjs/operators'; -import { - ReduxEmbeddableTools, - createReduxEmbeddableTools, -} from '@kbn/presentation-util-plugin/public'; +import { ReduxEmbeddableTools, ReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public'; import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public'; import { DataView, DataViewField } from '@kbn/data-views-plugin/public'; import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; @@ -84,13 +81,18 @@ export class RangeSliderEmbeddable extends Embeddable; - constructor(input: RangeSliderEmbeddableInput, output: ControlOutput, parent?: IContainer) { + constructor( + reduxEmbeddablePackage: ReduxEmbeddablePackage, + input: RangeSliderEmbeddableInput, + output: ControlOutput, + parent?: IContainer + ) { super(input, output, parent); // get filters for initial output... // Destructure controls services ({ data: this.dataService, dataViews: this.dataViewsService } = pluginServices.getServices()); - this.reduxEmbeddableTools = createReduxEmbeddableTools< + this.reduxEmbeddableTools = reduxEmbeddablePackage.createTools< RangeSliderReduxState, typeof rangeSliderReducers >({ diff --git a/src/plugins/controls/public/control_types/range_slider/range_slider_embeddable_factory.tsx b/src/plugins/controls/public/control_types/range_slider/range_slider_embeddable_factory.tsx index 962937a8dc500..8610624a45daf 100644 --- a/src/plugins/controls/public/control_types/range_slider/range_slider_embeddable_factory.tsx +++ b/src/plugins/controls/public/control_types/range_slider/range_slider_embeddable_factory.tsx @@ -9,6 +9,8 @@ import deepEqual from 'fast-deep-equal'; import { EmbeddableFactoryDefinition, IContainer } from '@kbn/embeddable-plugin/public'; +import { lazyLoadReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public'; + import { ControlEmbeddable, DataControlField, IEditableControlFactory } from '../../types'; import { RangeSliderEmbeddableInput, RANGE_SLIDER_CONTROL } from './types'; import { @@ -26,8 +28,11 @@ export class RangeSliderEmbeddableFactory constructor() {} public async create(initialInput: RangeSliderEmbeddableInput, parent?: IContainer) { + const reduxEmbeddablePackage = await lazyLoadReduxEmbeddablePackage(); const { RangeSliderEmbeddable } = await import('./range_slider_embeddable'); - return Promise.resolve(new RangeSliderEmbeddable(initialInput, {}, parent)); + return Promise.resolve( + new RangeSliderEmbeddable(reduxEmbeddablePackage, initialInput, {}, parent) + ); } public presaveTransformFunction = ( diff --git a/src/plugins/controls/public/control_types/time_slider/time_slider_embeddable.tsx b/src/plugins/controls/public/control_types/time_slider/time_slider_embeddable.tsx index f422f9396aa76..a4098a72dfe1a 100644 --- a/src/plugins/controls/public/control_types/time_slider/time_slider_embeddable.tsx +++ b/src/plugins/controls/public/control_types/time_slider/time_slider_embeddable.tsx @@ -15,10 +15,7 @@ import { merge, Subscription, BehaviorSubject, Observable } from 'rxjs'; import { map, distinctUntilChanged, skip, take, mergeMap } from 'rxjs/operators'; import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public'; -import { - ReduxEmbeddableTools, - createReduxEmbeddableTools, -} from '@kbn/presentation-util-plugin/public'; +import { ReduxEmbeddableTools, ReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public'; import { DataView } from '@kbn/data-views-plugin/public'; import { TimeSliderControlEmbeddableInput } from '../../../common/control_types/time_slider/types'; @@ -78,7 +75,12 @@ export class TimeSliderControlEmbeddable extends Embeddable< typeof timeSliderReducers >; - constructor(input: TimeSliderControlEmbeddableInput, output: ControlOutput, parent?: IContainer) { + constructor( + reduxEmbeddablePackage: ReduxEmbeddablePackage, + input: TimeSliderControlEmbeddableInput, + output: ControlOutput, + parent?: IContainer + ) { super(input, output, parent); // get filters for initial output... const { @@ -96,7 +98,7 @@ export class TimeSliderControlEmbeddable extends Embeddable< this.internalOutput = {}; // build redux embeddable tools - this.reduxEmbeddableTools = createReduxEmbeddableTools< + this.reduxEmbeddableTools = reduxEmbeddablePackage.createTools< TimeSliderReduxState, typeof timeSliderReducers >({ diff --git a/src/plugins/controls/public/control_types/time_slider/time_slider_embeddable_factory.tsx b/src/plugins/controls/public/control_types/time_slider/time_slider_embeddable_factory.tsx index 6fad0139b98e2..3fee3c7aa7f11 100644 --- a/src/plugins/controls/public/control_types/time_slider/time_slider_embeddable_factory.tsx +++ b/src/plugins/controls/public/control_types/time_slider/time_slider_embeddable_factory.tsx @@ -8,7 +8,9 @@ import deepEqual from 'fast-deep-equal'; +import { lazyLoadReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public'; import { EmbeddableFactoryDefinition, IContainer } from '@kbn/embeddable-plugin/public'; + import { TIME_SLIDER_CONTROL } from '../..'; import { ControlEmbeddable, DataControlField, IEditableControlFactory } from '../../types'; import { @@ -27,9 +29,12 @@ export class TimesliderEmbeddableFactory constructor() {} public async create(initialInput: TimeSliderControlEmbeddableInput, parent?: IContainer) { + const reduxEmbeddablePackage = await lazyLoadReduxEmbeddablePackage(); const { TimeSliderControlEmbeddable } = await import('./time_slider_embeddable'); - return Promise.resolve(new TimeSliderControlEmbeddable(initialInput, {}, parent)); + return Promise.resolve( + new TimeSliderControlEmbeddable(reduxEmbeddablePackage, initialInput, {}, parent) + ); } public presaveTransformFunction = ( diff --git a/src/plugins/presentation_util/public/index.ts b/src/plugins/presentation_util/public/index.ts index a499679a149b9..ac600aab6d5d5 100644 --- a/src/plugins/presentation_util/public/index.ts +++ b/src/plugins/presentation_util/public/index.ts @@ -48,9 +48,10 @@ export { export { useReduxContainerContext, useReduxEmbeddableContext, - createReduxEmbeddableTools, + lazyLoadReduxEmbeddablePackage, type ReduxEmbeddableState, type ReduxEmbeddableTools, + type ReduxEmbeddablePackage, } from './redux_embeddables'; export * from './components/types'; diff --git a/src/plugins/presentation_util/public/redux_embeddables/index.ts b/src/plugins/presentation_util/public/redux_embeddables/index.ts index a2aee7e710679..f73322a7ca260 100644 --- a/src/plugins/presentation_util/public/redux_embeddables/index.ts +++ b/src/plugins/presentation_util/public/redux_embeddables/index.ts @@ -6,11 +6,18 @@ * Side Public License, v 1. */ +import { ReduxEmbeddablePackage } from './types'; + export { useReduxContainerContext, useReduxEmbeddableContext, } from './use_redux_embeddable_context'; -export { createReduxEmbeddableTools } from './create_redux_embeddable_tools'; +export type { ReduxEmbeddableState, ReduxEmbeddableTools, ReduxEmbeddablePackage } from './types'; -export type { ReduxEmbeddableState, ReduxEmbeddableTools } from './types'; +export const lazyLoadReduxEmbeddablePackage = async (): Promise => { + const { createReduxEmbeddableTools } = await import('./create_redux_embeddable_tools'); + return { + createTools: createReduxEmbeddableTools, + }; +}; diff --git a/src/plugins/presentation_util/public/redux_embeddables/types.ts b/src/plugins/presentation_util/public/redux_embeddables/types.ts index 10c94daa9dcb5..eaa53bba24548 100644 --- a/src/plugins/presentation_util/public/redux_embeddables/types.ts +++ b/src/plugins/presentation_util/public/redux_embeddables/types.ts @@ -32,6 +32,13 @@ export interface ReduxEmbeddableSyncSettings< ) => boolean; } +/** + * The package type is lazily exported from presentation_util and should contain all methods needed to use the redux embeddable tools. + */ +export interface ReduxEmbeddablePackage { + createTools: typeof import('./create_redux_embeddable_tools')['createReduxEmbeddableTools']; +} + /** * The return type from setupReduxEmbeddable. Contains a wrapper which comes with the store provider and provides the context to react components, * but also returns the context object to allow the embeddable class to interact with the redux store.