Implementation:FlowiseAI Flowise AddEditDatasetDialog

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

Overview

AddEditDatasetDialog is a React dialog component that provides a form for creating new datasets or editing existing ones, with support for name, description, optional CSV file upload with a first-row-as-headers toggle, and full CRUD operations via the dataset API.

Description

This component renders a Material UI Dialog via createPortal into the #portal element. It operates in two modes based on dialogProps.type: ADD mode presents empty fields for dataset name and description, plus a CSV upload section with a File component and a SwitchInput for treating the first row as headers; EDIT mode pre-populates the name and description from dialogProps.data and hides the CSV upload. The addNewDataset function calls datasetApi.createDataset with the name, description, and optional CSV file data, while saveDataset calls datasetApi.updateDataset. Both operations display success or error snackbar notifications via Redux dispatch. The confirm button is disabled until a dataset name is provided.

Usage

Use this component from the datasets management view to create or edit datasets. It is typically triggered by clicking an "Add Dataset" or "Edit" button, with the dialog mode and pre-populated data passed via dialogProps.

Code Reference

Source Location

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

Signature

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

export default AddEditDatasetDialog

Import

import AddEditDatasetDialog from '@/views/datasets/AddEditDatasetDialog'

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 (existing dataset object for edit mode with id, name, description), 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 dataset ID on successful create or update

Outputs

Name	Type	Description
Rendered JSX (portal)	React Element	A Dialog with name input, description textarea, optional CSV upload with first-row-headers switch, and action buttons
onConfirm callback	void	Called with the created or updated dataset ID string
Side effects	void	Creates or updates datasets via datasetApi, displays snackbar notifications

Usage Examples

Basic Usage

import AddEditDatasetDialog from '@/views/datasets/AddEditDatasetDialog'

<AddEditDatasetDialog
  show={showDialog}
  dialogProps={{
    type: 'ADD',
    cancelButtonName: 'Cancel',
    confirmButtonName: 'Add'
  }}
  onCancel={() => setShowDialog(false)}
  onConfirm={(datasetId) => handleDatasetCreated(datasetId)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Evaluation_Dataset_Creation