From f0194db368cd8c4f864b23a408f70cfa0ab6890d Mon Sep 17 00:00:00 2001
From: Corey Robertson <corey.robertson@elastic.co>
Date: Tue, 4 Feb 2020 22:47:23 -0500
Subject: [PATCH] Only change handlers as the element changes (#56782) (#56821)

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

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../public/components/element_wrapper/index.js    |  6 ++----
 .../components/element_wrapper/lib/handlers.js    |  4 ++--
 .../canvas/public/state/actions/elements.js       |  4 ++--
 .../canvas/public/state/reducers/elements.js      | 15 ++++++++++++++-
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/x-pack/legacy/plugins/canvas/public/components/element_wrapper/index.js b/x-pack/legacy/plugins/canvas/public/components/element_wrapper/index.js
index 60c7e731691fac..85882377b76849 100644
--- a/x-pack/legacy/plugins/canvas/public/components/element_wrapper/index.js
+++ b/x-pack/legacy/plugins/canvas/public/components/element_wrapper/index.js
@@ -58,12 +58,10 @@ function selectorFactory(dispatch) {
 export const ElementWrapper = compose(
   connectAdvanced(selectorFactory),
   withPropsOnChange(
-    (props, nextProps) =>
-      !isEqual(props.element, nextProps.element) ||
-      !isEqual(props.selectedPage, nextProps.selectedPage),
+    (props, nextProps) => !isEqual(props.element, nextProps.element),
     props => {
       const { element, createHandlers } = props;
-      const handlers = createHandlers(element, props.selectedPage);
+      const handlers = createHandlers(element);
       // this removes element and createHandlers from passed props
       return { handlers };
     }
diff --git a/x-pack/legacy/plugins/canvas/public/components/element_wrapper/lib/handlers.js b/x-pack/legacy/plugins/canvas/public/components/element_wrapper/lib/handlers.js
index d71c5ead2c8021..8ea90974e2c53d 100644
--- a/x-pack/legacy/plugins/canvas/public/components/element_wrapper/lib/handlers.js
+++ b/x-pack/legacy/plugins/canvas/public/components/element_wrapper/lib/handlers.js
@@ -16,7 +16,7 @@ export const createHandlers = dispatch => {
   let oldElement;
   let completeFn = () => {};
 
-  return (element, pageId) => {
+  return element => {
     // reset isComplete when element changes
     if (!isEqual(oldElement, element)) {
       isComplete = false;
@@ -25,7 +25,7 @@ export const createHandlers = dispatch => {
 
     return {
       setFilter(text) {
-        dispatch(setFilter(text, element.id, pageId, true));
+        dispatch(setFilter(text, element.id, true));
       },
 
       getFilter() {
diff --git a/x-pack/legacy/plugins/canvas/public/state/actions/elements.js b/x-pack/legacy/plugins/canvas/public/state/actions/elements.js
index 7b7e87b027af53..8b49d16e87b217 100644
--- a/x-pack/legacy/plugins/canvas/public/state/actions/elements.js
+++ b/x-pack/legacy/plugins/canvas/public/state/actions/elements.js
@@ -254,9 +254,9 @@ export const removeElements = createThunk(
 
 export const setFilter = createThunk(
   'setFilter',
-  ({ dispatch }, filter, elementId, pageId, doRender = true) => {
+  ({ dispatch }, filter, elementId, doRender = true) => {
     const _setFilter = createAction('setFilter');
-    dispatch(_setFilter({ filter, elementId, pageId }));
+    dispatch(_setFilter({ filter, elementId }));
 
     if (doRender === true) {
       dispatch(fetchAllRenderables());
diff --git a/x-pack/legacy/plugins/canvas/public/state/reducers/elements.js b/x-pack/legacy/plugins/canvas/public/state/reducers/elements.js
index c7e8a5c2ff2d81..630694a860aad4 100644
--- a/x-pack/legacy/plugins/canvas/public/state/reducers/elements.js
+++ b/x-pack/legacy/plugins/canvas/public/state/reducers/elements.js
@@ -87,6 +87,18 @@ const trimElement = ({ id, position, expression, filter }) => ({
   ...(filter !== void 0 && { filter }),
 });
 
+const getPageWithElementId = (workpad, elementId) => {
+  const matchingPage = workpad.pages.find(page =>
+    page.elements.map(element => element.id).includes(elementId)
+  );
+
+  if (matchingPage) {
+    return matchingPage.id;
+  }
+
+  return undefined;
+};
+
 export const elementsReducer = handleActions(
   {
     // TODO: This takes the entire element, which is not necessary, it could just take the id.
@@ -95,7 +107,8 @@ export const elementsReducer = handleActions(
       return assignNodeProperties(workpadState, pageId, elementId, { expression });
     },
     [actions.setFilter]: (workpadState, { payload }) => {
-      const { filter, pageId, elementId } = payload;
+      const { filter, elementId } = payload;
+      const pageId = getPageWithElementId(workpadState, elementId);
       return assignNodeProperties(workpadState, pageId, elementId, { filter });
     },
     [actions.setMultiplePositions]: (workpadState, { payload }) =>