enhancement(frontend): removed unused code, disabled modal close onMa…

…sk and code clean

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

@@ -38,22 +38,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             },
         },
     },
-    collapseContainer: {
-        "& .ant-collapse-header": {
-            alignItems: "center !important",
-        },
-        "& .ant-collapse-content": {
-            maxHeight: 400,
-            height: "100%",
-            overflowY: "auto",
-            "& .ant-collapse-content-box": {
-                padding: 0,
-            },
-        },
-        "& .ant-input-group-addon button": {
-            height: 30,
-        },
-    },
 }))
 
 type Props = {
@@ -196,6 +180,7 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
             centered
             closeIcon={null}
             destroyOnClose
+            maskClosable={false}
             width={1200}
             className={classes.modalContainer}
             okButtonProps={{icon: <PlusOutlined />, loading: submitLoading}}
@@ -209,7 +194,6 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
                         testSets={testSets}
                         selectedTestsetId={selectedTestsetId}
                         setSelectedTestsetId={setSelectedTestsetId}
-                        className={classes.collapseContainer}
                     />
                     <SelectVariantSection
                         activePanel={activePanel}
@@ -218,7 +202,6 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
                         usernames={usernames}
                         selectedVariantIds={selectedVariantIds}
                         setSelectedVariantIds={setSelectedVariantIds}
-                        className={classes.collapseContainer}
                     />
                     <SelectEvaluatorSection
                         activePanel={activePanel}
@@ -227,7 +210,6 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
                         evaluatorConfigs={evaluatorConfigs}
                         selectedEvalConfigs={selectedEvalConfigs}
                         setSelectedEvalConfigs={setSelectedEvalConfigs}
-                        className={classes.collapseContainer}
                     />
                 </Space>
             </Spin>

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

@@ -1,9 +1,10 @@
-import {Evaluator, EvaluatorConfig} from "@/lib/Types"
+import {Evaluator, EvaluatorConfig, JSSTheme} from "@/lib/Types"
 import {CloseCircleOutlined, PlusOutlined} from "@ant-design/icons"
 import {Button, Collapse, Input, Table, Tag} from "antd"
 import {ColumnsType} from "antd/es/table"
 import React, {useEffect, useMemo, useRef, useState} from "react"
 import EvaluatorsModal from "../autoEvaluation/EvaluatorsModal/EvaluatorsModal"
+import {createUseStyles} from "react-jss"
 
 type SelectEvaluatorSectionProps = {
     evaluatorConfigs: EvaluatorConfig[]
@@ -12,7 +13,26 @@ type SelectEvaluatorSectionProps = {
     setSelectedEvalConfigs: React.Dispatch<React.SetStateAction<string[]>>
     handlePanelChange: (key: string | string[]) => void
     activePanel: string | null
-} & React.ComponentProps<typeof Collapse>
+}
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    collapseContainer: {
+        "& .ant-collapse-header": {
+            alignItems: "center !important",
+        },
+        "& .ant-collapse-content": {
+            maxHeight: 400,
+            height: "100%",
+            overflowY: "auto",
+            "& .ant-collapse-content-box": {
+                padding: 0,
+            },
+        },
+        "& .ant-input-group-addon button": {
+            height: 30,
+        },
+    },
+}))
 
 const SelectEvaluatorSection = ({
     evaluatorConfigs,
@@ -21,8 +41,8 @@ const SelectEvaluatorSection = ({
     setSelectedEvalConfigs,
     activePanel,
     handlePanelChange,
-    ...props
 }: SelectEvaluatorSectionProps) => {
+    const classes = useStyles()
     const [searchTerm, setSearchTerm] = useState("")
     const [isEvaluatorsModalOpen, setIsEvaluatorsModalOpen] = useState(false)
     const [current, setCurrent] = useState(0)
@@ -46,14 +66,6 @@ const SelectEvaluatorSection = ({
     }, [evaluatorConfigs, setSelectedEvalConfigs])
 
     const columns: ColumnsType<EvaluatorConfig> = [
-        // {
-        //     title: "Version",
-        //     dataIndex: "version",
-        //     key: "version",
-        //     onHeaderCell: () => ({
-        //         style: {minWidth: 80},
-        //     }),
-        // },
         {
             title: "Name",
             dataIndex: "name",
@@ -93,9 +105,9 @@ const SelectEvaluatorSection = ({
     return (
         <>
             <Collapse
+                className={classes.collapseContainer}
                 activeKey={activePanel === "evaluatorPanel" ? "evaluatorPanel" : undefined}
                 onChange={() => handlePanelChange("evaluatorPanel")}
-                {...props}
                 items={[
                     {
                         key: "evaluatorPanel",

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

@@ -1,27 +1,47 @@
 import {formatDate} from "@/lib/helpers/dateTimeHelper"
-import {testset} from "@/lib/Types"
+import {JSSTheme, testset} from "@/lib/Types"
 import {CloseCircleOutlined} from "@ant-design/icons"
 import {Collapse, Input, Space, Tag} from "antd"
 import Table, {ColumnsType} from "antd/es/table"
 import dayjs from "dayjs"
 import React, {useMemo, useState} from "react"
+import {createUseStyles} from "react-jss"
 
 type SelectTestsetSectionProps = {
     testSets: testset[]
     selectedTestsetId: string
     setSelectedTestsetId: React.Dispatch<React.SetStateAction<string>>
     handlePanelChange: (key: string | string[]) => void
     activePanel: string | null
-} & React.ComponentProps<typeof Collapse>
+}
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    collapseContainer: {
+        "& .ant-collapse-header": {
+            alignItems: "center !important",
+        },
+        "& .ant-collapse-content": {
+            maxHeight: 400,
+            height: "100%",
+            overflowY: "auto",
+            "& .ant-collapse-content-box": {
+                padding: 0,
+            },
+        },
+        "& .ant-input-group-addon button": {
+            height: 30,
+        },
+    },
+}))
 
 const SelectTestsetSection = ({
     testSets,
     selectedTestsetId,
     setSelectedTestsetId,
     activePanel,
     handlePanelChange,
-    ...props
 }: SelectTestsetSectionProps) => {
+    const classes = useStyles()
     const [searchTerm, setSearchTerm] = useState("")
 
     const columns: ColumnsType<testset> = [
@@ -81,9 +101,9 @@ const SelectTestsetSection = ({
 
     return (
         <Collapse
+            className={classes.collapseContainer}
             activeKey={activePanel === "testsetPanel" ? "testsetPanel" : undefined}
             onChange={() => handlePanelChange("testsetPanel")}
-            {...props}
             items={[
                 {
                     key: "testsetPanel",

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

@@ -1,9 +1,10 @@
 import {filterVariantParameters, isDemo} from "@/lib/helpers/utils"
-import {Variant} from "@/lib/Types"
+import {JSSTheme, Variant} from "@/lib/Types"
 import {CloseCircleOutlined} from "@ant-design/icons"
 import {Collapse, Input, Space, Table, Tag} from "antd"
 import {ColumnsType} from "antd/es/table"
 import React, {useMemo, useState} from "react"
+import {createUseStyles} from "react-jss"
 
 type SelectVariantSectionProps = {
     variants: Variant[]
@@ -12,7 +13,26 @@ type SelectVariantSectionProps = {
     setSelectedVariantIds: React.Dispatch<React.SetStateAction<string[]>>
     handlePanelChange: (key: string | string[]) => void
     activePanel: string | null
-} & React.ComponentProps<typeof Collapse>
+}
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    collapseContainer: {
+        "& .ant-collapse-header": {
+            alignItems: "center !important",
+        },
+        "& .ant-collapse-content": {
+            maxHeight: 400,
+            height: "100%",
+            overflowY: "auto",
+            "& .ant-collapse-content-box": {
+                padding: 0,
+            },
+        },
+        "& .ant-input-group-addon button": {
+            height: 30,
+        },
+    },
+}))
 
 const SelectVariantSection = ({
     variants,
@@ -21,8 +41,8 @@ const SelectVariantSection = ({
     setSelectedVariantIds,
     activePanel,
     handlePanelChange,
-    ...props
 }: SelectVariantSectionProps) => {
+    const classes = useStyles()
     const [searchTerm, setSearchTerm] = useState("")
 
     const columns: ColumnsType<Variant> = [
@@ -66,12 +86,6 @@ const SelectVariantSection = ({
     }
 
     columns.push(
-        // {
-        //     title: "Tags",
-        //     onHeaderCell: () => ({
-        //         style: {minWidth: 160},
-        //     }),
-        // },
         {
             title: "Model",
             dataIndex: "parameters",
@@ -119,9 +133,9 @@ const SelectVariantSection = ({
 
     return (
         <Collapse
+            className={classes.collapseContainer}
             activeKey={activePanel === "variantPanel" ? "variantPanel" : undefined}
             onChange={() => handlePanelChange("variantPanel")}
-            {...props}
             items={[
                 {
                     key: "variantPanel",