[Timelion] Move the local menu to the header (elastic#80627)

* [Timelion] Move the local menu to the header

* nice improvement

* remove console msg

* cleanup

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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);

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', [])

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 (
+          <deps.core.i18n.Context>
+            <TopNavMenu
+              appName="timelion"
+              showTopNavMenu
+              config={props.topNavMenu}
+              setMenuMountPoint={deps.mountParams.setHeaderActionMenu}
+              onQuerySubmit={props.onTimeUpdate}
+              screenTitle="timelion"
+              showDatePicker
+              showFilterBar={false}
+              showQueryInput={false}
+              showSaveQuery={false}
+              showSearchBar
+              useDefaultBehaviors
+            />
+          </deps.core.i18n.Context>
+        );
+      },
+      [
+        ['topNavMenu', { watchDepth: 'reference' }],
+        ['onTimeUpdate', { watchDepth: 'reference' }],
+      ],
+      {
+        restrict: 'E',
+        scope: {
+          topNavMenu: '=',
+          onTimeUpdate: '=',
+        },
+      }
+    );
+  });
+}

src/plugins/timelion/public/index.html

@@ -11,21 +11,7 @@
     </span>
   </span>
   <!-- Local nav. -->
-  <kbn-top-nav 
-    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>
-
+  <timelion-top-nav top-nav-menu="topNavMenu" on-time-update="onTimeUpdate"></timelion-top-nav>
 
   <div class="timApp__menus">
     <timelion-deprecation></timelion-deprecation>