Implementation:Infiniflow Ragflow LinkDataPipelineModal Component

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

Overview

Modal dialog with Zod-validated form for selecting and linking a data pipeline to a knowledge base.

Description

LinkDataPipelineModal renders a modal that adapts its title for link vs edit modes (based on whether data is provided). It uses react-hook-form with zodResolver and the pipelineFormSchema for validation. The form embeds a DataFlowSelect component for pipeline selection, which populates a local list state. On submit, it finds the selected pipeline by ID from the list and passes it to onSubmit. The modal includes Cancel and OK buttons with proper form submission handling.

Usage

Opened by LinkDataPipeline when the user clicks the link button to select a pipeline from available data pipelines.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/dataset-setting/components/link-data-pipline-modal.tsx
• Lines: 1-163

Signature

const LinkDataPipelineModal = ({
  data, open, setOpen, onSubmit,
}: {
  data: IDataPipelineNodeProps | undefined;
  open: boolean;
  setOpen: (open: boolean) => void;
  onSubmit?: (pipeline: IDataPipelineSelectNode | undefined) => void;
}) => JSX.Element;

export default LinkDataPipelineModal;

Import

import LinkDataPipelineModal from './link-data-pipline-modal';

I/O Contract

Inputs

Name	Type	Required	Description
data	IDataPipelineNodeProps	No	Existing pipeline data for edit mode
open	boolean	Yes	Controls modal visibility
setOpen	function	Yes	Toggle modal open state
onSubmit	function	No	Callback with selected pipeline

Outputs

Name	Type	Description
JSX.Element	React element	Modal with pipeline selection form

Usage Examples

<LinkDataPipelineModal
  data={undefined}
  open={showModal}
  setOpen={setShowModal}
  onSubmit={(pipeline) => handleLink(pipeline)}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment