feat(datasets): download csv button (#3312)

* feat(datasets): download csv button * cleanup
Arize-ai · Jun 29, 2024 · 823abcd · 823abcd
1 parent f0f7392
commit 823abcd
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/app/src/pages/dataset/DatasetPage.tsx b/app/src/pages/dataset/DatasetPage.tsx
@@ -1,7 +1,15 @@
 import React, { Suspense } from "react";
 import { useLoaderData } from "react-router";
 
-import { Flex, Text, View } from "@arizeai/components";
+import {
+  ActionMenu,
+  Flex,
+  Icon,
+  Icons,
+  Item,
+  Text,
+  View,
+} from "@arizeai/components";
 
 import { Loading } from "@phoenix/components";
 
@@ -29,13 +37,35 @@ function DatasetPageContent({
         borderBottomWidth="thin"
         borderBottomColor="dark"
       >
-        <Flex direction="row" justifyContent="space-between">
+        <Flex
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
           <Flex direction="column" justifyContent="space-between">
             <Text elementType="h1" textSize="xlarge" weight="heavy">
               {dataset.name}
             </Text>
             <Text color="text-700">{dataset.description || "--"}</Text>
           </Flex>
+          <Flex direction="row" gap="size-100">
+            <ActionMenu
+              icon={<Icon svg={<Icons.DownloadOutline />} />}
+              onAction={(action) => {
+                switch (action) {
+                  case "csv":
+                    // TODO(datasets): change this URL to be more RESTful
+                    window.open(
+                      `/v1/datasets/download/csv/${dataset.id}`,
+                      "_blank"
+                    );
+                    break;
+                }
+              }}
+            >
+              <Item key="csv">Download CSV</Item>
+            </ActionMenu>
+          </Flex>
         </Flex>
       </View>
       <DatasetExamplesTable dataset={dataset} />

diff --git a/app/src/pages/datasets/DatasetsPage.tsx b/app/src/pages/datasets/DatasetsPage.tsx
@@ -100,7 +100,6 @@ function CreateDatasetButton({ onDatasetCreated }: CreateDatasetButtonProps) {
   };
   return (
     <>
-      {/* Disabled until the mutation is created */}
       <Button variant="default" onClick={onCreateDataset}>
         Create Dataset
       </Button>