diff --git a/interactive-computational-graph/src/components/EditOperationInputPortsTab.test.tsx b/interactive-computational-graph/src/components/EditOperationInputPortsTab.test.tsx index 6535b4b..7e28287 100644 --- a/interactive-computational-graph/src/components/EditOperationInputPortsTab.test.tsx +++ b/interactive-computational-graph/src/components/EditOperationInputPortsTab.test.tsx @@ -48,7 +48,7 @@ test("should trigger value change when deleting a row", () => { expect(handleChangeValues).toHaveBeenCalledWith([new Port("b", true)]); }); -test("validation result should change when entering/leaving edit mode", () => { +test("should be valid when editing the row", () => { const inputPorts: Port[] = [new Port("a", false), new Port("b", true)]; const handleChangeValues = jest.fn(); const handleValidate = jest.fn(); @@ -64,11 +64,6 @@ test("validation result should change when entering/leaving edit mode", () => { const editIconButton = screen.getAllByLabelText("Edit"); fireEvent.click(editIconButton[0]); - expect(handleValidate).lastCalledWith(false); - - const cancelIconButton = screen.getAllByLabelText("Cancel"); - fireEvent.click(cancelIconButton[0]); - expect(handleValidate).lastCalledWith(true); }); diff --git a/interactive-computational-graph/src/components/EditOperationInputPortsTab.tsx b/interactive-computational-graph/src/components/EditOperationInputPortsTab.tsx index f939713..70a6adc 100644 --- a/interactive-computational-graph/src/components/EditOperationInputPortsTab.tsx +++ b/interactive-computational-graph/src/components/EditOperationInputPortsTab.tsx @@ -10,7 +10,6 @@ import { GridRowModes, GridToolbarContainer, type GridColDef, - type GridEventListener, type GridRowId, type GridRowModel, type GridRowModesModel, @@ -100,7 +99,6 @@ const EditOperationInputPortsTab: FunctionComponent< return inputPorts.map((inputPort) => inputPortToRowModel(inputPort)); }, [inputPortToRowModel, inputPorts]); - const [isEditingRow, setEditingRow] = useState(false); const [errorMessages, setErrorMessages] = useState([]); const [rows, setRows] = @@ -113,44 +111,18 @@ const EditOperationInputPortsTab: FunctionComponent< }); }, [rows]); - const updateStatesOnStartEdit = useCallback(() => { - setEditingRow(true); - }, []); - - const updateStatesOnStopEdit = useCallback(() => { - setEditingRow(false); - }, []); - - const handleRowEditStart: GridEventListener<"rowEditStart"> = useCallback( - (params, event) => { - updateStatesOnStartEdit(); - }, - [updateStatesOnStartEdit], - ); - - const handleRowEditStop: GridEventListener<"rowEditStop"> = useCallback( - (params, event) => { - updateStatesOnStopEdit(); - }, - [updateStatesOnStopEdit], - ); - const handleEditClick = useCallback( (id: GridRowId) => () => { - updateStatesOnStartEdit(); - setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } }); }, - [rowModesModel, updateStatesOnStartEdit], + [rowModesModel], ); const handleSaveClick = useCallback( (id: GridRowId) => () => { - updateStatesOnStopEdit(); - setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }); }, - [rowModesModel, updateStatesOnStopEdit], + [rowModesModel], ); const handleDeleteClick = useCallback( @@ -162,8 +134,6 @@ const EditOperationInputPortsTab: FunctionComponent< const handleCancelClick = useCallback( (id: GridRowId) => () => { - updateStatesOnStopEdit(); - setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View, ignoreModifications: true }, @@ -175,7 +145,7 @@ const EditOperationInputPortsTab: FunctionComponent< setRows(rows.filter((row) => row.id !== id)); } }, - [rowModesModel, rows, updateStatesOnStopEdit], + [rowModesModel, rows], ); const handleRowModesModelChange = useCallback( @@ -323,7 +293,7 @@ const EditOperationInputPortsTab: FunctionComponent< setErrorMessages(errorMessages); - const isValid = !isEditingRow && errorMessages.length === 0; + const isValid = errorMessages.length === 0; onValidate(isValid); @@ -337,7 +307,6 @@ const EditOperationInputPortsTab: FunctionComponent< getDuplicatePortIdsErrorMessages, getEmptyRowsErrorMessages, getInvalidPortIdErrorMessages, - isEditingRow, onChangeValues, onValidate, rowsToInputPorts, @@ -353,8 +322,6 @@ const EditOperationInputPortsTab: FunctionComponent< editMode="row" rowModesModel={rowModesModel} onRowModesModelChange={handleRowModesModelChange} - onRowEditStart={handleRowEditStart} - onRowEditStop={handleRowEditStop} processRowUpdate={processRowUpdate} slots={{ toolbar: EditToolbar, @@ -364,12 +331,11 @@ const EditOperationInputPortsTab: FunctionComponent< }} disableColumnMenu /> - {!isEditingRow && - errorMessages.map((errorMessage, index) => ( - - {errorMessage} - - ))} + {errorMessages.map((errorMessage, index) => ( + + {errorMessage} + + ))} )