[dashboard][labs] Defer loading panels below the fold (#99880) (#100302)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Clint Andrew Hall <clint.hall@elastic.co>
elastic · May 18, 2021 · 36f0795 · 36f0795
1 parent 9768ee2
commit 36f0795
Show file tree

Hide file tree

Showing 30 changed files with 405 additions and 111 deletions.
diff --git a/src/plugins/dashboard/common/index.ts b/src/plugins/dashboard/common/index.ts
@@ -24,3 +24,7 @@ export {
 } from './types';
 
 export { migratePanelsTo730 } from './migrate_to_730_panels';
+
+export const UI_SETTINGS = {
+  ENABLE_LABS_UI: 'labs:dashboard:enable_ui',
+};
diff --git a/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx b/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx
@@ -14,6 +14,7 @@ import { CoreStart } from 'kibana/public';
 
 import { coreMock, uiSettingsServiceMock } from '../../../../../core/public/mocks';
 import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
+import { getStubPluginServices } from '../../../../presentation_util/public';
 
 import {
   EmbeddableInput,
@@ -63,6 +64,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    presentationUtil: getStubPluginServices(),
   };
 
   container = new DashboardContainer(getSampleDashboardInput(), containerOptions);

diff --git a/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
@@ -21,6 +21,7 @@ import {
   CONTACT_CARD_EMBEDDABLE,
 } from '../../services/embeddable_test_samples';
 import { ErrorEmbeddable, IContainer, isErrorEmbeddable } from '../../services/embeddable';
+import { getStubPluginServices } from '../../../../presentation_util/public';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -53,6 +54,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    presentationUtil: getStubPluginServices(),
   };
   const input = getSampleDashboardInput({
     panels: {

diff --git a/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx
@@ -12,6 +12,8 @@ import { getSampleDashboardInput, getSampleDashboardPanel } from '../test_helper
 
 import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
 import { isErrorEmbeddable } from '../../services/embeddable';
+import { getStubPluginServices } from '../../../../presentation_util/public';
+
 import {
   CONTACT_CARD_EMBEDDABLE,
   ContactCardEmbeddableFactory,
@@ -45,6 +47,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreMock.createStart().http,
+    presentationUtil: getStubPluginServices(),
   };
   const input = getSampleDashboardInput({
     panels: {

diff --git a/src/plugins/dashboard/public/application/actions/export_csv_action.test.tsx b/src/plugins/dashboard/public/application/actions/export_csv_action.test.tsx
@@ -24,6 +24,7 @@ import { embeddablePluginMock } from '../../../../embeddable/public/mocks';
 import { DataPublicPluginStart } from '../../../../data/public/types';
 import { dataPluginMock } from '../../../../data/public/mocks';
 import { LINE_FEED_CHARACTER } from 'src/plugins/data/common/exports/export_csv';
+import { getStubPluginServices } from '../../../../presentation_util/public';
 
 describe('Export CSV action', () => {
   const { setup, doStart } = embeddablePluginMock.createInstance();
@@ -59,6 +60,7 @@ describe('Export CSV action', () => {
       uiActions: {} as any,
       uiSettings: uiSettingsServiceMock.createStartContract(),
       http: coreStart.http,
+      presentationUtil: getStubPluginServices(),
     };
     const input = getSampleDashboardInput({
       panels: {

diff --git a/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx b/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx
@@ -27,6 +27,7 @@ import {
   ContactCardEmbeddableOutput,
   CONTACT_CARD_EMBEDDABLE,
 } from '../../services/embeddable_test_samples';
+import { getStubPluginServices } from '../../../../presentation_util/public';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -60,6 +61,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    presentationUtil: getStubPluginServices(),
   };
 
   container = new DashboardContainer(getSampleDashboardInput(), containerOptions);

diff --git a/src/plugins/dashboard/public/application/actions/library_notification_popover.test.tsx b/src/plugins/dashboard/public/application/actions/library_notification_popover.test.tsx
@@ -27,6 +27,7 @@ import {
   ContactCardEmbeddableOutput,
   ContactCardEmbeddable,
 } from '../../services/embeddable_test_samples';
+import { getStubPluginServices } from '../../../../presentation_util/public';
 
 describe('LibraryNotificationPopover', () => {
   const { setup, doStart } = embeddablePluginMock.createInstance();
@@ -55,6 +56,7 @@ describe('LibraryNotificationPopover', () => {
       uiActions: {} as any,
       uiSettings: uiSettingsServiceMock.createStartContract(),
       http: coreStart.http,
+      presentationUtil: getStubPluginServices(),
     };
 
     container = new DashboardContainer(getSampleDashboardInput(), containerOptions);

diff --git a/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx
@@ -21,6 +21,7 @@ import {
   ContactCardEmbeddableInput,
   ContactCardEmbeddableOutput,
 } from '../../services/embeddable_test_samples';
+import { getStubPluginServices } from '../../../../presentation_util/public';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -46,6 +47,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    presentationUtil: getStubPluginServices(),
   };
   const input = getSampleDashboardInput({
     panels: {

diff --git a/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx b/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx
@@ -29,6 +29,7 @@ import {
   ContactCardEmbeddableOutput,
   CONTACT_CARD_EMBEDDABLE,
 } from '../../services/embeddable_test_samples';
+import { getStubPluginServices } from '../../../../presentation_util/public';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -55,6 +56,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    presentationUtil: getStubPluginServices(),
   };
 
   container = new DashboardContainer(getSampleDashboardInput(), containerOptions);

diff --git a/src/plugins/dashboard/public/application/dashboard_router.tsx b/src/plugins/dashboard/public/application/dashboard_router.tsx
@@ -30,6 +30,7 @@ import {
 
 import { createKbnUrlStateStorage, withNotifyOnErrors } from '../services/kibana_utils';
 import { KibanaContextProvider } from '../services/kibana_react';
+
 import {
   AppMountParameters,
   CoreSetup,
@@ -81,6 +82,7 @@ export async function mountApp({
     kibanaLegacy: { dashboardConfig },
     savedObjectsTaggingOss,
     visualizations,
+    presentationUtil,
   } = pluginsStart;
 
   const spacesApi = pluginsStart.spacesOss?.isSpacesAvailable ? pluginsStart.spacesOss : undefined;
@@ -208,22 +210,24 @@ export async function mountApp({
   const app = (
     <I18nProvider>
       <KibanaContextProvider services={dashboardServices}>
-        <HashRouter>
-          <Switch>
-            <Route
-              path={[
-                DashboardConstants.CREATE_NEW_DASHBOARD_URL,
-                `${DashboardConstants.VIEW_DASHBOARD_URL}/:id`,
-              ]}
-              render={renderDashboard}
-            />
-            <Route exact path={DashboardConstants.LANDING_PAGE_PATH} render={renderListingPage} />
-            <Route exact path="/">
-              <Redirect to={DashboardConstants.LANDING_PAGE_PATH} />
-            </Route>
-            <Route render={renderNoMatch} />
-          </Switch>
-        </HashRouter>
+        <presentationUtil.ContextProvider>
+          <HashRouter>
+            <Switch>
+              <Route
+                path={[
+                  DashboardConstants.CREATE_NEW_DASHBOARD_URL,
+                  `${DashboardConstants.VIEW_DASHBOARD_URL}/:id`,
+                ]}
+                render={renderDashboard}
+              />
+              <Route exact path={DashboardConstants.LANDING_PAGE_PATH} render={renderListingPage} />
+              <Route exact path="/">
+                <Redirect to={DashboardConstants.LANDING_PAGE_PATH} />
+              </Route>
+              <Route render={renderNoMatch} />
+            </Switch>
+          </HashRouter>
+        </presentationUtil.ContextProvider>
       </KibanaContextProvider>
     </I18nProvider>
   );

diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
@@ -38,6 +38,9 @@ import {
 } from '../../../../../core/public/mocks';
 import { inspectorPluginMock } from '../../../../inspector/public/mocks';
 import { uiActionsPluginMock } from '../../../../ui_actions/public/mocks';
+import { getStubPluginServices } from '../../../../presentation_util/public';
+
+const presentationUtil = getStubPluginServices();
 
 const options: DashboardContainerServices = {
   application: {} as any,
@@ -50,6 +53,7 @@ const options: DashboardContainerServices = {
   uiActions: {} as any,
   uiSettings: uiSettingsServiceMock.createStartContract(),
   http: coreMock.createStart().http,
+  presentationUtil,
 };
 
 beforeEach(() => {
@@ -233,17 +237,19 @@ test('DashboardContainer in edit mode shows edit mode actions', async () => {
   const component = mount(
     <I18nProvider>
       <KibanaContextProvider services={options}>
-        <EmbeddablePanel
-          embeddable={embeddable}
-          getActions={() => Promise.resolve([])}
-          getAllEmbeddableFactories={(() => []) as any}
-          getEmbeddableFactory={(() => null) as any}
-          notifications={{} as any}
-          application={options.application}
-          overlays={{} as any}
-          inspector={inspector}
-          SavedObjectFinder={() => null}
-        />
+        <presentationUtil.ContextProvider>
+          <EmbeddablePanel
+            embeddable={embeddable}
+            getActions={() => Promise.resolve([])}
+            getAllEmbeddableFactories={(() => []) as any}
+            getEmbeddableFactory={(() => null) as any}
+            notifications={{} as any}
+            application={options.application}
+            overlays={{} as any}
+            inspector={inspector}
+            SavedObjectFinder={() => null}
+          />
+        </presentationUtil.ContextProvider>
       </KibanaContextProvider>
     </I18nProvider>
   );

diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
@@ -38,6 +38,7 @@ import {
 import { PLACEHOLDER_EMBEDDABLE } from './placeholder';
 import { PanelPlacementMethod, IPanelPlacementArgs } from './panel/dashboard_panel_placement';
 import { DashboardCapabilities } from '../types';
+import { PresentationUtilPluginStart } from '../../services/presentation_util';
 
 export interface DashboardContainerInput extends ContainerInput {
   dashboardCapabilities?: DashboardCapabilities;
@@ -68,6 +69,7 @@ export interface DashboardContainerServices {
   embeddable: EmbeddableStart;
   uiActions: UiActionsStart;
   http: CoreStart['http'];
+  presentationUtil: PresentationUtilPluginStart;
 }
 
 interface IndexSignature {
@@ -245,7 +247,9 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     ReactDOM.render(
       <I18nProvider>
         <KibanaContextProvider services={this.services}>
-          <DashboardViewport container={this} switchViewMode={this.switchViewMode} />
+          <this.services.presentationUtil.ContextProvider>
+            <DashboardViewport container={this} switchViewMode={this.switchViewMode} />
+          </this.services.presentationUtil.ContextProvider>
         </KibanaContextProvider>
       </I18nProvider>,
       dom

diff --git a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx
@@ -22,8 +22,10 @@ import {
   ContactCardEmbeddableFactory,
 } from '../../../services/embeddable_test_samples';
 import { coreMock, uiSettingsServiceMock } from '../../../../../../core/public/mocks';
+import { getStubPluginServices } from '../../../../../presentation_util/public';
 
 let dashboardContainer: DashboardContainer | undefined;
+const presentationUtil = getStubPluginServices();
 
 function prepare(props?: Partial<DashboardGridProps>) {
   const { setup, doStart } = embeddablePluginMock.createInstance();
@@ -68,6 +70,7 @@ function prepare(props?: Partial<DashboardGridProps>) {
     } as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreMock.createStart().http,
+    presentationUtil,
   };
   dashboardContainer = new DashboardContainer(initialInput, options);
   const defaultTestProps: DashboardGridProps = {
@@ -96,7 +99,9 @@ test('renders DashboardGrid', () => {
   const { props, options } = prepare();
   const component = mountWithIntl(
     <KibanaContextProvider services={options}>
-      <DashboardGrid {...props} />
+      <presentationUtil.ContextProvider>
+        <DashboardGrid {...props} />
+      </presentationUtil.ContextProvider>
     </KibanaContextProvider>
   );
   const panelElements = component.find('EmbeddableChildPanel');
@@ -107,7 +112,9 @@ test('renders DashboardGrid with no visualizations', () => {
   const { props, options } = prepare();
   const component = mountWithIntl(
     <KibanaContextProvider services={options}>
-      <DashboardGrid {...props} />
+      <presentationUtil.ContextProvider>
+        <DashboardGrid {...props} />
+      </presentationUtil.ContextProvider>
     </KibanaContextProvider>
   );
 
@@ -120,7 +127,9 @@ test('DashboardGrid removes panel when removed from container', () => {
   const { props, options } = prepare();
   const component = mountWithIntl(
     <KibanaContextProvider services={options}>
-      <DashboardGrid {...props} />
+      <presentationUtil.ContextProvider>
+        <DashboardGrid {...props} />
+      </presentationUtil.ContextProvider>
     </KibanaContextProvider>
   );
 
@@ -137,7 +146,9 @@ test('DashboardGrid renders expanded panel', () => {
   const { props, options } = prepare();
   const component = mountWithIntl(
     <KibanaContextProvider services={options}>
-      <DashboardGrid {...props} />
+      <presentationUtil.ContextProvider>
+        <DashboardGrid {...props} />
+      </presentationUtil.ContextProvider>
     </KibanaContextProvider>
   );
 
@@ -163,7 +174,9 @@ test('DashboardGrid unmount unsubscribes', async (done) => {
   const { props, options } = prepare();
   const component = mountWithIntl(
     <KibanaContextProvider services={options}>
-      <DashboardGrid {...props} />
+      <presentationUtil.ContextProvider>
+        <DashboardGrid {...props} />
+      </presentationUtil.ContextProvider>
     </KibanaContextProvider>
   );