fix: pipeline init

web/app/components/workflow/block-selector/data-sources.tsx

@@ -0,0 +1,51 @@
+import {
+  useRef,
+} from 'react'
+import type {
+  OnSelectBlock,
+  ToolWithProvider,
+} from '../types'
+import Tools from './tools'
+import { ViewType } from './view-type-select'
+import cn from '@/utils/classnames'
+import type { ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
+
+type AllToolsProps = {
+  className?: string
+  toolContentClassName?: string
+  searchText: string
+  onSelect: OnSelectBlock
+  dataSources: ToolWithProvider[]
+}
+
+const DataSources = ({
+  className,
+  toolContentClassName,
+  searchText,
+  onSelect,
+  dataSources,
+}: AllToolsProps) => {
+  const pluginRef = useRef<ListRef>(null)
+  const wrapElemRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div className={cn(className)}>
+      <div
+        ref={wrapElemRef}
+        className='max-h-[464px] overflow-y-auto'
+        onScroll={pluginRef.current?.handleScroll}
+      >
+        <Tools
+          className={toolContentClassName}
+          showWorkflowEmpty={false}
+          tools={dataSources}
+          onSelect={onSelect}
+          viewType={ViewType.flat}
+          hasSearchText={!!searchText}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default DataSources

web/app/components/workflow/block-selector/hooks.ts

@@ -8,7 +8,7 @@ import {
   ToolTypeEnum,
 } from './types'
 
-export const useTabs = (noBlocks?: boolean) => {
+export const useTabs = (noBlocks?: boolean, noSources?: boolean) => {
   const { t } = useTranslation()
   const tabs = useMemo(() => {
     return [
@@ -22,16 +22,22 @@ export const useTabs = (noBlocks?: boolean) => {
               },
             ]
       ),
-      {
-        key: TabsEnum.Sources,
-        name: t('workflow.tabs.sources'),
-      },
+      ...(
+        noSources
+          ? []
+          : [
+            {
+              key: TabsEnum.Sources,
+              name: t('workflow.tabs.sources'),
+            },
+          ]
+      ),
       {
         key: TabsEnum.Tools,
         name: t('workflow.tabs.tools'),
       },
     ]
-  }, [t, noBlocks])
+  }, [t, noBlocks, noSources])
   const initialTab = useMemo(() => {
     if (noBlocks)
       return TabsEnum.Sources

web/app/components/workflow/block-selector/index.tsx

@@ -3,6 +3,7 @@ import type { NodeSelectorProps } from './main'
 import NodeSelector from './main'
 import { useHooksStore } from '@/app/components/workflow/hooks-store/store'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { useStore } from '@/app/components/workflow/store'
 
 const NodeSelectorWrapper = (props: NodeSelectorProps) => {
   const availableNodesMetaData = useHooksStore(s => s.availableNodesMetaData)
@@ -27,10 +28,13 @@ const NodeSelectorWrapper = (props: NodeSelectorProps) => {
     })
   }, [availableNodesMetaData?.nodes])
 
+  const dataSourceList = useStore(s => s.dataSourceList)
+
   return (
     <NodeSelector
       {...props}
       blocks={blocks}
+      dataSources={dataSourceList || []}
     />
   )
 }

web/app/components/workflow/block-selector/main.tsx

@@ -17,6 +17,7 @@ import type {
   BlockEnum,
   NodeDefault,
   OnSelectBlock,
+  ToolWithProvider,
 } from '../types'
 import Tabs from './tabs'
 import { TabsEnum } from './types'
@@ -49,6 +50,7 @@ export type NodeSelectorProps = {
   availableBlocksTypes?: BlockEnum[]
   disabled?: boolean
   blocks?: NodeDefault[]
+  dataSources?: ToolWithProvider[]
 }
 const NodeSelector: FC<NodeSelectorProps> = ({
   open: openFromProps,
@@ -65,6 +67,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   availableBlocksTypes,
   disabled,
   blocks = [],
+  dataSources = [],
 }) => {
   const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
@@ -95,7 +98,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
     activeTab,
     setActiveTab,
     tabs,
-  } = useTabs(!blocks.length)
+  } = useTabs(!blocks.length, !dataSources.length)
 
   const searchPlaceholder = useMemo(() => {
     if (activeTab === TabsEnum.Blocks)
@@ -193,6 +196,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
             tags={tags}
             availableBlocksTypes={availableBlocksTypes}
             blocks={blocks}
+            dataSources={dataSources}
           />
         </div>
       </PortalToFollowElemContent>

web/app/components/workflow/block-selector/tabs.tsx

@@ -4,11 +4,13 @@ import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/se
 import type {
   BlockEnum,
   NodeDefault,
+  ToolWithProvider,
 } from '../types'
 import type { ToolDefaultValue } from './types'
 import { TabsEnum } from './types'
 import Blocks from './blocks'
 import AllTools from './all-tools'
+import DataSources from './data-sources'
 
 export type TabsProps = {
   activeTab: TabsEnum
@@ -17,6 +19,7 @@ export type TabsProps = {
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   availableBlocksTypes?: BlockEnum[]
   blocks: NodeDefault[]
+  dataSources?: ToolWithProvider[]
 }
 const Tabs: FC<TabsProps> = ({
   activeTab,
@@ -25,6 +28,7 @@ const Tabs: FC<TabsProps> = ({
   onSelect,
   availableBlocksTypes,
   blocks,
+  dataSources = [],
 }) => {
   const { data: buildInTools } = useAllBuiltInTools()
   const { data: customTools } = useAllCustomTools()
@@ -42,6 +46,15 @@ const Tabs: FC<TabsProps> = ({
           />
         )
       }
+      {
+        activeTab === TabsEnum.Sources && !!dataSources.length && (
+          <DataSources
+            searchText={searchText}
+            onSelect={onSelect}
+            dataSources={dataSources}
+          />
+        )
+      }
       {
         activeTab === TabsEnum.Tools && (
           <AllTools