Replace deprecated ant-design props from ReferenceButton and KeyValue…

…sTable (#1864)

## Which problem is this PR solving?
- part of: #1703

## Description of the changes
- This PR replaces the deprecated ant-design props from ReferenceButton
and KeyValuesTable
- The `colums.render` prop is no longer required to return children as
JSX. Instead, it is by default.

## How was this change tested?
- manually, and unit tests

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [x] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `yarn lint` and `yarn test`

---------

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>

packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/index.tsx

@@ -203,20 +203,18 @@ export class OperationTableDetails extends React.PureComponent<TProps, TState> {
             );
           }
 
-          return {
-            children: (
-              <div className="column-container">
-                <Progress
-                  className="impact"
-                  percent={value * 100}
-                  strokeLinecap="square"
-                  strokeColor="#459798"
-                  showInfo={false}
-                />
-                <div className="view-trace-button">{viewTraceButton}</div>
-              </div>
-            ),
-          };
+          return (
+            <div className="column-container">
+              <Progress
+                className="impact"
+                percent={value * 100}
+                strokeLinecap="square"
+                strokeColor="#459798"
+                showInfo={false}
+              />
+              <div className="view-trace-button">{viewTraceButton}</div>
+            </div>
+          );
         },
       },
     ];

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

@@ -14,7 +14,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Menu, Dropdown, Tooltip } from 'antd';
+import { Dropdown, Tooltip } from 'antd';
 
 import ReferencesButton from './ReferencesButton';
 import transformTraceData from '../../../model/transform-trace-data';
@@ -66,14 +66,11 @@ describe(ReferencesButton, () => {
     const wrapper = shallow(<ReferencesButton {...props} />);
     const dropdown = wrapper.find(Dropdown);
     expect(dropdown.length).toBe(1);
-    const menuInstance = shallow(dropdown.first().props().overlay).dive();
-    const submenuItems = menuInstance.find(Menu.Item);
+    const submenuItems = dropdown.prop('menu').items;
     expect(submenuItems.length).toBe(3);
     submenuItems.forEach((submenuItem, i) => {
-      expect(submenuItem.find(ReferenceLink).prop('reference')).toBe(moreReferences[i]);
+      expect(submenuItem.label.props.reference).toBe(moreReferences[i]);
     });
-    expect(submenuItems.at(2).find(ReferenceLink).childAt(0).text()).toBe(
-      `(another trace) - ${moreReferences[2].spanID}`
-    );
+    expect(submenuItems[2].label.props.children[0]).toBe(`(another trace) - ${moreReferences[2].spanID}`);
   });
 });

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

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { Dropdown, Menu, Tooltip } from 'antd';
+import { Dropdown, Tooltip } from 'antd';
 import { TooltipPlacement } from 'antd/lib/tooltip';
 import NewWindowIcon from '../../common/NewWindowIcon';
 import { SpanReference } from '../../../types/trace';
@@ -28,28 +28,30 @@ type TReferencesButtonProps = {
   focusSpan: (spanID: string) => void;
 };
 
+// ReferencesButton is displayed as a menu at the span level.
+// Example: https://github.com/jaegertracing/jaeger-ui/assets/94157520/2b29921a-2225-4a01-9018-1a1952f186ef
 export default class ReferencesButton extends React.PureComponent<TReferencesButtonProps> {
-  referencesList = (references: SpanReference[]) => (
-    <Menu>
-      {references.map(ref => {
-        const { span, spanID } = ref;
-        return (
-          <Menu.Item key={`${spanID}`}>
-            <ReferenceLink
-              reference={ref}
-              focusSpan={this.props.focusSpan}
-              className="ReferencesButton--TraceRefLink"
-            >
-              {span
-                ? `${span.process.serviceName}:${span.operationName} - ${ref.spanID}`
-                : `(another trace) - ${ref.spanID}`}
-              {!span && <NewWindowIcon />}
-            </ReferenceLink>
-          </Menu.Item>
-        );
-      })}
-    </Menu>
-  );
+  referencesList = (references: SpanReference[]) => {
+    const dropdownItems = references.map(ref => {
+      const { span, spanID } = ref;
+      return {
+        key: `${spanID}`,
+        label: (
+          <ReferenceLink
+            reference={ref}
+            focusSpan={this.props.focusSpan}
+            className="ReferencesButton--TraceRefLink"
+          >
+            {span
+              ? `${span.process.serviceName}:${span.operationName} - ${ref.spanID}`
+              : `(another trace) - ${ref.spanID}`}
+            {!span && <NewWindowIcon />}
+          </ReferenceLink>
+        ),
+      };
+    });
+    return dropdownItems;
+  };
 
   render() {
     const { references, children, tooltipText, focusSpan } = this.props;
@@ -65,7 +67,11 @@ export default class ReferencesButton extends React.PureComponent<TReferencesBut
     if (references.length > 1) {
       return (
         <Tooltip {...tooltipProps}>
-          <Dropdown overlay={this.referencesList(references)} placement="bottomRight" trigger={['click']}>
+          <Dropdown
+            menu={{ items: this.referencesList(references) }}
+            placement="bottomRight"
+            trigger={['click']}
+          >
             <a className="ReferencesButton-MultiParent">{children}</a>
           </Dropdown>
         </Tooltip>

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

@@ -117,7 +117,6 @@ describe('<KeyValuesTable>', () => {
             ]
           : [],
     });
-
     const anchor = wrapper.find(LinkValue);
     expect(anchor).toHaveLength(1);
     expect(anchor.prop('href')).toBe('http://example.com/?kind=client');
@@ -136,15 +135,14 @@ describe('<KeyValuesTable>', () => {
           : [],
     });
     const dropdown = wrapper.find(Dropdown);
-    const menu = shallow(dropdown.prop('overlay')).dive();
-    const anchors = menu.find(LinkValue);
+    const anchors = dropdown.prop('menu').items;
     expect(anchors).toHaveLength(2);
-    const firstAnchor = anchors.first();
-    expect(firstAnchor.prop('href')).toBe('http://example.com/1?kind=client');
-    expect(firstAnchor.children().text()).toBe('Example 1');
-    const secondAnchor = anchors.last();
-    expect(secondAnchor.prop('href')).toBe('http://example.com/2?kind=client');
-    expect(secondAnchor.children().text()).toBe('Example 2');
+    const firstAnchor = anchors[0];
+    expect(firstAnchor.label.props.href).toBe('http://example.com/1?kind=client');
+    expect(firstAnchor.label.props.children).toBe('Example 1');
+    const secondAnchor = anchors[anchors.length - 1];
+    expect(secondAnchor.label.props.href).toBe('http://example.com/2?kind=client');
+    expect(secondAnchor.label.props.children).toBe('Example 2');
     expect(dropdown.closest('tr').find('td').first().text()).toBe('span.kind');
   });
 

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx

@@ -14,7 +14,7 @@
 
 /* eslint-disable import/no-extraneous-dependencies */
 import * as React from 'react';
-import { Dropdown, Menu } from 'antd';
+import { Dropdown } from 'antd';
 import { IoOpenOutline, IoList, IoCopyOutline } from 'react-icons/io5';
 import { JsonView, allExpanded, collapseAllNested, defaultStyles } from 'react-json-view-lite';
 
@@ -110,23 +110,21 @@ LinkValue.defaultProps = {
   title: '',
 };
 
-const linkValueList = (links: Link[]) => (
-  <Menu>
-    {links.map(({ text, url }, index) => (
-      // `index` is necessary in the key because url can repeat
-      // eslint-disable-next-line react/no-array-index-key
-      <Menu.Item key={`${url}-${index}`}>
-        <LinkValue href={url}>{text}</LinkValue>
-      </Menu.Item>
-    ))}
-  </Menu>
-);
+const linkValueList = (links: Link[]) => {
+  const dropdownItems = links.map(({ text, url }, index) => ({
+    label: <LinkValue href={url}>{text}</LinkValue>,
+    key: `${url}-${index}`,
+  }));
+  return dropdownItems;
+};
 
 type KeyValuesTableProps = {
   data: KeyValuePair[];
   linksGetter: ((pairs: KeyValuePair[], index: number) => Link[]) | TNil;
 };
 
+// KeyValuesTable is displayed as a menu at span level.
+// Example: https://github.com/jaegertracing/jaeger-ui/assets/94157520/b518cad9-cb37-4775-a3d6-b667a1235f89
 export default function KeyValuesTable(props: KeyValuesTableProps) {
   const { data, linksGetter } = props;
 
@@ -149,7 +147,11 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
             } else if (links && links.length > 1) {
               valueMarkup = (
                 <div>
-                  <Dropdown overlay={linkValueList(links)} placement="bottomRight" trigger={['click']}>
+                  <Dropdown
+                    menu={{ items: linkValueList(links) }}
+                    placement="bottomRight"
+                    trigger={['click']}
+                  >
                     <a>
                       {jsonTable} <IoList className="KeyValueTable--linkIcon" />
                     </a>