Implementation:FlowiseAI Flowise AddEditDatasetRowDialog

Knowledge Sources	FlowiseAI Flowise
Domains	Datasets, Dialogs
Last Updated	2026-02-12 07:00 GMT

Overview

AddEditDatasetRowDialog is a React dialog component that provides a form for creating or editing individual input/output rows within a dataset, rendered via a portal, with permission-gated submit buttons and snackbar notifications.

Description

This component renders a Material UI Dialog through createPortal into the #portal DOM element. It operates in ADD or EDIT mode based on dialogProps.type. In ADD mode, it displays empty multiline text fields for "Input" and "Anticipated Output"; in EDIT mode, it pre-populates these fields from dialogProps.data. The addNewDatasetRow function calls datasetApi.createDatasetRow with the dataset ID, input, and output values, while saveDatasetRow calls datasetApi.updateDatasetRow. The submit button is a StyledPermissionButton requiring 'datasets:create,datasets:update' permissions and is disabled until both input and output fields are filled. Success and error messages are displayed via Redux-dispatched snackbar notifications.

Usage

Use this component from the dataset detail view to add or edit individual rows in a dataset. It is typically opened when a user clicks "Add Item" or the edit icon on a dataset row, with the dataset ID, dataset name, and optionally the row data passed through dialogProps.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/datasets/AddEditDatasetRowDialog.jsx
• Lines: 1-244

Signature

const AddEditDatasetRowDialog = ({ show, dialogProps, onCancel, onConfirm }) => { ... }

export default AddEditDatasetRowDialog

Import

import AddEditDatasetRowDialog from '@/views/datasets/AddEditDatasetRowDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	boolean	Yes	Controls dialog visibility
dialogProps	object	Yes	Dialog configuration containing type ('ADD' or 'EDIT'), data (object with datasetId, datasetName, and optionally id, input, output for edit mode), cancelButtonName, and confirmButtonName
onCancel	function	Yes	Callback invoked when the dialog is cancelled or an API error occurs
onConfirm	function	Yes	Callback invoked with the row ID on successful create or update

Outputs

Name	Type	Description
Rendered JSX (portal)	React Element	A Dialog with multiline Input and Anticipated Output text fields, cancel button, and permission-gated confirm button
onConfirm callback	void	Called with the created or updated row ID string
Side effects	void	Creates or updates dataset rows via datasetApi, displays snackbar notifications

Usage Examples

Basic Usage

import AddEditDatasetRowDialog from '@/views/datasets/AddEditDatasetRowDialog'

<AddEditDatasetRowDialog
  show={showDialog}
  dialogProps={{
    type: 'ADD',
    data: { datasetId: 'ds-123', datasetName: 'My Dataset' },
    cancelButtonName: 'Cancel',
    confirmButtonName: 'Add'
  }}
  onCancel={() => setShowDialog(false)}
  onConfirm={(rowId) => handleRowCreated(rowId)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Evaluation_Dataset_Creation