[Lens][Embeddable] Make UI react faster to click actions like create or edit

x-pack/platform/plugins/shared/lens/public/async_services.ts

@@ -49,5 +49,4 @@ export * from './app_plugin/save_modal_container';
 export * from './chart_info_api';
 
 export * from './trigger_actions/open_in_discover_helpers';
-export * from './trigger_actions/open_lens_config/create_action_helpers';
 export * from './trigger_actions/open_lens_config/in_app_embeddable_edit/in_app_embeddable_edit_action_helpers';

x-pack/platform/plugins/shared/lens/public/mocks/data_plugin_mock.ts

@@ -38,6 +38,7 @@ function createMockTimefilter() {
     getRefreshInterval: () => {},
     getRefreshIntervalDefaults: () => {},
     getAutoRefreshFetch$: () => new Observable(),
+    getAbsoluteTime: jest.fn(),
   };
 }
 

x-pack/platform/plugins/shared/lens/public/plugin.ts

@@ -322,6 +322,54 @@ export class LensPlugin {
     visualizationMap: VisualizationMap;
   }> => ({ datasourceMap: {}, visualizationMap: {} });
 
+  private getStartServicesForEmbeddable = async (
+    getStartServices: () => { core: CoreStart; plugins: LensPluginStartDependencies }
+  ): Promise<LensEmbeddableStartServices> => {
+    const { core: coreStart, plugins } = getStartServices();
+    const [
+      { setUsageCollectionStart, initMemoizedErrorNotification, getLensAttributeService },
+      eventAnnotationService,
+      { visualizationMap, datasourceMap },
+    ] = await Promise.all([
+      import('./async_services'),
+      plugins.eventAnnotation.getService(),
+      this.initEditorFrameService(),
+    ]);
+
+    if (plugins.usageCollection) {
+      setUsageCollectionStart(plugins.usageCollection);
+    }
+
+    initMemoizedErrorNotification(coreStart);
+
+    return {
+      ...plugins,
+      attributeService: getLensAttributeService(coreStart, plugins),
+      capabilities: coreStart.application.capabilities,
+      coreHttp: coreStart.http,
+      coreStart,
+      timefilter: plugins.data.query.timefilter.timefilter,
+      expressionRenderer: plugins.expressions.ReactExpressionRenderer,
+      documentToExpression: (doc: LensDocument, forceDSL?: boolean) =>
+        this.editorFrameService!.documentToExpression(doc, {
+          dataViews: plugins.dataViews,
+          storage: new Storage(localStorage),
+          uiSettings: coreStart.uiSettings,
+          timefilter: plugins.data.query.timefilter.timefilter,
+          nowProvider: plugins.data.nowProvider,
+          forceDSL,
+          eventAnnotationService,
+        }),
+      injectFilterReferences: plugins.data.query.filterManager.inject.bind(
+        plugins.data.query.filterManager
+      ),
+      visualizationMap,
+      datasourceMap,
+      theme: coreStart.theme,
+      uiSettings: coreStart.uiSettings,
+    };
+  };
+
   setup(
     core: CoreSetup<LensPluginStartDependencies, void>,
     {
@@ -341,55 +389,11 @@ export class LensPlugin {
   ) {
     const startServices = createStartServicesGetter(core.getStartServices);
 
-    const getStartServicesForEmbeddable = async (): Promise<LensEmbeddableStartServices> => {
-      const { setUsageCollectionStart, initMemoizedErrorNotification } = await import(
-        './async_services'
-      );
-      const { core: coreStart, plugins } = startServices();
-
-      const { visualizationMap, datasourceMap } = await this.initEditorFrameService();
-      const [{ getLensAttributeService }, eventAnnotationService] = await Promise.all([
-        import('./async_services'),
-        plugins.eventAnnotation.getService(),
-      ]);
-
-      if (plugins.usageCollection) {
-        setUsageCollectionStart(plugins.usageCollection);
-      }
-
-      initMemoizedErrorNotification(coreStart);
-
-      return {
-        ...plugins,
-        attributeService: getLensAttributeService(coreStart, plugins),
-        capabilities: coreStart.application.capabilities,
-        coreHttp: coreStart.http,
-        coreStart,
-        timefilter: plugins.data.query.timefilter.timefilter,
-        expressionRenderer: plugins.expressions.ReactExpressionRenderer,
-        documentToExpression: (doc: LensDocument, forceDSL?: boolean) =>
-          this.editorFrameService!.documentToExpression(doc, {
-            dataViews: plugins.dataViews,
-            storage: new Storage(localStorage),
-            uiSettings: core.uiSettings,
-            timefilter: plugins.data.query.timefilter.timefilter,
-            nowProvider: plugins.data.nowProvider,
-            forceDSL,
-            eventAnnotationService,
-          }),
-        injectFilterReferences: data.query.filterManager.inject.bind(data.query.filterManager),
-        visualizationMap,
-        datasourceMap,
-        theme: core.theme,
-        uiSettings: core.uiSettings,
-      };
-    };
-
     if (embeddable) {
       // Let Kibana know about the Lens embeddable
       embeddable.registerReactEmbeddableFactory(LENS_EMBEDDABLE_TYPE, async () => {
         const [deps, { createLensEmbeddableFactory }] = await Promise.all([
-          getStartServicesForEmbeddable(),
+          this.getStartServicesForEmbeddable(startServices),
           import('./react_embeddable/lens_embeddable'),
         ]);
         return createLensEmbeddableFactory(deps);
@@ -398,12 +402,12 @@ export class LensPlugin {
       // Let Dashboard know about the Lens panel type
       embeddable.registerAddFromLibraryType<LensSavedObjectAttributes>({
         onAdd: async (container, savedObject) => {
-          const { attributeService } = await getStartServicesForEmbeddable();
+          const services = await this.getStartServicesForEmbeddable(startServices);
           // deserialize the saved object from visualize library
           // this make sure to fit into the new embeddable model, where the following build()
           // function expects a fully loaded runtime state
           const state = await deserializeState(
-            attributeService,
+            services,
             { savedObjectId: savedObject.id },
             savedObject.references
           );
@@ -542,9 +546,6 @@ export class LensPlugin {
         this.editorFrameService!.loadVisualizations(),
         this.editorFrameService!.loadDatasources(),
       ]);
-      const { setVisualizationMap, setDatasourceMap } = await import('./async_services');
-      setDatasourceMap(datasourceMap);
-      setVisualizationMap(visualizationMap);
       return { datasourceMap, visualizationMap };
     };
 
@@ -675,21 +676,18 @@ export class LensPlugin {
     );
 
     // Allows the Lens embeddable to easily open the inline editing flyout
-    const editLensEmbeddableAction = new EditLensEmbeddableAction(startDependencies, core);
+    const editLensEmbeddableAction = new EditLensEmbeddableAction(core, () =>
+      this.getStartServicesForEmbeddable(() => ({ core, plugins: startDependencies }))
+    );
+
     // embeddable inline edit panel action
     startDependencies.uiActions.addTriggerAction(
       IN_APP_EMBEDDABLE_EDIT_TRIGGER,
       editLensEmbeddableAction
     );
 
     // Displays the add ESQL panel in the dashboard add Panel menu
-    const createESQLPanelAction = new CreateESQLPanelAction(startDependencies, core, async () => {
-      if (!this.editorFrameService) {
-        await this.initEditorFrameService();
-      }
-
-      return this.editorFrameService!;
-    });
+    const createESQLPanelAction = new CreateESQLPanelAction(core);
     startDependencies.uiActions.addTriggerAction(ADD_PANEL_TRIGGER, createESQLPanelAction);
 
     const discoverLocator = startDependencies.share?.url.locators.get('DISCOVER_APP_LOCATOR');
@@ -739,11 +737,11 @@ export class LensPlugin {
       },
 
       stateHelperApi: async () => {
-        const { createFormulaPublicApi, createChartInfoApi, suggestionsApi } = await import(
-          './async_services'
-        );
+        const [
+          { createFormulaPublicApi, createChartInfoApi, suggestionsApi },
+          { visualizationMap, datasourceMap },
+        ] = await Promise.all([import('./async_services'), this.initEditorFrameService()]);
 
-        const { visualizationMap, datasourceMap } = await this.initEditorFrameService();
         return {
           formula: createFormulaPublicApi(),
           chartInfo: createChartInfoApi(
@@ -773,8 +771,8 @@ export class LensPlugin {
       // TODO: remove this in faviour of the custom action thing
       // This is currently used in Discover by the unified histogram plugin
       EditLensConfigPanelApi: async () => {
-        const { visualizationMap, datasourceMap } = await this.initEditorFrameService();
-        const { getEditLensConfiguration } = await import('./async_services');
+        const [{ visualizationMap, datasourceMap }, { getEditLensConfiguration }] =
+          await Promise.all([this.initEditorFrameService(), import('./async_services')]);
         const Component = await getEditLensConfiguration(
           core,
           startDependencies,

x-pack/platform/plugins/shared/lens/public/react_embeddable/data_loader.test.ts

@@ -84,7 +84,7 @@ type ChangeFnType = ({
   services: LensEmbeddableStartServices;
 }) => Promise<void | boolean>;
 
-async function expectRerenderOnDataLoder(
+async function expectRerenderOnDataLoader(
   changeFn: ChangeFnType,
   runtimeState: LensRuntimeState = { attributes: getLensAttributesMock() },
   {
@@ -182,15 +182,15 @@ describe('Data Loader', () => {
   beforeEach(() => jest.clearAllMocks());
 
   it('should re-render once on filter change', async () => {
-    await expectRerenderOnDataLoder(async ({ api }) => {
+    await expectRerenderOnDataLoader(async ({ api }) => {
       (api.filters$ as BehaviorSubject<Filter[]>).next([
         { meta: { alias: 'test', negate: false, disabled: false } },
       ]);
     });
   });
 
   it('should re-render once on search session change', async () => {
-    await expectRerenderOnDataLoder(async ({ api }) => {
+    await expectRerenderOnDataLoader(async ({ api }) => {
       // dispatch a new searchSessionId
 
       (
@@ -200,7 +200,7 @@ describe('Data Loader', () => {
   });
 
   it('should re-render once on attributes change', async () => {
-    await expectRerenderOnDataLoder(async ({ internalApi }) => {
+    await expectRerenderOnDataLoader(async ({ internalApi }) => {
       // trigger a change by changing the title in the attributes
       (internalApi.attributes$ as BehaviorSubject<LensDocument | undefined>).next({
         ...internalApi.attributes$.getValue(),
@@ -210,7 +210,7 @@ describe('Data Loader', () => {
   });
 
   it('should re-render when dashboard view/edit mode changes if dynamic actions are set', async () => {
-    await expectRerenderOnDataLoder(async ({ api, getState }) => {
+    await expectRerenderOnDataLoader(async ({ api, getState }) => {
       getState.mockReturnValue({
         attributes: getLensAttributesMock(),
         enhancements: {
@@ -225,7 +225,7 @@ describe('Data Loader', () => {
   });
 
   it('should not re-render when dashboard view/edit mode changes if dynamic actions are not set', async () => {
-    await expectRerenderOnDataLoder(async ({ api }) => {
+    await expectRerenderOnDataLoader(async ({ api }) => {
       // the default get state does not have dynamic actions
       // trigger a change by changing the title in the attributes
       (api.viewMode$ as BehaviorSubject<ViewMode | undefined>).next('view');
@@ -238,7 +238,7 @@ describe('Data Loader', () => {
     const query: Query = { language: 'kquery', query: '' };
     const filters: Filter[] = [{ meta: { alias: 'test', negate: false, disabled: false } }];
 
-    await expectRerenderOnDataLoder(
+    await expectRerenderOnDataLoader(
       async ({ internalApi }) => {
         await waitForValue(
           internalApi.expressionParams$,
@@ -258,7 +258,7 @@ describe('Data Loader', () => {
   });
 
   it('should pass render mode to expression', async () => {
-    await expectRerenderOnDataLoder(async ({ internalApi }) => {
+    await expectRerenderOnDataLoader(async ({ internalApi }) => {
       await waitForValue(
         internalApi.expressionParams$,
         (v: unknown) => isObject(v) && 'renderMode' in v
@@ -295,7 +295,7 @@ describe('Data Loader', () => {
       ],
     };
 
-    await expectRerenderOnDataLoder(
+    await expectRerenderOnDataLoader(
       async ({ internalApi }) => {
         await waitForValue(
           internalApi.expressionParams$,
@@ -327,7 +327,7 @@ describe('Data Loader', () => {
   });
 
   it('should call onload after rerender and onData$ call', async () => {
-    await expectRerenderOnDataLoder(async ({ parentApi, internalApi, api }) => {
+    await expectRerenderOnDataLoader(async ({ parentApi, internalApi, api }) => {
       expect(parentApi.onLoad).toHaveBeenLastCalledWith(true);
 
       await waitForValue(
@@ -347,7 +347,7 @@ describe('Data Loader', () => {
   });
 
   it('should initialize dateViews api with deduped list of index patterns', async () => {
-    await expectRerenderOnDataLoder(
+    await expectRerenderOnDataLoader(
       async ({ internalApi }) => {
         await waitForValue(
           internalApi.dataViews$,
@@ -374,7 +374,7 @@ describe('Data Loader', () => {
   });
 
   it('should override noPadding in the display options if noPadding is set in the embeddable input', async () => {
-    await expectRerenderOnDataLoder(async ({ internalApi }) => {
+    await expectRerenderOnDataLoader(async ({ internalApi }) => {
       await waitForValue(
         internalApi.expressionParams$,
         (v: unknown) => isObject(v) && 'expression' in v && typeof v.expression != null
@@ -387,7 +387,7 @@ describe('Data Loader', () => {
   });
 
   it('should reload only once when the attributes or savedObjectId and the search context change at the same time', async () => {
-    await expectRerenderOnDataLoder(async ({ internalApi, api }) => {
+    await expectRerenderOnDataLoader(async ({ internalApi, api }) => {
       // trigger a change by changing the title in the attributes
       (internalApi.attributes$ as BehaviorSubject<LensDocument | undefined>).next({
         ...internalApi.attributes$.getValue(),
@@ -398,7 +398,7 @@ describe('Data Loader', () => {
   });
 
   it('should pass over the overrides as variables', async () => {
-    await expectRerenderOnDataLoder(
+    await expectRerenderOnDataLoader(
       async ({ internalApi }) => {
         await waitForValue(
           internalApi.expressionParams$,
@@ -430,7 +430,7 @@ describe('Data Loader', () => {
   });
 
   it('should catch missing dataView errors correctly', async () => {
-    await expectRerenderOnDataLoder(
+    await expectRerenderOnDataLoader(
       async ({ internalApi }) => {
         // wait for the error to appear
         await waitForValue(internalApi.blockingError$);