diff --git a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx
index 5b389f5b98ab..23c9c9ffc94b 100644
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx
@@ -21,13 +21,12 @@ import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPopover } from '@elastic/
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import React, { useState } from 'react';
-import { CoreStart } from 'src/core/public';
 import { IndexPattern } from '../../index_patterns';
 import { FilterEditor } from './filter_editor';
 import { FilterItem } from './filter_item';
 import { FilterOptions } from './filter_options';
-import { useKibana, KibanaContextProvider } from '../../../../../../plugins/kibana_react/public';
-import { DataPublicPluginStart, esFilters } from '../../../../../../plugins/data/public';
+import { useKibana } from '../../../../../../plugins/kibana_react/public';
+import { esFilters } from '../../../../../../plugins/data/public';
 
 interface Props {
   filters: esFilters.Filter[];
@@ -35,48 +34,15 @@ interface Props {
   className: string;
   indexPatterns: IndexPattern[];
   intl: InjectedIntl;
-
-  // TODO: Only for filter-bar directive!
-  uiSettings?: CoreStart['uiSettings'];
-  docLinks?: CoreStart['docLinks'];
-  pluginDataStart?: DataPublicPluginStart;
 }
 
 function FilterBarUI(props: Props) {
   const [isAddFilterPopoverOpen, setIsAddFilterPopoverOpen] = useState(false);
   const kibana = useKibana();
 
-  const uiSettings = kibana.services.uiSettings || props.uiSettings;
+  const uiSettings = kibana.services.uiSettings;
   if (!uiSettings) return null;
 
-  function hasContext() {
-    return Boolean(kibana.services.uiSettings);
-  }
-
-  function wrapInContextIfMissing(content: JSX.Element) {
-    // TODO: Relevant only as long as directives are used!
-    if (!hasContext()) {
-      if (props.docLinks && props.uiSettings && props.pluginDataStart) {
-        return (
-          <KibanaContextProvider
-            services={{
-              uiSettings: props.uiSettings,
-              docLinks: props.docLinks,
-              data: props.pluginDataStart,
-            }}
-          >
-            {content}
-          </KibanaContextProvider>
-        );
-      } else {
-        throw new Error(
-          'Rending filter bar requires providing sufficient context: uiSettings, docLinks and NP data plugin'
-        );
-      }
-    }
-    return content;
-  }
-
   function onFiltersUpdated(filters: esFilters.Filter[]) {
     if (props.onFiltersUpdated) {
       props.onFiltersUpdated(filters);
@@ -119,7 +85,7 @@ function FilterBarUI(props: Props) {
       </EuiButtonEmpty>
     );
 
-    return wrapInContextIfMissing(
+    return (
       <EuiFlexItem grow={false}>
         <EuiPopover
           id="addFilterPopover"
diff --git a/src/legacy/core_plugins/data/public/shim/legacy_module.ts b/src/legacy/core_plugins/data/public/shim/legacy_module.ts
index edc389b41197..06c5caa04ba9 100644
--- a/src/legacy/core_plugins/data/public/shim/legacy_module.ts
+++ b/src/legacy/core_plugins/data/public/shim/legacy_module.ts
@@ -19,58 +19,11 @@
 
 import { once } from 'lodash';
 
-import { wrapInI18nContext } from 'ui/i18n';
-
 // @ts-ignore
 import { uiModules } from 'ui/modules';
-import { npStart } from 'ui/new_platform';
-import { FilterBar } from '../filter';
 import { IndexPatterns } from '../index_patterns/index_patterns';
 
 /** @internal */
 export const initLegacyModule = once((indexPatterns: IndexPatterns): void => {
-  uiModules
-    .get('app/kibana', ['react'])
-    .directive('filterBar', () => {
-      return {
-        restrict: 'E',
-        template: '',
-        compile: (elem: any) => {
-          const child = document.createElement('filter-bar-helper');
-
-          // Copy attributes to the child directive
-          for (const attr of elem[0].attributes) {
-            child.setAttribute(attr.name, attr.value);
-          }
-
-          child.setAttribute('ui-settings', 'uiSettings');
-          child.setAttribute('doc-links', 'docLinks');
-          child.setAttribute('plugin-data-start', 'pluginDataStart');
-
-          // Append helper directive
-          elem.append(child);
-
-          const linkFn = ($scope: any) => {
-            $scope.uiSettings = npStart.core.uiSettings;
-            $scope.docLinks = npStart.core.docLinks;
-            $scope.pluginDataStart = npStart.plugins.data;
-          };
-
-          return linkFn;
-        },
-      };
-    })
-    .directive('filterBarHelper', (reactDirective: any) => {
-      return reactDirective(wrapInI18nContext(FilterBar), [
-        ['uiSettings', { watchDepth: 'reference' }],
-        ['docLinks', { watchDepth: 'reference' }],
-        ['onFiltersUpdated', { watchDepth: 'reference' }],
-        ['indexPatterns', { watchDepth: 'collection' }],
-        ['filters', { watchDepth: 'collection' }],
-        ['className', { watchDepth: 'reference' }],
-        ['pluginDataStart', { watchDepth: 'reference' }],
-      ]);
-    });
-
   uiModules.get('kibana/index_patterns').value('indexPatterns', indexPatterns);
 });
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 a94fd500257d..b645bb408300 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
+++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
@@ -36,8 +36,7 @@
 -->
   <kbn-top-nav
     ng-if="showFilterBar() && !isVisible"
-    class-name="'globalFilterGroup__filterBar'"
-
+    
     app-name="'dashboard'"
     show-search-bar="true"
     show-filter-bar="true"
diff --git a/src/legacy/core_plugins/kibana/public/discover/angular/context_app.html b/src/legacy/core_plugins/kibana/public/discover/angular/context_app.html
index 68e1d536a91c..3e0f8a832915 100644
--- a/src/legacy/core_plugins/kibana/public/discover/angular/context_app.html
+++ b/src/legacy/core_plugins/kibana/public/discover/angular/context_app.html
@@ -1,9 +1,16 @@
-<filter-bar
-  class-name="'globalFilterGroup__filterBar'"
+<kbn-top-nav
+  app-name="'context'"
+  show-search-bar="true"
+  show-filter-bar="true"
+  show-save-query="false"
+  show-date-picker="false"
+
   filters="contextApp.state.queryParameters.filters"
   on-filters-updated="contextApp.actions.updateFilters"
   index-patterns="[contextApp.indexPattern]"
-></filter-bar>
+>
+</kbn-top-nav>
+
 
 <!-- Error feedback -->
 <div
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 0ef3cce832bc..bf9ac9b9bbe3 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
@@ -1,7 +1,7 @@
 <visualize-app class="app-container visEditor visEditor--{{ vis.type.name }}">
   <!-- Linked search. -->
   <div
-      ng-show="chrome.getVisible()"
+      ng-show="isVisible"
       ng-if="vis.type.requiresSearch && state.linked"
       class="fullWidth visEditor__linkedMessage"
     >
@@ -33,6 +33,7 @@
     show-query-bar is set to "true".
   -->
   <kbn-top-nav
+    ng-if="isVisible"
     app-name="'visualize'"
     config="topNavMenu"
     show-search-bar="true"
@@ -64,13 +65,20 @@
     The top nav is hidden in embed mode but the filter bar must still be present so
     we show the filter bar on its own here if the chrome is not visible.
   -->
-  <filter-bar
-    ng-if="vis.type.options.showFilterBar && !chrome.getVisible()"
-    class-name="'globalFilterGroup__filterBar'"
+  <kbn-top-nav
+    ng-if="showFilterBar() && !isVisible"
+    
+    app-name="'visualize'"
+    show-search-bar="true"
+    show-filter-bar="true"
+    show-save-query="false"
+    show-date-picker="false"
+
     filters="filters"
     on-filters-updated="onFiltersUpdated"
     index-patterns="[indexPattern]"
-  ></filter-bar>
+  >
+  </kbn-top-nav>
 
   <div
     class="euiCallOut euiCallOut--primary euiCallOut--small hide-for-sharing"
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 821883655766..6840c1386bee 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
@@ -425,6 +425,12 @@ function VisEditor(
       next: updateTimeRange
     }));
 
+    subscriptions.add(chrome.getIsVisible$().subscribe(isVisible => {
+      $scope.$evalAsync(() => {
+        $scope.isVisible = isVisible;
+      });
+    }));
+
     // update the searchSource when query updates
     $scope.fetch = function () {
       $state.save();