Only fire appState changes when there is a change (#56183)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/canvas/public/components/router/index.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+// @ts-ignore untyped local
+import { setFullscreen } from '../../state/actions/transient';
+import {
+  enableAutoplay,
+  setRefreshInterval,
+  setAutoplayInterval,
+  // @ts-ignore untyped local
+} from '../../state/actions/workpad';
+// @ts-ignore untyped local
+import { Router as Component } from './router';
+import { State } from '../../../types';
+
+const mapDispatchToProps = {
+  enableAutoplay,
+  setAutoplayInterval,
+  setFullscreen,
+  setRefreshInterval,
+};
+
+const mapStateToProps = (state: State) => ({
+  refreshInterval: state.transient.refresh.interval,
+  autoplayInterval: state.transient.autoplay.interval,
+  autoplay: state.transient.autoplay.enabled,
+  fullscreen: state.transient.fullScreen,
+});
+
+export const Router = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  (stateProps, dispatchProps, ownProps) => {
+    return {
+      ...ownProps,
+      ...dispatchProps,
+      setRefreshInterval: (interval: number) => {
+        if (interval !== stateProps.refreshInterval) {
+          dispatchProps.setRefreshInterval(interval);
+        }
+      },
+      setAutoplayInterval: (interval: number) => {
+        if (interval !== stateProps.autoplayInterval) {
+          dispatchProps.setRefreshInterval(interval);
+        }
+      },
+      enableAutoplay: (autoplay: boolean) => {
+        if (autoplay !== stateProps.autoplay) {
+          dispatchProps.enableAutoplay(autoplay);
+        }
+      },
+      setFullscreen: (fullscreen: boolean) => {
+        if (fullscreen !== stateProps.fullscreen) {
+          dispatchProps.setFullscreen(fullscreen);
+        }
+      },
+    };
+  }
+)(Component);

x-pack/legacy/plugins/canvas/public/lib/app_state.ts

@@ -13,7 +13,7 @@ import { getWindow } from './get_window';
 import { historyProvider } from './history_provider';
 // @ts-ignore untyped local
 import { routerProvider } from './router_provider';
-import { createTimeInterval, isValidTimeInterval } from './time_interval';
+import { createTimeInterval, isValidTimeInterval, getTimeInterval } from './time_interval';
 import { AppState, AppStateKeys } from '../../types';
 
 export function getDefaultAppState(): AppState {
@@ -112,7 +112,12 @@ export function setRefreshInterval(payload: string) {
   const appValue = appState[AppStateKeys.REFRESH_INTERVAL];
 
   if (payload !== appValue) {
-    appState[AppStateKeys.REFRESH_INTERVAL] = payload;
-    routerProvider().updateAppState(appState);
+    if (getTimeInterval(payload)) {
+      appState[AppStateKeys.REFRESH_INTERVAL] = payload;
+      routerProvider().updateAppState(appState);
+    } else {
+      delete appState[AppStateKeys.REFRESH_INTERVAL];
+      routerProvider().updateAppState(appState);
+    }
   }
 }