[6.7] [canvas] Fix resolved_args sync issue when deleting a page (#32835) (#32856)

Backports the following commits to 6.7:
 - [canvas] Fix resolved_args sync issue when deleting a page  (#32835)

x-pack/plugins/canvas/public/state/actions/resolved_args.js

@@ -9,7 +9,8 @@ import { createAction } from 'redux-actions';
 export const setLoading = createAction('setResolvedLoading');
 export const setValue = createAction('setResolvedValue');
 export const setValues = createAction('setResolvedValues');
-export const clear = createAction('clearResolvedValue');
+export const clearValue = createAction('clearResolvedValue');
+export const clearValues = createAction('clearResolvedValues');
 
 export const inFlightActive = createAction('inFlightActive');
 export const inFlightComplete = createAction('inFlightComplete');

x-pack/plugins/canvas/public/state/middleware/index.js

@@ -16,11 +16,13 @@ import { workpadUpdate } from './workpad_update';
 import { workpadRefresh } from './workpad_refresh';
 import { appReady } from './app_ready';
 import { elementStats } from './element_stats';
+import { resolvedArgs } from './resolved_args';
 
 const middlewares = [
   applyMiddleware(
     thunkMiddleware,
     elementStats,
+    resolvedArgs,
     esPersistMiddleware,
     historyMiddleware,
     aeroelastic,

x-pack/plugins/canvas/public/state/middleware/resolved_args.js

@@ -0,0 +1,31 @@
+/*
+ * 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 { getAllElements } from '../selectors/workpad';
+import { clearValues } from '../actions/resolved_args';
+
+/**
+ * This middleware is responsible for keeping the resolved_args collection in transient state
+ * synced with the elements represented by the workpad.
+ */
+export const resolvedArgs = ({ dispatch, getState }) => next => action => {
+  // Get the Element IDs that are present before the action.
+  const startElementIds = getAllElements(getState()).map(element => element.id);
+
+  // execute the action
+  next(action);
+
+  // Get the Element IDs after the action...
+  const resolvedElementIds = getAllElements(getState()).map(element => element.id);
+  // ...and get a list of IDs that are no longer present.
+  const deadIds = startElementIds.filter(id => !resolvedElementIds.includes(id));
+
+  // If we have some dead elements, we need to clear them from resolved_args collection
+  // in transient state.
+  if (deadIds.length > 0) {
+    dispatch(clearValues(deadIds));
+  }
+};

x-pack/plugins/canvas/public/state/reducers/__tests__/resolved_args.js

@@ -119,7 +119,7 @@ describe('resolved args reducer', () => {
 
   describe('clear', () => {
     it('removed resolved value at path', () => {
-      const action = actionCreator(actions.clear)({
+      const action = actionCreator(actions.clearValue)({
         path: 'element-0.1',
       });
 
@@ -135,7 +135,7 @@ describe('resolved args reducer', () => {
     });
 
     it('deeply removes resolved values', () => {
-      const action = actionCreator(actions.clear)({
+      const action = actionCreator(actions.clearValue)({
         path: 'element-0',
       });
 

x-pack/plugins/canvas/public/state/reducers/resolved_args.js

@@ -90,11 +90,17 @@ export const resolvedArgsReducer = handleActions(
       }, transientState);
     },
 
-    [actions.clear]: (transientState, { payload }) => {
+    [actions.clearValue]: (transientState, { payload }) => {
       const { path } = payload;
       return del(transientState, getFullPath(path));
     },
 
+    [actions.clearValues]: (transientState, { payload }) => {
+      return payload.reduce((transientState, path) => {
+        return del(transientState, getFullPath(path));
+      }, transientState);
+    },
+
     [actions.inFlightActive]: transientState => {
       return set(transientState, 'inFlight', true);
     },