feat: make links inside playbook action output clickable

Fixes #2013

package.json

@@ -57,6 +57,8 @@
     "jotai": "^2.0.3",
     "jotai-location": "^0.5.2",
     "jsonpath-plus": "^7.0.0",
+    "linkify-react": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "lodash": "^4.17.21",
     "monaco-editor": "0.48.0",
     "monaco-themes": "0.4.4",

src/components/Playbooks/Runs/Actions/PlaybooksActionsResults.tsx

@@ -1,6 +1,13 @@
 import Convert from "ansi-to-html";
+import Linkify from "linkify-react";
+import { Opts } from "linkifyjs";
 import { PlaybookRunAction } from "../../../../api/types/playbooks";
 
+const options = {
+  className: "text-blue-500 hover:underline pointer",
+  target: "_blank"
+} satisfies Opts;
+
 const convert = new Convert();
 
 function DisplayStdout({
@@ -15,7 +22,11 @@ function DisplayStdout({
   }
   const html = convert.toHtml(stdout);
   return (
-    <pre className={className} dangerouslySetInnerHTML={{ __html: html }} />
+    <pre className={className}>
+      <Linkify as="p" options={options}>
+        {html}
+      </Linkify>
+    </pre>
   );
 }
 
@@ -31,10 +42,11 @@ function DisplayStderr({
   }
   const html = convert.toHtml(stderr);
   return (
-    <pre
-      className={`text-red-500 ${className}`}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <pre className={`text-red-500 ${className}`}>
+      <Linkify as="p" options={options}>
+        {html}
+      </Linkify>
+    </pre>
   );
 }
 
@@ -50,7 +62,11 @@ function DisplayLogs({
   }
   const html = convert.toHtml(logs);
   return (
-    <pre className={className} dangerouslySetInnerHTML={{ __html: html }} />
+    <pre className={className}>
+      <Linkify as="p" options={options}>
+        {html}
+      </Linkify>
+    </pre>
   );
 }
 
@@ -70,7 +86,13 @@ export default function PlaybooksRunActionsResults({
   }
 
   if (action.error) {
-    return <pre className={className}>{action.error}</pre>;
+    return (
+      <pre className={className}>
+        <Linkify as="p" options={options}>
+          {action.error}
+        </Linkify>
+      </pre>
+    );
   }
 
   if (result?.stderr || result?.stdout || result?.logs) {
@@ -85,5 +107,11 @@ export default function PlaybooksRunActionsResults({
 
   const json = JSON.stringify(result, null, 2);
 
-  return <pre className={className}>{json}</pre>;
+  return (
+    <pre className={className}>
+      <Linkify as="p" options={options}>
+        {json}
+      </Linkify>
+    </pre>
+  );
 }