Fix: recreate handlers and reset completed state on expression change - #33900

Summary

Closes #33876
Closes #33898

I tried to do this as two PR's, but the two issues were related, and the fixes were dependent on one another.

When an Element's expression changes, re-create the handlers object and clear the internal isCompleted flag.

• handlers methods (getFilter in particular) return the correct value
• handlers.done() correctly calls the onComplete method

Updating the handlers object

Required so that handlers.getFilter always returns the current value. The handlers object is stateful, so it can't simply be reused.

To do this, I converted the redux stuff in the container using connectAdvanced, which allows the function that creates that object to get the dispatch method just one time. Then a stripped down elements object is added to the produced props, and the new props object is deeply compared to the proposed new props object; if nothing changes, the old object is still used.

This provides the same functionality as #31734, allowing the removal of the shouldUpdate HoC. Since the props object will be pure unless there's really some change, the element does not re-render unless it needs to.

Additionally, withPropsOnChange is used to re-create the handlers object only when the element object changes, and in particular, the id, filter, or expression.

Finally, mapProps is used to remove props not used in the component. elements and createHandlers are only used to build the handlers object, as is selectedPage. I also removed the error prop, which was unused but had nothing else to do with the changes here.

mapProps only gets run if the props object changes, so the handlers object is now pure, and the ElementWrapper component itself could be converted back to a functional component.

• ElementWrapper doesn't re-render unless it needs to
• The handlers object is re-created when it needs to be
  • Only when the element object changes

Clearing of the isComplete state on the handlers object

Since the createHandlers function is now two functions, where the first just allows partial application of the dispatch function, it also allowed changing the internal state based on the element object. That object now includes the expression, in addition to the filter that was already there, and when it changes, isComplete is reset. This allows future calls to handlers.done to call the onChange handler when the element changes.

Additionally, the ElementShareContainer, which is responsible for tracking whether or not handlers.done was called from a specific render function, was modified to clear and re-create the check when the render function changes. This is what fixes #33898.

• Correctly rebuild the done checker when the function changes
• Clear handler state so that calling handlers.done also correctly calls onComplete

Testing

In the case of #33876, you'll need to modify the table render function to console.log(handlers.getFilter()) (or otherwise show you the value at render time). Do this before pulling down this PR to confirm that it doesn't work correctly, and after pulling down this PR to confirm that it now does.

As for #33898, the steps there require no local changes.

Open Question

Should this be backported to 6.7? My thought it yes, handlers.getFilter returning the wrong value leads to really messed up filter states. But it's also kind of an edge case.