Update legacy React lifecycle methods to indicate unsafe status (#610)

Following the react migration path laid out here https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Signed-off-by: Tim Klever <[email protected]>

packages/jaeger-ui/src/components/App/Page.tsx

@@ -42,7 +42,8 @@ export class PageImpl extends React.Component<TProps> {
     trackPageView(pathname, search);
   }
 
-  componentWillReceiveProps(nextProps: TProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps: TProps) {
     const { pathname, search } = this.props;
     const { pathname: nextPathname, search: nextSearch } = nextProps;
     if (pathname !== nextPathname || search !== nextSearch) {

packages/jaeger-ui/src/components/DeepDependencies/index.tsx

@@ -118,7 +118,8 @@ export class DeepDependencyGraphPageImpl extends React.PureComponent<TProps, TSt
     }
   }
 
-  componentWillReceiveProps(nextProps: TProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps: TProps) {
     DeepDependencyGraphPageImpl.fetchModelIfStale(nextProps);
   }
 

packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js

@@ -37,7 +37,8 @@ export default class DependencyForceGraph extends Component {
     };
   }
 
-  componentWillMount() {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillMount() {
     this.onResize();
     this.debouncedResize = debounce((...args) => this.onResize(...args), 50);
     window.addEventListener('resize', this.debouncedResize);

packages/jaeger-ui/src/components/DependencyGraph/index.js

@@ -66,7 +66,8 @@ export class DependencyGraphPageImpl extends Component {
     };
   }
 
-  componentWillMount() {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillMount() {
     this.props.fetchDependencies();
   }
 

packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx

@@ -111,7 +111,8 @@ export default class ArchiveNotifier extends React.PureComponent<Props, State> {
     this.state = { notifiedState };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     const notifiedState = processProps(this.state.notifiedState, nextProps);
     if (this.state.notifiedState !== notifiedState) {
       this.setState({ notifiedState });

packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/index.tsx

@@ -66,7 +66,8 @@ export default class SpanGraph extends React.PureComponent<SpanGraphProps, SpanG
     };
   }
 
-  componentWillReceiveProps(nextProps: SpanGraphProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps: SpanGraphProps) {
     const { trace } = nextProps;
     if (this.props.trace !== trace) {
       this.setState({

packages/jaeger-ui/src/components/TracePage/TraceStatistics/DetailTableData.tsx

@@ -37,7 +37,8 @@ type State = {
  * Used to render the detail column.
  */
 export default class DetailTableData extends Component<Props, State> {
-  componentWillMount() {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillMount() {
     const element = this.props.values.map(item => {
       return { uid: _.uniqueId('id'), value: item };
     });

packages/jaeger-ui/src/components/TracePage/TraceStatistics/MainTableData.tsx

@@ -39,7 +39,8 @@ type State = {
  * Used to render the main column.
  */
 export default class MainTableData extends Component<Props, State> {
-  componentWillMount() {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillMount() {
     const element = this.props.values.map(item => {
       return { uid: _.uniqueId('id'), value: item };
     });

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx

@@ -137,7 +137,8 @@ export default class TimelineViewingLayer extends React.PureComponent<TimelineVi
     this._root = undefined;
   }
 
-  componentWillReceiveProps(nextProps: TimelineViewingLayerProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps: TimelineViewingLayerProps) {
     const { boundsInvalidator } = this.props;
     if (boundsInvalidator !== nextProps.boundsInvalidator) {
       this._draggerReframe.resetBounds();

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx

@@ -179,7 +179,8 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
     return false;
   }
 
-  componentWillUpdate(nextProps: VirtualizedTraceViewProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillUpdate(nextProps: VirtualizedTraceViewProps) {
     const { childrenHiddenIDs, detailStates, registerAccessors, trace, currentViewRangeTime } = this.props;
     const {
       currentViewRangeTime: nextViewRangeTime,

packages/jaeger-ui/src/components/TracePage/index.tsx

@@ -182,7 +182,8 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
     mergeShortcuts(shortcutCallbacks);
   }
 
-  componentWillReceiveProps(nextProps: TProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps: TProps) {
     const { trace } = nextProps;
     this._scrollManager.setTrace(trace && trace.data);
   }