Implementation:FlowiseAI Flowise InviteUsersDialog

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

Overview

This React dialog component provides a user invitation interface for adding existing organization users or inviting new users by email to a specific workspace with an assigned role.

Description

The InviteUsersDialog component renders a portal-based MUI Dialog with three main input areas: a user search Autocomplete field, a workspace selector, and a role selector. The user search supports both selecting existing organization members and typing new email addresses for invitations. Selected users are displayed as color-coded StyledChip components -- green for new invites, blue for existing users, and grey for users already in the selected workspace. The component fetches available workspaces via getAllWorkspacesByOrganizationId, roles via getAllRolesByOrganizationId, and users via getAllUsersByOrganizationId. It supports two dialog modes: ADD (for inviting new users) and EDIT (for modifying existing user workspace/role assignments). The saveInvite function processes all selected users in parallel using Promise.all, calling accountApi.inviteAccount for each user.

Usage

This dialog is used in the Users management page and the Workspace Users page to invite users to workspaces. It is opened by clicking an "Add User" or "Invite User" button and requires the user to have appropriate workspace management permissions.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/dialog/InviteUsersDialog.jsx
• Lines: 1-730

Signature

const InviteUsersDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
    const portalElement = document.getElementById('portal')
    const dispatch = useDispatch()
    const currentUser = useSelector((state) => state.auth.user)
    const [searchString, setSearchString] = useState('')
    const [workspaces, setWorkspaces] = useState([])
    const [selectedWorkspace, setSelectedWorkspace] = useState()
    const [selectedUsers, setSelectedUsers] = useState([])
    const [availableRoles, setAvailableRoles] = useState([])
    const [selectedRole, setSelectedRole] = useState('')
    const [isSaving, setIsSaving] = useState(false)
    // ...
}

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

export default InviteUsersDialog

Import

import InviteUsersDialog from '@/ui-component/dialog/InviteUsersDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Configuration object with type ('ADD' or 'EDIT'), data (workspace or user object), confirmButtonName, cancelButtonName, and optional disableWorkspaceSelection flag
onCancel	function	Yes	Callback invoked when the user clicks Cancel
onConfirm	function	Yes	Callback invoked after users are successfully invited

Outputs

Name	Type	Description
Dialog UI	JSX.Element	Portal-rendered dialog with user search, workspace selector, role selector, and action buttons
Snackbar notifications	side effect	Success/error notifications dispatched via Redux for invite outcomes
API calls	side effect	Calls accountApi.inviteAccount for each selected user with workspace and role assignments

Dialog Props Structure

Property	Type	Description
type	string	'ADD' for new invitations, 'EDIT' for modifying existing assignments
data	object	For ADD: workspace object (id, name) or null; For EDIT: user object with userId, activeWorkspaceId, assignedRoles, role
confirmButtonName	string	Label for the confirm/submit button
cancelButtonName	string	Label for the cancel button
disableWorkspaceSelection	bool	When true, prevents changing the workspace (used in EDIT mode)

Usage Examples

Basic Usage

import InviteUsersDialog from '@/ui-component/dialog/InviteUsersDialog'

const UsersPage = () => {
    const [inviteDialogOpen, setInviteDialogOpen] = useState(false)

    return (
        <>
            <Button onClick={() => setInviteDialogOpen(true)}>
                Invite Users
            </Button>
            <InviteUsersDialog
                show={inviteDialogOpen}
                dialogProps={{
                    type: 'ADD',
                    data: null,
                    confirmButtonName: 'Invite',
                    cancelButtonName: 'Cancel'
                }}
                onCancel={() => setInviteDialogOpen(false)}
                onConfirm={() => {
                    setInviteDialogOpen(false)
                    refreshUserList()
                }}
            />
        </>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_User_Management