[8.8] [Infrastructure UI] Hosts View: Unified Search bar with auto-re…

…fresh enabled (#157011) (#159543)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[Infrastructure UI] Hosts View: Unified Search bar with auto-refresh
enabled (#157011)](#157011)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"jennypavlova","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-06-13T08:07:58Z","message":"[Infrastructure
UI] Hosts View: Unified Search bar with auto-refresh enabled
(#157011)\n\nCloses #156690 \r\n\r\n## Summary\r\n\r\nThis PR adds a
flag (`isAutoRefreshDisabled`) to disable the default\r\nauto-refresh
option in the unified search.\r\n\r\n## Background\r\n\r\nThe auto
refresh is added by default when using a unified search bar
in\r\n[defaultOnRefreshChange](https://github.com/elastic/kibana/blob/main/src/plugins/unified_search/public/search_bar/create_search_bar.tsx/#L59)\r\nand
it appeared on the host view page when currently the
auto-refresh\r\noption is not supported.\r\n\r\n\r\n| with
`isAutoRefreshDisabled` (true) | without
`isAutoRefreshDisabled`\r\n(false/undefined) |\r\n|
------------------------------------
|\r\n-------------------------------------------------- |\r\n| <img
width=\"200\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/14139027/236862888-63efdb13-6b07-41c2-abe8-88247c9c96e1.png\">\r\n|
<img width=\"200\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/14139027/236862409-4f36ec6a-f274-4dae-960b-407ea30f330b.png\">\r\n|\r\n\r\n---------\r\n\r\nCo-authored-by:
Stratoula Kalafateli
<[email protected]>","sha":"77d864e4ff04027f800789259fd6c6194b51c59a","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Infra
Monitoring
UI","release_note:skip","backport:prev-minor","v8.9.0"],"number":157011,"url":"https://github.com/elastic/kibana/pull/157011","mergeCommit":{"message":"[Infrastructure
UI] Hosts View: Unified Search bar with auto-refresh enabled
(#157011)\n\nCloses #156690 \r\n\r\n## Summary\r\n\r\nThis PR adds a
flag (`isAutoRefreshDisabled`) to disable the default\r\nauto-refresh
option in the unified search.\r\n\r\n## Background\r\n\r\nThe auto
refresh is added by default when using a unified search bar
in\r\n[defaultOnRefreshChange](https://github.com/elastic/kibana/blob/main/src/plugins/unified_search/public/search_bar/create_search_bar.tsx/#L59)\r\nand
it appeared on the host view page when currently the
auto-refresh\r\noption is not supported.\r\n\r\n\r\n| with
`isAutoRefreshDisabled` (true) | without
`isAutoRefreshDisabled`\r\n(false/undefined) |\r\n|
------------------------------------
|\r\n-------------------------------------------------- |\r\n| <img
width=\"200\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/14139027/236862888-63efdb13-6b07-41c2-abe8-88247c9c96e1.png\">\r\n|
<img width=\"200\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/14139027/236862409-4f36ec6a-f274-4dae-960b-407ea30f330b.png\">\r\n|\r\n\r\n---------\r\n\r\nCo-authored-by:
Stratoula Kalafateli
<[email protected]>","sha":"77d864e4ff04027f800789259fd6c6194b51c59a"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/157011","number":157011,"mergeCommit":{"message":"[Infrastructure
UI] Hosts View: Unified Search bar with auto-refresh enabled
(#157011)\n\nCloses #156690 \r\n\r\n## Summary\r\n\r\nThis PR adds a
flag (`isAutoRefreshDisabled`) to disable the default\r\nauto-refresh
option in the unified search.\r\n\r\n## Background\r\n\r\nThe auto
refresh is added by default when using a unified search bar
in\r\n[defaultOnRefreshChange](https://github.com/elastic/kibana/blob/main/src/plugins/unified_search/public/search_bar/create_search_bar.tsx/#L59)\r\nand
it appeared on the host view page when currently the
auto-refresh\r\noption is not supported.\r\n\r\n\r\n| with
`isAutoRefreshDisabled` (true) | without
`isAutoRefreshDisabled`\r\n(false/undefined) |\r\n|
------------------------------------
|\r\n-------------------------------------------------- |\r\n| <img
width=\"200\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/14139027/236862888-63efdb13-6b07-41c2-abe8-88247c9c96e1.png\">\r\n|
<img width=\"200\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/14139027/236862409-4f36ec6a-f274-4dae-960b-407ea30f330b.png\">\r\n|\r\n\r\n---------\r\n\r\nCo-authored-by:
Stratoula Kalafateli
<[email protected]>","sha":"77d864e4ff04027f800789259fd6c6194b51c59a"}}]}]
BACKPORT-->

Co-authored-by: jennypavlova <[email protected]>

src/plugins/unified_search/public/__stories__/search_bar.stories.tsx

@@ -249,9 +249,16 @@ storiesOf('SearchBar', module)
       showDatePicker: false,
     } as SearchBarProps)
   )
-  .add('with date picker off', () =>
+  .add('with the default date picker auto refresh interval on', () =>
     wrapSearchBarInContext({
-      showDatePicker: false,
+      showDatePicker: true,
+      onRefreshChange: action('onRefreshChange'),
+    } as SearchBarProps)
+  )
+  .add('with the default date picker auto refresh interval off', () =>
+    wrapSearchBarInContext({
+      showDatePicker: true,
+      isAutoRefreshDisabled: true,
     } as SearchBarProps)
   )
   .add('with only the date picker on', () =>

src/plugins/unified_search/public/search_bar/create_search_bar.tsx

@@ -227,7 +227,11 @@ export function createSearchBar({
             filters={filters}
             query={query}
             onFiltersUpdated={defaultFiltersUpdated(data.query, props.onFiltersUpdated)}
-            onRefreshChange={defaultOnRefreshChange(data.query, props.onRefreshChange)}
+            onRefreshChange={
+              !props.isAutoRefreshDisabled
+                ? defaultOnRefreshChange(data.query, props.onRefreshChange)
+                : undefined
+            }
             savedQuery={savedQuery}
             onQuerySubmit={defaultOnQuerySubmit(props, data.query, query)}
             onRefresh={props.onRefresh}

src/plugins/unified_search/public/search_bar/search_bar.tsx

@@ -84,6 +84,8 @@ export interface SearchBarOwnProps<QT extends AggregateQuery | Query = Query> {
   // Autorefresh
   onRefreshChange?: (options: { isPaused: boolean; refreshInterval: number }) => void;
   indicateNoData?: boolean;
+  // Disables the default auto-refresh option inside the date picker
+  isAutoRefreshDisabled?: boolean;
 
   placeholder?: string;
   isClearable?: boolean;

x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/unified_search_bar.tsx

@@ -69,6 +69,7 @@ export const UnifiedSearchBar = () => {
             showQueryInput
             showQueryMenu
             useDefaultBehaviors
+            isAutoRefreshDisabled
           />
         </EuiFlexItem>
         <EuiFlexItem>