From a393ea4d686377cb53a0b572e0fe25f557cdda97 Mon Sep 17 00:00:00 2001
From: CKanishka <ckanishka24@gmail.com>
Date: Tue, 22 Aug 2023 23:08:52 +0530
Subject: [PATCH] fix(FE/logs): enable horizontal scroll in logs context

---
 .../src/components/Logs/RawLogView/index.tsx     | 11 ++++++++++-
 .../src/components/Logs/RawLogView/styles.ts     | 16 ++++++++++------
 frontend/src/container/LogsContextList/index.tsx |  8 +++++++-
 .../src/container/LogsExplorerContext/index.tsx  | 12 ++++++++++--
 .../src/container/LogsExplorerContext/styles.ts  |  4 ++++
 5 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
index e926e73643..42c7aae4ae 100644
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -37,12 +37,19 @@ const convert = new Convert();
 interface RawLogViewProps {
 	isActiveLog?: boolean;
 	isReadOnly?: boolean;
+	isTextOverflowEllipsisDisabled?: boolean;
 	data: ILog;
 	linesPerRow: number;
 }
 
 function RawLogView(props: RawLogViewProps): JSX.Element {
-	const { isActiveLog = false, isReadOnly = false, data, linesPerRow } = props;
+	const {
+		isActiveLog = false,
+		isReadOnly = false,
+		data,
+		linesPerRow,
+		isTextOverflowEllipsisDisabled = false,
+	} = props;
 
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		data.id,
@@ -143,6 +150,7 @@ function RawLogView(props: RawLogViewProps): JSX.Element {
 			<RawLogContent
 				$isReadOnly={isReadOnly}
 				$isActiveLog={isActiveLog}
+				$isTextOverflowEllipsisDisabled={isTextOverflowEllipsisDisabled}
 				linesPerRow={linesPerRow}
 				dangerouslySetInnerHTML={html}
 			/>
@@ -181,6 +189,7 @@ function RawLogView(props: RawLogViewProps): JSX.Element {
 RawLogView.defaultProps = {
 	isActiveLog: false,
 	isReadOnly: false,
+	isTextOverflowEllipsisDisabled: false,
 };
 
 export default RawLogView;
diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts
index b4be783a2a..e47e736d61 100644
--- a/frontend/src/components/Logs/RawLogView/styles.ts
+++ b/frontend/src/components/Logs/RawLogView/styles.ts
@@ -35,6 +35,7 @@ interface RawLogContentProps {
 	linesPerRow: number;
 	$isReadOnly: boolean;
 	$isActiveLog: boolean;
+	$isTextOverflowEllipsisDisabled: boolean;
 }
 
 export const RawLogContent = styled.div<RawLogContentProps>`
@@ -42,12 +43,15 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 	font-family: Fira Code, monospace;
 	font-weight: 300;
 
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: ${(props): number => props.linesPerRow};
-	line-clamp: ${(props): number => props.linesPerRow};
-	-webkit-box-orient: vertical;
+	${(props): string =>
+		props.$isTextOverflowEllipsisDisabled
+			? 'white-space: nowrap'
+			: `overflow: hidden;
+		text-overflow: ellipsis; 
+		display: -webkit-box;
+		-webkit-line-clamp: ${props.linesPerRow};
+		line-clamp: ${props.linesPerRow}; 
+		-webkit-box-orient: vertical;`};
 
 	font-size: 1rem;
 	line-height: 2rem;
diff --git a/frontend/src/container/LogsContextList/index.tsx b/frontend/src/container/LogsContextList/index.tsx
index 7037a386aa..25e0414498 100644
--- a/frontend/src/container/LogsContextList/index.tsx
+++ b/frontend/src/container/LogsContextList/index.tsx
@@ -154,7 +154,13 @@ function LogsContextList({
 
 	const getItemContent = useCallback(
 		(_: number, log: ILog): JSX.Element => (
-			<RawLogView isReadOnly key={log.id} data={log} linesPerRow={1} />
+			<RawLogView
+				isReadOnly
+				isTextOverflowEllipsisDisabled
+				key={log.id}
+				data={log}
+				linesPerRow={1}
+			/>
 		),
 		[],
 	);
diff --git a/frontend/src/container/LogsExplorerContext/index.tsx b/frontend/src/container/LogsExplorerContext/index.tsx
index 746148f3d1..0631c78ea6 100644
--- a/frontend/src/container/LogsExplorerContext/index.tsx
+++ b/frontend/src/container/LogsExplorerContext/index.tsx
@@ -9,7 +9,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { EditButton, TitleWrapper } from './styles';
+import { EditButton, LogContainer, TitleWrapper } from './styles';
 import { LogsExplorerContextProps } from './types';
 import useInitialQuery from './useInitialQuery';
 
@@ -96,7 +96,15 @@ function LogsExplorerContext({
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...contextListParams}
 			/>
-			<RawLogView isActiveLog isReadOnly data={log} linesPerRow={1} />
+			<LogContainer>
+				<RawLogView
+					isActiveLog
+					isReadOnly
+					isTextOverflowEllipsisDisabled
+					data={log}
+					linesPerRow={1}
+				/>
+			</LogContainer>
 			<LogsContextList
 				order={FILTERS.DESC}
 				// eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/frontend/src/container/LogsExplorerContext/styles.ts b/frontend/src/container/LogsExplorerContext/styles.ts
index 2236c20d53..0e45d44748 100644
--- a/frontend/src/container/LogsExplorerContext/styles.ts
+++ b/frontend/src/container/LogsExplorerContext/styles.ts
@@ -28,3 +28,7 @@ export const EditButton = styled(Button)<{ $isDarkMode: boolean }>`
 			? getAlphaColor(themeColors.white)[45]
 			: getAlphaColor(themeColors.black)[45]};
 `;
+
+export const LogContainer = styled.div`
+	overflow-x: auto;
+`;