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

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

@@ -229,7 +229,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
@@ -270,7 +270,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

@@ -544,7 +544,9 @@ function discoverController(
           }
         });
 
-        $scope.$watch('state.query', $scope.updateQueryAndFetch);
+        $scope.$watch('state.query', (query) => {
+          $scope.updateQueryAndFetch({ query });
+        });
 
         $scope.$watchMulti([
           'rows',
@@ -662,7 +664,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

@@ -334,7 +334,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();
 
@@ -409,7 +411,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/__snapshots__/query_bar.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true 1`] = `
 <EuiFlexGroup
   alignItems="stretch"
+  className="kbnQueryBar"
   component="div"
   direction="row"
   gutterSize="s"
@@ -89,28 +90,21 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
     component="div"
     grow={false}
   >
-    <EuiButton
-      aria-label="Search"
-      color="primary"
+    <EuiSuperUpdateButton
       data-test-subj="querySubmitButton"
-      fill={true}
-      iconSide="left"
+      isDisabled={false}
+      isLoading={false}
+      needsUpdate={false}
       onClick={[Function]}
-      type="button"
-    >
-      <FormattedMessage
-        defaultMessage="Refresh"
-        id="common.ui.queryBar.refreshButtonLabel"
-        values={Object {}}
-      />
-    </EuiButton>
+    />
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
 
 exports[`QueryBar Should pass the query language to the language switcher 1`] = `
 <EuiFlexGroup
   alignItems="stretch"
+  className="kbnQueryBar"
   component="div"
   direction="row"
   gutterSize="s"
@@ -197,28 +191,21 @@ exports[`QueryBar Should pass the query language to the language switcher 1`] =
     component="div"
     grow={false}
   >
-    <EuiButton
-      aria-label="Search"
-      color="primary"
+    <EuiSuperUpdateButton
       data-test-subj="querySubmitButton"
-      fill={true}
-      iconSide="left"
+      isDisabled={false}
+      isLoading={false}
+      needsUpdate={false}
       onClick={[Function]}
-      type="button"
-    >
-      <FormattedMessage
-        defaultMessage="Refresh"
-        id="common.ui.queryBar.refreshButtonLabel"
-        values={Object {}}
-      />
-    </EuiButton>
+    />
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
 
 exports[`QueryBar Should render the given query 1`] = `
 <EuiFlexGroup
   alignItems="stretch"
+  className="kbnQueryBar"
   component="div"
   direction="row"
   gutterSize="s"
@@ -305,21 +292,13 @@ exports[`QueryBar Should render the given query 1`] = `
     component="div"
     grow={false}
   >
-    <EuiButton
-      aria-label="Search"
-      color="primary"
+    <EuiSuperUpdateButton
       data-test-subj="querySubmitButton"
-      fill={true}
-      iconSide="left"
+      isDisabled={false}
+      isLoading={false}
+      needsUpdate={false}
       onClick={[Function]}
-      type="button"
-    >
-      <FormattedMessage
-        defaultMessage="Refresh"
-        id="common.ui.queryBar.refreshButtonLabel"
-        values={Object {}}
-      />
-    </EuiButton>
+    />
   </EuiFlexItem>
 </EuiFlexGroup>
 `;

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',
+      },
     });
   });