fix: add support for long texts in alert history page (#5895)

frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx

@@ -1,5 +1,6 @@
 import './AlertHeader.styles.scss';
 
+import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 import { useAlertRule } from 'providers/Alert';
 import { useEffect, useMemo } from 'react';
 
@@ -42,7 +43,9 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 				<div className="top-section">
 					<div className="alert-title-wrapper">
 						<AlertState state={isAlertRuleDisabled ? 'disabled' : state} />
-						<div className="alert-title">{alert}</div>
+						<div className="alert-title">
+							<LineClampedText text={alert} />
+						</div>
 					</div>
 				</div>
 				<div className="bottom-section">

frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.tsx

@@ -1,18 +1,37 @@
 import './KeyValueLabel.styles.scss';
 
-type KeyValueLabelProps = { badgeKey: string; badgeValue: string };
+import { Tooltip } from 'antd';
+
+import TrimmedText from '../TrimmedText/TrimmedText';
+
+type KeyValueLabelProps = {
+	badgeKey: string;
+	badgeValue: string;
+	maxCharacters?: number;
+};
 
 export default function KeyValueLabel({
 	badgeKey,
 	badgeValue,
+	maxCharacters = 20,
 }: KeyValueLabelProps): JSX.Element | null {
 	if (!badgeKey || !badgeValue) {
 		return null;
 	}
 	return (
 		<div className="key-value-label">
-			<div className="key-value-label__key">{badgeKey}</div>
+			<div className="key-value-label__key">
-			<div className="key-value-label__value">{badgeValue}</div>
+				<TrimmedText text={badgeKey} maxCharacters={maxCharacters} />
+			</div>
+			<Tooltip title={badgeValue}>
+				<div className="key-value-label__value">
+					<TrimmedText text={badgeValue} maxCharacters={maxCharacters} />
+				</div>
+			</Tooltip>
 		</div>
 	);
 }
+
+KeyValueLabel.defaultProps = {
+	maxCharacters: 20,
+};

frontend/src/periscope/components/LineClampedText/LineClampedText.styles.scss

@@ -0,0 +1,6 @@
+.line-clamped-text {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

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

@@ -0,0 +1,52 @@
+import './LineClampedText.styles.scss';
+
+import { Tooltip } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+
+function LineClampedText({
+	text,
+	lines,
+}: {
+	text: string;
+	lines?: number;
+}): JSX.Element {
+	const [isOverflowing, setIsOverflowing] = useState(false);
+	const textRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const checkOverflow = (): void => {
+			if (textRef.current) {
+				setIsOverflowing(
+					textRef.current.scrollHeight > textRef.current.clientHeight,
+				);
+			}
+		};
+
+		checkOverflow();
+		window.addEventListener('resize', checkOverflow);
+
+		return (): void => {
+			window.removeEventListener('resize', checkOverflow);
+		};
+	}, [text, lines]);
+
+	const content = (
+		<div
+			ref={textRef}
+			className="line-clamped-text"
+			style={{
+				WebkitLineClamp: lines,
+			}}
+		>
+			{text}
+		</div>
+	);
+
+	return isOverflowing ? <Tooltip title={text}>{content}</Tooltip> : content;
+}
+
+LineClampedText.defaultProps = {
+	lines: 1,
+};
+
+export default LineClampedText;

frontend/src/periscope/components/TrimmedText/TrimmedText.tsx

@@ -0,0 +1,30 @@
+import { Tooltip } from 'antd';
+import { useEffect, useState } from 'react';
+
+function TrimmedText({
+	text,
+	maxCharacters,
+}: {
+	text: string;
+	maxCharacters: number;
+}): JSX.Element {
+	const [displayText, setDisplayText] = useState(text);
+
+	useEffect(() => {
+		if (text.length > maxCharacters) {
+			setDisplayText(`${text.slice(0, maxCharacters)}...`);
+		} else {
+			setDisplayText(text);
+		}
+	}, [text, maxCharacters]);
+
+	return text.length > maxCharacters ? (
+		<Tooltip title={text}>
+			<span>{displayText}</span>
+		</Tooltip>
+	) : (
+		<span>{displayText}</span>
+	);
+}
+
+export default TrimmedText;