Implementation:FlowiseAI Flowise WorkspaceSwitcher

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

Overview

This React component renders a workspace switching dropdown button in the header, allowing enterprise-licensed users to switch between their assigned workspaces.

Description

The WorkspaceSwitcher component displays a Button with the current active workspace name and a dropdown arrow. When clicked, a StyledMenu appears listing all workspaces assigned to the user, sorted alphabetically with special characters placed last via the sortWorkspaces helper function. The component conditionally fetches workspaces based on enterprise licensing -- when enterprise-licensed it calls getWorkspacesByOrganizationIdUserId, otherwise it uses getWorkspacesByUserId. The workspace list is only shown when the user has more than one workspace (and not just a single "Default Workspace"). The component also handles workspace unavailability scenarios with a dialog prompting the user to select another workspace, and includes an error dialog for failed workspace switches with a logout option.

Usage

This component is rendered in the main application header exclusively for enterprise-licensed deployments where the workspaces feature flag (feat:workspaces) is enabled. It is not shown in cloud or open-source modes.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/layout/MainLayout/Header/WorkspaceSwitcher/index.jsx
• Lines: 1-386

Signature

const WorkspaceSwitcher = () => {
    const navigate = useNavigate()
    const user = useSelector((state) => state.auth.user)
    const isAuthenticated = useSelector((state) => state.auth.isAuthenticated)
    const features = useSelector((state) => state.auth.features)
    const { isEnterpriseLicensed } = useConfig()
    // ...
}

WorkspaceSwitcher.propTypes = {}

export default WorkspaceSwitcher

Import

import WorkspaceSwitcher from '@/layout/MainLayout/Header/WorkspaceSwitcher'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	N/A	N/A	Component takes no props; reads from Redux store (auth.user, auth.isAuthenticated, auth.features) and ConfigContext

Outputs

Name	Type	Description
Workspace switcher button	JSX.Element	Button displaying active workspace name with dropdown arrow
Workspace menu	JSX.Element	StyledMenu listing all assigned workspaces with check icon for the active one
Switching dialog	JSX.Element	CircularProgress dialog shown while workspace switch is in progress
Workspace unavailable dialog	JSX.Element	Select dialog shown when current workspace is no longer available, with logout option if no workspaces exist
Error dialog	JSX.Element	Dialog shown when workspace switch fails, with error message and logout button

Usage Examples

Basic Usage

import WorkspaceSwitcher from '@/layout/MainLayout/Header/WorkspaceSwitcher'

// In the Header component (enterprise mode only):
const Header = () => {
    const { isEnterpriseLicensed } = useConfig()
    const isAuthenticated = useSelector((state) => state.auth.isAuthenticated)

    return (
        <>
            {isEnterpriseLicensed && isAuthenticated && <WorkspaceSwitcher />}
        </>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Workspace_Navigation