Fix/2967 (#4071)

frontend/src/container/TriggeredAlerts/Filter.tsx

@@ -1,11 +1,35 @@
 /* eslint-disable react/no-unstable-nested-components */
 import type { SelectProps } from 'antd';
-import { Tag } from 'antd';
-import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
+import { Tag, Tooltip } from 'antd';
+import { BaseOptionType } from 'antd/es/select';
+import { Dispatch, SetStateAction, useCallback, useMemo, useRef } from 'react';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
 import { Container, Select } from './styles';
 
+function TextOverflowTooltip({
+	option,
+}: {
+	option: BaseOptionType;
+}): JSX.Element {
+	const contentRef = useRef<HTMLDivElement | null>(null);
+	const isOverflow = contentRef.current
+		? contentRef.current?.offsetWidth < contentRef.current?.scrollWidth
+		: false;
+	return (
+		<Tooltip
+			placement="left"
+			title={option.value}
+			// eslint-disable-next-line react/jsx-props-no-spreading
+			{...(!isOverflow ? { open: false } : {})}
+		>
+			<div className="ant-select-item-option-content" ref={contentRef}>
+				{option.value}
+			</div>
+		</Tooltip>
+	);
+}
+
 function Filter({
 	setSelectedFilter,
 	setSelectedGroup,
@@ -51,6 +75,7 @@ function Filter({
 
 	const options = uniqueLabels.map((e) => ({
 		value: e,
+		title: '',
 	}));
 
 	const getTags: SelectProps['tagRender'] = (props): JSX.Element => {
@@ -88,6 +113,9 @@ function Filter({
 				placeholder="Group by any tag"
 				tagRender={(props): JSX.Element => getTags(props)}
 				options={options}
+				optionRender={(option): JSX.Element => (
+					<TextOverflowTooltip option={option} />
+				)}
 			/>
 		</Container>
 	);