Implementation:FlowiseAI Flowise WorkspaceView

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

Overview

The WorkspaceView is a React view component that provides the main workspace management interface for listing, creating, editing, deleting, and switching between workspaces within an organization.

Description

This component renders a searchable table of all workspaces in the current organization. Each workspace row (rendered by ShowWorkspaceRow) displays the workspace name, description (truncated to 200 characters), user count, last updated date, and action buttons for editing, viewing users, and deleting. The active workspace is highlighted with a teal "Active" chip. A side drawer can be opened to preview workspace users and their roles. When a workspace is deleted or created, the component automatically switches to the appropriate workspace via workspaceApi.switchWorkspace and dispatches a workspaceSwitchSuccess Redux action before navigating home. Delete operations are prevented for the "Default Workspace" and workspaces with more than one user or marked as org default.

Usage

Use this component as the main view for the workspace management page, typically accessible to organization administrators at a route such as "/workspaces".

Code Reference

Source Location

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

Signature

const Workspaces = () => {
    // State: search, isLoading, workspaces, showWorkspaceDialog,
    //        workspaceDialogProps, isSwitching, isDeleting
    // Uses: useApi(workspaceApi.getAllWorkspacesByOrganizationId),
    //        useApi(workspaceApi.switchWorkspace), useConfirm(), useError(), useNavigate()
    return <MainCard>...</MainCard>
}

export default Workspaces

Import

import Workspaces from '@/views/workspace/index'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	-	-	Top-level view component with no props. Uses Redux state for the current user and organization context.

Outputs

Name	Type	Description
Rendered view	JSX.Element	A workspace management page with table listing, add/edit dialog, workspace switching, and loading overlays.

Internal Components

ShowWorkspaceRow

A table row component that renders a single workspace entry with an expandable user preview drawer.

Prop	Type	Description
rowKey	any	Unique key for the row
workspace	object	The workspace data object containing name, description, userCount, updatedDate, isOrgDefault
onEditClick	function	Handler called when the edit button is clicked
onDeleteClick	function	Handler called when the delete button is clicked
onViewUsersClick	function	Handler called to navigate to the workspace users page

Key Internal State

State Variable	Type	Description
workspaces	array	The list of workspace objects fetched from the API
showWorkspaceDialog	bool	Controls visibility of the AddEditWorkspaceDialog
isSwitching	bool	Whether a workspace switch operation is in progress (shows a spinner overlay)
isDeleting	bool	Whether a workspace delete operation is in progress (shows a spinner overlay)

Key Operations

• addNew() -- Opens the AddEditWorkspaceDialog in ADD mode
• edit(workspace) -- Opens the AddEditWorkspaceDialog in EDIT mode with the selected workspace data
• deleteWorkspace(workspace) -- Deletes a workspace after confirmation via workspaceApi.deleteWorkspace; triggers workspace switch if the deleted workspace was active
• onConfirm(specificWorkspaceId, isDeleteWorkspace) -- Handles post-mutation logic including refreshing the list and switching workspaces
• filterWorkspaces(data) -- Filters workspaces by name against the search text

Workspace Switching

After creating or deleting a workspace, the component may need to switch the active workspace. The switching mechanism:

1. Calls switchWorkspaceApi.request(workspaceId)
2. On success, subscribes to the Redux store to wait for the state update
3. Dispatches workspaceSwitchSuccess with the new workspace data
4. Once the store reflects the new active workspace, navigates to "/" and reloads the page

Usage Examples

Basic Usage

// In route configuration
import Workspaces from '@/views/workspace/index'

<Route path="/workspaces" element={<Workspaces />} />

Related Pages

• Principle:FlowiseAI_Flowise_Workspace_Management