Implementation:FlowiseAI Flowise CreateEditRoleDialog

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, RBAC, Roles, Dialogs
Last Updated	2026-02-12 07:00 GMT

Overview

CreateEditRoleDialog is a React dialog component for creating, editing, and viewing RBAC roles with a name, description, and a categorized permission selection grid that adapts to the platform type (open source, enterprise, cloud).

Description

This component renders a portal-based dialog that allows administrators to create new roles or edit existing ones. It fetches all available permissions via authApi.getAllPermissions and filters them based on the platform context (isOpenSource, isEnterpriseLicensed, isCloud). Permissions are displayed in a categorized grid with checkboxes, supporting "Select All" per category. The component includes smart dependency logic: enabling non-view permissions automatically enables the corresponding view permission, and for templates, enabling sub-permissions auto-enables marketplace and custom view permissions. In VIEW mode, all inputs are read-only.

Usage

Use this dialog from the Roles management view when users click "Add Role", "Edit", or "View" on a role. Pass the dialog type (ADD, EDIT, VIEW) and optional existing role data through dialogProps.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/roles/CreateEditRoleDialog.jsx
• Lines: 1-423

Signature

const CreateEditRoleDialog = ({ show, dialogProps, onCancel, onConfirm, setError }) => {
    // ... component logic
}

CreateEditRoleDialog.propTypes = {
    show: PropTypes.bool,
    dialogProps: PropTypes.object,
    onCancel: PropTypes.func,
    onConfirm: PropTypes.func,
    setError: PropTypes.func
}

export default CreateEditRoleDialog

Import

import CreateEditRoleDialog from '@/views/roles/CreateEditRoleDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls dialog visibility
dialogProps	object	Yes	Contains type (ADD/EDIT/VIEW), cancelButtonName, confirmButtonName, and optional data (existing role object with id, name, description, permissions JSON)
onCancel	func	Yes	Callback invoked when Cancel/Close button is clicked
onConfirm	func	Yes	Callback invoked with the saved role ID after successful create/update
setError	func	Yes	Callback to set error state in the parent component

Outputs

Name	Type	Description
Portal element	React.Element	A medium-width dialog rendered via createPortal with role name, description, and permissions grid

Key Internal State

State Variable	Type	Description
roleName	String	The role name input value (spaces not allowed)
roleDescription	String	The role description input value
selectedPermissions	Object	Nested object mapping category to permission-key-to-boolean
permissions	Object	All available permissions grouped by category, filtered by platform

Key Functions

Function	Description
handlePermissionChange(category, key)	Toggles a permission and enforces dependency logic (auto-enabling view permissions)
isCheckboxDisabled(permissions, category, key)	Determines if a checkbox should be disabled (view permission locked when sub-permissions are enabled)
handleSelectAll(category)	Toggles all permissions in a category on or off
createRole()	Validates role name (no spaces), constructs the permission array, and calls roleApi.createRole or roleApi.updateRole
checkDisabled()	Returns true if the save button should be disabled (VIEW mode, empty name, or no permissions selected)
ifPermissionContainsTrue(obj)	Recursively checks if any permission value is true in the nested object

Permission Dependency Logic

• Non-template categories: Enabling any non-view permission auto-enables the {category}:view permission and disables its checkbox
• Templates category: Enabling any sub-permission auto-enables both templates:marketplace and templates:custom and disables their checkboxes

Usage Examples

Basic Usage

import CreateEditRoleDialog from '@/views/roles/CreateEditRoleDialog'

<CreateEditRoleDialog
    show={showDialog}
    dialogProps={{
        type: 'ADD',
        cancelButtonName: 'Cancel',
        confirmButtonName: 'Create Role',
        data: {}
    }}
    onCancel={() => setShowDialog(false)}
    onConfirm={(roleId) => handleRoleCreated(roleId)}
    setError={setError}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Role_Based_Access_Control