Implementation:FlowiseAI Flowise RolesView

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

Overview

Roles is the main React view component for managing RBAC roles within an organization, displaying a searchable table of roles with their permissions, assigned user counts, and actions for creating, editing, viewing, and deleting roles.

Description

This component renders the roles management page as a table within a MainCard. Each role row (rendered by the ShowRoleRow sub-component) displays the role name, description, a truncated permissions list with a view-permissions drawer, the count of assigned users with an expandable assigned-users drawer, and edit/delete action buttons. The assigned-users drawer supports sortable columns (user name and workspace name). The view-permissions drawer (ViewPermissionsDrawer sub-component) displays all permissions grouped by category with checkboxes in read-only mode. The main component supports search filtering by role name and description.

Usage

Use this component as the route-level view for the roles management page, typically at /roles. It requires no props and loads roles for the current user's active organization on mount.

Code Reference

Source Location

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

Signature

// Sub-components
function ViewPermissionsDrawer(props) { ... }
function ShowRoleRow(props) { ... }

// Main component
const Roles = () => {
    // ... component logic
}

export default Roles

Import

import Roles from '@/views/roles'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	-	-	Route-level component with no props; uses currentUser from Redux auth state for organization context

Outputs

Name	Type	Description
Rendered JSX	React.Element	A roles management view with searchable table, create/edit dialog, permission/user drawers, and confirm dialog

Sub-Components

ViewPermissionsDrawer

Prop	Type	Description
open	bool	Controls drawer visibility
setOpen	func	Callback to close the drawer
role	object	The role object whose permissions to display in read-only mode

Fetches all permissions via authApi.getAllPermissions('ROLE') and displays them grouped by category with disabled checkboxes reflecting the role's saved permissions.

ShowRoleRow

Prop	Type	Description
role	object	The role data to display (name, description, permissions JSON, userCount, id)
onEditClick	func	Callback when Edit button is clicked
onViewClick	func	Callback when View button is clicked
onDeleteClick	func	Callback when Delete button is clicked

Renders a single table row with:

• Role name and description
• Truncated permissions list with a view-permissions icon button
• Assigned user count with an expandable drawer showing sortable user/workspace table
• Edit and Delete action buttons (Delete disabled when userCount > 0)

Key Functions (Main Roles Component)

Function	Description
addNew()	Opens the CreateEditRoleDialog in ADD mode
edit(role)	Opens the CreateEditRoleDialog in EDIT mode with the selected role data
view(role)	Opens the CreateEditRoleDialog in VIEW mode (read-only)
deleteRole(role)	Confirms deletion then calls roleApi.deleteRole; disabled for roles with assigned users
onConfirm()	Closes dialog and refreshes the roles list
filterUsers(data)	Filters roles by name or description matching the search text

Key Internal State

State Variable	Type	Description
roles	Array	List of role objects fetched from the API
isLoading	Boolean	Loading indicator for API requests
search	String	Search text for filtering roles
showCreateEditDialog	Boolean	Controls visibility of the CreateEditRoleDialog
dialogProps	Object	Props passed to CreateEditRoleDialog (type, data, etc.)

Usage Examples

Basic Usage

import Roles from '@/views/roles'

// In route configuration
<Route path="/roles" element={<Roles />} />

Related Pages

• Principle:FlowiseAI_Flowise_Role_Based_Access_Control