[Canvas] Refactor Canvas to no longer use componentWillReceiveProps (#52129)

* Removing componentWillReceiveProps from time filter

* Changing expression form to componentDidUpdate

* Updating expression to be key-driven updates and arg_types to use compomentDidUpdate

* temporary

* Revert "temporary"

This reverts commit 255525d65f.

* typo fix

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

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.ts

@@ -21,15 +21,20 @@ export const DatetimeInput = compose<ComponentProps, Props>(
     moment ? moment.format('YYYY-MM-DD HH:mm:ss') : ''
   ),
   lifecycle<Props & ComponentProps, {}>({
-    // TODO: Refactor to no longer use componentWillReceiveProps since it is being deprecated
-    componentWillReceiveProps({ moment, setStrValue, setValid }) {
-      if (!moment) return;
+    componentDidUpdate(prevProps) {
+      const prevMoment = prevProps.moment;
 
-      if (this.props.moment && this.props.moment.isSame(moment)) {
+      // If we don't have a current moment, do nothing
+      if (!this.props.moment) return;
+
+      // If we previously had a moment and it's the same as the current moment, do nothing
+      if (prevMoment && prevMoment.isSame(this.props.moment)) {
         return;
       }
-      setStrValue(moment.format('YYYY-MM-DD HH:mm:ss'));
-      setValid(true);
+
+      // Set the string value of the current moment and mark as valid
+      this.props.setStrValue(this.props.moment.format('YYYY-MM-DD HH:mm:ss'));
+      this.props.setValid(true);
     },
   })
 )(Component);

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx

@@ -47,9 +47,10 @@ export class TimePicker extends Component<Props, State> {
     isDirty: false,
   };
 
-  // TODO: Refactor to no longer use componentWillReceiveProps since it is being deprecated
-  UNSAFE_componentWillReceiveProps({ from, to }: Props) {
-    if (from !== this.props.from || to !== this.props.to) {
+  componentDidUpdate(prevProps: Props) {
+    const { to, from } = this.props;
+
+    if (prevProps.from !== from || prevProps.to !== to) {
       this.setState({
         range: { from, to },
         isDirty: false,

x-pack/legacy/plugins/canvas/public/components/expression/index.js

@@ -55,14 +55,6 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 };
 
 const expressionLifecycle = lifecycle({
-  componentWillReceiveProps({ formState, setFormState, expression }) {
-    if (this.props.expression !== expression && expression !== formState.expression) {
-      setFormState({
-        expression,
-        dirty: false,
-      });
-    }
-  },
   componentDidMount() {
     const { functionDefinitionsPromise, setFunctionDefinitions } = this.props;
     functionDefinitionsPromise.then(defs => setFunctionDefinitions(defs));

x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.tsx

@@ -97,7 +97,7 @@ export const Toolbar = (props: Props) => {
 
   const trays = {
     pageManager: <PageManager previousPage={previousPage} />,
-    expression: !elementIsSelected ? null : <Expression done={done} />,
+    expression: !elementIsSelected ? null : <Expression key={selectedElement.id} done={done} />,
   };
 
   return (

x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/index.ts

@@ -37,9 +37,9 @@ const EnhancedExtendedTemplate = compose<ExtendedTemplateProps, Props>(
         this.props.setLabel(formatLabel(label, this.props));
       }
     },
-    componentWillReceiveProps(newProps) {
-      const newLabel = get(newProps.argValue, 'chain.0.arguments.label.0', '');
-      if (newLabel && this.props.label !== formatLabel(newLabel, this.props)) {
+    componentDidUpdate(prevProps) {
+      const newLabel = get(this.props.argValue, 'chain.0.arguments.label.0', '');
+      if (newLabel && prevProps.label !== formatLabel(newLabel, this.props)) {
         this.props.setLabel(formatLabel(newLabel, this.props));
       }
     },