ansi support for attachments

Author: todti

.pnp.cjs

@@ -109,7 +109,7 @@ export const TrAttachment: FunctionComponent<{
       {isOpened && isValidComponentType && (
         <div className={styles["test-result-attachment-content-wrapper"]}>
           <div className={styles["test-result-attachment-content"]} role={"button"} onClick={expandAttachment}>
-            <Attachment item={item} />
+            <Attachment item={item} previewable={true} />
           </div>
         </div>
       )}

packages/web-awesome/src/components/TestResult/TrSteps/TrAttachment.tsx

@@ -71,6 +71,7 @@
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
@@ -103,6 +104,7 @@
     "@vitest/snapshot": "^2.1.9",
     "allure-js-commons": "^3.0.9",
     "allure-vitest": "^3.0.9",
+    "ansi-to-html": "^0.7.2",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",

packages/web-components/package.json

@@ -1,6 +1,7 @@
 import alias from "@rollup/plugin-alias";
 import { babel } from "@rollup/plugin-babel";
 import commonjs from "@rollup/plugin-commonjs";
+import json from "@rollup/plugin-json";
 import resolve from "@rollup/plugin-node-resolve";
 import terser from "@rollup/plugin-terser";
 import typescript from "@rollup/plugin-typescript";
@@ -29,6 +30,7 @@ export default defineConfig([
     ],
     external: ["preact", "preact/hooks", "react", "react-dom"],
     plugins: [
+      json(),
       alias({
         entries: [
           {

packages/web-components/rollup.config.js

@@ -18,7 +18,7 @@ const componentsByAttachmentType: Record<string, any> = {
   uri: AttachmentCode,
   css: AttachmentCode,
   table: AttachmentCode,
-  html: AttachmentCode,
+  html: HtmlPreview,
   text: AttachmentCode,
   video: AttachmentVideo,
 };

packages/web-components/src/components/Attachment/Attachment.tsx

@@ -1,9 +1,19 @@
 import { type AttachmentTestStepResult } from "@allurereport/core-api";
+import AnsiToHtml from "ansi-to-html";
 import { type FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
 import Prism from "prismjs";
 import "./code.scss";
 
+const ansiRegex = /\x1B\[[0-9;?]*[ -/]*[@-~]/g;
+
+const ansiTrace = (text: string) =>
+  new AnsiToHtml({
+    fg: "var(--on-text-primary)",
+  }).toHtml(text);
+
+const isAnsi = (text?: string): boolean => typeof text === "string" && ansiRegex.test(text);
+
 export const AttachmentCode: FunctionalComponent<{
   item: AttachmentTestStepResult;
   attachment: { text?: string };
@@ -12,13 +22,27 @@ export const AttachmentCode: FunctionalComponent<{
     Prism.highlightAll();
   }, [attachment]);
 
+  const ext = item?.link?.ext?.replace(".", "") ?? "plaintext";
+  const rawText = attachment.text ?? "";
+
   return (
-    <pre
-      data-testid={"code-attachment-content"}
-      key={item?.link?.id}
-      className={`language-${item?.link?.ext?.replace(".", "")} line-numbers`}
-    >
-      <code>{attachment?.text}</code>
-    </pre>
+    <>
+      {isAnsi(rawText) ? (
+        <pre
+          data-testid="code-attachment-content"
+          key={item?.link?.id}
+          className={`language-${ext} line-numbers`}
+          dangerouslySetInnerHTML={{ __html: ansiTrace(rawText) }}
+        />
+      ) : (
+        <pre
+          data-testid={"code-attachment-content"}
+          key={item?.link?.id}
+          className={`language-${item?.link?.ext?.replace(".", "")} line-numbers`}
+        >
+          <code className={`language-${ext}`}>{rawText}</code>
+        </pre>
+      )}
+    </>
   );
 };

packages/web-components/src/components/Attachment/AttachmentCode.tsx

@@ -1,7 +1,7 @@
-export { Attachment } from "@/components/Attachment/Attachment";
-export { AttachmentCode } from "@/components/Attachment/AttachmentCode";
-export { HtmlPreview } from "@/components/Attachment/HtmlPreview";
-export { AttachmentImage } from "@/components/Attachment/AttachmentImage";
-export { AttachmentVideo } from "@/components/Attachment/AttachmentVideo";
-export { AttachmentEmpty } from "@/components/Attachment/AttachmentEmpty";
-export { CodeViewer } from "@/components/Attachment/CodeViewer";
+export { Attachment } from "./Attachment";
+export { AttachmentCode } from "./AttachmentCode";
+export { HtmlPreview } from "./HtmlPreview";
+export { AttachmentImage } from "./AttachmentImage";
+export { AttachmentVideo } from "./AttachmentVideo";
+export { AttachmentEmpty } from "./AttachmentEmpty";
+export { CodeViewer } from "./CodeViewer";

packages/web-components/src/components/Attachment/index.tsx

@@ -919,6 +919,7 @@ __metadata:
     "@rollup/plugin-alias": "npm:^5.1.1"
     "@rollup/plugin-babel": "npm:^6.0.4"
     "@rollup/plugin-commonjs": "npm:^28.0.2"
+    "@rollup/plugin-json": "npm:^6.1.0"
     "@rollup/plugin-node-resolve": "npm:^16.0.0"
     "@rollup/plugin-terser": "npm:^0.4.4"
     "@rollup/plugin-typescript": "npm:^12.1.2"
@@ -951,6 +952,7 @@ __metadata:
     "@vitest/snapshot": "npm:^2.1.9"
     allure-js-commons: "npm:^3.0.9"
     allure-vitest: "npm:^3.0.9"
+    ansi-to-html: "npm:^0.7.2"
     autoprefixer: "npm:^10.4.20"
     babel-loader: "npm:^9.2.1"
     babel-plugin-prismjs: "npm:^2.1.0"
@@ -5433,6 +5435,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/plugin-json@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "@rollup/plugin-json@npm:6.1.0"
+  dependencies:
+    "@rollup/pluginutils": "npm:^5.1.0"
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 10/cc018d20c80242a2b8b44fae61a968049cf31bb8406218187cc7cda35747616594e79452dd65722e7da6dd825b392e90d4599d43cd4461a02fefa2865945164e
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-node-resolve@npm:^16.0.0":
   version: 16.0.0
   resolution: "@rollup/plugin-node-resolve@npm:16.0.0"