[Dashboard/Reporting] Removal of Reporting injected CSS and JS (#111958)

* checkpoint 1: dashboard reading screenshot mode values is screenshot mode and screenshot layout

* checkpoint 2: dashboard handling preserve layout

* temp setting up print viewport

* slight clean up, detect a new view mode "print"

* fix types

* adde todo comment

* added "print" route to dashboard that does not rely on screenshotMode service

* updated jest tests and added screenshot mode public mock

* try to respect embed settings

* fix lint

* remove print mode from share data

* re-add ViewMode.VIEW to share data

* updated TODO comment

* remove injected print css

* remove double declaration of ScreenshotModePluginStart

* re-add missing import 🤦

* fix types issues

* changed css injection removal to use only viewMode.PRINT rather than a new route

* turn off defer below fold when in print mode

* elastic@ email address

* address some CI checks that were failing

* use .includes instead of || to check view mode

Co-authored-by: Michael Dokolin <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Devon A Thomson <[email protected]>
Co-authored-by: Michael Dokolin <[email protected]>

src/plugins/dashboard/kibana.json

@@ -13,6 +13,7 @@
     "navigation",
     "savedObjects",
     "share",
+    "screenshotMode",
     "uiActions",
     "urlForwarding",
     "presentationUtil",

src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx

@@ -15,6 +15,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 { screenshotModePluginMock } from '../../../../screenshot_mode/public/mocks';
 
 import {
   EmbeddableInput,
@@ -65,6 +66,7 @@ beforeEach(async () => {
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
     presentationUtil: getStubPluginServices(),
+    screenshotMode: screenshotModePluginMock.createSetupContract(),
   };
 
   container = new DashboardContainer(getSampleDashboardInput(), containerOptions);

src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../services/embeddable_test_samples';
 import { ErrorEmbeddable, IContainer, isErrorEmbeddable } from '../../services/embeddable';
 import { getStubPluginServices } from '../../../../presentation_util/public';
+import { screenshotModePluginMock } from '../../../../screenshot_mode/public/mocks';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -56,6 +57,7 @@ beforeEach(async () => {
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
     presentationUtil: getStubPluginServices(),
+    screenshotMode: screenshotModePluginMock.createSetupContract(),
   };
   const input = getSampleDashboardInput({
     panels: {

src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx

@@ -13,6 +13,7 @@ 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 { screenshotModePluginMock } from '../../../../screenshot_mode/public/mocks';
 
 import {
   CONTACT_CARD_EMBEDDABLE,
@@ -48,6 +49,7 @@ beforeEach(async () => {
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreMock.createStart().http,
     presentationUtil: getStubPluginServices(),
+    screenshotMode: screenshotModePluginMock.createSetupContract(),
   };
   const input = getSampleDashboardInput({
     panels: {

src/plugins/dashboard/public/application/actions/export_csv_action.test.tsx

@@ -25,6 +25,7 @@ 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';
+import { screenshotModePluginMock } from '../../../../screenshot_mode/public/mocks';
 
 describe('Export CSV action', () => {
   const { setup, doStart } = embeddablePluginMock.createInstance();
@@ -61,6 +62,7 @@ describe('Export CSV action', () => {
       uiSettings: uiSettingsServiceMock.createStartContract(),
       http: coreStart.http,
       presentationUtil: getStubPluginServices(),
+      screenshotMode: screenshotModePluginMock.createSetupContract(),
     };
     const input = getSampleDashboardInput({
       panels: {

src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx

@@ -28,6 +28,7 @@ import {
   CONTACT_CARD_EMBEDDABLE,
 } from '../../services/embeddable_test_samples';
 import { getStubPluginServices } from '../../../../presentation_util/public';
+import { screenshotModePluginMock } from '../../../../screenshot_mode/public/mocks';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -62,6 +63,7 @@ beforeEach(async () => {
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
     presentationUtil: getStubPluginServices(),
+    screenshotMode: screenshotModePluginMock.createSetupContract(),
   };
 
   container = new DashboardContainer(getSampleDashboardInput(), containerOptions);

src/plugins/dashboard/public/application/actions/library_notification_popover.test.tsx

@@ -29,6 +29,7 @@ import {
   ContactCardEmbeddable,
 } from '../../services/embeddable_test_samples';
 import { getStubPluginServices } from '../../../../presentation_util/public';
+import { screenshotModePluginMock } from '../../../../screenshot_mode/public/mocks';
 
 describe('LibraryNotificationPopover', () => {
   const { setup, doStart } = embeddablePluginMock.createInstance();
@@ -58,6 +59,7 @@ describe('LibraryNotificationPopover', () => {
       uiSettings: uiSettingsServiceMock.createStartContract(),
       http: coreStart.http,
       presentationUtil: getStubPluginServices(),
+      screenshotMode: screenshotModePluginMock.createSetupContract(),
     };
 
     container = new DashboardContainer(getSampleDashboardInput(), containerOptions);

src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx

@@ -22,6 +22,7 @@ import {
   ContactCardEmbeddableOutput,
 } from '../../services/embeddable_test_samples';
 import { getStubPluginServices } from '../../../../presentation_util/public';
+import { screenshotModePluginMock } from '../../../../screenshot_mode/public/mocks';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -48,6 +49,7 @@ beforeEach(async () => {
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
     presentationUtil: getStubPluginServices(),
+    screenshotMode: screenshotModePluginMock.createSetupContract(),
   };
   const input = getSampleDashboardInput({
     panels: {

src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx

@@ -30,6 +30,7 @@ import {
   CONTACT_CARD_EMBEDDABLE,
 } from '../../services/embeddable_test_samples';
 import { getStubPluginServices } from '../../../../presentation_util/public';
+import { screenshotModePluginMock } from '../../../../screenshot_mode/public/mocks';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(
@@ -57,6 +58,7 @@ beforeEach(async () => {
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
     presentationUtil: getStubPluginServices(),
+    screenshotMode: screenshotModePluginMock.createSetupContract(),
   };
 
   container = new DashboardContainer(getSampleDashboardInput(), containerOptions);

src/plugins/dashboard/public/application/dashboard_app.tsx

@@ -17,11 +17,11 @@ import {
   getDashboardTitle,
   leaveConfirmStrings,
 } from '../dashboard_strings';
-import { EmbeddableRenderer } from '../services/embeddable';
+import { createDashboardEditUrl } from '../dashboard_constants';
+import { EmbeddableRenderer, ViewMode } from '../services/embeddable';
 import { DashboardTopNav, isCompleteDashboardAppState } from './top_nav/dashboard_top_nav';
 import { DashboardAppServices, DashboardEmbedSettings, DashboardRedirect } from '../types';
 import { createKbnUrlStateStorage, withNotifyOnErrors } from '../services/kibana_utils';
-import { createDashboardEditUrl } from '../dashboard_constants';
 export interface DashboardAppProps {
   history: History;
   savedDashboardId?: string;
@@ -51,7 +51,6 @@ export function DashboardApp({
   const dashboardState = useDashboardSelector((state) => state.dashboardStateReducer);
   const dashboardAppState = useDashboardAppState({
     history,
-    redirectTo,
     savedDashboardId,
     kbnUrlStateStorage,
     isEmbeddedExternally: Boolean(embedSettings),
@@ -101,15 +100,26 @@ export function DashboardApp({
     };
   }, [data.search.session]);
 
+  const printMode = useMemo(
+    () => dashboardAppState.getLatestDashboardState?.().viewMode === ViewMode.PRINT,
+    [dashboardAppState]
+  );
+
+  useEffect(() => {
+    if (!embedSettings) chrome.setIsVisible(!printMode);
+  }, [chrome, printMode, embedSettings]);
+
   return (
     <>
       {isCompleteDashboardAppState(dashboardAppState) && (
         <>
-          <DashboardTopNav
-            redirectTo={redirectTo}
-            embedSettings={embedSettings}
-            dashboardAppState={dashboardAppState}
-          />
+          {!printMode && (
+            <DashboardTopNav
+              redirectTo={redirectTo}
+              embedSettings={embedSettings}
+              dashboardAppState={dashboardAppState}
+            />
+          )}
 
           {dashboardAppState.savedDashboard.outcome === 'conflict' &&
           dashboardAppState.savedDashboard.id &&

src/plugins/dashboard/public/application/dashboard_router.tsx

@@ -109,6 +109,7 @@ export async function mountApp({
     embeddable: embeddableStart,
     uiSettings: coreStart.uiSettings,
     scopedHistory: () => scopedHistory,
+    screenshotModeService: screenshotMode,
     indexPatterns: dataStart.indexPatterns,
     savedQueryService: dataStart.query.savedQueries,
     savedObjectsClient: coreStart.savedObjects.client,
@@ -131,7 +132,6 @@ export async function mountApp({
       activeSpaceId || 'default'
     ),
     spacesService: spacesApi,
-    screenshotModeService: screenshotMode,
   };
 
   const getUrlStateStorage = (history: RouteComponentProps['history']) =>

src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx

@@ -43,11 +43,13 @@ import { getStubPluginServices } from '../../../../presentation_util/public';
 const presentationUtil = getStubPluginServices();
 
 const options: DashboardContainerServices = {
+  // TODO: clean up use of any
   application: {} as any,
   embeddable: {} as any,
   notifications: {} as any,
   overlays: {} as any,
   inspector: {} as any,
+  screenshotMode: {} as any,
   SavedObjectFinder: () => null,
   ExitFullScreenButton: () => null,
   uiActions: {} as any,

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -40,6 +40,7 @@ import {
 import { PLACEHOLDER_EMBEDDABLE } from './placeholder';
 import { DashboardAppCapabilities, DashboardContainerInput } from '../../types';
 import { PresentationUtilPluginStart } from '../../services/presentation_util';
+import type { ScreenshotModePluginStart } from '../../services/screenshot_mode';
 import { PanelPlacementMethod, IPanelPlacementArgs } from './panel/dashboard_panel_placement';
 import {
   combineDashboardFiltersWithControlGroupFilters,
@@ -55,6 +56,7 @@ export interface DashboardContainerServices {
   application: CoreStart['application'];
   inspector: InspectorStartContract;
   overlays: CoreStart['overlays'];
+  screenshotMode: ScreenshotModePluginStart;
   uiSettings: IUiSettingsClient;
   embeddable: EmbeddableStart;
   uiActions: UiActionsStart;

src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../../services/embeddable_test_samples';
 import { coreMock, uiSettingsServiceMock } from '../../../../../../core/public/mocks';
 import { getStubPluginServices } from '../../../../../presentation_util/public';
+import { screenshotModePluginMock } from '../../../../../screenshot_mode/public/mocks';
 
 let dashboardContainer: DashboardContainer | undefined;
 const presentationUtil = getStubPluginServices();
@@ -71,6 +72,7 @@ function prepare(props?: Partial<DashboardGridProps>) {
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreMock.createStart().http,
     presentationUtil,
+    screenshotMode: screenshotModePluginMock.createSetupContract(),
   };
   dashboardContainer = new DashboardContainer(initialInput, options);
   const defaultTestProps: DashboardGridProps = {

src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx

@@ -154,7 +154,7 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
           id: 'dashboard.dashboardGrid.toast.unableToLoadDashboardDangerMessage',
           defaultMessage: 'Unable to load dashboard.',
         }),
-        body: error.message,
+        body: (error as { message: string }).message,
         toastLifeTimeMs: 5000,
       });
     }
@@ -254,6 +254,11 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
       />
     ));
 
+    // in print mode, dashboard layout is not controlled by React Grid Layout
+    if (viewMode === ViewMode.PRINT) {
+      return <>{dashboardPanels}</>;
+    }
+
     return (
       <ResponsiveSizedGrid
         isViewMode={isViewMode}

src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid_item.tsx

@@ -10,16 +10,18 @@ import React, { useState, useRef, useEffect, FC } from 'react';
 import { EuiLoadingChart } from '@elastic/eui';
 import classNames from 'classnames';
 
-import { EmbeddableChildPanel } from '../../../services/embeddable';
+import { EmbeddableChildPanel, ViewMode } from '../../../services/embeddable';
 import { useLabs } from '../../../services/presentation_util';
 import { DashboardPanelState } from '../types';
+import { DashboardContainer } from '..';
 
 type PanelProps = Pick<EmbeddableChildPanel, 'container' | 'PanelComponent'>;
 type DivProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>;
 
 interface Props extends PanelProps, DivProps {
   id: DashboardPanelState['explicitInput']['id'];
   type: DashboardPanelState['type'];
+  container: DashboardContainer;
   focusedPanelId?: string;
   expandedPanelId?: string;
   key: string;
@@ -52,6 +54,8 @@ const Item = React.forwardRef<HTMLDivElement, Props>(
       'dshDashboardGrid__item--expanded': expandPanel,
       // eslint-disable-next-line @typescript-eslint/naming-convention
       'dshDashboardGrid__item--hidden': hidePanel,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      printViewport__vis: container.getInput().viewMode === ViewMode.PRINT,
     });
 
     return (
@@ -116,7 +120,8 @@ export const ObservedItem: FC<Props> = (props: Props) => {
 
 export const DashboardGridItem: FC<Props> = (props: Props) => {
   const { isProjectEnabled } = useLabs();
-  const isEnabled = isProjectEnabled('labs:dashboard:deferBelowFold');
+  const isPrintMode = props.container.getInput().viewMode === ViewMode.PRINT;
+  const isEnabled = !isPrintMode && isProjectEnabled('labs:dashboard:deferBelowFold');
 
   return isEnabled ? <ObservedItem {...props} /> : <Item {...props} />;
 };

src/plugins/dashboard/public/application/embeddable/viewport/_index.scss

@@ -1 +1,2 @@
 @import './dashboard_viewport';
+@import './print_viewport';

src/plugins/dashboard/public/application/embeddable/viewport/_print_viewport.scss

@@ -0,0 +1,9 @@
+.printViewport {
+  &__vis {
+    height: 600px; // These values might need to be passed in as dimensions for the report. I.e., print should use layout dimensions.
+    width: 975px;
+
+    // Some vertical space between vis, but center horizontally
+    margin: 10px auto;
+  }
+}

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx

@@ -27,6 +27,7 @@ import {
   CONTACT_CARD_EMBEDDABLE,
 } from '../../../../../embeddable/public/lib/test_samples';
 import { getStubPluginServices } from '../../../../../presentation_util/public';
+import { screenshotModePluginMock } from '../../../../../screenshot_mode/public/mocks';
 
 let dashboardContainer: DashboardContainer | undefined;
 const presentationUtil = getStubPluginServices();
@@ -65,6 +66,7 @@ function getProps(props?: Partial<DashboardViewportProps>): {
       getTriggerCompatibleActions: (() => []) as any,
     } as any,
     presentationUtil,
+    screenshotMode: screenshotModePluginMock.createSetupContract(),
   };
 
   const input = getSampleDashboardInput({

src/plugins/dashboard/public/application/hooks/use_dashboard_app_state.test.tsx

@@ -52,7 +52,6 @@ const createDashboardAppStateProps = (): UseDashboardStateProps => ({
   savedDashboardId: 'testDashboardId',
   history: createBrowserHistory(),
   isEmbeddedExternally: false,
-  redirectTo: jest.fn(),
 });
 
 const createDashboardAppStateServices = () => {

src/plugins/dashboard/public/application/hooks/use_dashboard_app_state.ts

@@ -22,7 +22,6 @@ import {
   DashboardBuildContext,
   DashboardAppServices,
   DashboardAppState,
-  DashboardRedirect,
   DashboardState,
 } from '../../types';
 import { DashboardAppLocatorParams } from '../../locator';
@@ -44,14 +43,12 @@ import {
 export interface UseDashboardStateProps {
   history: History;
   savedDashboardId?: string;
-  redirectTo: DashboardRedirect;
   isEmbeddedExternally: boolean;
   kbnUrlStateStorage: IKbnUrlStateStorage;
 }
 
 export const useDashboardAppState = ({
   history,
-  redirectTo,
   savedDashboardId,
   kbnUrlStateStorage,
   isEmbeddedExternally,
@@ -184,12 +181,20 @@ export const useDashboardAppState = ({
         savedDashboard,
       });
 
+      // Backwards compatible way of detecting that we are taking a screenshot
+      const legacyPrintLayoutDetected =
+        screenshotModeService?.isScreenshotMode() &&
+        screenshotModeService.getScreenshotLayout() === 'print';
+
       const initialDashboardState = {
         ...savedDashboardState,
         ...dashboardSessionStorageState,
         ...initialDashboardStateFromUrl,
         ...forwardedAppState,
 
+        // if we are in legacy print mode, dashboard needs to be in print viewMode
+        ...(legacyPrintLayoutDetected ? { viewMode: ViewMode.PRINT } : {}),
+
         // if there is an incoming embeddable, dashboard always needs to be in edit mode to receive it.
         ...(incomingEmbeddable ? { viewMode: ViewMode.EDIT } : {}),
       };