From cdec372cf282f1e80b20b0f82f61c9b2fb3dc0ab Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 28 Jan 2020 15:25:37 +0200
Subject: [PATCH 01/29] Clean up discover

---
 .../discover/np_ready/angular/discover.html   |  17 +-
 .../discover/np_ready/angular/discover.js     | 164 +++---------------
 .../ui/search_bar/create_search_bar.tsx       |  96 +++++++++-
 3 files changed, 121 insertions(+), 156 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
index 45490ac7adc0f..ed000a2527ad9 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
@@ -5,24 +5,13 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
   <kbn-top-nav
     app-name="'discover'"
     config="topNavMenu"
+    screen-title="screenTitle"
     show-search-bar="true"
     show-date-picker="enableTimeRangeSelector"
     show-save-query="showSaveQuery"
-    query="state.query"
-    saved-query="savedQuery"
-    screen-title="screenTitle"
-    on-query-submit="updateQueryAndFetch"
+    on-query-submit="updateQuery"
     index-patterns="[indexPattern]"
-    filters="filters"
-    on-filters-updated="onFiltersUpdated"
-    date-range-from="time.from"
-    date-range-to="time.to"
-    is-refresh-paused="refreshInterval.pause"
-    refresh-interval="refreshInterval.value"
-    on-refresh-change="onRefreshChange"
-    on-saved="onQuerySaved"
-    on-saved-query-updated="onSavedQueryUpdated"
-    on-clear-saved-query="onClearSavedQuery"
+    query="state.query"    
   >
   </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
index dd782f97b075d..20ed0c0f9ac53 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
@@ -19,7 +19,8 @@
 
 import _ from 'lodash';
 import React from 'react';
-import { Subscription } from 'rxjs';
+import { Subscription, Subject, merge } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
 import { i18n } from '@kbn/i18n';
@@ -62,7 +63,6 @@ import {
 const {
   core,
   chrome,
-  data,
   docTitle,
   filterManager,
   share,
@@ -79,8 +79,6 @@ import {
 import { getIndexPatternId } from '../helpers/get_index_pattern_id';
 import { FilterStateManager } from '../../../../../data/public';
 
-const { getSavedQuery } = data.query.savedQueries;
-
 const fetchStatuses = {
   UNINITIALIZED: 'uninitialized',
   LOADING: 'loading',
@@ -205,8 +203,6 @@ function discoverController(
 
   const subscriptions = new Subscription();
 
-  timefilter.disableTimeRangeSelector();
-  timefilter.disableAutoRefreshSelector();
   $scope.timefilterUpdateHandler = ranges => {
     timefilter.setTime({
       from: moment(ranges.from).toISOString(),
@@ -218,7 +214,6 @@ function discoverController(
   $scope.showInterval = false;
   $scope.minimumVisibleRows = 50;
   $scope.fetchStatus = fetchStatuses.UNINITIALIZED;
-  $scope.refreshInterval = timefilter.getRefreshInterval();
   $scope.showSaveQuery = uiCapabilities.discover.saveQuery;
 
   $scope.$watch(
@@ -436,15 +431,10 @@ function discoverController(
   let stateMonitor;
 
   const $state = ($scope.state = new AppState(getStateDefaults()));
+  const $fetchObservable = new Subject();
 
-  $scope.filters = filterManager.getFilters();
   $scope.screenTitle = savedSearch.title;
 
-  $scope.onFiltersUpdated = filters => {
-    // The filters will automatically be set when the filterManager emits an update event (see below)
-    filterManager.setFilters(filters);
-  };
-
   const getFieldCounts = async () => {
     // the field counts aren't set until we have the data back,
     // so we wait for the fetch to be done before proceeding
@@ -571,17 +561,12 @@ function discoverController(
   };
 
   const shouldSearchOnPageLoad = () => {
-    // If a saved query is referenced in the app state, omit the initial load because the saved query will
-    // be fetched separately and trigger a reload
-    if ($scope.state.savedQuery) {
-      return false;
-    }
     // A saved search is created on every page load, so we check the ID to see if we're loading a
     // previously saved search or if it is just transient
     return (
       config.get('discover:searchOnPageLoad') ||
       savedSearch.id !== undefined ||
-      _.get($scope, 'refreshInterval.pause') === false
+      timefilter.getRefreshInterval().pause === false
     );
   };
 
@@ -593,25 +578,23 @@ function discoverController(
     $scope.$on('$destroy', () => stateMonitor.destroy());
 
     $scope.updateDataSource().then(function() {
-      subscriptions.add(
-        subscribeWithScope($scope, timefilter.getAutoRefreshFetch$(), {
-          next: $scope.fetch,
-        })
-      );
+      const searchBarChanges = merge(
+        timefilter.getAutoRefreshFetch$(),
+        timefilter.getFetch$(),
+        filterManager.getFetches$(),
+        $fetchObservable
+      ).pipe(debounceTime(100));
 
       subscriptions.add(
-        subscribeWithScope($scope, timefilter.getRefreshIntervalUpdate$(), {
-          next: $scope.updateRefreshInterval,
+        subscribeWithScope($scope, searchBarChanges, {
+          next: $scope.fetch,
         })
       );
       subscriptions.add(
         subscribeWithScope($scope, timefilter.getTimeUpdate$(), {
-          next: $scope.updateTime,
-        })
-      );
-      subscriptions.add(
-        subscribeWithScope($scope, timefilter.getFetch$(), {
-          next: $scope.fetch,
+          next: () => {
+            $scope.updateTime();
+          },
         })
       );
 
@@ -625,14 +608,14 @@ function discoverController(
         );
 
         // if the searchSource doesn't know, tell it so
-        if (!angular.equals(sort, currentSort)) $scope.fetch();
+        if (!angular.equals(sort, currentSort)) $fetchObservable.next();
       });
 
       // update data source when filters update
+
       subscriptions.add(
         subscribeWithScope($scope, filterManager.getUpdates$(), {
           next: () => {
-            $scope.filters = filterManager.getFilters();
             $scope.updateDataSource().then(function() {
               $state.save();
             });
@@ -640,28 +623,15 @@ function discoverController(
         })
       );
 
-      // fetch data when filters fire fetch event
-      subscriptions.add(
-        subscribeWithScope($scope, filterManager.getFetches$(), {
-          next: $scope.fetch,
-        })
-      );
-
       // update data source when hitting forward/back and the query changes
       $scope.$listen($state, 'fetch_with_changes', function(diff) {
-        if (diff.indexOf('query') >= 0) $scope.fetch();
+        if (diff.indexOf('query') >= 0) $fetchObservable.next();
       });
 
       $scope.$watch('opts.timefield', function(timefield) {
         $scope.enableTimeRangeSelector = !!timefield;
       });
 
-      $scope.$watch('state.interval', function(newInterval, oldInterval) {
-        if (newInterval !== oldInterval) {
-          $scope.fetch();
-        }
-      });
-
       $scope.$watch('vis.aggs', function() {
         // no timefield, no vis, nothing to update
         if (!$scope.opts.timefield) return;
@@ -677,7 +647,7 @@ function discoverController(
         if (!_.isEqual(newQuery, oldQuery)) {
           const query = migrateLegacyQuery(newQuery);
           if (!_.isEqual(query, newQuery)) {
-            $scope.updateQueryAndFetch({ query });
+            $scope.updateQuery({ query });
           }
         }
       });
@@ -737,7 +707,7 @@ function discoverController(
       $state.replace();
 
       if (shouldSearchOnPageLoad()) {
-        $scope.fetch();
+        $fetchObservable.next();
       }
     });
   });
@@ -830,14 +800,12 @@ function discoverController(
       });
   };
 
-  $scope.updateQueryAndFetch = function({ query, dateRange }) {
-    const oldDateRange = timefilter.getTime();
-    timefilter.setTime(dateRange);
-    $state.query = query;
+  $scope.updateQuery = function({ query }) {
     // storing the updated timerange in the state will trigger a fetch
     // call automatically, so only trigger fetch in case this is a refresh call (no changes in parameters).
-    if (_.isEqual(oldDateRange, dateRange)) {
-      $scope.fetch();
+    if (!_.isEqual($state.query, query)) {
+      $state.query = query;
+      $fetchObservable.next();
     }
   };
 
@@ -899,32 +867,12 @@ function discoverController(
       from: dateMath.parse(timefilter.getTime().from),
       to: dateMath.parse(timefilter.getTime().to, { roundUp: true }),
     };
-    $scope.time = timefilter.getTime();
   };
 
   $scope.toMoment = function(datetime) {
     return moment(datetime).format(config.get('dateFormat'));
   };
 
-  $scope.updateRefreshInterval = function() {
-    const newInterval = timefilter.getRefreshInterval();
-    const shouldFetch =
-      _.get($scope, 'refreshInterval.pause') === true && newInterval.pause === false;
-
-    $scope.refreshInterval = newInterval;
-
-    if (shouldFetch) {
-      $scope.fetch();
-    }
-  };
-
-  $scope.onRefreshChange = function({ isPaused, refreshInterval }) {
-    timefilter.setRefreshInterval({
-      pause: isPaused,
-      value: refreshInterval ? refreshInterval : $scope.refreshInterval.value,
-    });
-  };
-
   $scope.resetQuery = function() {
     kbnUrl.change('/discover/{{id}}', { id: $route.current.params.id });
   };
@@ -991,70 +939,6 @@ function discoverController(
     $scope.minimumVisibleRows = $scope.hits;
   };
 
-  $scope.onQuerySaved = savedQuery => {
-    $scope.savedQuery = savedQuery;
-  };
-
-  $scope.onSavedQueryUpdated = savedQuery => {
-    $scope.savedQuery = { ...savedQuery };
-  };
-
-  $scope.onClearSavedQuery = () => {
-    delete $scope.savedQuery;
-    delete $state.savedQuery;
-    $state.query = {
-      query: '',
-      language: localStorage.get('kibana.userQueryLanguage') || config.get('search:queryLanguage'),
-    };
-    filterManager.setFilters(filterManager.getGlobalFilters());
-    $state.save();
-    $scope.fetch();
-  };
-
-  const updateStateFromSavedQuery = savedQuery => {
-    $state.query = savedQuery.attributes.query;
-    $state.save();
-    const savedQueryFilters = savedQuery.attributes.filters || [];
-    const globalFilters = filterManager.getGlobalFilters();
-    filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
-
-    if (savedQuery.attributes.timefilter) {
-      timefilter.setTime({
-        from: savedQuery.attributes.timefilter.from,
-        to: savedQuery.attributes.timefilter.to,
-      });
-      if (savedQuery.attributes.timefilter.refreshInterval) {
-        timefilter.setRefreshInterval(savedQuery.attributes.timefilter.refreshInterval);
-      }
-    }
-
-    $scope.fetch();
-  };
-
-  $scope.$watch('savedQuery', newSavedQuery => {
-    if (!newSavedQuery) return;
-
-    $state.savedQuery = newSavedQuery.id;
-    $state.save();
-
-    updateStateFromSavedQuery(newSavedQuery);
-  });
-
-  $scope.$watch('state.savedQuery', newSavedQueryId => {
-    if (!newSavedQueryId) {
-      $scope.savedQuery = undefined;
-      return;
-    }
-    if (!$scope.savedQuery || newSavedQueryId !== $scope.savedQuery.id) {
-      getSavedQuery(newSavedQueryId).then(savedQuery => {
-        $scope.$evalAsync(() => {
-          $scope.savedQuery = savedQuery;
-          updateStateFromSavedQuery(savedQuery);
-        });
-      });
-    }
-  });
-
   async function setupVisualization() {
     // If no timefield has been specified we don't create a histogram of messages
     if (!$scope.opts.timefield) return;
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 6f1be2825dd01..9f3f61390848c 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -22,7 +22,7 @@ import { Subscription } from 'rxjs';
 import { CoreStart } from 'src/core/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { KibanaContextProvider } from '../../../../kibana_react/public';
-import { DataPublicPluginStart, esFilters } from '../..';
+import { DataPublicPluginStart, esFilters, Query, TimeRange, SavedQuery } from '../..';
 import { QueryStart } from '../../query';
 import { SearchBarOwnProps, SearchBar } from './search_bar';
 
@@ -52,6 +52,89 @@ const defaultOnRefreshChange = (query: QueryStart) => {
   };
 };
 
+const defaultOnQuerySubmit = (
+  props: StatefulSearchBarProps,
+  query: QueryStart,
+  setQueryStringState: Function
+) => {
+  const { timefilter } = query.timefilter;
+
+  return (payload: { dateRange: TimeRange; query?: Query }) => {
+    timefilter.setTime(payload.dateRange);
+    setQueryStringState(payload.query);
+
+    if (props.onQuerySubmit) props.onQuerySubmit(payload);
+  };
+};
+
+const defaultOnClearSavedQuery = (
+  props: StatefulSearchBarProps,
+  uiSettings: CoreStart['uiSettings'],
+  query: QueryStart,
+  setQueryStringState: Function
+) => {
+  return () => {
+    query.filterManager.removeAll();
+    setQueryStringState({
+      query: '',
+      language: uiSettings.get('search:queryLanguage'),
+    });
+
+    if (props.onClearSavedQuery) props.onClearSavedQuery();
+  };
+};
+
+const populateStateFromSavedQuery = (
+  props: StatefulSearchBarProps,
+  query: QueryStart,
+  savedQuery: SavedQuery,
+  setQueryStringState: Function
+) => {
+  const { timefilter } = query.timefilter;
+  // timefilter
+  if (savedQuery.attributes.timefilter) {
+    timefilter.setTime({
+      from: savedQuery.attributes.timefilter.from,
+      to: savedQuery.attributes.timefilter.to,
+    });
+    if (savedQuery.attributes.timefilter.refreshInterval) {
+      timefilter.setRefreshInterval(savedQuery.attributes.timefilter.refreshInterval);
+    }
+  }
+
+  // query string
+  setQueryStringState(savedQuery.attributes.query);
+  if (props.onQuerySubmit)
+    props.onQuerySubmit({ dateRange: timefilter.getTime(), query: savedQuery.attributes.query });
+
+  // filters
+  const savedQueryFilters = savedQuery.attributes.filters || [];
+  const globalFilters = query.filterManager.getGlobalFilters();
+  query.filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
+};
+
+const defaultOnSavedQueryUpdated = (
+  props: StatefulSearchBarProps,
+  query: QueryStart,
+  setQueryStringState: Function
+) => {
+  return (savedQuery: SavedQuery) => {
+    populateStateFromSavedQuery(props, query, savedQuery, setQueryStringState);
+    if (props.onSavedQueryUpdated) props.onSavedQueryUpdated(savedQuery);
+  };
+};
+
+const defaultOnQuerySaved = (
+  props: StatefulSearchBarProps,
+  query: QueryStart,
+  setQueryStringState: Function
+) => {
+  return (savedQuery: SavedQuery) => {
+    populateStateFromSavedQuery(props, query, savedQuery, setQueryStringState);
+    if (props.onSaved) props.onSaved(savedQuery);
+  };
+};
+
 export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps) {
   // App name should come from the core application service.
   // Until it's available, we'll ask the user to provide it for the pre-wired component.
@@ -61,6 +144,10 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
     const fmFilters = filterManager.getFilters();
     const [refreshInterval, setRefreshInterval] = useState(tfRefreshInterval.value);
     const [refreshPaused, setRefreshPaused] = useState(tfRefreshInterval.pause);
+    const [query, setQuery] = useState<Query>({
+      query: props.query?.query || '',
+      language: props.query?.language || core.uiSettings.get('search:queryLanguage'),
+    });
 
     const [filters, setFilters] = useState(fmFilters);
 
@@ -110,15 +197,20 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
         }}
       >
         <SearchBar
+          {...props}
           timeHistory={timefilter.history}
           dateRangeFrom={timeRange.from}
           dateRangeTo={timeRange.to}
           refreshInterval={refreshInterval}
           isRefreshPaused={refreshPaused}
           filters={filters}
+          query={query}
           onFiltersUpdated={defaultFiltersUpdated(data.query)}
           onRefreshChange={defaultOnRefreshChange(data.query)}
-          {...props}
+          onQuerySubmit={defaultOnQuerySubmit(props, data.query, setQuery)}
+          onClearSavedQuery={defaultOnClearSavedQuery(props, core.uiSettings, data.query, setQuery)}
+          onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, data.query, setQuery)}
+          onSaved={defaultOnQuerySaved(props, data.query, setQuery)}
         />
       </KibanaContextProvider>
     );

From d82bebb1671ea5d316279fe89244bc929a11117d Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 28 Jan 2020 16:13:12 +0200
Subject: [PATCH 02/29] Clean up visualize

---
 .../discover/np_ready/angular/discover.html   |   2 +-
 .../discover/np_ready/angular/discover.js     |   8 +-
 .../visualize/np_ready/editor/editor.html     |  15 +-
 .../visualize/np_ready/editor/editor.js       | 153 +++---------------
 .../ui/search_bar/create_search_bar.tsx       |  40 ++---
 5 files changed, 46 insertions(+), 172 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
index ed000a2527ad9..1276b9ed23970 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
@@ -11,7 +11,7 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
     show-save-query="showSaveQuery"
     on-query-submit="updateQuery"
     index-patterns="[indexPattern]"
-    query="state.query"    
+    query="state.query"
   >
   </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
index 20ed0c0f9ac53..9f39e205d7894 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
@@ -801,12 +801,8 @@ function discoverController(
   };
 
   $scope.updateQuery = function({ query }) {
-    // storing the updated timerange in the state will trigger a fetch
-    // call automatically, so only trigger fetch in case this is a refresh call (no changes in parameters).
-    if (!_.isEqual($state.query, query)) {
-      $state.query = query;
-      $fetchObservable.next();
-    }
+    $state.query = query;
+    $fetchObservable.next();
   };
 
   function onResults(resp) {
diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
index 6190b92c9be3e..15b0cead96b3b 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
@@ -42,22 +42,11 @@
     show-filter-bar="showFilterBar() && isVisible"
     show-date-picker="showQueryBarTimePicker()"
     show-auto-refresh-only="!showQueryBarTimePicker()"
+    show-save-query="showSaveQuery"
     query="state.query"
-    saved-query="savedQuery"
     screen-title="state.vis.title"
-    on-query-submit="updateQueryAndFetch"
+    on-query-submit="updateQuery"
     index-patterns="[indexPattern]"
-    filters="filters"
-    on-filters-updated="onFiltersUpdated"
-    date-range-from="timeRange.from"
-    date-range-to="timeRange.to"
-    is-refresh-paused="refreshInterval.pause"
-    refresh-interval="refreshInterval.value"
-    on-refresh-change="onRefreshChange"
-    show-save-query="showSaveQuery"
-    on-saved="onQuerySaved"
-    on-saved-query-updated="onSavedQueryUpdated"
-    on-clear-saved-query="onClearSavedQuery"
   >
   </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
index 2a4fdeb4e4016..032839433e95d 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
@@ -19,7 +19,8 @@
 
 import angular from 'angular';
 import _ from 'lodash';
-import { Subscription } from 'rxjs';
+import { Subscription, Subject, merge } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { i18n } from '@kbn/i18n';
 
 import React from 'react';
@@ -92,12 +93,11 @@ function VisualizeAppController(
     chrome,
     getBasePath,
     core: { docLinks },
-    savedQueryService,
     uiSettings,
   } = getServices();
 
   const filterStateManager = new FilterStateManager(globalState, getAppState, filterManager);
-  const queryFilter = filterManager;
+  const $fetchObservable = new Subject();
   // Retrieve the resolved SavedVis instance.
   const savedVis = $route.current.locals.savedVis;
   const _applyVis = () => {
@@ -311,13 +311,6 @@ function VisualizeAppController(
     return appState;
   })();
 
-  $scope.filters = queryFilter.getFilters();
-
-  $scope.onFiltersUpdated = filters => {
-    // The filters will automatically be set when the queryFilter emits an update event (see below)
-    queryFilter.setFilters(filters);
-  };
-
   $scope.showSaveQuery = visualizeCapabilities.saveQuery;
 
   $scope.$watch(
@@ -340,7 +333,6 @@ function VisualizeAppController(
 
     $scope.searchSource = searchSource;
     $scope.state = $state;
-    $scope.refreshInterval = timefilter.getRefreshInterval();
 
     // Create a PersistedState instance.
     $scope.uiState = $state.makeStateful('uiState');
@@ -367,7 +359,6 @@ function VisualizeAppController(
       return vis.type.options.showTimePicker && hasTimeField;
     };
 
-    $scope.timeRange = timefilter.getTime();
     $scope.opts = _.pick($scope, 'savedVis', 'isAddToDashMode');
 
     stateMonitor = stateMonitorFactory.create($state, stateDefaults);
@@ -375,38 +366,24 @@ function VisualizeAppController(
       $appStatus.dirty = status.dirty || !savedVis.id;
     });
 
+    $scope.updateQuery = function({ query }) {
+      $state.query = query;
+      $fetchObservable.next();
+    };
+
     $scope.$watch('state.query', (newQuery, oldQuery) => {
       if (!_.isEqual(newQuery, oldQuery)) {
         const query = migrateLegacyQuery(newQuery);
         if (!_.isEqual(query, newQuery)) {
-          $state.query = query;
+          $scope.updateQuery({ query });
         }
-        $scope.fetch();
       }
     });
 
     $state.replace();
 
-    const updateTimeRange = () => {
-      $scope.timeRange = timefilter.getTime();
-      $scope.$broadcast('render');
-    };
-
     const subscriptions = new Subscription();
 
-    subscriptions.add(
-      subscribeWithScope($scope, timefilter.getRefreshIntervalUpdate$(), {
-        next: () => {
-          $scope.refreshInterval = timefilter.getRefreshInterval();
-        },
-      })
-    );
-    subscriptions.add(
-      subscribeWithScope($scope, timefilter.getTimeUpdate$(), {
-        next: updateTimeRange,
-      })
-    );
-
     subscriptions.add(
       chrome.getIsVisible$().subscribe(isVisible => {
         $scope.$evalAsync(() => {
@@ -420,28 +397,22 @@ function VisualizeAppController(
       $state.save();
       $scope.query = $state.query;
       savedVis.searchSource.setField('query', $state.query);
-      savedVis.searchSource.setField('filter', $state.filters);
-      $scope.$broadcast('render');
+      savedVis.searchSource.setField('filter', filterManager.getFilters());
     };
 
     // update the searchSource when filters update
-    subscriptions.add(
-      subscribeWithScope($scope, queryFilter.getUpdates$(), {
-        next: () => {
-          $scope.filters = queryFilter.getFilters();
-          $scope.globalFilters = queryFilter.getGlobalFilters();
-        },
-      })
-    );
-    subscriptions.add(
-      subscribeWithScope($scope, queryFilter.getFetches$(), {
-        next: $scope.fetch,
-      })
-    );
+
+    const searchBarChanges$ = merge(
+      timefilter.getAutoRefreshFetch$(),
+      timefilter.getFetch$(),
+      filterManager.getFetches$(),
+      $fetchObservable
+    ).pipe(debounceTime(100));
 
     subscriptions.add(
-      subscribeWithScope($scope, timefilter.getAutoRefreshFetch$(), {
+      subscribeWithScope($scope, searchBarChanges$, {
         next: () => {
+          $scope.fetch();
           $scope.vis.forceReload();
         },
       })
@@ -463,92 +434,6 @@ function VisualizeAppController(
     });
   }
 
-  $scope.updateQueryAndFetch = function({ query, dateRange }) {
-    const isUpdate =
-      (query && !_.isEqual(query, $state.query)) ||
-      (dateRange && !_.isEqual(dateRange, $scope.timeRange));
-
-    $state.query = query;
-    timefilter.setTime(dateRange);
-
-    // If nothing has changed, trigger the fetch manually, otherwise it will happen as a result of the changes
-    if (!isUpdate) {
-      $scope.vis.forceReload();
-    }
-  };
-
-  $scope.onRefreshChange = function({ isPaused, refreshInterval }) {
-    timefilter.setRefreshInterval({
-      pause: isPaused,
-      value: refreshInterval ? refreshInterval : $scope.refreshInterval.value,
-    });
-  };
-
-  $scope.onQuerySaved = savedQuery => {
-    $scope.savedQuery = savedQuery;
-  };
-
-  $scope.onSavedQueryUpdated = savedQuery => {
-    $scope.savedQuery = { ...savedQuery };
-  };
-
-  $scope.onClearSavedQuery = () => {
-    delete $scope.savedQuery;
-    delete $state.savedQuery;
-    $state.query = {
-      query: '',
-      language:
-        localStorage.get('kibana.userQueryLanguage') || uiSettings.get('search:queryLanguage'),
-    };
-    queryFilter.setFilters(queryFilter.getGlobalFilters());
-    $state.save();
-    $scope.fetch();
-  };
-
-  const updateStateFromSavedQuery = savedQuery => {
-    $state.query = savedQuery.attributes.query;
-    $state.save();
-
-    const savedQueryFilters = savedQuery.attributes.filters || [];
-    const globalFilters = queryFilter.getGlobalFilters();
-    queryFilter.setFilters([...globalFilters, ...savedQueryFilters]);
-
-    if (savedQuery.attributes.timefilter) {
-      timefilter.setTime({
-        from: savedQuery.attributes.timefilter.from,
-        to: savedQuery.attributes.timefilter.to,
-      });
-      if (savedQuery.attributes.timefilter.refreshInterval) {
-        timefilter.setRefreshInterval(savedQuery.attributes.timefilter.refreshInterval);
-      }
-    }
-
-    $scope.fetch();
-  };
-
-  $scope.$watch('savedQuery', newSavedQuery => {
-    if (!newSavedQuery) return;
-    $state.savedQuery = newSavedQuery.id;
-    $state.save();
-
-    updateStateFromSavedQuery(newSavedQuery);
-  });
-
-  $scope.$watch('state.savedQuery', newSavedQueryId => {
-    if (!newSavedQueryId) {
-      $scope.savedQuery = undefined;
-      return;
-    }
-    if (!$scope.savedQuery || newSavedQueryId !== $scope.savedQuery.id) {
-      savedQueryService.getSavedQuery(newSavedQueryId).then(savedQuery => {
-        $scope.$evalAsync(() => {
-          $scope.savedQuery = savedQuery;
-          updateStateFromSavedQuery(savedQuery);
-        });
-      });
-    }
-  });
-
   /**
    * Called when the user clicks "Save" button.
    */
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 9f3f61390848c..081ce2d186f12 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -36,14 +36,14 @@ export type StatefulSearchBarProps = SearchBarOwnProps & {
   appName: string;
 };
 
-const defaultFiltersUpdated = (query: QueryStart) => {
+const defaultFiltersUpdated = (queryService: QueryStart) => {
   return (filters: esFilters.Filter[]) => {
-    query.filterManager.setFilters(filters);
+    queryService.filterManager.setFilters(filters);
   };
 };
 
-const defaultOnRefreshChange = (query: QueryStart) => {
-  const { timefilter } = query.timefilter;
+const defaultOnRefreshChange = (queryService: QueryStart) => {
+  const { timefilter } = queryService.timefilter;
   return (options: { isPaused: boolean; refreshInterval: number }) => {
     timefilter.setRefreshInterval({
       value: options.refreshInterval,
@@ -54,27 +54,31 @@ const defaultOnRefreshChange = (query: QueryStart) => {
 
 const defaultOnQuerySubmit = (
   props: StatefulSearchBarProps,
-  query: QueryStart,
+  queryService: QueryStart,
+  currentQuery: Query,
   setQueryStringState: Function
 ) => {
-  const { timefilter } = query.timefilter;
+  const { timefilter } = queryService.timefilter;
 
   return (payload: { dateRange: TimeRange; query?: Query }) => {
+    const isUpdate =
+      !_.isEqual(timefilter.getTime(), payload.dateRange) ||
+      !_.isEqual(payload.query, currentQuery);
     timefilter.setTime(payload.dateRange);
     setQueryStringState(payload.query);
 
-    if (props.onQuerySubmit) props.onQuerySubmit(payload);
+    if (props.onQuerySubmit && isUpdate) props.onQuerySubmit(payload);
   };
 };
 
 const defaultOnClearSavedQuery = (
   props: StatefulSearchBarProps,
   uiSettings: CoreStart['uiSettings'],
-  query: QueryStart,
+  queryService: QueryStart,
   setQueryStringState: Function
 ) => {
   return () => {
-    query.filterManager.removeAll();
+    queryService.filterManager.removeAll();
     setQueryStringState({
       query: '',
       language: uiSettings.get('search:queryLanguage'),
@@ -86,11 +90,11 @@ const defaultOnClearSavedQuery = (
 
 const populateStateFromSavedQuery = (
   props: StatefulSearchBarProps,
-  query: QueryStart,
+  queryService: QueryStart,
   savedQuery: SavedQuery,
   setQueryStringState: Function
 ) => {
-  const { timefilter } = query.timefilter;
+  const { timefilter } = queryService.timefilter;
   // timefilter
   if (savedQuery.attributes.timefilter) {
     timefilter.setTime({
@@ -109,28 +113,28 @@ const populateStateFromSavedQuery = (
 
   // filters
   const savedQueryFilters = savedQuery.attributes.filters || [];
-  const globalFilters = query.filterManager.getGlobalFilters();
-  query.filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
+  const globalFilters = queryService.filterManager.getGlobalFilters();
+  queryService.filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
 };
 
 const defaultOnSavedQueryUpdated = (
   props: StatefulSearchBarProps,
-  query: QueryStart,
+  queryService: QueryStart,
   setQueryStringState: Function
 ) => {
   return (savedQuery: SavedQuery) => {
-    populateStateFromSavedQuery(props, query, savedQuery, setQueryStringState);
+    populateStateFromSavedQuery(props, queryService, savedQuery, setQueryStringState);
     if (props.onSavedQueryUpdated) props.onSavedQueryUpdated(savedQuery);
   };
 };
 
 const defaultOnQuerySaved = (
   props: StatefulSearchBarProps,
-  query: QueryStart,
+  queryService: QueryStart,
   setQueryStringState: Function
 ) => {
   return (savedQuery: SavedQuery) => {
-    populateStateFromSavedQuery(props, query, savedQuery, setQueryStringState);
+    populateStateFromSavedQuery(props, queryService, savedQuery, setQueryStringState);
     if (props.onSaved) props.onSaved(savedQuery);
   };
 };
@@ -207,7 +211,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           query={query}
           onFiltersUpdated={defaultFiltersUpdated(data.query)}
           onRefreshChange={defaultOnRefreshChange(data.query)}
-          onQuerySubmit={defaultOnQuerySubmit(props, data.query, setQuery)}
+          onQuerySubmit={defaultOnQuerySubmit(props, data.query, query, setQuery)}
           onClearSavedQuery={defaultOnClearSavedQuery(props, core.uiSettings, data.query, setQuery)}
           onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, data.query, setQuery)}
           onSaved={defaultOnQuerySaved(props, data.query, setQuery)}

From 732cb7d63cc096846ca3ed6add47010820f22733 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 28 Jan 2020 17:35:22 +0200
Subject: [PATCH 03/29] Clean up dashboard

---
 .../dashboard/np_ready/dashboard_app.html     |  16 +--
 .../dashboard/np_ready/dashboard_app.tsx      |  12 --
 .../np_ready/dashboard_app_controller.tsx     | 107 ++----------------
 .../np_ready/angular/context_app.html         |   4 +-
 .../visualize/np_ready/editor/editor.html     |   3 +-
 .../ui/search_bar/create_search_bar.tsx       |  19 +++-
 6 files changed, 25 insertions(+), 136 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
index 3cf8932958b6d..30382f460cd4c 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
@@ -13,20 +13,9 @@
     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">
+    index-patterns="indexPatterns">
   </kbn-top-nav>
 
   <!--
@@ -41,10 +30,9 @@
     show-filter-bar="true"
     show-save-query="false"
     show-date-picker="false"
+    show-query-bar="false"
 
-    filters="model.filters"
     index-patterns="indexPatterns"
-    on-filters-updated="onFiltersUpdated"
   >
   </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
index 367db6644ff57..365f4807cbd2d 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
@@ -51,7 +51,6 @@ export interface DashboardAppScope extends ng.IScope {
       | { to: string | moment.Moment | undefined; from: string | moment.Moment | undefined };
     refreshInterval: any;
   };
-  savedQuery?: SavedQuery;
   refreshInterval: any;
   panels: SavedDashboardPanel[];
   indexPatterns: IIndexPattern[];
@@ -60,19 +59,8 @@ 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: esFilters.Filter[]) => void;
   onCancelApplyFilters: () => void;
   onApplyFilters: (filters: esFilters.Filter[]) => void;
-  onQuerySaved: (savedQuery: SavedQuery) => void;
-  onSavedQueryUpdated: (savedQuery: SavedQuery) => void;
-  onClearSavedQuery: () => void;
   topNavMenu: any;
   showFilterBar: () => boolean;
   showAddPanel: any;
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
index e85054cd7fb34..997109d2486df 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
@@ -40,7 +40,6 @@ import {
   IndexPattern,
   IndexPatternsContract,
   Query,
-  SavedQuery,
   syncAppFilters,
   syncQuery,
 } from '../../../../../../plugins/data/public';
@@ -114,7 +113,6 @@ export class DashboardAppController {
     kbnUrlStateStorage,
   }: DashboardAppControllerDependencies) {
     const filterManager = queryService.filterManager;
-    const queryFilter = filterManager;
     const timefilter = queryService.timefilter.timefilter;
 
     // starts syncing `_g` portion of url with query services
@@ -235,7 +233,7 @@ export class DashboardAppController {
       const isEmptyInReadonlyMode = getIsEmptyInReadonlyMode();
       return {
         id: dashboardStateManager.savedDashboard.id || '',
-        filters: queryFilter.getFilters(),
+        filters: filterManager.getFilters(),
         hidePanelTitles: dashboardStateManager.getHidePanelTitles(),
         query: $scope.model.query,
         timeRange: {
@@ -259,7 +257,7 @@ export class DashboardAppController {
       // https://github.com/angular/angular.js/wiki/Understanding-Scopes
       $scope.model = {
         query: dashboardStateManager.getQuery(),
-        filters: queryFilter.getFilters(),
+        filters: filterManager.getFilters(),
         timeRestore: dashboardStateManager.getTimeRestore(),
         title: dashboardStateManager.getTitle(),
         description: dashboardStateManager.getDescription(),
@@ -313,12 +311,12 @@ export class DashboardAppController {
             if (
               !compareFilters(
                 container.getInput().filters,
-                queryFilter.getFilters(),
+                filterManager.getFilters(),
                 COMPARE_ALL_OPTIONS
               )
             ) {
               // Add filters modifies the object passed to it, hence the clone deep.
-              queryFilter.addFilters(_.cloneDeep(container.getInput().filters));
+              filterManager.addFilters(_.cloneDeep(container.getInput().filters));
 
               dashboardStateManager.applyFilters($scope.model.query, container.getInput().filters);
               dirty = true;
@@ -371,7 +369,7 @@ export class DashboardAppController {
         language:
           localStorage.get('kibana.userQueryLanguage') || config.get('search:queryLanguage'),
       },
-      queryFilter.getFilters()
+      filterManager.getFilters()
     );
 
     timefilter.disableTimeRangeSelector();
@@ -442,10 +440,6 @@ export class DashboardAppController {
     };
 
     $scope.updateQueryAndFetch = function({ query, dateRange }) {
-      if (dateRange) {
-        timefilter.setTime(dateRange);
-      }
-
       const oldQuery = $scope.model.query;
       if (_.isEqual(oldQuery, query)) {
         // The user can still request a reload in the query bar, even if the
@@ -459,93 +453,6 @@ 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') || config.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];
-
-      dashboardStateManager.applyFilters(savedQuery.attributes.query, allFilters);
-      if (savedQuery.attributes.timefilter) {
-        timefilter.setTime({
-          from: savedQuery.attributes.timefilter.from,
-          to: savedQuery.attributes.timefilter.to,
-        });
-        if (savedQuery.attributes.timefilter.refreshInterval) {
-          timefilter.setRefreshInterval(savedQuery.attributes.timefilter.refreshInterval);
-        }
-      }
-      // Making this method sync broke the updates.
-      // Temporary fix, until we fix the complex state in this file.
-      setTimeout(() => {
-        queryFilter.setFilters(allFilters);
-      }, 0);
-    };
-
-    $scope.$watch('savedQuery', (newSavedQuery: SavedQuery) => {
-      if (!newSavedQuery) return;
-      dashboardStateManager.setSavedQueryId(newSavedQuery.id);
-
-      updateStateFromSavedQuery(newSavedQuery);
-    });
-
-    $scope.$watch(
-      () => {
-        return dashboardStateManager.getSavedQueryId();
-      },
-      newSavedQueryId => {
-        if (!newSavedQueryId) {
-          $scope.savedQuery = undefined;
-          return;
-        }
-        if (!$scope.savedQuery || newSavedQueryId !== $scope.savedQuery.id) {
-          savedQueryService.getSavedQuery(newSavedQueryId).then((savedQuery: SavedQuery) => {
-            $scope.$evalAsync(() => {
-              $scope.savedQuery = savedQuery;
-              updateStateFromSavedQuery(savedQuery);
-            });
-          });
-        }
-      }
-    );
-
     $scope.indexPatterns = [];
 
     $scope.$watch('model.query', (newQuery: Query) => {
@@ -859,9 +766,9 @@ export class DashboardAppController {
     updateViewMode(dashboardStateManager.getViewMode());
 
     // update root source when filters update
-    const updateSubscription = queryFilter.getUpdates$().subscribe({
+    const updateSubscription = filterManager.getUpdates$().subscribe({
       next: () => {
-        $scope.model.filters = queryFilter.getFilters();
+        $scope.model.filters = filterManager.getFilters();
         dashboardStateManager.applyFilters($scope.model.query, $scope.model.filters);
         if (dashboardContainer) {
           dashboardContainer.updateInput({ filters: $scope.model.filters });
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
index 3e0f8a8329154..2741408be56c3 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
@@ -4,9 +4,7 @@
   show-filter-bar="true"
   show-save-query="false"
   show-date-picker="false"
-
-  filters="contextApp.state.queryParameters.filters"
-  on-filters-updated="contextApp.actions.updateFilters"
+  
   index-patterns="[contextApp.indexPattern]"
 >
 </kbn-top-nav>
diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
index 15b0cead96b3b..1454c789b3dd0 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
@@ -59,12 +59,11 @@
 
     app-name="'visualize'"
     show-search-bar="true"
+    show-query-bar="false"
     show-filter-bar="true"
     show-save-query="false"
     show-date-picker="false"
 
-    filters="filters"
-    on-filters-updated="onFiltersUpdated"
     index-patterns="[indexPattern]"
   >
   </kbn-top-nav>
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 081ce2d186f12..3fd2505a04d7c 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -148,10 +148,12 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
     const fmFilters = filterManager.getFilters();
     const [refreshInterval, setRefreshInterval] = useState(tfRefreshInterval.value);
     const [refreshPaused, setRefreshPaused] = useState(tfRefreshInterval.pause);
-    const [query, setQuery] = useState<Query>({
-      query: props.query?.query || '',
-      language: props.query?.language || core.uiSettings.get('search:queryLanguage'),
-    });
+    const [query, setQuery] = useState<Query>(
+      props.query || {
+        query: '',
+        language: core.uiSettings.get('search:queryLanguage'),
+      }
+    );
 
     const [filters, setFilters] = useState(fmFilters);
 
@@ -201,7 +203,14 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
         }}
       >
         <SearchBar
-          {...props}
+          showAutoRefreshOnly={props.showAutoRefreshOnly}
+          showDatePicker={props.showDatePicker}
+          showFilterBar={props.showFilterBar}
+          showQueryBar={props.showQueryBar}
+          showQueryInput={props.showQueryInput}
+          showSaveQuery={props.showSaveQuery}
+          screenTitle={props.screenTitle}
+          indexPatterns={props.indexPatterns}
           timeHistory={timefilter.history}
           dateRangeFrom={timeRange.from}
           dateRangeTo={timeRange.to}

From 72bb93c46f900def2f1fa6c19e8ee61da78d73b5 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 28 Jan 2020 18:41:44 +0200
Subject: [PATCH 04/29] use-default-behaviors

---
 .../public/dashboard/np_ready/dashboard_app.html      |  7 +++++--
 .../public/discover/np_ready/angular/context_app.html |  1 +
 .../public/discover/np_ready/angular/discover.html    |  2 ++
 .../public/visualize/np_ready/editor/editor.html      |  3 +++
 src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js       |  3 +++
 .../data/public/ui/search_bar/create_search_bar.tsx   | 11 +++++++++++
 6 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
index 30382f460cd4c..5c9584172c483 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
@@ -15,7 +15,9 @@
     query="model.query"
     screen-title="screenTitle"
     on-query-submit="updateQueryAndFetch"
-    index-patterns="indexPatterns">
+    index-patterns="indexPatterns"
+    use-default-behaviors="true"
+  >
   </kbn-top-nav>
 
   <!--
@@ -31,8 +33,9 @@
     show-save-query="false"
     show-date-picker="false"
     show-query-bar="false"
-
     index-patterns="indexPatterns"
+    
+    use-default-behaviors="true"
   >
   </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
index 2741408be56c3..2e04cae9220f6 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
@@ -6,6 +6,7 @@
   show-date-picker="false"
   
   index-patterns="[contextApp.indexPattern]"
+  use-default-behaviors="true"
 >
 </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
index 1276b9ed23970..abd7b93479db8 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
@@ -12,6 +12,8 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
     on-query-submit="updateQuery"
     index-patterns="[indexPattern]"
     query="state.query"
+
+    use-default-behaviors="true"
   >
   </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
index 1454c789b3dd0..8687b912bd90b 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
@@ -47,6 +47,8 @@
     screen-title="state.vis.title"
     on-query-submit="updateQuery"
     index-patterns="[indexPattern]"
+
+    use-default-behaviors="true"
   >
   </kbn-top-nav>
 
@@ -65,6 +67,7 @@
     show-date-picker="false"
 
     index-patterns="[indexPattern]"
+    use-default-behaviors="true"
   >
   </kbn-top-nav>
 
diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
index 0788afd5f74eb..2e249ff019636 100644
--- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
+++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -113,6 +113,9 @@ export const createTopNavHelper = ({ TopNavMenu }) => reactDirective => {
     'refreshInterval',
     'disableAutoFocus',
     'showAutoRefreshOnly',
+
+    // temporary flag to use the stateful components  
+    'useDefaultBehaviors',
   ]);
 };
 
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 3fd2505a04d7c..52fc8d44ead7b 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -34,6 +34,7 @@ interface StatefulSearchBarDeps {
 
 export type StatefulSearchBarProps = SearchBarOwnProps & {
   appName: string;
+  useDefaultBehaviors?: boolean;
 };
 
 const defaultFiltersUpdated = (queryService: QueryStart) => {
@@ -58,6 +59,8 @@ const defaultOnQuerySubmit = (
   currentQuery: Query,
   setQueryStringState: Function
 ) => {
+  if (!props.useDefaultBehaviors) return props.onQuerySubmit;
+
   const { timefilter } = queryService.timefilter;
 
   return (payload: { dateRange: TimeRange; query?: Query }) => {
@@ -77,6 +80,7 @@ const defaultOnClearSavedQuery = (
   queryService: QueryStart,
   setQueryStringState: Function
 ) => {
+  if (!props.useDefaultBehaviors) return props.onClearSavedQuery;
   return () => {
     queryService.filterManager.removeAll();
     setQueryStringState({
@@ -122,6 +126,7 @@ const defaultOnSavedQueryUpdated = (
   queryService: QueryStart,
   setQueryStringState: Function
 ) => {
+  if (!props.useDefaultBehaviors) return props.onSavedQueryUpdated;
   return (savedQuery: SavedQuery) => {
     populateStateFromSavedQuery(props, queryService, savedQuery, setQueryStringState);
     if (props.onSavedQueryUpdated) props.onSavedQueryUpdated(savedQuery);
@@ -133,12 +138,17 @@ const defaultOnQuerySaved = (
   queryService: QueryStart,
   setQueryStringState: Function
 ) => {
+  if (!props.useDefaultBehaviors) return props.onSaved;
   return (savedQuery: SavedQuery) => {
     populateStateFromSavedQuery(props, queryService, savedQuery, setQueryStringState);
     if (props.onSaved) props.onSaved(savedQuery);
   };
 };
 
+const overrideDefaultBehaviors = (props: StatefulSearchBarProps) => {
+  return props.useDefaultBehaviors ? {} : props;
+};
+
 export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps) {
   // App name should come from the core application service.
   // Until it's available, we'll ask the user to provide it for the pre-wired component.
@@ -224,6 +234,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           onClearSavedQuery={defaultOnClearSavedQuery(props, core.uiSettings, data.query, setQuery)}
           onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, data.query, setQuery)}
           onSaved={defaultOnQuerySaved(props, data.query, setQuery)}
+          {...overrideDefaultBehaviors(props)}
         />
       </KibanaContextProvider>
     );

From a0baceade58ad710816ab64596aadc55d373bbce Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 28 Jan 2020 18:42:11 +0200
Subject: [PATCH 05/29] ts

---
 src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
index 2e249ff019636..d80db53c99cb8 100644
--- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
+++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -114,7 +114,7 @@ export const createTopNavHelper = ({ TopNavMenu }) => reactDirective => {
     'disableAutoFocus',
     'showAutoRefreshOnly',
 
-    // temporary flag to use the stateful components  
+    // temporary flag to use the stateful components
     'useDefaultBehaviors',
   ]);
 };

From 002e8d84d3a130ad67e78973afc0cd9557f1b383 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Wed, 29 Jan 2020 12:29:05 +0200
Subject: [PATCH 06/29] Discover interval changing

---
 .../kibana/public/discover/np_ready/angular/discover.js     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
index f6bc02c65a576..ebe0e63addd09 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
@@ -632,6 +632,12 @@ function discoverController(
         $scope.enableTimeRangeSelector = !!timefield;
       });
 
+      $scope.$watch('state.interval', function(newInterval, oldInterval) {
+        if (newInterval !== oldInterval) {
+          $fetchObservable.next();
+        }
+      });
+
       $scope.$watch('vis.aggs', function() {
         // no timefield, no vis, nothing to update
         if (!$scope.opts.timefield) return;

From fa8406030126624e08660a13d5d0b6add62291b4 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Wed, 29 Jan 2020 13:01:57 +0200
Subject: [PATCH 07/29] timerange for interval definition in editor

---
 .../kibana/public/visualize/np_ready/editor/editor.js           | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
index 032839433e95d..a468fbd5bbd39 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
@@ -359,6 +359,7 @@ function VisualizeAppController(
       return vis.type.options.showTimePicker && hasTimeField;
     };
 
+    $scope.timeRange = timefilter.getTime();
     $scope.opts = _.pick($scope, 'savedVis', 'isAddToDashMode');
 
     stateMonitor = stateMonitorFactory.create($state, stateDefaults);
@@ -395,6 +396,7 @@ function VisualizeAppController(
     // update the searchSource when query updates
     $scope.fetch = function() {
       $state.save();
+      $scope.timeRange = timefilter.getTime();
       $scope.query = $state.query;
       savedVis.searchSource.setField('query', $state.query);
       savedVis.searchSource.setField('filter', filterManager.getFilters());

From 62e54dab408b8387158adef357dfbb645d5f7dc5 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Wed, 29 Jan 2020 13:04:12 +0200
Subject: [PATCH 08/29] ts

---
 .../kibana/public/dashboard/np_ready/dashboard_app.tsx    | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
index 365f4807cbd2d..484a8e6b25f3e 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
@@ -25,13 +25,7 @@ import { IInjector } from '../legacy_imports';
 import { ViewMode } from '../../../../embeddable_api/public/np_ready/public';
 import { SavedObjectDashboard } from '../saved_dashboard/saved_dashboard';
 import { DashboardAppState, SavedDashboardPanel, ConfirmModalFn } from './types';
-import {
-  IIndexPattern,
-  TimeRange,
-  Query,
-  esFilters,
-  SavedQuery,
-} from '../../../../../../plugins/data/public';
+import { IIndexPattern, TimeRange, Query, esFilters } from '../../../../../../plugins/data/public';
 
 import { DashboardAppController } from './dashboard_app_controller';
 import { RenderDeps } from './application';

From 469f41ccdf8e513ee79dfb37cc7909aef2c32c82 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Wed, 29 Jan 2020 13:40:09 +0200
Subject: [PATCH 09/29] Revert most of changes to dashboard app because of
 changes in #55443

---
 .../dashboard/np_ready/dashboard_app.html     | 21 ++++-
 .../dashboard/np_ready/dashboard_app.tsx      | 20 +++-
 .../np_ready/dashboard_app_controller.tsx     | 92 +++++++++++++++++++
 3 files changed, 127 insertions(+), 6 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
index 5c9584172c483..cc11ca4100020 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
@@ -13,11 +13,22 @@
     show-save-query="showSaveQuery"
 
     query="model.query"
+    saved-query="savedQuery"
     screen-title="screenTitle"
     on-query-submit="updateQueryAndFetch"
-    index-patterns="indexPatterns"
-    use-default-behaviors="true"
+    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>
 
   <!--
@@ -32,10 +43,10 @@
     show-filter-bar="true"
     show-save-query="false"
     show-date-picker="false"
-    show-query-bar="false"
+
+    filters="model.filters"
     index-patterns="indexPatterns"
-    
-    use-default-behaviors="true"
+    on-filters-updated="onFiltersUpdated"
   >
   </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
index 484a8e6b25f3e..367db6644ff57 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
@@ -25,7 +25,13 @@ import { IInjector } from '../legacy_imports';
 import { ViewMode } from '../../../../embeddable_api/public/np_ready/public';
 import { SavedObjectDashboard } from '../saved_dashboard/saved_dashboard';
 import { DashboardAppState, SavedDashboardPanel, ConfirmModalFn } from './types';
-import { IIndexPattern, TimeRange, Query, esFilters } from '../../../../../../plugins/data/public';
+import {
+  IIndexPattern,
+  TimeRange,
+  Query,
+  esFilters,
+  SavedQuery,
+} from '../../../../../../plugins/data/public';
 
 import { DashboardAppController } from './dashboard_app_controller';
 import { RenderDeps } from './application';
@@ -45,6 +51,7 @@ export interface DashboardAppScope extends ng.IScope {
       | { to: string | moment.Moment | undefined; from: string | moment.Moment | undefined };
     refreshInterval: any;
   };
+  savedQuery?: SavedQuery;
   refreshInterval: any;
   panels: SavedDashboardPanel[];
   indexPatterns: IIndexPattern[];
@@ -53,8 +60,19 @@ 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: esFilters.Filter[]) => void;
   onCancelApplyFilters: () => void;
   onApplyFilters: (filters: esFilters.Filter[]) => void;
+  onQuerySaved: (savedQuery: SavedQuery) => void;
+  onSavedQueryUpdated: (savedQuery: SavedQuery) => void;
+  onClearSavedQuery: () => void;
   topNavMenu: any;
   showFilterBar: () => boolean;
   showAddPanel: any;
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
index 997109d2486df..4d44490a09ecc 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
@@ -40,6 +40,7 @@ import {
   IndexPattern,
   IndexPatternsContract,
   Query,
+  SavedQuery,
   syncAppFilters,
   syncQuery,
 } from '../../../../../../plugins/data/public';
@@ -440,6 +441,10 @@ export class DashboardAppController {
     };
 
     $scope.updateQueryAndFetch = function({ query, dateRange }) {
+      if (dateRange) {
+        timefilter.setTime(dateRange);
+      }
+
       const oldQuery = $scope.model.query;
       if (_.isEqual(oldQuery, query)) {
         // The user can still request a reload in the query bar, even if the
@@ -453,6 +458,93 @@ 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 filterManager emits an update event (see below)
+      filterManager.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') || config.get('search:queryLanguage'),
+        },
+        filterManager.getGlobalFilters()
+      );
+      // Making this method sync broke the updates.
+      // Temporary fix, until we fix the complex state in this file.
+      setTimeout(() => {
+        filterManager.setFilters(filterManager.getGlobalFilters());
+      }, 0);
+    };
+
+    const updateStateFromSavedQuery = (savedQuery: SavedQuery) => {
+      const savedQueryFilters = savedQuery.attributes.filters || [];
+      const globalFilters = filterManager.getGlobalFilters();
+      const allFilters = [...globalFilters, ...savedQueryFilters];
+
+      dashboardStateManager.applyFilters(savedQuery.attributes.query, allFilters);
+      if (savedQuery.attributes.timefilter) {
+        timefilter.setTime({
+          from: savedQuery.attributes.timefilter.from,
+          to: savedQuery.attributes.timefilter.to,
+        });
+        if (savedQuery.attributes.timefilter.refreshInterval) {
+          timefilter.setRefreshInterval(savedQuery.attributes.timefilter.refreshInterval);
+        }
+      }
+      // Making this method sync broke the updates.
+      // Temporary fix, until we fix the complex state in this file.
+      setTimeout(() => {
+        filterManager.setFilters(allFilters);
+      }, 0);
+    };
+
+    $scope.$watch('savedQuery', (newSavedQuery: SavedQuery) => {
+      if (!newSavedQuery) return;
+      dashboardStateManager.setSavedQueryId(newSavedQuery.id);
+
+      updateStateFromSavedQuery(newSavedQuery);
+    });
+
+    $scope.$watch(
+      () => {
+        return dashboardStateManager.getSavedQueryId();
+      },
+      newSavedQueryId => {
+        if (!newSavedQueryId) {
+          $scope.savedQuery = undefined;
+          return;
+        }
+        if (!$scope.savedQuery || newSavedQueryId !== $scope.savedQuery.id) {
+          savedQueryService.getSavedQuery(newSavedQueryId).then((savedQuery: SavedQuery) => {
+            $scope.$evalAsync(() => {
+              $scope.savedQuery = savedQuery;
+              updateStateFromSavedQuery(savedQuery);
+            });
+          });
+        }
+      }
+    );
+
     $scope.indexPatterns = [];
 
     $scope.$watch('model.query', (newQuery: Query) => {

From bf99672ec6c0d7426c5f00f06395ce66ae6bebba Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Wed, 29 Jan 2020 13:42:09 +0200
Subject: [PATCH 10/29] Fix spaces

---
 .../dashboard/np_ready/dashboard_app.html     | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
index cc11ca4100020..f1b925fb0a255 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
@@ -16,18 +16,17 @@
     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"
-  >
+    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>
 

From 858fa02860402cca8a5a2f253b481d0930bf1475 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Wed, 29 Jan 2020 14:33:14 +0200
Subject: [PATCH 11/29] Revert editor to scope PR!

---
 .../visualize/np_ready/editor/editor.html     |  21 ++-
 .../visualize/np_ready/editor/editor.js       | 152 +++++++++++++++---
 2 files changed, 147 insertions(+), 26 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
index 8687b912bd90b..6190b92c9be3e 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html
@@ -42,13 +42,22 @@
     show-filter-bar="showFilterBar() && isVisible"
     show-date-picker="showQueryBarTimePicker()"
     show-auto-refresh-only="!showQueryBarTimePicker()"
-    show-save-query="showSaveQuery"
     query="state.query"
+    saved-query="savedQuery"
     screen-title="state.vis.title"
-    on-query-submit="updateQuery"
+    on-query-submit="updateQueryAndFetch"
     index-patterns="[indexPattern]"
-
-    use-default-behaviors="true"
+    filters="filters"
+    on-filters-updated="onFiltersUpdated"
+    date-range-from="timeRange.from"
+    date-range-to="timeRange.to"
+    is-refresh-paused="refreshInterval.pause"
+    refresh-interval="refreshInterval.value"
+    on-refresh-change="onRefreshChange"
+    show-save-query="showSaveQuery"
+    on-saved="onQuerySaved"
+    on-saved-query-updated="onSavedQueryUpdated"
+    on-clear-saved-query="onClearSavedQuery"
   >
   </kbn-top-nav>
 
@@ -61,13 +70,13 @@
 
     app-name="'visualize'"
     show-search-bar="true"
-    show-query-bar="false"
     show-filter-bar="true"
     show-save-query="false"
     show-date-picker="false"
 
+    filters="filters"
+    on-filters-updated="onFiltersUpdated"
     index-patterns="[indexPattern]"
-    use-default-behaviors="true"
   >
   </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
index a468fbd5bbd39..f90a082186741 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
@@ -19,8 +19,7 @@
 
 import angular from 'angular';
 import _ from 'lodash';
-import { Subscription, Subject, merge } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 import { i18n } from '@kbn/i18n';
 
 import React from 'react';
@@ -93,11 +92,11 @@ function VisualizeAppController(
     chrome,
     getBasePath,
     core: { docLinks },
+    savedQueryService,
     uiSettings,
   } = getServices();
 
   const filterStateManager = new FilterStateManager(globalState, getAppState, filterManager);
-  const $fetchObservable = new Subject();
   // Retrieve the resolved SavedVis instance.
   const savedVis = $route.current.locals.savedVis;
   const _applyVis = () => {
@@ -311,6 +310,13 @@ function VisualizeAppController(
     return appState;
   })();
 
+  $scope.filters = filterManager.getFilters();
+
+  $scope.onFiltersUpdated = filters => {
+    // The filters will automatically be set when the filterManager emits an update event (see below)
+    filterManager.setFilters(filters);
+  };
+
   $scope.showSaveQuery = visualizeCapabilities.saveQuery;
 
   $scope.$watch(
@@ -333,6 +339,7 @@ function VisualizeAppController(
 
     $scope.searchSource = searchSource;
     $scope.state = $state;
+    $scope.refreshInterval = timefilter.getRefreshInterval();
 
     // Create a PersistedState instance.
     $scope.uiState = $state.makeStateful('uiState');
@@ -367,24 +374,38 @@ function VisualizeAppController(
       $appStatus.dirty = status.dirty || !savedVis.id;
     });
 
-    $scope.updateQuery = function({ query }) {
-      $state.query = query;
-      $fetchObservable.next();
-    };
-
     $scope.$watch('state.query', (newQuery, oldQuery) => {
       if (!_.isEqual(newQuery, oldQuery)) {
         const query = migrateLegacyQuery(newQuery);
         if (!_.isEqual(query, newQuery)) {
-          $scope.updateQuery({ query });
+          $state.query = query;
         }
+        $scope.fetch();
       }
     });
 
     $state.replace();
 
+    const updateTimeRange = () => {
+      $scope.timeRange = timefilter.getTime();
+      $scope.$broadcast('render');
+    };
+
     const subscriptions = new Subscription();
 
+    subscriptions.add(
+      subscribeWithScope($scope, timefilter.getRefreshIntervalUpdate$(), {
+        next: () => {
+          $scope.refreshInterval = timefilter.getRefreshInterval();
+        },
+      })
+    );
+    subscriptions.add(
+      subscribeWithScope($scope, timefilter.getTimeUpdate$(), {
+        next: updateTimeRange,
+      })
+    );
+
     subscriptions.add(
       chrome.getIsVisible$().subscribe(isVisible => {
         $scope.$evalAsync(() => {
@@ -396,25 +417,30 @@ function VisualizeAppController(
     // update the searchSource when query updates
     $scope.fetch = function() {
       $state.save();
-      $scope.timeRange = timefilter.getTime();
       $scope.query = $state.query;
       savedVis.searchSource.setField('query', $state.query);
-      savedVis.searchSource.setField('filter', filterManager.getFilters());
+      savedVis.searchSource.setField('filter', $state.filters);
+      $scope.$broadcast('render');
     };
 
     // update the searchSource when filters update
-
-    const searchBarChanges$ = merge(
-      timefilter.getAutoRefreshFetch$(),
-      timefilter.getFetch$(),
-      filterManager.getFetches$(),
-      $fetchObservable
-    ).pipe(debounceTime(100));
+    subscriptions.add(
+      subscribeWithScope($scope, filterManager.getUpdates$(), {
+        next: () => {
+          $scope.filters = filterManager.getFilters();
+          $scope.globalFilters = filterManager.getGlobalFilters();
+        },
+      })
+    );
+    subscriptions.add(
+      subscribeWithScope($scope, filterManager.getFetches$(), {
+        next: $scope.fetch,
+      })
+    );
 
     subscriptions.add(
-      subscribeWithScope($scope, searchBarChanges$, {
+      subscribeWithScope($scope, timefilter.getAutoRefreshFetch$(), {
         next: () => {
-          $scope.fetch();
           $scope.vis.forceReload();
         },
       })
@@ -436,6 +462,92 @@ function VisualizeAppController(
     });
   }
 
+  $scope.filterManagerAndFetch = function({ query, dateRange }) {
+    const isUpdate =
+      (query && !_.isEqual(query, $state.query)) ||
+      (dateRange && !_.isEqual(dateRange, $scope.timeRange));
+
+    $state.query = query;
+    timefilter.setTime(dateRange);
+
+    // If nothing has changed, trigger the fetch manually, otherwise it will happen as a result of the changes
+    if (!isUpdate) {
+      $scope.vis.forceReload();
+    }
+  };
+
+  $scope.onRefreshChange = function({ isPaused, refreshInterval }) {
+    timefilter.setRefreshInterval({
+      pause: isPaused,
+      value: refreshInterval ? refreshInterval : $scope.refreshInterval.value,
+    });
+  };
+
+  $scope.onQuerySaved = savedQuery => {
+    $scope.savedQuery = savedQuery;
+  };
+
+  $scope.onSavedQueryUpdated = savedQuery => {
+    $scope.savedQuery = { ...savedQuery };
+  };
+
+  $scope.onClearSavedQuery = () => {
+    delete $scope.savedQuery;
+    delete $state.savedQuery;
+    $state.query = {
+      query: '',
+      language:
+        localStorage.get('kibana.userQueryLanguage') || uiSettings.get('search:queryLanguage'),
+    };
+    filterManager.setFilters(filterManager.getGlobalFilters());
+    $state.save();
+    $scope.fetch();
+  };
+
+  const updateStateFromSavedQuery = savedQuery => {
+    $state.query = savedQuery.attributes.query;
+    $state.save();
+
+    const savedQueryFilters = savedQuery.attributes.filters || [];
+    const globalFilters = filterManager.getGlobalFilters();
+    filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
+
+    if (savedQuery.attributes.timefilter) {
+      timefilter.setTime({
+        from: savedQuery.attributes.timefilter.from,
+        to: savedQuery.attributes.timefilter.to,
+      });
+      if (savedQuery.attributes.timefilter.refreshInterval) {
+        timefilter.setRefreshInterval(savedQuery.attributes.timefilter.refreshInterval);
+      }
+    }
+
+    $scope.fetch();
+  };
+
+  $scope.$watch('savedQuery', newSavedQuery => {
+    if (!newSavedQuery) return;
+    $state.savedQuery = newSavedQuery.id;
+    $state.save();
+
+    updateStateFromSavedQuery(newSavedQuery);
+  });
+
+  $scope.$watch('state.savedQuery', newSavedQueryId => {
+    if (!newSavedQueryId) {
+      $scope.savedQuery = undefined;
+      return;
+    }
+    if (!$scope.savedQuery || newSavedQueryId !== $scope.savedQuery.id) {
+      savedQueryService.getSavedQuery(newSavedQueryId).then(savedQuery => {
+        $scope.$evalAsync(() => {
+          $scope.savedQuery = savedQuery;
+          updateStateFromSavedQuery(savedQuery);
+        });
+      });
+    }
+  });
+
   /**
    * Called when the user clicks "Save" button.
    */

From 3ab4d268b6cc261d23276d4ee71b11203c96dedb Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Wed, 29 Jan 2020 14:35:06 +0200
Subject: [PATCH 12/29] typo

---
 .../kibana/public/visualize/np_ready/editor/editor.js           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
index f90a082186741..623bad251648f 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.js
@@ -462,7 +462,7 @@ function VisualizeAppController(
     });
   }
 
-  $scope.filterManagerAndFetch = function({ query, dateRange }) {
+  $scope.updateQueryAndFetch = function({ query, dateRange }) {
     const isUpdate =
       (query && !_.isEqual(query, $state.query)) ||
       (dateRange && !_.isEqual(dateRange, $scope.timeRange));

From d66e948f97b56bd59445a535a48532dacd008a5b Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Wed, 29 Jan 2020 18:02:48 +0200
Subject: [PATCH 13/29] keep savedQuery state in create search bar

---
 .../ui/search_bar/create_search_bar.tsx       | 51 +++++++++++++++----
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 52fc8d44ead7b..08c12baef4260 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -78,7 +78,8 @@ const defaultOnClearSavedQuery = (
   props: StatefulSearchBarProps,
   uiSettings: CoreStart['uiSettings'],
   queryService: QueryStart,
-  setQueryStringState: Function
+  setQueryStringState: Function,
+  setSavedQueryState: Function
 ) => {
   if (!props.useDefaultBehaviors) return props.onClearSavedQuery;
   return () => {
@@ -87,7 +88,7 @@ const defaultOnClearSavedQuery = (
       query: '',
       language: uiSettings.get('search:queryLanguage'),
     });
-
+    setSavedQueryState(undefined);
     if (props.onClearSavedQuery) props.onClearSavedQuery();
   };
 };
@@ -96,7 +97,8 @@ const populateStateFromSavedQuery = (
   props: StatefulSearchBarProps,
   queryService: QueryStart,
   savedQuery: SavedQuery,
-  setQueryStringState: Function
+  setQueryStringState: Function,
+  setSavedQueryState: Function
 ) => {
   const { timefilter } = queryService.timefilter;
   // timefilter
@@ -119,16 +121,25 @@ const populateStateFromSavedQuery = (
   const savedQueryFilters = savedQuery.attributes.filters || [];
   const globalFilters = queryService.filterManager.getGlobalFilters();
   queryService.filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
+
+  setSavedQueryState(savedQuery);
 };
 
 const defaultOnSavedQueryUpdated = (
   props: StatefulSearchBarProps,
   queryService: QueryStart,
-  setQueryStringState: Function
+  setQueryStringState: Function,
+  setSavedQueryState: Function
 ) => {
   if (!props.useDefaultBehaviors) return props.onSavedQueryUpdated;
   return (savedQuery: SavedQuery) => {
-    populateStateFromSavedQuery(props, queryService, savedQuery, setQueryStringState);
+    populateStateFromSavedQuery(
+      props,
+      queryService,
+      savedQuery,
+      setQueryStringState,
+      setSavedQueryState
+    );
     if (props.onSavedQueryUpdated) props.onSavedQueryUpdated(savedQuery);
   };
 };
@@ -136,11 +147,18 @@ const defaultOnSavedQueryUpdated = (
 const defaultOnQuerySaved = (
   props: StatefulSearchBarProps,
   queryService: QueryStart,
-  setQueryStringState: Function
+  setQueryStringState: Function,
+  setSavedQueryState: Function
 ) => {
   if (!props.useDefaultBehaviors) return props.onSaved;
   return (savedQuery: SavedQuery) => {
-    populateStateFromSavedQuery(props, queryService, savedQuery, setQueryStringState);
+    populateStateFromSavedQuery(
+      props,
+      queryService,
+      savedQuery,
+      setQueryStringState,
+      setSavedQueryState
+    );
     if (props.onSaved) props.onSaved(savedQuery);
   };
 };
@@ -164,6 +182,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
         language: core.uiSettings.get('search:queryLanguage'),
       }
     );
+    const [savedQuery, setSavedQuery] = useState<SavedQuery>();
 
     const [filters, setFilters] = useState(fmFilters);
 
@@ -230,10 +249,22 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           query={query}
           onFiltersUpdated={defaultFiltersUpdated(data.query)}
           onRefreshChange={defaultOnRefreshChange(data.query)}
+          savedQuery={savedQuery}
           onQuerySubmit={defaultOnQuerySubmit(props, data.query, query, setQuery)}
-          onClearSavedQuery={defaultOnClearSavedQuery(props, core.uiSettings, data.query, setQuery)}
-          onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, data.query, setQuery)}
-          onSaved={defaultOnQuerySaved(props, data.query, setQuery)}
+          onClearSavedQuery={defaultOnClearSavedQuery(
+            props,
+            core.uiSettings,
+            data.query,
+            setQuery,
+            setSavedQuery
+          )}
+          onSavedQueryUpdated={defaultOnSavedQueryUpdated(
+            props,
+            data.query,
+            setQuery,
+            setSavedQuery
+          )}
+          onSaved={defaultOnQuerySaved(props, data.query, setQuery, setSavedQuery)}
           {...overrideDefaultBehaviors(props)}
         />
       </KibanaContextProvider>

From 4a511e2fed1f657dad1c1266bfda29115f331b4f Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Thu, 30 Jan 2020 11:40:37 +0200
Subject: [PATCH 14/29] update saved query to save it with the state

---
 .../public/discover/np_ready/angular/discover.html       | 9 +++++++--
 .../kibana/public/discover/np_ready/angular/discover.js  | 9 +++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
index abd7b93479db8..997899b7d0338 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
@@ -8,10 +8,15 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
     screen-title="screenTitle"
     show-search-bar="true"
     show-date-picker="enableTimeRangeSelector"
-    show-save-query="showSaveQuery"
-    on-query-submit="updateQuery"
     index-patterns="[indexPattern]"
+
     query="state.query"
+    on-query-submit="updateQuery"
+	
+    show-save-query="showSaveQuery"
+    on-saved="updateSavedQueryState"	
+    on-saved-query-updated="updateSavedQueryState"	
+    on-clear-saved-query="updateSavedQueryState"
 
     use-default-behaviors="true"
   >
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
index ebe0e63addd09..cfe6064a8f80f 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
@@ -941,6 +941,15 @@ function discoverController(
     $scope.minimumVisibleRows = $scope.hits;
   };
 
+  $scope.updateSavedQueryState = savedQuery => {
+    if (savedQuery) {
+      $state.savedQuery = savedQuery;
+    } else {
+      delete $state.savedQuery;
+    }
+    $state.save();
+  };
+
   async function setupVisualization() {
     // If no timefield has been specified we don't create a histogram of messages
     if (!$scope.opts.timefield) return;

From 375b31894f92ffaac216c42fad7cfe64e8d2fe43 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Thu, 30 Jan 2020 16:44:01 +0200
Subject: [PATCH 15/29] revert all dashboard changes

---
 .../dashboard/np_ready/dashboard_app.html     |  1 -
 .../np_ready/dashboard_app_controller.tsx     | 27 ++++++++++---------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
index f1b925fb0a255..3cf8932958b6d 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
@@ -27,7 +27,6 @@
     on-saved-query-updated="onSavedQueryUpdated"
     on-clear-saved-query="onClearSavedQuery"
     on-refresh-change="onRefreshChange">
-  
   </kbn-top-nav>
 
   <!--
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
index ed002ff90cf55..a8eec9c2504a7 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
@@ -121,6 +121,7 @@ export class DashboardAppController {
     kbnUrlStateStorage,
   }: DashboardAppControllerDependencies) {
     const filterManager = queryService.filterManager;
+    const queryFilter = filterManager;
     const timefilter = queryService.timefilter.timefilter;
 
     // starts syncing `_g` portion of url with query services
@@ -241,7 +242,7 @@ export class DashboardAppController {
       const isEmptyInReadonlyMode = getIsEmptyInReadonlyMode();
       return {
         id: dashboardStateManager.savedDashboard.id || '',
-        filters: filterManager.getFilters(),
+        filters: queryFilter.getFilters(),
         hidePanelTitles: dashboardStateManager.getHidePanelTitles(),
         query: $scope.model.query,
         timeRange: {
@@ -265,7 +266,7 @@ export class DashboardAppController {
       // https://github.com/angular/angular.js/wiki/Understanding-Scopes
       $scope.model = {
         query: dashboardStateManager.getQuery(),
-        filters: filterManager.getFilters(),
+        filters: queryFilter.getFilters(),
         timeRestore: dashboardStateManager.getTimeRestore(),
         title: dashboardStateManager.getTitle(),
         description: dashboardStateManager.getDescription(),
@@ -319,12 +320,12 @@ export class DashboardAppController {
             if (
               !compareFilters(
                 container.getInput().filters,
-                filterManager.getFilters(),
+                queryFilter.getFilters(),
                 COMPARE_ALL_OPTIONS
               )
             ) {
               // Add filters modifies the object passed to it, hence the clone deep.
-              filterManager.addFilters(_.cloneDeep(container.getInput().filters));
+              queryFilter.addFilters(_.cloneDeep(container.getInput().filters));
 
               dashboardStateManager.applyFilters($scope.model.query, container.getInput().filters);
               dirty = true;
@@ -377,7 +378,7 @@ export class DashboardAppController {
         language:
           localStorage.get('kibana.userQueryLanguage') || config.get('search:queryLanguage'),
       },
-      filterManager.getFilters()
+      queryFilter.getFilters()
     );
 
     timefilter.disableTimeRangeSelector();
@@ -473,8 +474,8 @@ export class DashboardAppController {
     };
 
     $scope.onFiltersUpdated = filters => {
-      // The filters will automatically be set when the filterManager emits an update event (see below)
-      filterManager.setFilters(filters);
+      // The filters will automatically be set when the queryFilter emits an update event (see below)
+      queryFilter.setFilters(filters);
     };
 
     $scope.onQuerySaved = savedQuery => {
@@ -494,18 +495,18 @@ export class DashboardAppController {
           language:
             localStorage.get('kibana.userQueryLanguage') || config.get('search:queryLanguage'),
         },
-        filterManager.getGlobalFilters()
+        queryFilter.getGlobalFilters()
       );
       // Making this method sync broke the updates.
       // Temporary fix, until we fix the complex state in this file.
       setTimeout(() => {
-        filterManager.setFilters(filterManager.getGlobalFilters());
+        queryFilter.setFilters(queryFilter.getGlobalFilters());
       }, 0);
     };
 
     const updateStateFromSavedQuery = (savedQuery: SavedQuery) => {
       const savedQueryFilters = savedQuery.attributes.filters || [];
-      const globalFilters = filterManager.getGlobalFilters();
+      const globalFilters = queryFilter.getGlobalFilters();
       const allFilters = [...globalFilters, ...savedQueryFilters];
 
       dashboardStateManager.applyFilters(savedQuery.attributes.query, allFilters);
@@ -521,7 +522,7 @@ export class DashboardAppController {
       // Making this method sync broke the updates.
       // Temporary fix, until we fix the complex state in this file.
       setTimeout(() => {
-        filterManager.setFilters(allFilters);
+        queryFilter.setFilters(allFilters);
       }, 0);
     };
 
@@ -865,9 +866,9 @@ export class DashboardAppController {
     updateViewMode(dashboardStateManager.getViewMode());
 
     // update root source when filters update
-    const updateSubscription = filterManager.getUpdates$().subscribe({
+    const updateSubscription = queryFilter.getUpdates$().subscribe({
       next: () => {
-        $scope.model.filters = filterManager.getFilters();
+        $scope.model.filters = queryFilter.getFilters();
         dashboardStateManager.applyFilters($scope.model.query, $scope.model.filters);
         if (dashboardContainer) {
           dashboardContainer.updateInput({ filters: $scope.model.filters });

From 9db8595735491ab6f01504df52272be537485247 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Thu, 30 Jan 2020 17:31:03 +0200
Subject: [PATCH 16/29] saved queries

---
 .../discover/np_ready/angular/discover.html   |  5 ++--
 .../discover/np_ready/angular/discover.js     |  6 ++---
 .../ui/public/kbn_top_nav/kbn_top_nav.js      |  2 ++
 .../ui/search_bar/create_search_bar.tsx       | 24 ++++++++++++++-----
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
index 997899b7d0338..efde83a0e35f0 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
@@ -14,9 +14,8 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
     on-query-submit="updateQuery"
 	
     show-save-query="showSaveQuery"
-    on-saved="updateSavedQueryState"	
-    on-saved-query-updated="updateSavedQueryState"	
-    on-clear-saved-query="updateSavedQueryState"
+    saved-query-id="state.savedQuery"
+    on-saved-query-id-change="updateSavedQueryId"
 
     use-default-behaviors="true"
   >
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
index 5a95221403d90..074a8d4c4f8db 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
@@ -941,9 +941,9 @@ function discoverController(
     $scope.minimumVisibleRows = $scope.hits;
   };
 
-  $scope.updateSavedQueryState = savedQuery => {
-    if (savedQuery) {
-      $state.savedQuery = savedQuery;
+  $scope.updateSavedQueryId = newSavedQueryId => {
+    if (newSavedQueryId) {
+      $state.savedQuery = newSavedQueryId;
     } else {
       delete $state.savedQuery;
     }
diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
index d80db53c99cb8..12c3ca2acc3cd 100644
--- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
+++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -92,6 +92,7 @@ export const createTopNavHelper = ({ TopNavMenu }) => reactDirective => {
     ['onClearSavedQuery', { watchDepth: 'reference' }],
     ['onSaved', { watchDepth: 'reference' }],
     ['onSavedQueryUpdated', { watchDepth: 'reference' }],
+    ['onSavedQueryIdChange', { watchDepth: 'reference' }],
 
     ['indexPatterns', { watchDepth: 'collection' }],
     ['filters', { watchDepth: 'collection' }],
@@ -109,6 +110,7 @@ export const createTopNavHelper = ({ TopNavMenu }) => reactDirective => {
     'screenTitle',
     'dateRangeFrom',
     'dateRangeTo',
+    'savedQueryId',
     'isRefreshPaused',
     'refreshInterval',
     'disableAutoFocus',
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 08c12baef4260..91cf9d324581d 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -35,6 +35,8 @@ interface StatefulSearchBarDeps {
 export type StatefulSearchBarProps = SearchBarOwnProps & {
   appName: string;
   useDefaultBehaviors?: boolean;
+  savedQueryId?: string;
+  onSavedQueryIdChange?: (savedQueryId?: string) => void;
 };
 
 const defaultFiltersUpdated = (queryService: QueryStart) => {
@@ -89,7 +91,7 @@ const defaultOnClearSavedQuery = (
       language: uiSettings.get('search:queryLanguage'),
     });
     setSavedQueryState(undefined);
-    if (props.onClearSavedQuery) props.onClearSavedQuery();
+    if (props.onSavedQueryIdChange) props.onSavedQueryIdChange();
   };
 };
 
@@ -140,7 +142,7 @@ const defaultOnSavedQueryUpdated = (
       setQueryStringState,
       setSavedQueryState
     );
-    if (props.onSavedQueryUpdated) props.onSavedQueryUpdated(savedQuery);
+    if (props.onSavedQueryIdChange) props.onSavedQueryIdChange(savedQuery.id);
   };
 };
 
@@ -159,7 +161,7 @@ const defaultOnQuerySaved = (
       setQueryStringState,
       setSavedQueryState
     );
-    if (props.onSaved) props.onSaved(savedQuery);
+    if (props.onSavedQueryIdChange) props.onSavedQueryIdChange(savedQuery.id);
   };
 };
 
@@ -171,9 +173,8 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
   // App name should come from the core application service.
   // Until it's available, we'll ask the user to provide it for the pre-wired component.
   return (props: StatefulSearchBarProps) => {
-    const { filterManager, timefilter } = data.query;
+    const { filterManager, timefilter, savedQueries } = data.query;
     const tfRefreshInterval = timefilter.timefilter.getRefreshInterval();
-    const fmFilters = filterManager.getFilters();
     const [refreshInterval, setRefreshInterval] = useState(tfRefreshInterval.value);
     const [refreshPaused, setRefreshPaused] = useState(tfRefreshInterval.pause);
     const [query, setQuery] = useState<Query>(
@@ -182,9 +183,20 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
         language: core.uiSettings.get('search:queryLanguage'),
       }
     );
+
+    // Handle saved queries
     const [savedQuery, setSavedQuery] = useState<SavedQuery>();
+    useEffect(() => {
+      const fetchSavedQuery = async () => {
+        if (props.savedQueryId) {
+          const newSavedQuery = await savedQueries.getSavedQuery(props.savedQueryId);
+          if (newSavedQuery) setSavedQuery(newSavedQuery);
+        }
+      };
+      fetchSavedQuery();
+    }, [props.savedQueryId, savedQueries]);
 
-    const [filters, setFilters] = useState(fmFilters);
+    const [filters, setFilters] = useState(filterManager.getFilters());
 
     // We do not really need to keep track of the time
     // since this is just for initialization

From 27176e3a0a1aef61b0c55d503166149b9ad59217 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Sun, 2 Feb 2020 18:25:00 +0200
Subject: [PATCH 17/29] @kertal code review

---
 .../components/doc/use_es_doc_search.ts       | 50 +++++++++----------
 .../ui/search_bar/create_search_bar.tsx       |  2 +-
 .../data/public/ui/search_bar/search_bar.tsx  |  2 +-
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/doc/use_es_doc_search.ts b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/doc/use_es_doc_search.ts
index d3bf3696c08a5..6cffc2cc533b0 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/doc/use_es_doc_search.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/doc/use_es_doc_search.ts
@@ -62,36 +62,34 @@ export function useEsDocSearch({
   const [status, setStatus] = useState(ElasticRequestState.Loading);
   const [hit, setHit] = useState<ElasticSearchHit | null>(null);
 
-  async function requestData() {
-    try {
-      const indexPatternEntity = await indexPatternService.get(indexPatternId);
-      setIndexPattern(indexPatternEntity);
+  useEffect(() => {
+    async function requestData() {
+      try {
+        const indexPatternEntity = await indexPatternService.get(indexPatternId);
+        setIndexPattern(indexPatternEntity);
 
-      const { hits } = await esClient.search({
-        index,
-        body: buildSearchBody(id, indexPatternEntity),
-      });
+        const { hits } = await esClient.search({
+          index,
+          body: buildSearchBody(id, indexPatternEntity),
+        });
 
-      if (hits && hits.hits && hits.hits[0]) {
-        setStatus(ElasticRequestState.Found);
-        setHit(hits.hits[0]);
-      } else {
-        setStatus(ElasticRequestState.NotFound);
-      }
-    } catch (err) {
-      if (err.savedObjectId) {
-        setStatus(ElasticRequestState.NotFoundIndexPattern);
-      } else if (err.status === 404) {
-        setStatus(ElasticRequestState.NotFound);
-      } else {
-        setStatus(ElasticRequestState.Error);
+        if (hits && hits.hits && hits.hits[0]) {
+          setStatus(ElasticRequestState.Found);
+          setHit(hits.hits[0]);
+        } else {
+          setStatus(ElasticRequestState.NotFound);
+        }
+      } catch (err) {
+        if (err.savedObjectId) {
+          setStatus(ElasticRequestState.NotFoundIndexPattern);
+        } else if (err.status === 404) {
+          setStatus(ElasticRequestState.NotFound);
+        } else {
+          setStatus(ElasticRequestState.Error);
+        }
       }
     }
-  }
-
-  useEffect(() => {
     requestData();
-  });
-
+  }, [esClient, id, index, indexPatternId, indexPatternService]);
   return [status, hit, indexPattern];
 }
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 91cf9d324581d..3d9128d6c16bc 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -72,7 +72,7 @@ const defaultOnQuerySubmit = (
     timefilter.setTime(payload.dateRange);
     setQueryStringState(payload.query);
 
-    if (props.onQuerySubmit && isUpdate) props.onQuerySubmit(payload);
+    if (props.onQuerySubmit) props.onQuerySubmit(payload, isUpdate);
   };
 };
 
diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
index ceaeb24e7fe7c..b4e2f46b12a84 100644
--- a/src/plugins/data/public/ui/search_bar/search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -75,7 +75,7 @@ export interface SearchBarOwnProps {
   showSaveQuery?: boolean;
   savedQuery?: SavedQuery;
   onQueryChange?: (payload: { dateRange: TimeRange; query?: Query }) => void;
-  onQuerySubmit?: (payload: { dateRange: TimeRange; query?: Query }) => void;
+  onQuerySubmit?: (payload: { dateRange: TimeRange; query?: Query }, isUpdate?: boolean) => void;
   // User has saved the current state as a saved query
   onSaved?: (savedQuery: SavedQuery) => void;
   // User has modified the saved query, your app should persist the update

From 5eea15b628419ec4e13ae6a0c8b2fc94888fedfc Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Sun, 2 Feb 2020 23:28:46 +0200
Subject: [PATCH 18/29] fix applying filters from histogram

---
 .../ui/search_bar/create_search_bar.tsx       | 33 +++++++++++++++----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 3d9128d6c16bc..7f578ca6fab96 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -196,15 +196,12 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
       fetchSavedQuery();
     }, [props.savedQueryId, savedQueries]);
 
-    const [filters, setFilters] = useState(filterManager.getFilters());
-
-    // We do not really need to keep track of the time
-    // since this is just for initialization
-    const timeRange = timefilter.timefilter.getTime();
-
+    // timerange
+    const [timeRange, setTimerange] = useState(timefilter.timefilter.getTime());
     useEffect(() => {
       let isSubscribed = true;
       const subscriptions = new Subscription();
+
       subscriptions.add(
         timefilter.timefilter.getRefreshIntervalUpdate$().subscribe({
           next: () => {
@@ -217,6 +214,28 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
         })
       );
 
+      subscriptions.add(
+        timefilter.timefilter.getTimeUpdate$().subscribe({
+          next: () => {
+            if (isSubscribed) {
+              setTimerange(timefilter.timefilter.getTime());
+            }
+          },
+        })
+      );
+
+      return () => {
+        isSubscribed = false;
+        subscriptions.unsubscribe();
+      };
+    }, [timefilter.timefilter]);
+
+    // filters
+    const [filters, setFilters] = useState(filterManager.getFilters());
+    useEffect(() => {
+      let isSubscribed = true;
+      const subscriptions = new Subscription();
+
       subscriptions.add(
         filterManager.getUpdates$().subscribe({
           next: () => {
@@ -232,7 +251,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
         isSubscribed = false;
         subscriptions.unsubscribe();
       };
-    }, [filterManager, timefilter.timefilter]);
+    }, [filterManager]);
 
     return (
       <KibanaContextProvider

From 8a588782c482bce7756d0eae8cd6a78e7ee50548 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Mon, 3 Feb 2020 18:51:58 +0200
Subject: [PATCH 19/29] @dosant code review

---
 .../ui/search_bar/create_search_bar.tsx       | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 7f578ca6fab96..62433414147be 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -190,7 +190,10 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
       const fetchSavedQuery = async () => {
         if (props.savedQueryId) {
           const newSavedQuery = await savedQueries.getSavedQuery(props.savedQueryId);
-          if (newSavedQuery) setSavedQuery(newSavedQuery);
+          // Make sure we set the saved query to the most recent one
+          if (newSavedQuery && newSavedQuery.id === props.savedQueryId) {
+            setSavedQuery(newSavedQuery);
+          }
         }
       };
       fetchSavedQuery();
@@ -199,17 +202,14 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
     // timerange
     const [timeRange, setTimerange] = useState(timefilter.timefilter.getTime());
     useEffect(() => {
-      let isSubscribed = true;
       const subscriptions = new Subscription();
 
       subscriptions.add(
         timefilter.timefilter.getRefreshIntervalUpdate$().subscribe({
           next: () => {
-            if (isSubscribed) {
-              const newRefreshInterval = timefilter.timefilter.getRefreshInterval();
-              setRefreshInterval(newRefreshInterval.value);
-              setRefreshPaused(newRefreshInterval.pause);
-            }
+            const newRefreshInterval = timefilter.timefilter.getRefreshInterval();
+            setRefreshInterval(newRefreshInterval.value);
+            setRefreshPaused(newRefreshInterval.pause);
           },
         })
       );
@@ -217,15 +217,12 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
       subscriptions.add(
         timefilter.timefilter.getTimeUpdate$().subscribe({
           next: () => {
-            if (isSubscribed) {
-              setTimerange(timefilter.timefilter.getTime());
-            }
+            setTimerange(timefilter.timefilter.getTime());
           },
         })
       );
 
       return () => {
-        isSubscribed = false;
         subscriptions.unsubscribe();
       };
     }, [timefilter.timefilter]);
@@ -233,22 +230,18 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
     // filters
     const [filters, setFilters] = useState(filterManager.getFilters());
     useEffect(() => {
-      let isSubscribed = true;
       const subscriptions = new Subscription();
 
       subscriptions.add(
         filterManager.getUpdates$().subscribe({
           next: () => {
-            if (isSubscribed) {
-              const newFilters = filterManager.getFilters();
-              setFilters(newFilters);
-            }
+            const newFilters = filterManager.getFilters();
+            setFilters(newFilters);
           },
         })
       );
 
       return () => {
-        isSubscribed = false;
         subscriptions.unsubscribe();
       };
     }, [filterManager]);

From 28921bc6b8558b41eb327535a24150e641b90ee6 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Mon, 3 Feb 2020 23:17:53 +0200
Subject: [PATCH 20/29] Merge changes from #56643 to handle saved query errors

Fix bug where saved query clean does not reset query
---
 .../query/saved_query/saved_query_service.ts  |  7 +-
 .../ui/search_bar/create_search_bar.tsx       | 64 +++++++++++++++----
 2 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/src/plugins/data/public/query/saved_query/saved_query_service.ts b/src/plugins/data/public/query/saved_query/saved_query_service.ts
index 434efe80ecd8c..80dec1c9373ea 100644
--- a/src/plugins/data/public/query/saved_query/saved_query_service.ts
+++ b/src/plugins/data/public/query/saved_query/saved_query_service.ts
@@ -112,8 +112,11 @@ export const createSavedQueryService = (
   };
 
   const getSavedQuery = async (id: string): Promise<SavedQuery> => {
-    const response = await savedObjectsClient.get<SerializedSavedQueryAttributes>('query', id);
-    return parseSavedQueryObject(response);
+    const savedObject = await savedObjectsClient.get<SerializedSavedQueryAttributes>('query', id);
+    if (savedObject.error) {
+      throw new Error(savedObject.error.message);
+    }
+    return parseSavedQueryObject(savedObject);
   };
 
   const deleteSavedQuery = async (id: string) => {
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 62433414147be..7dd7c48da25d5 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -18,6 +18,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
 import { Subscription } from 'rxjs';
 import { CoreStart } from 'src/core/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
@@ -69,10 +70,20 @@ const defaultOnQuerySubmit = (
     const isUpdate =
       !_.isEqual(timefilter.getTime(), payload.dateRange) ||
       !_.isEqual(payload.query, currentQuery);
-    timefilter.setTime(payload.dateRange);
-    setQueryStringState(payload.query);
-
-    if (props.onQuerySubmit) props.onQuerySubmit(payload, isUpdate);
+    if (isUpdate) {
+      timefilter.setTime(payload.dateRange);
+      setQueryStringState(payload.query);
+    } else {
+      // If no change was detected, fire onQuerySubmit with current state
+      if (props.onQuerySubmit)
+        props.onQuerySubmit(
+          {
+            dateRange: timefilter.getTime(),
+            query: currentQuery,
+          },
+          false
+        );
+    }
   };
 };
 
@@ -173,10 +184,14 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
   // App name should come from the core application service.
   // Until it's available, we'll ask the user to provide it for the pre-wired component.
   return (props: StatefulSearchBarProps) => {
+    const { appName, savedQueryId, onQuerySubmit } = props;
     const { filterManager, timefilter, savedQueries } = data.query;
     const tfRefreshInterval = timefilter.timefilter.getRefreshInterval();
     const [refreshInterval, setRefreshInterval] = useState(tfRefreshInterval.value);
     const [refreshPaused, setRefreshPaused] = useState(tfRefreshInterval.pause);
+    const [timeRange, setTimerange] = useState(timefilter.timefilter.getTime());
+
+    // Handle queries
     const [query, setQuery] = useState<Query>(
       props.query || {
         query: '',
@@ -184,23 +199,48 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
       }
     );
 
+    // Fire onQuerySubmit on query or timerange change
+    useEffect(() => {
+      if (onQuerySubmit)
+        onQuerySubmit(
+          {
+            dateRange: timeRange,
+            query,
+          },
+          true
+        );
+    }, [onQuerySubmit, query, timeRange]);
+
     // Handle saved queries
     const [savedQuery, setSavedQuery] = useState<SavedQuery>();
     useEffect(() => {
       const fetchSavedQuery = async () => {
-        if (props.savedQueryId) {
-          const newSavedQuery = await savedQueries.getSavedQuery(props.savedQueryId);
-          // Make sure we set the saved query to the most recent one
-          if (newSavedQuery && newSavedQuery.id === props.savedQueryId) {
-            setSavedQuery(newSavedQuery);
+        if (savedQueryId) {
+          try {
+            const newSavedQuery = await savedQueries.getSavedQuery(savedQueryId);
+            // Make sure we set the saved query to the most recent one
+            if (newSavedQuery && newSavedQuery.id === savedQueryId) {
+              setSavedQuery(newSavedQuery);
+            }
+          } catch (error) {
+            // Clear saved query
+            setSavedQuery(undefined);
+            core.notifications.toasts.addWarning({
+              title: i18n.translate('xpack.maps.unableToGetSavedQueryToastTitle', {
+                defaultMessage: 'Unable to load saved query {savedQueryId}',
+                values: { savedQueryId },
+              }),
+              text: `${error.message}`,
+            });
           }
+        } else {
+          setSavedQuery(undefined);
         }
       };
       fetchSavedQuery();
-    }, [props.savedQueryId, savedQueries]);
+    }, [savedQueryId, savedQueries]);
 
     // timerange
-    const [timeRange, setTimerange] = useState(timefilter.timefilter.getTime());
     useEffect(() => {
       const subscriptions = new Subscription();
 
@@ -249,7 +289,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
     return (
       <KibanaContextProvider
         services={{
-          appName: props.appName,
+          appName,
           data,
           storage,
           ...core,

From d6fffc032b2e3e4e782428c2a44e3502d3a6a5c6 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Mon, 3 Feb 2020 23:44:04 +0200
Subject: [PATCH 21/29] change string path

---
 src/plugins/data/public/ui/search_bar/create_search_bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 7dd7c48da25d5..af9cb61cdd5c0 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -226,7 +226,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
             // Clear saved query
             setSavedQuery(undefined);
             core.notifications.toasts.addWarning({
-              title: i18n.translate('xpack.maps.unableToGetSavedQueryToastTitle', {
+              title: i18n.translate('data.search.unableToGetSavedQueryToastTitle', {
                 defaultMessage: 'Unable to load saved query {savedQueryId}',
                 values: { savedQueryId },
               }),

From 35f7a910d75b1cffa419b18396238acdbbf45c19 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 4 Feb 2020 00:34:30 +0200
Subject: [PATCH 22/29] if

---
 src/plugins/data/public/ui/search_bar/create_search_bar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index af9cb61cdd5c0..d552d48db2529 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -201,7 +201,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
 
     // Fire onQuerySubmit on query or timerange change
     useEffect(() => {
-      if (onQuerySubmit)
+      if (props.useDefaultBehaviors && onQuerySubmit)
         onQuerySubmit(
           {
             dateRange: timeRange,
@@ -209,7 +209,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           },
           true
         );
-    }, [onQuerySubmit, query, timeRange]);
+    }, [onQuerySubmit, props.useDefaultBehaviors, query, timeRange]);
 
     // Handle saved queries
     const [savedQuery, setSavedQuery] = useState<SavedQuery>();

From 3e6af5e4d11b9e037a8f0e384a80ab87ed5d97e5 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 4 Feb 2020 11:40:13 +0200
Subject: [PATCH 23/29] Extract useFilterManager and useTimefilter

---
 .../ui/search_bar/create_search_bar.tsx       | 65 ++++---------------
 .../ui/search_bar/lib/use_filter_manager.ts   | 48 ++++++++++++++
 .../ui/search_bar/lib/use_timefilter.ts       | 61 +++++++++++++++++
 3 files changed, 120 insertions(+), 54 deletions(-)
 create mode 100644 src/plugins/data/public/ui/search_bar/lib/use_filter_manager.ts
 create mode 100644 src/plugins/data/public/ui/search_bar/lib/use_timefilter.ts

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index d552d48db2529..8ba3c705d9ea3 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -19,13 +19,14 @@
 
 import React, { useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
-import { Subscription } from 'rxjs';
 import { CoreStart } from 'src/core/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { KibanaContextProvider } from '../../../../kibana_react/public';
 import { DataPublicPluginStart, esFilters, Query, TimeRange, SavedQuery } from '../..';
 import { QueryStart } from '../../query';
 import { SearchBarOwnProps, SearchBar } from './search_bar';
+import { useFilterManager } from './lib/use_filter_manager';
+import { useTimefilter } from './lib/use_timefilter';
 
 interface StatefulSearchBarDeps {
   core: CoreStart;
@@ -186,10 +187,11 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
   return (props: StatefulSearchBarProps) => {
     const { appName, savedQueryId, onQuerySubmit } = props;
     const { filterManager, timefilter, savedQueries } = data.query;
-    const tfRefreshInterval = timefilter.timefilter.getRefreshInterval();
-    const [refreshInterval, setRefreshInterval] = useState(tfRefreshInterval.value);
-    const [refreshPaused, setRefreshPaused] = useState(tfRefreshInterval.pause);
-    const [timeRange, setTimerange] = useState(timefilter.timefilter.getTime());
+
+    // handle service state updates.
+    // i.e. filters being added from a visualization directly to filterManager.
+    const { filters } = useFilterManager({ filterManager });
+    const { timeRange, refreshInterval } = useTimefilter({ timefilter: timefilter.timefilter });
 
     // Handle queries
     const [query, setQuery] = useState<Query>(
@@ -201,7 +203,8 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
 
     // Fire onQuerySubmit on query or timerange change
     useEffect(() => {
-      if (props.useDefaultBehaviors && onQuerySubmit)
+      if (!props.useDefaultBehaviors) return;
+      if (onQuerySubmit)
         onQuerySubmit(
           {
             dateRange: timeRange,
@@ -240,52 +243,6 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
       fetchSavedQuery();
     }, [savedQueryId, savedQueries]);
 
-    // timerange
-    useEffect(() => {
-      const subscriptions = new Subscription();
-
-      subscriptions.add(
-        timefilter.timefilter.getRefreshIntervalUpdate$().subscribe({
-          next: () => {
-            const newRefreshInterval = timefilter.timefilter.getRefreshInterval();
-            setRefreshInterval(newRefreshInterval.value);
-            setRefreshPaused(newRefreshInterval.pause);
-          },
-        })
-      );
-
-      subscriptions.add(
-        timefilter.timefilter.getTimeUpdate$().subscribe({
-          next: () => {
-            setTimerange(timefilter.timefilter.getTime());
-          },
-        })
-      );
-
-      return () => {
-        subscriptions.unsubscribe();
-      };
-    }, [timefilter.timefilter]);
-
-    // filters
-    const [filters, setFilters] = useState(filterManager.getFilters());
-    useEffect(() => {
-      const subscriptions = new Subscription();
-
-      subscriptions.add(
-        filterManager.getUpdates$().subscribe({
-          next: () => {
-            const newFilters = filterManager.getFilters();
-            setFilters(newFilters);
-          },
-        })
-      );
-
-      return () => {
-        subscriptions.unsubscribe();
-      };
-    }, [filterManager]);
-
     return (
       <KibanaContextProvider
         services={{
@@ -307,8 +264,8 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           timeHistory={timefilter.history}
           dateRangeFrom={timeRange.from}
           dateRangeTo={timeRange.to}
-          refreshInterval={refreshInterval}
-          isRefreshPaused={refreshPaused}
+          refreshInterval={refreshInterval.value}
+          isRefreshPaused={refreshInterval.pause}
           filters={filters}
           query={query}
           onFiltersUpdated={defaultFiltersUpdated(data.query)}
diff --git a/src/plugins/data/public/ui/search_bar/lib/use_filter_manager.ts b/src/plugins/data/public/ui/search_bar/lib/use_filter_manager.ts
new file mode 100644
index 0000000000000..e6066b0c741dc
--- /dev/null
+++ b/src/plugins/data/public/ui/search_bar/lib/use_filter_manager.ts
@@ -0,0 +1,48 @@
+/*
+ * 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 { useState, useEffect } from 'react';
+import { Subscription } from 'rxjs';
+import { DataPublicPluginStart } from 'src/plugins/data/public';
+
+interface UseFilterManagerProps {
+  filterManager: DataPublicPluginStart['query']['filterManager'];
+}
+
+export const useFilterManager = (props: UseFilterManagerProps) => {
+  const [filters, setFilters] = useState(props.filterManager.getFilters());
+  useEffect(() => {
+    const subscriptions = new Subscription();
+
+    subscriptions.add(
+      props.filterManager.getUpdates$().subscribe({
+        next: () => {
+          const newFilters = props.filterManager.getFilters();
+          setFilters(newFilters);
+        },
+      })
+    );
+
+    return () => {
+      subscriptions.unsubscribe();
+    };
+  }, [props.filterManager]);
+
+  return { filters };
+};
diff --git a/src/plugins/data/public/ui/search_bar/lib/use_timefilter.ts b/src/plugins/data/public/ui/search_bar/lib/use_timefilter.ts
new file mode 100644
index 0000000000000..942902ebd7286
--- /dev/null
+++ b/src/plugins/data/public/ui/search_bar/lib/use_timefilter.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { useState, useEffect } from 'react';
+import { Subscription } from 'rxjs';
+import { DataPublicPluginStart } from 'src/plugins/data/public';
+
+interface UseTimefilterProps {
+  timefilter: DataPublicPluginStart['query']['timefilter']['timefilter'];
+}
+
+export const useTimefilter = (props: UseTimefilterProps) => {
+  const [timeRange, setTimerange] = useState(props.timefilter.getTime());
+  const [refreshInterval, setRefreshInterval] = useState(props.timefilter.getRefreshInterval());
+
+  useEffect(() => {
+    const subscriptions = new Subscription();
+
+    subscriptions.add(
+      props.timefilter.getRefreshIntervalUpdate$().subscribe({
+        next: () => {
+          const newRefreshInterval = props.timefilter.getRefreshInterval();
+          setRefreshInterval(newRefreshInterval);
+        },
+      })
+    );
+
+    subscriptions.add(
+      props.timefilter.getTimeUpdate$().subscribe({
+        next: () => {
+          setTimerange(props.timefilter.getTime());
+        },
+      })
+    );
+
+    return () => {
+      subscriptions.unsubscribe();
+    };
+  }, [props.timefilter]);
+
+  return {
+    refreshInterval,
+    timeRange,
+  };
+};

From 0f4ec5f8d64e6810e911853c942e256a915432f7 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 4 Feb 2020 13:03:13 +0200
Subject: [PATCH 24/29] Split useSavedQuery and restore capability of changing
 saved query in URL

---
 .../ui/search_bar/create_search_bar.tsx       | 173 ++++--------------
 .../ui/search_bar/lib/clear_saved_query.ts    |  33 ++++
 .../lib/populate_state_from_saved_query.ts    |  49 +++++
 .../ui/search_bar/lib/use_saved_query.ts      |  89 +++++++++
 4 files changed, 209 insertions(+), 135 deletions(-)
 create mode 100644 src/plugins/data/public/ui/search_bar/lib/clear_saved_query.ts
 create mode 100644 src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.ts
 create mode 100644 src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 8ba3c705d9ea3..6290d86fc048e 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -18,7 +18,6 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { i18n } from '@kbn/i18n';
 import { CoreStart } from 'src/core/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { KibanaContextProvider } from '../../../../kibana_react/public';
@@ -27,6 +26,7 @@ import { QueryStart } from '../../query';
 import { SearchBarOwnProps, SearchBar } from './search_bar';
 import { useFilterManager } from './lib/use_filter_manager';
 import { useTimefilter } from './lib/use_timefilter';
+import { useSavedQuery } from './lib/use_saved_query';
 
 interface StatefulSearchBarDeps {
   core: CoreStart;
@@ -41,12 +41,14 @@ export type StatefulSearchBarProps = SearchBarOwnProps & {
   onSavedQueryIdChange?: (savedQueryId?: string) => void;
 };
 
+// Respond to user changing the filters
 const defaultFiltersUpdated = (queryService: QueryStart) => {
   return (filters: esFilters.Filter[]) => {
     queryService.filterManager.setFilters(filters);
   };
 };
 
+// Respond to user changing the refresh settings
 const defaultOnRefreshChange = (queryService: QueryStart) => {
   const { timefilter } = queryService.timefilter;
   return (options: { isPaused: boolean; refreshInterval: number }) => {
@@ -57,6 +59,7 @@ const defaultOnRefreshChange = (queryService: QueryStart) => {
   };
 };
 
+// Respond to user changing the query string or time settings
 const defaultOnQuerySubmit = (
   props: StatefulSearchBarProps,
   queryService: QueryStart,
@@ -75,7 +78,7 @@ const defaultOnQuerySubmit = (
       timefilter.setTime(payload.dateRange);
       setQueryStringState(payload.query);
     } else {
-      // If no change was detected, fire onQuerySubmit with current state
+      // Refresh button triggered for an update
       if (props.onQuerySubmit)
         props.onQuerySubmit(
           {
@@ -88,91 +91,20 @@ const defaultOnQuerySubmit = (
   };
 };
 
-const defaultOnClearSavedQuery = (
-  props: StatefulSearchBarProps,
-  uiSettings: CoreStart['uiSettings'],
-  queryService: QueryStart,
-  setQueryStringState: Function,
-  setSavedQueryState: Function
-) => {
+// Respond to user clearing a saved query
+const defaultOnClearSavedQuery = (props: StatefulSearchBarProps, setSavedQuery: Function) => {
   if (!props.useDefaultBehaviors) return props.onClearSavedQuery;
   return () => {
-    queryService.filterManager.removeAll();
-    setQueryStringState({
-      query: '',
-      language: uiSettings.get('search:queryLanguage'),
-    });
-    setSavedQueryState(undefined);
+    setSavedQuery(undefined);
     if (props.onSavedQueryIdChange) props.onSavedQueryIdChange();
   };
 };
 
-const populateStateFromSavedQuery = (
-  props: StatefulSearchBarProps,
-  queryService: QueryStart,
-  savedQuery: SavedQuery,
-  setQueryStringState: Function,
-  setSavedQueryState: Function
-) => {
-  const { timefilter } = queryService.timefilter;
-  // timefilter
-  if (savedQuery.attributes.timefilter) {
-    timefilter.setTime({
-      from: savedQuery.attributes.timefilter.from,
-      to: savedQuery.attributes.timefilter.to,
-    });
-    if (savedQuery.attributes.timefilter.refreshInterval) {
-      timefilter.setRefreshInterval(savedQuery.attributes.timefilter.refreshInterval);
-    }
-  }
-
-  // query string
-  setQueryStringState(savedQuery.attributes.query);
-  if (props.onQuerySubmit)
-    props.onQuerySubmit({ dateRange: timefilter.getTime(), query: savedQuery.attributes.query });
-
-  // filters
-  const savedQueryFilters = savedQuery.attributes.filters || [];
-  const globalFilters = queryService.filterManager.getGlobalFilters();
-  queryService.filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
-
-  setSavedQueryState(savedQuery);
-};
-
-const defaultOnSavedQueryUpdated = (
-  props: StatefulSearchBarProps,
-  queryService: QueryStart,
-  setQueryStringState: Function,
-  setSavedQueryState: Function
-) => {
+// Respond to user saving or updating a saved query
+const defaultOnSavedQueryUpdated = (props: StatefulSearchBarProps, setSavedQuery: Function) => {
   if (!props.useDefaultBehaviors) return props.onSavedQueryUpdated;
   return (savedQuery: SavedQuery) => {
-    populateStateFromSavedQuery(
-      props,
-      queryService,
-      savedQuery,
-      setQueryStringState,
-      setSavedQueryState
-    );
-    if (props.onSavedQueryIdChange) props.onSavedQueryIdChange(savedQuery.id);
-  };
-};
-
-const defaultOnQuerySaved = (
-  props: StatefulSearchBarProps,
-  queryService: QueryStart,
-  setQueryStringState: Function,
-  setSavedQueryState: Function
-) => {
-  if (!props.useDefaultBehaviors) return props.onSaved;
-  return (savedQuery: SavedQuery) => {
-    populateStateFromSavedQuery(
-      props,
-      queryService,
-      savedQuery,
-      setQueryStringState,
-      setSavedQueryState
-    );
+    setSavedQuery(savedQuery);
     if (props.onSavedQueryIdChange) props.onSavedQueryIdChange(savedQuery.id);
   };
 };
@@ -185,14 +117,6 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
   // App name should come from the core application service.
   // Until it's available, we'll ask the user to provide it for the pre-wired component.
   return (props: StatefulSearchBarProps) => {
-    const { appName, savedQueryId, onQuerySubmit } = props;
-    const { filterManager, timefilter, savedQueries } = data.query;
-
-    // handle service state updates.
-    // i.e. filters being added from a visualization directly to filterManager.
-    const { filters } = useFilterManager({ filterManager });
-    const { timeRange, refreshInterval } = useTimefilter({ timefilter: timefilter.timefilter });
-
     // Handle queries
     const [query, setQuery] = useState<Query>(
       props.query || {
@@ -201,52 +125,42 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
       }
     );
 
+    // handle service state updates.
+    // i.e. filters being added from a visualization directly to filterManager.
+    const { filters } = useFilterManager({ filterManager: data.query.filterManager });
+    const { timeRange, refreshInterval } = useTimefilter({
+      timefilter: data.query.timefilter.timefilter,
+    });
+
+    // Fetch and update UI from saved query
+    const [savedQuery, setSavedQuery] = useSavedQuery(
+      {
+        queryService: data.query,
+        setQuery,
+        savedQueryId: props.savedQueryId,
+        notifications: core.notifications,
+        uiSettings: core.uiSettings,
+      },
+      [props.savedQueryId]
+    );
+
     // Fire onQuerySubmit on query or timerange change
     useEffect(() => {
       if (!props.useDefaultBehaviors) return;
-      if (onQuerySubmit)
-        onQuerySubmit(
+      if (props.onQuerySubmit)
+        props.onQuerySubmit(
           {
             dateRange: timeRange,
             query,
           },
           true
         );
-    }, [onQuerySubmit, props.useDefaultBehaviors, query, timeRange]);
-
-    // Handle saved queries
-    const [savedQuery, setSavedQuery] = useState<SavedQuery>();
-    useEffect(() => {
-      const fetchSavedQuery = async () => {
-        if (savedQueryId) {
-          try {
-            const newSavedQuery = await savedQueries.getSavedQuery(savedQueryId);
-            // Make sure we set the saved query to the most recent one
-            if (newSavedQuery && newSavedQuery.id === savedQueryId) {
-              setSavedQuery(newSavedQuery);
-            }
-          } catch (error) {
-            // Clear saved query
-            setSavedQuery(undefined);
-            core.notifications.toasts.addWarning({
-              title: i18n.translate('data.search.unableToGetSavedQueryToastTitle', {
-                defaultMessage: 'Unable to load saved query {savedQueryId}',
-                values: { savedQueryId },
-              }),
-              text: `${error.message}`,
-            });
-          }
-        } else {
-          setSavedQuery(undefined);
-        }
-      };
-      fetchSavedQuery();
-    }, [savedQueryId, savedQueries]);
+    }, [props, props.onQuerySubmit, props.useDefaultBehaviors, query, timeRange]);
 
     return (
       <KibanaContextProvider
         services={{
-          appName,
+          appName: props.appName,
           data,
           storage,
           ...core,
@@ -261,7 +175,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           showSaveQuery={props.showSaveQuery}
           screenTitle={props.screenTitle}
           indexPatterns={props.indexPatterns}
-          timeHistory={timefilter.history}
+          timeHistory={data.query.timefilter.history}
           dateRangeFrom={timeRange.from}
           dateRangeTo={timeRange.to}
           refreshInterval={refreshInterval.value}
@@ -272,20 +186,9 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           onRefreshChange={defaultOnRefreshChange(data.query)}
           savedQuery={savedQuery}
           onQuerySubmit={defaultOnQuerySubmit(props, data.query, query, setQuery)}
-          onClearSavedQuery={defaultOnClearSavedQuery(
-            props,
-            core.uiSettings,
-            data.query,
-            setQuery,
-            setSavedQuery
-          )}
-          onSavedQueryUpdated={defaultOnSavedQueryUpdated(
-            props,
-            data.query,
-            setQuery,
-            setSavedQuery
-          )}
-          onSaved={defaultOnQuerySaved(props, data.query, setQuery, setSavedQuery)}
+          onClearSavedQuery={defaultOnClearSavedQuery(props, setSavedQuery)}
+          onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, setSavedQuery)}
+          onSaved={defaultOnSavedQueryUpdated(props, setSavedQuery)}
           {...overrideDefaultBehaviors(props)}
         />
       </KibanaContextProvider>
diff --git a/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.ts b/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.ts
new file mode 100644
index 0000000000000..a1443b753cd93
--- /dev/null
+++ b/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { CoreStart } from 'kibana/public';
+import { QueryStart } from '../../../query';
+
+export const clearStateFromSavedQuery = (
+  queryService: QueryStart,
+  setQueryStringState: Function,
+  uiSettings: CoreStart['uiSettings']
+) => {
+  queryService.filterManager.removeAll();
+  setQueryStringState({
+    query: '',
+    language: uiSettings.get('search:queryLanguage'),
+  });
+};
diff --git a/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.ts b/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.ts
new file mode 100644
index 0000000000000..7b2a73039e938
--- /dev/null
+++ b/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.ts
@@ -0,0 +1,49 @@
+/*
+ * 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 { QueryStart, SavedQuery } from '../../..';
+
+export const populateStateFromSavedQuery = (
+  queryService: QueryStart,
+  savedQuery: SavedQuery,
+  setQueryStringState: Function
+) => {
+  const {
+    timefilter: { timefilter },
+    filterManager,
+  } = queryService;
+  // timefilter
+  if (savedQuery.attributes.timefilter) {
+    timefilter.setTime({
+      from: savedQuery.attributes.timefilter.from,
+      to: savedQuery.attributes.timefilter.to,
+    });
+    if (savedQuery.attributes.timefilter.refreshInterval) {
+      timefilter.setRefreshInterval(savedQuery.attributes.timefilter.refreshInterval);
+    }
+  }
+
+  // query string
+  setQueryStringState(savedQuery.attributes.query);
+
+  // filters
+  const savedQueryFilters = savedQuery.attributes.filters || [];
+  const globalFilters = filterManager.getGlobalFilters();
+  filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
+};
diff --git a/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts b/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts
new file mode 100644
index 0000000000000..32b8db803b4d4
--- /dev/null
+++ b/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts
@@ -0,0 +1,89 @@
+/*
+ * 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 { useState, useMemo, useEffect, DependencyList, SetStateAction, Dispatch } from 'react';
+import { i18n } from '@kbn/i18n';
+import { CoreStart } from 'kibana/public';
+import { SavedQuery } from '../../../query';
+import { DataPublicPluginStart } from '../../..';
+import { populateStateFromSavedQuery } from './populate_state_from_saved_query';
+import { clearStateFromSavedQuery } from './clear_saved_query';
+
+interface UseSavedQueriesProps {
+  queryService: DataPublicPluginStart['query'];
+  setQuery: Function;
+  notifications: CoreStart['notifications'];
+  uiSettings: CoreStart['uiSettings'];
+  savedQueryId?: string;
+}
+
+type UseSavedQueriesRet = [
+  SavedQuery | undefined,
+  Dispatch<SetStateAction<SavedQuery | undefined>>
+];
+
+export const useSavedQuery = (
+  props: UseSavedQueriesProps,
+  deps: DependencyList
+): UseSavedQueriesRet => {
+  // Handle saved queries
+  const [savedQuery, setSavedQuery] = useState<SavedQuery>();
+  useMemo(() => {
+    const fetchSavedQuery = async () => {
+      if (props.savedQueryId) {
+        try {
+          // fetch saved query
+          const newSavedQuery = await props.queryService.savedQueries.getSavedQuery(
+            props.savedQueryId
+          );
+          // Make sure we set the saved query to the most recent one
+          if (newSavedQuery && newSavedQuery.id === props.savedQueryId) {
+            setSavedQuery(newSavedQuery);
+          }
+        } catch (error) {
+          // Clear saved query
+          setSavedQuery(undefined);
+          // notify of saving error
+          props.notifications.toasts.addWarning({
+            title: i18n.translate('data.search.unableToGetSavedQueryToastTitle', {
+              defaultMessage: 'Unable to load saved query {savedQueryId}',
+              values: { savedQueryId: props.savedQueryId },
+            }),
+            text: `${error.message}`,
+          });
+        }
+      } else {
+        // Clear saved query
+        setSavedQuery(undefined);
+      }
+    };
+
+    fetchSavedQuery();
+  }, [props.notifications.toasts, props.queryService.savedQueries, props.savedQueryId]);
+
+  useEffect(() => {
+    if (savedQuery) {
+      populateStateFromSavedQuery(props.queryService, savedQuery, props.setQuery);
+    } else {
+      clearStateFromSavedQuery(props.queryService, props.setQuery, props.uiSettings);
+    }
+  }, [savedQuery, props.queryService, props.setQuery, props.uiSettings]);
+
+  return [savedQuery, setSavedQuery];
+};

From 73b0b2bbef6dd9d222a88f75a678f660a591e381 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 4 Feb 2020 13:46:21 +0200
Subject: [PATCH 25/29] Added some tests

---
 .../search_bar/lib/clear_saved_query.test.ts  |  55 +++++++++
 .../populate_state_from_saved_query.test.ts   | 115 ++++++++++++++++++
 2 files changed, 170 insertions(+)
 create mode 100644 src/plugins/data/public/ui/search_bar/lib/clear_saved_query.test.ts
 create mode 100644 src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.test.ts

diff --git a/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.test.ts b/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.test.ts
new file mode 100644
index 0000000000000..b0f0c26a83dce
--- /dev/null
+++ b/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.test.ts
@@ -0,0 +1,55 @@
+/*
+ * 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 { clearStateFromSavedQuery } from './clear_saved_query';
+
+import { dataPluginMock } from '../../../mocks';
+import { coreMock } from '../../../../../../core/public/mocks';
+import { DataPublicPluginStart } from '../../../types';
+import { Query } from '../../..';
+
+describe('clearStateFromSavedQuery', () => {
+  let dataMock: jest.Mocked<DataPublicPluginStart>;
+  const core = coreMock.createStart();
+
+  beforeEach(() => {
+    dataMock = dataPluginMock.createStartContract();
+  });
+
+  it('should clear filters and query', async () => {
+    const setQueryState = jest.fn();
+    dataMock.query.filterManager.removeAll = jest.fn();
+    clearStateFromSavedQuery(dataMock.query, setQueryState, core.uiSettings);
+    expect(setQueryState).toHaveBeenCalled();
+    expect(dataMock.query.filterManager.removeAll).toHaveBeenCalled();
+  });
+
+  it('should use search:queryLanguage', async () => {
+    const LANGUAGE = 'banana';
+    const setQueryState = jest.fn();
+    dataMock.query.filterManager.removeAll = jest.fn();
+    core.uiSettings.get.mockImplementation((key: string) => {
+      return key === 'search:queryLanguage' ? LANGUAGE : undefined;
+    });
+    clearStateFromSavedQuery(dataMock.query, setQueryState, core.uiSettings);
+    expect(setQueryState).toHaveBeenCalled();
+    expect((setQueryState.mock.calls[0][0] as Query).language).toBe(LANGUAGE);
+    expect(dataMock.query.filterManager.removeAll).toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.test.ts b/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.test.ts
new file mode 100644
index 0000000000000..e12bc734692c9
--- /dev/null
+++ b/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.test.ts
@@ -0,0 +1,115 @@
+/*
+ * 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 { populateStateFromSavedQuery } from './populate_state_from_saved_query';
+
+import { dataPluginMock } from '../../../mocks';
+import { DataPublicPluginStart } from '../../../types';
+import { SavedQuery, Query, esFilters } from '../../..';
+import { getFilter } from '../../../query/filter_manager/test_helpers/get_stub_filter';
+
+describe('populateStateFromSavedQuery', () => {
+  let dataMock: jest.Mocked<DataPublicPluginStart>;
+
+  const baseSavedQuery: SavedQuery = {
+    id: 'test',
+    attributes: {
+      title: 'test',
+      description: 'test',
+      query: {
+        query: 'test',
+        language: 'kuery',
+      },
+    },
+  };
+
+  beforeEach(() => {
+    dataMock = dataPluginMock.createStartContract();
+    dataMock.query.filterManager.setFilters = jest.fn();
+    dataMock.query.filterManager.getGlobalFilters = jest.fn().mockReturnValue([]);
+  });
+
+  it('should set query', async () => {
+    const setQueryState = jest.fn();
+    const savedQuery: SavedQuery = {
+      ...baseSavedQuery,
+    };
+    populateStateFromSavedQuery(dataMock.query, savedQuery, setQueryState);
+    expect(setQueryState).toHaveBeenCalled();
+  });
+
+  it('should set filters', async () => {
+    const setQueryState = jest.fn();
+    const savedQuery: SavedQuery = {
+      ...baseSavedQuery,
+    };
+    const f1 = getFilter(esFilters.FilterStateStore.APP_STATE, false, false, 'age', 34);
+    savedQuery.attributes.filters = [f1];
+    populateStateFromSavedQuery(dataMock.query, savedQuery, setQueryState);
+    expect(setQueryState).toHaveBeenCalled();
+    expect(dataMock.query.filterManager.setFilters).toHaveBeenCalledWith([f1]);
+  });
+
+  it('should preserve global filters', async () => {
+    const globalFilter = getFilter(
+      esFilters.FilterStateStore.GLOBAL_STATE,
+      false,
+      false,
+      'age',
+      34
+    );
+    dataMock.query.filterManager.getGlobalFilters = jest.fn().mockReturnValue([globalFilter]);
+    const setQueryState = jest.fn();
+    const savedQuery: SavedQuery = {
+      ...baseSavedQuery,
+    };
+    const f1 = getFilter(esFilters.FilterStateStore.APP_STATE, false, false, 'age', 34);
+    savedQuery.attributes.filters = [f1];
+    populateStateFromSavedQuery(dataMock.query, savedQuery, setQueryState);
+    expect(setQueryState).toHaveBeenCalled();
+    expect(dataMock.query.filterManager.setFilters).toHaveBeenCalledWith([globalFilter, f1]);
+  });
+
+  it('should update timefilter', async () => {
+    const savedQuery: SavedQuery = {
+      ...baseSavedQuery,
+    };
+    savedQuery.attributes.timefilter = {
+      from: '2018',
+      to: '2019',
+      refreshInterval: {
+        pause: true,
+        value: 10,
+      },
+    };
+
+    dataMock.query.timefilter.timefilter.setTime = jest.fn();
+    dataMock.query.timefilter.timefilter.setRefreshInterval = jest.fn();
+
+    populateStateFromSavedQuery(dataMock.query, savedQuery, jest.fn());
+
+    expect(dataMock.query.timefilter.timefilter.setTime).toHaveBeenCalledWith({
+      from: savedQuery.attributes.timefilter.from,
+      to: savedQuery.attributes.timefilter.to,
+    });
+    expect(dataMock.query.timefilter.timefilter.setRefreshInterval).toHaveBeenCalledWith(
+      savedQuery.attributes.timefilter.refreshInterval
+    );
+  });
+});

From 74965f60eaad55316aed848cc968a8b8c19d289b Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 4 Feb 2020 14:12:00 +0200
Subject: [PATCH 26/29] context view

---
 .../kibana/public/discover/np_ready/angular/context_app.html   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
index 2e04cae9220f6..2f7437faa8b2c 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
@@ -5,8 +5,9 @@
   show-save-query="false"
   show-date-picker="false"
   
+  filters="contextApp.state.queryParameters.filters"	
+  on-filters-updated="contextApp.actions.updateFilters"
   index-patterns="[contextApp.indexPattern]"
-  use-default-behaviors="true"
 >
 </kbn-top-nav>
 

From 782a85776657d936e7337dbb92f61777782f566e Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 4 Feb 2020 14:17:47 +0200
Subject: [PATCH 27/29] Remove useMemo

---
 .../public/ui/search_bar/create_search_bar.tsx  | 17 +++++++----------
 .../public/ui/search_bar/lib/use_saved_query.ts | 10 ++++------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 6290d86fc048e..d2f9cb6da716b 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -133,16 +133,13 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
     });
 
     // Fetch and update UI from saved query
-    const [savedQuery, setSavedQuery] = useSavedQuery(
-      {
-        queryService: data.query,
-        setQuery,
-        savedQueryId: props.savedQueryId,
-        notifications: core.notifications,
-        uiSettings: core.uiSettings,
-      },
-      [props.savedQueryId]
-    );
+    const [savedQuery, setSavedQuery] = useSavedQuery({
+      queryService: data.query,
+      setQuery,
+      savedQueryId: props.savedQueryId,
+      notifications: core.notifications,
+      uiSettings: core.uiSettings,
+    });
 
     // Fire onQuerySubmit on query or timerange change
     useEffect(() => {
diff --git a/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts b/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts
index 32b8db803b4d4..a2566f709bf5a 100644
--- a/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts
+++ b/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { useState, useMemo, useEffect, DependencyList, SetStateAction, Dispatch } from 'react';
+import { useState, useEffect, SetStateAction, Dispatch } from 'react';
 import { i18n } from '@kbn/i18n';
 import { CoreStart } from 'kibana/public';
 import { SavedQuery } from '../../../query';
@@ -38,13 +38,11 @@ type UseSavedQueriesRet = [
   Dispatch<SetStateAction<SavedQuery | undefined>>
 ];
 
-export const useSavedQuery = (
-  props: UseSavedQueriesProps,
-  deps: DependencyList
-): UseSavedQueriesRet => {
+export const useSavedQuery = (props: UseSavedQueriesProps): UseSavedQueriesRet => {
   // Handle saved queries
   const [savedQuery, setSavedQuery] = useState<SavedQuery>();
-  useMemo(() => {
+
+  useEffect(() => {
     const fetchSavedQuery = async () => {
       if (props.savedQueryId) {
         try {

From 67289474ca7f7276758415f3be595e4711c0b7e7 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 4 Feb 2020 14:19:51 +0200
Subject: [PATCH 28/29] spaces

---
 .../kibana/public/discover/np_ready/angular/context_app.html  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
index 2f7437faa8b2c..3e0f8a8329154 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
@@ -4,8 +4,8 @@
   show-filter-bar="true"
   show-save-query="false"
   show-date-picker="false"
-  
-  filters="contextApp.state.queryParameters.filters"	
+
+  filters="contextApp.state.queryParameters.filters"
   on-filters-updated="contextApp.actions.updateFilters"
   index-patterns="[contextApp.indexPattern]"
 >

From 48527de4f8b94f63bdcc289d600be7a7615c6453 Mon Sep 17 00:00:00 2001
From: Liza K <liza.katz@elastic.co>
Date: Tue, 4 Feb 2020 19:59:30 +0200
Subject: [PATCH 29/29] Support filter intial values Improve useSavedQuery hook
 in terface

---
 .../np_ready/angular/context_app.html         |  6 +-
 .../discover/np_ready/angular/context_app.js  |  8 +-
 .../ui/search_bar/create_search_bar.tsx       | 13 +--
 .../search_bar/lib/clear_saved_query.test.ts  | 13 +--
 .../ui/search_bar/lib/clear_saved_query.ts    |  6 +-
 .../populate_state_from_saved_query.test.ts   | 10 +--
 .../lib/populate_state_from_saved_query.ts    |  4 +-
 .../ui/search_bar/lib/use_filter_manager.ts   |  6 +-
 .../ui/search_bar/lib/use_saved_query.ts      | 89 ++++++++++---------
 .../data/public/ui/search_bar/search_bar.tsx  |  2 +-
 10 files changed, 78 insertions(+), 79 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
index 2f7437faa8b2c..16e1aa758232e 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.html
@@ -2,12 +2,12 @@
   app-name="'context'"
   show-search-bar="true"
   show-filter-bar="true"
+  show-query-bar="false"
   show-save-query="false"
   show-date-picker="false"
-  
-  filters="contextApp.state.queryParameters.filters"	
-  on-filters-updated="contextApp.actions.updateFilters"
+
   index-patterns="[contextApp.indexPattern]"
+  use-default-behaviors="true"
 >
 </kbn-top-nav>
 
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.js
index 5fa0958249d79..6549f13556373 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.js
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_app.js
@@ -18,7 +18,7 @@
  */
 
 import _ from 'lodash';
-import { getServices, callAfterBindingsWorkaround, getAngularModule } from '../../kibana_services';
+import { callAfterBindingsWorkaround, getAngularModule } from '../../kibana_services';
 import contextAppTemplate from './context_app.html';
 import './context/components/action_bar';
 import { getFirstSortableField } from './context/api/utils/sorting';
@@ -34,8 +34,6 @@ import {
   QueryActionsProvider,
 } from './context/query';
 
-const { timefilter } = getServices();
-
 const module = getAngularModule();
 
 module.directive('contextApp', function ContextApp() {
@@ -61,10 +59,6 @@ module.directive('contextApp', function ContextApp() {
 function ContextAppController($scope, config, Private) {
   const queryParameterActions = getQueryParameterActions();
   const queryActions = Private(QueryActionsProvider);
-
-  timefilter.disableAutoRefreshSelector();
-  timefilter.disableTimeRangeSelector();
-
   this.state = createInitialState(
     parseInt(config.get('context:step'), 10),
     getFirstSortableField(this.indexPattern, config.get('context:tieBreakerFields')),
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index d2f9cb6da716b..71d76f4db49e2 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -92,10 +92,10 @@ const defaultOnQuerySubmit = (
 };
 
 // Respond to user clearing a saved query
-const defaultOnClearSavedQuery = (props: StatefulSearchBarProps, setSavedQuery: Function) => {
+const defaultOnClearSavedQuery = (props: StatefulSearchBarProps, clearSavedQuery: Function) => {
   if (!props.useDefaultBehaviors) return props.onClearSavedQuery;
   return () => {
-    setSavedQuery(undefined);
+    clearSavedQuery();
     if (props.onSavedQueryIdChange) props.onSavedQueryIdChange();
   };
 };
@@ -127,13 +127,16 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
 
     // handle service state updates.
     // i.e. filters being added from a visualization directly to filterManager.
-    const { filters } = useFilterManager({ filterManager: data.query.filterManager });
+    const { filters } = useFilterManager({
+      filters: props.filters,
+      filterManager: data.query.filterManager,
+    });
     const { timeRange, refreshInterval } = useTimefilter({
       timefilter: data.query.timefilter.timefilter,
     });
 
     // Fetch and update UI from saved query
-    const [savedQuery, setSavedQuery] = useSavedQuery({
+    const { savedQuery, setSavedQuery, clearSavedQuery } = useSavedQuery({
       queryService: data.query,
       setQuery,
       savedQueryId: props.savedQueryId,
@@ -183,7 +186,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           onRefreshChange={defaultOnRefreshChange(data.query)}
           savedQuery={savedQuery}
           onQuerySubmit={defaultOnQuerySubmit(props, data.query, query, setQuery)}
-          onClearSavedQuery={defaultOnClearSavedQuery(props, setSavedQuery)}
+          onClearSavedQuery={defaultOnClearSavedQuery(props, clearSavedQuery)}
           onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, setSavedQuery)}
           onSaved={defaultOnSavedQueryUpdated(props, setSavedQuery)}
           {...overrideDefaultBehaviors(props)}
diff --git a/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.test.ts b/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.test.ts
index b0f0c26a83dce..ccfe5464b9598 100644
--- a/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.test.ts
+++ b/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.test.ts
@@ -20,13 +20,12 @@
 import { clearStateFromSavedQuery } from './clear_saved_query';
 
 import { dataPluginMock } from '../../../mocks';
-import { coreMock } from '../../../../../../core/public/mocks';
 import { DataPublicPluginStart } from '../../../types';
 import { Query } from '../../..';
 
 describe('clearStateFromSavedQuery', () => {
+  const DEFAULT_LANGUAGE = 'banana';
   let dataMock: jest.Mocked<DataPublicPluginStart>;
-  const core = coreMock.createStart();
 
   beforeEach(() => {
     dataMock = dataPluginMock.createStartContract();
@@ -35,21 +34,17 @@ describe('clearStateFromSavedQuery', () => {
   it('should clear filters and query', async () => {
     const setQueryState = jest.fn();
     dataMock.query.filterManager.removeAll = jest.fn();
-    clearStateFromSavedQuery(dataMock.query, setQueryState, core.uiSettings);
+    clearStateFromSavedQuery(dataMock.query, setQueryState, DEFAULT_LANGUAGE);
     expect(setQueryState).toHaveBeenCalled();
     expect(dataMock.query.filterManager.removeAll).toHaveBeenCalled();
   });
 
   it('should use search:queryLanguage', async () => {
-    const LANGUAGE = 'banana';
     const setQueryState = jest.fn();
     dataMock.query.filterManager.removeAll = jest.fn();
-    core.uiSettings.get.mockImplementation((key: string) => {
-      return key === 'search:queryLanguage' ? LANGUAGE : undefined;
-    });
-    clearStateFromSavedQuery(dataMock.query, setQueryState, core.uiSettings);
+    clearStateFromSavedQuery(dataMock.query, setQueryState, DEFAULT_LANGUAGE);
     expect(setQueryState).toHaveBeenCalled();
-    expect((setQueryState.mock.calls[0][0] as Query).language).toBe(LANGUAGE);
+    expect((setQueryState.mock.calls[0][0] as Query).language).toBe(DEFAULT_LANGUAGE);
     expect(dataMock.query.filterManager.removeAll).toHaveBeenCalled();
   });
 });
diff --git a/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.ts b/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.ts
index a1443b753cd93..b2c777261c257 100644
--- a/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.ts
+++ b/src/plugins/data/public/ui/search_bar/lib/clear_saved_query.ts
@@ -16,18 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { CoreStart } from 'kibana/public';
 import { QueryStart } from '../../../query';
 
 export const clearStateFromSavedQuery = (
   queryService: QueryStart,
   setQueryStringState: Function,
-  uiSettings: CoreStart['uiSettings']
+  defaultLanguage: string
 ) => {
   queryService.filterManager.removeAll();
   setQueryStringState({
     query: '',
-    language: uiSettings.get('search:queryLanguage'),
+    language: defaultLanguage,
   });
 };
diff --git a/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.test.ts b/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.test.ts
index e12bc734692c9..3242b37becd95 100644
--- a/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.test.ts
+++ b/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.test.ts
@@ -21,7 +21,7 @@ import { populateStateFromSavedQuery } from './populate_state_from_saved_query';
 
 import { dataPluginMock } from '../../../mocks';
 import { DataPublicPluginStart } from '../../../types';
-import { SavedQuery, Query, esFilters } from '../../..';
+import { SavedQuery, esFilters } from '../../..';
 import { getFilter } from '../../../query/filter_manager/test_helpers/get_stub_filter';
 
 describe('populateStateFromSavedQuery', () => {
@@ -50,7 +50,7 @@ describe('populateStateFromSavedQuery', () => {
     const savedQuery: SavedQuery = {
       ...baseSavedQuery,
     };
-    populateStateFromSavedQuery(dataMock.query, savedQuery, setQueryState);
+    populateStateFromSavedQuery(dataMock.query, setQueryState, savedQuery);
     expect(setQueryState).toHaveBeenCalled();
   });
 
@@ -61,7 +61,7 @@ describe('populateStateFromSavedQuery', () => {
     };
     const f1 = getFilter(esFilters.FilterStateStore.APP_STATE, false, false, 'age', 34);
     savedQuery.attributes.filters = [f1];
-    populateStateFromSavedQuery(dataMock.query, savedQuery, setQueryState);
+    populateStateFromSavedQuery(dataMock.query, setQueryState, savedQuery);
     expect(setQueryState).toHaveBeenCalled();
     expect(dataMock.query.filterManager.setFilters).toHaveBeenCalledWith([f1]);
   });
@@ -81,7 +81,7 @@ describe('populateStateFromSavedQuery', () => {
     };
     const f1 = getFilter(esFilters.FilterStateStore.APP_STATE, false, false, 'age', 34);
     savedQuery.attributes.filters = [f1];
-    populateStateFromSavedQuery(dataMock.query, savedQuery, setQueryState);
+    populateStateFromSavedQuery(dataMock.query, setQueryState, savedQuery);
     expect(setQueryState).toHaveBeenCalled();
     expect(dataMock.query.filterManager.setFilters).toHaveBeenCalledWith([globalFilter, f1]);
   });
@@ -102,7 +102,7 @@ describe('populateStateFromSavedQuery', () => {
     dataMock.query.timefilter.timefilter.setTime = jest.fn();
     dataMock.query.timefilter.timefilter.setRefreshInterval = jest.fn();
 
-    populateStateFromSavedQuery(dataMock.query, savedQuery, jest.fn());
+    populateStateFromSavedQuery(dataMock.query, jest.fn(), savedQuery);
 
     expect(dataMock.query.timefilter.timefilter.setTime).toHaveBeenCalledWith({
       from: savedQuery.attributes.timefilter.from,
diff --git a/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.ts b/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.ts
index 7b2a73039e938..fd1517097753e 100644
--- a/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.ts
+++ b/src/plugins/data/public/ui/search_bar/lib/populate_state_from_saved_query.ts
@@ -21,8 +21,8 @@ import { QueryStart, SavedQuery } from '../../..';
 
 export const populateStateFromSavedQuery = (
   queryService: QueryStart,
-  savedQuery: SavedQuery,
-  setQueryStringState: Function
+  setQueryStringState: Function,
+  savedQuery: SavedQuery
 ) => {
   const {
     timefilter: { timefilter },
diff --git a/src/plugins/data/public/ui/search_bar/lib/use_filter_manager.ts b/src/plugins/data/public/ui/search_bar/lib/use_filter_manager.ts
index e6066b0c741dc..e889583aef609 100644
--- a/src/plugins/data/public/ui/search_bar/lib/use_filter_manager.ts
+++ b/src/plugins/data/public/ui/search_bar/lib/use_filter_manager.ts
@@ -19,14 +19,16 @@
 
 import { useState, useEffect } from 'react';
 import { Subscription } from 'rxjs';
-import { DataPublicPluginStart } from 'src/plugins/data/public';
+import { DataPublicPluginStart, esFilters } from '../../..';
 
 interface UseFilterManagerProps {
+  filters?: esFilters.Filter[];
   filterManager: DataPublicPluginStart['query']['filterManager'];
 }
 
 export const useFilterManager = (props: UseFilterManagerProps) => {
-  const [filters, setFilters] = useState(props.filterManager.getFilters());
+  // Filters should be either what's passed in the initial state or the current state of the filter manager
+  const [filters, setFilters] = useState(props.filters || props.filterManager.getFilters());
   useEffect(() => {
     const subscriptions = new Subscription();
 
diff --git a/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts b/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts
index a2566f709bf5a..fdeeaab1dff06 100644
--- a/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts
+++ b/src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { useState, useEffect, SetStateAction, Dispatch } from 'react';
+import { useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { CoreStart } from 'kibana/public';
 import { SavedQuery } from '../../../query';
@@ -33,55 +33,62 @@ interface UseSavedQueriesProps {
   savedQueryId?: string;
 }
 
-type UseSavedQueriesRet = [
-  SavedQuery | undefined,
-  Dispatch<SetStateAction<SavedQuery | undefined>>
-];
+interface UseSavedQueriesReturn {
+  savedQuery?: SavedQuery;
+  setSavedQuery: (savedQuery: SavedQuery) => void;
+  clearSavedQuery: () => void;
+}
 
-export const useSavedQuery = (props: UseSavedQueriesProps): UseSavedQueriesRet => {
+export const useSavedQuery = (props: UseSavedQueriesProps): UseSavedQueriesReturn => {
   // Handle saved queries
-  const [savedQuery, setSavedQuery] = useState<SavedQuery>();
+  const defaultLanguage = props.uiSettings.get('search:queryLanguage');
+  const [savedQuery, setSavedQuery] = useState<SavedQuery | undefined>();
 
+  // Effect is used to convert a saved query id into an object
   useEffect(() => {
-    const fetchSavedQuery = async () => {
-      if (props.savedQueryId) {
-        try {
-          // fetch saved query
-          const newSavedQuery = await props.queryService.savedQueries.getSavedQuery(
-            props.savedQueryId
-          );
-          // Make sure we set the saved query to the most recent one
-          if (newSavedQuery && newSavedQuery.id === props.savedQueryId) {
-            setSavedQuery(newSavedQuery);
-          }
-        } catch (error) {
-          // Clear saved query
-          setSavedQuery(undefined);
-          // notify of saving error
-          props.notifications.toasts.addWarning({
-            title: i18n.translate('data.search.unableToGetSavedQueryToastTitle', {
-              defaultMessage: 'Unable to load saved query {savedQueryId}',
-              values: { savedQueryId: props.savedQueryId },
-            }),
-            text: `${error.message}`,
-          });
+    const fetchSavedQuery = async (savedQueryId: string) => {
+      try {
+        // fetch saved query
+        const newSavedQuery = await props.queryService.savedQueries.getSavedQuery(savedQueryId);
+        // Make sure we set the saved query to the most recent one
+        if (newSavedQuery && newSavedQuery.id === savedQueryId) {
+          setSavedQuery(newSavedQuery);
+          populateStateFromSavedQuery(props.queryService, props.setQuery, newSavedQuery);
         }
-      } else {
+      } catch (error) {
         // Clear saved query
         setSavedQuery(undefined);
+        clearStateFromSavedQuery(props.queryService, props.setQuery, defaultLanguage);
+        // notify of saving error
+        props.notifications.toasts.addWarning({
+          title: i18n.translate('data.search.unableToGetSavedQueryToastTitle', {
+            defaultMessage: 'Unable to load saved query {savedQueryId}',
+            values: { savedQueryId },
+          }),
+          text: `${error.message}`,
+        });
       }
     };
 
-    fetchSavedQuery();
-  }, [props.notifications.toasts, props.queryService.savedQueries, props.savedQueryId]);
-
-  useEffect(() => {
-    if (savedQuery) {
-      populateStateFromSavedQuery(props.queryService, savedQuery, props.setQuery);
-    } else {
-      clearStateFromSavedQuery(props.queryService, props.setQuery, props.uiSettings);
-    }
-  }, [savedQuery, props.queryService, props.setQuery, props.uiSettings]);
+    if (props.savedQueryId) fetchSavedQuery(props.savedQueryId);
+  }, [
+    defaultLanguage,
+    props.notifications.toasts,
+    props.queryService,
+    props.queryService.savedQueries,
+    props.savedQueryId,
+    props.setQuery,
+  ]);
 
-  return [savedQuery, setSavedQuery];
+  return {
+    savedQuery,
+    setSavedQuery: (q: SavedQuery) => {
+      setSavedQuery(q);
+      populateStateFromSavedQuery(props.queryService, props.setQuery, q);
+    },
+    clearSavedQuery: () => {
+      setSavedQuery(undefined);
+      clearStateFromSavedQuery(props.queryService, props.setQuery, defaultLanguage);
+    },
+  };
 };
diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
index b4e2f46b12a84..2f0cdb322912b 100644
--- a/src/plugins/data/public/ui/search_bar/search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -47,7 +47,6 @@ interface SearchBarInjectedDeps {
   timeHistory: TimeHistoryContract;
   // Filter bar
   onFiltersUpdated?: (filters: esFilters.Filter[]) => void;
-  filters?: esFilters.Filter[];
   // Date picker
   dateRangeFrom?: string;
   dateRangeTo?: string;
@@ -69,6 +68,7 @@ export interface SearchBarOwnProps {
   showFilterBar?: boolean;
   showDatePicker?: boolean;
   showAutoRefreshOnly?: boolean;
+  filters?: esFilters.Filter[];
   // Query bar - should be in SearchBarInjectedDeps
   query?: Query;
   // Show when user has privileges to save