Reactify Top Nav Menu (kbn_top_nav) (#40262)

* kbn top nav in discover * New top nav in dashboard and vis editor * Stop using template feature of kbn top nav * Changed console menu to new directive * Use search bar in top nav in discover and maps Support search bar with no filter bar (TS) * Moved storage instantiation to angular directive * Make index patterns optional (for timepicker only setup) * Moved discover result count away from top nav * Removed unused name attribute in top nav. Use app-name instead.
elastic · Jul 21, 2019 · b22a288 · b22a288
1 parent 59297be
commit b22a288
Show file tree

Hide file tree

Showing 46 changed files with 1,487 additions and 413 deletions.
diff --git 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
@@ -28,20 +28,20 @@ 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',
       }),
       description: i18n.translate('console.topNav.historyTabDescription', {
         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/filter_bar/_global_filter_group.scss b/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss
@@ -1,4 +1,8 @@
 // SASSTODO: Probably not the right file for this selector, but temporary until the files get re-organized
+.globalQueryBar {
+  padding: 0px $euiSizeS $euiSizeS $euiSizeS;
+}
+
 .globalQueryBar:not(:empty) {
   padding-bottom: $euiSizeS;
 }

diff --git a/src/legacy/core_plugins/data/public/index.ts b/src/legacy/core_plugins/data/public/index.ts
@@ -90,6 +90,7 @@ export { ExpressionRenderer, ExpressionRendererProps, ExpressionRunner } from '.
 /** @public types */
 export { IndexPattern, StaticIndexPattern, StaticIndexPatternField, Field } from './index_patterns';
 export { Query } from './query';
+export { SearchBar, SearchBarProps } from './search';
 export { FilterManager, FilterStateManager, uniqFilters } from './filter/filter_manager';
 
 /** @public static code */

diff --git a/...core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/...core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap
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
@@ -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 not show 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);
+  });
 });