[Reporting/Dashboard] Use Chromium for print-optimized PDFs

.github/CODEOWNERS

@@ -83,6 +83,7 @@
 /x-pack/plugins/ui_actions_enhanced/ @elastic/kibana-app-services
 /x-pack/plugins/runtime_fields @elastic/kibana-app-services
 /x-pack/test/search_sessions_integration/ @elastic/kibana-app-services
+/src/plugins/dashboard/public/application/embeddable/viewport/print_media @elastic/kibana-app-services
 
 ### Observability Plugins
 

package.json

@@ -338,6 +338,7 @@
     "p-retry": "^4.2.0",
     "papaparse": "^5.2.0",
     "pbf": "3.2.1",
+    "pdfjs-dist": "^2.13.216",
     "pdfmake": "^0.2.4",
     "peggy": "^1.2.0",
     "pluralize": "3.1.0",

src/dev/precommit_hook/casing_check_config.js

@@ -146,10 +146,10 @@ export const TEMPORARILY_IGNORED_PATHS = [
   'x-pack/plugins/monitoring/public/icons/health-green.svg',
   'x-pack/plugins/monitoring/public/icons/health-red.svg',
   'x-pack/plugins/monitoring/public/icons/health-yellow.svg',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/noto/NotoSansCJKtc-Medium.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/noto/NotoSansCJKtc-Regular.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/roboto/Roboto-Italic.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/roboto/Roboto-Medium.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/fonts/roboto/Roboto-Regular.ttf',
-  'x-pack/plugins/screenshotting/server/formats/pdf/pdf_maker/assets/img/logo-grey.png',
+  'x-pack/plugins/screenshotting/server/assets/fonts/noto/NotoSansCJKtc-Medium.ttf',
+  'x-pack/plugins/screenshotting/server/assets/fonts/noto/NotoSansCJKtc-Regular.ttf',
+  'x-pack/plugins/screenshotting/server/assets/fonts/roboto/Roboto-Italic.ttf',
+  'x-pack/plugins/screenshotting/server/assets/fonts/roboto/Roboto-Medium.ttf',
+  'x-pack/plugins/screenshotting/server/assets/fonts/roboto/Roboto-Regular.ttf',
+  'x-pack/plugins/screenshotting/server/assets/img/logo-grey.png',
 ];

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

@@ -119,13 +119,12 @@ export function DashboardApp({
     <>
       {isCompleteDashboardAppState(dashboardAppState) && (
         <>
-          {!printMode && (
-            <DashboardTopNav
-              redirectTo={redirectTo}
-              embedSettings={embedSettings}
-              dashboardAppState={dashboardAppState}
-            />
-          )}
+          <DashboardTopNav
+            printMode={printMode}
+            redirectTo={redirectTo}
+            embedSettings={embedSettings}
+            dashboardAppState={dashboardAppState}
+          />
 
           {dashboardAppState.savedDashboard.outcome === 'conflict' &&
           dashboardAppState.savedDashboard.id &&

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

@@ -1,9 +1,68 @@
-.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;
+@import './print_media/styling/index';
 
-    // Some vertical space between vis, but center horizontally
-    margin: 10px auto;
+$visualisationsPerPage: 2;
+$visPadding: 4mm;
+
+/*
+We set the same visual padding on the browser and print versions of the UI so that
+we don't hit a race condition where padding is being updated while the print image
+is being formed. This can result in parts of the vis being cut out.
+*/
+@mixin visualizationPadding {
+  // Open space from page margin
+  padding-left: $visPadding;
+  padding-right: $visPadding;
+
+  // Last vis on the page
+  &:nth-child(#{$visualisationsPerPage}n) {
+    page-break-after: always;
+    padding-top: $visPadding;
+    padding-bottom: $visPadding;
+  }
+
+  &:last-child {
+    page-break-after: avoid;
+  }
+}
+
+@media screen, projection {
+  .printViewport {
+    &__vis {
+      @include visualizationPadding();
+
+      & .embPanel__header button {
+        display: none;
+      }
+
+      margin: $euiSizeL auto;
+      height: calc(#{$a4PageContentHeight} / #{$visualisationsPerPage});
+      width: $a4PageContentWidth;
+      padding: $visPadding;
+    }
+  }
+}
+
+@media print {
+  .printViewport {
+    &__vis {
+      @include visualizationPadding();
+
+      height: calc(#{$a4PageContentHeight} / #{$visualisationsPerPage});
+      width: $a4PageContentWidth;
+
+      & .euiPanel {
+        box-shadow: none !important;
+      }
+
+      & .embPanel__header button {
+        display: none;
+      }
+
+      page-break-inside: avoid;
+
+      & * {
+        overflow: hidden !important;
+      }
+    }
   }
 }

src/plugins/dashboard/public/application/embeddable/viewport/print_media/README.md

@@ -0,0 +1,7 @@
+# Print media
+
+The code here is designed to be movable outside the domain of Dashboard. Currently,
+the components and styles are only used by Dashboard but we may choose to move them to,
+for example, a Kibana package in the future.
+
+Any changes to this code must be tested by generating a print-optimized PDF in dashboard.

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

@@ -0,0 +1,52 @@
+@import './vars';
+
+/*
+This styling contains utility and minimal layout styles to help plugins create
+print-ready HTML.
+
+Observations:
+1. We currently do not control the user-agent's header and footer content
+   (including the style of fonts) for client-side printing.
+
+2. Page box model is quite different from what we have in browsers - page
+   margins define where the "no-mans-land" exists for actual content. Moving
+   content into this space by, for example setting negative margins resulted
+   in slightly unpredictable behaviour because the browser wants to either
+   move this content to another page or it may get split across two
+   pages.
+
+3. page-break-* is your friend!
+*/
+
+// Currently we cannot control or style the content the browser places in
+// margins, this might change in the future:
+// See https://drafts.csswg.org/css-page-3/#margin-boxes
+@page {
+  size: A4;
+  orientation: portrait;
+  margin: 0;
+  margin-top: $a4PageHeaderHeight;
+  margin-bottom: $a4PageFooterHeight;
+}
+
+@media print {
+
+  html {
+    background-color: #FFF;
+  }
+
+  // It is good practice to show the full URL in the final, printed output
+  a[href]:after {
+    content: ' [' attr(href) ']';
+  }
+
+  figure {
+    page-break-inside: avoid;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari, Edge */
+    color-adjust: exact !important;                 /*Firefox*/
+  }
+
+}

src/plugins/dashboard/public/application/embeddable/viewport/print_media/styling/_vars.scss

@@ -0,0 +1,10 @@
+
+$a4PageHeight: 297mm;
+$a4PageWidth: 210mm;
+$a4PageMargin: 0;
+$a4PagePadding: 0;
+$a4PageHeaderHeight: 15mm;
+$a4PageFooterHeight: 20mm;
+
+$a4PageContentHeight: $a4PageHeight - $a4PageHeaderHeight - $a4PageFooterHeight;
+$a4PageContentWidth: $a4PageWidth;

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

@@ -183,8 +183,7 @@ export const useDashboardAppState = ({
         savedDashboard,
       });
 
-      // Backwards compatible way of detecting that we are taking a screenshot
-      const legacyPrintLayoutDetected =
+      const printLayoutDetected =
         screenshotModeService?.isScreenshotMode() &&
         screenshotModeService.getScreenshotContext('layout') === 'print';
 
@@ -194,8 +193,7 @@ export const useDashboardAppState = ({
         ...initialDashboardStateFromUrl,
         ...forwardedAppState,
 
-        // if we are in legacy print mode, dashboard needs to be in print viewMode
-        ...(legacyPrintLayoutDetected ? { viewMode: ViewMode.PRINT } : {}),
+        ...(printLayoutDetected ? { viewMode: ViewMode.PRINT } : {}),
 
         // if there is an incoming embeddable, dashboard always needs to be in edit mode to receive it.
         ...(incomingEmbeddable ? { viewMode: ViewMode.EDIT } : {}),

src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx

@@ -82,6 +82,7 @@ export interface DashboardTopNavProps {
   dashboardAppState: CompleteDashboardAppState;
   embedSettings?: DashboardEmbedSettings;
   redirectTo: DashboardRedirect;
+  printMode: boolean;
 }
 
 const LabsFlyout = withSuspense(LazyLabsFlyout, null);
@@ -90,6 +91,7 @@ export function DashboardTopNav({
   dashboardAppState,
   embedSettings,
   redirectTo,
+  printMode,
 }: DashboardTopNavProps) {
   const {
     core,
@@ -488,7 +490,9 @@ export function DashboardTopNav({
 
     const isFullScreenMode = dashboardState.fullScreenMode;
     const showTopNavMenu = shouldShowNavBarComponent(Boolean(embedSettings?.forceShowTopNavMenu));
-    const showQueryInput = shouldShowNavBarComponent(Boolean(embedSettings?.forceShowQueryInput));
+    const showQueryInput = shouldShowNavBarComponent(
+      Boolean(embedSettings?.forceShowQueryInput || printMode)
+    );
     const showDatePicker = shouldShowNavBarComponent(Boolean(embedSettings?.forceShowDatePicker));
     const showFilterBar = shouldShowFilterBar(Boolean(embedSettings?.forceHideFilterBar));
     const showQueryBar = showQueryInput || showDatePicker || showFilterBar;
@@ -535,6 +539,7 @@ export function DashboardTopNav({
       useDefaultBehaviors: true,
       savedQuery: state.savedQuery,
       savedQueryId: dashboardState.savedQuery,
+      visible: printMode !== true,
       onQuerySubmit: (_payload, isUpdate) => {
         if (isUpdate === false) {
           dashboardAppState.$triggerDashboardRefresh.next({ force: true });
@@ -585,10 +590,10 @@ export function DashboardTopNav({
   return (
     <>
       <TopNavMenu {...getNavBarProps()} />
-      {isLabsEnabled && isLabsShown ? (
+      {!printMode && isLabsEnabled && isLabsShown ? (
         <LabsFlyout solutions={['dashboard']} onClose={() => setIsLabsShown(false)} />
       ) : null}
-      {dashboardState.viewMode !== ViewMode.VIEW ? (
+      {dashboardState.viewMode !== ViewMode.VIEW && !printMode ? (
         <>
           <EuiHorizontalRule margin="none" />
           <SolutionToolbar isDarkModeEnabled={IS_DARK_THEME}>

src/plugins/navigation/public/top_nav_menu/_index.scss

@@ -4,6 +4,12 @@
   }
 }
 
+.kbnTopNavMenu__wrapper {
+  &--hidden {
+    display: none;
+  }
+}
+
 .kbnTopNavMenu__badgeWrapper {
   display: flex;
   align-items: baseline;

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx

@@ -28,6 +28,7 @@ export type TopNavMenuProps = StatefulSearchBarProps &
     showFilterBar?: boolean;
     unifiedSearch?: UnifiedSearchPublicPluginStart;
     className?: string;
+    visible?: boolean;
     /**
      * If provided, the menu part of the component will be rendered as a portal inside the given mount point.
      *
@@ -105,9 +106,11 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
   }
 
   function renderLayout() {
-    const { setMenuMountPoint } = props;
+    const { setMenuMountPoint, visible } = props;
     const menuClassName = classNames('kbnTopNavMenu', props.className);
-    const wrapperClassName = 'kbnTopNavMenu__wrapper';
+    const wrapperClassName = classNames('kbnTopNavMenu__wrapper', {
+      'kbnTopNavMenu__wrapper--hidden': visible === false,
+    });
     if (setMenuMountPoint) {
       return (
         <>

src/plugins/unified_search/kibana.json

@@ -9,7 +9,7 @@
   },
   "server": true,
   "ui": true,
-  "requiredPlugins": ["dataViews", "data", "uiActions"],
+  "requiredPlugins": ["dataViews", "data", "uiActions", "screenshotMode"],
   "requiredBundles": ["kibanaUtils", "kibanaReact", "data"],
   "serviceFolders": ["autocomplete"],
   "configPath": ["unifiedSearch"]

src/plugins/unified_search/public/plugin.ts

@@ -55,7 +55,7 @@ export class UnifiedSearchPublicPlugin
 
   public start(
     core: CoreStart,
-    { data, dataViews, uiActions }: UnifiedSearchStartDependencies
+    { data, dataViews, uiActions, screenshotMode }: UnifiedSearchStartDependencies
   ): UnifiedSearchPublicPluginStart {
     setTheme(core.theme);
     setOverlays(core.overlays);
@@ -68,6 +68,7 @@ export class UnifiedSearchPublicPlugin
       data,
       storage: this.storage,
       usageCollection: this.usageCollection,
+      isScreenshotMode: Boolean(screenshotMode?.isScreenshotMode()),
     });
 
     uiActions.addTriggerAction(

src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx

@@ -87,6 +87,7 @@ export interface QueryBarTopRowProps {
   filterBar?: React.ReactNode;
   showDatePickerAsBadge?: boolean;
   showSubmitButton?: boolean;
+  isScreenshotMode?: boolean;
 }
 
 const SharingMetaFields = React.memo(function SharingMetaFields({
@@ -474,32 +475,38 @@ export const QueryBarTopRow = React.memo(
       );
     }
 
+    const isScreenshotMode = props.isScreenshotMode === true;
+
     return (
       <>
         <SharingMetaFields
           from={currentDateRange.from}
           to={currentDateRange.to}
           dateFormat={uiSettings.get('dateFormat')}
         />
-        <EuiFlexGroup
-          className="kbnQueryBar"
-          direction={isMobile && !shouldShowDatePickerAsBadge() ? 'column' : 'row'}
-          responsive={false}
-          gutterSize="s"
-          justifyContent={shouldShowDatePickerAsBadge() ? 'flexStart' : 'flexEnd'}
-          wrap
-        >
-          {renderDataViewsPicker()}
-          <EuiFlexItem
-            grow={!shouldShowDatePickerAsBadge()}
-            style={{ minWidth: shouldShowDatePickerAsBadge() ? 'auto' : 320 }}
-          >
-            {renderQueryInput()}
-          </EuiFlexItem>
-          {shouldShowDatePickerAsBadge() && props.filterBar}
-          {renderUpdateButton()}
-        </EuiFlexGroup>
-        {!shouldShowDatePickerAsBadge() && props.filterBar}
+        {!isScreenshotMode && (
+          <>
+            <EuiFlexGroup
+              className="kbnQueryBar"
+              direction={isMobile && !shouldShowDatePickerAsBadge() ? 'column' : 'row'}
+              responsive={false}
+              gutterSize="s"
+              justifyContent={shouldShowDatePickerAsBadge() ? 'flexStart' : 'flexEnd'}
+              wrap
+            >
+              {renderDataViewsPicker()}
+              <EuiFlexItem
+                grow={!shouldShowDatePickerAsBadge()}
+                style={{ minWidth: shouldShowDatePickerAsBadge() ? 'auto' : 320 }}
+              >
+                {renderQueryInput()}
+              </EuiFlexItem>
+              {shouldShowDatePickerAsBadge() && props.filterBar}
+              {renderUpdateButton()}
+            </EuiFlexGroup>
+            {!shouldShowDatePickerAsBadge() && props.filterBar}
+          </>
+        )}
       </>
     );
   },