Implementation:FlowiseAI Flowise UpsertHistorySideDrawer
| Knowledge Sources | |
|---|---|
| Domains | Document Store, UI Navigation |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
UpsertHistorySideDrawer is a React side drawer component that displays a chronological timeline of document store upsert history entries.
Description
This component renders a Material UI SwipeableDrawer anchored to the right side of the screen. It fetches upsert history data via the vectorstore API using the useApi hook and displays each entry in a MUI Lab Timeline format. Each timeline entry shows the date formatted with Moment.js, counts for added, updated, skipped, and deleted records, and a "Details" button to drill into the full history entry. When no history exists, an empty state illustration is shown.
Usage
Use this component to allow users to browse the upsert history timeline for a specific document store entry. It is typically opened from the document store view and works in tandem with UpsertHistoryDetailsDialog for viewing individual entry details.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/docstore/UpsertHistorySideDrawer.jsx
- Lines: 1-113
Signature
const UpsertHistorySideDrawer = ({ show, dialogProps, onClickFunction, onSelectHistoryDetails }) => { ... }
Import
import UpsertHistorySideDrawer from '@/views/docstore/UpsertHistorySideDrawer'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| show | bool | Yes | Controls whether the side drawer is open |
| dialogProps | object | Yes | Must contain an id property used to fetch upsert history from the API |
| onClickFunction | func | Yes | Callback invoked when the drawer is closed or the close button is clicked |
| onSelectHistoryDetails | func | Yes | Callback invoked with a history object when the user clicks the "Details" button on a timeline entry |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | SwipeableDrawer | Renders a right-anchored drawer containing the upsert history timeline |
Usage Examples
Basic Usage
<UpsertHistorySideDrawer
show={showHistoryDrawer}
dialogProps={{ id: 'docstore_abc123' }}
onClickFunction={() => setShowHistoryDrawer(false)}
onSelectHistoryDetails={(history) => {
setSelectedHistory(history)
setShowDetailsDialog(true)
}}
/>