added copy to clipboard feature on trace id #2815

Darshit42 · 2025-05-24T17:55:19Z

Which problem is this PR solving?

This PR addresses [Feature]: Add click-to-copy capability to trace ID display #2813

Description of the changes

added a useState hook to keep track of copying the traceid and used Tooltip

How was this change tested?

on UI user can see copy to clipboard when hovered over trace id and when clicked it copies the trace id to clipboard

Checklist

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

Parship999 · 2025-05-24T18:59:22Z

@Darshit42 As per the contributing guidelines, all commits need to be signed, this ensures compliance with the DCO. Also, please review the checklist and ensure that all relevant items are properly checked off.

yurishkuro

the proposal as to create a dedicated "click to copy" component so that we can reuse it in more than one place
include the screenshots in the PR description

packages/jaeger-ui/src/components/common/TraceId.tsx

yurishkuro · 2025-05-24T19:01:36Z

packages/jaeger-ui/src/components/common/TraceId.tsx

+    setHasCopied(true);
+    setTimeout(() => {
+      setHasCopied(false);
+    }, 2000);


this works but it's an unstable way to implement this. If I click the link again 1.9s after the first time, then "copied" text will disappear in 0.1s instead of 2s. A more robust way to do it is

whenClick stores a deadline timestamp in a state (such that later click will override it to later timestamp): deadline=time.Now + 1.8sec

whenClick kicks of a timeout function

timeout function checks if the current time >= deadline, then it sets copied=false, otherwise it doesn't do that

Another solution is to cancel old timeout when new one is created, but I think it's even harder to implement

I didn't consider this while implementing previous code, I have created a separate ClickToCopy function below if everything seems correct i'll push the code

packages/jaeger-ui/src/components/common/TraceId.css

abhayporwals · 2025-05-26T17:40:30Z

before pushing new commit, sign the old commit please.
then you can push the changes as per the review and make sure you sign.

Darshit42 · 2025-05-27T05:25:36Z

@Parship999 @yurishkuro I have made the changes, I also changed test cases to fit the new component, to be honest I wrote/changed test cases for first time if you can tell me how to improve them please let me know :)

Darshit42 · 2025-05-27T05:30:06Z

before pushing new commit, sign the old commit please. then you can push the changes as per the review and make sure you sign.

thanks for the advice I will do it :)

Edit--

by sign them do you mean tick the checklist? I did run the tests before pushing

yurishkuro · 2025-05-28T22:45:44Z

by sign them do you mean tick the checklist? I did run the tests before pushing

https://github.com/jaegertracing/jaeger/blob/a7c26c55b0691c891842d89ddc3999d9f667bb67/CONTRIBUTING_GUIDELINES.md?plain=1#L138

Darshit42 · 2025-05-29T13:59:41Z

@yurishkuro @Parship999 I think they are now signed I ran this command git commit --amend -s

yurishkuro · 2025-05-29T14:02:40Z

You can see the DCO check failing in CI checks. git amend only affects the latest commits, but the check expects all of them signed. Usually the easiest way is to manually squash all commits and sign the latest, but it gets complicated if you did multiple merge-main in between.

graphite-app · 2025-05-29T23:17:48Z

packages/jaeger-ui/src/components/common/ClickToCopy.tsx

+
+  return (
+    <Tooltip title={isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}>
+      <span className={className} onClick={whenClicked} role="textbox" tabIndex={0}>


The role="textbox" attribute is semantically incorrect for this element since it doesn't accept text input. Consider using role="button" instead, which better represents the element's copy action functionality. Additionally, adding an aria-label attribute (e.g., aria-label="Copy trace ID to clipboard") would improve accessibility by clearly communicating the element's purpose to screen reader users.

Suggested change





Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2025-05-29T23:17:49Z

packages/jaeger-ui/src/components/common/ClickToCopy.tsx

+
+  return (
+    <Tooltip title={isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}>
+      <span className={className} onClick={whenClicked} role="textbox" tabIndex={0}>


The component is keyboard accessible with tabIndex={0} but doesn't handle keyboard interactions. For full accessibility, please add keyboard event handling for Enter and Space keys:

onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); whenClicked(); } }}

This ensures users navigating with keyboards can also trigger the copy functionality.

Suggested change



 {

if (e.key === 'Enter' || e.key === ' ') {

e.preventDefault();

whenClicked();

}

}} role="textbox" tabIndex={0}>

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2025-05-29T23:17:51Z

packages/jaeger-ui/src/components/common/TraceId.test.js

@@ -66,12 +72,13 @@ describe('TraceIdDisplayLength', () => {
      getConfigValue.mockReturnValue(configuredLength);

      wrapper = createWrapper({ traceId: shortTraceId });
-      expect(wrapper.text()).toEqual(shortTraceId);
+      expect(wrapper.find('ClickToCopy').children().text()).toEqual(shortTraceId);
    });

    it('renders when traceId is undefiend', () => {


There's a typo in the test description: undefiend should be undefined.

Suggested change

it('renders when traceId is undefiend', () => {

it('renders when traceId is undefined', () => {

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

yurishkuro · 2025-05-30T20:03:13Z

please sign all commits

graphite-app · 2025-06-01T08:14:00Z

packages/jaeger-ui/src/components/common/TraceId.tsx

+      <span
+        className={`TraceIDLength ${lengthClass} u-tx-muted ${className}`}
+        onClick={whenClicked}
+        role="button"
+        tabIndex={0}
+      >


The component correctly implements visual accessibility with role="button" and tabIndex={0}, but is missing keyboard event handling. For full accessibility compliance, please add an onKeyDown handler to support activation via keyboard (Enter or Space key):

onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { whenClicked(); } }}

This ensures the component is fully accessible to keyboard-only users, which is an important WCAG requirement.

Suggested change



 {

if (e.key === 'Enter' || e.key === ' ') {

whenClicked();

}

}}

role="button"

tabIndex={0}

>

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

Darshit42 · 2025-06-01T08:17:00Z

please sign all commits

@yurishkuro I tried signing them but i think its hard due to different commits between my commits, can I close this and open a new pr with all commits signed?

Darshit42 · 2025-06-01T08:50:23Z

@yurishkuro I just saw another pr has been merged regarding this issue I am sorry for delay, I understand as this was a minor issue and was going on for days, should I close this pr?

abhayporwals · 2025-06-01T16:02:06Z

@yurishkuro I just saw another pr has been merged regarding this issue I am sorry for delay, I understand as this was a minor issue and was going on for days, should I close this pr?

Nope, That was not merged in jaeger-ui.
You can still open a new PR and make the required changes. Make sure you sign all the commits by adding -s flag while adding commit.

This issue open from a week now. So, if you don't like to work on this or having trouble than also let us know.

Thanks.

yurishkuro · 2025-06-01T16:04:06Z

@Darshit42 you can open a new PR and reference this one

Darshit42 · 2025-06-03T08:16:54Z

I am closing this PR as I am opening another PR

Darshit42 requested a review from a team as a code owner May 24, 2025 17:55

Darshit42 requested review from jkowall and removed request for a team May 24, 2025 17:55

yurishkuro reviewed May 24, 2025

View reviewed changes

Darshit42 requested a review from yurishkuro May 27, 2025 05:28

Darshit42 force-pushed the main branch 2 times, most recently from faf0cb7 to af3be5e Compare May 29, 2025 14:19

graphite-app bot reviewed May 29, 2025

View reviewed changes

added copy to clipboard feature on trace id

41ef276

Darshit42 force-pushed the main branch 5 times, most recently from a789032 to 41ef276 Compare June 1, 2025 08:12

Merge branch 'main' into main

bde1a0a

graphite-app bot reviewed Jun 1, 2025

View reviewed changes

Darshit42 closed this Jun 3, 2025

Darshit42 mentioned this pull request Jun 4, 2025

Add click to copy #2861

Open

4 tasks

	<span className={className} onClick={whenClicked} role="textbox" tabIndex={0}>
	<span className={className} onClick={whenClicked} role="button" aria-label="Copy to clipboard" tabIndex={0}>

-      <span className={className} onClick={whenClicked} role="textbox" tabIndex={0}>
+      <span className={className} onClick={whenClicked} onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          whenClicked();
+        }
+      }} role="textbox" tabIndex={0}>

	it('renders when traceId is undefiend', () => {
	it('renders when traceId is undefined', () => {

added copy to clipboard feature on trace id #2815

added copy to clipboard feature on trace id #2815

Uh oh!

Conversation

Darshit42 commented May 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Which problem is this PR solving?

Description of the changes

How was this change tested?

Checklist

Uh oh!

Parship999 commented May 24, 2025

Uh oh!

yurishkuro left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yurishkuro May 24, 2025

Choose a reason for hiding this comment

Uh oh!

Darshit42 May 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

abhayporwals commented May 26, 2025

Uh oh!

Darshit42 commented May 27, 2025

Uh oh!

Darshit42 commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yurishkuro commented May 28, 2025

Uh oh!

Darshit42 commented May 29, 2025

Uh oh!

yurishkuro commented May 29, 2025

Uh oh!

graphite-app bot May 29, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot May 29, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot May 29, 2025

Choose a reason for hiding this comment

Uh oh!

yurishkuro commented May 30, 2025

Uh oh!

graphite-app bot Jun 1, 2025

Choose a reason for hiding this comment

Uh oh!

Darshit42 commented Jun 1, 2025

Uh oh!

Darshit42 commented Jun 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abhayporwals commented Jun 1, 2025

Uh oh!

yurishkuro commented Jun 1, 2025

Uh oh!

Darshit42 commented Jun 3, 2025

Uh oh!

Uh oh!

Darshit42 commented May 24, 2025 •

edited

Loading

Darshit42 May 25, 2025 •

edited

Loading

Darshit42 commented May 27, 2025 •

edited

Loading

Darshit42 commented Jun 1, 2025 •

edited

Loading