refactor: prefix lifecycle methods with UNSAFE_

Refs #7341

Author: char0n

package-lock.json

@@ -30,7 +30,7 @@ export default class ContentType extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if(!nextProps.contentTypes || !nextProps.contentTypes.size) {
       return
     }

src/core/components/content-type.jsx

@@ -117,7 +117,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
   }
 
   _getValueForExample = (exampleKey, props) => {
-    // props are accepted so that this can be used in componentWillReceiveProps,
+    // props are accepted so that this can be used in UNSAFE_componentWillReceiveProps,
     // which has access to `nextProps`
     const { examples } = props || this.props
     return stringifyUnlessList(
@@ -126,7 +126,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
   }
 
   _getCurrentExampleValue = props => {
-    // props are accepted so that this can be used in componentWillReceiveProps,
+    // props are accepted so that this can be used in UNSAFE_componentWillReceiveProps,
     // which has access to `nextProps`
     const { currentKey } = props || this.props
     return this._getValueForExample(currentKey, props || this.props)
@@ -169,7 +169,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // update `lastUserEditedValue` as new currentUserInput values come in
 
     const {

src/core/components/examples-select-value-retainer.jsx

@@ -78,7 +78,7 @@ export default class ExamplesSelect extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { currentExampleKey, examples } = nextProps
     if (examples !== this.props.examples && !examples.has(currentExampleKey)) {
       // examples have changed from under us, and the currentExampleKey is no longer

src/core/components/examples-select.jsx

@@ -181,7 +181,7 @@ export class Select extends React.Component {
     onChange && onChange(value)
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // TODO: this puts us in a weird area btwn un/controlled selection... review
     if(nextProps.value !== this.props.value) {
       this.setState({ value: nextProps.value })

src/core/components/layout-utils.jsx

@@ -48,7 +48,7 @@ export default class ModelCollapse extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps){
+  UNSAFE_componentWillReceiveProps(nextProps){
     if(this.props.expanded !== nextProps.expanded){
         this.setState({expanded: nextProps.expanded})
     }

src/core/components/model-collapse.jsx

@@ -43,7 +43,7 @@ export default class ModelExample extends React.Component {
     })
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (
       nextProps.isExecute &&
       !this.props.isExecute &&

src/core/components/model-example.jsx

@@ -30,7 +30,7 @@ export default class OnlineValidatorBadge extends React.Component {
       return urlObject.toString()
     }
 
-    componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
         let { getConfigs } = nextProps
         let { validatorUrl } = getConfigs()
 
@@ -91,7 +91,7 @@ class ValidatorImage extends React.Component {
     img.src = this.props.src
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.src !== this.props.src) {
       const img = new Image()
       img.onload = () => {

src/core/components/online-validator-badge.jsx

@@ -43,7 +43,7 @@ export default class ParamBody extends PureComponent {
     this.updateValues.call(this, this.props)
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.updateValues.call(this, nextProps)
   }
 
@@ -140,11 +140,11 @@ export default class ParamBody extends PureComponent {
           }
           <label htmlFor="">
             <span>Parameter content type</span>
-            <ContentType 
-              value={ consumesValue } 
-              contentTypes={ consumes } 
-              onChange={onChangeConsumes} 
-              className="body-param-content-type" 
+            <ContentType
+              value={ consumesValue }
+              contentTypes={ consumes }
+              onChange={onChangeConsumes}
+              className="body-param-content-type"
               ariaLabel="Parameter content type" />
           </label>
         </div>

src/core/components/param-body.jsx

@@ -30,7 +30,7 @@ export default class ParameterRow extends Component {
     this.setDefaultValue()
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     let { specSelectors, pathMethod, rawParam } = props
     let isOAS3 = specSelectors.isOAS3()
 
@@ -127,7 +127,7 @@ export default class ParameterRow extends Component {
           : (schema && schema.getIn(["default"]))
       } else if (specSelectors.isOAS3()) {
         const currentExampleKey = oas3Selectors.activeExamplesMember(...pathMethod, "parameters", this.getParamKey())
-        initialValue = 
+        initialValue =
           paramWithMeta.getIn(["examples", currentExampleKey, "value"]) !== undefined
           ? paramWithMeta.getIn(["examples", currentExampleKey, "value"])
           : paramWithMeta.getIn(["content", parameterMediaType, "example"]) !== undefined

src/core/components/parameter-row.jsx

@@ -11,14 +11,14 @@ export default class Schemes extends React.Component {
     method: PropTypes.string,
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     let { schemes } = this.props
 
     //fire 'change' event to set default 'value' of select
     this.setScheme(schemes.first())
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if ( !this.props.currentScheme || !nextProps.schemes.includes(this.props.currentScheme) ) {
       // if we don't have a selected currentScheme or if our selected scheme is no longer an option,
       // then fire 'change' event and select the first scheme in the list of options

src/core/components/schemes.jsx

@@ -91,7 +91,7 @@ export default class OperationContainer extends PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { response, isShown } = nextProps
     const resolvedSubtree = this.getResolvedSubtree()
 

src/core/containers/OperationContainer.jsx

@@ -130,7 +130,7 @@ export class JsonSchema_array extends PureComponent {
     this.state = { value: valueOrEmptyList(props.value), schema: props.schema}
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     const value = valueOrEmptyList(props.value)
     if(value !== this.state.value)
       this.setState({ value })

src/core/json-schema-components.jsx

@@ -55,7 +55,7 @@ export default class RequestBodyEditor extends PureComponent {
     }, () => this.onChange(inputValue))
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if(
       this.props.value !== nextProps.value &&
       nextProps.value !== this.state.value

src/core/plugins/oas3/components/request-body-editor.jsx

@@ -25,7 +25,7 @@ export default class Servers extends React.Component {
     this.setServer(servers.first().get("url"))
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let {
       servers,
       setServerVariableValue,

src/core/plugins/oas3/components/servers.jsx

@@ -50,7 +50,7 @@ export const makeMappedContainer = (getSystem, getStore, memGetComponent, getCom
       handleProps(getSystem, mapping, props, {})
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       handleProps(getSystem, mapping, nextProps, this.props)
     }
 
@@ -76,7 +76,7 @@ const createClass = component => class extends Component {
   }
 }
 
-const Fallback = ({ 
+const Fallback = ({
   name // eslint-disable-line react/prop-types
 }) => <div className="fallback">😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
 

src/core/plugins/view/root-injects.jsx

@@ -17,7 +17,7 @@ export default class Topbar extends React.Component {
     this.state = { url: props.specSelectors.url(), selectedIndex: 0 }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({ url: nextProps.specSelectors.url() })
   }
 

src/plugins/topbar/topbar.jsx

@@ -61,7 +61,7 @@ describe("<Schemes/>", function(){
     expect(setSchemeSpy.mock.calls.length).toEqual(1)
 
     // After an update
-    wrapper.instance().componentWillReceiveProps(props)
+    wrapper.instance().UNSAFE_componentWillReceiveProps(props)
 
     // Should not be called again, since `currentScheme` is in schemes
     expect(setSchemeSpy.mock.calls.length).toEqual(1)