[TSVB] query bar shows randomly in editor page (#35081)

* [TSVB] query bar shows randomly in editor page

Fix: #31267

* Fix PR comments

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

@@ -23,7 +23,6 @@
           is-refresh-paused="model.refreshInterval.pause"
           refresh-interval="model.refreshInterval.value"
           on-refresh-change="onRefreshChange"
-          watch-depth="reference"
         ></search-bar>
       </div>
     </div>

src/legacy/core_plugins/kibana/public/discover/index.html

@@ -45,7 +45,6 @@
           is-refresh-paused="refreshInterval.pause"
           refresh-interval="refreshInterval.value"
           on-refresh-change="onRefreshChange"
-          watch-depth="reference"
         ></search-bar>
       </div>
     </div>

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

@@ -45,7 +45,6 @@
             refresh-interval="refreshInterval.value"
             show-auto-refresh-only="showAutoRefreshOnlyInQueryBar"
             on-refresh-change="onRefreshChange"
-            watch-depth="reference"
           ></search-bar>
         </div>
       </div>

src/legacy/ui/public/search_bar/components/search_bar.tsx

@@ -39,6 +39,10 @@ interface DateRange {
   to: string;
 }
 
+/**
+ * NgReact lib requires that changes to the props need to be made in the directive config as well
+ * See [search_bar\directive\index.js] file
+ */
 interface Props {
   query: {
     query: string;

src/legacy/ui/public/search_bar/directive/index.js

@@ -27,10 +27,33 @@ const app = uiModules.get('app/kibana', ['react']);
 app.directive('searchBar', (reactDirective, localStorage) => {
   return reactDirective(
     wrapInI18nContext(SearchBar),
-    undefined,
+    [
+      ['query', { watchDepth: 'reference' }],
+      ['store', { watchDepth: 'reference' }],
+      ['intl', { watchDepth: 'reference' }],
+
+      ['onQuerySubmit', { watchDepth: 'reference' }],
+      ['onFiltersUpdated', { watchDepth: 'reference' }],
+      ['onRefreshChange', { watchDepth: 'reference' }],
+
+      ['indexPatterns', { watchDepth: 'collection' }],
+      ['filters', { watchDepth: 'collection' }],
+
+      'appName',
+      'screenTitle',
+      'showFilterBar',
+      'showQueryBar',
+      'showDatePicker',
+      'dateRangeFrom',
+      'dateRangeTo',
+      'isRefreshPaused',
+      'refreshInterval',
+      'disableAutoFocus',
+      'showAutoRefreshOnly',
+    ],
     {},
     {
       store: localStorage,
-    }
+    },
   );
 });