Implementation:Infiniflow Ragflow MetadataManageModal Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Metadata |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete modal component for managing metadata fields provided by the RAGFlow frontend.
Description
The ManageMetadataModal component renders a full-featured modal for viewing and editing metadata fields on a dataset or document. It supports two tabs in settings mode ("generation" for custom fields and "built-in" for system fields like update_time and file_name), a data table with row selection for bulk delete, inline value editing, add/edit field via a nested `ManageValuesModal`, and auto-save on changes. It integrates with `useManageMetaDataModal` for CRUD operations, `useMetadataColumns` for column definitions, and `useOperateData` for batch operations.
Usage
Import as a named export and render conditionally when the metadata management modal should be visible. Pass table data, metadata type, and callback handlers.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/dataset/components/metedata/manage-modal.tsx
- Lines: 1-596
Signature
export const ManageMetadataModal = (props: IManageModalProps) => JSX.Element;
Import
import { ManageMetadataModal } from '@/pages/dataset/components/metedata/manage-modal';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| title | ReactNode | Yes | Modal title content |
| visible | boolean | Yes | Whether the modal is open |
| hideModal | () => void | Yes | Callback to close the modal |
| tableData | IMetaDataTableData[] | Yes | Initial metadata rows to display |
| type | MetadataType | Yes | Metadata operation mode (Manage, Setting, UpdateSingle, SingleFileSetting) |
| isCanAdd | boolean | No | Whether the add-field button is shown |
| isDeleteSingleValue | boolean | No | Whether individual value delete buttons appear |
| isShowDescription | boolean | No | Whether the description column is displayed |
| isShowValueSwitch | boolean | No | Whether the restrict-defined-values switch is shown in the values modal |
| builtInMetadata | IBuiltInMetadataItem[] | No | Pre-selected built-in metadata items |
| success | (data?: { metadata?; builtInMetadata? }) => void | No | Callback invoked after successful save |
| documentIds | string[] | No | Scope metadata operations to specific documents |
| secondTitle | ReactNode | No | Secondary title displayed next to the add button |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React.ReactElement | Renders a modal with tabbed metadata table, bulk operations bar, nested values modal, and confirm-delete dialog |
Usage Examples
import { ManageMetadataModal } from '@/pages/dataset/components/metedata/manage-modal';
{manageMetadataVisible && (
<ManageMetadataModal
title="Metadata Generation Settings"
visible={manageMetadataVisible}
hideModal={hideManageMetadataModal}
tableData={tableData}
type={MetadataType.Setting}
isCanAdd={true}
isShowDescription={true}
success={handleSaveMetadata}
/>
)}