From 08f53ec2f09cbd039ce47e1d596037c761a8cacf Mon Sep 17 00:00:00 2001 From: Vedant Madane <6527493+VedantMadane@users.noreply.github.com> Date: Thu, 15 Jan 2026 01:47:23 +0530 Subject: [PATCH 1/5] refactor: convert AccordionLinks to functional component Signed-off-by: Vedant Madane <6527493+VedantMadane@users.noreply.github.com> --- .../SpanDetail/AccordionLinks.tsx | 81 ++++++++++--------- 1 file changed, 41 insertions(+), 40 deletions(-) diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx index 8a4811910d..d018417789 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx @@ -58,45 +58,46 @@ export function References(props: ReferenceItemProps) { ); } -export default class AccordionLinks extends React.PureComponent { - 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 ? : ; - headerProps = { - 'aria-checked': isOpen, - onClick: isEmpty ? null : onToggle, - role: 'switch', - }; - } - return ( -
-
- {arrow} - - {this.props.useOtelTerms ? 'Links' : 'References'} - {' '} - ({data.length}) -
- {isOpen && } -
- ); +function AccordionLinks({ + data, + highContrast = false, + interactive = true, + isOpen, + onToggle = null, + focusSpan, + useOtelTerms, +}: AccordionLinksProps) { + 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 ? : ; + headerProps = { + 'aria-checked': isOpen, + onClick: isEmpty ? null : onToggle, + role: 'switch', + }; } + return ( +
+
+ {arrow} + + {useOtelTerms ? 'Links' : 'References'} + {' '} + ({data.length}) +
+ {isOpen && } +
+ ); } + +export default React.memo(AccordionLinks); From 79f737fef5ff3e693af296c64dcfa4e584d21dcb Mon Sep 17 00:00:00 2001 From: Vedant Madane <6527493+VedantMadane@users.noreply.github.com> Date: Thu, 15 Jan 2026 09:33:07 +0530 Subject: [PATCH 2/5] test: add test cases for useOtelTerms prop Signed-off-by: Vedant Madane <6527493+VedantMadane@users.noreply.github.com> --- .../SpanDetail/AccordionLinks.test.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.test.js index 5c3252fa56..9d4bb86cf4 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.test.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.test.js @@ -84,6 +84,20 @@ describe('', () => { const linkLinks = screen.getAllByTestId('link-link'); expect(linkLinks).toHaveLength(links.length); }); + + it('renders "References" label when useOtelTerms is false', () => { + render(); + + expect(screen.getByText('References')).toBeInTheDocument(); + expect(screen.queryByText('Links')).not.toBeInTheDocument(); + }); + + it('renders "Links" label when useOtelTerms is true', () => { + render(); + + expect(screen.getByText('Links')).toBeInTheDocument(); + expect(screen.queryByText('References')).not.toBeInTheDocument(); + }); }); describe('', () => { From 72b3034826cdcb2b47a37d3992d910630232bbb2 Mon Sep 17 00:00:00 2001 From: Vedant Madane <6527493+VedantMadane@users.noreply.github.com> Date: Tue, 20 Jan 2026 22:48:15 +0530 Subject: [PATCH 3/5] refactor: inline type definition and avoid destructuring in AccordionLinks Signed-off-by: Vedant Madane <6527493+VedantMadane@users.noreply.github.com> --- .../SpanDetail/AccordionLinks.tsx | 33 ++++++++----------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx index d018417789..a3d235ff24 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx +++ b/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; - highContrast?: boolean; - interactive?: boolean; - isOpen: boolean; - onToggle?: null | (() => void); - focusSpan: (uiFind: string) => void; - useOtelTerms: boolean; -}; - type ReferenceItemProps = { data: ReadonlyArray; focusSpan: (uiFind: string) => void; @@ -58,15 +48,20 @@ export function References(props: ReferenceItemProps) { ); } -function AccordionLinks({ - data, - highContrast = false, - interactive = true, - isOpen, - onToggle = null, - focusSpan, - useOtelTerms, -}: AccordionLinksProps) { +function AccordionLinks(props: { + data: ReadonlyArray; + highContrast?: boolean; + interactive?: boolean; + isOpen: boolean; + onToggle?: null | (() => void); + focusSpan: (uiFind: string) => void; + useOtelTerms: boolean; +}) { + const { data, isOpen, focusSpan, useOtelTerms } = props; + const highContrast = props.highContrast ?? false; + const interactive = props.interactive ?? true; + const onToggle = props.onToggle ?? null; + const isEmpty = !Array.isArray(data) || !data.length; const iconCls = cx('u-align-icon', { 'AccordianKReferences--emptyIcon': isEmpty }); let arrow: React.ReactNode | null = null; From aed29e86622df6c81733e70db1eb119e6c0a0109 Mon Sep 17 00:00:00 2001 From: Vedant Madane <6527493+VedantMadane@users.noreply.github.com> Date: Mon, 26 Jan 2026 23:04:46 +0530 Subject: [PATCH 4/5] refactor: inline AccordionLinks props destructuring --- .../SpanDetail/AccordionLinks.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx index a3d235ff24..05f818509e 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx @@ -1,4 +1,4 @@ -// Copyright (c) 2019 The Jaeger Authors. +// Copyright (c) 2019 The Jaeger Authors. // SPDX-License-Identifier: Apache-2.0 import * as React from 'react'; @@ -48,7 +48,15 @@ export function References(props: ReferenceItemProps) { ); } -function AccordionLinks(props: { +function AccordionLinks({ + data, + highContrast = false, + interactive = true, + isOpen, + onToggle = null, + focusSpan, + useOtelTerms, +}: { data: ReadonlyArray; highContrast?: boolean; interactive?: boolean; @@ -57,11 +65,6 @@ function AccordionLinks(props: { focusSpan: (uiFind: string) => void; useOtelTerms: boolean; }) { - const { data, isOpen, focusSpan, useOtelTerms } = props; - const highContrast = props.highContrast ?? false; - const interactive = props.interactive ?? true; - const onToggle = props.onToggle ?? null; - const isEmpty = !Array.isArray(data) || !data.length; const iconCls = cx('u-align-icon', { 'AccordianKReferences--emptyIcon': isEmpty }); let arrow: React.ReactNode | null = null; From 7e52a54970fafa56c3888154479518453d3baacd Mon Sep 17 00:00:00 2001 From: Vedant Madane <6527493+VedantMadane@users.noreply.github.com> Date: Mon, 26 Jan 2026 23:48:29 +0530 Subject: [PATCH 5/5] Update packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: Vedant Madane <6527493+VedantMadane@users.noreply.github.com> --- .../TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx index 05f818509e..6bc445d4a3 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordionLinks.tsx @@ -1,4 +1,4 @@ -// Copyright (c) 2019 The Jaeger Authors. +// Copyright (c) 2019 The Jaeger Authors. // SPDX-License-Identifier: Apache-2.0 import * as React from 'react';