Skip to content

Conversation

@murataslan1
Copy link

@murataslan1 murataslan1 commented Nov 28, 2025

Summary

URLs pasted in dashboard description are now clickable links.

Problem

When users paste URLs in dashboard description, they appear as plain text and are not usable.

Solution

Added a linkifyText utility function that:

  • Detects URLs (http/https) in the description text
  • Converts them to clickable <a> tags
  • Opens links in new tab with target="_blank"
  • Adds proper security attributes (rel="noopener noreferrer")

Changes

  • Renamed utils.ts to utils.tsx to support JSX
  • Added linkifyText function
  • Updated description rendering to use linkifyText
  • Added link styling for both dark and light modes

Fixes #5256


Note

Convert URLs in dashboard descriptions to clickable links with theme-aware styling.

  • Dashboard Description:
    • Render description using linkifyText(description) in frontend/src/container/NewDashboard/DashboardDescription/index.tsx to convert URLs to clickable links (opens in new tab with safe attrs).
  • Utilities:
    • Add linkifyText in frontend/src/container/NewDashboard/DashboardDescription/utils.tsx to detect http/https URLs and return linkified parts.
  • Styles:
    • Add .dashboard-description-link styles (hover states) under .dashboard-description-section for dark and light modes in frontend/src/container/NewDashboard/DashboardDescription/Description.styles.scss.

Written by Cursor Bugbot for commit 6069d02. This will update automatically on new commits. Configure here.

Added linkifyText utility function to convert URLs in dashboard
description to clickable links that open in new tabs.

Fixes SigNoz#5256

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR is being reviewed by Cursor Bugbot

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

export const DEFAULT_ROW_NAME = 'Sample Row';

export function linkifyText(text: string): ReactNode[] {
const urlRegex = /(https?:\/\/[^\s]+)/g;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: URL regex captures trailing punctuation causing broken links

The URL regex /(https?:\/\/[^\s]+)/g matches all non-whitespace characters after the URL scheme, which incorrectly includes trailing punctuation that commonly follows URLs in natural text. When users write sentences like "Visit https://example.com." or "See https://example.com, for details", the period or comma becomes part of the captured URL, creating broken links. This affects the core functionality since ending sentences with punctuation after a URL is extremely common.

Fix in Cursor Fix in Web

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Render dashboard description text as HTML content?

2 participants