fix merge conflicts (#22062)

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

@@ -29,8 +29,9 @@ import { get } from 'lodash';
 class VisEditor extends Component {
   constructor(props) {
     super(props);
-    const { appState } = props;
-    const reversed = get(appState, 'options.darkTheme', false);
+    const { vis } = props;
+    this.appState = vis.API.getAppState();
+    const reversed = get(this.appState, 'options.darkTheme', false);
     this.state = { model: props.vis.params, dirty: false, autoApply: true, reversed };
     this.onBrush = brushHandler(props.vis.API.timeFilter);
     this.handleUiState = this.handleUiState.bind(this, props.vis);
@@ -42,9 +43,7 @@ class VisEditor extends Component {
   }
 
   componentWillMount() {
-    const { appState } = this.props;
-    if (appState) {
-      this.appState = appState;
+    if (this.appState) {
       this.appState.on('save_with_changes', this.handleAppStateChange);
     }
   }
@@ -110,7 +109,7 @@ class VisEditor extends Component {
             dirty={this.state.dirty}
             autoApply={this.state.autoApply}
             model={model}
-            appState={this.props.appState}
+            appState={this.appState}
             savedObj={this.props.savedObj}
             timeRange={this.props.timeRange}
             onUiState={this.handleUiState}
@@ -155,7 +154,6 @@ VisEditor.defaultProps = {
 VisEditor.propTypes = {
   vis: PropTypes.object,
   visData: PropTypes.object,
-  appState: PropTypes.object,
   renderComplete: PropTypes.func,
   config: PropTypes.object,
   isEditorMode: PropTypes.bool,

src/core_plugins/metrics/public/visualizations/components/timeseries.js

@@ -137,7 +137,7 @@ class Timeseries extends Component {
       }
     }, { bottomLegend: this.props.legendPosition === 'bottom' });
     return (
-      <div className={className}>
+      <div className={className} data-test-subj="timeseriesChart">
         <div style={styles.content} className="rhythm_chart__content">
           <div className="rhythm_chart__visualization">
             <TimeseriesChart

src/ui/public/vis/vis.js

@@ -117,6 +117,7 @@ export function VisProvider(Private, indexPatterns, getAppState) {
           }
         },
         inspectorAdapters: this._getActiveInspectorAdapters(),
+        getAppState,
       };
     }
 

test/functional/apps/dashboard/_dark_theme.js

@@ -0,0 +1,48 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import expect from 'expect.js';
+
+export default function ({ getService, getPageObjects }) {
+  const testSubjects = getService('testSubjects');
+  const dashboardAddPanel = getService('dashboardAddPanel');
+  const PageObjects = getPageObjects(['dashboard']);
+
+  describe('dark theme', async () => {
+    before(async () => {
+      await PageObjects.dashboard.clickNewDashboard();
+    });
+
+    after(async () => {
+      await dashboardAddPanel.closeAddPanel();
+      await PageObjects.dashboard.gotoDashboardLandingPage();
+    });
+
+    // Visual builder applies dark theme by investigating appState for 'options.darkTheme'
+    // This test ensures everything is properly wired together and Visual Builder adds dark theme classes
+    it('should display Visual Builder timeseries with reversed class', async () => {
+      await dashboardAddPanel.addVisualization('Rendering Test: tsvb-ts');
+      await PageObjects.dashboard.useDarkTheme(true);
+      const classNames = await testSubjects.getAttribute('timeseriesChart', 'class');
+      expect(classNames.includes('reversed')).to.be(true);
+    });
+
+  });
+}
+

test/functional/apps/dashboard/index.js

@@ -42,6 +42,7 @@ export default function ({ getService, loadTestFile, getPageObjects }) {
 
       // This has to be first since the other tests create some embeddables as side affects and our counting assumes
       // a fresh index.
+      loadTestFile(require.resolve('./_dark_theme'));
       loadTestFile(require.resolve('./_embeddable_rendering'));
       loadTestFile(require.resolve('./_create_and_add_embeddables'));
       loadTestFile(require.resolve('./_time_zones'));