Linkify error text and step headers (#864)

Author: timja

package-lock.json

@@ -33,6 +33,9 @@
   "dependencies": {
     "@formatjs/intl-durationformat": "^0.7.4",
     "@tippyjs/react": "^4.2.6",
+    "linkify-html": "^4.3.1",
+    "linkify-react": "^4.3.1",
+    "linkifyjs": "^4.3.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-zoom-pan-pinch": "3.7.0"

package.json

@@ -1,3 +1,4 @@
+import linkifyHtml from "linkify-html";
 import { memo, useEffect, useRef } from "react";
 
 import { makeReactChildren, tokenizeANSIString } from "./Ansi.tsx";
@@ -55,7 +56,7 @@ export const ConsoleLine = memo(function ConsoleLine(props: ConsoleLineProps) {
           className="console-text"
         >
           {makeReactChildren(
-            tokenizeANSIString(props.content),
+            tokenizeANSIString(linkifyHtml(props.content)),
             `${props.stepId}-${props.lineNumber}`,
           )}
         </div>

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx

@@ -1,5 +1,6 @@
 import "./console-log-card.scss";
 
+import Linkify from "linkify-react";
 import {
   lazy,
   MouseEvent as ReactMouseEvent,
@@ -93,9 +94,17 @@ export default function ConsoleLogCard(props: ConsoleLogCardProps) {
               percentage={props.step.completePercent}
             />
 
-            {props.step.title !== "" && <span>{props.step.title}</span>}
-
-            {props.step.name !== "" && <span>{props.step.name}</span>}
+            {props.step.title !== "" && (
+              <span>
+                <Linkify>{props.step.title}</Linkify>
+              </span>
+            )}
+
+            {props.step.name !== "" && (
+              <span>
+                <Linkify>{props.step.name}</Linkify>
+              </span>
+            )}
 
             <svg
               xmlns="http://www.w3.org/2000/svg"