refactor: convert AccordionLinks to functional component

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

@@ -84,6 +84,20 @@ describe('<AccordionLinks>', () => {
     const linkLinks = screen.getAllByTestId('link-link');
     expect(linkLinks).toHaveLength(links.length);
   });
+
+  it('renders "References" label when useOtelTerms is false', () => {
+    render(<AccordionLinks {...props} useOtelTerms={false} />);
+
+    expect(screen.getByText('References')).toBeInTheDocument();
+    expect(screen.queryByText('Links')).not.toBeInTheDocument();
+  });
+
+  it('renders "Links" label when useOtelTerms is true', () => {
+    render(<AccordionLinks {...props} useOtelTerms={true} />);
+
+    expect(screen.getByText('Links')).toBeInTheDocument();
+    expect(screen.queryByText('References')).not.toBeInTheDocument();
+  });
 });
 
 describe('<References>', () => {

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

@@ -8,16 +8,6 @@ import './AccordionLinks.css';
 import { ILink } from '../../../../types/otel';
 import ReferenceLink from '../../url/ReferenceLink';
 
-type AccordionLinksProps = {
-  data: ReadonlyArray<ILink>;
-  highContrast?: boolean;
-  interactive?: boolean;
-  isOpen: boolean;
-  onToggle?: null | (() => void);
-  focusSpan: (uiFind: string) => void;
-  useOtelTerms: boolean;
-};
-
 type ReferenceItemProps = {
   data: ReadonlyArray<ILink>;
   focusSpan: (uiFind: string) => void;
@@ -58,45 +48,54 @@ export function References(props: ReferenceItemProps) {
   );
 }
 
-export default class AccordionLinks extends React.PureComponent<AccordionLinksProps> {
-  static defaultProps = {
-    highContrast: false,
-    interactive: true,
-    onToggle: null,
-  };
-
-  render() {
-    const { data, highContrast, interactive, isOpen, onToggle, focusSpan } = this.props;
-    const isEmpty = !Array.isArray(data) || !data.length;
-    const iconCls = cx('u-align-icon', { 'AccordianKReferences--emptyIcon': isEmpty });
-    let arrow: React.ReactNode | null = null;
-    let headerProps: object | null = null;
-    if (interactive) {
-      arrow = isOpen ? <IoChevronDown className={iconCls} /> : <IoChevronForward className={iconCls} />;
-      headerProps = {
-        'aria-checked': isOpen,
-        onClick: isEmpty ? null : onToggle,
-        role: 'switch',
-      };
-    }
-    return (
-      <div className="AccordionLinks">
-        <div
-          className={cx('AccordionLinks--header', {
-            'is-empty': isEmpty,
-            'is-high-contrast': highContrast,
-            'is-open': isOpen,
-          })}
-          {...headerProps}
-        >
-          {arrow}
-          <strong>
-            <span className="AccordionLinks--label">{this.props.useOtelTerms ? 'Links' : 'References'}</span>
-          </strong>{' '}
-          ({data.length})
-        </div>
-        {isOpen && <References data={data} focusSpan={focusSpan} />}
-      </div>
-    );
+function AccordionLinks({
+  data,
+  highContrast = false,
+  interactive = true,
+  isOpen,
+  onToggle = null,
+  focusSpan,
+  useOtelTerms,
+}: {
+  data: ReadonlyArray<ILink>;
+  highContrast?: boolean;
+  interactive?: boolean;
+  isOpen: boolean;
+  onToggle?: null | (() => void);
+  focusSpan: (uiFind: string) => void;
+  useOtelTerms: boolean;
+}) {
+  const isEmpty = !Array.isArray(data) || !data.length;
+  const iconCls = cx('u-align-icon', { 'AccordianKReferences--emptyIcon': isEmpty });
+  let arrow: React.ReactNode | null = null;
+  let headerProps: object | null = null;
+  if (interactive) {
+    arrow = isOpen ? <IoChevronDown className={iconCls} /> : <IoChevronForward className={iconCls} />;
+    headerProps = {
+      'aria-checked': isOpen,
+      onClick: isEmpty ? null : onToggle,
+      role: 'switch',
+    };
   }
+  return (
+    <div className="AccordionLinks">
+      <div
+        className={cx('AccordionLinks--header', {
+          'is-empty': isEmpty,
+          'is-high-contrast': highContrast,
+          'is-open': isOpen,
+        })}
+        {...headerProps}
+      >
+        {arrow}
+        <strong>
+          <span className="AccordionLinks--label">{useOtelTerms ? 'Links' : 'References'}</span>
+        </strong>{' '}
+        ({data.length})
+      </div>
+      {isOpen && <References data={data} focusSpan={focusSpan} />}
+    </div>
+  );
 }
+
+export default React.memo(AccordionLinks);