refactor: TestsetTable component code has been refactored

agenta-web/src/components/TestSetTable/TableCellsRenderer.tsx

@@ -0,0 +1,55 @@
+import {Tooltip} from "antd"
+import {createUseStyles} from "react-jss"
+import {EditOutlined} from "@ant-design/icons"
+import {ICellRendererParams} from "ag-grid-community"
+
+const useStylesCell = createUseStyles({
+    cellContainer: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        height: "100%",
+
+        "&:hover>:nth-child(2)": {
+            display: "inline",
+        },
+    },
+    cellValue: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        flex: 1,
+    },
+    cellEditIcon: {
+        display: "none",
+    },
+})
+
+const TableCellsRenderer = (props: ICellRendererParams) => {
+    const classes = useStylesCell()
+    const cellValue = props.valueFormatted ? props.valueFormatted : props.value
+
+    return props.colDef?.field ? (
+        <span
+            className={classes.cellContainer}
+            onClick={() =>
+                props.api.startEditingCell({
+                    rowIndex: props.node.rowIndex as number,
+                    colKey: props.colDef?.field as string,
+                })
+            }
+        >
+            <span className={classes.cellValue}>{cellValue || ""}</span>
+            <span className={classes.cellEditIcon}>
+                <Tooltip title="Edit in focused mode">
+                    <EditOutlined
+                        onClick={() => props.colDef?.cellRendererParams?.onEdit(props.rowIndex)}
+                    />
+                </Tooltip>
+            </span>
+        </span>
+    ) : undefined
+}
+
+export default TableCellsRenderer

agenta-web/src/components/TestSetTable/TableHeaderComponent.tsx

@@ -0,0 +1,188 @@
+import {useState, useEffect} from "react"
+import {DeleteOutlined, EditOutlined, PlusOutlined} from "@ant-design/icons"
+import {Button, Input, message} from "antd"
+import {createUseStyles} from "react-jss"
+import {ADD_BUTTON_COL} from "./TestsetTable"
+import {KeyValuePair} from "@/lib/Types"
+import {ColumnDefsType} from "./TestsetTable"
+
+const useStylesTestset = createUseStyles({
+    plusIcon: {
+        width: "100%",
+        display: "flex",
+        justifyContent: "end",
+        "& button": {
+            marginRight: "10px",
+        },
+    },
+    columnTitle: {
+        width: "100%",
+        height: "100% ",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        "& input": {
+            marginTop: "10px",
+            marginBottom: "10px",
+            height: "30px",
+            marginRight: "3px",
+            outline: "red",
+        },
+    },
+    saveBtn: {
+        width: "45px !important",
+    },
+})
+
+type TableHeaderComponentProps = {
+    params: any
+    columnDefs: ColumnDefsType[]
+    inputValues: string[]
+    rowData: KeyValuePair[]
+    setColumnDefs: React.Dispatch<React.SetStateAction<ColumnDefsType[]>>
+    setInputValues: React.Dispatch<React.SetStateAction<string[]>>
+    setRowData: React.Dispatch<React.SetStateAction<KeyValuePair[]>>
+    setIsDataChanged: React.Dispatch<React.SetStateAction<boolean>>
+    updateTable: (inputValues: string[]) => void
+    onDeleteColumn: (indexToDelete: number) => void
+}
+
+const TableHeaderComponent = ({
+    params,
+    columnDefs,
+    inputValues,
+    rowData,
+    setColumnDefs,
+    setInputValues,
+    setRowData,
+    setIsDataChanged,
+    updateTable,
+    onDeleteColumn,
+}: TableHeaderComponentProps) => {
+    const [scopedInputValues, setScopedInputValues] = useState(
+        columnDefs.filter((colDef) => colDef.field !== "").map((col) => col.field),
+    )
+    const [isEditInputOpen, setIsEditInputOpen] = useState<boolean>(false)
+
+    const {attributes} = params.eGridHeader
+    const index = attributes["aria-colindex"].nodeValue - 2
+    const displayName = params.displayName
+
+    const classes = useStylesTestset()
+
+    useEffect(() => {
+        setScopedInputValues(inputValues)
+    }, [columnDefs])
+
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key == "Enter") {
+                if (isEditInputOpen) {
+                    handleSave()
+                }
+            }
+        }
+        window.addEventListener("keydown", handleEscape)
+        return () => window.removeEventListener("keydown", handleEscape)
+    }, [isEditInputOpen, scopedInputValues])
+
+    const handleSave = () => {
+        if (scopedInputValues[index] == inputValues[index]) {
+            setIsEditInputOpen(false)
+            return
+        }
+
+        if (
+            inputValues.some((input) => input === scopedInputValues[index]) ||
+            scopedInputValues[index] == ""
+        ) {
+            message.error(
+                scopedInputValues[index] == ""
+                    ? "Invalid column name"
+                    : "Column name already exist!",
+            )
+        } else {
+            setInputValues(scopedInputValues)
+            updateTable(scopedInputValues)
+            setIsEditInputOpen(false)
+        }
+    }
+
+    const handleInputChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+        const values = [...inputValues]
+        values[index] = event.target.value
+        setScopedInputValues(values)
+        setIsDataChanged(true)
+    }
+
+    const onAddColumn = () => {
+        const newColumnName = `column${columnDefs.length - 1}`
+        const newColmnDef = columnDefs
+        const updatedRowData = rowData.map((row) => ({
+            ...row,
+            [newColumnName]: "",
+        }))
+
+        newColmnDef.pop()
+
+        setInputValues([...inputValues, newColumnName])
+        setColumnDefs([
+            ...columnDefs,
+            {field: newColumnName, headerName: newColumnName},
+            ADD_BUTTON_COL,
+        ])
+        setRowData(updatedRowData)
+        setIsDataChanged(true)
+    }
+
+    if (displayName === "" && params.column?.colId !== "0") {
+        return (
+            <div className={classes.plusIcon}>
+                <Button onClick={onAddColumn}>
+                    <PlusOutlined />
+                </Button>
+            </div>
+        )
+    } else if (displayName === "" && params.column?.colId === "0") {
+        return null
+    } else {
+        return (
+            <div className={classes.columnTitle}>
+                {isEditInputOpen ? (
+                    <Input
+                        value={scopedInputValues[index]}
+                        onChange={(event) => handleInputChange(index, event)}
+                        size="small"
+                    />
+                ) : (
+                    displayName
+                )}
+
+                <div>
+                    {isEditInputOpen ? (
+                        <Button
+                            icon="Save"
+                            onClick={handleSave}
+                            type="default"
+                            className={classes.saveBtn}
+                        />
+                    ) : (
+                        <Button
+                            icon={<EditOutlined />}
+                            onClick={() => setIsEditInputOpen(true)}
+                            type="text"
+                        />
+                    )}
+
+                    <Button
+                        type="text"
+                        icon={<DeleteOutlined />}
+                        onClick={() => onDeleteColumn(index)}
+                    />
+                </div>
+            </div>
+        )
+    }
+}
+
+export default TableHeaderComponent