Implementation:Infiniflow Ragflow MetadataManageValuesModal Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Metadata
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete modal component for managing metadata field values provided by the RAGFlow frontend.

Description

The ManageValuesModal component renders a modal for editing a single metadata field's properties and values. It uses `DynamicForm` to display configurable form fields (field name, value type selector, description textarea, restrict-defined-values switch) based on the current metadata type and mode props. Values are rendered as a vertical list of `ValueInputItem` components (supporting text, number, and date inputs) with add and delete actions, or as an `EditTag` component for inline tag editing. It delegates state management to the `useManageValues` hook.

Usage

Import as a named export and render within the `ManageMetadataModal` when adding or editing a metadata field. Pass the field data, operation callbacks, and display configuration.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/components/metedata/manage-values-modal.tsx
• Lines: 1-353

Signature

export const ManageValuesModal = (props: IManageValuesProps) => JSX.Element;

Import

import { ManageValuesModal } from '@/pages/dataset/components/metedata/manage-values-modal';

I/O Contract

Inputs

Name	Type	Required	Description
title	ReactNode	Yes	Modal title
visible	boolean	Yes	Whether the modal is open
hideModal	() => void	Yes	Callback to close the modal
data	IMetaDataTableData	Yes	The metadata field being edited (field, description, values, valueType)
onSave	(data: IMetaDataTableData) => void	Yes	Callback when save is confirmed
type	MetadataType	Yes	Current metadata operation mode
existsKeys	string[]	Yes	Existing field names for uniqueness validation
isEditField	boolean	No	Whether the field name is editable
isAddValue	boolean	No	Whether new values can be added
isShowDescription	boolean	No	Whether description textarea is shown
isShowValueSwitch	boolean	No	Whether restrict-defined-values toggle is shown
isShowType	boolean	No	Whether the value type selector is displayed
isVerticalShowValue	boolean	No	Whether values are displayed vertically (true) or as tags (false)
addUpdateValue	function	Yes	Callback to register an update operation for change tracking
addDeleteValue	function	Yes	Callback to register a delete operation for change tracking

Outputs

Name	Type	Description
JSX.Element	React.ReactElement	Renders a modal with dynamic form fields and a values editor section

Usage Examples

import { ManageValuesModal } from '@/pages/dataset/components/metedata/manage-values-modal';

<ManageValuesModal
  title="Field Setting"
  type={MetadataType.Setting}
  existsKeys={existingKeys}
  visible={manageValuesVisible}
  hideModal={hideManageValuesModal}
  data={valueData}
  onSave={handleSaveValues}
  addUpdateValue={addUpdateValue}
  addDeleteValue={addDeleteValue}
  isEditField={true}
  isAddValue={true}
  isShowDescription={true}
  isShowType={true}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment