Chore: Enable eslint-plugin-react partial rules (#29428)

* Chore: Enable eslint react/display-name

Enable react/display-name and fixed the corresponding linting issue

part of: #29201

* Chore: Enable eslint react/no-deprecated

Enable react/no-deprecated and add the UNSAFE_ prefix for deprected methods

part of: #29201

* Chore: Enable eslint react/no-find-dom-node

Enable react/no-find-dom-node rule and use ref instead

part of: #29201

* Test: Update TeamGroupSync test snapshot

Since we added the displayName for ToolTip compontent and tag name is changed.

* Fix: Fixed ClickOutsideWrapper render

The props.children might contains numbers of nodes which make cloneElement failed. Change to simply use a div to wrapper
the children and assign the ref to div for this feature

* Style: Use shorthand method definition style for inline component

* Fix: Rebase master and fix linting

Rebase from master branch and fix new displayName linting warning

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

@@ -68,7 +68,7 @@ export default class SpanGraph extends React.PureComponent<SpanGraphProps, SpanG
     };
   }
 
-  componentWillReceiveProps(nextProps: SpanGraphProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: SpanGraphProps) {
     const { trace } = nextProps;
     if (this.props.trace !== trace) {
       this.setState({

packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx

@@ -164,7 +164,7 @@ export const HEADER_ITEMS = [
   {
     key: 'timestamp',
     label: 'Trace Start',
-    renderer: (trace: Trace, styles?: ReturnType<typeof getStyles>) => {
+    renderer(trace: Trace, styles?: ReturnType<typeof getStyles>) {
       const dateStr = formatDatetime(trace.startTime);
       const match = dateStr.match(/^(.+)(:\d\d\.\d+)$/);
       return match ? (

packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js

@@ -71,7 +71,9 @@ describe(ReferencesButton, () => {
     // here
     const menuInstance = shallow(
       shallow(dropdown.first().props().overlay).prop('children')({
-        Menu: ({ children }) => <div>{children}</div>,
+        Menu({ children }) {
+          return <div>{children}</div>;
+        },
       })
     );
     const submenuItems = menuInstance.find(UIMenuItem);

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js

@@ -112,7 +112,13 @@ describe('<KeyValuesTable>', () => {
     const overlay = shallow(dropdown.prop('overlay'));
     // We have some wrappers here that dynamically inject specific component so we need to traverse a bit
     // here
-    const menu = shallow(overlay.prop('children')({ Menu: ({ children }) => <div>{children}</div> }));
+    const menu = shallow(
+      overlay.prop('children')({
+        Menu({ children }) {
+          return <div>{children}</div>;
+        },
+      })
+    );
     const anchors = menu.find(LinkValue);
     expect(anchors).toHaveLength(2);
     const firstAnchor = anchors.first();

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

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

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

@@ -189,7 +189,7 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
     return false;
   }
 
-  componentWillUpdate(nextProps: VirtualizedTraceViewProps) {
+  UNSAFE_componentWillUpdate(nextProps: VirtualizedTraceViewProps) {
     const { childrenHiddenIDs, detailStates, registerAccessors, trace, currentViewRangeTime } = this.props;
     const {
       currentViewRangeTime: nextViewRangeTime,