From 6fb2a6d4c95c01a259e1476a9cd489e856d8a663 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Mon, 26 Aug 2024 16:48:07 +0530
Subject: [PATCH] fix: copy to clipboard not copying complete value in case of
 numbers (#5770)

---
 frontend/src/components/Logs/AddToQueryHOC.styles.scss |  6 +++---
 frontend/src/components/Logs/CopyClipboardHOC.tsx      | 10 ++++++++--
 .../LogDetailedView/FieldRenderer.styles.scss          |  3 ++-
 .../LogDetailedView/TableView/TableViewActions.tsx     |  6 +++---
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Logs/AddToQueryHOC.styles.scss b/frontend/src/components/Logs/AddToQueryHOC.styles.scss
index b65c3cb17e..ec790ceecc 100644
--- a/frontend/src/components/Logs/AddToQueryHOC.styles.scss
+++ b/frontend/src/components/Logs/AddToQueryHOC.styles.scss
@@ -3,14 +3,14 @@
 	display: flex;
 	align-items: center;
 	&.small {
-		height: 16px;
+		line-height: 16px;
 	}
 
 	&.medium {
-		height: 20px;
+		line-height: 20px;
 	}
 
 	&.large {
-		height: 24px;
+		line-height: 24px;
 	}
 }
diff --git a/frontend/src/components/Logs/CopyClipboardHOC.tsx b/frontend/src/components/Logs/CopyClipboardHOC.tsx
index a12208bf77..65cb6fc854 100644
--- a/frontend/src/components/Logs/CopyClipboardHOC.tsx
+++ b/frontend/src/components/Logs/CopyClipboardHOC.tsx
@@ -4,6 +4,7 @@ import { ReactNode, useCallback, useEffect } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 function CopyClipboardHOC({
+	entityKey,
 	textToCopy,
 	children,
 }: CopyClipboardHOCProps): JSX.Element {
@@ -11,11 +12,15 @@ function CopyClipboardHOC({
 	const { notifications } = useNotifications();
 	useEffect(() => {
 		if (value.value) {
+			const key = entityKey || '';
+
+			const notificationMessage = `${key} copied to clipboard`;
+
 			notifications.success({
-				message: 'Copied to clipboard',
+				message: notificationMessage,
 			});
 		}
-	}, [value, notifications]);
+	}, [value, notifications, entityKey]);
 
 	const onClick = useCallback((): void => {
 		setCopy(textToCopy);
@@ -34,6 +39,7 @@ function CopyClipboardHOC({
 }
 
 interface CopyClipboardHOCProps {
+	entityKey: string | undefined;
 	textToCopy: string;
 	children: ReactNode;
 }
diff --git a/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss b/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
index 7e43e1caf3..96d72cad81 100644
--- a/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
+++ b/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
@@ -18,6 +18,7 @@
 
 	.tags {
 		display: flex;
-		gap: 8;
+		flex-wrap: wrap;
+		gap: 8px;
 	}
 }
diff --git a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
index dc0347232d..63912ffa82 100644
--- a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
+++ b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
@@ -67,7 +67,7 @@ export function TableViewActions(
 	);
 
 	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const textToCopy = fieldData.value.slice(1, -1);
+	const textToCopy = fieldData.value;
 
 	if (record.field === 'body') {
 		const parsedBody = recursiveParseJSON(fieldData.value);
@@ -93,7 +93,7 @@ export function TableViewActions(
 	return (
 		<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
 			{record.field === 'body' ? (
-				<CopyClipboardHOC textToCopy={textToCopy}>
+				<CopyClipboardHOC entityKey={fieldFilterKey} textToCopy={textToCopy}>
 					<span
 						style={{
 							color: Color.BG_SIENNA_400,
@@ -104,7 +104,7 @@ export function TableViewActions(
 					/>
 				</CopyClipboardHOC>
 			) : (
-				<CopyClipboardHOC textToCopy={textToCopy}>
+				<CopyClipboardHOC entityKey={fieldFilterKey} textToCopy={textToCopy}>
 					<span
 						style={{
 							color: Color.BG_SIENNA_400,