From fe23b59085123355fa59a28694d6e17d50a01892 Mon Sep 17 00:00:00 2001
From: "andrii.dudar" <fanat.web@gmail.com>
Date: Wed, 23 Oct 2024 17:41:44 +0200
Subject: [PATCH] [ISSUE-464] Add project name as a part of exported CSV file
 name

---
 apps/opik-frontend/package-lock.json                 |  9 +++++++++
 apps/opik-frontend/package.json                      |  1 +
 .../pages/TracesPage/TracesActionsButton.tsx         | 12 +++++++++---
 .../src/components/pages/TracesPage/TracesPage.tsx   |  1 +
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/opik-frontend/package-lock.json b/apps/opik-frontend/package-lock.json
index b3aa4fc59..5f7816d6b 100644
--- a/apps/opik-frontend/package-lock.json
+++ b/apps/opik-frontend/package-lock.json
@@ -59,6 +59,7 @@
         "react-hotkeys-hook": "^4.5.1",
         "react-resizable-panels": "^2.0.20",
         "react18-json-view": "^0.2.8",
+        "slugify": "^1.6.6",
         "stylelint-scss": "^6.4.1",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
@@ -10160,6 +10161,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/slugify": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
+      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/apps/opik-frontend/package.json b/apps/opik-frontend/package.json
index 96244ae80..3c4e1cac3 100644
--- a/apps/opik-frontend/package.json
+++ b/apps/opik-frontend/package.json
@@ -76,6 +76,7 @@
     "react-hotkeys-hook": "^4.5.1",
     "react-resizable-panels": "^2.0.20",
     "react18-json-view": "^0.2.8",
+    "slugify": "^1.6.6",
     "stylelint-scss": "^6.4.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/apps/opik-frontend/src/components/pages/TracesPage/TracesActionsButton.tsx b/apps/opik-frontend/src/components/pages/TracesPage/TracesActionsButton.tsx
index 0a098d177..e6bd3cfc7 100644
--- a/apps/opik-frontend/src/components/pages/TracesPage/TracesActionsButton.tsx
+++ b/apps/opik-frontend/src/components/pages/TracesPage/TracesActionsButton.tsx
@@ -3,6 +3,8 @@ import last from "lodash/last";
 import get from "lodash/get";
 import { json2csv } from "json-2-csv";
 import FileSaver from "file-saver";
+import slugify from "slugify";
+
 import { ArrowDownToLine, Database, Trash } from "lucide-react";
 
 import {
@@ -22,12 +24,13 @@ type TracesActionsButtonProps = {
   type: TRACE_DATA_TYPE;
   rows: Array<Trace | Span>;
   selectedColumns: string[];
+  projectName: string;
   projectId: string;
 };
 
 const TracesActionsButton: React.FunctionComponent<
   TracesActionsButtonProps
-> = ({ rows, type, selectedColumns, projectId }) => {
+> = ({ rows, type, selectedColumns, projectName, projectId }) => {
   const resetKeyRef = useRef(0);
   const [open, setOpen] = useState<boolean | number>(false);
 
@@ -42,6 +45,9 @@ const TracesActionsButton: React.FunctionComponent<
   }, [projectId, rows]);
 
   const exportCSVHandler = useCallback(() => {
+    const fileName = `${slugify(projectName, { lower: true })}-${
+      type === TRACE_DATA_TYPE.traces ? "traces" : "llm-calls"
+    }.csv`;
     const mappedRows = rows.map((row) => {
       return selectedColumns.reduce<Record<string, unknown>>((acc, column) => {
         // we need split by dot to parse usage into correct structure
@@ -54,9 +60,9 @@ const TracesActionsButton: React.FunctionComponent<
 
     FileSaver.saveAs(
       new Blob([json2csv(mappedRows)], { type: "text/csv;charset=utf-8" }),
-      type === TRACE_DATA_TYPE.traces ? "traces.csv" : "llm_calls.csv",
+      fileName,
     );
-  }, [rows, selectedColumns, type]);
+  }, [projectName, rows, selectedColumns, type]);
 
   return (
     <>
diff --git a/apps/opik-frontend/src/components/pages/TracesPage/TracesPage.tsx b/apps/opik-frontend/src/components/pages/TracesPage/TracesPage.tsx
index 191564e49..6813d8812 100644
--- a/apps/opik-frontend/src/components/pages/TracesPage/TracesPage.tsx
+++ b/apps/opik-frontend/src/components/pages/TracesPage/TracesPage.tsx
@@ -267,6 +267,7 @@ const TracesPage = () => {
           {selectedRows.length > 0 && (
             <TracesActionsButton
               projectId={projectId}
+              projectName={name}
               rows={selectedRows}
               selectedColumns={selectedColumns}
               type={type as TRACE_DATA_TYPE}