Fix TSVB Visualizations to honor darkTheme (#12804)

* Fixes #12802 - Fix TSVB Visualizations to honor darkTheme

* Sometimes appState doesn't exist

* Fixes #12762 - Fixing propTypes to match props being passed

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

@@ -4,13 +4,36 @@ import Visualization from './visualization';
 import VisPicker from './vis_picker';
 import PanelConfig from './panel_config';
 import brushHandler from '../lib/create_brush_handler';
+import { get } from 'lodash';
 
 class VisEditor extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { model: props.vis.params, dirty: false, autoApply: true };
+    const { appState } = props;
+    const reversed = get(appState, 'options.darkTheme', false);
+    this.state = { model: props.vis.params, dirty: false, autoApply: true, reversed };
     this.onBrush = brushHandler(props.vis.API.timeFilter);
+    this.handleAppStateChange = this.handleAppStateChange.bind(this);
+  }
+
+  componentWillMount() {
+    const { appState } = this.props;
+    if (appState) {
+      this.appState = appState;
+      this.appState.on('save_with_changes', this.handleAppStateChange);
+    }
+  }
+
+  handleAppStateChange() {
+    const reversed = get(this.appState, 'options.darkTheme', false);
+    this.setState({ reversed });
+  }
+
+  componentWillUnmount() {
+    if (this.appState) {
+      this.appState.off('save_with_changes', this.handleAppStateChange);
+    }
   }
 
   render() {
@@ -35,8 +58,10 @@ class VisEditor extends Component {
     };
 
     if (!this.props.vis.isEditorMode()) {
+      const reversed = this.state.reversed;
       return (
         <Visualization
+          reversed={reversed}
           onBrush={this.onBrush}
           fields={this.props.vis.fields}
           model={this.props.vis.params}
@@ -81,15 +106,10 @@ class VisEditor extends Component {
 }
 
 VisEditor.propTypes = {
-  fields: PropTypes.object,
-  model: PropTypes.object,
-  onBrush: PropTypes.func,
-  onChange: PropTypes.func,
-  onCommit: PropTypes.func,
-  onToggleAutoApply: PropTypes.func,
+  vis: PropTypes.object,
   visData: PropTypes.object,
-  dirty: PropTypes.bool,
-  autoApply: PropTypes.bool
+  appState: PropTypes.object,
+  renderComplete: PropTypes.func,
 };
 
 export default VisEditor;

src/ui/public/vis/vis_types/react_vis_type.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { VisTypeProvider } from 'ui/vis/vis_types';
 
-export function ReactVisTypeProvider(Private) {
+export function ReactVisTypeProvider(Private, getAppState) {
   const VisType = Private(VisTypeProvider);
 
   class ReactVisController {
@@ -17,7 +17,7 @@ export function ReactVisTypeProvider(Private) {
       return new Promise((resolve, reject) => {
         if (!this.visData) return reject();
         const Component = this.vis.type.visConfig.component;
-        render(<Component vis={this.vis} visData={visData} renderComplete={resolve} />, this.el);
+        render(<Component vis={this.vis} appState={getAppState()} visData={visData} renderComplete={resolve} />, this.el);
       });
     }