From 943a525d3ae0a4bbf27c7899f4a0a2946a00ffdf Mon Sep 17 00:00:00 2001
From: Tim Klever <Tim.V.Klever@aexp.com>
Date: Tue, 11 Aug 2020 09:54:53 -0700
Subject: [PATCH] refactor UNSAFE_componentWillReceiveProps to use
 componentDidUpdate

Migrating these componentWillRecieveProps calls to componentDidUpdate in line with recommendations provided at https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops, stating "If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate"

Signed-off-by: Tim Klever <Tim.V.Klever@aexp.com>
---
 .../jaeger-ui/src/components/App/Page.tsx     |  7 +++----
 .../src/components/DeepDependencies/index.tsx |  5 ++---
 .../TimelineViewingLayer.tsx                  |  5 ++---
 .../VirtualizedTraceView.tsx                  | 21 +++++++++----------
 .../src/components/TracePage/index.tsx        |  9 +++-----
 5 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/packages/jaeger-ui/src/components/App/Page.tsx b/packages/jaeger-ui/src/components/App/Page.tsx
index 162528eff0..86caec2137 100644
--- a/packages/jaeger-ui/src/components/App/Page.tsx
+++ b/packages/jaeger-ui/src/components/App/Page.tsx
@@ -42,10 +42,9 @@ export class PageImpl extends React.Component<TProps> {
     trackPageView(pathname, search);
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: TProps) {
-    const { pathname, search } = this.props;
-    const { pathname: nextPathname, search: nextSearch } = nextProps;
+  componentDidUpdate(prevProps: Readonly<TProps>) {
+    const { pathname, search } = prevProps;
+    const { pathname: nextPathname, search: nextSearch } = this.props;
     if (pathname !== nextPathname || search !== nextSearch) {
       trackPageView(nextPathname, nextSearch);
     }
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/index.tsx b/packages/jaeger-ui/src/components/DeepDependencies/index.tsx
index 5a4915f3f6..5dbf796c33 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/index.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/index.tsx
@@ -118,9 +118,8 @@ export class DeepDependencyGraphPageImpl extends React.PureComponent<TProps, TSt
     }
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: TProps) {
-    DeepDependencyGraphPageImpl.fetchModelIfStale(nextProps);
+  componentDidUpdate() {
+    DeepDependencyGraphPageImpl.fetchModelIfStale(this.props);
   }
 
   clearOperation = () => {
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
index 0edb6d3ed5..e5eaf0a937 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
@@ -137,10 +137,9 @@ export default class TimelineViewingLayer extends React.PureComponent<TimelineVi
     this._root = undefined;
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: TimelineViewingLayerProps) {
+  componentDidUpdate(prevProps: Readonly<TimelineViewingLayerProps>) {
     const { boundsInvalidator } = this.props;
-    if (boundsInvalidator !== nextProps.boundsInvalidator) {
+    if (prevProps.boundsInvalidator !== boundsInvalidator) {
       this._draggerReframe.resetBounds();
     }
   }
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx
index d8ba3b2fbd..4e4a8aa6a8 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx
@@ -179,10 +179,12 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
     return false;
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillUpdate(nextProps: VirtualizedTraceViewProps) {
-    const { childrenHiddenIDs, detailStates, registerAccessors, trace, currentViewRangeTime } = this.props;
+  componentDidUpdate(prevProps: Readonly<VirtualizedTraceViewProps>) {
+    const { childrenHiddenIDs, detailStates, registerAccessors, trace, currentViewRangeTime } = prevProps;
     const {
+      shouldScrollToFirstUiFindMatch,
+      clearShouldScrollToFirstUiFindMatch,
+      scrollToFirstVisibleSpan,
       currentViewRangeTime: nextViewRangeTime,
       childrenHiddenIDs: nextHiddenIDs,
       detailStates: nextDetailStates,
@@ -190,13 +192,16 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
       setTrace,
       trace: nextTrace,
       uiFind,
-    } = nextProps;
+    } = this.props;
+
     if (trace !== nextTrace) {
       setTrace(nextTrace, uiFind);
     }
+
     if (trace !== nextTrace || childrenHiddenIDs !== nextHiddenIDs || detailStates !== nextDetailStates) {
       this.rowStates = nextTrace ? generateRowStates(nextTrace.spans, nextHiddenIDs, nextDetailStates) : [];
     }
+
     if (currentViewRangeTime !== nextViewRangeTime) {
       this.clippingCssClasses = getCssClasses(nextViewRangeTime);
       const [zoomStart, zoomEnd] = nextViewRangeTime;
@@ -207,17 +212,11 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
         viewEnd: zoomEnd,
       });
     }
+
     if (this.listView && registerAccessors !== nextRegisterAccessors) {
       nextRegisterAccessors(this.getAccessors());
     }
-  }
 
-  componentDidUpdate() {
-    const {
-      shouldScrollToFirstUiFindMatch,
-      clearShouldScrollToFirstUiFindMatch,
-      scrollToFirstVisibleSpan,
-    } = this.props;
     if (shouldScrollToFirstUiFindMatch) {
       scrollToFirstVisibleSpan();
       clearShouldScrollToFirstUiFindMatch();
diff --git a/packages/jaeger-ui/src/components/TracePage/index.tsx b/packages/jaeger-ui/src/components/TracePage/index.tsx
index 32b1c37b7c..7d91963688 100644
--- a/packages/jaeger-ui/src/components/TracePage/index.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/index.tsx
@@ -182,14 +182,11 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
     mergeShortcuts(shortcutCallbacks);
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: TProps) {
-    const { trace } = nextProps;
-    this._scrollManager.setTrace(trace && trace.data);
-  }
-
   componentDidUpdate({ id: prevID }: TProps) {
     const { id, trace } = this.props;
+
+    this._scrollManager.setTrace(trace && trace.data);
+
     this.setHeaderHeight(this._headerElm);
     if (!trace) {
       this.ensureTraceFetched();