cleanup

Author: mgiota

x-pack/solutions/observability/plugins/slo/public/pages/slos/components/slo_list_search_bar.tsx

@@ -6,9 +6,10 @@
  */
 
 import { css } from '@emotion/react';
+import type { Query } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { observabilityAppId } from '@kbn/observability-plugin/public';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useKibana } from '../../../hooks/use_kibana';
 import { useSloCrudLoading } from '../hooks/use_crud_loading';
 import { useSloSummaryDataView } from '../hooks/use_summary_dataview';
@@ -17,6 +18,7 @@ import { QuickFilters } from './common/quick_filters';
 
 export function SloListSearchBar() {
   const {
+    data: { query },
     unifiedSearch: {
       ui: { SearchBar },
     },
@@ -27,6 +29,18 @@ export function SloListSearchBar() {
 
   const { isLoading: isDataViewLoading, data: dataView } = useSloSummaryDataView();
 
+  useEffect(() => {
+    const sub = query.state$.subscribe(() => {
+      const queryState = query.getState();
+      onStateChange({
+        kqlQuery: String((queryState.query as Query).query),
+        filters: queryState.filters,
+      });
+    });
+
+    return () => sub.unsubscribe();
+  }, [onStateChange, query]);
+
   return (
     <div
       css={css`
@@ -36,14 +50,12 @@ export function SloListSearchBar() {
       `}
     >
       <SearchBar
-        key={`${state.kqlQuery}-${JSON.stringify(state.filters)}`}
         appName={observabilityAppId}
         placeholder={PLACEHOLDER}
         indexPatterns={dataView ? [dataView] : []}
         isDisabled={isSloCrudLoading}
         renderQueryInputAppend={() => (
           <QuickFilters
-            key={`quick-filters-${state.tagsFilter?.meta?.key}-${state.statusFilter?.meta?.key}`}
             dataView={dataView}
             initialState={state}
             loading={isSloCrudLoading || isDataViewLoading}

x-pack/solutions/observability/plugins/slo/public/pages/slos/components/slos_overview/overview_item.tsx

@@ -44,9 +44,6 @@ export function OverviewItem({
             }
             onStateChange({
               kqlQuery: query,
-              filters: [],
-              tagsFilter: undefined,
-              statusFilter: undefined,
             });
           }}
           css={{

x-pack/solutions/observability/plugins/slo/public/pages/slos/hooks/use_url_search_state.ts

@@ -49,7 +49,7 @@ export const DEFAULT_STATE: SearchState = {
 
 export function useUrlSearchState(): {
   state: SearchState;
-  onStateChange: (state: Partial<SearchState>, options?: { replace?: boolean }) => void;
+  onStateChange: (state: Partial<SearchState>) => void;
 } {
   const [state, setState] = useState<SearchState>(DEFAULT_STATE);
   const history = useHistory();
@@ -84,14 +84,12 @@ export function useUrlSearchState(): {
   }, [urlStateStorage, sessionStorage]);
 
   const onStateChange = useCallback(
-    (newState: Partial<SearchState>, options?: { replace?: boolean }) => {
+    (newState: Partial<SearchState>) => {
       const updatedState = { ...state, page: 0, ...newState };
       setState(() => updatedState);
 
-      // Use push (replace: false) by default to create new history entries
-      // This allows back button to work properly
       urlStateStorage.current?.set(SLO_LIST_SEARCH_URL_STORAGE_KEY, updatedState, {
-        replace: options?.replace ?? false,
+        replace: false,
       });
 
       // Discard search itself from session storage. Keep only view preferences