[Screenshot mode] Create plugin to provide "screenshot mode" awareness

docs/developer/plugin-list.asciidoc

@@ -181,6 +181,10 @@ Content is fetched from the remote (https://feeds.elastic.co and https://feeds-s
 oss plugins.
 
 
+|{kib-repo}blob/{branch}/src/plugins/screenshot_mode/README.md[screenshotMode]
+|The service exposed by this plugin informs consumers whether they should optimize for non-interactivity. In this way plugins can avoid loading unnecessary code, data or other services.
+
+
 |{kib-repo}blob/{branch}/src/plugins/security_oss/README.md[securityOss]
 |securityOss is responsible for educating users about Elastic's free security features,
 so they can properly protect the data within their clusters.

examples/screenshot_mode_example/.i18nrc.json

@@ -0,0 +1,7 @@
+{
+  "prefix": "screenshotModeExample",
+  "paths": {
+    "screenshotModeExample": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}

examples/screenshot_mode_example/README.md

@@ -0,0 +1,9 @@
+# screenshotModeExample
+
+A Kibana plugin
+
+---
+
+## Development
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment.

examples/screenshot_mode_example/common/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export const PLUGIN_NAME = 'Screenshot mode example app';
+
+export const BASE_API_ROUTE = '/api/screenshot_mode_example';

examples/screenshot_mode_example/kibana.json

@@ -0,0 +1,9 @@
+{
+  "id": "screenshotModeExample",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": ["navigation", "screenshotMode", "usageCollection"],
+  "optionalPlugins": []
+}

examples/screenshot_mode_example/public/application.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 React from 'react';
+import ReactDOM from 'react-dom';
+import { AppMountParameters, CoreStart } from '../../../src/core/public';
+import { AppPluginSetupDependencies, AppPluginStartDependencies } from './types';
+import { ScreenshotModeExampleApp } from './components/app';
+
+export const renderApp = (
+  { notifications, http }: CoreStart,
+  { screenshotMode }: AppPluginSetupDependencies,
+  { navigation }: AppPluginStartDependencies,
+  { appBasePath, element }: AppMountParameters
+) => {
+  ReactDOM.render(
+    <ScreenshotModeExampleApp
+      basename={appBasePath}
+      notifications={notifications}
+      http={http}
+      navigation={navigation}
+      screenshotMode={screenshotMode}
+    />,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

examples/screenshot_mode_example/public/components/app.tsx

@@ -0,0 +1,122 @@
+/*
+ * 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 React, { useEffect } from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageHeader,
+  EuiTitle,
+  EuiText,
+} from '@elastic/eui';
+
+import { CoreStart } from '../../../../src/core/public';
+import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
+import {
+  ScreenshotModePluginSetup,
+  KBN_SCREENSHOT_MODE_HEADER,
+} from '../../../../src/plugins/screenshot_mode/public';
+
+import { PLUGIN_NAME, BASE_API_ROUTE } from '../../common';
+
+interface ScreenshotModeExampleAppDeps {
+  basename: string;
+  notifications: CoreStart['notifications'];
+  http: CoreStart['http'];
+  navigation: NavigationPublicPluginStart;
+  screenshotMode: ScreenshotModePluginSetup;
+}
+
+export const ScreenshotModeExampleApp = ({
+  basename,
+  notifications,
+  http,
+  navigation,
+  screenshotMode,
+}: ScreenshotModeExampleAppDeps) => {
+  const isScreenshotMode = screenshotMode.isScreenshotMode();
+
+  useEffect(() => {
+    // fire and forget
+    http.get(`${BASE_API_ROUTE}/check_is_screenshot`, {
+      headers: isScreenshotMode ? { [KBN_SCREENSHOT_MODE_HEADER]: 'true' } : undefined,
+    });
+    notifications.toasts.addInfo({
+      title: 'Welcome to the screenshot example app!',
+      text: isScreenshotMode
+        ? 'In screenshot mode we want this to remain visible'
+        : 'In normal mode this toast will disappear eventually',
+      toastLifeTimeMs: isScreenshotMode ? 360000 : 3000,
+    });
+  }, [isScreenshotMode, notifications, http]);
+  return (
+    <Router basename={basename}>
+      <I18nProvider>
+        <>
+          <navigation.ui.TopNavMenu
+            appName={PLUGIN_NAME}
+            showSearchBar={true}
+            useDefaultBehaviors={true}
+          />
+          <EuiPage restrictWidth="1000px">
+            <EuiPageBody>
+              <EuiPageHeader>
+                <EuiTitle size="l">
+                  <h1>
+                    <FormattedMessage
+                      id="screenshotModeExample.helloWorldText"
+                      defaultMessage="{name}"
+                      values={{ name: PLUGIN_NAME }}
+                    />
+                  </h1>
+                </EuiTitle>
+              </EuiPageHeader>
+              <EuiPageContent>
+                <EuiPageContentHeader>
+                  <EuiTitle>
+                    <h2>
+                      {isScreenshotMode ? (
+                        <FormattedMessage
+                          id="screenshotModeExample.screenshotModeTitle"
+                          defaultMessage="We are in screenshot mode!"
+                        />
+                      ) : (
+                        <FormattedMessage
+                          id="screenshotModeExample.normalModeTitle"
+                          defaultMessage="We are not in screenshot mode!"
+                        />
+                      )}
+                    </h2>
+                  </EuiTitle>
+                </EuiPageContentHeader>
+                <EuiPageContentBody>
+                  <EuiText>
+                    {isScreenshotMode ? (
+                      <p>We detected screenshot mode. The chrome navbar should be hidden.</p>
+                    ) : (
+                      <p>
+                        This is how the app looks in normal mode. The chrome navbar should be
+                        visible.
+                      </p>
+                    )}
+                  </EuiText>
+                </EuiPageContentBody>
+              </EuiPageContent>
+            </EuiPageBody>
+          </EuiPage>
+        </>
+      </I18nProvider>
+    </Router>
+  );
+};

examples/screenshot_mode_example/public/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 './index.scss';
+
+import { ScreenshotModeExamplePlugin } from './plugin';
+
+// This exports static code and TypeScript types,
+// as well as, Kibana Platform `plugin()` initializer.
+export function plugin() {
+  return new ScreenshotModeExamplePlugin();
+}

examples/screenshot_mode_example/public/plugin.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
+import { AppPluginSetupDependencies, AppPluginStartDependencies } from './types';
+import { MetricsTracking } from './services';
+import { PLUGIN_NAME } from '../common';
+
+export class ScreenshotModeExamplePlugin implements Plugin<void, void> {
+  uiTracking = new MetricsTracking();
+
+  public setup(core: CoreSetup, depsSetup: AppPluginSetupDependencies): void {
+    const { screenshotMode, usageCollection } = depsSetup;
+    const isScreenshotMode = screenshotMode.isScreenshotMode();
+
+    this.uiTracking.setup({
+      disableTracking: isScreenshotMode, // In screenshot mode there will be no user interactions to track
+      usageCollection,
+    });
+
+    // Register an application into the side navigation menu
+    core.application.register({
+      id: 'screenshotModeExample',
+      title: PLUGIN_NAME,
+      async mount(params: AppMountParameters) {
+        // Load application bundle
+        const { renderApp } = await import('./application');
+        // Get start services as specified in kibana.json
+        const [coreStart, depsStart] = await core.getStartServices();
+
+        // For screenshots we don't need to have the top bar visible
+        coreStart.chrome.setIsVisible(!isScreenshotMode);
+
+        // Render the application
+        return renderApp(coreStart, depsSetup, depsStart as AppPluginStartDependencies, params);
+      },
+    });
+  }
+
+  public start(core: CoreStart): void {}
+
+  public stop() {}
+}

examples/screenshot_mode_example/public/services/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { MetricsTracking } from './metrics_tracking';

examples/screenshot_mode_example/public/services/metrics_tracking.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 { UiCounterMetricType, METRIC_TYPE } from '@kbn/analytics';
+import { PLUGIN_NAME } from '../../common';
+import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
+
+export class MetricsTracking {
+  private trackingDisabled = false;
+  private usageCollection?: UsageCollectionSetup;
+
+  private track(eventName: string, type: UiCounterMetricType) {
+    if (this.trackingDisabled) return;
+
+    this.usageCollection?.reportUiCounter(PLUGIN_NAME, type, eventName);
+  }
+
+  public setup({
+    disableTracking,
+    usageCollection,
+  }: {
+    disableTracking?: boolean;
+    usageCollection: UsageCollectionSetup;
+  }) {
+    this.usageCollection = usageCollection;
+    if (disableTracking) this.trackingDisabled = true;
+  }
+
+  public trackInit() {
+    this.track('init', METRIC_TYPE.LOADED);
+  }
+}

examples/screenshot_mode_example/public/types.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
+import { ScreenshotModePluginSetup } from '../../../src/plugins/screenshot_mode/public';
+import { UsageCollectionSetup } from '../../../src/plugins/usage_collection/public';
+
+export interface AppPluginSetupDependencies {
+  usageCollection: UsageCollectionSetup;
+  screenshotMode: ScreenshotModePluginSetup;
+}
+
+export interface AppPluginStartDependencies {
+  navigation: NavigationPublicPluginStart;
+}

examples/screenshot_mode_example/server/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 { PluginInitializerContext } from 'kibana/server';
+import { ScreenshotModeExamplePlugin } from './plugin';
+
+export const plugin = (ctx: PluginInitializerContext) => new ScreenshotModeExamplePlugin(ctx);

examples/screenshot_mode_example/server/plugin.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 { Plugin, PluginInitializerContext, CoreSetup, Logger } from 'kibana/server';
+import { ScreenshotModePluginSetup } from '../../../src/plugins/screenshot_mode/server';
+import { RouteDependencies } from './types';
+import { registerRoutes } from './routes';
+
+export class ScreenshotModeExamplePlugin implements Plugin<void, void> {
+  log: Logger;
+  constructor(ctx: PluginInitializerContext) {
+    this.log = ctx.logger.get();
+  }
+  setup(core: CoreSetup, { screenshotMode }: { screenshotMode: ScreenshotModePluginSetup }): void {
+    const deps: RouteDependencies = {
+      screenshotMode,
+      router: core.http.createRouter(),
+      log: this.log,
+    };
+
+    registerRoutes(deps);
+  }
+
+  start() {}
+  stop() {}
+}