Fix/reporting vis preserve (#30456) (#30552)

* add state field for isPreserveLayoutSupported

* doc updates

docs/reporting/getting-started.asciidoc

@@ -31,7 +31,7 @@ image:reporting/images/share-button.png["Reporting Button",link="share-button.pn
 .. If you're on Visualize or Dashboard:
   ... Select *PDF Reports*
 
-  ... Choose to enable *Optimize for printing* layout mode. For an explanation of the different layout modes, see <<pdf-layout-modes, PDF Layout Modes>>.
+  ... Dashboard only: Choose to enable *Optimize for printing* layout mode. For an explanation of the different layout modes, see <<pdf-layout-modes, PDF Layout Modes>>.
 
   ... Click the *Generate PDF* button.
 

docs/reporting/pdf-layout-modes.asciidoc

@@ -1,7 +1,7 @@
 [[pdf-layout-modes]]
 == PDF Layout Modes
 
-When creating a PDF report, there are two layout modes *Optimize PDF for printing* and *Preserve existing layout in PDF*
+When creating a PDF report of a dashboard, there are two layout modes: *Optimize PDF for printing* and *Preserve existing layout in PDF*
 
 --
 [role="screenshot"]
@@ -27,3 +27,5 @@ This will create a PDF preserving the existing layout and size of the Visualizat
 [role="screenshot"]
 image:reporting/images/preserve-layout.png["Preserve existing layout in PDF",link="preserve-layout.png"]
 --
+
+When creating a PNG or a PDF report of a visualization, the "Optimize for printing" option will automatically be used.

x-pack/plugins/reporting/public/components/screen_capture_panel_content.tsx

@@ -19,6 +19,7 @@ interface Props {
 }
 
 interface State {
+  isPreserveLayoutSupported: boolean;
   usePrintLayout: boolean;
 }
 
@@ -26,7 +27,10 @@ export class ScreenCapturePanelContent extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
+    const isPreserveLayoutSupported =
+      props.reportType !== 'png' && props.objectType !== 'visualization';
     this.state = {
+      isPreserveLayoutSupported,
       usePrintLayout: false,
     };
   }
@@ -47,13 +51,7 @@ export class ScreenCapturePanelContent extends Component<Props, State> {
   }
 
   private renderOptions = () => {
-    if (this.props.reportType === 'png') {
-      return (
-        <Fragment>
-          <EuiSpacer size="s" />
-        </Fragment>
-      );
-    } else {
+    if (this.state.isPreserveLayoutSupported) {
       return (
         <Fragment>
           <EuiSwitch
@@ -71,6 +69,12 @@ export class ScreenCapturePanelContent extends Component<Props, State> {
         </Fragment>
       );
     }
+
+    return (
+      <Fragment>
+        <EuiSpacer size="s" />
+      </Fragment>
+    );
   };
 
   private handlePrintLayoutChange = (evt: any) => {
@@ -85,22 +89,13 @@ export class ScreenCapturePanelContent extends Component<Props, State> {
     const el = document.querySelector('[data-shared-items-container]');
     const bounds = el ? el.getBoundingClientRect() : { height: 768, width: 1024 };
 
-    if (this.props.reportType === 'png') {
-      return {
-        dimensions: {
-          height: bounds.height,
-          width: bounds.width,
-        },
-      };
-    } else {
-      return {
-        id: 'preserve_layout',
-        dimensions: {
-          height: bounds.height,
-          width: bounds.width,
-        },
-      };
-    }
+    return {
+      id: this.props.reportType === 'png' ? 'png' : 'preserve_layout',
+      dimensions: {
+        height: bounds.height,
+        width: bounds.width,
+      },
+    };
   };
 
   private getJobParams = () => {