Implementation:Infiniflow Ragflow LinkDataPipeline Component

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

Overview

Pipeline linking section component with modal orchestration for associating data pipelines with a knowledge base.

Description

LinkDataPipeline displays the currently linked pipeline as a DataPipelineItem (showing avatar and name) and provides a link button to open LinkDataPipelineModal. The component manages modal open/close state and the currently selected pipeline node via useState. DataPipelineItem is an internal sub-component that also supports an unlink modal flow using Modal.show with custom footer buttons. The parent passes handleLinkOrEditSubmit which is called after pipeline selection to propagate changes upward.

Usage

Rendered within the dataset settings form to let users view, link, or change the data pipeline associated with a knowledge base.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/dataset-setting/components/link-data-pipeline.tsx
• Lines: 1-191

Signature

export interface ILinkDataPipelineProps {
  data?: IDataPipelineNodeProps;
  handleLinkOrEditSubmit?: (data: IDataPipelineNodeProps | undefined) => void;
}

const LinkDataPipeline = (props: ILinkDataPipelineProps) => JSX.Element;
export default LinkDataPipeline;

Import

import LinkDataPipeline from './link-data-pipeline';

I/O Contract

Inputs

Name	Type	Required	Description
data	IDataPipelineNodeProps	No	Currently linked pipeline data
handleLinkOrEditSubmit	function	No	Callback when pipeline is linked or changed

Outputs

Name	Type	Description
JSX.Element	React element	Pipeline display, link button, and modal

Usage Examples

<LinkDataPipeline
  data={currentPipeline}
  handleLinkOrEditSubmit={(pipeline) => form.setValue('pipeline', pipeline)}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment