[Maps] use EuiSuperDatePicker in QueryBar instead of Angular timepicker in Top Nav

src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js

@@ -215,7 +215,7 @@ app.directive('dashboardApp', function ($injector) {
             dashboardStateManager.getPanels().find((panel) => panel.panelIndex === panelIndex);
       };
 
-      $scope.updateQueryAndFetch = function (query) {
+      $scope.updateQueryAndFetch = function ({ query }) {
         const oldQuery = $scope.model.query;
         if (_.isEqual(oldQuery, query)) {
           // The user can still request a reload in the query bar, even if the
@@ -236,7 +236,9 @@ app.directive('dashboardApp', function ($injector) {
         $scope.indexPatterns = dashboardStateManager.getPanelIndexPatterns();
       };
 
-      $scope.$watch('model.query', $scope.updateQueryAndFetch);
+      $scope.$watch('model.query', (query) => {
+        $scope.updateQueryAndFetch({ query });
+      });
 
       $scope.$listenAndDigestAsync(timefilter, 'fetch', () => {
         dashboardStateManager.handleTimeChange(timefilter.getTime());

src/legacy/core_plugins/kibana/public/discover/controllers/discover.js

@@ -525,7 +525,9 @@ function discoverController(
           }
         });
 
-        $scope.$watch('state.query', $scope.updateQueryAndFetch);
+        $scope.$watch('state.query', (query) => {
+          $scope.updateQueryAndFetch({ query });
+        });
 
         $scope.$watchMulti([
           'rows',
@@ -643,7 +645,7 @@ function discoverController(
       .catch(notify.error);
   };
 
-  $scope.updateQueryAndFetch = function (query) {
+  $scope.updateQueryAndFetch = function ({ query }) {
     $state.query = migrateLegacyQuery(query);
     $scope.fetch();
   };

src/legacy/core_plugins/kibana/public/visualize/editor/editor.js

@@ -304,7 +304,9 @@ function VisEditor(
       $appStatus.dirty = status.dirty || !savedVis.id;
     });
 
-    $scope.$watch('state.query', $scope.updateQueryAndFetch);
+    $scope.$watch('state.query', (query) => {
+      $scope.updateQueryAndFetch({ query });
+    });
 
     $state.replace();
 
@@ -378,7 +380,7 @@ function VisEditor(
     }
   }
 
-  $scope.updateQueryAndFetch = function (query) {
+  $scope.updateQueryAndFetch = function ({ query }) {
     $state.query = migrateLegacyQuery(query);
     $scope.fetch();
   };

src/ui/public/query_bar/_index.scss

@@ -1,4 +1,4 @@
 // SASSTODO: Formalize this color in Kibana's styling constants
 $typeaheadConjunctionColor: #7800A6;
 
-@import 'components/typeahead/index';
+@import './components/index';

src/ui/public/query_bar/components/_index.scss

@@ -0,0 +1,2 @@
+@import './query_bar';
+@import './typeahead/index';

src/ui/public/query_bar/components/_query_bar.scss

@@ -0,0 +1,14 @@
+@include euiBreakpoint('xs', 's') {
+  .kbnQueryBar--withDatePicker {
+    > :last-child {
+      // EUI Flexbox adds too much margin between responded items, this just moves the last one up
+      margin-top: -$euiSize;
+    }
+  }
+}
+
+@include euiBreakpoint('m', 'l', 'xl') {
+  .kbnQueryBar__datePickerWrapper {
+    max-width: 40vw;
+  }
+}

src/ui/public/query_bar/components/query_bar.test.tsx

@@ -207,8 +207,14 @@ describe('QueryBar', () => {
     component.find(QueryLanguageSwitcher).simulate('selectLanguage', 'lucene');
     expect(mockStorage.set).toHaveBeenCalledWith('kibana.userQueryLanguage', 'lucene');
     expect(mockCallback).toHaveBeenCalledWith({
-      query: '',
-      language: 'lucene',
+      dateRange: {
+        from: 'now-15m',
+        to: 'now',
+      },
+      query: {
+        query: '',
+        language: 'lucene',
+      },
     });
   });
 
@@ -235,8 +241,14 @@ describe('QueryBar', () => {
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
     expect(mockCallback).toHaveBeenCalledWith({
-      query: 'extension:jpg',
-      language: 'kuery',
+      dateRange: {
+        from: 'now-15m',
+        to: 'now',
+      },
+      query: {
+        query: 'extension:jpg',
+        language: 'kuery',
+      },
     });
   });