Only change handlers as the element changes (#56782) (#56822)

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>

Author: Corey Robertson

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 };
     }

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() {

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());

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 }) =>