feat(dashboard): linkify URLs in V1 dashboard description

Apply the linkifyText util to the V1 dashboard description section so
pasted URLs become clickable, matching the V2 behaviour. Preserve line
breaks and wrap long URLs.

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -149,6 +149,18 @@
 		line-height: 22px; /* 157.143% */
 		letter-spacing: -0.07px;
 		padding: 20px 16px 0px 16px;
+		/* Preserve author-entered line breaks in the description. */
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+
+		a {
+			color: var(--accent-primary);
+			text-decoration: underline;
+
+			&:hover {
+				text-decoration: none;
+			}
+		}
 	}
 
 	.dashboard-variables {

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -43,6 +43,7 @@ import { sortLayout } from 'providers/Dashboard/util';
 import { DashboardData } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { ROLES, USER_ROLES } from 'types/roles';
+import { linkifyText } from 'utils/linkifyText';
 import { ComponentTypes } from 'utils/permission';
 import { v4 as uuid } from 'uuid';
 
@@ -515,7 +516,9 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 				</div>
 			)}
 			{!isEmpty(description) && (
-				<section className="dashboard-description-section">{description}</section>
+				<section className="dashboard-description-section">
+					{linkifyText(description ?? '')}
+				</section>
 			)}
 
 			{!isEmpty(dashboardVariables) && (

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.module.scss

@@ -32,6 +32,22 @@
 	cursor: help;
 }
 
+.descriptionTooltip {
+	display: block;
+	overflow-wrap: anywhere;
+	/* Preserve author-entered line breaks in the description. */
+	white-space: pre-wrap;
+
+	a {
+		color: var(--accent-primary);
+		text-decoration: underline;
+
+		&:hover {
+			text-decoration: none;
+		}
+	}
+}
+
 .publicLink {
 	display: inline-flex;
 	align-items: center;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx

@@ -14,6 +14,7 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { isEmpty } from 'lodash-es';
+import { linkifyText } from 'utils/linkifyText';
 import { openInNewTab } from 'utils/navigation';
 
 import styles from './DashboardInfo.module.scss';
@@ -143,7 +144,14 @@ function DashboardInfo({
 			)}
 
 			{hasDescription && (
-				<TooltipSimple title={description} disableHoverableContent>
+				<TooltipSimple
+					side="bottom"
+					title={
+						<span className={styles.descriptionTooltip}>
+							{linkifyText(description)}
+						</span>
+					}
+				>
 					<SolidInfoCircle
 						className={styles.descriptionIcon}
 						size={14}

frontend/src/utils/__tests__/linkifyText.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+
+import { linkifyText } from '../linkifyText';
+
+describe('linkifyText', () => {
+	it('returns plain text unchanged when there are no links', () => {
+		render(<div>{linkifyText('just a plain description')}</div>);
+
+		expect(screen.getByText('just a plain description')).toBeInTheDocument();
+		expect(screen.queryByRole('link')).not.toBeInTheDocument();
+	});
+
+	it('wraps an http(s) URL in an anchor that opens in a new tab', () => {
+		render(<div>{linkifyText('see https://signoz.io/docs for more')}</div>);
+
+		const link = screen.getByRole('link', { name: 'https://signoz.io/docs' });
+		expect(link).toHaveAttribute('href', 'https://signoz.io/docs');
+		expect(link).toHaveAttribute('target', '_blank');
+		expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+	});
+
+	it('prefixes bare www. links with https://', () => {
+		render(<div>{linkifyText('visit www.signoz.io')}</div>);
+
+		const link = screen.getByRole('link', { name: 'www.signoz.io' });
+		expect(link).toHaveAttribute('href', 'https://www.signoz.io');
+	});
+
+	it('keeps trailing punctuation outside the link', () => {
+		render(<div>{linkifyText('read https://signoz.io.')}</div>);
+
+		const link = screen.getByRole('link', { name: 'https://signoz.io' });
+		expect(link).toHaveAttribute('href', 'https://signoz.io');
+	});
+
+	it('linkifies multiple URLs in the same string', () => {
+		render(
+			<div>{linkifyText('a https://one.com and b https://two.com end')}</div>,
+		);
+
+		expect(screen.getAllByRole('link')).toHaveLength(2);
+		expect(
+			screen.getByRole('link', { name: 'https://one.com' }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('link', { name: 'https://two.com' }),
+		).toBeInTheDocument();
+	});
+
+	it('preserves newlines around a link', () => {
+		const { container } = render(
+			<div>{linkifyText('line one\nsee https://signoz.io\nline three')}</div>,
+		);
+
+		expect(container.textContent).toBe(
+			'line one\nsee https://signoz.io\nline three',
+		);
+		expect(
+			screen.getByRole('link', { name: 'https://signoz.io' }),
+		).toHaveAttribute('href', 'https://signoz.io');
+	});
+
+	it('returns an empty string unchanged', () => {
+		expect(linkifyText('')).toBe('');
+	});
+});

frontend/src/utils/linkifyText.tsx

@@ -0,0 +1,71 @@
+import { Fragment, MouseEvent, ReactNode } from 'react';
+
+/** Matches http(s) URLs and bare www. links up to the next whitespace. */
+const URL_REGEX = /((?:https?:\/\/|www\.)[^\s]+)/gi;
+/** Trailing punctuation that is almost never part of the intended URL. */
+const TRAILING_PUNCTUATION = /[.,;:!?)\]}'"]+$/;
+
+const stopPropagation = (
+	event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>,
+): void => {
+	// Prevent parent click listeners (e.g. title edit) from firing.
+	event.stopPropagation();
+};
+
+/**
+ * Splits `text` into plain-text and anchor segments, wrapping any detected
+ * URL in an anchor that opens in a new tab. Trailing punctuation is kept
+ * outside the link so sentences like "see https://signoz.io." stay clean.
+ */
+export function linkifyText(text: string): ReactNode {
+	if (!text) {
+		return text;
+	}
+
+	const segments: ReactNode[] = [];
+	let lastIndex = 0;
+	let key = 0;
+
+	const matches = text.matchAll(URL_REGEX);
+	for (const match of matches) {
+		const matchStart = match.index ?? 0;
+		const rawUrl = match[0];
+
+		const trailing = rawUrl.match(TRAILING_PUNCTUATION)?.[0] ?? '';
+		const url = trailing ? rawUrl.slice(0, -trailing.length) : rawUrl;
+		const href = url.startsWith('www.') ? `https://${url}` : url;
+
+		if (matchStart > lastIndex) {
+			segments.push(
+				<Fragment key={key}>{text.slice(lastIndex, matchStart)}</Fragment>,
+			);
+			key += 1;
+		}
+
+		segments.push(
+			<a
+				key={key}
+				href={href}
+				rel="noopener noreferrer"
+				target="_blank"
+				onClick={stopPropagation}
+			>
+				{url}
+			</a>,
+		);
+		key += 1;
+
+		if (trailing) {
+			segments.push(<Fragment key={key}>{trailing}</Fragment>);
+			key += 1;
+		}
+
+		lastIndex = matchStart + rawUrl.length;
+	}
+
+	if (lastIndex < text.length) {
+		segments.push(<Fragment key={key}>{text.slice(lastIndex)}</Fragment>);
+	}
+
+	return segments;
+}