(frontend)[AGE-1393]: Update create new evaluation modal with new design

agenta-web/cypress/e2e/eval.comparison.cy.ts

@@ -44,28 +44,7 @@ describe("Evaluation Comparison Test", function () {
         })
 
         it("Should create 2 new Evaluations", () => {
-            cy.request({
-                url: `${Cypress.env().baseApiURL}/evaluations?app_id=${app_id}`,
-                method: "GET",
-            }).then((resp) => {
-                cy.get('[data-cy="new-evaluation-button"]').click()
-            })
-            cy.get(".ant-modal-content").should("exist")
-
-            cy.get('[data-cy="select-testset-group"]').click()
-            cy.get('[data-cy="select-testset-option"]').eq(0).click()
-
-            cy.get('[data-cy="select-variant-group"]').click()
-            cy.get('[data-cy="select-variant-option"]').eq(0).click()
-            cy.get('[data-cy="select-variant-option"]').eq(1).click()
-            cy.get('[data-cy="select-variant-group"]').click()
-
-            cy.get('[data-cy="select-evaluators-group"]').click()
-            cy.get('[data-cy="select-evaluators-option"]').eq(0).click()
-            cy.get('[data-cy="select-evaluators-group"]').click()
-
-            cy.get(".ant-modal-footer > .ant-btn-primary > .ant-btn-icon > .anticon > svg").click()
-            cy.wait(1000)
+            cy.createNewEvaluation()
         })
 
         it("Should verify that there are completed evaluations in the list", () => {

agenta-web/cypress/e2e/eval.evaluations.cy.ts

@@ -24,8 +24,8 @@ describe("Evaluations CRUD Operations Test", function () {
             cy.get('[data-cy="new-evaluation-button"]').click()
             cy.get(".ant-modal-content").should("exist")
 
-            cy.get(".ant-modal-footer > .ant-btn-primary > .ant-btn-icon > .anticon > svg").click()
-            cy.get(".ant-modal-content").should("contain.text", "This field is required")
+            cy.get(".ant-modal-footer > .ant-btn-primary").click()
+            cy.get(".ant-message").should("contain.text", "Please select a test set")
         })
 
         it("Should verify the successful creation and completion of the evaluation", () => {

agenta-web/cypress/support/commands/evaluations.ts

@@ -113,17 +113,17 @@ Cypress.Commands.add("createNewEvaluation", (evaluatorName = "Exact Match") => {
     })
     cy.get(".ant-modal-content").should("exist")
 
-    cy.get('[data-cy="select-testset-group"]').click()
-    cy.get('[data-cy="select-testset-option"]').eq(0).click()
+    cy.get('[data-cy="evaluation-testset-table"]').find('input[type="radio"]').eq(0).check()
 
-    cy.get('[data-cy="select-variant-group"]').click()
-    cy.get('[data-cy="select-variant-option"]').eq(0).click()
-    cy.get('[data-cy="select-variant-group"]').click()
+    cy.get('[data-cy="evaluation-variant-collapse-header"]').click()
+    cy.get('[data-cy="evaluation-variant-table"]').find('input[type="checkbox"]').eq(0).check()
 
-    cy.get('[data-cy="select-evaluators-group"]').click()
-    cy.get('[data-cy="select-evaluators-option"]').contains(evaluatorName).eq(0).click()
-    cy.get('[data-cy="select-evaluators-group"]').click({force: true})
+    cy.get('[data-cy="evaluation-evaluator-collapse-header"]').click()
+    cy.get('[data-cy="evaluation-search-evaluator"]')
+        .type(evaluatorName)
+        .should("have.value", evaluatorName)
+    cy.get('[data-cy="evaluation-evaluator-table"]').find('input[type="checkbox"]').eq(1).check()
 
-    cy.get(".ant-modal-footer > .ant-btn-primary > .ant-btn-icon > .anticon > svg").click()
+    cy.get(".ant-modal-footer > .ant-btn-primary").click()
     cy.wait(1000)
 })

agenta-web/src/components/pages/evaluations/NewEvaluation/AdvancedSettingsPopover.tsx

@@ -0,0 +1,181 @@
+import {JSSTheme, LLMRunRateLimit} from "@/lib/Types"
+import {QuestionCircleOutlined} from "@ant-design/icons"
+import {CaretDown, SlidersHorizontal} from "@phosphor-icons/react"
+import {Button, Col, Flex, Form, Input, InputNumber, Popover, Row, Tooltip, Typography} from "antd"
+import React, {useState} from "react"
+import {createUseStyles} from "react-jss"
+
+interface AdvancedSettingsPopoverProps {
+    setRateLimitValues: React.Dispatch<React.SetStateAction<LLMRunRateLimit>>
+    rateLimitValues: LLMRunRateLimit
+    setCorrectAnswerColumn: React.Dispatch<React.SetStateAction<string>>
+    correctAnswerColumn: string
+}
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    title: {
+        fontSize: theme.fontSizeHeading5,
+        lineHeight: theme.lineHeightHeading5,
+        fontWeight: theme.fontWeightMedium,
+    },
+    subTitle: {
+        fontSize: theme.fontSize,
+        lineHeight: theme.lineHeight,
+        fontWeight: theme.fontWeightMedium,
+    },
+    container: {
+        width: 400,
+        "& .ant-popover-title": {
+            marginBottom: theme.margin,
+        },
+        "& .ant-popover-inner": {
+            padding: `${theme.paddingSM}px ${theme.padding}px`,
+        },
+    },
+}))
+
+const AdvancedSettingsPopover = ({
+    setRateLimitValues,
+    rateLimitValues,
+    setCorrectAnswerColumn,
+    correctAnswerColumn,
+}: AdvancedSettingsPopoverProps) => {
+    const classes = useStyles()
+
+    const [openAdvancedConfigPopover, setOpenAdvancedConfigPopover] = useState(false)
+    const [tempRateLimitValues, setTempRateLimitValues] = useState(rateLimitValues)
+    const [tempCorrectAnswerColumn, setTempCorrectAnswerColumn] = useState(correctAnswerColumn)
+
+    const handleSave = () => {
+        setRateLimitValues(tempRateLimitValues)
+        setCorrectAnswerColumn(tempCorrectAnswerColumn)
+        setOpenAdvancedConfigPopover(false)
+    }
+
+    const handleCancel = () => {
+        setTempRateLimitValues(rateLimitValues)
+        setTempCorrectAnswerColumn(correctAnswerColumn)
+        setOpenAdvancedConfigPopover(false)
+    }
+
+    const handleResetDefaults = () => {
+        const defaultValues = {
+            batch_size: 10,
+            max_retries: 3,
+            retry_delay: 3,
+            delay_between_batches: 5,
+        }
+        setRateLimitValues(defaultValues)
+        setTempRateLimitValues(defaultValues)
+        setCorrectAnswerColumn("correct_answer")
+        setTempCorrectAnswerColumn("correct_answer")
+    }
+
+    return (
+        <Popover
+            open={openAdvancedConfigPopover}
+            onOpenChange={() => setOpenAdvancedConfigPopover(false)}
+            trigger={["click"]}
+            arrow={false}
+            overlayClassName={classes.container}
+            title={
+                <Flex justify="space-between">
+                    <Typography.Text className={classes.title}>Advanced settings</Typography.Text>
+                    <Button onClick={handleResetDefaults}>Reset default</Button>
+                </Flex>
+            }
+            content={
+                <Flex vertical gap={8}>
+                    <Form requiredMark={false} layout="vertical">
+                        <Form.Item
+                            required
+                            label={
+                                <Typography.Text className={classes.subTitle}>
+                                    Rate Limit Configuration
+                                </Typography.Text>
+                            }
+                            style={{marginBottom: 0}}
+                        >
+                            <Row gutter={16}>
+                                {Object.entries(tempRateLimitValues).map(([key, value]) => (
+                                    <Col span={12} key={key}>
+                                        <Form.Item
+                                            label={
+                                                <>
+                                                    {key
+                                                        .replace(/_/g, " ")
+                                                        .replace(/\b\w/g, (c) => c.toUpperCase())}
+                                                    &nbsp;
+                                                    <Tooltip title={`Description for ${key}`}>
+                                                        <QuestionCircleOutlined />
+                                                    </Tooltip>
+                                                </>
+                                            }
+                                            rules={[
+                                                {
+                                                    validator: (_, value) => {
+                                                        if (value !== null) {
+                                                            return Promise.resolve()
+                                                        }
+                                                        return Promise.reject(
+                                                            "This field is required",
+                                                        )
+                                                    },
+                                                },
+                                            ]}
+                                        >
+                                            <InputNumber
+                                                value={value}
+                                                onChange={(newValue) =>
+                                                    newValue !== null &&
+                                                    setTempRateLimitValues((prev) => ({
+                                                        ...prev,
+                                                        [key]: newValue,
+                                                    }))
+                                                }
+                                                style={{width: "100%"}}
+                                            />
+                                        </Form.Item>
+                                    </Col>
+                                ))}
+                            </Row>
+                        </Form.Item>
+                        <Form.Item
+                            required
+                            label={
+                                <>
+                                    Correct Answer Column&nbsp;
+                                    <Tooltip title="Column in the test set containing the correct/expected answer">
+                                        <QuestionCircleOutlined />
+                                    </Tooltip>
+                                </>
+                            }
+                        >
+                            <Input
+                                value={tempCorrectAnswerColumn}
+                                onChange={(e) => setTempCorrectAnswerColumn(e.target.value)}
+                                style={{width: "50%"}}
+                            />
+                        </Form.Item>
+                    </Form>
+
+                    <Flex justify="flex-end" gap={8}>
+                        <Button onClick={handleCancel}>Cancel</Button>
+                        <Button type="primary" onClick={handleSave}>
+                            Save
+                        </Button>
+                    </Flex>
+                </Flex>
+            }
+        >
+            <Button
+                onClick={() => setOpenAdvancedConfigPopover(true)}
+                icon={<SlidersHorizontal size={14} />}
+            >
+                Advanced settings <CaretDown size={14} />
+            </Button>
+        </Popover>
+    )
+}
+
+export default AdvancedSettingsPopover

agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx

@@ -5,14 +5,19 @@ import {apiKeyObject, redirectIfNoLLMKeys} from "@/lib/helpers/utils"
 import {fetchSingleProfile, fetchVariants} from "@/services/api"
 import {createEvalutaiton} from "@/services/evaluations/api"
 import {fetchTestsets} from "@/services/testsets/api"
-import {PlusOutlined} from "@ant-design/icons"
-import {Modal, Spin, Space, message} from "antd"
+import {CloseOutlined, PlusOutlined} from "@ant-design/icons"
+import {Modal, Spin, Space, message, Button} from "antd"
 import {useAtom} from "jotai"
 import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import SelectTestsetSection from "./SelectTestsetSection"
 import SelectVariantSection from "./SelectVariantSection"
 import SelectEvaluatorSection from "./SelectEvaluatorSection"
+import {dynamicComponent} from "@/lib/helpers/dynamic"
+
+const AdvancedSettingsPopover: any = dynamicComponent(
+    "pages/evaluations/NewEvaluation/AdvancedSettingsPopover",
+)
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     modalContainer: {
@@ -33,18 +38,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             },
         },
     },
-    collapseContainer: {
-        "& .ant-collapse-header": {
-            alignItems: "center !important",
-        },
-        "& .ant-collapse-content": {
-            height: 500,
-            overflowY: "auto",
-            "& .ant-collapse-content-box": {
-                padding: 0,
-            },
-        },
-    },
 }))
 
 type Props = {
@@ -61,11 +54,15 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
     const [evaluatorConfigs] = useAtom(evaluatorConfigsAtom)
     const [evaluators] = useAtom(evaluatorsAtom)
     const [submitLoading, setSubmitLoading] = useState(false)
-    const [showAdvancedConfig, setshowAdvancedConfig] = useState(false)
     const [selectedTestsetId, setSelectedTestsetId] = useState("")
     const [selectedVariantIds, setSelectedVariantIds] = useState<string[]>([])
     const [selectedEvalConfigs, setSelectedEvalConfigs] = useState<string[]>([])
 
+    const [activePanel, setActivePanel] = useState<string | null>("testsetPanel")
+    const handlePanelChange = (key: string | string[]) => {
+        setActivePanel((prevKey) => (prevKey === key ? null : (key as string)))
+    }
+
     useEffect(() => {
         const fetchData = async () => {
             setFetching(true)
@@ -113,15 +110,6 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
         delay_between_batches: 5,
     })
     const [correctAnswerColumn, setCorrectAnswerColumn] = useState<string>("correct_answer")
-    const onRateLimitInputChange = (field: keyof LLMRunRateLimit, value: number) => {
-        setRateLimitValues((prevValues: any) => ({...prevValues, [field]: value}))
-    }
-    const onAdvanceConfigSwitchChange = (checked: boolean) => {
-        setshowAdvancedConfig(checked)
-    }
-    const onCorrectAnswerColumnChange = (value: string) => {
-        setCorrectAnswerColumn(value)
-    }
 
     const validateSubmission = () => {
         if (!selectedTestsetId) {
@@ -169,11 +157,30 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
 
     return (
         <Modal
-            title="New Evaluation"
+            title={
+                <div className="w-full flex items-center justify-between">
+                    <div>New Evaluation</div>
+                    <Space>
+                        <AdvancedSettingsPopover
+                            correctAnswerColumn={correctAnswerColumn}
+                            setCorrectAnswerColumn={setCorrectAnswerColumn}
+                            setRateLimitValues={setRateLimitValues}
+                            rateLimitValues={rateLimitValues}
+                        />
+                        <Button
+                            type="text"
+                            onClick={() => props.onCancel?.({} as any)}
+                            icon={<CloseOutlined />}
+                        />
+                    </Space>
+                </div>
+            }
             onOk={onSubmit}
             okText="Create"
             centered
+            closeIcon={null}
             destroyOnClose
+            maskClosable={false}
             width={1200}
             className={classes.modalContainer}
             okButtonProps={{icon: <PlusOutlined />, loading: submitLoading}}
@@ -182,24 +189,27 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
             <Spin spinning={fetching} className="w-full">
                 <Space direction="vertical" size={16} className="w-full">
                     <SelectTestsetSection
+                        activePanel={activePanel}
+                        handlePanelChange={handlePanelChange}
                         testSets={testSets}
                         selectedTestsetId={selectedTestsetId}
                         setSelectedTestsetId={setSelectedTestsetId}
-                        className={classes.collapseContainer}
                     />
                     <SelectVariantSection
+                        activePanel={activePanel}
+                        handlePanelChange={handlePanelChange}
                         variants={variants}
                         usernames={usernames}
                         selectedVariantIds={selectedVariantIds}
                         setSelectedVariantIds={setSelectedVariantIds}
-                        className={classes.collapseContainer}
                     />
                     <SelectEvaluatorSection
+                        activePanel={activePanel}
+                        handlePanelChange={handlePanelChange}
                         evaluators={evaluators}
                         evaluatorConfigs={evaluatorConfigs}
                         selectedEvalConfigs={selectedEvalConfigs}
                         setSelectedEvalConfigs={setSelectedEvalConfigs}
-                        className={classes.collapseContainer}
                     />
                 </Space>
             </Spin>