feat: displayb markdown from playbook actions

package.json

@@ -63,6 +63,7 @@
     "linkifyjs": "^4.1.3",
     "lodash": "^4.17.21",
     "mantine-react-table": "^1.3.4",
+    "markdown-it": "^14.1.0",
     "monaco-editor": "0.48.0",
     "monaco-themes": "0.4.4",
     "monaco-yaml": "5.1.1",
@@ -176,6 +177,7 @@
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",
     "@types/dompurify": "^2.3.4",
+    "@types/markdown-it": "^14.1.2",
     "@types/object-hash": "^3.0.1",
     "@types/react-autosuggest": "^10.1.6",
     "@types/react-calendar": "^3.5.1",

src/api/types/playbooks.ts

@@ -34,6 +34,8 @@ export type PlaybookRunAction = {
   result?: {
     stdout?: string;
     logs?: string;
+    markdown?: string;
+    slack?: string;
     stderr?: string;
     [key: string]: unknown;
   };

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

@@ -1,6 +1,7 @@
 import Convert from "ansi-to-html";
 import linkifyHtml from "linkify-html";
 import Linkify from "linkify-react";
+import markdownit from "markdown-it";
 import { Opts } from "linkifyjs";
 import { useMemo } from "react";
 import {
@@ -103,6 +104,39 @@ function DisplayLogs({
   );
 }
 
+function DisplayMarkdown({
+  md,
+  className
+}: {
+  md?: string;
+  className?: string;
+}) {
+  const html = useMemo(() => {
+    if (!md) {
+      return null;
+    }
+
+    const renderer = markdownit({
+      html: true,
+      linkify: true
+    });
+    return renderer.render(md);
+  }, [md]);
+
+  if (!html) {
+    return null;
+  }
+
+  return (
+    <pre
+      className={className}
+      dangerouslySetInnerHTML={{
+        __html: html
+      }}
+    />
+  );
+}
+
 type Props = {
   action: Pick<
     PlaybookRunAction,
@@ -126,11 +160,12 @@ export default function PlaybooksRunActionsResults({
   return (
     <div className="relative flex h-full w-full flex-col">
       {action.error && <pre className={className}>{action.error}</pre>}
-      {result?.stderr || result?.stdout || result?.logs ? (
+      {result?.stderr || result?.stdout || result?.logs || result?.markdown ? (
         <div className={`flex flex-col gap-2 ${className}`}>
           <DisplayStdout className={className} stdout={result?.stdout} />
           <DisplayStderr className={className} stderr={result?.stderr} />
           <DisplayLogs className={className} logs={result?.logs} />
+          <DisplayMarkdown className={className} md={result?.markdown} />
         </div>
       ) : (
         <pre className={className}>