From 9338efcefc2710a20f5e9f22c7001bf2c9843925 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Tue, 22 Apr 2025 12:03:28 +0530
Subject: [PATCH] fix: boolean values are not shown in the list panel's column
 (#7668)

* fix: boolean values are not shown in the list panel's column

* fix: moved logic to component level

* fix: added type

* fix: added test cases

* fix: added test cases
---
 .../LineClampedText/LineClampedText.tsx       |  5 +-
 .../__test__/LineClampedText.test.tsx         | 64 +++++++++++++++++++
 2 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/periscope/components/LineClampedText/__test__/LineClampedText.test.tsx

diff --git a/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx b/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx
index dfcafcf02d..1e0c41e030 100644
--- a/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx
+++ b/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx
@@ -1,6 +1,7 @@
 import './LineClampedText.styles.scss';
 
 import { Tooltip, TooltipProps } from 'antd';
+import { isBoolean } from 'lodash-es';
 import { useEffect, useRef, useState } from 'react';
 
 function LineClampedText({
@@ -8,7 +9,7 @@ function LineClampedText({
 	lines,
 	tooltipProps,
 }: {
-	text: string;
+	text: string | boolean;
 	lines?: number;
 	tooltipProps?: TooltipProps;
 }): JSX.Element {
@@ -40,7 +41,7 @@ function LineClampedText({
 				WebkitLineClamp: lines,
 			}}
 		>
-			{text}
+			{isBoolean(text) ? String(text) : text}
 		</div>
 	);
 
diff --git a/frontend/src/periscope/components/LineClampedText/__test__/LineClampedText.test.tsx b/frontend/src/periscope/components/LineClampedText/__test__/LineClampedText.test.tsx
new file mode 100644
index 0000000000..d512e3f60d
--- /dev/null
+++ b/frontend/src/periscope/components/LineClampedText/__test__/LineClampedText.test.tsx
@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+
+import LineClampedText from '../LineClampedText';
+
+describe('LineClampedText', () => {
+	// Reset all mocks after each test
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders string text correctly', () => {
+		const text = 'Test text';
+		render(<LineClampedText text={text} />);
+
+		expect(screen.getByText(text)).toBeInTheDocument();
+	});
+
+	it('renders empty string correctly', () => {
+		const { container } = render(<LineClampedText text="" />);
+
+		// For empty strings, we need to check that a div exists
+		// but it's harder to check for empty text directly with queries
+		expect(container.textContent).toBe('');
+	});
+
+	it('renders boolean text correctly - true', () => {
+		render(<LineClampedText text />);
+
+		expect(screen.getByText('true')).toBeInTheDocument();
+	});
+
+	it('renders boolean text correctly - false', () => {
+		render(<LineClampedText text={false} />);
+
+		expect(screen.getByText('false')).toBeInTheDocument();
+	});
+
+	it('applies line clamping with provided lines prop', () => {
+		const text = 'Test text with multiple lines';
+		const lines = 2;
+
+		render(<LineClampedText text={text} lines={lines} />);
+
+		// Verify the text is rendered correctly
+		expect(screen.getByText(text)).toBeInTheDocument();
+
+		// Verify the component received the correct props
+		expect((screen.getByText(text).style as any).WebkitLineClamp).toBe(
+			String(lines),
+		);
+	});
+
+	it('uses default line count of 1 when lines prop is not provided', () => {
+		const text = 'Test text';
+
+		render(<LineClampedText text={text} />);
+
+		// Verify the text is rendered correctly
+		expect(screen.getByText(text)).toBeInTheDocument();
+
+		// Verify the default props
+		expect(LineClampedText.defaultProps?.lines).toBe(1);
+	});
+});