Implementation:FlowiseAI Flowise EditWorkspaceUserRoleDialog

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

Overview

EditWorkspaceUserRoleDialog is a React dialog component that allows administrators to change a user's role assignment within a specific workspace by selecting from available organization roles.

Description

This component renders a Material UI Dialog through a React portal. It fetches all available roles for the current organization via roleApi.getAllRolesByOrganizationId and displays them in a styled Autocomplete dropdown. The dialog title shows the user's email and name. When opened in EDIT mode, it pre-selects the user's current role. On confirmation, it calls workspaceApi.updateWorkspaceUserRole with the user ID, workspace ID, organization ID, selected role ID, and the current user as the updater. A custom StyledPopper is used for the Autocomplete dropdown with enhanced box shadow and border radius. Redux dispatch manages canvas dialog state and snackbar notifications.

Usage

Use this component within workspace user management to change a user's role for a specific workspace. It is typically opened from the workspace users list when an administrator wants to reassign a user's workspace role.

Code Reference

Source Location

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

Signature

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

Import

import EditWorkspaceUserRoleDialog from '@/views/workspace/EditWorkspaceUserRoleDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Contains type ('EDIT'), confirmButtonName, and data object with user ({id, email, name}), role ({name}), and workspaceId
onCancel	func	Yes	Callback invoked when the dialog is closed
onConfirm	func	Yes	Callback invoked with the updated workspace user id on successful role change

Outputs

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

Usage Examples

Basic Usage

<EditWorkspaceUserRoleDialog
    show={showRoleDialog}
    dialogProps={{
        type: 'EDIT',
        confirmButtonName: 'Save',
        data: {
            user: { id: 'user_123', email: 'user@example.com', name: 'Jane Doe' },
            role: { name: 'Editor' },
            workspaceId: 'ws_456'
        }
    }}
    onCancel={() => setShowRoleDialog(false)}
    onConfirm={(workspaceUserId) => {
        refreshWorkspaceUsers()
        setShowRoleDialog(false)
    }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Workspace_Management