fix: cover the title as reactNode case for useGetResolvedText (#7965)

* fix: cover the title as reactNode case for useResolvedText

* fix: added more test cases

frontend/src/hooks/dashboard/__test__/useGetResolvedText.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import React from 'react';
 
 import useGetResolvedText from '../useGetResolvedText';
 
@@ -20,7 +21,7 @@ describe('useGetResolvedText', () => {
 	const TEXT_TEMPLATE = 'Logs count in $service.name in $severity';
 
 	const renderHookWithProps = (props: {
-		text: string;
+		text: string | React.ReactNode;
 		variables?: Record<string, string | number | boolean>;
 		dashboardVariables?: Record<string, any>;
 		maxLength?: number;
@@ -130,4 +131,52 @@ describe('useGetResolvedText', () => {
 			'Logs count in test, app, frontend, env in $unknown',
 		);
 	});
+
+	it('should handle non-string text input (ReactNode)', () => {
+		const reactNodeText = <div>Test ReactNode</div>;
+		const variables = {
+			'service.name': SERVICE_VAR,
+		};
+
+		const { result } = renderHookWithProps({
+			text: reactNodeText,
+			variables,
+		});
+
+		// Should return the ReactNode unchanged
+		expect(result.current.fullText).toBe(reactNodeText);
+		expect(result.current.truncatedText).toBe(reactNodeText);
+	});
+
+	it('should handle number input', () => {
+		const text = 123;
+		const variables = {
+			'service.name': SERVICE_VAR,
+		};
+
+		const { result } = renderHookWithProps({
+			text,
+			variables,
+		});
+
+		// Should return the number unchanged
+		expect(result.current.fullText).toBe(text);
+		expect(result.current.truncatedText).toBe(text);
+	});
+
+	it('should handle boolean input', () => {
+		const text = true;
+		const variables = {
+			'service.name': SERVICE_VAR,
+		};
+
+		const { result } = renderHookWithProps({
+			text,
+			variables,
+		});
+
+		// Should return the boolean unchanged
+		expect(result.current.fullText).toBe(text);
+		expect(result.current.truncatedText).toBe(text);
+	});
 });

frontend/src/hooks/dashboard/useGetResolvedText.tsx

@@ -5,10 +5,10 @@
 // return value should be a full text string, and a truncated text string (if max length is provided)
 
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useCallback, useMemo } from 'react';
+import { ReactNode, useCallback, useMemo } from 'react';
 
 interface UseGetResolvedTextProps {
-	text: string;
+	text: string | ReactNode;
 	variables?: Record<string, string | number | boolean>;
 	maxLength?: number;
 	matcher?: string;
@@ -16,10 +16,11 @@ interface UseGetResolvedTextProps {
 }
 
 interface ResolvedTextResult {
-	fullText: string;
-	truncatedText: string;
+	fullText: string | ReactNode;
+	truncatedText: string | ReactNode;
 }
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function useGetResolvedText({
 	text,
 	variables,
@@ -28,6 +29,7 @@ function useGetResolvedText({
 	maxValues = 2, // Default to showing 2 values before +n more
 }: UseGetResolvedTextProps): ResolvedTextResult {
 	const { selectedDashboard } = useDashboard();
+	const isString = typeof text === 'string';
 
 	const processedDashboardVariables = useMemo(() => {
 		if (variables) return variables;
@@ -108,23 +110,25 @@ function useGetResolvedText({
 		[matcher],
 	);
 
-	const fullText = useMemo(
-		() =>
-			text.replace(combinedPattern, (match) => {
-				const varName = extractVarName(match);
-				const value = processedVariables[varName];
+	const fullText = useMemo(() => {
+		if (!isString) return text;
 
-				if (value != null) {
-					const parts = value.split('-|-');
-					return parts.length > 1 ? parts[1] : value;
-				}
-				return match;
-			}),
-		[text, processedVariables, combinedPattern, extractVarName],
-	);
+		return (text as string)?.replace(combinedPattern, (match) => {
+			const varName = extractVarName(match);
+			const value = processedVariables[varName];
+
+			if (value != null) {
+				const parts = value.split('-|-');
+				return parts.length > 1 ? parts[1] : value;
+			}
+			return match;
+		});
+	}, [text, processedVariables, combinedPattern, extractVarName, isString]);
 
 	const truncatedText = useMemo(() => {
-		const result = text.replace(combinedPattern, (match) => {
+		if (!isString) return text;
+
+		const result = (text as string)?.replace(combinedPattern, (match) => {
 			const varName = extractVarName(match);
 			const value = processedVariables[varName];
 
@@ -145,7 +149,14 @@ function useGetResolvedText({
 			return `${result.substring(0, maxLength - 3)}...`;
 		}
 		return result;
-	}, [text, processedVariables, combinedPattern, maxLength, extractVarName]);
+	}, [
+		text,
+		processedVariables,
+		combinedPattern,
+		maxLength,
+		extractVarName,
+		isString,
+	]);
 
 	return {
 		fullText,