Modify sidemenu to display config evaluators and run evaluation under Evaluations dropdown

agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts

@@ -39,10 +39,11 @@ describe("A/B Testing Evaluation workflow", () => {
 
     context("When executing the evaluation", () => {
         it("Should successfully execute the evaluation process", () => {
-            cy.visit(`/apps/${app_id}/annotations`)
-            cy.url().should("include", "/annotations")
-            cy.clickLinkAndWait('[data-cy="abTesting-button"]')
+            cy.visit(`/apps/${app_id}/annotations/human_a_b_testing`)
+            cy.url().should("include", "/annotations/human_a_b_testing")
+            cy.clickLinkAndWait('[data-cy="new-annotation-modal-button"]')
 
+            cy.get(".ant-modal-content").should("exist")
             cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseover")
             cy.get(".ant-dropdown")
                 .eq(0)

agenta-web/cypress/e2e/app-navigation.cy.ts

@@ -28,15 +28,24 @@ describe("App Navigation without errors", () => {
         cy.get('[data-cy="app-testset-list"]').should("exist")
     })
 
-    it("should navigate successfully to Evaluations", () => {
-        cy.clickLinkAndWait('[data-cy="app-evaluations-link"]')
-        cy.location("pathname").should("include", "/evaluations")
-        //TOOD add more assertions specific to the new evaluations page
+    it("should navigate successfully to Automatic Evaluation results evaluators page", () => {
+        cy.clickLinkAndWait('[data-cy="app-evaluators-link"]')
+        cy.url().should("include", "/evaluations/new-evaluator")
     })
 
-    it("should navigate successfully to Annotations", () => {
-        cy.clickLinkAndWait('[data-cy="app-annotations-link"]')
-        cy.location("pathname").should("include", "/annotations")
+    it("should navigate successfully to Automatic Evaluation results page", () => {
+        cy.clickLinkAndWait('[data-cy="app-evaluations-results-link"]')
+        cy.url().should("include", "/evaluations/results")
+    })
+
+    it("should navigate successfully to A/B Test page", () => {
+        cy.clickLinkAndWait('[data-cy="app-human-ab-testing-link"]')
+        cy.location("pathname").should("include", "/annotations/human_a_b_testing")
+    })
+
+    it("should navigate successfully to Single Model Test page", () => {
+        cy.clickLinkAndWait('[data-cy="app-single-model-test-link"]')
+        cy.location("pathname").should("include", "/annotations/single_model_test")
     })
 
     if (isDemo()) {

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

@@ -10,8 +10,8 @@ describe("Evaluation Comparison Test", function () {
 
     context("Executing Evaluation Comparison Workflow", () => {
         beforeEach(() => {
-            cy.visit(`/apps/${app_id}/evaluations`)
-            cy.location("pathname").should("include", "/evaluations")
+            cy.visit(`/apps/${app_id}/evaluations/results`)
+            cy.location("pathname").should("include", "/evaluations/results")
         })
 
         it("Should create 2 new Evaluations", () => {

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

@@ -10,8 +10,8 @@ describe("Evaluations CRUD Operations Test", function () {
 
     context("Executing Evaluations CRUD operations", () => {
         beforeEach(() => {
-            cy.visit(`/apps/${app_id}/evaluations`)
-            cy.location("pathname").should("include", "/evaluations")
+            cy.visit(`/apps/${app_id}/evaluations/results`)
+            cy.location("pathname").should("include", "/evaluations/results")
         })
 
         it("Should successfully create an Evaluation", () => {

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

@@ -12,9 +12,8 @@ describe("Evaluators CRUD Operations Test", function () {
 
     context("Executing Evaluators CRUD operations", () => {
         beforeEach(() => {
-            cy.visit(`/apps/${app_id}/evaluations`)
-            cy.location("pathname").should("include", "/evaluations")
-            cy.get("#rc-tabs-1-tab-evaluators > :nth-child(2)").click()
+            cy.visit(`/apps/${app_id}/evaluations/new-evaluator`)
+            cy.location("pathname").should("include", "/evaluations/new-evaluator")
         })
 
         it("Should successfully create an Evaluator", () => {

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

@@ -10,8 +10,8 @@ describe("Evaluation Scenarios Test", function () {
 
     context("Executing Evaluation Scenarios Workflow", () => {
         beforeEach(() => {
-            cy.visit(`/apps/${app_id}/evaluations`)
-            cy.location("pathname").should("include", "/evaluations")
+            cy.visit(`/apps/${app_id}/evaluations/results`)
+            cy.location("pathname").should("include", "/evaluations/results")
         })
 
         it("Should successfully create an Evaluation", () => {

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

@@ -13,9 +13,11 @@ describe("Single Model Test workflow", () => {
 
     context("When executing the evaluation", () => {
         it("Should successfully execute the evaluation process", () => {
-            cy.visit(`/apps/${app_id}/annotations`)
-            cy.url().should("include", "/annotations")
-            cy.clickLinkAndWait('[data-cy="singleModel-button"]')
+            cy.visit(`/apps/${app_id}/annotations/single_model_test`)
+            cy.url().should("include", "/annotations/single_model_test")
+            cy.clickLinkAndWait('[data-cy="new-annotation-modal-button"]')
+
+            cy.get(".ant-modal-content").should("exist")
 
             cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseover")
             cy.get('[data-cy="variant-0"]').click()

agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx

@@ -44,9 +44,6 @@ type StyleProps = {
 const useStyles = createUseStyles({
     container: {
         marginBottom: 20,
-        "& svg": {
-            color: "red",
-        },
     },
     collapse: ({themeMode}: StyleProps) => ({
         margin: "10px 0",
@@ -68,11 +65,25 @@ const useStyles = createUseStyles({
             color: "#1677ff",
         },
     },
+    btnContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        margin: "20px 0",
+        gap: 10,
+        "& svg": {
+            color: "red",
+        },
+    },
 })
 
 const {Title} = Typography
-
-export default function AutomaticEvaluationResult() {
+interface AutomaticEvaluationResultProps {
+    setIsEvalModalOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+export default function AutomaticEvaluationResult({
+    setIsEvalModalOpen,
+}: AutomaticEvaluationResultProps) {
     const router = useRouter()
     const [evaluationsList, setEvaluationsList] = useState<EvaluationListTableDataType[]>([])
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
@@ -256,47 +267,36 @@ export default function AutomaticEvaluationResult() {
         }
     }
 
-    const items = [
-        {
-            key: "1",
-            label: (
-                <div className={classes.container}>
-                    <Title level={3}>Single Model Test Results</Title>
-                </div>
-            ),
-            children: (
-                <div>
-                    <div className={classes.container}>
-                        <Button onClick={onDelete} disabled={selectedRowKeys.length == 0}>
-                            <DeleteOutlined key="delete" />
-                            Delete
-                        </Button>
-                    </div>
+    return (
+        <div>
+            <div className={classes.btnContainer}>
+                <Button onClick={onDelete} disabled={selectedRowKeys.length == 0}>
+                    <DeleteOutlined key="delete" />
+                    Delete
+                </Button>
+                <Button
+                    type="primary"
+                    data-cy="new-annotation-modal-button"
+                    onClick={() => setIsEvalModalOpen(true)}
+                >
+                    New Evaluation
+                </Button>
+            </div>
 
-                    <Table
-                        rowSelection={{
-                            type: selectionType,
-                            ...rowSelection,
-                        }}
-                        className="ph-no-capture"
-                        data-cy="automatic-evaluation-result"
-                        columns={columns}
-                        dataSource={evaluationsList}
-                    />
-                </div>
-            ),
-        },
-    ]
+            <div className={classes.container}>
+                <Title level={3}>Single Model Test Results</Title>
+            </div>
 
-    return (
-        <Collapse
-            items={items}
-            ghost
-            bordered={false}
-            expandIconPosition="end"
-            className={classes.collapse}
-            collapsible="icon"
-            defaultActiveKey={["1"]}
-        />
+            <Table
+                rowSelection={{
+                    type: selectionType,
+                    ...rowSelection,
+                }}
+                className="ph-no-capture"
+                data-cy="automatic-evaluation-result"
+                columns={columns}
+                dataSource={evaluationsList}
+            />
+        </div>
     )
 }

agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx

@@ -1,7 +1,7 @@
 import {deleteEvaluations, fetchData} from "@/lib/services/api"
-import {Button, Collapse, Statistic, Table, Typography} from "antd"
+import {Button, Statistic, Table, Typography} from "antd"
 import {useRouter} from "next/router"
-import {useContext, useEffect, useState} from "react"
+import {useEffect, useState} from "react"
 import {ColumnsType} from "antd/es/table"
 import {EvaluationResponseType} from "@/lib/Types"
 import {DeleteOutlined} from "@ant-design/icons"
@@ -11,7 +11,6 @@ import {formatDate} from "@/lib/helpers/dateTimeHelper"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import {getVotesPercentage} from "@/lib/helpers/evaluate"
 import {getAgentaApiUrl, isDemo} from "@/lib/helpers/utils"
-import Link from "next/link"
 
 interface VariantVotesData {
     number_of_votes: number
@@ -53,9 +52,6 @@ type StyleProps = {
 const useStyles = createUseStyles({
     container: {
         marginBottom: 20,
-        "& svg": {
-            color: "red",
-        },
     },
     collapse: ({themeMode}: StyleProps) => ({
         margin: "10px 0",
@@ -97,11 +93,25 @@ const useStyles = createUseStyles({
             color: "#3f8600",
         },
     },
+    btnContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        margin: "20px 0",
+        gap: 10,
+        "& svg": {
+            color: "red",
+        },
+    },
 })
 
 const {Title} = Typography
 
-export default function HumanEvaluationResult() {
+interface HumanEvaluationResultProps {
+    setIsEvalModalOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export default function HumanEvaluationResult({setIsEvalModalOpen}: HumanEvaluationResultProps) {
     const router = useRouter()
     const [evaluationsList, setEvaluationsList] = useState<HumanEvaluationListTableDataType[]>([])
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
@@ -333,46 +343,35 @@ export default function HumanEvaluationResult() {
         } catch {}
     }
 
-    const items = [
-        {
-            key: "1",
-            label: (
-                <div className={classes.container}>
-                    <Title level={3}>A/B Test Results</Title>
-                </div>
-            ),
-            children: (
-                <div>
-                    <div className={classes.container}>
-                        <Button onClick={onDelete} disabled={selectedRowKeys.length == 0}>
-                            <DeleteOutlined key="delete" />
-                            Delete
-                        </Button>
-                    </div>
+    return (
+        <div>
+            <div className={classes.btnContainer}>
+                <Button onClick={onDelete} disabled={selectedRowKeys.length == 0}>
+                    <DeleteOutlined key="delete" />
+                    Delete
+                </Button>
+                <Button
+                    type="primary"
+                    data-cy="new-annotation-modal-button"
+                    onClick={() => setIsEvalModalOpen(true)}
+                >
+                    New Evaluation
+                </Button>
+            </div>
 
-                    <Table
-                        rowSelection={{
-                            type: selectionType,
-                            ...rowSelection,
-                        }}
-                        className="ph-no-capture"
-                        columns={columns}
-                        dataSource={evaluationsList}
-                    />
-                </div>
-            ),
-        },
-    ]
+            <div className={classes.container}>
+                <Title level={3}>A/B Test Results</Title>
+            </div>
 
-    return (
-        <Collapse
-            items={items}
-            ghost
-            bordered={false}
-            expandIconPosition="end"
-            className={classes.collapse}
-            collapsible="icon"
-            defaultActiveKey={["1"]}
-        />
+            <Table
+                rowSelection={{
+                    type: selectionType,
+                    ...rowSelection,
+                }}
+                className="ph-no-capture"
+                columns={columns}
+                dataSource={evaluationsList}
+            />
+        </div>
     )
 }