Implementation:FlowiseAI Flowise UpsertResultDialog

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

Overview

UpsertResultDialog is a React dialog component that displays the results of a vector store upsert operation, showing statistics, added document details, and an optional "Test Retrieval" action.

Description

This component renders a Material UI Dialog through a React portal. It shows four StatsCard components for added, updated, skipped, and deleted counts. When documents were added, it renders a list of Card components displaying each document's pageContent and collapsible metadata (via ReactJson/flowise-react-json-view with theme-aware styling). The dialog actions conditionally include a gradient "Test Retrieval" button (when dialogProps.goToRetrievalQuery is truthy) that triggers the onGoToRetrievalQuery callback, alongside a close button. Redux dispatch manages canvas dialog visibility state.

Usage

Use this component to display the outcome of a vector store upsert operation. It is typically shown after documents have been upserted into a vector store, providing users with a summary and the option to immediately test retrieval queries against the newly upserted data.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/vectorstore/UpsertResultDialog.jsx
• Lines: 1-119

Signature

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

Import

import UpsertResultDialog from '@/views/vectorstore/UpsertResultDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Contains numAdded, numUpdated, numSkipped, numDeleted, addedDocs (array of {pageContent, metadata}), and goToRetrievalQuery (boolean flag)
onCancel	func	Yes	Callback invoked when the close button is clicked
onGoToRetrievalQuery	func	No	Callback invoked when the "Test Retrieval" button is clicked; only used when dialogProps.goToRetrievalQuery is truthy

Outputs

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

Usage Examples

Basic Usage

<UpsertResultDialog
    show={showResultDialog}
    dialogProps={{
        numAdded: 25,
        numUpdated: 3,
        numSkipped: 0,
        numDeleted: 0,
        addedDocs: [
            { pageContent: 'Document text content...', metadata: { source: 'file.pdf', page: 1 } }
        ],
        goToRetrievalQuery: true
    }}
    onCancel={() => setShowResultDialog(false)}
    onGoToRetrievalQuery={() => navigate('/vectorstore/query')}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Vector_Store_Upsert