From dc96e7231108a2752ccb76546b46569aa8ce728b Mon Sep 17 00:00:00 2001
From: Corey Robertson <corey.robertson@elastic.co>
Date: Fri, 31 Jan 2020 09:16:03 -0500
Subject: [PATCH] Only fire appState changes when there is a change (#56183)
 (#56400)

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

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../canvas/public/components/router/index.js  | 23 -------
 .../canvas/public/components/router/index.ts  | 63 +++++++++++++++++++
 .../plugins/canvas/public/lib/app_state.ts    | 11 +++-
 3 files changed, 71 insertions(+), 26 deletions(-)
 delete mode 100644 x-pack/legacy/plugins/canvas/public/components/router/index.js
 create mode 100644 x-pack/legacy/plugins/canvas/public/components/router/index.ts

diff --git a/x-pack/legacy/plugins/canvas/public/components/router/index.js b/x-pack/legacy/plugins/canvas/public/components/router/index.js
deleted file mode 100644
index 430d6a5343662..0000000000000
--- a/x-pack/legacy/plugins/canvas/public/components/router/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * 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';
-import { setFullscreen } from '../../state/actions/transient';
-import {
-  enableAutoplay,
-  setRefreshInterval,
-  setAutoplayInterval,
-} from '../../state/actions/workpad';
-import { Router as Component } from './router';
-
-const mapDispatchToState = {
-  enableAutoplay,
-  setAutoplayInterval,
-  setFullscreen,
-  setRefreshInterval,
-};
-
-export const Router = connect(null, mapDispatchToState)(Component);
diff --git a/x-pack/legacy/plugins/canvas/public/components/router/index.ts b/x-pack/legacy/plugins/canvas/public/components/router/index.ts
new file mode 100644
index 0000000000000..5e014870f5158
--- /dev/null
+++ b/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);
diff --git a/x-pack/legacy/plugins/canvas/public/lib/app_state.ts b/x-pack/legacy/plugins/canvas/public/lib/app_state.ts
index 955125b713140..c93e505c595fd 100644
--- a/x-pack/legacy/plugins/canvas/public/lib/app_state.ts
+++ b/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);
+    }
   }
 }