feat: add support for copying individual JSON tree nodes in log details (#9657)

* feat: implement copy functionality for individual JSON tree nodes in log details

* chore: add tests for individual json tree nodes in log details

* test: enhance copy button tests for BodyTitleRenderer

* feat: add support for copying any node in json tree in log details

* test: update BodyTitleRenderer tests to verify copy functionality for JSON tree nodes

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -7,6 +7,9 @@ import {
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useNotifications } from 'hooks/useNotifications';
+import { useCallback } from 'react';
+import { useCopyToClipboard } from 'react-use';
 
 import { TitleWrapper } from './BodyTitleRenderer.styles';
 import { DROPDOWN_KEY } from './constant';
@@ -24,6 +27,8 @@ function BodyTitleRenderer({
 	value,
 }: BodyTitleRendererProps): JSX.Element {
 	const { onAddToQuery } = useActiveLog();
+	const [, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
 
 	const filterHandler = (isFilterIn: boolean) => (): void => {
 		if (parentIsArray) {
@@ -75,18 +80,53 @@ function BodyTitleRenderer({
 		onClick: onClickHandler,
 	};
 
-	const handleTextSelection = (e: React.MouseEvent): void => {
-		// Prevent tree node click when user is trying to select text
-		e.stopPropagation();
-	};
+	const handleNodeClick = useCallback(
+		(e: React.MouseEvent): void => {
+			// Prevent tree node expansion/collapse
+			e.stopPropagation();
+			const cleanedKey = removeObjectFromString(nodeKey);
+			let copyText: string;
+
+			// Check if value is an object or array
+			const isObject = typeof value === 'object' && value !== null;
+
+			if (isObject) {
+				// For objects/arrays, stringify the entire structure
+				copyText = `"${cleanedKey}": ${JSON.stringify(value, null, 2)}`;
+			} else if (parentIsArray) {
+				// For array elements, copy just the value
+				copyText = `"${cleanedKey}": ${value}`;
+			} else {
+				// For primitive values, format as JSON key-value pair
+				const valueStr = typeof value === 'string' ? `"${value}"` : String(value);
+				copyText = `"${cleanedKey}": ${valueStr}`;
+			}
+
+			setCopy(copyText);
+
+			if (copyText) {
+				const notificationMessage = isObject
+					? `${cleanedKey} object copied to clipboard`
+					: `${cleanedKey} copied to clipboard`;
+
+				notifications.success({
+					message: notificationMessage,
+					key: notificationMessage,
+				});
+			}
+		},
+		[nodeKey, parentIsArray, setCopy, value, notifications],
+	);
 
 	return (
-		<TitleWrapper onMouseDown={handleTextSelection}>
-			<Dropdown menu={menu} trigger={['click']}>
-				<SettingOutlined style={{ marginRight: 8 }} className="hover-reveal" />
-			</Dropdown>
+		<TitleWrapper onClick={handleNodeClick}>
+			{typeof value !== 'object' && (
+				<Dropdown menu={menu} trigger={['click']}>
+					<SettingOutlined style={{ marginRight: 8 }} className="hover-reveal" />
+				</Dropdown>
+			)}
 			{title.toString()}{' '}
-			{!parentIsArray && (
+			{!parentIsArray && typeof value !== 'object' && (
 				<span>
 					: <span style={{ color: orange[6] }}>{`${value}`}</span>
 				</span>

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -202,9 +202,7 @@ export default function TableViewActions(
 	if (record.field === 'body') {
 		return (
 			<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
-				<CopyClipboardHOC entityKey={fieldFilterKey} textToCopy={textToCopy}>
-					<BodyContent fieldData={fieldData} record={record} bodyHtml={bodyHtml} />
-				</CopyClipboardHOC>
+				<BodyContent fieldData={fieldData} record={record} bodyHtml={bodyHtml} />
 				{!isListViewPanel && !RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
 					<span className="action-btn">
 						<Tooltip title="Filter for value">

frontend/src/container/LogDetailedView/__tests__/BodyTitleRenderer.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import BodyTitleRenderer from '../BodyTitleRenderer';
+
+let mockSetCopy: jest.Mock;
+const mockNotification = jest.fn();
+
+jest.mock('hooks/logs/useActiveLog', () => ({
+	useActiveLog: (): any => ({
+		onAddToQuery: jest.fn(),
+	}),
+}));
+
+jest.mock('react-use', () => ({
+	useCopyToClipboard: (): any => {
+		mockSetCopy = jest.fn();
+		return [{ value: null }, mockSetCopy];
+	},
+}));
+
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): any => ({
+		notifications: {
+			success: mockNotification,
+			error: jest.fn(),
+			info: jest.fn(),
+			warning: jest.fn(),
+			open: jest.fn(),
+			destroy: jest.fn(),
+		},
+	}),
+}));
+
+describe('BodyTitleRenderer', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should copy primitive value when node is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<BodyTitleRenderer
+				title="name"
+				nodeKey="user.name"
+				value="John"
+				parentIsArray={false}
+			/>,
+		);
+
+		await user.click(screen.getByText('name'));
+
+		await waitFor(() => {
+			expect(mockSetCopy).toHaveBeenCalledWith('"user.name": "John"');
+			expect(mockNotification).toHaveBeenCalledWith(
+				expect.objectContaining({
+					message: expect.stringContaining('user.name'),
+				}),
+			);
+		});
+	});
+
+	it('should copy array element value when clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<BodyTitleRenderer
+				title="0"
+				nodeKey="items[*].0"
+				value="arrayElement"
+				parentIsArray
+			/>,
+		);
+
+		await user.click(screen.getByText('0'));
+
+		await waitFor(() => {
+			expect(mockSetCopy).toHaveBeenCalledWith('"items[*].0": arrayElement');
+		});
+	});
+
+	it('should copy entire object when object node is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const testObject = { id: 123, active: true };
+
+		render(
+			<BodyTitleRenderer
+				title="metadata"
+				nodeKey="user.metadata"
+				value={testObject}
+				parentIsArray={false}
+			/>,
+		);
+
+		await user.click(screen.getByText('metadata'));
+
+		await waitFor(() => {
+			const callArg = mockSetCopy.mock.calls[0][0];
+			expect(callArg).toContain('"user.metadata":');
+			expect(callArg).toContain('"id": 123');
+			expect(callArg).toContain('"active": true');
+			expect(mockNotification).toHaveBeenCalledWith(
+				expect.objectContaining({
+					message: expect.stringContaining('object copied'),
+				}),
+			);
+		});
+	});
+});

frontend/src/container/LogDetailedView/utils.tsx

@@ -39,9 +39,17 @@ export const computeDataNode = (
 	valueIsArray: boolean,
 	value: unknown,
 	nodeKey: string,
+	parentIsArray: boolean,
 ): DataNode => ({
 	key: uniqueId(),
-	title: `${key} ${valueIsArray ? '[...]' : ''}`,
+	title: (
+		<BodyTitleRenderer
+			title={`${key} ${valueIsArray ? '[...]' : ''}`}
+			nodeKey={nodeKey}
+			value={value}
+			parentIsArray={parentIsArray}
+		/>
+	),
 	// eslint-disable-next-line @typescript-eslint/no-use-before-define
 	children: jsonToDataNodes(
 		value as Record<string, unknown>,
@@ -67,7 +75,7 @@ export function jsonToDataNodes(
 
 		if (parentIsArray) {
 			if (typeof value === 'object' && value !== null) {
-				return computeDataNode(key, valueIsArray, value, nodeKey);
+				return computeDataNode(key, valueIsArray, value, nodeKey, parentIsArray);
 			}
 
 			return {
@@ -85,7 +93,7 @@ export function jsonToDataNodes(
 		}
 
 		if (typeof value === 'object' && value !== null) {
-			return computeDataNode(key, valueIsArray, value, nodeKey);
+			return computeDataNode(key, valueIsArray, value, nodeKey, parentIsArray);
 		}
 		return {
 			key: uniqueId(),