Fix: Hyperlinks in PDF not showing correctly when printing the radar

spec/util/urlUtils-spec.js

@@ -1,4 +1,9 @@
-const { constructSheetUrl, getDocumentOrSheetId, getSheetName } = require('../../src/util/urlUtils')
+const {
+  constructSheetUrl,
+  getDocumentOrSheetId,
+  getSheetName,
+  convertRelativeUrlsToAbsolute,
+} = require('../../src/util/urlUtils')
 const queryParams = require('../../src/util/queryParamProcessor')
 
 jest.mock('../../src/util/queryParamProcessor')
@@ -74,4 +79,73 @@ describe('Url Utils', () => {
 
     expect(sheetName).toEqual('sheetName')
   })
+
+  describe('convertRelativeUrlsToAbsolute', () => {
+    beforeEach(() => {
+      delete window.location
+      window.location = Object.create(window)
+      window.location.origin = 'https://radar.thoughtworks.com'
+      window.location.protocol = 'https:'
+    })
+
+    it('should return empty string for empty input', () => {
+      expect(convertRelativeUrlsToAbsolute('')).toEqual('')
+    })
+
+    it('should return null for null input', () => {
+      expect(convertRelativeUrlsToAbsolute(null)).toEqual(null)
+    })
+
+    it('should return undefined for undefined input', () => {
+      expect(convertRelativeUrlsToAbsolute(undefined)).toEqual(undefined)
+    })
+
+    it('should not modify absolute URLs', () => {
+      const html = '<a href="https://example.com/page">Link</a>'
+      expect(convertRelativeUrlsToAbsolute(html)).toEqual(html)
+    })
+
+    it('should not modify mailto links', () => {
+      const html = '<a href="mailto:test@example.com">Email</a>'
+      expect(convertRelativeUrlsToAbsolute(html)).toEqual(html)
+    })
+
+    it('should not modify tel links', () => {
+      const html = '<a href="tel:+1234567890">Call</a>'
+      expect(convertRelativeUrlsToAbsolute(html)).toEqual(html)
+    })
+
+    it('should convert root-relative URLs to absolute', () => {
+      const html = '<a href="/radar/Techniques/continuous-delivery">CD</a>'
+      const expected = '<a href="https://radar.thoughtworks.com/radar/Techniques/continuous-delivery">CD</a>'
+      expect(convertRelativeUrlsToAbsolute(html)).toEqual(expected)
+    })
+
+    it('should convert relative URLs to absolute', () => {
+      const html = '<a href="page/subpage">Link</a>'
+      const expected = '<a href="https://radar.thoughtworks.com/page/subpage">Link</a>'
+      expect(convertRelativeUrlsToAbsolute(html)).toEqual(expected)
+    })
+
+    it('should convert protocol-relative URLs', () => {
+      const html = '<a href="//example.com/page">Link</a>'
+      const expected = '<a href="https://example.com/page">Link</a>'
+      expect(convertRelativeUrlsToAbsolute(html)).toEqual(expected)
+    })
+
+    it('should handle multiple links in the same HTML', () => {
+      const html =
+        '<p>Check out <a href="/radar/Techniques/cd">CD</a> and <a href="https://example.com">Example</a></p>'
+      const expected =
+        '<p>Check out <a href="https://radar.thoughtworks.com/radar/Techniques/cd">CD</a> and <a href="https://example.com">Example</a></p>'
+      expect(convertRelativeUrlsToAbsolute(html)).toEqual(expected)
+    })
+
+    it('should handle single quotes in href', () => {
+      const html = "<a href='/radar/page'>Link</a>"
+      // Note: the regex normalizes quotes to double quotes
+      const expected = '<a href="https://radar.thoughtworks.com/radar/page">Link</a>'
+      expect(convertRelativeUrlsToAbsolute(html)).toEqual(expected)
+    })
+  })
 })

src/graphing/components/quadrantTables.js

@@ -2,6 +2,7 @@ const d3 = require('d3')
 const { graphConfig, getScale, uiConfig } = require('../config')
 const { stickQuadrantOnScroll } = require('./quadrants')
 const { removeAllSpaces } = require('../../util/stringUtil')
+const { convertRelativeUrlsToAbsolute } = require('../../util/urlUtils')
 
 function fadeOutAllBlips() {
   d3.selectAll('g > a.blip-link').attr('opacity', 0.3)
@@ -67,7 +68,7 @@ function renderBlipDescription(blip, ring, quadrant, tip, groupBlipTooltipText)
       .append('div')
       .classed('blip-list__item-container__description', true)
       .attr('id', `blip-description-${blip.id()}`)
-      .html(blip.description())
+      .html(convertRelativeUrlsToAbsolute(blip.description()))
   }
   const blipGraphItem = d3.select(`g a#blip-link-${removeAllSpaces(blip.id())}`)
   const mouseOver = function (e) {

src/graphing/radar.js

@@ -9,6 +9,7 @@ const config = require('../config')
 const featureToggles = config().featureToggles
 const { plotRadarBlips } = require('./blips')
 const { graphConfig, getGraphSize } = require('./config')
+const { convertRelativeUrlsToAbsolute } = require('../util/urlUtils')
 
 const { renderBanner } = require('./components/banner')
 const { renderQuadrantSubnav } = require('./components/quadrantSubnav')
@@ -364,7 +365,7 @@ const Radar = function (size, radar) {
       .attr('id', 'blip-description-' + blip.id())
       .attr('class', 'blip-item-description')
     if (blip.description()) {
-      blipItemDescription.append('p').html(blip.description())
+      blipItemDescription.append('p').html(convertRelativeUrlsToAbsolute(blip.description()))
     }
 
     var mouseOver = function () {

src/util/urlUtils.js

@@ -24,8 +24,39 @@ function getSheetName() {
   return queryParams.sheetName
 }
 
+/**
+ * Converts relative URLs in HTML content to absolute URLs.
+ * This is useful for PDF printing where relative URLs like "/radar/..." 
+ * need to show the full URL.
+ * @param {string} html - HTML content potentially containing relative URLs
+ * @returns {string} HTML with relative URLs converted to absolute
+ */
+function convertRelativeUrlsToAbsolute(html) {
+  if (!html) return html
+
+  const baseUrl = window.location.origin
+
+  // Convert relative href attributes to absolute URLs
+  return html.replace(
+    /href=["'](?!https?:\/\/|mailto:|tel:)([^"']+)["']/gi,
+    (match, relativeUrl) => {
+      // Handle protocol-relative URLs (//example.com)
+      if (relativeUrl.startsWith('//')) {
+        return `href="${window.location.protocol}${relativeUrl}"`
+      }
+      // Handle root-relative URLs (/path)
+      if (relativeUrl.startsWith('/')) {
+        return `href="${baseUrl}${relativeUrl}"`
+      }
+      // Handle relative URLs (path or ./path)
+      return `href="${baseUrl}/${relativeUrl.replace(/^\.\//, '')}"`
+    }
+  )
+}
+
 module.exports = {
   constructSheetUrl,
   getDocumentOrSheetId,
   getSheetName,
+  convertRelativeUrlsToAbsolute,
 }