fix: restricted column long value to 3 line and line clamped (#6056)

* fix: restricted column long value to 3 line and line clamped

* fix: added tooltip prop as prop for generic component and passed style from consumer

* fix: comment resolved

* fix: refactored styles

* fix: updated snapshot

* fix: removed console log

frontend/src/container/GridTableComponent/GridTableComponent.styles.scss

@@ -0,0 +1,5 @@
+.long-text-tooltip {
+	max-width: 500px;
+	max-height: 500px;
+	overflow-y: auto;
+}

frontend/src/container/GridTableComponent/index.tsx

@@ -1,3 +1,5 @@
+import './GridTableComponent.styles.scss';
+
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Space, Tooltip } from 'antd';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
@@ -5,6 +7,7 @@ import { Events } from 'constants/events';
 import { QueryTable } from 'container/QueryTable';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { cloneDeep, get, isEmpty } from 'lodash-es';
+import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 import { memo, ReactNode, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { eventEmitter } from 'utils/getEventEmitter';
@@ -116,7 +119,16 @@ function GridTableComponent({
 							}
 						>
 							<Space>
-								{text}
+								<LineClampedText
+									text={text}
+									lines={3}
+									tooltipProps={{
+										placement: 'right',
+										autoAdjustOverflow: true,
+										overlayClassName: 'long-text-tooltip',
+									}}
+								/>
+
 								{hasMultipleMatches && (
 									<Tooltip title={t('this_value_satisfies_multiple_thresholds')}>
 										<ExclamationCircleFilled className="value-graph-icon" />
@@ -127,7 +139,19 @@ function GridTableComponent({
 					);
 				}
 			}
-			return <div>{text}</div>;
+			return (
+				<div>
+					<LineClampedText
+						text={text}
+						lines={3}
+						tooltipProps={{
+							placement: 'right',
+							autoAdjustOverflow: true,
+							overlayClassName: 'long-text-tooltip',
+						}}
+					/>
+				</div>
+			);
 		},
 	}));
 

frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss

@@ -63,8 +63,7 @@
 		height: 40px;
 		justify-content: end;
 		padding: 0 8px;
-		margin-top: 12px;
+		margin: 12px 0 2px;
-		margin-bottom: 2px;
 	}
 }
 

frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap

@@ -266,15 +266,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               demo-app
                             </div>
+                          </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               4.35 s
                             </div>
+                          </div>
                         </td>
                       </tr>
                       <tr
@@ -284,15 +292,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               customer
                             </div>
+                          </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               431 ms
                             </div>
+                          </div>
                         </td>
                       </tr>
                       <tr
@@ -302,15 +318,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               mysql
                             </div>
+                          </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               431 ms
                             </div>
+                          </div>
                         </td>
                       </tr>
                       <tr
@@ -320,15 +344,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               frontend
                             </div>
+                          </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               287 ms
                             </div>
+                          </div>
                         </td>
                       </tr>
                       <tr
@@ -338,15 +370,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               driver
                             </div>
+                          </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               230 ms
                             </div>
+                          </div>
                         </td>
                       </tr>
                       <tr
@@ -356,15 +396,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               route
                             </div>
+                          </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               66.4 ms
                             </div>
+                          </div>
                         </td>
                       </tr>
                       <tr
@@ -374,15 +422,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               redis
                             </div>
+                          </div>
                         </td>
                         <td
                           class="ant-table-cell"
                         >
                           <div>
+                            <div
+                              class="line-clamped-text"
+                            >
                               31.3 ms
                             </div>
+                          </div>
                         </td>
                       </tr>
                     </tbody>

frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss

@@ -52,8 +52,7 @@
 		height: 40px;
 		justify-content: end;
 		padding: 0 8px;
-		margin-top: 12px;
+		margin: 12px 0 2px;
-		margin-bottom: 2px;
 	}
 }
 

frontend/src/periscope/components/LineClampedText/LineClampedText.tsx

@@ -1,14 +1,16 @@
 import './LineClampedText.styles.scss';
 
-import { Tooltip } from 'antd';
+import { Tooltip, TooltipProps } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 
 function LineClampedText({
 	text,
 	lines,
+	tooltipProps,
 }: {
 	text: string;
 	lines?: number;
+	tooltipProps?: TooltipProps;
 }): JSX.Element {
 	const [isOverflowing, setIsOverflowing] = useState(false);
 	const textRef = useRef<HTMLDivElement>(null);
@@ -42,11 +44,22 @@ function LineClampedText({
 		</div>
 	);
 
-	return isOverflowing ? <Tooltip title={text}>{content}</Tooltip> : content;
+	return isOverflowing ? (
+		<Tooltip
+			title={text}
+			// eslint-disable-next-line react/jsx-props-no-spreading
+			{...tooltipProps}
+		>
+			{content}
+		</Tooltip>
+	) : (
+		content
+	);
 }
 
 LineClampedText.defaultProps = {
 	lines: 1,
+	tooltipProps: {},
 };
 
 export default LineClampedText;