diff --git a/.i18nrc.json b/.i18nrc.json
index 8bef2448040bf..f376b7580fad4 100644
--- a/.i18nrc.json
+++ b/.i18nrc.json
@@ -2,6 +2,7 @@
   "paths": {
     "common.ui": "src/legacy/ui",
     "data": "src/legacy/core_plugins/data",
+    "kibana_react": "src/legacy/core_plugins/kibana_react",
     "server": "src/legacy/server",
     "console": "src/legacy/core_plugins/console",
     "core": "src/core",
diff --git a/src/legacy/core_plugins/console/public/index.html b/src/legacy/core_plugins/console/public/index.html
index f3e4b2a8708c8..91bcb05bf64cc 100644
--- a/src/legacy/core_plugins/console/public/index.html
+++ b/src/legacy/core_plugins/console/public/index.html
@@ -1,4 +1,7 @@
-<kbn-top-nav name="console" config="topNavMenu"></kbn-top-nav>
+<kbn-top-nav-v2 
+  app-name="'console'"
+  config="topNavMenu" 
+></kbn-top-nav-v2>
 <kbn-dev-tools-app data-test-subj="console">
   <sense-history ng-show="showHistory" is-shown="showHistory" close="closeHistory()" history-dirty="lastRequestTimestamp"></sense-history>
   <div class="conApp">
diff --git a/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts b/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts
index 4b9b598da8d4f..3b5fae6ff669d 100644
--- a/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts
+++ b/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts
@@ -28,7 +28,7 @@ import { showHelpPanel } from './help_show_panel';
 export function getTopNavConfig($scope: IScope, toggleHistory: () => {}) {
   return [
     {
-      key: 'history',
+      id: 'history',
       label: i18n.translate('console.topNav.historyTabLabel', {
         defaultMessage: 'History',
       }),
@@ -36,12 +36,12 @@ export function getTopNavConfig($scope: IScope, toggleHistory: () => {}) {
         defaultMessage: 'History',
       }),
       run: () => {
-        toggleHistory();
+        $scope.$evalAsync(toggleHistory);
       },
       testId: 'consoleHistoryButton',
     },
     {
-      key: 'settings',
+      id: 'settings',
       label: i18n.translate('console.topNav.settingsTabLabel', {
         defaultMessage: 'Settings',
       }),
@@ -54,7 +54,7 @@ export function getTopNavConfig($scope: IScope, toggleHistory: () => {}) {
       testId: 'consoleSettingsButton',
     },
     {
-      key: 'help',
+      id: 'help',
       label: i18n.translate('console.topNav.helpTabLabel', {
         defaultMessage: 'Help',
       }),
diff --git a/src/legacy/core_plugins/data/public/filter/index.tsx b/src/legacy/core_plugins/data/public/filter/index.tsx
index 997dae3854b4c..d4dba0d834ffe 100644
--- a/src/legacy/core_plugins/data/public/filter/index.tsx
+++ b/src/legacy/core_plugins/data/public/filter/index.tsx
@@ -18,3 +18,5 @@
  */
 
 export { FilterService, FilterSetup } from './filter_service';
+
+export { FilterBar } from './filter_bar';
diff --git a/src/legacy/core_plugins/data/public/index.ts b/src/legacy/core_plugins/data/public/index.ts
index 20be02510e61b..9cce64b0c5741 100644
--- a/src/legacy/core_plugins/data/public/index.ts
+++ b/src/legacy/core_plugins/data/public/index.ts
@@ -24,7 +24,6 @@
 // @ts-ignore
 import { renderersRegistry } from 'plugins/interpreter/registries';
 import { ExpressionsService, ExpressionsSetup } from './expressions';
-import { SearchService, SearchSetup } from './search';
 import { QueryService, QuerySetup } from './query';
 import { FilterService, FilterSetup } from './filter';
 import { IndexPatternsService, IndexPatternsSetup } from './index_patterns';
@@ -34,14 +33,12 @@ export class DataPlugin {
   private readonly expressions: ExpressionsService;
   private readonly filter: FilterService;
   private readonly indexPatterns: IndexPatternsService;
-  private readonly search: SearchService;
   private readonly query: QueryService;
 
   constructor() {
     this.indexPatterns = new IndexPatternsService();
     this.filter = new FilterService();
     this.query = new QueryService();
-    this.search = new SearchService();
     this.expressions = new ExpressionsService();
   }
 
@@ -61,7 +58,6 @@ export class DataPlugin {
       filter: this.filter.setup({
         indexPatterns: indexPatternsService.indexPatterns,
       }),
-      search: this.search.setup(),
       query: this.query.setup(),
     };
   }
@@ -70,7 +66,6 @@ export class DataPlugin {
     this.expressions.stop();
     this.indexPatterns.stop();
     this.filter.stop();
-    this.search.stop();
     this.query.stop();
   }
 }
@@ -80,7 +75,6 @@ export interface DataSetup {
   expressions: ExpressionsSetup;
   indexPatterns: IndexPatternsSetup;
   filter: FilterSetup;
-  search: SearchSetup;
   query: QuerySetup;
 }
 
@@ -89,7 +83,8 @@ export { ExpressionRenderer, ExpressionRendererProps, ExpressionRunner } from '.
 
 /** @public types */
 export { IndexPattern, StaticIndexPattern, StaticIndexPatternField, Field } from './index_patterns';
-export { Query } from './query';
+export { Query, QueryBar } from './query';
+export { FilterBar } from './filter';
 export { FilterManager, FilterStateManager, uniqFilters } from './filter/filter_manager';
 
 /** @public static code */
diff --git a/src/legacy/core_plugins/data/public/query/index.ts b/src/legacy/core_plugins/data/public/query/index.ts
index 9a4d1b4f50c10..976d868241ddd 100644
--- a/src/legacy/core_plugins/data/public/query/index.ts
+++ b/src/legacy/core_plugins/data/public/query/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { QueryService, QuerySetup, Query } from './query_service';
+export * from './query_service';
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap
index bc0b15ca88e3e..8680f269d93ed 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap
@@ -2,9 +2,9 @@
 
 exports[`QueryBar Should render the given query 1`] = `
 <EuiFlexGroup
-  className="kbnQueryBar"
+  className="kbnQueryBar kbnQueryBar--withDatePicker"
   gutterSize="s"
-  responsive={false}
+  responsive={true}
 >
   <EuiFlexItem>
     <InjectIntl(QueryBarInputUI)
@@ -59,13 +59,53 @@ exports[`QueryBar Should render the given query 1`] = `
   <EuiFlexItem
     grow={false}
   >
-    <EuiSuperUpdateButton
-      data-test-subj="querySubmitButton"
-      isDisabled={false}
-      isLoading={false}
-      needsUpdate={false}
-      onClick={[Function]}
-    />
+    <EuiFlexGroup
+      gutterSize="s"
+      responsive={false}
+    >
+      <EuiFlexItem
+        className="kbnQueryBar__datePickerWrapper"
+      >
+        <EuiSuperDatePicker
+          commonlyUsedRanges={
+            Array [
+              Object {
+                "end": "now/d",
+                "label": "Today",
+                "start": "now/d",
+              },
+            ]
+          }
+          dateFormat="YY"
+          end="now"
+          isAutoRefreshOnly={false}
+          isPaused={true}
+          onTimeChange={[Function]}
+          recentlyUsedRanges={
+            Array [
+              Object {
+                "end": undefined,
+                "start": undefined,
+              },
+            ]
+          }
+          refreshInterval={0}
+          showUpdateButton={false}
+          start="now-15m"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiSuperUpdateButton
+          data-test-subj="querySubmitButton"
+          isDisabled={false}
+          isLoading={false}
+          needsUpdate={true}
+          onClick={[Function]}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx
index 2be00deb16d9e..a612581bf7b85 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx
@@ -66,6 +66,8 @@ const mockIndexPattern = {
 };
 
 describe('QueryBar', () => {
+  const QUERY_INPUT_SELECTOR = 'InjectIntl(QueryBarInputUI)';
+  const TIMEPICKER_SELECTOR = 'EuiSuperDatePicker';
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -102,4 +104,104 @@ describe('QueryBar', () => {
 
     expect(mockPersistedLogFactory.mock.calls[0][0]).toBe('typeahead:discover-kuery');
   });
+
+  it('Should render only timepicker when no options provided', () => {
+    const component = shallowWithIntl(
+      <QueryBar.WrappedComponent
+        onSubmit={noop}
+        appName={'discover'}
+        store={createMockStorage()}
+        intl={null as any}
+      />
+    );
+
+    expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
+    expect(component.find(TIMEPICKER_SELECTOR).length).toBe(1);
+  });
+
+  it('Should disable timepicker when asked', () => {
+    const component = shallowWithIntl(
+      <QueryBar.WrappedComponent
+        onSubmit={noop}
+        appName={'discover'}
+        store={createMockStorage()}
+        intl={null as any}
+        showDatePicker={false}
+      />
+    );
+
+    expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
+    expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0);
+  });
+
+  it('Should render timepicker with options', () => {
+    const component = shallowWithIntl(
+      <QueryBar.WrappedComponent
+        onSubmit={noop}
+        appName={'discover'}
+        screenTitle={'Another Screen'}
+        store={createMockStorage()}
+        intl={null as any}
+        showDatePicker={true}
+        dateRangeFrom={'now-7d'}
+        dateRangeTo={'now'}
+      />
+    );
+
+    expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
+    expect(component.find(TIMEPICKER_SELECTOR).length).toBe(1);
+  });
+
+  it('Should render only query input bar', () => {
+    const component = shallowWithIntl(
+      <QueryBar.WrappedComponent
+        query={kqlQuery}
+        onSubmit={noop}
+        appName={'discover'}
+        screenTitle={'Another Screen'}
+        indexPatterns={[mockIndexPattern]}
+        store={createMockStorage()}
+        intl={null as any}
+        showDatePicker={false}
+      />
+    );
+
+    expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(1);
+    expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0);
+  });
+
+  it('Should NOT render query input bar if disabled', () => {
+    const component = shallowWithIntl(
+      <QueryBar.WrappedComponent
+        query={kqlQuery}
+        onSubmit={noop}
+        appName={'discover'}
+        screenTitle={'Another Screen'}
+        indexPatterns={[mockIndexPattern]}
+        store={createMockStorage()}
+        intl={null as any}
+        showQueryInput={false}
+        showDatePicker={false}
+      />
+    );
+
+    expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
+    expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0);
+  });
+
+  it('Should NOT render query input bar if missing options', () => {
+    const component = shallowWithIntl(
+      <QueryBar.WrappedComponent
+        onSubmit={noop}
+        appName={'discover'}
+        screenTitle={'Another Screen'}
+        store={createMockStorage()}
+        intl={null as any}
+        showDatePicker={false}
+      />
+    );
+
+    expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
+    expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0);
+  });
 });
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx
index e1df6286bd120..19a584e34a978 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx
@@ -18,7 +18,6 @@
  */
 
 import { doesKueryExpressionHaveLuceneSyntaxError } from '@kbn/es-query';
-import { IndexPattern } from 'ui/index_patterns';
 
 import classNames from 'classnames';
 import _ from 'lodash';
@@ -37,6 +36,7 @@ import { documentationLinks } from 'ui/documentation_links';
 import { Toast, toastNotifications } from 'ui/notify';
 import chrome from 'ui/chrome';
 import { PersistedLog } from 'ui/persisted_log';
+import { IndexPattern } from '../../../index_patterns';
 import { QueryBarInput } from './query_bar_input';
 
 import { getQueryLog } from '../lib/get_query_log';
@@ -50,15 +50,16 @@ interface DateRange {
 }
 
 interface Props {
-  query: Query;
-  onSubmit: (payload: { dateRange: DateRange; query: Query }) => void;
+  query?: Query;
+  onSubmit: (payload: { dateRange: DateRange; query?: Query }) => void;
   disableAutoFocus?: boolean;
   appName: string;
-  screenTitle: string;
-  indexPatterns: Array<IndexPattern | string>;
+  screenTitle?: string;
+  indexPatterns?: Array<IndexPattern | string>;
   store: Storage;
   intl: InjectedIntl;
   prepend?: any;
+  showQueryInput?: boolean;
   showDatePicker?: boolean;
   dateRangeFrom?: string;
   dateRangeTo?: string;
@@ -70,7 +71,7 @@ interface Props {
 }
 
 interface State {
-  query: Query;
+  query?: Query;
   inputIsPristine: boolean;
   currentProps?: Props;
   dateRangeFrom: string;
@@ -79,22 +80,30 @@ interface State {
 }
 
 export class QueryBarUI extends Component<Props, State> {
+  public static defaultProps = {
+    showQueryInput: true,
+    showDatePicker: true,
+    showAutoRefreshOnly: false,
+  };
+
   public static getDerivedStateFromProps(nextProps: Props, prevState: State) {
     if (isEqual(prevState.currentProps, nextProps)) {
       return null;
     }
 
     let nextQuery = null;
-    if (nextProps.query.query !== prevState.query.query) {
-      nextQuery = {
-        query: nextProps.query.query,
-        language: nextProps.query.language,
-      };
-    } else if (nextProps.query.language !== prevState.query.language) {
-      nextQuery = {
-        query: '',
-        language: nextProps.query.language,
-      };
+    if (nextProps.query && prevState.query) {
+      if (nextProps.query.query !== prevState.query.query) {
+        nextQuery = {
+          query: nextProps.query.query,
+          language: nextProps.query.language,
+        };
+      } else if (nextProps.query.language !== prevState.query.language) {
+        nextQuery = {
+          query: '',
+          language: nextProps.query.language,
+        };
+      }
     }
 
     let nextDateRange = null;
@@ -134,7 +143,7 @@ export class QueryBarUI extends Component<Props, State> {
     See https://github.com/elastic/kibana/issues/14086
   */
   public state = {
-    query: {
+    query: this.props.query && {
       query: this.props.query.query,
       language: this.props.query.language,
     },
@@ -149,20 +158,26 @@ export class QueryBarUI extends Component<Props, State> {
 
   private persistedLog: PersistedLog | undefined;
 
+  private isQueryDirty = () => {
+    return (
+      !!this.props.query && !!this.state.query && this.state.query.query !== this.props.query.query
+    );
+  };
+
   public isDirty = () => {
     if (!this.props.showDatePicker) {
-      return this.state.query.query !== this.props.query.query;
+      return this.isQueryDirty();
     }
 
     return (
-      this.state.query.query !== this.props.query.query ||
+      this.isQueryDirty() ||
       this.state.dateRangeFrom !== this.props.dateRangeFrom ||
       this.state.dateRangeTo !== this.props.dateRangeTo
     );
   };
 
   public onClickSubmitButton = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (this.persistedLog) {
+    if (this.persistedLog && this.state.query) {
       this.persistedLog.add(this.state.query.query);
     }
     this.onSubmit(() => event.preventDefault());
@@ -209,7 +224,7 @@ export class QueryBarUI extends Component<Props, State> {
     });
 
     this.props.onSubmit({
-      query: {
+      query: this.state.query && {
         query: this.state.query.query,
         language: this.state.query.language,
       },
@@ -227,10 +242,12 @@ export class QueryBarUI extends Component<Props, State> {
   };
 
   public componentDidMount() {
+    if (!this.props.query) return;
     this.persistedLog = getQueryLog(this.props.appName, this.props.query.language);
   }
 
   public componentDidUpdate(prevProps: Props) {
+    if (!this.props.query || !prevProps.query) return;
     if (prevProps.query.language !== this.props.query.language) {
       this.persistedLog = getQueryLog(this.props.appName, this.props.query.language);
     }
@@ -243,25 +260,40 @@ export class QueryBarUI extends Component<Props, State> {
 
     return (
       <EuiFlexGroup className={classes} responsive={!!this.props.showDatePicker} gutterSize="s">
-        <EuiFlexItem>
-          <QueryBarInput
-            appName={this.props.appName}
-            disableAutoFocus={this.props.disableAutoFocus}
-            indexPatterns={this.props.indexPatterns}
-            prepend={this.props.prepend}
-            query={this.state.query}
-            screenTitle={this.props.screenTitle}
-            store={this.props.store}
-            onChange={this.onChange}
-            onSubmit={this.onInputSubmit}
-            persistedLog={this.persistedLog}
-          />
-        </EuiFlexItem>
+        {this.renderQueryInput()}
         <EuiFlexItem grow={false}>{this.renderUpdateButton()}</EuiFlexItem>
       </EuiFlexGroup>
     );
   }
 
+  private renderQueryInput() {
+    if (!this.shouldRenderQueryInput()) return;
+    return (
+      <EuiFlexItem>
+        <QueryBarInput
+          appName={this.props.appName}
+          disableAutoFocus={this.props.disableAutoFocus}
+          indexPatterns={this.props.indexPatterns!}
+          prepend={this.props.prepend}
+          query={this.state.query!}
+          screenTitle={this.props.screenTitle}
+          store={this.props.store}
+          onChange={this.onChange}
+          onSubmit={this.onInputSubmit}
+          persistedLog={this.persistedLog}
+        />
+      </EuiFlexItem>
+    );
+  }
+
+  private shouldRenderDatePicker() {
+    return this.props.showDatePicker || this.props.showAutoRefreshOnly;
+  }
+
+  private shouldRenderQueryInput() {
+    return this.props.showQueryInput && this.props.indexPatterns && this.props.query;
+  }
+
   private renderUpdateButton() {
     const button = this.props.customSubmitButton ? (
       React.cloneElement(this.props.customSubmitButton, { onClick: this.onClickSubmitButton })
@@ -274,7 +306,7 @@ export class QueryBarUI extends Component<Props, State> {
       />
     );
 
-    if (!this.props.showDatePicker) {
+    if (!this.shouldRenderDatePicker()) {
       return button;
     }
 
@@ -287,7 +319,7 @@ export class QueryBarUI extends Component<Props, State> {
   }
 
   private renderDatePicker() {
-    if (!this.props.showDatePicker) {
+    if (!this.shouldRenderDatePicker()) {
       return null;
     }
 
@@ -330,6 +362,7 @@ export class QueryBarUI extends Component<Props, State> {
   }
 
   private handleLuceneSyntaxWarning() {
+    if (!this.state.query) return;
     const { intl, store } = this.props;
     const { query, language } = this.state.query;
     if (
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.mocks.ts b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.mocks.ts
index 30736e9fd5a5e..b2f308127b0e1 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.mocks.ts
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.mocks.ts
@@ -42,6 +42,16 @@ const mockChromeFactory = jest.fn(() => {
       return {
         get: (key: string) => {
           switch (key) {
+            case 'timepicker:quickRanges':
+              return [
+                {
+                  from: 'now/d',
+                  to: 'now/d',
+                  display: 'Today',
+                },
+              ];
+            case 'dateFormat':
+              return 'YY';
             case 'history:limit':
               return 10;
             default:
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/index.ts b/src/legacy/core_plugins/data/public/query/query_bar/index.ts
index c761681847c8e..d182123d401d9 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/index.ts
+++ b/src/legacy/core_plugins/data/public/query/query_bar/index.ts
@@ -22,7 +22,4 @@ export { fromUser } from './lib/from_user';
 export { toUser } from './lib/to_user';
 export { getQueryLog } from './lib/get_query_log';
 
-// @ts-ignore
-export { setupDirective } from './directive';
-
 export { Query } from '../../../../../../plugins/data/common/query/types';
diff --git a/src/legacy/core_plugins/data/public/query/query_service.ts b/src/legacy/core_plugins/data/public/query/query_service.ts
index be678776f7526..745fb1bac686b 100644
--- a/src/legacy/core_plugins/data/public/query/query_service.ts
+++ b/src/legacy/core_plugins/data/public/query/query_service.ts
@@ -17,15 +17,7 @@
  * under the License.
  */
 
-import { once } from 'lodash';
-import {
-  QueryBar,
-  QueryBarInput,
-  fromUser,
-  toUser,
-  getQueryLog,
-  setupDirective as setupQueryBarDirective,
-} from './query_bar';
+import { QueryBar, QueryBarInput, fromUser, toUser, getQueryLog } from './query_bar';
 
 /**
  * Query Service
@@ -35,7 +27,6 @@ import {
 export class QueryService {
   public setup() {
     return {
-      loadLegacyDirectives: once(setupQueryBarDirective),
       helpers: {
         fromUser,
         toUser,
@@ -56,4 +47,4 @@ export class QueryService {
 /** @public */
 export type QuerySetup = ReturnType<QueryService['setup']>;
 
-export { Query } from './query_bar';
+export { Query, QueryBar } from './query_bar';
diff --git a/src/legacy/core_plugins/data/public/search/search_bar/directive/index.js b/src/legacy/core_plugins/data/public/search/search_bar/directive/index.js
deleted file mode 100644
index 4b3546fc7d226..0000000000000
--- a/src/legacy/core_plugins/data/public/search/search_bar/directive/index.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * 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 'ngreact';
-import { wrapInI18nContext } from 'ui/i18n';
-import { uiModules } from 'ui/modules';
-import { SearchBar } from '../components';
-
-const app = uiModules.get('app/data', ['react']);
-
-export function setupDirective() {
-  app.directive('searchBar', (reactDirective, localStorage) => {
-    return reactDirective(
-      wrapInI18nContext(SearchBar),
-      [
-        ['query', { watchDepth: 'reference' }],
-        ['store', { watchDepth: 'reference' }],
-        ['intl', { watchDepth: 'reference' }],
-
-        ['onQuerySubmit', { watchDepth: 'reference' }],
-        ['onFiltersUpdated', { watchDepth: 'reference' }],
-        ['onRefreshChange', { watchDepth: 'reference' }],
-
-        ['indexPatterns', { watchDepth: 'collection' }],
-        ['filters', { watchDepth: 'collection' }],
-
-        'appName',
-        'screenTitle',
-        'showFilterBar',
-        'showQueryBar',
-        'showDatePicker',
-        'dateRangeFrom',
-        'dateRangeTo',
-        'isRefreshPaused',
-        'refreshInterval',
-        'disableAutoFocus',
-        'showAutoRefreshOnly',
-      ],
-      {},
-      {
-        store: localStorage,
-      },
-    );
-  });
-}
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
index 1e226ab804bdc..4b77a7e3733ca 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
+++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
@@ -3,30 +3,26 @@
   ng-class="{'dshAppContainer--withMargins': model.useMargins}"
 >
   <!-- Local nav. -->
-  <kbn-top-nav name="dashboard" config="topNavMenu">
-    <!-- Transcluded elements. -->
-    <div data-transclude-slots>
-      <!-- Search. -->
-      <div ng-show="chrome.getVisible()" class="fullWidth" data-transclude-slot="bottomRow">
-        <search-bar
-          query="model.query"
-          screen-title="screenTitle"
-          on-query-submit="updateQueryAndFetch"
-          app-name="'dashboard'"
-          index-patterns="indexPatterns"
-          filters="model.filters"
-          on-filters-updated="onFiltersUpdated"
-          show-filter-bar="showFilterBar()"
-          show-date-picker="true"
-          date-range-from="model.timeRange.from"
-          date-range-to="model.timeRange.to"
-          is-refresh-paused="model.refreshInterval.pause"
-          refresh-interval="model.refreshInterval.value"
-          on-refresh-change="onRefreshChange"
-        ></search-bar>
-      </div>
-    </div>
-  </kbn-top-nav>
+  <kbn-top-nav-v2 
+    app-name="'dashboard'"
+    config="topNavMenu" 
+    
+    show-search-bar="chrome.getVisible()"
+    show-filter-bar="showFilterBar()"
+
+    filters="model.filters"
+    query="model.query"
+    screen-title="screenTitle"
+    on-query-submit="updateQueryAndFetch"
+    index-patterns="indexPatterns"
+    filters="model.filters"
+    on-filters-updated="onFiltersUpdated"
+    date-range-from="model.timeRange.from"
+    date-range-to="model.timeRange.to"
+    is-refresh-paused="model.refreshInterval.pause"
+    refresh-interval="model.refreshInterval.value"
+    on-refresh-change="onRefreshChange">
+  </kbn-top-nav-v2>
 
   <!--
   The top nav is hidden in embed mode but the filter bar must still be present so
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx
index ec6755e95c323..7c31bf60bd736 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx
@@ -547,11 +547,21 @@ export class DashboardAppController {
 
     $scope.showAddPanel = () => {
       dashboardStateManager.setFullScreenMode(false);
-      $scope.kbnTopNav.click(TopNavIds.ADD);
+      /*
+       * Temp solution for triggering menu click.
+       * When de-angularizing this code, please call the underlaying action function
+       * directly and not via the top nav object.
+       **/
+      navActions[TopNavIds.ADD]();
     };
     $scope.enterEditMode = () => {
       dashboardStateManager.setFullScreenMode(false);
-      $scope.kbnTopNav.click('edit');
+      /*
+       * Temp solution for triggering menu click.
+       * When de-angularizing this code, please call the underlaying action function
+       * directly and not via the top nav object.
+       **/
+      navActions[TopNavIds.ENTER_EDIT_MODE]();
     };
     const navActions: {
       [key: string]: NavAction;
@@ -641,7 +651,7 @@ export class DashboardAppController {
       }
     };
 
-    navActions[TopNavIds.OPTIONS] = (menuItem, navController, anchorElement) => {
+    navActions[TopNavIds.OPTIONS] = anchorElement => {
       showOptionsPopover({
         anchorElement,
         useMargins: dashboardStateManager.getUseMargins(),
@@ -654,7 +664,7 @@ export class DashboardAppController {
         },
       });
     };
-    navActions[TopNavIds.SHARE] = (menuItem, navController, anchorElement) => {
+    navActions[TopNavIds.SHARE] = anchorElement => {
       showShareContextMenu({
         anchorElement,
         allowEmbed: true,
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/index.js b/src/legacy/core_plugins/kibana/public/dashboard/index.js
index a1ea66c0e841a..6c97d4f86478e 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/index.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/index.js
@@ -40,7 +40,6 @@ import { uiModules } from 'ui/modules';
 import 'ui/capabilities/route_setup';
 
 import { data } from 'plugins/data/setup';
-data.search.loadLegacyDirectives();
 data.filter.loadLegacyDirectives();
 
 const app = uiModules.get('app/dashboard', [
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.ts b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.ts
index 955868f1f7ca8..97942cd4c7167 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.ts
@@ -61,7 +61,7 @@ export function getTopNavConfig(
 
 function getFullScreenConfig(action: NavAction) {
   return {
-    key: i18n.translate('kbn.dashboard.topNave.fullScreenButtonAriaLabel', {
+    id: i18n.translate('kbn.dashboard.topNave.fullScreenButtonAriaLabel', {
       defaultMessage: 'full screen',
     }),
     description: i18n.translate('kbn.dashboard.topNave.fullScreenConfigDescription', {
@@ -77,7 +77,7 @@ function getFullScreenConfig(action: NavAction) {
  */
 function getEditConfig(action: NavAction) {
   return {
-    key: i18n.translate('kbn.dashboard.topNave.editButtonAriaLabel', {
+    id: i18n.translate('kbn.dashboard.topNave.editButtonAriaLabel', {
       defaultMessage: 'edit',
     }),
     description: i18n.translate('kbn.dashboard.topNave.editConfigDescription', {
@@ -96,7 +96,7 @@ function getEditConfig(action: NavAction) {
  */
 function getSaveConfig(action: NavAction) {
   return {
-    key: i18n.translate('kbn.dashboard.topNave.saveButtonAriaLabel', {
+    id: i18n.translate('kbn.dashboard.topNave.saveButtonAriaLabel', {
       defaultMessage: 'save',
     }),
     description: i18n.translate('kbn.dashboard.topNave.saveConfigDescription', {
@@ -112,7 +112,7 @@ function getSaveConfig(action: NavAction) {
  */
 function getViewConfig(action: NavAction) {
   return {
-    key: i18n.translate('kbn.dashboard.topNave.cancelButtonAriaLabel', {
+    id: i18n.translate('kbn.dashboard.topNave.cancelButtonAriaLabel', {
       defaultMessage: 'cancel',
     }),
     description: i18n.translate('kbn.dashboard.topNave.viewConfigDescription', {
@@ -128,7 +128,7 @@ function getViewConfig(action: NavAction) {
  */
 function getCloneConfig(action: NavAction) {
   return {
-    key: i18n.translate('kbn.dashboard.topNave.cloneButtonAriaLabel', {
+    id: i18n.translate('kbn.dashboard.topNave.cloneButtonAriaLabel', {
       defaultMessage: 'clone',
     }),
     description: i18n.translate('kbn.dashboard.topNave.cloneConfigDescription', {
@@ -144,7 +144,7 @@ function getCloneConfig(action: NavAction) {
  */
 function getAddConfig(action: NavAction) {
   return {
-    key: i18n.translate('kbn.dashboard.topNave.addButtonAriaLabel', {
+    id: i18n.translate('kbn.dashboard.topNave.addButtonAriaLabel', {
       defaultMessage: 'add',
     }),
     description: i18n.translate('kbn.dashboard.topNave.addConfigDescription', {
@@ -160,7 +160,7 @@ function getAddConfig(action: NavAction) {
  */
 function getShareConfig(action: NavAction) {
   return {
-    key: i18n.translate('kbn.dashboard.topNave.shareButtonAriaLabel', {
+    id: i18n.translate('kbn.dashboard.topNave.shareButtonAriaLabel', {
       defaultMessage: 'share',
     }),
     description: i18n.translate('kbn.dashboard.topNave.shareConfigDescription', {
@@ -176,7 +176,7 @@ function getShareConfig(action: NavAction) {
  */
 function getOptionsConfig(action: NavAction) {
   return {
-    key: i18n.translate('kbn.dashboard.topNave.optionsButtonAriaLabel', {
+    id: i18n.translate('kbn.dashboard.topNave.optionsButtonAriaLabel', {
       defaultMessage: 'options',
     }),
     description: i18n.translate('kbn.dashboard.topNave.optionsConfigDescription', {
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/types.ts b/src/legacy/core_plugins/kibana/public/dashboard/types.ts
index ed2f4904580d1..a0a8fde0b3a04 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/types.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/types.ts
@@ -32,7 +32,7 @@ import {
 
 import { ViewMode } from '../../../embeddable_api/public';
 
-export type NavAction = (menuItem: any, navController: any, anchorElement: any) => void;
+export type NavAction = (anchorElement?: any) => void;
 
 export interface GridData {
   w: number;
diff --git a/src/legacy/core_plugins/kibana/public/discover/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/_discover.scss
index 24982448254b1..ec345d33406be 100644
--- a/src/legacy/core_plugins/kibana/public/discover/_discover.scss
+++ b/src/legacy/core_plugins/kibana/public/discover/_discover.scss
@@ -35,6 +35,11 @@ discover-app {
   }
 }
 
+.dscResultCount {
+  padding-top: $euiSizeXS;
+  padding-left: $euiSizeM;
+}
+
 .dscTimechart__header {
   display: flex;
   justify-content: center;
diff --git a/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js b/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js
index 124729c36ced7..ded25a37f7e4d 100644
--- a/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js
+++ b/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js
@@ -71,9 +71,6 @@ import { getRootBreadcrumbs, getSavedSearchBreadcrumbs } from '../breadcrumbs';
 import { buildVislibDimensions } from 'ui/visualize/loader/pipeline_helpers/build_pipeline';
 import 'ui/capabilities/route_setup';
 
-import { data } from 'plugins/data/setup';
-data.search.loadLegacyDirectives();
-
 const fetchStatuses = {
   UNINITIALIZED: 'uninitialized',
   LOADING: 'loading',
@@ -239,7 +236,7 @@ function discoverController(
 
   const getTopNavLinks = () => {
     const newSearch = {
-      key: 'new',
+      id: 'new',
       label: i18n.translate('kbn.discover.localMenu.localMenu.newSearchTitle', {
         defaultMessage: 'New',
       }),
@@ -251,7 +248,7 @@ function discoverController(
     };
 
     const saveSearch = {
-      key: 'save',
+      id: 'save',
       label: i18n.translate('kbn.discover.localMenu.saveTitle', {
         defaultMessage: 'Save',
       }),
@@ -291,7 +288,7 @@ function discoverController(
     };
 
     const openSearch = {
-      key: 'open',
+      id: 'open',
       label: i18n.translate('kbn.discover.localMenu.openTitle', {
         defaultMessage: 'Open',
       }),
@@ -309,7 +306,7 @@ function discoverController(
     };
 
     const shareSearch = {
-      key: 'share',
+      id: 'share',
       label: i18n.translate('kbn.discover.localMenu.shareTitle', {
         defaultMessage: 'Share',
       }),
@@ -317,7 +314,7 @@ function discoverController(
         defaultMessage: 'Share Search',
       }),
       testId: 'shareTopNavButton',
-      run: async (menuItem, navController, anchorElement) => { // eslint-disable-line no-unused-vars
+      run: async (anchorElement) => {
         const sharingData = await this.getSharingData();
         showShareContextMenu({
           anchorElement,
@@ -337,7 +334,7 @@ function discoverController(
     };
 
     const inspectSearch = {
-      key: 'inspect',
+      id: 'inspect',
       label: i18n.translate('kbn.discover.localMenu.inspectTitle', {
         defaultMessage: 'Inspect',
       }),
diff --git a/src/legacy/core_plugins/kibana/public/discover/index.html b/src/legacy/core_plugins/kibana/public/discover/index.html
index 3a161c4bb780b..522d23463ff99 100644
--- a/src/legacy/core_plugins/kibana/public/discover/index.html
+++ b/src/legacy/core_plugins/kibana/public/discover/index.html
@@ -1,58 +1,25 @@
 <discover-app class="app-container">
   <!-- Local nav. -->
-  <kbn-top-nav name="discover" config="topNavMenu">
-    <!-- Transcluded elements. -->
-    <div data-transclude-slots>
-      <!-- Breadcrumbs. -->
-      <div data-transclude-slot="topLeftCorner" class="kuiLocalBreadcrumbs">
-        <h1 id="kui_local_breadcrumb" class="kuiLocalBreadcrumb" ng-if="opts.savedSearch.id">
-          <span class="kuiLocalBreadcrumb__emphasis">
-            <button
-              class="kuiLink"
-              type="button"
-              id="reload_saved_search"
-              aria-label="{{::'kbn.discover.reloadSavedSearchAriaLabel' | i18n: {defaultMessage: 'Reload saved search'} }}"
-              tooltip="{{::'kbn.discover.reloadSavedSearchTooltip' | i18n: {defaultMessage: 'Reload saved search'} }}"
-              tooltip-placement="right"
-              tooltip-append-to-body="1"
-              ng-click="resetQuery()"
-            >
-              <span class="kuiIcon fa-undo small"></span>
-              {{::'kbn.discover.reloadSavedSearchButton' | i18n: {defaultMessage: 'Reload'} }}
-            </button>
-          </span>
-        </h1>
-        <div class="kuiLocalBreadcrumb">
-          <span data-test-subj="discoverQueryHits" class="kuiLocalBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
-          <span
-            i18n-id="kbn.discover.hitsPluralTitle"
-            i18n-default-message="{hits, plural, one {hit} other {hits}}"
-            i18n-values="{ hits }"
-          ></span>
-        </div>
-      </div>
-
-      <!-- Search. -->
-      <div data-transclude-slot="bottomRow" class="fullWidth">
-        <search-bar
-          query="state.query"
-          screen-title="screenTitle"
-          on-query-submit="updateQueryAndFetch"
-          app-name="'discover'"
-          index-patterns="[indexPattern]"
-          filters="filters"
-          on-filters-updated="onFiltersUpdated"
-          show-date-picker="enableTimeRangeSelector"
-          date-range-from="time.from"
-          date-range-to="time.to"
-          is-refresh-paused="refreshInterval.pause"
-          refresh-interval="refreshInterval.value"
-          on-refresh-change="onRefreshChange"
-        ></search-bar>
-      </div>
-    </div>
-  </kbn-top-nav>
 
+  <kbn-top-nav-v2 
+    app-name="'discover'"
+    config="topNavMenu"
+    show-search-bar="true"
+    show-date-picker="enableTimeRangeSelector"
+    query="state.query"
+    screen-title="screenTitle"
+    on-query-submit="updateQueryAndFetch"
+    index-patterns="[indexPattern]"
+    filters="filters"
+    on-filters-updated="onFiltersUpdated"
+    date-range-from="time.from"
+    date-range-to="time.to"
+    is-refresh-paused="refreshInterval.pause"
+    refresh-interval="refreshInterval.value"
+    on-refresh-change="onRefreshChange"
+  >
+  </kbn-top-nav-v2>
+  
   <main class="container-fluid">
     <div class="row">
       <div class="col-md-2 sidebar-container collapsible-sidebar" id="discover-sidebar">
@@ -113,6 +80,7 @@ <h1 id="kui_local_breadcrumb" class="kuiLocalBreadcrumb" ng-if="opts.savedSearch
               class="kuiButton kuiButton--basic kuiButton--iconText dscSkipButton"
               ng-click="showAllRows(); scrollToBottom()"
             >
+
               <span class="kuiButton__inner">
                 <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-chevron-down"></span>
                 <span
@@ -122,6 +90,15 @@ <h1 id="kui_local_breadcrumb" class="kuiLocalBreadcrumb" ng-if="opts.savedSearch
               </span>
             </button>
 
+            <div class="dscResultCount">
+              <span data-test-subj="discoverQueryHits" class="kuiLocalBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
+              <span
+                i18n-id="kbn.discover.hitsPluralTitle"
+                i18n-default-message="{hits, plural, one {hit} other {hits}}"
+                i18n-values="{ hits }"
+              ></span>
+            </div>
+
             <section
               aria-label="{{::'kbn.discover.histogramOfFoundDocumentsAriaLabel' | i18n: {defaultMessage: 'Histogram of found documents'} }}"
               class="dscTimechart"
diff --git a/src/legacy/core_plugins/kibana/public/kibana.js b/src/legacy/core_plugins/kibana/public/kibana.js
index dbdc9e4c547e0..b6d4ec233e108 100644
--- a/src/legacy/core_plugins/kibana/public/kibana.js
+++ b/src/legacy/core_plugins/kibana/public/kibana.js
@@ -60,7 +60,6 @@ import './context';
 import 'ui/vislib';
 import 'ui/agg_response';
 import 'ui/agg_types';
-import 'ui/timepicker';
 import { showAppRedirectNotification } from 'ui/notify';
 import 'leaflet';
 
diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/_editor.scss b/src/legacy/core_plugins/kibana/public/visualize/editor/_editor.scss
index c53325ea5e8dd..dfe74acd47ea8 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/editor/_editor.scss
+++ b/src/legacy/core_plugins/kibana/public/visualize/editor/_editor.scss
@@ -26,6 +26,9 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
   }
 }
 
+.visEditor__linkedMessage {
+  padding: $euiSizeS;
+}
 
 .visEditor__content {
   @include flex-parent();
diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
index 64905d18ccfb8..cfe32d40ae9c1 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
@@ -1,55 +1,60 @@
 <visualize-app class="app-container visEditor visEditor--{{ vis.type.name }}">
-  <!-- Local nav. -->
-  <kbn-top-nav name="visualize" config="topNavMenu">
-    <!-- Transcluded elements. -->
-    <div data-transclude-slots>
-      <!-- Search. -->
-      <div
-        data-transclude-slot="bottomRow"
-        ng-show="chrome.getVisible()"
-        class="fullWidth"
+  <!-- Linked search. -->
+  <div
+      ng-show="chrome.getVisible()"
+      ng-if="vis.type.requiresSearch && state.linked"
+      class="fullWidth visEditor__linkedMessage"
+    >
+    <div class="kuiVerticalRhythmSmall">
+      {{ ::'kbn.visualize.linkedToSearchInfoText' | i18n: { defaultMessage: 'Linked to Saved Search' } }}
+      <a
+        href="#/discover/{{savedVis.savedSearch.id}}"
       >
-        <div ng-if="vis.type.requiresSearch && state.linked" class="kuiVerticalRhythmSmall">
-          {{ ::'kbn.visualize.linkedToSearchInfoText' | i18n: { defaultMessage: 'Linked to Saved Search' } }}
-          <a
-            href="#/discover/{{savedVis.savedSearch.id}}"
-          >
-            {{ savedVis.savedSearch.title }}
-          </a>
-          &nbsp;
-          <a
-            data-test-subj="unlinkSavedSearch"
-            href=""
-            ng-dblclick="unlink()"
-            tooltip="{{ ::'kbn.visualize.linkedToSearch.unlinkButtonTooltip' | i18n: { defaultMessage: 'Double click to unlink from Saved Search' } }}"
-          >
-            <span aria-hidden="true" class="kuiIcon fa-chain-broken"></span>
-          </a>
-        </div>
-
-        <div class="fullWidth kuiVerticalRhythmSmall">
-          <search-bar
-            query="state.query"
-            screen-title="state.vis.title"
-            on-query-submit="updateQueryAndFetch"
-            app-name="'visualize'"
-            index-patterns="[indexPattern]"
-            filters="filters"
-            on-filters-updated="onFiltersUpdated"
-            show-query-bar="showQueryBar()"
-            show-filter-bar="vis.type.options.showFilterBar && chrome.getVisible()"
-            show-date-picker="enableQueryBarTimeRangeSelector"
-            date-range-from="timeRange.from"
-            date-range-to="timeRange.to"
-            is-refresh-paused="refreshInterval.pause"
-            refresh-interval="refreshInterval.value"
-            show-auto-refresh-only="showAutoRefreshOnlyInQueryBar"
-            on-refresh-change="onRefreshChange"
-          ></search-bar>
-        </div>
-      </div>
+        {{ savedVis.savedSearch.title }}
+      </a>
+      &nbsp;
+      <a
+        data-test-subj="unlinkSavedSearch"
+        href=""
+        ng-dblclick="unlink()"
+        tooltip="{{ ::'kbn.visualize.linkedToSearch.unlinkButtonTooltip' | i18n: { defaultMessage: 'Double click to unlink from Saved Search' } }}"
+      >
+        <span aria-hidden="true" class="kuiIcon fa-chain-broken"></span>
+      </a>
     </div>
-  </kbn-top-nav>
+  </div>
+  
+  <!-- 
+    Local nav. 
+    Most visualizations have all search bar components enabled 
+    Some visualizations have fewer options but all visualizations have a search bar 
+    which is why show-search-baris set to "true".
+    All visualizaions also have least a timepicker \ autorefresh component, which is why
+    show-query-bar is set to "true".
+  -->
+  <kbn-top-nav-v2 
+    app-name="'visualize'"
+    config="topNavMenu"
+    show-search-bar="true"
+    show-query-bar="true" 
+    show-search-bar-inline="showSearchBarInline()"
+    show-query-input="showQueryInput()"
+    show-filter-bar="showFilterBar() && chrome.getVisible()"
+    show-date-picker="showQueryBarTimePicker()"
+    show-auto-refresh-only="!showQueryBarTimePicker()"
+    query="state.query"
+    screen-title="state.vis.title"
+    on-query-submit="updateQueryAndFetch"
+    index-patterns="[indexPattern]"
+    filters="filters"
+    on-filters-updated="onFiltersUpdated"
+    date-range-from="timeRange.from"
+    date-range-to="timeRange.to"
+    is-refresh-paused="refreshInterval.pause"
+    refresh-interval="refreshInterval.value"
+    on-refresh-change="onRefreshChange"
+  >
+  </kbn-top-nav-v2>
 
   <!--
     The top nav is hidden in embed mode but the filter bar must still be present so
diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
index 8432268a4ee94..c4b120784b864 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
@@ -150,7 +150,7 @@ function VisEditor(
   };
 
   $scope.topNavMenu = [...(capabilities.get().visualize.save ? [{
-    key: i18n.translate('kbn.topNavMenu.saveVisualizationButtonLabel', { defaultMessage: 'save' }),
+    id: i18n.translate('kbn.topNavMenu.saveVisualizationButtonLabel', { defaultMessage: 'save' }),
     description: i18n.translate('kbn.visualize.topNavMenu.saveVisualizationButtonAriaLabel', {
       defaultMessage: 'Save Visualization',
     }),
@@ -203,12 +203,12 @@ function VisEditor(
       showSaveModal(saveModal);
     }
   }] : []), {
-    key: i18n.translate('kbn.topNavMenu.shareVisualizationButtonLabel', { defaultMessage: 'share' }),
+    id: i18n.translate('kbn.topNavMenu.shareVisualizationButtonLabel', { defaultMessage: 'share' }),
     description: i18n.translate('kbn.visualize.topNavMenu.shareVisualizationButtonAriaLabel', {
       defaultMessage: 'Share Visualization',
     }),
     testId: 'shareTopNavButton',
-    run: (menuItem, navController, anchorElement) => {
+    run: (anchorElement) => {
       const hasUnappliedChanges = vis.dirty;
       const hasUnsavedChanges = $appStatus.dirty;
       showShareContextMenu({
@@ -226,7 +226,7 @@ function VisEditor(
       });
     }
   }, {
-    key: i18n.translate('kbn.topNavMenu.openInspectorButtonLabel', { defaultMessage: 'inspect' }),
+    id: i18n.translate('kbn.topNavMenu.openInspectorButtonLabel', { defaultMessage: 'inspect' }),
     description: i18n.translate('kbn.visualize.topNavMenu.openInspectorButtonAriaLabel', {
       defaultMessage: 'Open Inspector for visualization',
     }),
@@ -249,7 +249,7 @@ function VisEditor(
       }
     }
   }, {
-    key: i18n.translate('kbn.topNavMenu.refreshButtonLabel', { defaultMessage: 'refresh' }),
+    id: i18n.translate('kbn.topNavMenu.refreshButtonLabel', { defaultMessage: 'refresh' }),
     description: i18n.translate('kbn.visualize.topNavMenu.refreshButtonAriaLabel', {
       defaultMessage: 'Refresh',
     }),
@@ -351,10 +351,23 @@ function VisEditor(
 
     $scope.isAddToDashMode = () => addToDashMode;
 
-    $scope.showQueryBar = () => {
+    $scope.showSearchBarInline = () => {
+      // Show inline with menu, if it's only the timepicker \ autorefresh component
+      return !$scope.showQueryInput() && !$scope.showFilterBar();
+    };
+
+    $scope.showFilterBar = () => {
+      return vis.type.options.showFilterBar;
+    };
+
+    $scope.showQueryInput = () => {
       return vis.type.requiresSearch && vis.type.options.showQueryBar;
     };
 
+    $scope.showQueryBarTimePicker = () => {
+      return vis.type.options.showTimePicker;
+    };
+
     $scope.timeRange = timefilter.getTime();
     $scope.opts = _.pick($scope, 'savedVis', 'isAddToDashMode');
 
@@ -370,33 +383,6 @@ function VisEditor(
 
     $state.replace();
 
-    $scope.$watchMulti([
-      'searchSource.getField("index")',
-      'vis.type.options.showTimePicker',
-      $scope.showQueryBar,
-    ], function ([index, requiresTimePicker, showQueryBar]) {
-      const showTimeFilter = Boolean((!index || index.timeFieldName) && requiresTimePicker);
-
-      if (showQueryBar) {
-        timefilter.disableTimeRangeSelector();
-        timefilter.disableAutoRefreshSelector();
-        $scope.enableQueryBarTimeRangeSelector = true;
-        $scope.showAutoRefreshOnlyInQueryBar = !showTimeFilter;
-      }
-      else if (showTimeFilter) {
-        timefilter.enableTimeRangeSelector();
-        timefilter.enableAutoRefreshSelector();
-        $scope.enableQueryBarTimeRangeSelector = false;
-        $scope.showAutoRefreshOnlyInQueryBar = false;
-      }
-      else {
-        timefilter.disableTimeRangeSelector();
-        timefilter.enableAutoRefreshSelector();
-        $scope.enableQueryBarTimeRangeSelector = false;
-        $scope.showAutoRefreshOnlyInQueryBar = false;
-      }
-    });
-
     const updateTimeRange = () => {
       $scope.timeRange = timefilter.getTime();
       // In case we are running in embedded mode (i.e. we used the visualize loader to embed)
diff --git a/src/legacy/core_plugins/kibana/public/visualize/index.js b/src/legacy/core_plugins/kibana/public/visualize/index.js
index ae2bae73253c1..9548a05a355f4 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/index.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/index.js
@@ -30,7 +30,6 @@ import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/r
 import { getLandingBreadcrumbs, getWizardStep1Breadcrumbs } from './breadcrumbs';
 
 import { data } from 'plugins/data/setup';
-data.search.loadLegacyDirectives();
 data.filter.loadLegacyDirectives();
 
 uiRoutes
diff --git a/src/legacy/core_plugins/data/public/search/search_service.ts b/src/legacy/core_plugins/kibana_react/index.ts
similarity index 55%
rename from src/legacy/core_plugins/data/public/search/search_service.ts
rename to src/legacy/core_plugins/kibana_react/index.ts
index 2e65280d3bcff..eb936b94c37ef 100644
--- a/src/legacy/core_plugins/data/public/search/search_service.ts
+++ b/src/legacy/core_plugins/kibana_react/index.ts
@@ -17,27 +17,26 @@
  * under the License.
  */
 
-import { once } from 'lodash';
-import { SearchBar, setupDirective as setupSearchBarDirective } from './search_bar';
+import { resolve } from 'path';
+import { Legacy } from '../../../../kibana';
 
-/**
- * Search Service
- * @internal
- */
-export class SearchService {
-  public setup() {
-    return {
-      ui: {
-        SearchBar,
-      },
-      loadLegacyDirectives: once(setupSearchBarDirective),
-    };
-  }
+// eslint-disable-next-line import/no-default-export
+export default function DataPlugin(kibana: any) {
+  const config: Legacy.PluginSpecOptions = {
+    id: 'kibana_react',
+    require: [],
+    publicDir: resolve(__dirname, 'public'),
+    config: (Joi: any) => {
+      return Joi.object({
+        enabled: Joi.boolean().default(true),
+      }).default();
+    },
+    init: (server: Legacy.Server) => ({}),
+    uiExports: {
+      injectDefaultVars: () => ({}),
+      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
+    },
+  };
 
-  public stop() {
-    // nothing to do here yet
-  }
+  return new kibana.Plugin(config);
 }
-
-/** @public */
-export type SearchSetup = ReturnType<SearchService['setup']>;
diff --git a/src/legacy/core_plugins/kibana_react/package.json b/src/legacy/core_plugins/kibana_react/package.json
new file mode 100644
index 0000000000000..3f7cf717a1963
--- /dev/null
+++ b/src/legacy/core_plugins/kibana_react/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "kibana_react",
+  "version": "kibana"
+}
diff --git a/src/legacy/core_plugins/kibana_react/public/index.scss b/src/legacy/core_plugins/kibana_react/public/index.scss
new file mode 100644
index 0000000000000..4c969b1a37e8c
--- /dev/null
+++ b/src/legacy/core_plugins/kibana_react/public/index.scss
@@ -0,0 +1,3 @@
+@import 'src/legacy/ui/public/styles/styling_constants';
+
+@import './top_nav_menu/index';
diff --git a/src/legacy/core_plugins/kibana_react/public/index.ts b/src/legacy/core_plugins/kibana_react/public/index.ts
new file mode 100644
index 0000000000000..df93dc64de22e
--- /dev/null
+++ b/src/legacy/core_plugins/kibana_react/public/index.ts
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+// TODO these are imports from the old plugin world.
+// Once the new platform is ready, they can get removed
+// and handled by the platform itself in the setup method
+// of the ExpressionExectorService
+
+/** @public types */
+export { SearchBar, SearchBarProps } from './search_bar';
+export { TopNavMenu, TopNavMenuData } from './top_nav_menu';
diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx b/src/legacy/core_plugins/kibana_react/public/search_bar/components/index.tsx
similarity index 95%
rename from src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx
rename to src/legacy/core_plugins/kibana_react/public/search_bar/components/index.tsx
index 131c6059934a4..24ffa939a746e 100644
--- a/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx
+++ b/src/legacy/core_plugins/kibana_react/public/search_bar/components/index.tsx
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { SearchBar } from './search_bar';
+export * from './search_bar';
diff --git a/src/legacy/core_plugins/kibana_react/public/search_bar/components/search_bar.test.tsx b/src/legacy/core_plugins/kibana_react/public/search_bar/components/search_bar.test.tsx
new file mode 100644
index 0000000000000..7d25e8c19e97a
--- /dev/null
+++ b/src/legacy/core_plugins/kibana_react/public/search_bar/components/search_bar.test.tsx
@@ -0,0 +1,199 @@
+/*
+ * 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 { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { SearchBar } from './search_bar';
+
+jest.mock('../../../../data/public', () => {
+  return {
+    FilterBar: () => <div className="filterBar"></div>,
+    QueryBar: () => <div className="queryBar"></div>,
+  };
+});
+
+const noop = jest.fn();
+
+const createMockWebStorage = () => ({
+  clear: jest.fn(),
+  getItem: jest.fn(),
+  key: jest.fn(),
+  removeItem: jest.fn(),
+  setItem: jest.fn(),
+  length: 0,
+});
+
+const createMockStorage = () => ({
+  store: createMockWebStorage(),
+  get: jest.fn(),
+  set: jest.fn(),
+  remove: jest.fn(),
+  clear: jest.fn(),
+});
+
+const mockIndexPattern = {
+  id: '1234',
+  title: 'logstash-*',
+  fields: [
+    {
+      name: 'response',
+      type: 'number',
+      esTypes: ['integer'],
+      aggregatable: true,
+      filterable: true,
+      searchable: true,
+    },
+  ],
+};
+
+const kqlQuery = {
+  query: 'response:200',
+  language: 'kuery',
+};
+
+describe('SearchBar', () => {
+  const SEARCH_BAR_ROOT = '.globalQueryBar';
+  const FILTER_BAR = '.filterBar';
+  const QUERY_BAR = '.queryBar';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('Should render query bar when no options provided (in reality - timepicker)', () => {
+    const component = mountWithIntl(
+      <SearchBar.WrappedComponent
+        appName={'test'}
+        indexPatterns={[mockIndexPattern]}
+        intl={null as any}
+      />
+    );
+
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(1);
+  });
+
+  it('Should render empty when timepicker disabled and no options provided', () => {
+    const component = mountWithIntl(
+      <SearchBar.WrappedComponent
+        appName={'test'}
+        indexPatterns={[mockIndexPattern]}
+        intl={null as any}
+        showDatePicker={false}
+      />
+    );
+
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(0);
+  });
+
+  it('Should render filter bar, when required fields are provided', () => {
+    const component = mountWithIntl(
+      <SearchBar.WrappedComponent
+        appName={'test'}
+        indexPatterns={[mockIndexPattern]}
+        intl={null as any}
+        filters={[]}
+        onFiltersUpdated={noop}
+        showDatePicker={false}
+      />
+    );
+
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(1);
+    expect(component.find(QUERY_BAR).length).toBe(0);
+  });
+
+  it('Should NOT render filter bar, if disabled', () => {
+    const component = mountWithIntl(
+      <SearchBar.WrappedComponent
+        appName={'test'}
+        indexPatterns={[mockIndexPattern]}
+        intl={null as any}
+        showFilterBar={false}
+        filters={[]}
+        onFiltersUpdated={noop}
+        showDatePicker={false}
+      />
+    );
+
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(0);
+  });
+
+  it('Should render query bar, when required fields are provided', () => {
+    const component = mountWithIntl(
+      <SearchBar.WrappedComponent
+        appName={'test'}
+        indexPatterns={[mockIndexPattern]}
+        intl={null as any}
+        screenTitle={'test screen'}
+        store={createMockStorage()}
+        onQuerySubmit={noop}
+        query={kqlQuery}
+      />
+    );
+
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(1);
+  });
+
+  it('Should NOT render query bar, if disabled', () => {
+    const component = mountWithIntl(
+      <SearchBar.WrappedComponent
+        appName={'test'}
+        indexPatterns={[mockIndexPattern]}
+        intl={null as any}
+        screenTitle={'test screen'}
+        store={createMockStorage()}
+        onQuerySubmit={noop}
+        query={kqlQuery}
+        showQueryBar={false}
+      />
+    );
+
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(0);
+    expect(component.find(QUERY_BAR).length).toBe(0);
+  });
+
+  it('Should render query bar and filter bar', () => {
+    const component = mountWithIntl(
+      <SearchBar.WrappedComponent
+        appName={'test'}
+        indexPatterns={[mockIndexPattern]}
+        intl={null as any}
+        screenTitle={'test screen'}
+        store={createMockStorage()}
+        onQuerySubmit={noop}
+        query={kqlQuery}
+        filters={[]}
+        onFiltersUpdated={noop}
+      />
+    );
+
+    expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
+    expect(component.find(FILTER_BAR).length).toBe(1);
+    expect(component.find(QUERY_BAR).length).toBe(1);
+  });
+});
diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx b/src/legacy/core_plugins/kibana_react/public/search_bar/components/search_bar.tsx
similarity index 51%
rename from src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx
rename to src/legacy/core_plugins/kibana_react/public/search_bar/components/search_bar.tsx
index 26a641b7bc153..41cccfeb8661d 100644
--- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx
+++ b/src/legacy/core_plugins/kibana_react/public/search_bar/components/search_bar.tsx
@@ -24,11 +24,9 @@ import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import React, { Component } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
-import { IndexPattern } from 'ui/index_patterns';
 import { Storage } from 'ui/storage';
 
-import { Query, QueryBar } from '../../../query/query_bar';
-import { FilterBar } from '../../../filter/filter_bar';
+import { IndexPattern, Query, QueryBar, FilterBar } from '../../../../data/public';
 
 interface DateRange {
   from: string;
@@ -39,22 +37,26 @@ interface DateRange {
  * NgReact lib requires that changes to the props need to be made in the directive config as well
  * See [search_bar\directive\index.js] file
  */
-interface Props {
-  query: Query;
-  onQuerySubmit: (payload: { dateRange: DateRange; query: Query }) => void;
-  disableAutoFocus?: boolean;
+export interface SearchBarProps {
   appName: string;
-  screenTitle: string;
-  indexPatterns: IndexPattern[];
-  store: Storage;
-  filters: Filter[];
-  onFiltersUpdated: (filters: Filter[]) => void;
-  showQueryBar: boolean;
-  showFilterBar: boolean;
   intl: InjectedIntl;
+  indexPatterns?: IndexPattern[];
+  // Query bar
+  showQueryBar?: boolean;
+  showQueryInput?: boolean;
+  screenTitle?: string;
+  store?: Storage;
+  query?: Query;
+  onQuerySubmit?: (payload: { dateRange: DateRange; query?: Query }) => void;
+  // Filter bar
+  showFilterBar?: boolean;
+  filters?: Filter[];
+  onFiltersUpdated?: (filters: Filter[]) => void;
+  // Date picker
   showDatePicker?: boolean;
   dateRangeFrom?: string;
   dateRangeTo?: string;
+  // Autorefresh
   isRefreshPaused?: boolean;
   refreshInterval?: number;
   showAutoRefreshOnly?: boolean;
@@ -65,10 +67,12 @@ interface State {
   isFiltersVisible: boolean;
 }
 
-class SearchBarUI extends Component<Props, State> {
+class SearchBarUI extends Component<SearchBarProps, State> {
   public static defaultProps = {
     showQueryBar: true,
     showFilterBar: true,
+    showDatePicker: true,
+    showAutoRefreshOnly: false,
   };
 
   public filterBarRef: Element | null = null;
@@ -78,6 +82,61 @@ class SearchBarUI extends Component<Props, State> {
     isFiltersVisible: true,
   };
 
+  private getFilterLength() {
+    if (this.props.showFilterBar && this.props.filters) {
+      return this.props.filters.length;
+    }
+  }
+
+  private getFilterUpdateFunction() {
+    if (this.props.showFilterBar && this.props.onFiltersUpdated) {
+      return this.props.onFiltersUpdated;
+    }
+    return (filters: Filter[]) => {};
+  }
+
+  private shouldRenderQueryBar() {
+    const showDatePicker = this.props.showDatePicker || this.props.showAutoRefreshOnly;
+    const showQueryInput =
+      this.props.showQueryInput && this.props.indexPatterns && this.props.query;
+    return this.props.showQueryBar && (showDatePicker || showQueryInput);
+  }
+
+  private shouldRenderFilterBar() {
+    return this.props.showFilterBar && this.props.filters && this.props.indexPatterns;
+  }
+
+  private getFilterTriggerButton() {
+    const filtersAppliedText = this.props.intl.formatMessage({
+      id: 'kibana_react.search.searchBar.filtersButtonFiltersAppliedTitle',
+      defaultMessage: 'filters applied.',
+    });
+    const clickToShowOrHideText = this.state.isFiltersVisible
+      ? this.props.intl.formatMessage({
+          id: 'kibana_react.search.searchBar.filtersButtonClickToShowTitle',
+          defaultMessage: 'Select to hide',
+        })
+      : this.props.intl.formatMessage({
+          id: 'kibana_react.search.searchBar.filtersButtonClickToHideTitle',
+          defaultMessage: 'Select to show',
+        });
+
+    const filterCount = this.getFilterLength();
+    return (
+      <EuiFilterButton
+        onClick={this.toggleFiltersVisible}
+        isSelected={this.state.isFiltersVisible}
+        hasActiveFilters={this.state.isFiltersVisible}
+        numFilters={filterCount ? this.getFilterLength() : undefined}
+        aria-controls="GlobalFilterGroup"
+        aria-expanded={!!this.state.isFiltersVisible}
+        title={`${filterCount ? filtersAppliedText : ''} ${clickToShowOrHideText}`}
+      >
+        Filters
+      </EuiFilterButton>
+    );
+  }
+
   public setFilterBarHeight = () => {
     requestAnimationFrame(() => {
       const height =
@@ -114,85 +173,62 @@ class SearchBarUI extends Component<Props, State> {
   }
 
   public render() {
-    const filtersAppliedText = this.props.intl.formatMessage({
-      id: 'data.search.searchBar.filtersButtonFiltersAppliedTitle',
-      defaultMessage: 'filters applied.',
-    });
-    const clickToShowOrHideText = this.state.isFiltersVisible
-      ? this.props.intl.formatMessage({
-          id: 'data.search.searchBar.filtersButtonClickToShowTitle',
-          defaultMessage: 'Select to hide',
-        })
-      : this.props.intl.formatMessage({
-          id: 'data.search.searchBar.filtersButtonClickToHideTitle',
-          defaultMessage: 'Select to show',
-        });
-
-    const filterTriggerButton = (
-      <EuiFilterButton
-        onClick={this.toggleFiltersVisible}
-        isSelected={this.state.isFiltersVisible}
-        hasActiveFilters={this.state.isFiltersVisible}
-        numFilters={this.props.filters.length > 0 ? this.props.filters.length : undefined}
-        aria-controls="GlobalFilterGroup"
-        aria-expanded={!!this.state.isFiltersVisible}
-        title={`${this.props.filters.length} ${filtersAppliedText} ${clickToShowOrHideText}`}
-      >
-        Filters
-      </EuiFilterButton>
-    );
-
-    const classes = classNames('globalFilterGroup__wrapper', {
-      'globalFilterGroup__wrapper-isVisible': this.state.isFiltersVisible,
-    });
+    let queryBar;
+    if (this.shouldRenderQueryBar()) {
+      queryBar = (
+        <QueryBar
+          query={this.props.query}
+          screenTitle={this.props.screenTitle}
+          onSubmit={this.props.onQuerySubmit!}
+          appName={this.props.appName}
+          indexPatterns={this.props.indexPatterns}
+          store={this.props.store!}
+          prepend={this.props.showFilterBar ? this.getFilterTriggerButton() : ''}
+          showDatePicker={this.props.showDatePicker}
+          showQueryInput={this.props.showQueryInput}
+          dateRangeFrom={this.props.dateRangeFrom}
+          dateRangeTo={this.props.dateRangeTo}
+          isRefreshPaused={this.props.isRefreshPaused}
+          refreshInterval={this.props.refreshInterval}
+          showAutoRefreshOnly={this.props.showAutoRefreshOnly}
+          onRefreshChange={this.props.onRefreshChange}
+        />
+      );
+    }
 
-    return (
-      <div className="globalQueryBar">
-        {this.props.showQueryBar ? (
-          <QueryBar
-            query={this.props.query}
-            screenTitle={this.props.screenTitle}
-            onSubmit={this.props.onQuerySubmit}
-            appName={this.props.appName}
-            indexPatterns={this.props.indexPatterns}
-            store={this.props.store}
-            prepend={this.props.showFilterBar ? filterTriggerButton : ''}
-            showDatePicker={this.props.showDatePicker}
-            dateRangeFrom={this.props.dateRangeFrom}
-            dateRangeTo={this.props.dateRangeTo}
-            isRefreshPaused={this.props.isRefreshPaused}
-            refreshInterval={this.props.refreshInterval}
-            showAutoRefreshOnly={this.props.showAutoRefreshOnly}
-            onRefreshChange={this.props.onRefreshChange}
-          />
-        ) : (
-          ''
-        )}
-
-        {this.props.showFilterBar ? (
+    let filterBar;
+    if (this.shouldRenderFilterBar()) {
+      const filterGroupClasses = classNames('globalFilterGroup__wrapper', {
+        'globalFilterGroup__wrapper-isVisible': this.state.isFiltersVisible,
+      });
+      filterBar = (
+        <div
+          id="GlobalFilterGroup"
+          ref={node => {
+            this.filterBarWrapperRef = node;
+          }}
+          className={filterGroupClasses}
+        >
           <div
-            id="GlobalFilterGroup"
             ref={node => {
-              this.filterBarWrapperRef = node;
+              this.filterBarRef = node;
             }}
-            className={classes}
           >
-            <div
-              ref={node => {
-                this.filterBarRef = node;
-              }}
-            >
-              <FilterBar
-                className="globalFilterGroup__filterBar"
-                filters={this.props.filters}
-                onFiltersUpdated={this.props.onFiltersUpdated}
-                indexPatterns={this.props.indexPatterns}
-              />
-            </div>
+            <FilterBar
+              className="globalFilterGroup__filterBar"
+              filters={this.props.filters!}
+              onFiltersUpdated={this.getFilterUpdateFunction()}
+              indexPatterns={this.props.indexPatterns!}
+            />
           </div>
-        ) : (
-          ''
-        )}
+        </div>
+      );
+    }
+
+    return (
+      <div className="globalQueryBar">
+        {queryBar}
+        {filterBar}
       </div>
     );
   }
diff --git a/src/legacy/core_plugins/data/public/search/index.tsx b/src/legacy/core_plugins/kibana_react/public/search_bar/index.tsx
similarity index 92%
rename from src/legacy/core_plugins/data/public/search/index.tsx
rename to src/legacy/core_plugins/kibana_react/public/search_bar/index.tsx
index b0687ea3c6bcd..faf6e24aa6ed5 100644
--- a/src/legacy/core_plugins/data/public/search/index.tsx
+++ b/src/legacy/core_plugins/kibana_react/public/search_bar/index.tsx
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { SearchService, SearchSetup } from './search_service';
+export * from './components';
diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss
new file mode 100644
index 0000000000000..2950bee65c22e
--- /dev/null
+++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss
@@ -0,0 +1,7 @@
+.topNavMenu__wrapper {
+  z-index: 5;
+
+  .topNavMenu {      
+    padding: $euiSizeS 0px $euiSizeXS;
+  }
+}
diff --git a/src/legacy/core_plugins/data/public/search/search_bar/index.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/index.ts
similarity index 88%
rename from src/legacy/core_plugins/data/public/search/search_bar/index.tsx
rename to src/legacy/core_plugins/kibana_react/public/top_nav_menu/index.ts
index b181b43e0e527..b45baaf0e4711 100644
--- a/src/legacy/core_plugins/data/public/search/search_bar/index.tsx
+++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/index.ts
@@ -17,7 +17,5 @@
  * under the License.
  */
 
-export { SearchBar } from './components';
-
-// @ts-ignore
-export { setupDirective } from './directive';
+export { TopNavMenu } from './top_nav_menu';
+export { TopNavMenuData } from './top_nav_menu_data';
diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx
new file mode 100644
index 0000000000000..7b72ac9c75625
--- /dev/null
+++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx
@@ -0,0 +1,86 @@
+/*
+ * 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 { TopNavMenu } from './top_nav_menu';
+import { TopNavMenuData } from './top_nav_menu_data';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+
+jest.mock('../search_bar', () => {
+  return {
+    SearchBar: () => <div className="searchBar"></div>,
+    SearchBarProps: {},
+  };
+});
+
+describe('TopNavMenu', () => {
+  const TOP_NAV_ITEM_SELECTOR = 'TopNavMenuItem';
+  const SEARCH_BAR_SELECTOR = 'SearchBar';
+  const menuItems: TopNavMenuData[] = [
+    {
+      key: 'test',
+      label: 'test',
+      run: jest.fn(),
+    },
+    {
+      key: 'test2',
+      label: 'test2',
+      run: jest.fn(),
+    },
+    {
+      key: 'test3',
+      label: 'test3',
+      run: jest.fn(),
+    },
+  ];
+
+  it('Should render nothing when no config is provided', () => {
+    const component = shallowWithIntl(<TopNavMenu name="test" />);
+    expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
+    expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0);
+  });
+
+  it('Should render 1 menu item', () => {
+    const component = shallowWithIntl(<TopNavMenu name="test" config={[menuItems[0]]} />);
+    expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(1);
+    expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0);
+  });
+
+  it('Should render multiple menu items', () => {
+    const component = shallowWithIntl(<TopNavMenu name="test" config={menuItems} />);
+    expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(menuItems.length);
+    expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0);
+  });
+
+  it('Should render search bar', () => {
+    const component = shallowWithIntl(<TopNavMenu name="test" showSearchBar={true} />);
+
+    expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
+    expect(component.find(`span > ${SEARCH_BAR_SELECTOR}`).length).toBe(1);
+  });
+
+  it('Should render search bar inline', () => {
+    const component = shallowWithIntl(
+      <TopNavMenu name="test" showSearchBar={true} showSearchBarInline={true} />
+    );
+
+    expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
+    expect(component.find(`EuiFlexItem > ${SEARCH_BAR_SELECTOR}`).length).toBe(1);
+  });
+});
diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx
new file mode 100644
index 0000000000000..033e272ee6c8a
--- /dev/null
+++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx
@@ -0,0 +1,132 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { I18nProvider } from '@kbn/i18n/react';
+import { TopNavMenuData } from './top_nav_menu_data';
+import { TopNavMenuItem } from './top_nav_menu_item';
+import { SearchBar, SearchBarProps } from '../search_bar';
+
+type Props = Partial<SearchBarProps> & {
+  name: string;
+  config?: TopNavMenuData[];
+  showSearchBar?: boolean;
+  showSearchBarInline?: boolean;
+};
+
+/*
+ * Top Nav Menu is a convenience wrapper component for:
+ * - Top navigation menu - configured by an array of `TopNavMenuData` objects
+ * - Search Bar - which includes Filter Bar \ Query Input \ Timepicker.
+ *
+ * See SearchBar documentation to learn more about its properties.
+ *
+ **/
+
+export function TopNavMenu(props: Props) {
+  function renderItems() {
+    if (!props.config) return;
+    return props.config.map((menuItem, i) => {
+      return (
+        <EuiFlexItem grow={false} key={`nav-menu-${i}`}>
+          <TopNavMenuItem {...menuItem} />
+        </EuiFlexItem>
+      );
+    });
+  }
+
+  function renderSearchBar() {
+    // Validate presense of all required fields
+    if (!props.showSearchBar) return;
+
+    return (
+      <SearchBar
+        query={props.query}
+        filters={props.filters}
+        showQueryBar={props.showQueryBar}
+        showQueryInput={props.showQueryInput}
+        showFilterBar={props.showFilterBar}
+        showDatePicker={props.showDatePicker}
+        appName={props.appName!}
+        screenTitle={props.screenTitle!}
+        onQuerySubmit={props.onQuerySubmit}
+        onFiltersUpdated={props.onFiltersUpdated}
+        dateRangeFrom={props.dateRangeFrom}
+        dateRangeTo={props.dateRangeTo}
+        isRefreshPaused={props.isRefreshPaused}
+        showAutoRefreshOnly={props.showAutoRefreshOnly}
+        onRefreshChange={props.onRefreshChange}
+        refreshInterval={props.refreshInterval}
+        indexPatterns={props.indexPatterns}
+        store={props.store}
+      />
+    );
+  }
+
+  function renderLayout() {
+    if (props.showSearchBarInline) {
+      return (
+        <div className="topNavMenu__wrapper">
+          <EuiFlexGroup
+            data-test-subj="top-nav"
+            justifyContent="spaceBetween"
+            gutterSize="none"
+            wrap={true}
+            alignItems="center"
+            className="topNavMenu"
+          >
+            <EuiFlexGroup justifyContent="flexStart" gutterSize="none" responsive={false}>
+              {renderItems()}
+            </EuiFlexGroup>
+            <EuiFlexItem grow={false}>{renderSearchBar()}</EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+      );
+    } else {
+      return (
+        <span className="topNavMenu__wrapper">
+          <EuiFlexGroup
+            data-test-subj="top-nav"
+            justifyContent="flexStart"
+            gutterSize="none"
+            className="topNavMenu"
+            responsive={false}
+          >
+            {renderItems()}
+          </EuiFlexGroup>
+          {renderSearchBar()}
+        </span>
+      );
+    }
+  }
+
+  return <I18nProvider>{renderLayout()}</I18nProvider>;
+}
+
+TopNavMenu.defaultProps = {
+  showSearchBar: false,
+  showSearchBarInline: false,
+  showQueryBar: true,
+  showQueryInput: true,
+  showDatePicker: true,
+  showFilterBar: true,
+  screenTitle: '',
+};
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/directive/index.js b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx
similarity index 64%
rename from src/legacy/core_plugins/data/public/query/query_bar/directive/index.js
rename to src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx
index 8d388d12ece74..4ab45005892e0 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/directive/index.js
+++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx
@@ -17,22 +17,15 @@
  * under the License.
  */
 
-import 'ngreact';
-import { wrapInI18nContext } from 'ui/i18n';
-import { uiModules } from 'ui/modules';
-import { QueryBar } from '../components';
+export type TopNavMenuAction = (anchorElement: EventTarget) => void;
 
-const app = uiModules.get('app/data', ['react']);
-
-export function setupDirective() {
-  app.directive('queryBar', (reactDirective, localStorage) => {
-    return reactDirective(
-      wrapInI18nContext(QueryBar),
-      undefined,
-      {},
-      {
-        store: localStorage,
-      }
-    );
-  });
+export interface TopNavMenuData {
+  id?: string;
+  label: string;
+  run: TopNavMenuAction;
+  description?: string;
+  testId?: string;
+  className?: string;
+  disableButton?: boolean | (() => boolean);
+  tooltip?: string | (() => string);
 }
diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.test.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.test.tsx
new file mode 100644
index 0000000000000..4816ef3c95869
--- /dev/null
+++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.test.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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 { TopNavMenuItem } from './top_nav_menu_item';
+import { TopNavMenuData } from './top_nav_menu_data';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+
+describe('TopNavMenu', () => {
+  it('Should render and click an item', () => {
+    const data: TopNavMenuData = {
+      id: 'test',
+      label: 'test',
+      run: jest.fn(),
+    };
+
+    const component = shallowWithIntl(<TopNavMenuItem {...data} />);
+    expect(component.prop('isDisabled')).toEqual(false);
+
+    const event = { currentTarget: { value: 'a' } };
+    component.simulate('click', event);
+    expect(data.run).toBeCalledTimes(1);
+    expect(data.run).toHaveBeenCalledWith(event.currentTarget);
+
+    component.simulate('click', event);
+    expect(data.run).toBeCalledTimes(2);
+  });
+
+  it('Should render item with all attributes', () => {
+    const data: TopNavMenuData = {
+      id: 'test',
+      label: 'test',
+      description: 'description',
+      testId: 'test-class-name',
+      disableButton: false,
+      run: jest.fn(),
+    };
+
+    const component = shallowWithIntl(<TopNavMenuItem {...data} />);
+    expect(component.prop('isDisabled')).toEqual(false);
+
+    const event = { currentTarget: { value: 'a' } };
+    component.simulate('click', event);
+    expect(data.run).toHaveBeenCalled();
+  });
+
+  it('Should render disabled item and it shouldnt be clickable', () => {
+    const data: TopNavMenuData = {
+      id: 'test',
+      label: 'test',
+      disableButton: true,
+      run: jest.fn(),
+    };
+
+    const component = shallowWithIntl(<TopNavMenuItem {...data} />);
+    expect(component.prop('isDisabled')).toEqual(true);
+
+    const event = { currentTarget: { value: 'a' } };
+    component.simulate('click', event);
+    expect(data.run).toHaveBeenCalledTimes(0);
+  });
+
+  it('Should render item with disable function and it shouldnt be clickable', () => {
+    const data: TopNavMenuData = {
+      id: 'test',
+      label: 'test',
+      disableButton: () => true,
+      run: jest.fn(),
+    };
+
+    const component = shallowWithIntl(<TopNavMenuItem {...data} />);
+    expect(component.prop('isDisabled')).toEqual(true);
+
+    const event = { currentTarget: { value: 'a' } };
+    component.simulate('click', event);
+    expect(data.run).toHaveBeenCalledTimes(0);
+  });
+});
diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.tsx
new file mode 100644
index 0000000000000..d4d1c159906aa
--- /dev/null
+++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 { capitalize, isFunction } from 'lodash';
+import React, { MouseEvent } from 'react';
+import { EuiButtonEmpty, EuiToolTip } from '@elastic/eui';
+
+import { TopNavMenuData } from './top_nav_menu_data';
+
+export function TopNavMenuItem(props: TopNavMenuData) {
+  function isDisabled(): boolean {
+    const val = isFunction(props.disableButton) ? props.disableButton() : props.disableButton;
+    return val!;
+  }
+
+  function getTooltip(): string {
+    const val = isFunction(props.tooltip) ? props.tooltip() : props.tooltip;
+    return val!;
+  }
+
+  function handleClick(e: MouseEvent<HTMLButtonElement>) {
+    if (isDisabled()) return;
+    props.run(e.currentTarget);
+  }
+
+  const btn = (
+    <EuiButtonEmpty
+      size="xs"
+      isDisabled={isDisabled()}
+      onClick={handleClick}
+      data-test-subj={props.testId}
+    >
+      {capitalize(props.label || props.id!)}
+    </EuiButtonEmpty>
+  );
+
+  const tooltip = getTooltip();
+  if (tooltip) {
+    return <EuiToolTip content={tooltip}>{btn}</EuiToolTip>;
+  } else {
+    return btn;
+  }
+}
+
+TopNavMenuItem.defaultProps = {
+  disableButton: false,
+  tooltip: '',
+};
diff --git a/src/legacy/core_plugins/metrics/public/components/lib/get_interval.js b/src/legacy/core_plugins/metrics/public/components/lib/get_interval.js
index 44112cc0e75cb..a2e561d1a977d 100644
--- a/src/legacy/core_plugins/metrics/public/components/lib/get_interval.js
+++ b/src/legacy/core_plugins/metrics/public/components/lib/get_interval.js
@@ -19,8 +19,8 @@
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 import { pluck, get, clone } from 'lodash';
-import { relativeOptions } from '../../../../../ui/public/timepicker/relative_options';
 
+import { relativeOptions } from './relative_options';
 import { GTE_INTERVAL_RE } from '../../../common/interval_regexp';
 import { parseEsInterval } from '../../../../data/common/parse_es_interval';
 
diff --git a/src/legacy/core_plugins/metrics/public/components/lib/relative_options.js b/src/legacy/core_plugins/metrics/public/components/lib/relative_options.js
new file mode 100644
index 0000000000000..e74a773f85b5f
--- /dev/null
+++ b/src/legacy/core_plugins/metrics/public/components/lib/relative_options.js
@@ -0,0 +1,94 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const relativeOptions = [
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.secondsAgo', { defaultMessage: 'Seconds ago' }),
+    value: 's',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.minutesAgo', { defaultMessage: 'Minutes ago' }),
+    value: 'm',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.hoursAgo', { defaultMessage: 'Hours ago' }),
+    value: 'h',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.daysAgo', { defaultMessage: 'Days ago' }),
+    value: 'd',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.weeksAgo', { defaultMessage: 'Weeks ago' }),
+    value: 'w',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.monthsAgo', { defaultMessage: 'Months ago' }),
+    value: 'M',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.yearsAgo', { defaultMessage: 'Years ago' }),
+    value: 'y',
+  },
+
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.secondsFromNow', {
+      defaultMessage: 'Seconds from now',
+    }),
+    value: 's+',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.minutesFromNow', {
+      defaultMessage: 'Minutes from now',
+    }),
+    value: 'm+',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.hoursFromNow', {
+      defaultMessage: 'Hours from now',
+    }),
+    value: 'h+',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.daysFromNow', {
+      defaultMessage: 'Days from now',
+    }),
+    value: 'd+',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.weeksFromNow', {
+      defaultMessage: 'Weeks from now',
+    }),
+    value: 'w+',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.monthsFromNow', {
+      defaultMessage: 'Months from now',
+    }),
+    value: 'M+',
+  },
+  {
+    text: i18n.translate('tsvb.timepicker.relOpts.yearsFromNow', {
+      defaultMessage: 'Years from now',
+    }),
+    value: 'y+',
+  },
+];
diff --git a/src/legacy/core_plugins/timelion/public/app.js b/src/legacy/core_plugins/timelion/public/app.js
index 5bc5a375eb34c..d615bff0e80a7 100644
--- a/src/legacy/core_plugins/timelion/public/app.js
+++ b/src/legacy/core_plugins/timelion/public/app.js
@@ -144,7 +144,7 @@ app.controller('timelion', function (
 
   $timeout(function () {
     if (config.get('timelion:showTutorial', true)) {
-      $scope.kbnTopNav.open('help');
+      $scope.toggleMenu('showHelp');
     }
   }, 0);
 
@@ -163,7 +163,7 @@ app.controller('timelion', function (
   function getTopNavMenu() {
 
     const newSheetAction = {
-      key: 'new',
+      id: 'new',
       label: i18n.translate('timelion.topNavMenu.newSheetButtonLabel', {
         defaultMessage: 'New',
       }),
@@ -175,19 +175,21 @@ app.controller('timelion', function (
     };
 
     const addSheetAction = {
-      key: 'add',
+      id: 'add',
       label: i18n.translate('timelion.topNavMenu.addChartButtonLabel', {
         defaultMessage: 'Add',
       }),
       description: i18n.translate('timelion.topNavMenu.addChartButtonAriaLabel', {
         defaultMessage: 'Add a chart',
       }),
-      run: function () { $scope.newCell(); },
+      run: function () {
+        $scope.$evalAsync(() => $scope.newCell());
+      },
       testId: 'timelionAddChartButton',
     };
 
     const saveSheetAction = {
-      key: 'save',
+      id: 'save',
       label: i18n.translate('timelion.topNavMenu.saveSheetButtonLabel', {
         defaultMessage: 'Save',
       }),
@@ -195,15 +197,13 @@ app.controller('timelion', function (
         defaultMessage: 'Save Sheet',
       }),
       run: () => {
-        const curState = $scope.menus.showSave;
-        $scope.closeMenus();
-        $scope.menus.showSave = !curState;
+        $scope.$evalAsync(() => $scope.toggleMenu('showSave'));
       },
       testId: 'timelionSaveButton',
     };
 
     const deleteSheetAction = {
-      key: 'delete',
+      id: 'delete',
       label: i18n.translate('timelion.topNavMenu.deleteSheetButtonLabel', {
         defaultMessage: 'Delete',
       }),
@@ -239,18 +239,21 @@ app.controller('timelion', function (
           }),
         };
 
-        confirmModal(
-          i18n.translate('timelion.topNavMenu.delete.modal.warningText', {
-            defaultMessage: `You can't recover deleted sheets.`,
-          }),
-          confirmModalOptions
-        );
+        $scope.$evalAsync(() => {
+          confirmModal(
+            i18n.translate('timelion.topNavMenu.delete.modal.warningText', {
+              defaultMessage: `You can't recover deleted sheets.`,
+            }),
+            confirmModalOptions
+          );
+        });
+
       },
       testId: 'timelionDeleteButton',
     };
 
     const openSheetAction = {
-      key: 'open',
+      id: 'open',
       label: i18n.translate('timelion.topNavMenu.openSheetButtonLabel', {
         defaultMessage: 'Open',
       }),
@@ -258,15 +261,13 @@ app.controller('timelion', function (
         defaultMessage: 'Open Sheet',
       }),
       run: () => {
-        const curState = $scope.menus.showLoad;
-        $scope.closeMenus();
-        $scope.menus.showLoad = !curState;
+        $scope.$evalAsync(() => $scope.toggleMenu('showLoad'));
       },
       testId: 'timelionOpenButton',
     };
 
     const optionsAction = {
-      key: 'options',
+      id: 'options',
       label: i18n.translate('timelion.topNavMenu.optionsButtonLabel', {
         defaultMessage: 'Options',
       }),
@@ -274,15 +275,13 @@ app.controller('timelion', function (
         defaultMessage: 'Options',
       }),
       run: () => {
-        const curState = $scope.menus.showOptions;
-        $scope.closeMenus();
-        $scope.menus.showOptions = !curState;
+        $scope.$evalAsync(() => $scope.toggleMenu('showOptions'));
       },
       testId: 'timelionOptionsButton',
     };
 
     const helpAction = {
-      key: 'help',
+      id: 'help',
       label: i18n.translate('timelion.topNavMenu.helpButtonLabel', {
         defaultMessage: 'Help',
       }),
@@ -290,9 +289,7 @@ app.controller('timelion', function (
         defaultMessage: 'Help',
       }),
       run: () => {
-        const curState = $scope.menus.showHelp;
-        $scope.closeMenus();
-        $scope.menus.showHelp = !curState;
+        $scope.$evalAsync(() => $scope.toggleMenu('showHelp'));
       },
       testId: 'timelionDocsButton',
     };
@@ -303,9 +300,30 @@ app.controller('timelion', function (
     return [newSheetAction, addSheetAction, openSheetAction, optionsAction, helpAction];
   }
 
+  let refresher;
+  const setRefreshData = function () {
+    if (refresher) $timeout.cancel(refresher);
+    const interval = timefilter.getRefreshInterval();
+    if (interval.value > 0 && !interval.pause) {
+      function startRefresh() {
+        refresher = $timeout(function () {
+          if (!$scope.running) $scope.search();
+          startRefresh();
+        }, interval.value);
+      }
+      startRefresh();
+    }
+  };
+
   const init = function () {
     $scope.running = false;
     $scope.search();
+    setRefreshData();
+
+    $scope.model = {
+      timeRange: timefilter.getTime(),
+      refreshInterval: timefilter.getRefreshInterval(),
+    };
 
     $scope.$listen($scope.state, 'fetch_with_changes', $scope.search);
     $scope.$listen(timefilter, 'fetch', $scope.search);
@@ -319,7 +337,7 @@ app.controller('timelion', function (
       dontShowHelp: function () {
         config.set('timelion:showTutorial', false);
         $scope.setPage(0);
-        $scope.kbnTopNav.close('help');
+        $scope.closeMenus();
       }
     };
 
@@ -330,6 +348,12 @@ app.controller('timelion', function (
       showOptions: false,
     };
 
+    $scope.toggleMenu = (menuName) => {
+      const curState = $scope.menus[menuName];
+      $scope.closeMenus();
+      $scope.menus[menuName] = !curState;
+    };
+
     $scope.closeMenus = () => {
       _.forOwn($scope.menus, function (value, key) {
         $scope.menus[key] = false;
@@ -337,20 +361,25 @@ app.controller('timelion', function (
     };
   };
 
-  let refresher;
-  $scope.$listen(timefilter, 'refreshIntervalUpdate', function () {
-    if (refresher) $timeout.cancel(refresher);
-    const interval = timefilter.getRefreshInterval();
-    if (interval.value > 0 && !interval.pause) {
-      function startRefresh() {
-        refresher = $timeout(function () {
-          if (!$scope.running) $scope.search();
-          startRefresh();
-        }, interval.value);
-      }
-      startRefresh();
-    }
-  });
+  $scope.onTimeUpdate = function ({ dateRange }) {
+    $scope.model.timeRange = {
+      ...dateRange
+    };
+    timefilter.setTime(dateRange);
+  };
+
+  $scope.onRefreshChange = function ({ isPaused, refreshInterval }) {
+    $scope.model.refreshInterval = {
+      pause: isPaused,
+      value: refreshInterval,
+    };
+    timefilter.setRefreshInterval({
+      pause: isPaused,
+      value: refreshInterval ? refreshInterval : $scope.refreshInterval.value
+    });
+
+    setRefreshData();
+  };
 
   $scope.$watch(function () { return savedSheet.lastSavedTitle; }, function (newTitle) {
     docTitle.change(savedSheet.id ? newTitle : undefined);
diff --git a/src/legacy/core_plugins/timelion/public/index.html b/src/legacy/core_plugins/timelion/public/index.html
index 41fa46b975bec..b6a16535fb5f0 100644
--- a/src/legacy/core_plugins/timelion/public/index.html
+++ b/src/legacy/core_plugins/timelion/public/index.html
@@ -1,23 +1,32 @@
 <div class="timApp app-container" ng-controller="timelion">
+  <span class="kuiLocalTitle">
+    <span class="timApp__stats" ng-show="stats">
+      <span
+        i18n-id="timelion.topNavMenu.statsDescription"
+        i18n-default-message="Query Time {queryTime}ms / Processing Time {processingTime}ms"
+        i18n-values="{
+          queryTime: stats.queryTime - stats.invokeTime,
+          processingTime: stats.sheetTime - stats.queryTime,
+        }"></span>
+    </span>
+  </span>
   <!-- Local nav. -->
-  <kbn-top-nav name="timelion" config="topNavMenu">
-    <!-- Transcluded elements. -->
-    <div data-transclude-slots>
-      <div data-transclude-slot="topLeftCorner">
-        <span class="kuiLocalTitle">
-          <span class="timApp__stats" ng-show="stats">
-            <span
-              i18n-id="timelion.topNavMenu.statsDescription"
-              i18n-default-message="Query Time {queryTime}ms / Processing Time {processingTime}ms"
-              i18n-values="{
-                queryTime: stats.queryTime - stats.invokeTime,
-                processingTime: stats.sheetTime - stats.queryTime,
-              }"></span>
-          </span>
-        </span>
-      </div>
-    </div>
-  </kbn-top-nav>
+  <kbn-top-nav-v2 
+    app-name="'timelion'"
+    config="topNavMenu"
+    show-search-bar="true"
+    show-search-bar-inline="true"
+    show-filter-bar="false"
+    show-query-input="false"
+    date-range-from="model.timeRange.from"
+    date-range-to="model.timeRange.to"
+    is-refresh-paused="model.refreshInterval.pause"
+    refresh-interval="model.refreshInterval.value"
+    on-refresh-change="onRefreshChange"
+    on-query-submit="onTimeUpdate">
+  </kbn-top-nav-v2>
+
+
   <div class="timApp__menus">
     <timelion-help ng-show="menus.showHelp"></timelion-help>
     <timelion-save ng-show="menus.showSave"></timelion-save>
diff --git a/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss b/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss
index 8b58691cd18ca..47fd377681c9f 100644
--- a/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss
+++ b/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss
@@ -2,6 +2,10 @@
  * 1. Make sure the timepicker is always one right, even if the main menu doesn't exist
  */
 
+kbn-top-nav {
+  z-index: 5;
+}
+
 .kbnTopNav {
   background-color: $euiPageBackgroundColor;
   border-bottom: $euiBorderThin;
diff --git a/src/legacy/ui/public/kbn_top_nav/index.js b/src/legacy/ui/public/kbn_top_nav/index.js
index 8a93972c4b226..4bca1972e9904 100644
--- a/src/legacy/ui/public/kbn_top_nav/index.js
+++ b/src/legacy/ui/public/kbn_top_nav/index.js
@@ -18,3 +18,4 @@
  */
 
 import './kbn_top_nav';
+import './kbn_top_nav2';
diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
index 24d0f612dc5f7..c184301735684 100644
--- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
+++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -55,7 +55,7 @@
 
 import _ from 'lodash';
 import angular from 'angular';
-import '../timepicker';
+import './timepicker';
 import '../watch_multi';
 import '../directives/input_focus';
 import { uiModules } from '../modules';
diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js
new file mode 100644
index 0000000000000..c0b886f9fb86f
--- /dev/null
+++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js
@@ -0,0 +1,122 @@
+/*
+ * 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 'ngreact';
+import { wrapInI18nContext } from 'ui/i18n';
+import { uiModules } from 'ui/modules';
+import { TopNavMenu } from '../../../core_plugins/kibana_react/public';
+import { Storage } from 'ui/storage';
+
+const module = uiModules.get('kibana');
+
+module.directive('kbnTopNavV2', () => {
+  return {
+    restrict: 'E',
+    template: '',
+    compile: (elem) => {
+      const child = document.createElement('kbn-top-nav-v2-helper');
+
+      // Copy attributes to the child directive
+      for (const attr of elem[0].attributes) {
+        child.setAttribute(attr.name, attr.value);
+      }
+
+      // Add a special attribute that will change every time that one
+      // of the config array's disableButton function return value changes.
+      child.setAttribute('disabled-buttons', 'disabledButtons');
+
+      // Pass in storage
+      const localStorage = new Storage(window.localStorage);
+      child.setAttribute('store', 'store');
+
+      // Append helper directive
+      elem.append(child);
+
+      const linkFn = ($scope, _, $attr) => {
+        $scope.store = localStorage;
+
+        // Watch config changes
+        $scope.$watch(() => {
+          const config = $scope.$eval($attr.config);
+          return config.map((item) => {
+            // Copy key into id, as it's a reserved react propery.
+            // This is done for Angular directive backward compatibility.
+            // In React only id is recognized.
+            if (item.key && !item.id) {
+              item.id = item.key;
+            }
+
+            // Watch the disableButton functions
+            if (typeof item.disableButton === 'function') {
+              return item.disableButton();
+            }
+            return item.disableButton;
+          });
+        }, (newVal) => {
+          $scope.disabledButtons = newVal;
+        },
+        true);
+      };
+
+      return linkFn;
+    }
+  };
+});
+
+module.directive('kbnTopNavV2Helper', (reactDirective) => {
+  return reactDirective(
+    wrapInI18nContext(TopNavMenu),
+    [
+      ['name', { watchDepth: 'reference' }],
+      ['config', { watchDepth: 'value' }],
+      ['disabledButtons', { watchDepth: 'reference' }],
+
+      ['query', { watchDepth: 'reference' }],
+      ['store', { watchDepth: 'reference' }],
+      ['intl', { watchDepth: 'reference' }],
+      ['store', { watchDepth: 'reference' }],
+
+      ['onQuerySubmit', { watchDepth: 'reference' }],
+      ['onFiltersUpdated', { watchDepth: 'reference' }],
+      ['onRefreshChange', { watchDepth: 'reference' }],
+
+      ['indexPatterns', { watchDepth: 'collection' }],
+      ['filters', { watchDepth: 'collection' }],
+
+      // All modifiers default to true.
+      // Set to false to hide subcomponents.
+      'showSearchBar',
+      'showFilterBar',
+      'showQueryBar',
+      'showQueryInput',
+      'showDatePicker',
+
+      'showSearchBarInline',
+
+      'appName',
+      'screenTitle',
+      'dateRangeFrom',
+      'dateRangeTo',
+      'isRefreshPaused',
+      'refreshInterval',
+      'disableAutoFocus',
+      'showAutoRefreshOnly',
+    ],
+  );
+});
diff --git a/src/legacy/ui/public/timepicker/index.js b/src/legacy/ui/public/kbn_top_nav/timepicker/index.js
similarity index 100%
rename from src/legacy/ui/public/timepicker/index.js
rename to src/legacy/ui/public/kbn_top_nav/timepicker/index.js
diff --git a/src/legacy/ui/public/timepicker/kbn_global_timepicker.html b/src/legacy/ui/public/kbn_top_nav/timepicker/kbn_global_timepicker.html
similarity index 100%
rename from src/legacy/ui/public/timepicker/kbn_global_timepicker.html
rename to src/legacy/ui/public/kbn_top_nav/timepicker/kbn_global_timepicker.html
diff --git a/src/legacy/ui/public/timepicker/kbn_global_timepicker.js b/src/legacy/ui/public/kbn_top_nav/timepicker/kbn_global_timepicker.js
similarity index 88%
rename from src/legacy/ui/public/timepicker/kbn_global_timepicker.js
rename to src/legacy/ui/public/kbn_top_nav/timepicker/kbn_global_timepicker.js
index 2ff0e8b1c8f54..7c60cd16b0bf3 100644
--- a/src/legacy/ui/public/timepicker/kbn_global_timepicker.js
+++ b/src/legacy/ui/public/kbn_top_nav/timepicker/kbn_global_timepicker.js
@@ -17,12 +17,35 @@
  * under the License.
  */
 
-import { uiModules } from '../modules';
+import { uiModules } from '../../modules';
 
 import toggleHtml from './kbn_global_timepicker.html';
 import { timefilter } from 'ui/timefilter';
 import { timeHistory } from 'ui/timefilter/time_history';
 
+import {
+  EuiSuperDatePicker,
+} from '@elastic/eui';
+
+uiModules
+  .get('kibana')
+  .directive('superDatePicker', reactDirective => reactDirective(EuiSuperDatePicker, [
+    'start',
+    'end',
+    'isPaused',
+    'refreshInterval',
+    'commonlyUsedRanges',
+    'dateFormat',
+    'recentlyUsedRanges',
+    'onTimeChange',
+    'onRefreshChange',
+    'isAutoRefreshOnly',
+    'commonlyUsedRanges',
+    'dateFormat',
+    'recentlyUsedRanges',
+  ]));
+
+
 uiModules
   .get('kibana')
   .directive('kbnGlobalTimepicker', (globalState, config) => {
diff --git a/src/legacy/ui/public/react_components.js b/src/legacy/ui/public/react_components.js
index 6a0c52a59f640..91044142e942c 100644
--- a/src/legacy/ui/public/react_components.js
+++ b/src/legacy/ui/public/react_components.js
@@ -19,44 +19,19 @@
 
 import 'ngreact';
 
-import {
-  KuiToolBarSearchBox,
-} from '@kbn/ui-framework/components';
-
 import {
   EuiConfirmModal,
   EuiIcon,
   EuiIconTip,
-  EuiCallOut,
-  EuiSuperDatePicker,
 } from '@elastic/eui';
 
 import { uiModules } from './modules';
 
 const app = uiModules.get('app/kibana', ['react']);
 
-app.directive('toolBarSearchBox', reactDirective => reactDirective(KuiToolBarSearchBox));
-
 app.directive('confirmModal', reactDirective => reactDirective(EuiConfirmModal));
 
 app.directive('icon', reactDirective => reactDirective(EuiIcon));
 
 app.directive('iconTip', reactDirective => reactDirective(EuiIconTip, ['content', 'type', 'position', 'title', 'color']));
 
-app.directive('callOut', reactDirective => reactDirective(EuiCallOut, ['title', 'color', 'size', 'iconType', 'children']));
-
-app.directive('superDatePicker', reactDirective => reactDirective(EuiSuperDatePicker, [
-  'start',
-  'end',
-  'isPaused',
-  'refreshInterval',
-  'commonlyUsedRanges',
-  'dateFormat',
-  'recentlyUsedRanges',
-  'onTimeChange',
-  'onRefreshChange',
-  'isAutoRefreshOnly',
-  'commonlyUsedRanges',
-  'dateFormat',
-  'recentlyUsedRanges',
-]));
diff --git a/src/legacy/ui/public/styles/_legacy/_base.scss b/src/legacy/ui/public/styles/_legacy/_base.scss
index 2cf7e1e309046..aad90a99ac357 100644
--- a/src/legacy/ui/public/styles/_legacy/_base.scss
+++ b/src/legacy/ui/public/styles/_legacy/_base.scss
@@ -59,8 +59,8 @@ input[type="checkbox"],
     padding-bottom: $euiSizeS;
   }
 
-  > kbn-top-nav {
-    z-index: 5;
+  .globalQueryBar {
+    padding: 0px $euiSizeS $euiSizeS $euiSizeS;
   }
 
   > nav,
diff --git a/src/legacy/ui/public/timepicker/relative_options.js b/src/legacy/ui/public/timepicker/relative_options.js
deleted file mode 100644
index 097eb13b8327d..0000000000000
--- a/src/legacy/ui/public/timepicker/relative_options.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-
-export const relativeOptions = [
-  { text: i18n.translate('common.ui.timepicker.relOpts.secondsAgo', { defaultMessage: 'Seconds ago' }), value: 's' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.minutesAgo', { defaultMessage: 'Minutes ago' }), value: 'm' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.hoursAgo', { defaultMessage: 'Hours ago' }), value: 'h' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.daysAgo', { defaultMessage: 'Days ago' }), value: 'd' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.weeksAgo', { defaultMessage: 'Weeks ago' }), value: 'w' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.monthsAgo', { defaultMessage: 'Months ago' }), value: 'M' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.yearsAgo', { defaultMessage: 'Years ago' }), value: 'y' },
-
-  { text: i18n.translate('common.ui.timepicker.relOpts.secondsFromNow', { defaultMessage: 'Seconds from now' }), value: 's+' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.minutesFromNow', { defaultMessage: 'Minutes from now' }), value: 'm+' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.hoursFromNow', { defaultMessage: 'Hours from now' }), value: 'h+' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.daysFromNow', { defaultMessage: 'Days from now' }), value: 'd+' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.weeksFromNow', { defaultMessage: 'Weeks from now' }), value: 'w+' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.monthsFromNow', { defaultMessage: 'Months from now' }), value: 'M+' },
-  { text: i18n.translate('common.ui.timepicker.relOpts.yearsFromNow', { defaultMessage: 'Years from now' }), value: 'y+' },
-
-];
diff --git a/test/functional/services/inspector.js b/test/functional/services/inspector.js
index 393af9f7d5897..67d3c1113103b 100644
--- a/test/functional/services/inspector.js
+++ b/test/functional/services/inspector.js
@@ -30,7 +30,7 @@ export function InspectorProvider({ getService }) {
 
   return new class Inspector {
     async getIsEnabled() {
-      const ariaDisabled = await testSubjects.getAttribute('openInspectorButton', 'aria-disabled');
+      const ariaDisabled = await testSubjects.getAttribute('openInspectorButton', 'disabled');
       return ariaDisabled !== 'true';
     }
 
diff --git a/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js b/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js
index 89a265d81ed4b..ca29b5ae5c604 100644
--- a/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js
+++ b/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js
@@ -36,7 +36,6 @@ import 'plugins/kibana/dashboard';
 import 'ui/vislib';
 import 'ui/agg_response';
 import 'ui/agg_types';
-import 'ui/timepicker';
 import 'leaflet';
 import { npStart } from 'ui/new_platform';
 
diff --git a/x-pack/legacy/plugins/maps/public/angular/map.html b/x-pack/legacy/plugins/maps/public/angular/map.html
index c95117d906d16..13e6c038327c5 100644
--- a/x-pack/legacy/plugins/maps/public/angular/map.html
+++ b/x-pack/legacy/plugins/maps/public/angular/map.html
@@ -1,30 +1,22 @@
 <div id="maps-plugin"  ng-class="{mapFullScreen: isFullScreen}">
   <div id="maps-top-nav">
     <div>
-      <kbn-top-nav name="map" config="topNavMenu">
-        <div data-transclude-slots>
-          <!-- Search. -->
-          <div ng-show="chrome.getVisible()" class="fullWidth" data-transclude-slot="bottomRow">
-            <query-bar
-              query="query"
-              app-name="'maps'"
-              on-submit="updateQueryAndDispatch"
-              index-patterns="indexPatterns"
-              show-date-picker="showDatePicker"
-              date-range-from="time.from"
-              date-range-to="time.to"
-              is-refresh-paused="refreshConfig.isPaused"
-              refresh-interval="refreshConfig.interval"
-              on-refresh-change="onRefreshChange"
-            ></query-bar>
-
-            <div class="eui-hideFor--xs eui-hideFor--s">
-              <div class="euiSpacer euiSpacer--s"></div>
-            </div>
-          </div>
-
-        </div>
-      </kbn-top-nav>
+      <kbn-top-nav-v2 
+        app-name="'maps'"
+        config="topNavMenu"
+        show-search-bar="chrome.getVisible()"
+        show-filter-bar="false"
+        show-date-picker="showDatePicker"
+        query="query"
+        on-query-submit="updateQueryAndDispatch"
+        index-patterns="indexPatterns"
+        date-range-from="time.from"
+        date-range-to="time.to"
+        is-refresh-paused="refreshConfig.isPaused"
+        refresh-interval="refreshConfig.interval"
+        on-refresh-change="onRefreshChange"
+      >
+      </kbn-top-nav-v2>
     </div>
   </div>
 
diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
index 38ad432387d24..afda01fcb7841 100644
--- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js
+++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
@@ -332,7 +332,7 @@ app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppSta
   timefilter.disableAutoRefreshSelector();
   $scope.showDatePicker = true; // used by query-bar directive to enable timepikcer in query bar
   $scope.topNavMenu = [{
-    key: i18n.translate('xpack.maps.mapController.fullScreenButtonLabel', {
+    id: i18n.translate('xpack.maps.mapController.fullScreenButtonLabel', {
       defaultMessage: `full screen`
     }),
     description: i18n.translate('xpack.maps.mapController.fullScreenDescription', {
@@ -343,7 +343,7 @@ app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppSta
       store.dispatch(enableFullScreen());
     }
   }, {
-    key: i18n.translate('xpack.maps.mapController.openInspectorButtonLabel', {
+    id: i18n.translate('xpack.maps.mapController.openInspectorButtonLabel', {
       defaultMessage: `inspect`
     }),
     description: i18n.translate('xpack.maps.mapController.openInspectorDescription', {
@@ -355,7 +355,7 @@ app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppSta
       Inspector.open(inspectorAdapters, {});
     }
   }, ...(capabilities.get().maps.save ? [{
-    key: i18n.translate('xpack.maps.mapController.saveMapButtonLabel', {
+    id: i18n.translate('xpack.maps.mapController.saveMapButtonLabel', {
       defaultMessage: `save`
     }),
     description: i18n.translate('xpack.maps.mapController.saveMapDescription', {
diff --git a/x-pack/legacy/plugins/maps/public/index.js b/x-pack/legacy/plugins/maps/public/index.js
index 1afc4a2bbab3e..64f34a05272f5 100644
--- a/x-pack/legacy/plugins/maps/public/index.js
+++ b/x-pack/legacy/plugins/maps/public/index.js
@@ -22,7 +22,6 @@ import { capabilities } from 'ui/capabilities';
 import chrome from 'ui/chrome';
 import routes from 'ui/routes';
 import 'ui/kbn_top_nav';
-import 'ui/angular-bootstrap'; // required for kbn-top-nav button tooltips
 import { uiModules } from 'ui/modules';
 import { docTitle } from 'ui/doc_title';
 import 'ui/autoload/styles';
@@ -36,9 +35,6 @@ import mapTemplate from './angular/map.html';
 import { MapListing } from './components/map_listing';
 import { recentlyAccessed } from 'ui/persisted_log';
 
-import { data } from 'plugins/data/setup';
-data.query.loadLegacyDirectives();
-
 const app = uiModules.get('app/maps', ['ngRoute', 'react']);
 
 app.directive('mapListing', function (reactDirective) {
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 272f56542ac22..286fdae99f680 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -565,20 +565,6 @@
     "common.ui.stateManagement.unableToParseUrlErrorMessage": "URL をパースできません",
     "common.ui.stateManagement.unableToRestoreUrlErrorMessage": "URL を完全に復元できません。共有機能を使用していることを確認してください。",
     "common.ui.stateManagement.unableToStoreHistoryInSessionErrorMessage": "セッションがいっぱいで安全に削除できるアイテムが見つからないため、Kibana は履歴アイテムを保存できません。\n\nこれは大抵新規タブに移動することで解決されますが、より大きな問題が原因である可能性もあります。このメッセージが定期的に表示される場合は、{gitHubIssuesUrl} で問題を報告してください。",
-    "common.ui.timepicker.relOpts.daysAgo": "日前",
-    "common.ui.timepicker.relOpts.daysFromNow": "現在からの日数",
-    "common.ui.timepicker.relOpts.hoursAgo": "時間前",
-    "common.ui.timepicker.relOpts.hoursFromNow": "現在からの時間数",
-    "common.ui.timepicker.relOpts.minutesAgo": "分前",
-    "common.ui.timepicker.relOpts.minutesFromNow": "現在からの分数",
-    "common.ui.timepicker.relOpts.monthsAgo": "か月前",
-    "common.ui.timepicker.relOpts.monthsFromNow": "現在からの月数",
-    "common.ui.timepicker.relOpts.secondsAgo": "秒前",
-    "common.ui.timepicker.relOpts.secondsFromNow": "現在からの秒数",
-    "common.ui.timepicker.relOpts.weeksAgo": "週間前",
-    "common.ui.timepicker.relOpts.weeksFromNow": "現在からの週数",
-    "common.ui.timepicker.relOpts.yearsAgo": "年前",
-    "common.ui.timepicker.relOpts.yearsFromNow": "現在からの年数",
     "common.ui.topNav.closeAriaLabel": "閉じる",
     "common.ui.topNav.toggleViewAriaLabel": "{optLabel} ビューを切り替える",
     "common.ui.url.replacementFailedErrorMessage": "置換に失敗、未解決の表現式: {expr}",
@@ -826,9 +812,9 @@
     "data.query.queryBar.syntaxOptionsDescription": "{docsLink} (KQL) は、シンプルなクエリ構文とスクリプトフィールドのサポートを提供します。また、KQL はベーシックライセンス以上をご利用の場合、自動入力も提供します。KQL をオフにすると、Kibana は Lucene を使用します。",
     "data.query.queryBar.syntaxOptionsDescription.docsLinkText": "こちら",
     "data.query.queryBar.syntaxOptionsTitle": "構文オプション",
-    "data.search.searchBar.filtersButtonClickToHideTitle": "選択して表示",
-    "data.search.searchBar.filtersButtonClickToShowTitle": "選択して非表示",
-    "data.search.searchBar.filtersButtonFiltersAppliedTitle": "フィルターが適用されました。",
+    "kibana_react.search.searchBar.filtersButtonClickToHideTitle": "選択して表示",
+    "kibana_react.search.searchBar.filtersButtonClickToShowTitle": "選択して非表示",
+    "kibana_react.search.searchBar.filtersButtonFiltersAppliedTitle": "フィルターが適用されました。",
     "embeddableApi.actionPanel.title": "オプション",
     "embeddableApi.actions.applyFilterActionTitle": "現在のビューにフィルターを適用",
     "embeddableApi.addPanel.createNew": "新規 {factoryName} を作成",
@@ -1566,9 +1552,6 @@
     "kbn.discover.notifications.notSavedSearchTitle": "検索「{savedSearchTitle}」は保存されませんでした。",
     "kbn.discover.notifications.savedSearchTitle": "検索「{savedSearchTitle}」が保存されました。",
     "kbn.discover.painlessError.painlessScriptedFieldErrorMessage": "Painless スクリプトのフィールド「{script}」のエラー.",
-    "kbn.discover.reloadSavedSearchAriaLabel": "保存された検索を再読み込みします",
-    "kbn.discover.reloadSavedSearchButton": "再読み込み",
-    "kbn.discover.reloadSavedSearchTooltip": "保存された検索を再読み込みします",
     "kbn.discover.rootBreadcrumb": "ディスカバリ",
     "kbn.discover.savedSearch.newSavedSearchTitle": "新しく保存された検索",
     "kbn.discover.savedSearch.savedObjectName": "保存された検索",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 50e156120a3dc..6a47b105c5c11 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -565,20 +565,6 @@
     "common.ui.stateManagement.unableToParseUrlErrorMessage": "无法解析 URL",
     "common.ui.stateManagement.unableToRestoreUrlErrorMessage": "无法完整还原 URL，确保使用共享功能。",
     "common.ui.stateManagement.unableToStoreHistoryInSessionErrorMessage": "Kibana 无法将历史记录项存储在您的会话中，因为其已满，并且似乎没有任何可安全删除的项。\n\n通常可通过移至新的标签页来解决此问题，但这会导致更大的问题。如果您有规律地看到此消息，请在 {gitHubIssuesUrl} 提交问题。",
-    "common.ui.timepicker.relOpts.daysAgo": "天前",
-    "common.ui.timepicker.relOpts.daysFromNow": "自现在开始的天数",
-    "common.ui.timepicker.relOpts.hoursAgo": "小时前",
-    "common.ui.timepicker.relOpts.hoursFromNow": "自现在开始的小时数",
-    "common.ui.timepicker.relOpts.minutesAgo": "分钟前",
-    "common.ui.timepicker.relOpts.minutesFromNow": "自现在开始的分钟数",
-    "common.ui.timepicker.relOpts.monthsAgo": "个月前",
-    "common.ui.timepicker.relOpts.monthsFromNow": "自现在开始的月份数",
-    "common.ui.timepicker.relOpts.secondsAgo": "秒前",
-    "common.ui.timepicker.relOpts.secondsFromNow": "自现在开始的秒数",
-    "common.ui.timepicker.relOpts.weeksAgo": "周前",
-    "common.ui.timepicker.relOpts.weeksFromNow": "自现在开始的周数",
-    "common.ui.timepicker.relOpts.yearsAgo": "年前",
-    "common.ui.timepicker.relOpts.yearsFromNow": "自现在开始的年数",
     "common.ui.topNav.closeAriaLabel": "关闭",
     "common.ui.topNav.toggleViewAriaLabel": "切换 {optLabel} 视图",
     "common.ui.url.replacementFailedErrorMessage": "替换失败，未解析的表达式：{expr}",
@@ -826,9 +812,9 @@
     "data.query.queryBar.syntaxOptionsDescription": "{docsLink} (KQL) 提供简化查询语法并支持脚本字段。如果您具有基本许可或更高级别的许可，KQL 还提供自动填充功能。如果关闭 KQL，Kibana 将使用 Lucene。",
     "data.query.queryBar.syntaxOptionsDescription.docsLinkText": "此处",
     "data.query.queryBar.syntaxOptionsTitle": "语法选项",
-    "data.search.searchBar.filtersButtonClickToHideTitle": "选择以显示",
-    "data.search.searchBar.filtersButtonClickToShowTitle": "选择以隐藏",
-    "data.search.searchBar.filtersButtonFiltersAppliedTitle": "个筛选已应用。",
+    "kibana_react.search.searchBar.filtersButtonClickToHideTitle": "选择以显示",
+    "kibana_react.search.searchBar.filtersButtonClickToShowTitle": "选择以隐藏",
+    "kibana_react.search.searchBar.filtersButtonFiltersAppliedTitle": "个筛选已应用。",
     "embeddableApi.actionPanel.title": "选项",
     "embeddableApi.actions.applyFilterActionTitle": "将筛选应用于当前视图",
     "embeddableApi.addPanel.createNew": "创建新的{factoryName}",
@@ -1566,9 +1552,6 @@
     "kbn.discover.notifications.notSavedSearchTitle": "搜索 “{savedSearchTitle}” 未保存。",
     "kbn.discover.notifications.savedSearchTitle": "搜索 “{savedSearchTitle}” 已保存",
     "kbn.discover.painlessError.painlessScriptedFieldErrorMessage": "Painless 脚本字段 “{script}” 有错误。",
-    "kbn.discover.reloadSavedSearchAriaLabel": "重新加载已保存搜索",
-    "kbn.discover.reloadSavedSearchButton": "重新加载",
-    "kbn.discover.reloadSavedSearchTooltip": "重新加载已保存搜索",
     "kbn.discover.rootBreadcrumb": "Discover",
     "kbn.discover.savedSearch.newSavedSearchTitle": "新保存的搜索",
     "kbn.discover.savedSearch.savedObjectName": "已保存搜索",