Hide only TSVB controls, not charts (#14545)

* hide only TSVB controls, not charts

* revert format changes

* Update vis_editor_visualization.js

* walk back more style changes

* fix regression

* fix more regressions

* add new lines back

src/core_plugins/metrics/public/components/vis_editor.js

@@ -8,7 +8,6 @@ import brushHandler from '../lib/create_brush_handler';
 import { get } from 'lodash';
 
 class VisEditor extends Component {
-
   constructor(props) {
     super(props);
     const { appState } = props;
@@ -80,16 +79,14 @@ class VisEditor extends Component {
       );
     }
 
-
     const { model } = this.state;
 
     if (model && this.props.visData) {
       return (
         <div className="vis_editor">
-          <VisPicker
-            model={model}
-            onChange={handleChange}
-          />
+          <div className="vis-editor-hide-for-reporting">
+            <VisPicker model={model} onChange={handleChange} />
+          </div>
           <VisEditorVisualization
             dirty={this.state.dirty}
             autoApply={this.state.autoApply}
@@ -103,13 +100,15 @@ class VisEditor extends Component {
             onChange={handleChange}
             dateFormat={this.props.config.get('dateFormat')}
           />
-          <PanelConfig
-            fields={this.props.vis.fields}
-            model={model}
-            visData={this.props.visData}
-            dateFormat={this.props.config.get('dateFormat')}
-            onChange={handleChange}
-          />
+          <div className="vis-editor-hide-for-reporting">
+            <PanelConfig
+              fields={this.props.vis.fields}
+              model={model}
+              visData={this.props.visData}
+              dateFormat={this.props.config.get('dateFormat')}
+              onChange={handleChange}
+            />
+          </div>
         </div>
       );
     }
@@ -120,7 +119,6 @@ class VisEditor extends Component {
   componentDidMount() {
     this.props.renderComplete();
   }
-
 }
 
 VisEditor.defaultProps = {

src/core_plugins/metrics/public/components/vis_editor_visualization.js

@@ -6,7 +6,6 @@ import Toggle from 'react-toggle';
 import 'react-toggle/style.css';
 
 class VisEditorVisualization extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -97,7 +96,6 @@ class VisEditorVisualization extends Component {
       <div>
         <div
           style={style}
-          data-shared-item={true}
           ref={(el) => this.visDiv = el}
           className="vis_editor__visualization"
         >
@@ -113,14 +111,16 @@ class VisEditorVisualization extends Component {
             visData={this.props.visData}
           />
         </div>
-        {applyButton}
-        <div
-          aria-hidden="true"
-          className="vis_editor__visualization-draghandle"
-          onMouseDown={this.handleMouseDown}
-          onMouseUp={this.handleMouseUp}
-        >
-          <i className="fa fa-ellipsis-h" />
+        <div className="vis-editor-hide-for-reporting">
+          {applyButton}
+          <div
+            aria-hidden="true"
+            className="vis_editor__visualization-draghandle"
+            onMouseDown={this.handleMouseDown}
+            onMouseUp={this.handleMouseUp}
+          >
+            <i className="fa fa-ellipsis-h" />
+          </div>
         </div>
       </div>
     );

src/ui/public/visualize/visualize.html

@@ -17,4 +17,3 @@
   search-source="savedObj.searchSource"
   show-spy-panel="shouldShowSpyPanel()"
 />
-