Implementation:Infiniflow Ragflow LinkDataSource Component

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

Overview

Data source management component with CRUD operations for linking, unlinking, rebuilding, and configuring external data sources on a knowledge base.

Description

LinkDataSource displays a list of linked data sources as DataSourceItem sub-components, each showing the source icon (resolved from useDataSourceInfo), name, and hover-revealed action buttons (auto-parse toggle, rebuild, settings navigation, unlink). The unlink action opens a delSourceModal confirmation. A link button opens LinkDataSourceModal for adding new sources. DataSourceItem integrates useNavigatePage for detail navigation and useDataSourceRebuild for triggering rebuilds. The parent manages modal open state and delegates submit/unbind callbacks upward.

Usage

Rendered in the dataset settings form to manage the external data sources (Google Drive, S3, etc.) connected to a knowledge base.

Code Reference

Source Location

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

Signature

export interface ILinkDataSourceProps {
  data?: IConnector[];
  handleLinkOrEditSubmit?: (data: IDataSourceBase[] | undefined) => void;
  unbindFunc?: (item: DataSourceItemProps) => void;
  handleAutoParse?: (option: { source_id: string; isAutoParse: boolean }) => void;
}

const LinkDataSource = (props: ILinkDataSourceProps) => JSX.Element;
export default LinkDataSource;

Import

import LinkDataSource from './link-data-source';

I/O Contract

Inputs

Name	Type	Required	Description
data	IConnector[]	No	Currently linked connectors
handleLinkOrEditSubmit	function	No	Callback when sources are linked
unbindFunc	function	No	Callback to unlink a source
handleAutoParse	function	No	Toggle auto-parse for a source

Outputs

Name	Type	Description
JSX.Element	React element	Source list with action buttons and link modal

Usage Examples

<LinkDataSource
  data={connectors}
  handleLinkOrEditSubmit={handleLink}
  unbindFunc={handleUnbind}
  handleAutoParse={handleAutoParse}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment