Implementation:FlowiseAI Flowise AddEditWorkspaceDialog

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

Overview

AddEditWorkspaceDialog is a React dialog component that provides a form for creating new workspaces or editing existing workspace name and description within an organization.

Description

This component renders a Material UI Dialog through a React portal. It supports two modes: ADD for creating new workspaces and EDIT for updating existing ones, determined by dialogProps.type. The form includes a required name field and an optional multi-line description field. Creation of workspaces named "Default Workspace" or "Personal Workspace" is explicitly blocked with an error snackbar since these are reserved names. On submission, it calls either workspaceApi.createWorkspace (passing name, description, createdBy, organizationId, and existingWorkspaceId for role inheritance) or workspaceApi.updateWorkspace (passing id, name, description, and updatedBy). Successful updates also dispatch a workspaceNameUpdated action to the Redux auth slice. The confirm button is disabled until the workspace name is provided.

Usage

Use this component within the workspace management section to add new workspaces or edit existing ones. It is opened from the workspace list view with appropriate dialogProps specifying the operation type and optional existing workspace data for editing.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/workspace/AddEditWorkspaceDialog.jsx
• Lines: 1-261

Signature

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

Import

import AddEditWorkspaceDialog from '@/views/workspace/AddEditWorkspaceDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Contains type ('ADD' or 'EDIT'), cancelButtonName, confirmButtonName, and optional data (with id, name, description) for edit mode
onCancel	func	Yes	Callback invoked when the cancel button is clicked or an API error occurs
onConfirm	func	Yes	Callback invoked with the created workspace id (for ADD) or no arguments (for EDIT) on successful save

Outputs

Name	Type	Description
React Portal	JSX.Element	Renders the dialog via createPortal to the element with id "portal"

Usage Examples

Basic Usage

// Adding a new workspace
<AddEditWorkspaceDialog
    show={showDialog}
    dialogProps={{
        type: 'ADD',
        cancelButtonName: 'Cancel',
        confirmButtonName: 'Add'
    }}
    onCancel={() => setShowDialog(false)}
    onConfirm={(workspaceId) => {
        refreshWorkspaces()
        setShowDialog(false)
    }}
/>

// Editing an existing workspace
<AddEditWorkspaceDialog
    show={showDialog}
    dialogProps={{
        type: 'EDIT',
        cancelButtonName: 'Cancel',
        confirmButtonName: 'Save',
        data: { id: 'ws_123', name: 'Engineering', description: 'Engineering team workspace' }
    }}
    onCancel={() => setShowDialog(false)}
    onConfirm={() => {
        refreshWorkspaces()
        setShowDialog(false)
    }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Workspace_Management