From c3f2c1b1946b1b668552bba4cc55b434e56d14cf Mon Sep 17 00:00:00 2001
From: Kevin Delemme <kevin.delemme@elastic.co>
Date: Thu, 21 Sep 2023 14:55:42 -0400
Subject: [PATCH] fix(slo): search bar (#166945)

---
 .../public/pages/slos/components/slo_list.tsx     | 15 ++-------------
 .../slo_list_search_filter_sort_bar.tsx           |  7 ++++++-
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx
index 9e1db8c019381f..651a97d3644391 100644
--- a/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx
+++ b/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx
@@ -21,7 +21,7 @@ export function SloList({ autoRefresh }: Props) {
   const [query, setQuery] = useState('');
   const [sort, setSort] = useState<SortField | undefined>('status');
 
-  const { isInitialLoading, isLoading, isRefetching, isError, sloList, refetch } = useFetchSloList({
+  const { isLoading, isRefetching, isError, sloList } = useFetchSloList({
     page: activePage + 1,
     kqlQuery: query,
     sortBy: sort,
@@ -38,34 +38,23 @@ export function SloList({ autoRefresh }: Props) {
 
   const handlePageClick = (pageNumber: number) => {
     setActivePage(pageNumber);
-    refetch();
   };
 
   const handleChangeQuery = (newQuery: string) => {
     setActivePage(0);
     setQuery(newQuery);
-    refetch();
   };
 
   const handleChangeSort = (newSort: SortField | undefined) => {
     setActivePage(0);
     setSort(newSort);
-    refetch();
   };
 
   return (
     <EuiFlexGroup direction="column" gutterSize="m" data-test-subj="sloList">
       <EuiFlexItem grow>
         <SloListSearchFilterSortBar
-          loading={
-            isInitialLoading ||
-            isLoading ||
-            isRefetching ||
-            isCreatingSlo ||
-            isCloningSlo ||
-            isUpdatingSlo ||
-            isDeletingSlo
-          }
+          loading={isLoading || isCreatingSlo || isCloningSlo || isUpdatingSlo || isDeletingSlo}
           onChangeQuery={handleChangeQuery}
           onChangeSort={handleChangeSort}
         />
diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list_search_filter_sort_bar.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list_search_filter_sort_bar.tsx
index 8a9b22c6b5c7fc..c1d9c6b3c3a07d 100644
--- a/x-pack/plugins/observability/public/pages/slos/components/slo_list_search_filter_sort_bar.tsx
+++ b/x-pack/plugins/observability/public/pages/slos/components/slo_list_search_filter_sort_bar.tsx
@@ -16,6 +16,7 @@ import {
   EuiSelectableOption,
 } from '@elastic/eui';
 import { EuiSelectableOptionCheckedType } from '@elastic/eui/src/components/selectable/selectable_option';
+import { Query } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { QueryStringInput } from '@kbn/unified-search-plugin/public';
 import React, { useState } from 'react';
@@ -103,9 +104,13 @@ export function SloListSearchFilterSortBar({
             unifiedSearch,
           }}
           disableAutoFocus
-          onSubmit={() => onChangeQuery(query)}
+          onSubmit={(value: Query) => {
+            setQuery(String(value.query));
+            onChangeQuery(String(value.query));
+          }}
           disableLanguageSwitcher
           isDisabled={loading}
+          autoSubmit
           indexPatterns={dataView ? [dataView] : []}
           placeholder={i18n.translate('xpack.observability.slo.list.search', {
             defaultMessage: 'Search your SLOs...',