plugins page

web/app/components/plugins/constants.ts

@@ -24,4 +24,5 @@ export const categoryKeys = [
   'agent-strategy',
   'extension',
   'bundle',
+  'datasource',
 ]

web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAppContext } from '@/context/app-context'
+// import Button from '@/app/components/base/button'
+// import Toast from '@/app/components/base/toast'
+// import Indicator from '@/app/components/header/indicator'
+// import ToolItem from '@/app/components/tools/provider/tool-item'
+// import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
+import type { PluginDetail } from '@/app/components/plugins/types'
+import { useDataSourceList } from '@/service/use-pipeline'
+import { transformDataSourceToTool } from '@/app/components/workflow/block-selector/utils'
+
+type Props = {
+  detail: PluginDetail
+}
+
+const ActionList = ({
+  detail,
+}: Props) => {
+  const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
+  // const providerBriefInfo = detail.declaration.datasource?.identity
+  // const providerKey = `${detail.plugin_id}/${providerBriefInfo?.name}`
+  const { data: dataSourceList } = useDataSourceList(true)
+  const provider = useMemo(() => {
+    const result = dataSourceList?.find(collection => collection.plugin_id === detail.plugin_id)
+
+    if (result)
+      return transformDataSourceToTool(result)
+  }, [detail.plugin_id, dataSourceList])
+  const data: any = []
+  // const { data } = useBuiltinTools(providerKey)
+
+  // const [showSettingAuth, setShowSettingAuth] = useState(false)
+
+  // const handleCredentialSettingUpdate = () => {
+  //   Toast.notify({
+  //     type: 'success',
+  //     message: t('common.api.actionSuccess'),
+  //   })
+  //   setShowSettingAuth(false)
+  // }
+
+  // const { mutate: updatePermission, isPending } = useUpdateProviderCredentials({
+  //   onSuccess: handleCredentialSettingUpdate,
+  // })
+
+  // const { mutate: removePermission } = useRemoveProviderCredentials({
+  //   onSuccess: handleCredentialSettingUpdate,
+  // })
+
+  if (!data || !provider)
+    return null
+
+  return (
+    <div className='px-4 pb-4 pt-2'>
+      <div className='mb-1 py-1'>
+        <div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'>
+          {t('plugin.detailPanel.actionNum', { num: data.length, action: data.length > 1 ? 'actions' : 'action' })}
+          {/* {provider.is_team_authorization && provider.allow_delete && (
+            <Button
+              variant='secondary'
+              size='small'
+              onClick={() => setShowSettingAuth(true)}
+              disabled={!isCurrentWorkspaceManager}
+            >
+              <Indicator className='mr-2' color={'green'} />
+              {t('tools.auth.authorized')}
+            </Button>
+          )} */}
+        </div>
+        {/* {!provider.is_team_authorization && provider.allow_delete && (
+          <Button
+            variant='primary'
+            className='w-full'
+            onClick={() => setShowSettingAuth(true)}
+            disabled={!isCurrentWorkspaceManager}
+          >{t('workflow.nodes.tool.authorize')}</Button>
+        )} */}
+      </div>
+      {/* <div className='flex flex-col gap-2'>
+        {data.map(tool => (
+          <ToolItem
+            key={`${detail.plugin_id}${tool.name}`}
+            disabled={false}
+            collection={provider}
+            tool={tool}
+            isBuiltIn={true}
+            isModel={false}
+          />
+        ))}
+      </div>
+      {showSettingAuth && (
+        <ConfigCredential
+          collection={provider}
+          onCancel={() => setShowSettingAuth(false)}
+          onSaved={async value => updatePermission({
+            providerName: provider.name,
+            credentials: value,
+          })}
+          onRemove={async () => removePermission(provider.name)}
+          isSaving={isPending}
+        />
+      )} */}
+    </div>
+  )
+}
+
+export default ActionList

web/app/components/plugins/plugin-detail-panel/index.tsx

@@ -4,6 +4,7 @@ import type { FC } from 'react'
 import DetailHeader from './detail-header'
 import EndpointList from './endpoint-list'
 import ActionList from './action-list'
+import DatasourceActionList from './datasource-action-list'
 import ModelList from './model-list'
 import AgentStrategyList from './agent-strategy-list'
 import Drawer from '@/app/components/base/drawer'
@@ -52,6 +53,7 @@ const PluginDetailPanel: FC<Props> = ({
             {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
             {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
             {!!detail.declaration.model && <ModelList detail={detail} />}
+            {!!detail.declaration.datasource && <DatasourceActionList detail={detail} />}
           </div>
         </>
       )}

web/app/components/plugins/types.ts

@@ -74,7 +74,8 @@ export type PluginDeclaration = {
   plugins: any // useless in frontend
   verified: boolean
   endpoint: PluginEndpointDeclaration
-  tool: PluginToolDeclaration
+  tool?: PluginToolDeclaration
+  datasource?: PluginToolDeclaration
   model: any
   tags: string[]
   agent_strategy: any

web/i18n/en-US/plugin.ts

@@ -9,6 +9,7 @@ const translation = {
     agents: 'Agent Strategies',
     extensions: 'Extensions',
     bundles: 'Bundles',
+    datasources: 'Datasources',
   },
   categorySingle: {
     model: 'Model',
@@ -16,6 +17,7 @@ const translation = {
     agent: 'Agent Strategy',
     extension: 'Extension',
     bundle: 'Bundle',
+    datasource: 'Datasource',
   },
   search: 'Search',
   allCategories: 'All Categories',

web/i18n/zh-Hans/plugin.ts

@@ -9,6 +9,7 @@ const translation = {
     agents: 'Agent 策略',
     extensions: '扩展',
     bundles: '插件集',
+    datasources: '数据源',
   },
   categorySingle: {
     model: '模型',
@@ -16,6 +17,7 @@ const translation = {
     agent: 'Agent 策略',
     extension: '扩展',
     bundle: '插件集',
+    datasource: '数据源',
   },
   search: '搜索',
   allCategories: '所有类别',

web/service/use-pipeline.ts

@@ -162,14 +162,14 @@ export const usePublishedPipelineProcessingParams = (params: PipelineProcessingP
   })
 }
 
-export const useDataSourceList = (enabled: boolean, onSuccess: (v: DataSourceItem[]) => void) => {
+export const useDataSourceList = (enabled: boolean, onSuccess?: (v: DataSourceItem[]) => void) => {
   return useQuery<DataSourceItem[]>({
     enabled,
     queryKey: [NAME_SPACE, 'datasource'],
     staleTime: 0,
     queryFn: async () => {
       const data = await get<DataSourceItem[]>('/rag/pipelines/datasource-plugins')
-      onSuccess(data)
+      onSuccess?.(data)
       return data
     },
     retry: false,