Implementation:FlowiseAI Flowise UpsertHistoryDetailsDialog

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

Overview

UpsertHistoryDetailsDialog is a React dialog component that displays detailed statistics and node configuration data for a specific document store upsert history entry.

Description

This component renders a Material UI Dialog that shows upsert operation results including counts for added, updated, skipped, and deleted records via StatsCard components. It also displays an expandable accordion list of flow nodes with their icons, labels, IDs, and parameter values in a read-only table format. The dialog is rendered through a React portal attached to the DOM element with id "portal".

Usage

Use this component when a user wants to inspect the details of a past upsert operation in the document store. It is typically triggered from the UpsertHistorySideDrawer when a user clicks the "Details" button on a specific history entry.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/docstore/UpsertHistoryDetailsDialog.jsx
• Lines: 1-156

Signature

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

Import

import UpsertHistoryDetailsDialog from '@/views/docstore/UpsertHistoryDetailsDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Contains title, numAdded, numUpdated, numSkipped, numDeleted, and flowData array of node objects
onCancel	func	Yes	Callback invoked when the dialog is closed

Outputs

Name	Type	Description
React Portal	JSX.Element	Renders the dialog via createPortal to the element with id "portal"

Usage Examples

Basic Usage

<UpsertHistoryDetailsDialog
    show={showDetailsDialog}
    dialogProps={{
        title: 'Upsert History Details',
        numAdded: 10,
        numUpdated: 5,
        numSkipped: 2,
        numDeleted: 0,
        flowData: [
            {
                id: 'pdfLoader_0',
                name: 'pdfLoader',
                label: 'PDF Loader',
                paramValues: [{ key: 'filePath', value: '/docs/sample.pdf' }]
            }
        ]
    }}
    onCancel={() => setShowDetailsDialog(false)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Vector_Store_Upsert