[8.10] feat(slo): persist auto refresh state in localstorage (#163615) (#164347)

# Backport

This will backport the following commits from `main` to `8.10`:
- [feat(slo): persist auto refresh state in localstorage
(#163615)](https://github.com/elastic/kibana/pull/163615)

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

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

<!--BACKPORT [{"author":{"name":"Kevin
Delemme","email":"kevin.delemme@elastic.co"},"sourceCommit":{"committedDate":"2023-08-21T18:44:31Z","message":"feat(slo):
persist auto refresh state in localstorage
(#163615)","sha":"dc3b4862ed4d70e2a7739f42d1d1ae0eafc06ac5","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","Team:
Actionable
Observability","backport:prev-minor","v8.10.0","v8.11.0"],"number":163615,"url":"https://github.com/elastic/kibana/pull/163615","mergeCommit":{"message":"feat(slo):
persist auto refresh state in localstorage
(#163615)","sha":"dc3b4862ed4d70e2a7739f42d1d1ae0eafc06ac5"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/163615","number":163615,"mergeCommit":{"message":"feat(slo):
persist auto refresh state in localstorage
(#163615)","sha":"dc3b4862ed4d70e2a7739f42d1d1ae0eafc06ac5"}}]}]
BACKPORT-->

Co-authored-by: Kevin Delemme <kevin.delemme@elastic.co>

x-pack/plugins/observability/public/components/slo/auto_refresh_button/auto_refresh_button.tsx

@@ -10,20 +10,14 @@ import { i18n } from '@kbn/i18n';
 
 interface Props {
   isAutoRefreshing: boolean;
-  dataTestSubj?: string;
   disabled?: boolean;
   onClick: () => void;
 }
 
-export function AutoRefreshButton({
-  dataTestSubj = 'autoRefreshButton',
-  disabled,
-  isAutoRefreshing,
-  onClick,
-}: Props) {
+export function AutoRefreshButton({ disabled, isAutoRefreshing, onClick }: Props) {
   return isAutoRefreshing ? (
     <EuiButtonEmpty
-      data-test-subj={dataTestSubj}
+      data-test-subj="autoRefreshButton"
       disabled={disabled}
       iconSide="left"
       iconType="pause"
@@ -35,7 +29,7 @@ export function AutoRefreshButton({
     </EuiButtonEmpty>
   ) : (
     <EuiButtonEmpty
-      data-test-subj={dataTestSubj}
+      data-test-subj="autoRefreshButton"
       disabled={disabled}
       iconSide="left"
       iconType="play"

x-pack/plugins/observability/public/components/slo/auto_refresh_button/hooks/use_auto_refresh_storage.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+const AUTO_REFRESH_STORAGE_KEY = 'slo.auto_refresh';
+
+export function useAutoRefreshStorage(): {
+  storeAutoRefreshState: (newValue: boolean) => void;
+  getAutoRefreshState: () => boolean;
+} {
+  if (!localStorage) {
+    return { storeAutoRefreshState: () => {}, getAutoRefreshState: () => true };
+  }
+
+  return {
+    storeAutoRefreshState: (newValue: boolean) => {
+      localStorage.setItem(AUTO_REFRESH_STORAGE_KEY, JSON.stringify(newValue));
+    },
+
+    getAutoRefreshState: () => {
+      const value = localStorage.getItem(AUTO_REFRESH_STORAGE_KEY);
+      if (value === null) return true;
+
+      return Boolean(JSON.parse(value));
+    },
+  };
+}

x-pack/plugins/observability/public/components/slo/auto_refresh_button/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './auto_refresh_button';

x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx

@@ -25,9 +25,10 @@ import { HeaderTitle } from './components/header_title';
 import { HeaderControl } from './components/header_control';
 import { paths } from '../../../common/locators/paths';
 import type { SloDetailsPathParams } from './types';
-import { AutoRefreshButton } from '../slos/components/auto_refresh_button';
+import { AutoRefreshButton } from '../../components/slo/auto_refresh_button';
 import { FeedbackButton } from '../../components/slo/feedback_button/feedback_button';
 import { useGetInstanceIdQueryParam } from './hooks/use_get_instance_id_query_param';
+import { useAutoRefreshStorage } from '../../components/slo/auto_refresh_button/hooks/use_auto_refresh_storage';
 import { HeaderMenu } from '../overview/components/header_menu/header_menu';
 
 export function SloDetailsPage() {
@@ -42,7 +43,8 @@ export function SloDetailsPage() {
 
   const { sloId } = useParams<SloDetailsPathParams>();
   const sloInstanceId = useGetInstanceIdQueryParam();
-  const [isAutoRefreshing, setIsAutoRefreshing] = useState(true);
+  const { storeAutoRefreshState, getAutoRefreshState } = useAutoRefreshStorage();
+  const [isAutoRefreshing, setIsAutoRefreshing] = useState(getAutoRefreshState());
   const { isLoading, slo } = useFetchSloDetails({
     sloId,
     instanceId: sloInstanceId,
@@ -65,6 +67,7 @@ export function SloDetailsPage() {
 
   const handleToggleAutoRefresh = () => {
     setIsAutoRefreshing(!isAutoRefreshing);
+    storeAutoRefreshState(!isAutoRefreshing);
   };
 
   return (

x-pack/plugins/observability/public/pages/slos/slos.tsx

@@ -16,10 +16,11 @@ import { useLicense } from '../../hooks/use_license';
 import { useCapabilities } from '../../hooks/slo/use_capabilities';
 import { useFetchSloList } from '../../hooks/slo/use_fetch_slo_list';
 import { SloList } from './components/slo_list';
-import { AutoRefreshButton } from './components/auto_refresh_button';
+import { AutoRefreshButton } from '../../components/slo/auto_refresh_button';
 import { HeaderTitle } from './components/header_title';
 import { FeedbackButton } from '../../components/slo/feedback_button/feedback_button';
 import { paths } from '../../../common/locators/paths';
+import { useAutoRefreshStorage } from '../../components/slo/auto_refresh_button/hooks/use_auto_refresh_storage';
 import { HeaderMenu } from '../overview/components/header_menu/header_menu';
 
 export function SlosPage() {
@@ -34,7 +35,8 @@ export function SlosPage() {
   const { isInitialLoading, isLoading, isError, sloList } = useFetchSloList();
   const { total } = sloList || { total: 0 };
 
-  const [isAutoRefreshing, setIsAutoRefreshing] = useState<boolean>(true);
+  const { storeAutoRefreshState, getAutoRefreshState } = useAutoRefreshStorage();
+  const [isAutoRefreshing, setIsAutoRefreshing] = useState<boolean>(getAutoRefreshState());
 
   useBreadcrumbs([
     {
@@ -57,6 +59,7 @@ export function SlosPage() {
 
   const handleToggleAutoRefresh = () => {
     setIsAutoRefreshing(!isAutoRefreshing);
+    storeAutoRefreshState(!isAutoRefreshing);
   };
 
   if (isInitialLoading) {