Implementation:FlowiseAI Flowise ManageScrapedLinksDialog

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

Overview

ManageScrapedLinksDialog is a React dialog component that allows users to fetch, view, add, edit, and remove scraped web links from a given URL within the Flowise UI.

Description

This component renders a Material UI Dialog (portaled via createPortal) that provides an interface for managing scraped web links. It includes a URL input field with a "Fetch Links" button that calls the scraper API to retrieve links, a scrollable list of editable link entries with individual delete capabilities, and bulk clear/save actions. The component integrates with Redux for canvas dialog state management and snackbar notifications.

Usage

Use this component when you need to present users with a dialog to manage web scraping link lists, such as when configuring a web scraper node's target URLs in the Flowise canvas editor.

Code Reference

Source Location

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

Signature

const ManageScrapedLinksDialog = ({ show, dialogProps, onCancel, onSave }) => { ... }

ManageScrapedLinksDialog.propTypes = {
    show: PropTypes.bool,
    dialogProps: PropTypes.object,
    onCancel: PropTypes.func,
    onSave: PropTypes.func
}

export default ManageScrapedLinksDialog

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Configuration object containing url (string), selectedLinks (array), relativeLinksMethod (string), limit (number), and optional title (string)
onCancel	func	Yes	Callback invoked when the user cancels or closes the dialog
onSave	func	Yes	Callback invoked with (url, selectedLinks) when the user saves the link list

Outputs

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

Usage Examples

Basic Usage

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

const MyComponent = () => {
    const [showDialog, setShowDialog] = useState(false)
    const dialogProps = {
        url: 'https://example.com',
        selectedLinks: [],
        relativeLinksMethod: 'webCrawl',
        limit: 10,
        title: 'Manage Links'
    }

    return (
        <ManageScrapedLinksDialog
            show={showDialog}
            dialogProps={dialogProps}
            onCancel={() => setShowDialog(false)}
            onSave={(url, links) => {
                console.log('Saved URL:', url, 'Links:', links)
                setShowDialog(false)
            }}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Document_Processing