From 32bfdfc3d89c4be7ab7dd31a8b417d9da136d349 Mon Sep 17 00:00:00 2001
From: YounixM <myounis.ar@live.com>
Date: Sat, 15 Jun 2024 12:44:59 +0530
Subject: [PATCH] fix: text wrap in log details view, remove json/raw tag

---
 frontend/src/container/LogDetailedView/JsonView.tsx |  6 +++---
 frontend/src/container/LogDetailedView/Overview.tsx | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/container/LogDetailedView/JsonView.tsx b/frontend/src/container/LogDetailedView/JsonView.tsx
index 5984cf9fd0..1f22b1a134 100644
--- a/frontend/src/container/LogDetailedView/JsonView.tsx
+++ b/frontend/src/container/LogDetailedView/JsonView.tsx
@@ -10,7 +10,7 @@ import { JSONViewProps } from './LogDetailedView.types';
 import { aggregateAttributesResourcesToString } from './utils';
 
 function JSONView({ logData }: JSONViewProps): JSX.Element {
-	const [isWrapWord, setIsWrapWord] = useState<boolean>(false);
+	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
 
 	const LogJsonData = useMemo(
 		() => aggregateAttributesResourcesToString(logData),
@@ -22,7 +22,7 @@ function JSONView({ logData }: JSONViewProps): JSX.Element {
 	const options: EditorProps['options'] = {
 		automaticLayout: true,
 		readOnly: true,
-		wordWrap: 'on',
+		wordWrap: isWrapWord ? 'on' : 'off',
 		minimap: {
 			enabled: false,
 		},
@@ -68,7 +68,7 @@ function JSONView({ logData }: JSONViewProps): JSX.Element {
 	return (
 		<div className="json-view-container">
 			<MEditor
-				value={isWrapWord ? JSON.stringify(LogJsonData) : LogJsonData}
+				value={LogJsonData}
 				language="json"
 				options={options}
 				onChange={(): void => {}}
diff --git a/frontend/src/container/LogDetailedView/Overview.tsx b/frontend/src/container/LogDetailedView/Overview.tsx
index ff2a22fa09..957aac5bf7 100644
--- a/frontend/src/container/LogDetailedView/Overview.tsx
+++ b/frontend/src/container/LogDetailedView/Overview.tsx
@@ -35,7 +35,7 @@ function Overview({
 	onClickActionItem,
 	isListViewPanel = false,
 }: Props): JSX.Element {
-	const [isWrapWord, setIsWrapWord] = useState<boolean>(false);
+	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
 	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
 	const [isAttributesExpanded, setIsAttributesExpanded] = useState<boolean>(
 		true,
@@ -48,7 +48,7 @@ function Overview({
 		automaticLayout: true,
 		readOnly: true,
 		height: '40vh',
-		wordWrap: 'on',
+		wordWrap: isWrapWord ? 'on' : 'off',
 		minimap: {
 			enabled: false,
 		},
@@ -118,8 +118,8 @@ function Overview({
 						children: (
 							<div className="logs-body-content">
 								<MEditor
-									value={isWrapWord ? JSON.stringify(logData.body) : logData.body}
-									language={isWrapWord ? 'placetext' : 'json'}
+									value={logData.body}
+									language="json"
 									options={options}
 									onChange={(): void => {}}
 									height="20vh"
@@ -143,7 +143,7 @@ function Overview({
 								</div>
 							</div>
 						),
-						extra: <Tag className="tag">{isWrapWord ? 'Raw' : 'JSON'}</Tag>,
+						// extra: <Tag className="tag">JSON</Tag>,
 						className: 'collapse-content',
 					},
 				]}