Correctly display XML and CSV artifacts in the UI + fallback (#7305)

Author: bilalabbad

changelog/7294.fixed.md

@@ -0,0 +1,2 @@
+- Correctly display XML and CSV artifacts in the UI.
+- Added a fallback to plain text for unsupported content types.

frontend/app/src/entities/artifacts/types.ts

@@ -6,4 +6,6 @@ export type ArtifactContentType =
   | "application/hcl"
   | "image/svg+xml"
   | "text/plain"
-  | "text/markdown";
+  | "text/markdown"
+  | "application/xml"
+  | "text/csv";

frontend/app/src/entities/artifacts/ui/artifact-file.tsx

@@ -4,6 +4,7 @@ import { toast } from "react-toastify";
 import { fetchStream } from "@/shared/api/rest/fetch";
 import { Svg } from "@/shared/components/display/svg";
 import { CodeViewer } from "@/shared/components/editor/code/code-viewer";
+import { CsvTable } from "@/shared/components/editor/csv-table";
 import { MarkdownViewer } from "@/shared/components/editor/markdown/markdown-viewer";
 import NoDataFound from "@/shared/components/errors/no-data-found";
 import { LoadingIndicator } from "@/shared/components/loading/loading-indicator";
@@ -30,7 +31,9 @@ const CONTENT_TYPE_CONFIG: Record<
   "application/hcl": { extension: "hcl", language: "hcl", label: "HCL" },
   "image/svg+xml": { extension: "svg", language: "svg", label: "SVG" },
   "text/plain": { extension: "txt", language: "text", label: "text" },
-};
+  "application/xml": { extension: "xml", language: "xml", label: "XML" },
+  "text/csv": { extension: "csv", language: "csv", label: "CSV" },
+} as const;
 
 function FileLayout({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
@@ -59,7 +62,7 @@ function FileHeader({
   className,
   ...props
 }: FileHeaderProps) {
-  const config = CONTENT_TYPE_CONFIG[contentType];
+  const config = CONTENT_TYPE_CONFIG[contentType] ?? CONTENT_TYPE_CONFIG["text/plain"];
 
   return (
     <div className={classNames("flex items-center gap-1", className)} {...props}>
@@ -84,7 +87,7 @@ function FileContent({
   contentType: ArtifactContentType;
   fileContent: string;
 }) {
-  const config = CONTENT_TYPE_CONFIG[contentType];
+  const config = CONTENT_TYPE_CONFIG[contentType] ?? CONTENT_TYPE_CONFIG["text/plain"];
 
   switch (contentType) {
     case "text/markdown": {
@@ -95,6 +98,13 @@ function FileContent({
         <Svg value={fileContent} className="grow rounded-lg border border-neutral-700 shadow-sm" />
       );
     }
+    case "text/csv": {
+      return (
+        <ScrollArea scrollX scrollBarClassName="bg-transparent">
+          <CsvTable content={fileContent} />
+        </ScrollArea>
+      );
+    }
     default: {
       return (
         <ScrollArea

frontend/app/src/shared/components/editor/csv-table.tsx

@@ -0,0 +1,69 @@
+import { classNames } from "@/shared/utils/common";
+
+interface CsvTableProps {
+  content: string;
+}
+
+const parseCSV = (csv: string): string[][] => {
+  const lines = csv.trim().split("\n");
+  return lines.map((line) => {
+    const values: string[] = [];
+    let current = "";
+    let inQuotes = false;
+
+    for (const char of line) {
+      if (char === '"') {
+        inQuotes = !inQuotes;
+      } else if (char === "," && !inQuotes) {
+        values.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    values.push(current.trim());
+    return values;
+  });
+};
+
+const cellStyle = "whitespace-nowrap border border-neutral-700 px-4 py-3";
+
+export function CsvTable({ content }: CsvTableProps) {
+  const rows = parseCSV(content);
+
+  if (!rows[0]) {
+    return <div className="text-neutral-400 text-sm">No data available</div>;
+  }
+
+  const headers = rows[0];
+  const dataRows = rows.slice(1);
+
+  return (
+    <table className="border-collapse border border-neutral-700 text-sm">
+      <thead className="bg-neutral-900">
+        <tr>
+          {headers.map((header, index) => (
+            <th
+              key={index}
+              className={classNames(cellStyle, "font-semibold text-xs uppercase tracking-wider")}
+            >
+              {header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+
+      <tbody>
+        {dataRows.map((row, rowIndex) => (
+          <tr key={rowIndex} className="hover:bg-neutral-900">
+            {row.map((cell, cellIndex) => (
+              <td key={cellIndex} className={cellStyle}>
+                {cell}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}