diff --git a/src/plugins/timelion/public/app.js b/src/plugins/timelion/public/app.js
index 40fffe7a5a063..3838b319cda68 100644
--- a/src/plugins/timelion/public/app.js
+++ b/src/plugins/timelion/public/app.js
@@ -44,6 +44,7 @@ import { initSavedObjectSaveAsCheckBoxDirective } from './directives/saved_objec
import { initSavedObjectFinderDirective } from './directives/saved_object_finder';
import { initTimelionTabsDirective } from './components/timelionhelp_tabs_directive';
import { initTimelionTDeprecationDirective } from './components/timelion_deprecation_directive';
+import { initTimelionTopNavDirective } from './components/timelion_top_nav_directive';
import { initInputFocusDirective } from './directives/input_focus';
import { Chart } from './directives/chart/chart';
import { TimelionInterval } from './directives/timelion_interval/timelion_interval';
@@ -86,6 +87,7 @@ export function initTimelionApp(app, deps) {
initInputFocusDirective(app);
initTimelionTabsDirective(app, deps);
initTimelionTDeprecationDirective(app, deps);
+ initTimelionTopNavDirective(app, deps);
initSavedObjectFinderDirective(app, savedSheetLoader, deps.core.uiSettings);
initSavedObjectSaveAsCheckBoxDirective(app);
initCellsDirective(app);
diff --git a/src/plugins/timelion/public/application.ts b/src/plugins/timelion/public/application.ts
index e0425ac94c59b..4f58b83a49106 100644
--- a/src/plugins/timelion/public/application.ts
+++ b/src/plugins/timelion/public/application.ts
@@ -36,11 +36,7 @@ import {
import { getTimeChart } from './panels/timechart/timechart';
import { Panel } from './panels/panel';
-import {
- configureAppAngularModule,
- createTopNavDirective,
- createTopNavHelper,
-} from '../../kibana_legacy/public';
+import { configureAppAngularModule } from '../../kibana_legacy/public';
import { TimelionPluginStartDependencies } from './plugin';
import { DataPublicPluginStart } from '../../data/public';
// @ts-ignore
@@ -120,11 +116,9 @@ function mountTimelionApp(appBasePath: string, element: HTMLElement, deps: Rende
function createLocalAngularModule(deps: RenderDeps) {
createLocalI18nModule();
createLocalIconModule();
- createLocalTopNavModule(deps.plugins.navigation);
const dashboardAngularModule = angular.module(moduleName, [
...thirdPartyAngularDependencies,
- 'app/timelion/TopNav',
'app/timelion/I18n',
'app/timelion/icon',
]);
@@ -137,13 +131,6 @@ function createLocalIconModule() {
.directive('icon', (reactDirective) => reactDirective(EuiIcon));
}
-function createLocalTopNavModule(navigation: TimelionPluginStartDependencies['navigation']) {
- angular
- .module('app/timelion/TopNav', ['react'])
- .directive('kbnTopNav', createTopNavDirective)
- .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui));
-}
-
function createLocalI18nModule() {
angular
.module('app/timelion/I18n', [])
diff --git a/src/plugins/timelion/public/components/timelion_top_nav_directive.js b/src/plugins/timelion/public/components/timelion_top_nav_directive.js
new file mode 100644
index 0000000000000..322bf6e8fe71b
--- /dev/null
+++ b/src/plugins/timelion/public/components/timelion_top_nav_directive.js
@@ -0,0 +1,58 @@
+/*
+ * 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';
+
+export function initTimelionTopNavDirective(app, deps) {
+ app.directive('timelionTopNav', function (reactDirective) {
+ return reactDirective(
+ (props) => {
+ const { TopNavMenu } = deps.plugins.navigation.ui;
+ return (
+