enhance(frontend): create testset from scratch process

agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts

@@ -67,7 +67,6 @@ describe("Single Model Test workflow", () => {
             cy.visit(`/apps/${app_id}/testsets`)
             cy.url().should("include", "/testsets")
             cy.get('[data-cy="app-testset-list"]').as("table")
-            cy.get("@table").get(".ant-table-pagination li a").last().click()
             cy.get("@table").contains(saved_testset_name).as("tempTestSet").should("be.visible")
         })
     })

agenta-web/src/components/pages/testset/modals/CreateTestsetFromApi.tsx

@@ -97,7 +97,7 @@ const CreateTestsetFromApi: React.FC<Props> = ({setCurrent, onCancel}) => {
 
     return (
         <section className="grid gap-4">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 mb-1">
                 <Button
                     icon={<ArrowLeft size={14} className="mt-0.5" />}
                     className="flex items-center justify-center"
@@ -108,7 +108,7 @@ const CreateTestsetFromApi: React.FC<Props> = ({setCurrent, onCancel}) => {
             </div>
 
             <div className="flex flex-col gap-6">
-                <Text>Create a new test set directly from the webUI</Text>
+                <Text>Create a test set programmatically using our API endpoints</Text>
 
                 <div className="grid gap-2">
                     <Text className={classes.label}>Select type</Text>

agenta-web/src/components/pages/testset/modals/CreateTestsetFromEndpoint.tsx

@@ -66,7 +66,7 @@ const CreateTestsetFromEndpoint: React.FC<Props> = ({setCurrent, onCancel}) => {
 
     return (
         <section className="grid gap-4">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 mb-1">
                 <Button
                     icon={<ArrowLeft size={14} className="mt-0.5" />}
                     className="flex items-center justify-center"

agenta-web/src/components/pages/testset/modals/CreateTestsetFromScratch.tsx

@@ -1,5 +1,5 @@
-import React, {useState} from "react"
-import {JSSTheme, KeyValuePair, testset} from "@/lib/Types"
+import React, {useMemo, useState} from "react"
+import {JSSTheme, KeyValuePair, testset, TestsetCreationMode} from "@/lib/Types"
 import {ArrowLeft} from "@phosphor-icons/react"
 import {Button, Input, message, Typography} from "antd"
 import {createUseStyles} from "react-jss"
@@ -27,110 +27,122 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 }))
 
 type Props = {
-    cloneConfig: boolean
-    setCloneConfig: React.Dispatch<React.SetStateAction<boolean>>
+    mode: TestsetCreationMode
+    setMode: React.Dispatch<React.SetStateAction<TestsetCreationMode>>
     editTestsetValues: testset | null
     setEditTestsetValues: React.Dispatch<React.SetStateAction<testset | null>>
     setCurrent: React.Dispatch<React.SetStateAction<number>>
-    renameTestsetConfig: boolean
-    setRenameTestsetConfig: React.Dispatch<React.SetStateAction<boolean>>
     onCancel: () => void
 }
 
 const CreateTestsetFromScratch: React.FC<Props> = ({
-    cloneConfig,
-    setCloneConfig,
+    mode,
+    setMode,
     editTestsetValues,
     setEditTestsetValues,
-    renameTestsetConfig,
-    setRenameTestsetConfig,
     setCurrent,
     onCancel,
 }) => {
     const classes = useStyles()
     const router = useRouter()
     const appId = router.query.app_id as string
     const [testsetName, setTestsetName] = useState(
-        renameTestsetConfig ? (editTestsetValues?.name as string) : "",
+        mode === "rename" ? (editTestsetValues?.name as string) : "",
     )
     const [isLoading, setIsLoading] = useState(false)
     const {mutate} = useLoadTestsetsList(appId)
 
+    const generateInitialRowData = async (): Promise<KeyValuePair[]> => {
+        const backendVariants = await fetchVariants(appId)
+        const variant = backendVariants[0]
+        const inputParams = await getVariantInputParameters(appId, variant)
+        const fields = [...inputParams.map((param) => param.name), "correct_answer"]
+        return Array(3)
+            .fill({})
+            .map(() => fields.reduce((acc, field) => ({...acc, [field]: ""}), {}))
+    }
+
     const handleCreateTestset = async (data?: KeyValuePair[]) => {
+        setIsLoading(true)
         try {
-            setIsLoading(true)
-            let rowData = data
-
-            if (!rowData) {
-                const backendVariants = await fetchVariants(appId)
-                const variant = backendVariants[0]
-                const inputParams = await getVariantInputParameters(appId, variant)
-                const colData = inputParams.map((param) => ({field: param.name}))
-                colData.push({field: "correct_answer"})
-
-                const initialRowData = Array(3).fill({})
-                rowData = initialRowData.map(() => {
-                    return colData.reduce((acc, curr) => ({...acc, [curr.field]: ""}), {})
-                })
-            }
-
+            const rowData = data || (await generateInitialRowData())
             const response = await createNewTestset(appId, testsetName, rowData)
             message.success("Test set created successfully")
             router.push(`/apps/${appId}/testsets/${response.data.id}`)
         } catch (error) {
             console.error("Error saving test set:", error)
-            message.success("Failed to create Test set. Please try again!")
+            message.error("Failed to create Test set. Please try again!")
         } finally {
             setIsLoading(false)
         }
     }
 
-    const handleCloneTestset = async () => {
+    const handleCloneTestset = async (testsetId: string) => {
+        setIsLoading(true)
         try {
-            setIsLoading(true)
-
-            const fetchTestsetValues = await fetchTestset(editTestsetValues?._id as string)
-
-            if (fetchTestsetValues.csvdata) {
-                await handleCreateTestset(fetchTestsetValues.csvdata)
+            const fetchedTestset = await fetchTestset(testsetId)
+            if (fetchedTestset.csvdata) {
+                await handleCreateTestset(fetchedTestset.csvdata)
             } else {
-                message.error("Failed to load intances")
+                throw new Error("Failed to load instances")
             }
         } catch (error) {
+            console.error("Error cloning test set:", error)
+            message.error("Failed to clone Test set. Please try again!")
+        } finally {
             setIsLoading(false)
         }
     }
 
-    const handleRenameTestset = async () => {
+    const handleRenameTestset = async (testsetId: string) => {
+        setIsLoading(true)
         try {
-            setIsLoading(true)
-
-            const fetchTestsetValues = await fetchTestset(editTestsetValues?._id as string)
-
-            if (fetchTestsetValues.csvdata) {
-                await updateTestset(
-                    editTestsetValues?._id as string,
-                    testsetName,
-                    fetchTestsetValues.csvdata,
-                )
+            const fetchedTestset = await fetchTestset(testsetId)
+            if (fetchedTestset.csvdata) {
+                await updateTestset(testsetId, testsetName, fetchedTestset.csvdata)
                 message.success("Test set renamed successfully")
                 mutate()
                 onCancel()
             } else {
-                message.error("Failed to load intances")
+                throw new Error("Failed to load instances")
             }
         } catch (error) {
-            message.error("Something went wrong. Please try again later!")
+            console.error("Error renaming test set:", error)
+            message.error("Failed to rename Test set. Please try again!")
         } finally {
             setIsLoading(false)
         }
     }
 
-    const backForward = () => {
-        setCloneConfig(false)
+    const onSubmit = () => {
+        switch (mode) {
+            case "create":
+                handleCreateTestset()
+                break
+            case "clone":
+                handleCloneTestset(editTestsetValues?._id as string)
+                break
+            case "rename":
+                handleRenameTestset(editTestsetValues?._id as string)
+                break
+        }
+    }
+
+    const getHeaderText = useMemo(() => {
+        switch (mode) {
+            case "create":
+                return "Create from scratch"
+            case "clone":
+                return "Clone Test set"
+            case "rename":
+                return "Rename Test set"
+        }
+    }, [mode])
+
+    const goBackToInitialStep = () => {
+        setMode("create")
         setEditTestsetValues(null)
         setCurrent(0)
-        setRenameTestsetConfig(false)
     }
 
     return (
@@ -139,22 +151,16 @@ const CreateTestsetFromScratch: React.FC<Props> = ({
                 <Button
                     icon={<ArrowLeft size={14} className="mt-0.5" />}
                     className="flex items-center justify-center"
-                    onClick={backForward}
+                    onClick={goBackToInitialStep}
                 />
 
-                <Text className={classes.headerText}>
-                    {cloneConfig
-                        ? "Clone Test set"
-                        : renameTestsetConfig
-                          ? "Rename Test set"
-                          : "Create from scratch"}
-                </Text>
+                <Text className={classes.headerText}>{getHeaderText}</Text>
             </div>
 
             <Text>Create a new test set directly from the webUI</Text>
 
             <div className="grid gap-1">
-                <Text className={classes.label}>Name of testset</Text>
+                <Text className={classes.label}>Test Set Name</Text>
                 <Input
                     placeholder="Enter a name"
                     value={testsetName}
@@ -170,17 +176,11 @@ const CreateTestsetFromScratch: React.FC<Props> = ({
                 <Button
                     type="primary"
                     disabled={!testsetName}
-                    onClick={() => {
-                        cloneConfig
-                            ? handleCloneTestset()
-                            : renameTestsetConfig
-                              ? handleRenameTestset()
-                              : handleCreateTestset()
-                    }}
+                    onClick={onSubmit}
                     loading={isLoading}
                     data-cy="create-new-testset-button"
                 >
-                    Create test set
+                    {mode === "rename" ? "Rename" : "Create test set"}
                 </Button>
             </div>
         </section>

agenta-web/src/components/pages/testset/modals/UploadTestset.tsx

@@ -108,7 +108,7 @@ const UploadTestset: React.FC<Props> = ({setCurrent, onCancel}) => {
 
     return (
         <section className="grid gap-4">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 mb-1">
                 <Button
                     icon={<ArrowLeft size={14} className="mt-0.5" />}
                     className="flex items-center justify-center"
@@ -119,7 +119,7 @@ const UploadTestset: React.FC<Props> = ({setCurrent, onCancel}) => {
             </div>
 
             <div className="flex flex-col gap-6">
-                <Text>Create a new test set directly from the webUI</Text>
+                <Text>Upload your test set as CSV or JSON</Text>
 
                 <div className="grid gap-2">
                     <Text className={classes.label}>Select type</Text>
@@ -130,7 +130,7 @@ const UploadTestset: React.FC<Props> = ({setCurrent, onCancel}) => {
                 </div>
 
                 <div className="grid gap-1">
-                    <Text className={classes.label}>Name of testset</Text>
+                    <Text className={classes.label}>Test Set Name</Text>
                     <Input
                         placeholder="Enter a name"
                         value={testsetName}

agenta-web/src/components/pages/testset/modals/index.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import {JSSTheme, testset} from "@/lib/Types"
+import {JSSTheme, testset, TestsetCreationMode} from "@/lib/Types"
 import {Modal} from "antd"
 import {createUseStyles} from "react-jss"
 import CreateTestset from "./CreateTestset"
@@ -23,35 +23,30 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 }))
 
 type Props = {
-    cloneConfig: boolean
-    setCloneConfig: React.Dispatch<React.SetStateAction<boolean>>
+    testsetCreationMode: TestsetCreationMode
+    setTestsetCreationMode: React.Dispatch<React.SetStateAction<TestsetCreationMode>>
     editTestsetValues: testset | null
     setEditTestsetValues: React.Dispatch<React.SetStateAction<testset | null>>
     current: number
     setCurrent: React.Dispatch<React.SetStateAction<number>>
-    renameTestsetConfig: boolean
-    setRenameTestsetConfig: React.Dispatch<React.SetStateAction<boolean>>
 } & React.ComponentProps<typeof Modal>
 
 const TestsetModal: React.FC<Props> = ({
-    cloneConfig,
-    setCloneConfig,
+    testsetCreationMode,
+    setTestsetCreationMode,
     editTestsetValues,
     setEditTestsetValues,
     current,
     setCurrent,
-    renameTestsetConfig,
-    setRenameTestsetConfig,
     ...props
 }) => {
     const classes = useStyles()
 
     const onCancel = () => props.onCancel?.({} as any)
 
     const onCloseModal = () => {
-        setCloneConfig(false)
+        setTestsetCreationMode("create")
         setEditTestsetValues(null)
-        setRenameTestsetConfig(false)
         setCurrent(0)
     }
 
@@ -62,14 +57,12 @@ const TestsetModal: React.FC<Props> = ({
         {
             content: (
                 <CreateTestsetFromScratch
+                    mode={testsetCreationMode}
+                    setMode={setTestsetCreationMode}
                     setCurrent={setCurrent}
                     onCancel={onCancel}
-                    cloneConfig={cloneConfig}
-                    setCloneConfig={setCloneConfig}
                     editTestsetValues={editTestsetValues}
                     setEditTestsetValues={setEditTestsetValues}
-                    renameTestsetConfig={renameTestsetConfig}
-                    setRenameTestsetConfig={setRenameTestsetConfig}
                 />
             ),
         },

agenta-web/src/lib/Types.ts

@@ -19,6 +19,8 @@ export interface TestSet {
     csvdata: KeyValuePair[]
 }
 
+export type TestsetCreationMode = "create" | "clone" | "rename"
+
 export interface ListAppsItem {
     app_id: string
     app_name: string