fix(member-drawer): use hook to copy to support more browsers

frontend/.eslintrc.cjs

@@ -205,6 +205,25 @@ module.exports = {
 		],
 	},
 	overrides: [
+		{
+			files: ['src/**/*.{jsx,tsx,ts}'],
+			excludedFiles: [
+				'**/*.test.{js,jsx,ts,tsx}',
+				'**/*.spec.{js,jsx,ts,tsx}',
+				'**/__tests__/**/*.{js,jsx,ts,tsx}',
+			],
+			rules: {
+				'no-restricted-properties': [
+					'error',
+					{
+						object: 'navigator',
+						property: 'clipboard',
+						message:
+							'Do not use navigator.clipboard directly since it does work well with specific browsers. Use hook useCopyToClipboard from react-use library. https://streamich.github.io/react-use/?path=/story/side-effects-usecopytoclipboard--docs',
+					},
+				],
+			},
+		},
 		{
 			files: [
 				'**/*.test.{js,jsx,ts,tsx}',

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
 import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
@@ -177,26 +178,30 @@ function EditMemberDrawer({
 		}
 	}, [member, isInvited, setLinkType, onClose]);
 
+	const [copyState, copyToClipboard] = useCopyToClipboard();
 	const handleCopyResetLink = useCallback(async (): Promise<void> => {
 		if (!resetLink) {
 			return;
 		}
-		try {
-			await navigator.clipboard.writeText(resetLink);
-			setHasCopiedResetLink(true);
-			setTimeout(() => setHasCopiedResetLink(false), 2000);
-			toast.success(
-				linkType === 'invite'
-					? 'Invite link copied to clipboard'
-					: 'Reset link copied to clipboard',
-				{ richColors: true },
-			);
-		} catch {
+		copyToClipboard(resetLink);
+
+		setHasCopiedResetLink(true);
+		setTimeout(() => setHasCopiedResetLink(false), 2000);
+		toast.success(
+			linkType === 'invite'
+				? 'Invite link copied to clipboard'
+				: 'Reset link copied to clipboard',
+			{ richColors: true },
+		);
+	}, [resetLink, copyToClipboard, linkType]);
+
+	useEffect(() => {
+		if (copyState.error) {
 			toast.error('Failed to copy link', {
 				richColors: true,
 			});
 		}
-	}, [resetLink, linkType]);
+	}, [copyState.error]);
 
 	const handleClose = useCallback((): void => {
 		setShowDeleteConfirm(false);

frontend/src/components/EditMemberDrawer/__tests__/EditMemberDrawer.test.tsx

@@ -7,13 +7,7 @@ import {
 	useUpdateUserDeprecated,
 } from 'api/generated/services/users';
 import { MemberStatus } from 'container/MembersSettings/utils';
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import { ROLES } from 'types/roles';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
@@ -65,6 +59,16 @@ jest.mock('@signozhq/sonner', () => ({
 	},
 }));
 
+const mockCopyToClipboard = jest.fn();
+const mockCopyState = { value: undefined, error: undefined };
+
+jest.mock('react-use', () => ({
+	useCopyToClipboard: (): [typeof mockCopyState, typeof mockCopyToClipboard] => [
+		mockCopyState,
+		mockCopyToClipboard,
+	],
+}));
+
 const mockUpdateMutate = jest.fn();
 const mockDeleteMutate = jest.fn();
 const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
@@ -361,32 +365,14 @@ describe('EditMemberDrawer', () => {
 	});
 
 	describe('Generate Password Reset Link', () => {
-		const mockWriteText = jest.fn().mockResolvedValue(undefined);
-		let clipboardSpy: jest.SpyInstance | undefined;
-
-		beforeAll(() => {
-			Object.defineProperty(navigator, 'clipboard', {
-				value: { writeText: (): Promise<void> => Promise.resolve() },
-				configurable: true,
-				writable: true,
-			});
-		});
-
 		beforeEach(() => {
-			mockWriteText.mockClear();
-			clipboardSpy = jest
-				.spyOn(navigator.clipboard, 'writeText')
-				.mockImplementation(mockWriteText);
+			mockCopyToClipboard.mockClear();
 			mockGetResetPasswordToken.mockResolvedValue({
 				status: 'success',
 				data: { token: 'reset-tok-abc', id: 'user-1' },
 			});
 		});
 
-		afterEach(() => {
-			clipboardSpy?.mockRestore();
-		});
-
 		it('calls getResetPasswordToken and opens the reset link dialog with the generated link', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -421,7 +407,7 @@ describe('EditMemberDrawer', () => {
 			});
 			expect(dialog).toHaveTextContent('reset-tok-abc');
 
-			fireEvent.click(screen.getByRole('button', { name: /^copy$/i }));
+			await user.click(screen.getByRole('button', { name: /^copy$/i }));
 
 			await waitFor(() => {
 				expect(mockToast.success).toHaveBeenCalledWith(
@@ -430,7 +416,7 @@ describe('EditMemberDrawer', () => {
 				);
 			});
 
-			expect(mockWriteText).toHaveBeenCalledWith(
+			expect(mockCopyToClipboard).toHaveBeenCalledWith(
 				expect.stringContaining('reset-tok-abc'),
 			);
 			expect(screen.getByRole('button', { name: /copied!/i })).toBeInTheDocument();

frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx

@@ -17,6 +17,7 @@ function CodeCopyBtn({
 		let copiedText = '';
 		if (children && Array.isArray(children)) {
 			setIsSnippetCopied(true);
+			// eslint-disable-next-line no-restricted-properties
 			navigator.clipboard.writeText(children[0].props.children[0]).finally(() => {
 				copiedText = (children[0].props.children[0] as string).slice(0, 200); // slicing is done due to the limitation in accepted char length in attributes
 				setTimeout(() => {

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -401,6 +401,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 		const textToCopy = selectedTexts.join(', ');
 
+		// eslint-disable-next-line no-restricted-properties
 		navigator.clipboard.writeText(textToCopy).catch(console.error);
 	}, [selectedChips, selectedValues]);
 

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
+import { useCopyToClipboard } from 'react-use';
 import { DialogWrapper } from '@signozhq/dialog';
 import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -105,19 +106,23 @@ function AddKeyModal(): JSX.Element {
 		});
 	}
 
+	const [copyState, copyToClipboard] = useCopyToClipboard();
 	const handleCopy = useCallback(async (): Promise<void> => {
 		if (!createdKey?.key) {
 			return;
 		}
-		try {
-			await navigator.clipboard.writeText(createdKey.key);
-			setHasCopied(true);
-			setTimeout(() => setHasCopied(false), 2000);
-			toast.success('Key copied to clipboard', { richColors: true });
-		} catch {
+
+		copyToClipboard(createdKey.key);
+		setHasCopied(true);
+		setTimeout(() => setHasCopied(false), 2000);
+		toast.success('Key copied to clipboard', { richColors: true });
+	}, [copyToClipboard, createdKey?.key]);
+
+	useEffect(() => {
+		if (copyState.error) {
 			toast.error('Failed to copy key', { richColors: true });
 		}
-	}, [createdKey]);
+	}, [copyState.error]);
 
 	const handleClose = useCallback((): void => {
 		setIsAddKeyOpen(null);

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -9,6 +9,16 @@ jest.mock('@signozhq/sonner', () => ({
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
+const mockCopyToClipboard = jest.fn();
+const mockCopyState = { value: undefined, error: undefined };
+
+jest.mock('react-use', () => ({
+	useCopyToClipboard: (): [typeof mockCopyState, typeof mockCopyToClipboard] => [
+		mockCopyState,
+		mockCopyToClipboard,
+	],
+}));
+
 const mockToast = jest.mocked(toast);
 
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/sa-1/keys';
@@ -35,16 +45,9 @@ function renderModal(): ReturnType<typeof render> {
 }
 
 describe('AddKeyModal', () => {
-	beforeAll(() => {
-		Object.defineProperty(navigator, 'clipboard', {
-			value: { writeText: jest.fn().mockResolvedValue(undefined) },
-			configurable: true,
-			writable: true,
-		});
-	});
-
 	beforeEach(() => {
 		jest.clearAllMocks();
+		mockCopyToClipboard.mockClear();
 		server.use(
 			rest.post(SA_KEYS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(201), ctx.json(createdKeyResponse)),
@@ -90,9 +93,6 @@ describe('AddKeyModal', () => {
 
 	it('copy button writes key to clipboard and shows toast.success', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const writeTextSpy = jest
-			.spyOn(navigator.clipboard, 'writeText')
-			.mockResolvedValue(undefined);
 
 		renderModal();
 
@@ -115,14 +115,12 @@ describe('AddKeyModal', () => {
 		await user.click(copyBtn);
 
 		await waitFor(() => {
-			expect(writeTextSpy).toHaveBeenCalledWith('snz_abc123xyz456secret');
+			expect(mockCopyToClipboard).toHaveBeenCalledWith('snz_abc123xyz456secret');
 			expect(mockToast.success).toHaveBeenCalledWith(
 				'Key copied to clipboard',
 				expect.anything(),
 			);
 		});
-
-		writeTextSpy.mockRestore();
 	});
 
 	it('Cancel button closes the modal', async () => {

frontend/src/hooks/useCopyToClipboard.ts

@@ -39,6 +39,7 @@ export function useCopyToClipboard(
 
 	const copyToClipboard = useCallback(
 		(text: string, id?: ID): void => {
+			// eslint-disable-next-line no-restricted-properties
 			navigator.clipboard.writeText(text).then(() => {
 				if (timeoutRef.current) {
 					clearTimeout(timeoutRef.current);

pkg/query-service/app/traces/tracedetail/waterfall.go

@@ -1,6 +1,7 @@
 package tracedetail
 
 import (
+	"maps"
 	"slices"
 	"sort"
 
@@ -63,26 +64,22 @@ func findIndexForSelectedSpanFromPreOrder(spans []*model.Span, selectedSpanId st
 	return selectedSpanIndex
 }
 
-func getPathFromRootToSelectedSpanId(node *model.Span, selectedSpanId string, uncollapsedSpans []string, isSelectedSpanIDUnCollapsed bool) (bool, []string) {
+func getPathFromRootToSelectedSpanId(node *model.Span, selectedSpanId string) (bool, []string) {
 	spansFromRootToNode := []string{}
 
+	spansFromRootToNode = append(spansFromRootToNode, node.SpanID)
 	if node.SpanID == selectedSpanId {
-		if isSelectedSpanIDUnCollapsed && !slices.Contains(uncollapsedSpans, node.SpanID) {
-			spansFromRootToNode = append(spansFromRootToNode, node.SpanID)
-		}
 		return true, spansFromRootToNode
 	}
 
 	isPresentInSubtreeForTheNode := false
 	for _, child := range node.Children {
-		isPresentInThisSubtree, _spansFromRootToNode := getPathFromRootToSelectedSpanId(child, selectedSpanId, uncollapsedSpans, isSelectedSpanIDUnCollapsed)
+		isPresentInThisSubtree, _spansFromRootToNode := getPathFromRootToSelectedSpanId(child, selectedSpanId)
 		// if the interested node is present in the given subtree then add the span node to uncollapsed node list
 		if isPresentInThisSubtree {
-			if !slices.Contains(uncollapsedSpans, node.SpanID) {
-				spansFromRootToNode = append(spansFromRootToNode, node.SpanID)
-			}
 			isPresentInSubtreeForTheNode = true
 			spansFromRootToNode = append(spansFromRootToNode, _spansFromRootToNode...)
+			break
 		}
 	}
 	return isPresentInSubtreeForTheNode, spansFromRootToNode
@@ -92,7 +89,7 @@ func getPathFromRootToSelectedSpanId(node *model.Span, selectedSpanId string, un
 // throughout the recursion. Per-call state (level, isPartOfPreOrder, etc.)
 // is passed as direct arguments.
 type traverseOpts struct {
-	uncollapsedSpans []string
+	uncollapsedSpans map[string]struct{}
 	selectedSpanID   string
 }
 
@@ -134,7 +131,7 @@ func traverseTrace(span *model.Span, opts traverseOpts, level uint64, isPartOfPr
 		preOrderTraversal = append(preOrderTraversal, &nodeWithoutChildren)
 	}
 
-	isAlreadyUncollapsed := slices.Contains(opts.uncollapsedSpans, span.SpanID)
+	_, isAlreadyUncollapsed := opts.uncollapsedSpans[span.SpanID]
 	for index, child := range span.Children {
 		_childTraversal := traverseTrace(child, opts, level+1, isPartOfPreOrder && isAlreadyUncollapsed, index != (len(span.Children)-1))
 		preOrderTraversal = append(preOrderTraversal, _childTraversal...)
@@ -169,16 +166,28 @@ func GetSelectedSpans(uncollapsedSpans []string, selectedSpanID string, traceRoo
 
 	var preOrderTraversal = make([]*model.Span, 0)
 	var rootServiceName, rootServiceEntryPoint string
-	updatedUncollapsedSpans := uncollapsedSpans
+
+	// create a map of uncollapsed spans for quick lookup
+	uncollapsedSpanMap := make(map[string]struct{})
+	for _, spanID := range uncollapsedSpans {
+		uncollapsedSpanMap[spanID] = struct{}{}
+	}
 
 	selectedSpanIndex := -1
 	for _, rootSpanID := range traceRoots {
 		if rootNode, exists := spanIdToSpanNodeMap[rootSpanID.SpanID]; exists {
-			_, spansFromRootToNode := getPathFromRootToSelectedSpanId(rootNode, selectedSpanID, updatedUncollapsedSpans, isSelectedSpanIDUnCollapsed)
-			updatedUncollapsedSpans = append(updatedUncollapsedSpans, spansFromRootToNode...)
+			present, spansFromRootToNode := getPathFromRootToSelectedSpanId(rootNode, selectedSpanID)
+			if present {
+				for _, spanID := range spansFromRootToNode {
+					if selectedSpanID == spanID && !isSelectedSpanIDUnCollapsed {
+						continue
+					}
+					uncollapsedSpanMap[spanID] = struct{}{}
+				}
+			}
 
 			opts := traverseOpts{
-				uncollapsedSpans: updatedUncollapsedSpans,
+				uncollapsedSpans: uncollapsedSpanMap,
 				selectedSpanID:   selectedSpanID,
 			}
 			_preOrderTraversal := traverseTrace(rootNode, opts, 0, true, false)
@@ -223,5 +232,5 @@ func GetSelectedSpans(uncollapsedSpans []string, selectedSpanID string, traceRoo
 		startIndex = 0
 	}
 
-	return preOrderTraversal[startIndex:endIndex], updatedUncollapsedSpans, rootServiceName, rootServiceEntryPoint
+	return preOrderTraversal[startIndex:endIndex], slices.Collect(maps.Keys(uncollapsedSpanMap)), rootServiceName, rootServiceEntryPoint
 }