FS-23: Browser console errors from package updates

[russom-woldezghi]

Ticket

FS-23: Browser console errors from package updates

Description

• Addressing browser console errors for componentWillReceiveProps
• I replaced two warnings coming from the federated search by using componentDidUpdate for following components: 

  • FederatedRangeFacet (when the date range facet is cleared)
  • FederatedTextSearchNoAutocomplete (applies when autocomplete is enabled in .env.local.js)

And used prefixed UNSAFE_ for:

• For FederatedTextSearchAsYouType component in federated search, I prefixed the lifecycle with a UNSAFE_, as updating the lifecycle to componentDidUpdate caused a fatal nesting error on render. We might need to open a new ticket to address this independently, there could additional work around this upgrade. There is a roadmap that will eventually drop support/usages of componentWillReceiveProps in React 17. I will need to dig into this separately as there could be additional work for updating FederatedTextSearchAsYouType (without appending UNSAFE_)

There are warnings coming from react-dates and react-autosuggest. These warning relates to Reacts update/new approach to implementing lifecycles. Seems like componentWillReceiveProps is being deprecated. The easiest way to suppress the warning is to prefix the lifecycle with a UNSAFE_.

The packages that have not upgraded their code to React 16 stated it will be a breaking change for the package. These are:

• react-dates for the Start/End fields, theDateInput component has the componentWillReceiveProps deprecated code.
  • See React 16.9 warning react-dates/react-dates#1748 (comment) for more info on this.
• react-autosuggest for autosuggestion in the text box uses componentWillReceiveProps.
  • Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps moroshko/react-autosuggest#695

Additionally, when enabling autocomplete, I got a breaking checker function error in the console. I added PropTypes.shape{()} to the results and term properties for FederatedTextSearchAsYouType component.

For the packages using componentWillReceiveProps, we could roll a patch to add UNSAFE_ prefixes? Let me know if that makes sense as a temporary stop gap.

Testing

• Pull down code
• Remove nodes_modules
• Ensure your env.local.js has autocomplete uncommented
• Run yarn && yarn start
• Perform searches, facet filtering on all the fields visible.
• Ensure you only see warnings from DateInput and Autosuggest packages (more in Description, above) about this warning.
• Observe for any other warning, asides from DateInput and Autosuggest packages.

[agentrickard]

I suppose I would patch them for now. Everything else seems fine.

[russom-woldezghi]

@agentrickard I added patches for react-autosuggest and react-dates packages to address the warnings componentWillReceiveProps (adding prefix of UNSAFE_).

[agentrickard]

This is working fine. What is the best way to merge this into 3.x as well?

[russom-woldezghi]

@agentrickard I think this can be merged, if this looks good to you. I didn't notice any potential merge conflicts with the PR #56. I will follow-up on the warnings you posted for #56.