Implementation:FlowiseAI Flowise ShareWithWorkspaceDialog

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

Overview

ShareWithWorkspaceDialog is a React dialog component that enables users to share chatflows, agentflows, or other items with workspaces within their organization.

Description

This component renders a Material UI Dialog (portaled via createPortal) that fetches the user's available workspaces and currently shared workspaces for the given item via the workspace and user APIs. It presents a read-only name field for the item being shared and an editable data grid with workspace names and boolean share toggles. Users can toggle sharing for each workspace and submit the changes, which calls workspaceApi.setSharedWorkspacesForItem to persist the sharing configuration. The component integrates with Redux for authentication state, canvas dialog visibility, and snackbar notifications.

Usage

Use this component when a user wants to share a chatflow, agentflow, tool, or other workspace item with other workspaces in their organization.

Code Reference

Source Location

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

Signature

const ShareWithWorkspaceDialog = ({ show, dialogProps, onCancel, setError }) => { ... }

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

export default ShareWithWorkspaceDialog

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Configuration object containing data.id (string, item ID), data.name (string), data.title (string, dialog title), data.itemType (string), cancelButtonName (string), and confirmButtonName (string)
onCancel	func	Yes	Callback invoked when the user cancels or the share request completes
setError	func	No	Optional callback to propagate API errors to the parent component

Outputs

Name	Type	Description
React Portal	ReactPortal	Renders the dialog into the DOM element with id portal

Usage Examples

Basic Usage

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

const MyComponent = () => {
    const [showDialog, setShowDialog] = useState(false)
    const dialogProps = {
        data: {
            id: 'chatflow-123',
            name: 'My Chatflow',
            title: 'Share Chatflow',
            itemType: 'chatflow'
        },
        cancelButtonName: 'Cancel',
        confirmButtonName: 'Share'
    }

    return (
        <ShareWithWorkspaceDialog
            show={showDialog}
            dialogProps={dialogProps}
            onCancel={() => setShowDialog(false)}
            setError={(err) => console.error(err)}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Workspace_Management