Implementation:FlowiseAI Flowise WorkspaceUsers

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

Overview

The WorkspaceUsers component is a React view that manages user membership within a specific workspace, providing capabilities to add, edit roles, and remove users from the workspace.

Description

This component renders a table of users assigned to a particular workspace, identified by the workspace ID extracted from the URL path. Each row displays the user's name/email, assigned role, status (Active, Invited, Inactive), and last login date. Organization owners are displayed at the top and cannot be removed. Users can be selected via checkboxes for bulk removal. The component integrates with InviteUsersDialog for adding users and EditWorkspaceUserRoleDialog for changing user roles. When the current user removes themselves from the workspace, the application redirects to the home page and reloads. A back navigation button is provided in the view header.

Usage

Use this component as the workspace user management page, typically mounted at a route such as "/workspace-users/:workspaceId". It is navigated to from the main workspace listing page.

Code Reference

Source Location

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

Signature

const WorkspaceDetails = () => {
    // State: search, workspace, workspaceUsers, isLoading, usersSelected,
    //        showAddUserDialog, dialogProps, showWorkspaceUserRoleDialog
    // Uses: useApi(userApi.getAllUsersByWorkspaceId), useApi(workspaceApi.getWorkspaceById),
    //        useConfirm(), useError(), useNavigate()
    return <MainCard>...</MainCard>
}

export default WorkspaceDetails

Import

import WorkspaceDetails from '@/views/workspace/WorkspaceUsers'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	-	-	Top-level view component with no props. Extracts the workspace ID from the URL path and fetches data internally.

Outputs

Name	Type	Description
Rendered view	JSX.Element	A workspace user management page with table listing, user add/remove, and role editing capabilities.

Key Internal State

State Variable	Type	Description
workspace	object	The workspace details fetched from the API
workspaceUsers	array	Array of user objects assigned to this workspace
usersSelected	array	Array of selected user objects (userId, name, email) for bulk operations
showAddUserDialog	bool	Controls visibility of the InviteUsersDialog
showWorkspaceUserRoleDialog	bool	Controls visibility of the EditWorkspaceUserRoleDialog

Key Operations

• addUser() -- Opens the InviteUsersDialog in ADD mode with the workspace data
• onEditClick(user) -- Opens the appropriate edit dialog based on user status (invite edit for INVITED, role edit for active users)
• unlinkUser() -- Removes selected users from the workspace via userApi.deleteWorkspaceUser with confirmation; redirects home if the current user removes themselves
• onUsersSelectAllClick(event) -- Toggles selection of all non-owner users
• handleUserSelect(event, user) -- Toggles selection of a single user
• filterUsers(data) -- Filters workspace users by name or email against the search text

Usage Examples

Basic Usage

// In route configuration
import WorkspaceDetails from '@/views/workspace/WorkspaceUsers'

<Route path="/workspace-users/:workspaceId" element={<WorkspaceDetails />} />

Related Pages

• Principle:FlowiseAI_Flowise_Workspace_Management