diff --git a/src/legacy/core_plugins/metrics/public/components/annotations_editor.js b/src/legacy/core_plugins/metrics/public/components/annotations_editor.js
index ccd87f3793628..f517875a522d7 100644
--- a/src/legacy/core_plugins/metrics/public/components/annotations_editor.js
+++ b/src/legacy/core_plugins/metrics/public/components/annotations_editor.js
@@ -28,8 +28,7 @@ import { FieldSelect } from './aggs/field_select';
 import uuid from 'uuid';
 import { IconSelect } from './icon_select';
 import { YesNo } from './yes_no';
-import { QueryBarInput } from 'plugins/data';
-import { QueryInputBarContext } from '../contexts/query_input_bar_context';
+import { QueryBarWrapper } from './query_bar_wrapper';
 import { getDefaultQueryLanguage } from './lib/get_default_query_language';
 
 import {
@@ -171,19 +170,14 @@ export class AnnotationsEditor extends Component {
                   }
                   fullWidth
                 >
-                  <QueryInputBarContext.Consumer>
-                    {context => (
-                      <QueryBarInput
-                        query={{
-                          language: model.query_string.language || getDefaultQueryLanguage(),
-                          query: model.query_string.query || '',
-                        }}
-                        onChange={query => this.handleQueryChange(model, query)}
-                        indexPatterns={[model.index_pattern]}
-                        {...context}
-                      />
-                    )}
-                  </QueryInputBarContext.Consumer>
+                  <QueryBarWrapper
+                    query={{
+                      language: model.query_string.language || getDefaultQueryLanguage(),
+                      query: model.query_string.query || '',
+                    }}
+                    onChange={query => this.handleQueryChange(model, query)}
+                    indexPatterns={[model.index_pattern]}
+                  />
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config.js b/src/legacy/core_plugins/metrics/public/components/panel_config.js
index 4f0ef59950e4e..d1487955887b6 100644
--- a/src/legacy/core_plugins/metrics/public/components/panel_config.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config.js
@@ -25,12 +25,8 @@ import { TablePanelConfig as table } from './panel_config/table';
 import { GaugePanelConfig as gauge } from './panel_config/gauge';
 import { MarkdownPanelConfig as markdown } from './panel_config/markdown';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { FormValidationContext } from '../contexts/form_validation_context';
-import { QueryInputBarContext } from '../contexts/query_input_bar_context';
 
-import { npSetup } from 'ui/new_platform';
-import { Storage } from 'ui/storage';
-const localStorage = new Storage(window.localStorage);
+import { FormValidationContext } from '../contexts/form_validation_context';
 import { VisDataContext } from '../contexts/vis_data_context';
 
 const types = {
@@ -67,21 +63,13 @@ export function PanelConfig(props) {
     formValidationResults[controlKey] = isControlValid;
   };
 
-  const queryBarInputContext = {
-    uiSettings: npSetup.core.uiSettings,
-    store: localStorage,
-    appName: 'VisEditor',
-  };
-
   if (Component) {
     return (
-      <QueryInputBarContext.Provider value={queryBarInputContext}>
-        <FormValidationContext.Provider value={updateControlValidity}>
-          <VisDataContext.Provider value={visData}>
-            <Component {...props} />
-          </VisDataContext.Provider>
-        </FormValidationContext.Provider>
-      </QueryInputBarContext.Provider>
+      <FormValidationContext.Provider value={updateControlValidity}>
+        <VisDataContext.Provider value={visData}>
+          <Component {...props} />
+        </VisDataContext.Provider>
+      </FormValidationContext.Provider>
     );
   }
 
diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js b/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js
index 158f7e7babc1a..cc2306a5a17f9 100644
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js
@@ -43,9 +43,8 @@ import {
   EuiHorizontalRule,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-import { QueryBarInput } from 'plugins/data';
+import { QueryBarWrapper } from '../query_bar_wrapper';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
-import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
 
 class GaugePanelConfigUi extends Component {
   constructor(props) {
@@ -148,19 +147,14 @@ class GaugePanelConfigUi extends Component {
                   }
                   fullWidth
                 >
-                  <QueryInputBarContext.Consumer>
-                    {context => (
-                      <QueryBarInput
-                        query={{
-                          language: model.filter.language || getDefaultQueryLanguage(),
-                          query: model.filter.query || '',
-                        }}
-                        onChange={filter => this.props.onChange({ filter })}
-                        indexPatterns={[model.index_pattern || model.default_index_pattern]}
-                        {...context}
-                      />
-                    )}
-                  </QueryInputBarContext.Consumer>
+                  <QueryBarWrapper
+                    query={{
+                      language: model.filter.language || getDefaultQueryLanguage(),
+                      query: model.filter.query || '',
+                    }}
+                    onChange={filter => this.props.onChange({ filter })}
+                    indexPatterns={[model.index_pattern || model.default_index_pattern]}
+                  />
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js b/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js
index 707e59d108467..b50a0d398edf6 100644
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js
@@ -23,7 +23,6 @@ import { SeriesEditor } from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import 'brace/mode/less';
 import { createSelectHandler } from '../lib/create_select_handler';
-import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
 import { ColorPicker } from '../color_picker';
 import { YesNo } from '../yes_no';
 import { MarkdownEditor } from '../markdown_editor';
@@ -45,7 +44,7 @@ import {
 } from '@elastic/eui';
 const lessC = less(window, { env: 'production' });
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-import { QueryBarInput } from 'plugins/data';
+import { QueryBarWrapper } from '../query_bar_wrapper';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
 import { VisDataContext } from './../../contexts/vis_data_context';
 
@@ -157,21 +156,16 @@ class MarkdownPanelConfigUi extends Component {
                   }
                   fullWidth
                 >
-                  <QueryInputBarContext.Consumer>
-                    {context => (
-                      <QueryBarInput
-                        query={{
-                          language: model.filter.language
-                            ? model.filter.language
-                            : getDefaultQueryLanguage(),
-                          query: model.filter.query || '',
-                        }}
-                        onChange={filter => this.props.onChange({ filter })}
-                        indexPatterns={[model.index_pattern || model.default_index_pattern]}
-                        {...context}
-                      />
-                    )}
-                  </QueryInputBarContext.Consumer>
+                  <QueryBarWrapper
+                    query={{
+                      language: model.filter.language
+                        ? model.filter.language
+                        : getDefaultQueryLanguage(),
+                      query: model.filter.query || '',
+                    }}
+                    onChange={filter => this.props.onChange({ filter })}
+                    indexPatterns={[model.index_pattern || model.default_index_pattern]}
+                  />
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js b/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js
index e85785b1249fe..6aac01a93194c 100644
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js
@@ -39,9 +39,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { QueryBarInput } from 'plugins/data';
+import { QueryBarWrapper } from '../query_bar_wrapper';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
-import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
 
 export class MetricPanelConfig extends Component {
   constructor(props) {
@@ -113,19 +112,14 @@ export class MetricPanelConfig extends Component {
                   }
                   fullWidth
                 >
-                  <QueryInputBarContext.Consumer>
-                    {context => (
-                      <QueryBarInput
-                        query={{
-                          language: model.filter.language || getDefaultQueryLanguage(),
-                          query: model.filter.query || '',
-                        }}
-                        onChange={filter => this.props.onChange({ filter })}
-                        indexPatterns={[model.index_pattern || model.default_index_pattern]}
-                        {...context}
-                      />
-                    )}
-                  </QueryInputBarContext.Consumer>
+                  <QueryBarWrapper
+                    query={{
+                      language: model.filter.language || getDefaultQueryLanguage(),
+                      query: model.filter.query || '',
+                    }}
+                    onChange={filter => this.props.onChange({ filter })}
+                    indexPatterns={[model.index_pattern || model.default_index_pattern]}
+                  />
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/table.js b/src/legacy/core_plugins/metrics/public/components/panel_config/table.js
index 42f0b9d95659a..c1351952b36a6 100644
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/table.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/table.js
@@ -43,9 +43,8 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { QueryBarInput } from 'plugins/data';
+import { QueryBarWrapper } from '../query_bar_wrapper';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
-import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
 export class TablePanelConfig extends Component {
   constructor(props) {
     super(props);
@@ -231,21 +230,16 @@ export class TablePanelConfig extends Component {
                   }
                   fullWidth
                 >
-                  <QueryInputBarContext.Consumer>
-                    {context => (
-                      <QueryBarInput
-                        query={{
-                          language: model.filter.language
-                            ? model.filter.language
-                            : getDefaultQueryLanguage(),
-                          query: model.filter.query || '',
-                        }}
-                        onChange={filter => this.props.onChange({ filter })}
-                        indexPatterns={[model.index_pattern || model.default_index_pattern]}
-                        {...context}
-                      />
-                    )}
-                  </QueryInputBarContext.Consumer>
+                  <QueryBarWrapper
+                    query={{
+                      language: model.filter.language
+                        ? model.filter.language
+                        : getDefaultQueryLanguage(),
+                      query: model.filter.query || '',
+                    }}
+                    onChange={filter => this.props.onChange({ filter })}
+                    indexPatterns={[model.index_pattern || model.default_index_pattern]}
+                  />
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
index 52826b4e9d95b..6b8147285ead3 100644
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
@@ -43,8 +43,7 @@ import {
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
-import { QueryBarInput } from 'plugins/data';
-import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
+import { QueryBarWrapper } from '../query_bar_wrapper';
 class TimeseriesPanelConfigUi extends Component {
   constructor(props) {
     super(props);
@@ -185,19 +184,14 @@ class TimeseriesPanelConfigUi extends Component {
                   }
                   fullWidth
                 >
-                  <QueryInputBarContext.Consumer>
-                    {context => (
-                      <QueryBarInput
-                        query={{
-                          language: model.filter.language || getDefaultQueryLanguage(),
-                          query: model.filter.query || '',
-                        }}
-                        onChange={filter => this.props.onChange({ filter })}
-                        indexPatterns={[model.index_pattern || model.default_index_pattern]}
-                        {...context}
-                      />
-                    )}
-                  </QueryInputBarContext.Consumer>
+                  <QueryBarWrapper
+                    query={{
+                      language: model.filter.language || getDefaultQueryLanguage(),
+                      query: model.filter.query || '',
+                    }}
+                    onChange={filter => this.props.onChange({ filter })}
+                    indexPatterns={[model.index_pattern || model.default_index_pattern]}
+                  />
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
diff --git a/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js b/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js
index 28890f9369673..1cf17b772a1c3 100644
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js
@@ -43,8 +43,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
-import { QueryBarInput } from 'plugins/data';
-import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
+import { QueryBarWrapper } from '../query_bar_wrapper';
 
 export class TopNPanelConfig extends Component {
   constructor(props) {
@@ -141,21 +140,16 @@ export class TopNPanelConfig extends Component {
                   }
                   fullWidth
                 >
-                  <QueryInputBarContext.Consumer>
-                    {context => (
-                      <QueryBarInput
-                        query={{
-                          language: model.filter.language
-                            ? model.filter.language
-                            : getDefaultQueryLanguage(),
-                          query: model.filter.query || '',
-                        }}
-                        onChange={filter => this.props.onChange({ filter })}
-                        indexPatterns={[model.index_pattern || model.default_index_pattern]}
-                        {...context}
-                      />
-                    )}
-                  </QueryInputBarContext.Consumer>
+                  <QueryBarWrapper
+                    query={{
+                      language: model.filter.language
+                        ? model.filter.language
+                        : getDefaultQueryLanguage(),
+                      query: model.filter.query || '',
+                    }}
+                    onChange={filter => this.props.onChange({ filter })}
+                    indexPatterns={[model.index_pattern || model.default_index_pattern]}
+                  />
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
diff --git a/src/legacy/core_plugins/metrics/public/components/query_bar_wrapper.js b/src/legacy/core_plugins/metrics/public/components/query_bar_wrapper.js
new file mode 100644
index 0000000000000..305162255e066
--- /dev/null
+++ b/src/legacy/core_plugins/metrics/public/components/query_bar_wrapper.js
@@ -0,0 +1,43 @@
+/*
+ * 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 React from 'react';
+
+import { QueryBarInput } from 'plugins/data';
+import { npSetup } from 'ui/new_platform';
+import { Storage } from 'ui/storage';
+
+const APP_NAME = 'VisEditor';
+
+const queryBarInputContext = {
+  appName: APP_NAME,
+  uiSettings: npSetup.core.uiSettings,
+  store: new Storage(window.localStorage),
+};
+
+export function QueryBarWrapper(props) {
+  // Note: if you want to use your previous approach based on
+  // React Context you can get it here like e.g. :
+
+  // queryBarInputContext = useContext(QueryInputBarContext);
+
+  // but now I don't see any reasons to use context
+
+  return <QueryBarInput {...props} {...queryBarInputContext} />;
+}
diff --git a/src/legacy/core_plugins/metrics/public/components/series_config.js b/src/legacy/core_plugins/metrics/public/components/series_config.js
index d15202b031cf6..4937e35fd609b 100644
--- a/src/legacy/core_plugins/metrics/public/components/series_config.js
+++ b/src/legacy/core_plugins/metrics/public/components/series_config.js
@@ -37,8 +37,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { getDefaultQueryLanguage } from './lib/get_default_query_language';
-import { QueryBarInput } from 'plugins/data';
-import { QueryInputBarContext } from '../contexts/query_input_bar_context';
+import { QueryBarWrapper } from './query_bar_wrapper';
 
 export const SeriesConfig = props => {
   const defaults = { offset_time: '', value_template: '' };
@@ -62,22 +61,17 @@ export const SeriesConfig = props => {
         label={<FormattedMessage id="tsvb.seriesConfig.filterLabel" defaultMessage="Filter" />}
         fullWidth
       >
-        <QueryInputBarContext.Consumer>
-          {context => (
-            <QueryBarInput
-              query={{
-                language:
-                  model.filter && model.filter.language
-                    ? model.filter.language
-                    : getDefaultQueryLanguage(),
-                query: model.filter && model.filter.query ? model.filter.query : '',
-              }}
-              onChange={filter => props.onChange({ filter })}
-              indexPatterns={[seriesIndexPattern]}
-              {...context}
-            />
-          )}
-        </QueryInputBarContext.Consumer>
+        <QueryBarWrapper
+          query={{
+            language:
+              model.filter && model.filter.language
+                ? model.filter.language
+                : getDefaultQueryLanguage(),
+            query: model.filter && model.filter.query ? model.filter.query : '',
+          }}
+          onChange={filter => props.onChange({ filter })}
+          indexPatterns={[seriesIndexPattern]}
+        />
       </EuiFormRow>
 
       <EuiHorizontalRule margin="s" />
diff --git a/src/legacy/core_plugins/metrics/public/components/splits/filter.js b/src/legacy/core_plugins/metrics/public/components/splits/filter.js
index 807b4a5313659..cadeb3f13ae21 100644
--- a/src/legacy/core_plugins/metrics/public/components/splits/filter.js
+++ b/src/legacy/core_plugins/metrics/public/components/splits/filter.js
@@ -24,8 +24,7 @@ import React from 'react';
 import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
-import { QueryBarInput } from 'plugins/data';
-import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
+import { QueryBarWrapper } from '../query_bar_wrapper';
 
 export const SplitByFilter = props => {
   const { onChange, uiRestrictions, indexPattern } = props;
@@ -59,19 +58,14 @@ export const SplitByFilter = props => {
             />
           }
         >
-          <QueryInputBarContext.Consumer>
-            {context => (
-              <QueryBarInput
-                query={{
-                  language: model.filter.language || getDefaultQueryLanguage(),
-                  query: model.filter.query || '',
-                }}
-                onChange={filter => onChange({ filter })}
-                indexPatterns={[indexPattern]}
-                {...context}
-              />
-            )}
-          </QueryInputBarContext.Consumer>
+          <QueryBarWrapper
+            query={{
+              language: model.filter.language || getDefaultQueryLanguage(),
+              query: model.filter.query || '',
+            }}
+            onChange={filter => onChange({ filter })}
+            indexPatterns={[indexPattern]}
+          />
         </EuiFormRow>
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/src/legacy/core_plugins/metrics/public/components/splits/filter_items.js b/src/legacy/core_plugins/metrics/public/components/splits/filter_items.js
index 28e3959377d7f..5b0e1104c7004 100644
--- a/src/legacy/core_plugins/metrics/public/components/splits/filter_items.js
+++ b/src/legacy/core_plugins/metrics/public/components/splits/filter_items.js
@@ -27,8 +27,7 @@ import uuid from 'uuid';
 import { EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { injectI18n } from '@kbn/i18n/react';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
-import { QueryBarInput } from 'plugins/data';
-import { QueryInputBarContext } from '../../contexts/query_input_bar_context';
+import { QueryBarWrapper } from '../query_bar_wrapper';
 class FilterItemsUi extends Component {
   constructor(props) {
     super(props);
@@ -78,19 +77,14 @@ class FilterItemsUi extends Component {
           />
         </EuiFlexItem>
         <EuiFlexItem>
-          <QueryInputBarContext.Consumer>
-            {context => (
-              <QueryBarInput
-                query={{
-                  language: model.filter.language || getDefaultQueryLanguage(),
-                  query: model.filter.query || '',
-                }}
-                onChange={query => this.handleQueryChange(model, query)}
-                indexPatterns={[indexPatterns]}
-                {...context}
-              />
-            )}
-          </QueryInputBarContext.Consumer>
+          <QueryBarWrapper
+            query={{
+              language: model.filter.language || getDefaultQueryLanguage(),
+              query: model.filter.query || '',
+            }}
+            onChange={query => this.handleQueryChange(model, query)}
+            indexPatterns={[indexPatterns]}
+          />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFieldText
diff --git a/src/legacy/core_plugins/metrics/public/components/vis_types/table/config.js b/src/legacy/core_plugins/metrics/public/components/vis_types/table/config.js
index a5bf445df532b..a9a9ec4de7bd7 100644
--- a/src/legacy/core_plugins/metrics/public/components/vis_types/table/config.js
+++ b/src/legacy/core_plugins/metrics/public/components/vis_types/table/config.js
@@ -42,8 +42,7 @@ import {
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { getDefaultQueryLanguage } from '../../lib/get_default_query_language';
 
-import { QueryBarInput } from 'plugins/data';
-import { QueryInputBarContext } from '../../../contexts/query_input_bar_context';
+import { QueryBarWrapper } from '../../query_bar_wrapper';
 class TableSeriesConfigUI extends Component {
   componentWillMount() {
     const { model } = this.props;
@@ -158,22 +157,17 @@ class TableSeriesConfigUI extends Component {
               label={<FormattedMessage id="tsvb.table.filterLabel" defaultMessage="Filter" />}
               fullWidth
             >
-              <QueryInputBarContext.Consumer>
-                {context => (
-                  <QueryBarInput
-                    query={{
-                      language:
-                        model.filter && model.filter.language
-                          ? model.filter.language
-                          : getDefaultQueryLanguage(),
-                      query: model.filter && model.filter.query ? model.filter.query : '',
-                    }}
-                    onChange={filter => this.props.onChange({ filter })}
-                    indexPatterns={[this.props.indexPatternForQuery]}
-                    {...context}
-                  />
-                )}
-              </QueryInputBarContext.Consumer>
+              <QueryBarWrapper
+                query={{
+                  language:
+                    model.filter && model.filter.language
+                      ? model.filter.language
+                      : getDefaultQueryLanguage(),
+                  query: model.filter && model.filter.query ? model.filter.query : '',
+                }}
+                onChange={filter => this.props.onChange({ filter })}
+                indexPatterns={[this.props.indexPatternForQuery]}
+              />
             </EuiFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
diff --git a/src/legacy/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/legacy/core_plugins/metrics/public/components/vis_types/timeseries/config.js
index e2457e301b4cf..352b01a832694 100644
--- a/src/legacy/core_plugins/metrics/public/components/vis_types/timeseries/config.js
+++ b/src/legacy/core_plugins/metrics/public/components/vis_types/timeseries/config.js
@@ -39,8 +39,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { getDefaultQueryLanguage } from '../../lib/get_default_query_language';
-import { QueryBarInput } from 'plugins/data';
-import { QueryInputBarContext } from '../../../contexts/query_input_bar_context';
+import { QueryBarWrapper } from '../../query_bar_wrapper';
 
 export const TimeseriesConfig = injectI18n(function(props) {
   const handleSelectChange = createSelectHandler(props.onChange);
@@ -356,22 +355,17 @@ export const TimeseriesConfig = injectI18n(function(props) {
           label={<FormattedMessage id="tsvb.timeSeries.filterLabel" defaultMessage="Filter" />}
           fullWidth
         >
-          <QueryInputBarContext.Consumer>
-            {context => (
-              <QueryBarInput
-                query={{
-                  language:
-                    model.filter && model.filter.language
-                      ? model.filter.language
-                      : getDefaultQueryLanguage(),
-                  query: model.filter && model.filter.query ? model.filter.query : '',
-                }}
-                onChange={filter => props.onChange({ filter })}
-                indexPatterns={[seriesIndexPattern]}
-                {...context}
-              />
-            )}
-          </QueryInputBarContext.Consumer>
+          <QueryBarWrapper
+            query={{
+              language:
+                model.filter && model.filter.language
+                  ? model.filter.language
+                  : getDefaultQueryLanguage(),
+              query: model.filter && model.filter.query ? model.filter.query : '',
+            }}
+            onChange={filter => props.onChange({ filter })}
+            indexPatterns={[seriesIndexPattern]}
+          />
         </EuiFormRow>
       </EuiFlexItem>
       <EuiHorizontalRule margin="s" />