[Dashboard] Deangularize navbar, attempt nr. 2

src/plugins/dashboard/public/application/application.ts

@@ -38,12 +38,7 @@ import { EmbeddableStart } from '../../../embeddable/public';
 import { NavigationPublicPluginStart as NavigationStart } from '../../../navigation/public';
 import { DataPublicPluginStart } from '../../../data/public';
 import { SharePluginStart } from '../../../share/public';
-import {
-  KibanaLegacyStart,
-  configureAppAngularModule,
-  createTopNavDirective,
-  createTopNavHelper,
-} from '../../../kibana_legacy/public';
+import { KibanaLegacyStart, configureAppAngularModule } from '../../../kibana_legacy/public';
 import { SavedObjectLoader } from '../../../saved_objects/public';
 
 export interface RenderDeps {
@@ -114,13 +109,11 @@ function mountDashboardApp(appBasePath: string, element: HTMLElement) {
 
 function createLocalAngularModule(core: AppMountContext['core'], navigation: NavigationStart) {
   createLocalI18nModule();
-  createLocalTopNavModule(navigation);
   createLocalIconModule();
 
   const dashboardAngularModule = angular.module(moduleName, [
     ...thirdPartyAngularDependencies,
     'app/dashboard/I18n',
-    'app/dashboard/TopNav',
     'app/dashboard/icon',
   ]);
   return dashboardAngularModule;
@@ -132,13 +125,6 @@ function createLocalIconModule() {
     .directive('icon', reactDirective => reactDirective(EuiIcon));
 }
 
-function createLocalTopNavModule(navigation: NavigationStart) {
-  angular
-    .module('app/dashboard/TopNav', ['react'])
-    .directive('kbnTopNav', createTopNavDirective)
-    .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui));
-}
-
 function createLocalI18nModule() {
   angular
     .module('app/dashboard/I18n', [])

src/plugins/dashboard/public/application/dashboard_app.html

@@ -2,52 +2,7 @@
   class="app-container dshAppContainer"
   ng-class="{'dshAppContainer--withMargins': model.useMargins}"
 >
-  <!-- Local nav. -->
-  <kbn-top-nav
-    ng-show="isVisible"
-    app-name="'dashboard'"
-    config="topNavMenu"
-
-    show-search-bar="isVisible"
-    show-filter-bar="showFilterBar()"
-    show-save-query="showSaveQuery"
-
-    query="model.query"
-    saved-query="savedQuery"
-    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-saved="onQuerySaved"
-    on-saved-query-updated="onSavedQueryUpdated"
-    on-clear-saved-query="onClearSavedQuery"
-    on-refresh-change="onRefreshChange">
-  </kbn-top-nav>
-
-  <!--
-  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.
--->
-  <kbn-top-nav
-    ng-if="showFilterBar() && !isVisible"
-
-    app-name="'dashboard'"
-    show-search-bar="true"
-    show-filter-bar="true"
-    show-save-query="false"
-    show-date-picker="false"
-
-    filters="model.filters"
-    index-patterns="indexPatterns"
-    on-filters-updated="onFiltersUpdated"
-  >
-  </kbn-top-nav>
-
+  <div id="dashboardChrome"></div>
   <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
   <div id="dashboardViewport"></div>
 

src/plugins/dashboard/public/application/dashboard_app.tsx

@@ -33,7 +33,6 @@ import { SavedObjectDashboard } from '../saved_dashboards';
 export interface DashboardAppScope extends ng.IScope {
   dash: SavedObjectDashboard;
   appState: DashboardAppState;
-  screenTitle: string;
   model: {
     query: Query;
     filters: Filter[];
@@ -54,21 +53,7 @@ export interface DashboardAppScope extends ng.IScope {
   getShouldShowEditHelp: () => boolean;
   getShouldShowViewHelp: () => boolean;
   updateQueryAndFetch: ({ query, dateRange }: { query: Query; dateRange?: TimeRange }) => void;
-  onRefreshChange: ({
-    isPaused,
-    refreshInterval,
-  }: {
-    isPaused: boolean;
-    refreshInterval: any;
-  }) => void;
-  onFiltersUpdated: (filters: Filter[]) => void;
-  onCancelApplyFilters: () => void;
-  onApplyFilters: (filters: Filter[]) => void;
-  onQuerySaved: (savedQuery: SavedQuery) => void;
-  onSavedQueryUpdated: (savedQuery: SavedQuery) => void;
-  onClearSavedQuery: () => void;
   topNavMenu: any;
-  showFilterBar: () => boolean;
   showAddPanel: any;
   showSaveQuery: boolean;
   kbnTopNav: any;

src/plugins/dashboard/public/application/dashboard_app_controller.tsx

@@ -21,12 +21,15 @@ import _, { uniq } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { EUI_MODAL_CANCEL_BUTTON } from '@elastic/eui';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import angular from 'angular';
 
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { History } from 'history';
 import { SavedObjectSaveOpts } from 'src/plugins/saved_objects/public';
+import { NavigationPublicPluginStart as NavigationStart } from 'src/plugins/navigation/public';
+import { TimeRange } from 'src/plugins/data/public';
 import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';
 
 import {
@@ -87,6 +90,7 @@ export interface DashboardAppControllerDependencies extends RenderDeps {
   dashboardConfig: KibanaLegacyStart['dashboardConfig'];
   history: History;
   kbnUrlStateStorage: IKbnUrlStateStorage;
+  navigation: NavigationStart;
 }
 
 export class DashboardAppController {
@@ -123,10 +127,13 @@ export class DashboardAppController {
     history,
     kbnUrlStateStorage,
     usageCollection,
+    navigation,
   }: DashboardAppControllerDependencies) {
     const filterManager = queryService.filterManager;
     const queryFilter = filterManager;
     const timefilter = queryService.timefilter.timefilter;
+    let showSearchBar = true;
+    let showQueryBar = true;
 
     let lastReloadRequestTime = 0;
     const dash = ($scope.dash = $route.current.locals.dash);
@@ -243,6 +250,9 @@ export class DashboardAppController {
       }
     };
 
+    const showFilterBar = () =>
+      $scope.model.filters.length > 0 || !dashboardStateManager.getFullScreenMode();
+
     const getEmptyScreenProps = (
       shouldShowEditHelp: boolean,
       isEmptyInReadOnlyMode: boolean
@@ -310,7 +320,6 @@ export class DashboardAppController {
         refreshInterval: timefilter.getRefreshInterval(),
       };
       $scope.panels = dashboardStateManager.getPanels();
-      $scope.screenTitle = dashboardStateManager.getTitle();
     };
 
     updateState();
@@ -515,49 +524,8 @@ export class DashboardAppController {
       }
     };
 
-    $scope.onRefreshChange = function({ isPaused, refreshInterval }) {
-      timefilter.setRefreshInterval({
-        pause: isPaused,
-        value: refreshInterval ? refreshInterval : $scope.model.refreshInterval.value,
-      });
-    };
-
-    $scope.onFiltersUpdated = filters => {
-      // The filters will automatically be set when the queryFilter emits an update event (see below)
-      queryFilter.setFilters(filters);
-    };
-
-    $scope.onQuerySaved = savedQuery => {
-      $scope.savedQuery = savedQuery;
-    };
-
-    $scope.onSavedQueryUpdated = savedQuery => {
-      $scope.savedQuery = { ...savedQuery };
-    };
-
-    $scope.onClearSavedQuery = () => {
-      delete $scope.savedQuery;
-      dashboardStateManager.setSavedQueryId(undefined);
-      dashboardStateManager.applyFilters(
-        {
-          query: '',
-          language:
-            localStorage.get('kibana.userQueryLanguage') || uiSettings.get('search:queryLanguage'),
-        },
-        queryFilter.getGlobalFilters()
-      );
-      // Making this method sync broke the updates.
-      // Temporary fix, until we fix the complex state in this file.
-      setTimeout(() => {
-        queryFilter.setFilters(queryFilter.getGlobalFilters());
-      }, 0);
-    };
-
     const updateStateFromSavedQuery = (savedQuery: SavedQuery) => {
-      const savedQueryFilters = savedQuery.attributes.filters || [];
-      const globalFilters = queryFilter.getGlobalFilters();
-      const allFilters = [...globalFilters, ...savedQueryFilters];
-
+      const allFilters = filterManager.getFilters();
       dashboardStateManager.applyFilters(savedQuery.attributes.query, allFilters);
       if (savedQuery.attributes.timefilter) {
         timefilter.setTime({
@@ -616,6 +584,42 @@ export class DashboardAppController {
       }
     );
 
+    const onSavedQueryIdChange = (savedQueryId?: string) => {
+      dashboardStateManager.setSavedQueryId(savedQueryId);
+    };
+
+    const getNavBarProps = () => {
+      const isFullScreenMode = dashboardStateManager.getFullScreenMode();
+      const screenTitle = dashboardStateManager.getTitle();
+      return {
+        appName: 'dashboard',
+        config: $scope.isVisible ? $scope.topNavMenu : undefined,
+        className: isFullScreenMode ? 'kbnTopNavMenu-isFullScreen' : undefined,
+        screenTitle,
+        showSearchBar,
+        showQueryBar,
+        showFilterBar: showFilterBar(),
+        indexPatterns: $scope.indexPatterns,
+        showSaveQuery: $scope.showSaveQuery,
+        query: $scope.model.query,
+        savedQuery: $scope.savedQuery,
+        onSavedQueryIdChange,
+        savedQueryId: dashboardStateManager.getSavedQueryId(),
+        useDefaultBehaviors: true,
+        onQuerySubmit: (payload: { dateRange: TimeRange; query?: Query }): void => {
+          if (!payload.query) {
+            $scope.updateQueryAndFetch({ query: $scope.model.query, dateRange: payload.dateRange });
+          } else {
+            $scope.updateQueryAndFetch({ query: payload.query, dateRange: payload.dateRange });
+          }
+        },
+      };
+    };
+    const dashboardNavBar = document.getElementById('dashboardChrome');
+    const updateNavBar = () => {
+      ReactDOM.render(<navigation.ui.TopNavMenu {...getNavBarProps()} />, dashboardNavBar);
+    };
+
     $scope.timefilterSubscriptions$ = new Subscription();
 
     $scope.timefilterSubscriptions$.add(
@@ -707,6 +711,8 @@ export class DashboardAppController {
             revertChangesAndExitEditMode();
           }
         });
+
+      updateNavBar();
     };
 
     /**
@@ -761,9 +767,6 @@ export class DashboardAppController {
         });
     }
 
-    $scope.showFilterBar = () =>
-      $scope.model.filters.length > 0 || !dashboardStateManager.getFullScreenMode();
-
     $scope.showAddPanel = () => {
       dashboardStateManager.setFullScreenMode(false);
       /*
@@ -785,7 +788,11 @@ export class DashboardAppController {
     const navActions: {
       [key: string]: NavAction;
     } = {};
-    navActions[TopNavIds.FULL_SCREEN] = () => dashboardStateManager.setFullScreenMode(true);
+    navActions[TopNavIds.FULL_SCREEN] = () => {
+      dashboardStateManager.setFullScreenMode(true);
+      showQueryBar = false;
+      updateNavBar();
+    };
     navActions[TopNavIds.EXIT_EDIT_MODE] = () => onChangeViewMode(ViewMode.VIEW);
     navActions[TopNavIds.ENTER_EDIT_MODE] = () => onChangeViewMode(ViewMode.EDIT);
     navActions[TopNavIds.SAVE] = () => {
@@ -858,6 +865,7 @@ export class DashboardAppController {
           if ((response as { error: Error }).error) {
             dashboardStateManager.setTitle(currentTitle);
           }
+          updateNavBar();
           return response;
         });
       };
@@ -939,6 +947,9 @@ export class DashboardAppController {
     const visibleSubscription = chrome.getIsVisible$().subscribe(isVisible => {
       $scope.$evalAsync(() => {
         $scope.isVisible = isVisible;
+        showSearchBar = isVisible || showFilterBar();
+        showQueryBar = !dashboardStateManager.getFullScreenMode() && isVisible;
+        updateNavBar();
       });
     });
 
@@ -949,6 +960,11 @@ export class DashboardAppController {
         navActions,
         dashboardConfig.getHideWriteControls()
       );
+      updateNavBar();
+    });
+
+    $scope.$watch('indexPatterns', () => {
+      updateNavBar();
     });
 
     $scope.$on('$destroy', () => {
@@ -965,9 +981,6 @@ export class DashboardAppController {
       if (outputSubscription) {
         outputSubscription.unsubscribe();
       }
-      if (dashboardContainer) {
-        dashboardContainer.destroy();
-      }
     });
   }
 }

src/plugins/navigation/public/top_nav_menu/_index.scss

@@ -8,4 +8,8 @@
       padding: 0 $euiSizeS;
     }
   }
+
+  .kbnTopNavMenu-isFullScreen {
+    padding: 0;
+  }
 }

src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx

@@ -75,4 +75,17 @@ describe('TopNavMenu', () => {
     expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
     expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(1);
   });
+
+  it('Should render with a class name', () => {
+    const component = shallowWithIntl(
+      <TopNavMenu
+        appName={'test'}
+        showSearchBar={true}
+        data={dataShim as any}
+        className={'myCoolClass'}
+      />
+    );
+    expect(component.find('.kbnTopNavMenu').length).toBe(1);
+    expect(component.find('.myCoolClass').length).toBeTruthy();
+  });
 });