[Screenshotting] Add custom context support in the screenshot mode

packages/kbn-optimizer/limits.yml

@@ -116,7 +116,6 @@ pageLoadAssetSize:
   dataViewManagement: 5000
   reporting: 57003
   visTypeHeatmap: 25340
-  screenshotting: 17017
   expressionGauge: 25000
   controls: 34788
   expressionPartitionVis: 26338

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

@@ -185,7 +185,7 @@ export const useDashboardAppState = ({
       // Backwards compatible way of detecting that we are taking a screenshot
       const legacyPrintLayoutDetected =
         screenshotModeService?.isScreenshotMode() &&
-        screenshotModeService.getScreenshotLayout() === 'print';
+        screenshotModeService.getScreenshotContext('layout') === 'print';
 
       const initialDashboardState = {
         ...savedDashboardState,

src/plugins/dashboard/public/services/screenshot_mode.ts

@@ -10,5 +10,3 @@ export type {
   ScreenshotModePluginStart,
   ScreenshotModePluginSetup,
 } from '../../../screenshot_mode/public';
-
-export type { Layout } from '../../../screenshot_mode/common';

src/plugins/screenshot_mode/common/context.test.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getScreenshotContext, setScreenshotContext } from './context';
+
+describe('getScreenshotContext', () => {
+  it('should return a default value if there is no data', () => {
+    expect(getScreenshotContext('key', 'default')).toBe('default');
+  });
+});
+
+describe('setScreenshotContext', () => {
+  it('should store data in the context', () => {
+    setScreenshotContext('key', 'value');
+
+    expect(getScreenshotContext('key')).toBe('value');
+  });
+
+  it('should not overwrite data on repetitive calls', () => {
+    setScreenshotContext('key1', 'value1');
+    setScreenshotContext('key2', 'value2');
+
+    expect(getScreenshotContext('key1')).toBe('value1');
+  });
+});

src/plugins/screenshot_mode/common/context.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// **PLEASE NOTE**
+// The functionality in this file targets a browser environment AND is intended to be used both in public and server.
+// For instance, reporting uses these functions when starting puppeteer to set the current browser into "screenshot" mode.
+
+type Context = Record<string, unknown>;
+
+declare global {
+  interface Window {
+    __KBN_SCREENSHOT_CONTEXT__?: Context;
+  }
+}
+
+/**
+ * Stores a value in the screenshotting context.
+ * @param key Context key to set.
+ * @param value Value to set.
+ */
+export function setScreenshotContext<T = unknown>(key: string, value: T): void {
+  // Literal value to prevent adding an external reference
+  const KBN_SCREENSHOT_CONTEXT = '__KBN_SCREENSHOT_CONTEXT__';
+
+  if (!window[KBN_SCREENSHOT_CONTEXT]) {
+    Object.defineProperty(window, KBN_SCREENSHOT_CONTEXT, {
+      enumerable: true,
+      writable: true,
+      configurable: false,
+      value: {},
+    });
+  }
+
+  window[KBN_SCREENSHOT_CONTEXT]![key] = value;
+}
+
+/**
+ * Retrieves a value from the screenshotting context.
+ * @param key Context key to get.
+ * @param defaultValue Value to return if the key is not found.
+ * @return The value stored in the screenshotting context.
+ */
+export function getScreenshotContext<T = unknown>(key: string, defaultValue?: T): T | undefined {
+  // Literal value to prevent adding an external reference
+  const KBN_SCREENSHOT_CONTEXT = '__KBN_SCREENSHOT_CONTEXT__';
+
+  return (window[KBN_SCREENSHOT_CONTEXT]?.[key] as T) ?? defaultValue;
+}

src/plugins/screenshot_mode/common/index.ts

@@ -6,16 +6,11 @@
  * Side Public License, v 1.
  */
 
+export { getScreenshotContext, setScreenshotContext } from './context';
 export {
   getScreenshotMode,
   setScreenshotModeEnabled,
   setScreenshotModeDisabled,
   KBN_SCREENSHOT_MODE_ENABLED_KEY,
-  KBN_SCREENSHOT_MODE_LAYOUT_KEY,
-  setScreenshotLayout,
-  getScreenshotLayout,
-} from './get_set_browser_screenshot_mode';
-
-export type { Layout } from './get_set_browser_screenshot_mode';
-
+} from './mode';
 export { KBN_SCREENSHOT_MODE_HEADER } from './constants';

src/plugins/screenshot_mode/common/get_set_browser_screenshot_mode.ts → src/plugins/screenshot_mode/common/mode.ts

@@ -12,6 +12,12 @@
 
 export const KBN_SCREENSHOT_MODE_ENABLED_KEY = '__KBN_SCREENSHOT_MODE_ENABLED_KEY__';
 
+declare global {
+  interface Window {
+    [KBN_SCREENSHOT_MODE_ENABLED_KEY]?: boolean;
+  }
+}
+
 /**
  * This function is responsible for detecting whether we are currently in screenshot mode.
  *
@@ -21,7 +27,7 @@ export const KBN_SCREENSHOT_MODE_ENABLED_KEY = '__KBN_SCREENSHOT_MODE_ENABLED_KE
  */
 export const getScreenshotMode = (): boolean => {
   return (
-    (window as unknown as Record<string, unknown>)[KBN_SCREENSHOT_MODE_ENABLED_KEY] === true ||
+    window[KBN_SCREENSHOT_MODE_ENABLED_KEY] === true ||
     window.localStorage.getItem(KBN_SCREENSHOT_MODE_ENABLED_KEY) === 'true'
   );
 };
@@ -61,31 +67,3 @@ export const setScreenshotModeDisabled = () => {
     }
   );
 };
-
-/** @deprecated */
-export const KBN_SCREENSHOT_MODE_LAYOUT_KEY = '__KBN_SCREENSHOT_MODE_LAYOUT_KEY__';
-
-/** @deprecated */
-export type Layout = 'canvas' | 'preserve_layout' | 'print';
-
-/** @deprecated */
-export const setScreenshotLayout = (value: Layout) => {
-  Object.defineProperty(
-    window,
-    '__KBN_SCREENSHOT_MODE_LAYOUT_KEY__', // Literal value to prevent adding an external reference
-    {
-      enumerable: true,
-      writable: true,
-      configurable: false,
-      value,
-    }
-  );
-};
-
-/** @deprecated */
-export const getScreenshotLayout = (): undefined | Layout => {
-  return (
-    (window as unknown as Record<string, Layout>)[KBN_SCREENSHOT_MODE_LAYOUT_KEY] ||
-    (window.localStorage.getItem(KBN_SCREENSHOT_MODE_LAYOUT_KEY) as Layout)
-  );
-};

src/plugins/screenshot_mode/public/mocks.ts

@@ -11,11 +11,11 @@ import type { ScreenshotModePluginSetup, ScreenshotModePluginStart } from './typ
 
 export const screenshotModePluginMock = {
   createSetupContract: (): DeeplyMockedKeys<ScreenshotModePluginSetup> => ({
-    getScreenshotLayout: jest.fn(),
+    getScreenshotContext: jest.fn(),
     isScreenshotMode: jest.fn(() => false),
   }),
   createStartContract: (): DeeplyMockedKeys<ScreenshotModePluginStart> => ({
-    getScreenshotLayout: jest.fn(),
+    getScreenshotContext: jest.fn(),
     isScreenshotMode: jest.fn(() => false),
   }),
 };

src/plugins/screenshot_mode/public/plugin.ts

@@ -6,16 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
-
-import { ScreenshotModePluginSetup, ScreenshotModePluginStart } from './types';
-
-import { getScreenshotMode, getScreenshotLayout } from '../common';
+import type { CoreSetup, CoreStart, Plugin } from 'src/core/public';
+import { getScreenshotContext, getScreenshotMode } from '../common';
+import type { ScreenshotModePluginSetup, ScreenshotModePluginStart } from './types';
 
 export class ScreenshotModePlugin implements Plugin<ScreenshotModePluginSetup> {
   private publicContract = Object.freeze({
+    getScreenshotContext,
     isScreenshotMode: () => getScreenshotMode() === true,
-    getScreenshotLayout,
   });
 
   public setup(core: CoreSetup): ScreenshotModePluginSetup {

src/plugins/screenshot_mode/public/types.ts

@@ -6,18 +6,20 @@
  * Side Public License, v 1.
  */
 
-import type { Layout } from '../common';
+export interface ScreenshotModePluginSetup {
+  /**
+   * Retrieves a value from the screenshotting context.
+   * @param key Context key to get.
+   * @param defaultValue Value to return if the key is not found.
+   * @return The value stored in the screenshotting context.
+   */
+  getScreenshotContext<T = unknown>(key: string, defaultValue?: T): T | undefined;
 
-export interface IScreenshotModeService {
   /**
    * Returns a boolean indicating whether the current user agent (browser) would like to view UI optimized for
    * screenshots or printing.
    */
-  isScreenshotMode: () => boolean;
-
-  /** @deprecated */
-  getScreenshotLayout: () => undefined | Layout;
+  isScreenshotMode(): boolean;
 }
 
-export type ScreenshotModePluginSetup = IScreenshotModeService;
-export type ScreenshotModePluginStart = IScreenshotModeService;
+export type ScreenshotModePluginStart = ScreenshotModePluginSetup;

src/plugins/screenshot_mode/server/is_screenshot_mode.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { KibanaRequest } from 'src/core/server';
+import type { KibanaRequest } from 'src/core/server';
 import { KBN_SCREENSHOT_MODE_HEADER } from '../common';
 
 export const isScreenshotMode = (request: KibanaRequest): boolean => {

src/plugins/screenshot_mode/server/plugin.ts

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { Plugin, CoreSetup } from '../../../core/server';
-import {
+import type { Plugin, CoreSetup } from 'src/core/server';
+import type {
   ScreenshotModeRequestHandlerContext,
   ScreenshotModePluginSetup,
   ScreenshotModePluginStart,
@@ -30,11 +30,11 @@ export class ScreenshotModePlugin
     // We use "require" here to ensure the import does not have external references due to code bundling that
     // commonly happens during transpiling. External references would be missing in the environment puppeteer creates.
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { setScreenshotModeEnabled, setScreenshotLayout } = require('../common');
+    const { setScreenshotContext, setScreenshotModeEnabled } = require('../common');
 
     return {
+      setScreenshotContext,
       setScreenshotModeEnabled,
-      setScreenshotLayout,
       isScreenshotMode,
     };
   }

src/plugins/screenshot_mode/server/types.ts

@@ -7,30 +7,29 @@
  */
 
 import type { RequestHandlerContext, KibanaRequest } from 'src/core/server';
-import type { Layout } from '../common';
 
-/**
- * Any context that requires access to the screenshot mode flag but does not have access
- * to request context {@link ScreenshotModeRequestHandlerContext}, for instance if they are pre-context,
- * can use this function to check whether the request originates from a client that is in screenshot mode.
- */
-type IsScreenshotMode = (request: KibanaRequest) => boolean;
+export interface ScreenshotModePluginStart {
+  /**
+   * Any context that requires access to the screenshot mode flag but does not have access
+   * to request context {@link ScreenshotModeRequestHandlerContext}, for instance if they are pre-context,
+   * can use this function to check whether the request originates from a client that is in screenshot mode.
+   */
+  isScreenshotMode(request: KibanaRequest): boolean;
+}
 
-export interface ScreenshotModePluginSetup {
-  isScreenshotMode: IsScreenshotMode;
+export interface ScreenshotModePluginSetup extends ScreenshotModePluginStart {
+  /**
+   * Stores a value in the screenshotting context.
+   * @param key Context key to set.
+   * @param value Value to set.
+   */
+  setScreenshotContext<T = unknown>(key: string, value: T): void;
 
   /**
    * Set the current environment to screenshot mode. Intended to run in a browser-environment, before any other scripts
    * on the page have run to ensure that screenshot mode is detected as early as possible.
    */
-  setScreenshotModeEnabled: () => void;
-
-  /** @deprecated */
-  setScreenshotLayout: (value: Layout) => void;
-}
-
-export interface ScreenshotModePluginStart {
-  isScreenshotMode: IsScreenshotMode;
+  setScreenshotModeEnabled(): void;
 }
 
 export interface ScreenshotModeRequestHandlerContext extends RequestHandlerContext {

x-pack/examples/reporting_example/kibana.json

@@ -17,6 +17,5 @@
     "navigation",
     "screenshotMode",
     "share"
-  ],
-  "requiredBundles": ["screenshotting"]
+  ]
 }

x-pack/examples/reporting_example/public/containers/main.tsx

@@ -40,7 +40,7 @@ import type {
   JobParamsPNGV2,
 } from '../../../../plugins/reporting/common/types';
 import type { ReportingStart } from '../../../../plugins/reporting/public';
-import { LayoutTypes } from '../../../../plugins/screenshotting/public';
+import { LayoutTypes } from '../../../../plugins/screenshotting/common';
 import { REPORTING_EXAMPLE_LOCATOR_ID } from '../../common';
 import { useApplicationContext } from '../application_context';
 import { ROUTES } from '../constants';

x-pack/plugins/reporting/public/plugin.ts

@@ -19,7 +19,7 @@ import {
   PluginInitializerContext,
   ThemeServiceStart,
 } from 'src/core/public';
-import type { ScreenshottingSetup } from '../../screenshotting/public';
+import type { ScreenshotModePluginSetup } from 'src/plugins/screenshot_mode/public';
 import { CONTEXT_MENU_TRIGGER } from '../../../../src/plugins/embeddable/public';
 import {
   FeatureCatalogueCategory,
@@ -79,7 +79,7 @@ export interface ReportingPublicPluginSetupDendencies {
   home: HomePublicPluginSetup;
   management: ManagementSetup;
   uiActions: UiActionsSetup;
-  screenshotting: ScreenshottingSetup;
+  screenshotMode: ScreenshotModePluginSetup;
   share: SharePluginSetup;
 }
 
@@ -152,7 +152,7 @@ export class ReportingPublicPlugin
     setupDeps: ReportingPublicPluginSetupDendencies
   ) {
     const { getStartServices, uiSettings } = core;
-    const { home, management, screenshotting, share, uiActions } = setupDeps;
+    const { home, management, screenshotMode, share, uiActions } = setupDeps;
 
     const startServices$ = Rx.from(getStartServices());
     const usesUiCapabilities = !this.config.roles.enabled;
@@ -209,7 +209,7 @@ export class ReportingPublicPlugin
       id: 'reportingRedirect',
       mount: async (params) => {
         const { mountRedirectApp } = await import('./redirect');
-        return mountRedirectApp({ ...params, apiClient, screenshotting, share });
+        return mountRedirectApp({ ...params, apiClient, screenshotMode, share });
       },
       title: 'Reporting redirect app',
       searchable: false,