temp

Author: mgiota

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

@@ -32,10 +32,13 @@ export function SLOSortBy({ state, onStateChange, loading }: Props) {
   const sortBy = state.sort.by;
 
   const handleChangeSortBy = ({ value, label }: { value: SortField; label: string }) => {
-    onStateChange({
-      page: 0,
-      sort: { by: value, direction: state.sort.direction },
-    });
+    onStateChange(
+      {
+        page: 0,
+        sort: { by: value, direction: state.sort.direction },
+      },
+      { replace: true }
+    );
   };
 
   const sortByOptions: Option[] = [

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

@@ -55,7 +55,7 @@ export function GroupView({
 
   const { results = [], total = 0 } = data ?? {};
   const handlePageClick = (pageNumber: number) => {
-    onStateChange({ page: pageNumber });
+    onStateChange({ page: pageNumber }, { replace: true });
   };
 
   if (isLoading || isRefetching) {
@@ -101,7 +101,7 @@ export function GroupView({
             itemsPerPage={perPage}
             itemsPerPageOptions={[10, 25, 50, 100]}
             onChangeItemsPerPage={(newPerPage) => {
-              onStateChange({ perPage: newPerPage, page: 0 });
+              onStateChange({ perPage: newPerPage, page: 0 }, { replace: true });
             }}
           />
         </EuiFlexItem>

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

@@ -37,10 +37,13 @@ export function SloGroupBy({ onStateChange, state, loading }: Props) {
     settings && (settings.useAllRemoteClusters || settings.selectedRemoteClusters.length > 0);
 
   const handleChangeGroupBy = (value: GroupByField) => {
-    onStateChange({
-      page: 0,
-      groupBy: value,
-    });
+    onStateChange(
+      {
+        page: 0,
+        groupBy: value,
+      },
+      { replace: true }
+    );
   };
   const groupByOptions: Option[] = [
     {

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

@@ -6,10 +6,9 @@
  */
 
 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, { useEffect } from 'react';
+import React from 'react';
 import { useKibana } from '../../../hooks/use_kibana';
 import { useSloCrudLoading } from '../hooks/use_crud_loading';
 import { useSloSummaryDataView } from '../hooks/use_summary_dataview';
@@ -18,7 +17,6 @@ import { QuickFilters } from './common/quick_filters';
 
 export function SloListSearchBar() {
   const {
-    data: { query },
     unifiedSearch: {
       ui: { SearchBar },
     },
@@ -29,18 +27,6 @@ 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`
@@ -50,12 +36,14 @@ 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,6 +44,9 @@ export function OverviewItem({
             }
             onStateChange({
               kqlQuery: query,
+              filters: [],
+              tagsFilter: undefined,
+              statusFilter: undefined,
             });
           }}
           css={{

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

@@ -33,12 +33,12 @@ export function UngroupedView({ sloList, loading, error, view }: Props) {
             pageCount={Math.ceil(total / perPage)}
             activePage={page}
             onChangePage={(newPage) => {
-              onStateChange({ page: newPage });
+              onStateChange({ page: newPage }, { replace: true });
             }}
             itemsPerPage={perPage}
             itemsPerPageOptions={[10, 25, 50, 100]}
             onChangeItemsPerPage={(newPerPage) => {
-              onStateChange({ perPage: newPerPage, page: 0 });
+              onStateChange({ perPage: newPerPage, page: 0 }, { replace: true });
             }}
           />
         </EuiFlexItem>

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>) => void;
+  onStateChange: (state: Partial<SearchState>, options?: { replace?: boolean }) => void;
 } {
   const [state, setState] = useState<SearchState>(DEFAULT_STATE);
   const history = useHistory();
@@ -67,9 +67,9 @@ export function useUrlSearchState(): {
     const sub = urlStateStorage.current
       ?.change$<SearchState>(SLO_LIST_SEARCH_URL_STORAGE_KEY)
       .subscribe((newSearchState) => {
-        if (newSearchState) {
-          setState(newSearchState);
-        }
+        // When URL has no search params, newSearchState will be null/undefined
+        // In that case, reset to DEFAULT_STATE
+        setState(newSearchState ?? DEFAULT_STATE);
       });
 
     setState(
@@ -84,12 +84,14 @@ export function useUrlSearchState(): {
   }, [urlStateStorage, sessionStorage]);
 
   const onStateChange = useCallback(
-    (newState: Partial<SearchState>) => {
+    (newState: Partial<SearchState>, options?: { replace?: boolean }) => {
       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: true,
+        replace: options?.replace ?? false,
       });
 
       // Discard search itself from session storage. Keep only view preferences