feat: refactor template card actions and details to standardize prop names; add create modal for dataset creation

web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx

@@ -6,7 +6,7 @@ import Operations from './operations'
 import CustomPopover from '@/app/components/base/popover'
 
 type ActionsProps = {
-  handleApplyTemplate: () => void
+  onApplyTemplate: () => void
   handleShowTemplateDetails: () => void
   showMoreOperations: boolean
   openEditModal: () => void
@@ -15,7 +15,7 @@ type ActionsProps = {
 }
 
 const Actions = ({
-  handleApplyTemplate,
+  onApplyTemplate,
   handleShowTemplateDetails,
   showMoreOperations,
   openEditModal,
@@ -28,7 +28,7 @@ const Actions = ({
     <div className='absolute bottom-0 left-0 z-10 hidden w-full items-center gap-x-1 bg-pipeline-template-card-hover-bg p-4 pt-8 group-hover:flex'>
       <Button
         variant='primary'
-        onClick={handleApplyTemplate}
+        onClick={onApplyTemplate}
         className='grow gap-x-0.5'
       >
         <RiAddLine className='size-4' />

web/app/components/datasets/create-from-pipeline/list/template-card/create-modal.tsx

@@ -3,19 +3,20 @@ import CreateForm from '../../create-form'
 import { useCallback, useEffect, useState } from 'react'
 import type { CreateFormData } from '@/models/pipeline'
 import { ChunkingMode, type CreateDatasetReq, DatasetPermission } from '@/models/datasets'
-import { useCreatePipelineDataset } from '@/service/knowledge/use-create-dataset'
 import type { Member } from '@/models/common'
 import { useMembers } from '@/service/use-common'
 
-type ApplyTemplateModalProps = {
+type CreateModalProps = {
   show: boolean
   onClose: () => void
+  onCreate: (payload: Omit<CreateDatasetReq, 'yaml_content'>) => Promise<void>
 }
 
-const ApplyTemplateModal = ({
+const CreateModal = ({
   show,
   onClose,
-}: ApplyTemplateModalProps) => {
+  onCreate,
+}: CreateModalProps) => {
   const [memberList, setMemberList] = useState<Member[]>([])
   const { data: members } = useMembers()
 
@@ -24,8 +25,6 @@ const ApplyTemplateModal = ({
       setMemberList(members.accounts)
   }, [members])
 
-  const { mutateAsync: createEmptyDataset } = useCreatePipelineDataset() // todo: yaml content
-
   const handleCreate = useCallback(async (payload: CreateFormData) => {
     const { name, appIcon, description, permission, selectedMemberIDs } = payload
     const request: CreateDatasetReq = {
@@ -50,12 +49,8 @@ const ApplyTemplateModal = ({
       })
       request.partial_member_list = selectedMemberList
     }
-    await createEmptyDataset(request, {
-      onSettled: () => {
-        onClose?.()
-      },
-    })
-  }, [createEmptyDataset, memberList, onClose])
+    onCreate(request)
+  }, [memberList, onCreate])
 
   return (
     <Modal
@@ -71,4 +66,4 @@ const ApplyTemplateModal = ({
   )
 }
 
-export default ApplyTemplateModal
+export default CreateModal

web/app/components/datasets/create-from-pipeline/list/template-card/details.tsx

@@ -9,13 +9,13 @@ import Tooltip from '@/app/components/base/tooltip'
 
 type DetailsProps = {
   id: string
-  handleUseTemplate: () => void
+  onApplyTemplate: () => void
   onClose: () => void
 }
 
 const Details = ({
   id,
-  handleUseTemplate,
+  onApplyTemplate,
   onClose,
 }: DetailsProps) => {
   const { t } = useTranslation()
@@ -74,7 +74,7 @@ const Details = ({
         <div className='p-3'>
           <Button
             variant='primary'
-            onClick={handleUseTemplate}
+            onClick={onApplyTemplate}
             className='w-full gap-x-0.5'
           >
             <RiAddLine className='size-4' />

web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx

@@ -7,17 +7,18 @@ import Confirm from '@/app/components/base/confirm'
 import {
   useDeletePipeline,
   useExportPipelineDSL,
-  useImportPipelineDSL,
   usePipelineTemplateById,
 } from '@/service/use-pipeline'
 import { downloadFile } from '@/utils/format'
 import Toast from '@/app/components/base/toast'
-import { DSLImportMode } from '@/models/app'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useRouter } from 'next/navigation'
 import Details from './details'
 import Content from './content'
 import Actions from './actions'
+import type { CreateDatasetReq } from '@/models/datasets'
+import { useCreatePipelineDataset } from '@/service/knowledge/use-create-dataset'
+import CreateModal from './create-modal'
 
 type TemplateCardProps = {
   pipeline: PipelineTemplate
@@ -33,12 +34,17 @@ const TemplateCard = ({
   const [showEditModal, setShowEditModal] = useState(false)
   const [showDeleteConfirm, setShowConfirmDelete] = useState(false)
   const [showDetailModal, setShowDetailModal] = useState(false)
+  const [showCreateModal, setShowCreateModal] = useState(false)
 
   const { refetch: getPipelineTemplateInfo } = usePipelineTemplateById(pipeline.id, false)
-  const { mutateAsync: importDSL } = useImportPipelineDSL()
+  const { mutateAsync: createEmptyDataset } = useCreatePipelineDataset()
   const { handleCheckPluginDependencies } = usePluginDependencies()
 
-  const handleUseTemplate = useCallback(async () => {
+  const openCreateModal = useCallback(() => {
+    setShowCreateModal(true)
+  }, [])
+
+  const handleUseTemplate = useCallback(async (payload: Omit<CreateDatasetReq, 'yaml_content'>) => {
     try {
       const { data: pipelineTemplateInfo } = await getPipelineTemplateInfo()
       if (!pipelineTemplateInfo) {
@@ -49,17 +55,17 @@ const TemplateCard = ({
         return
       }
       const request = {
-        mode: DSLImportMode.YAML_CONTENT,
+        ...payload,
         yaml_content: pipelineTemplateInfo.export_data,
       }
-      const newPipeline = await importDSL(request)
+      const newDataset = await createEmptyDataset(request)
       Toast.notify({
         type: 'success',
         message: t('app.newApp.appCreated'),
       })
-      if (newPipeline.pipeline_id)
-        await handleCheckPluginDependencies(newPipeline.pipeline_id, true)
-      push(`dataset/${newPipeline.pipeline_id}/pipeline`)
+      if (newDataset.pipeline_info?.id)
+        await handleCheckPluginDependencies(newDataset.pipeline_info.id, true)
+      push(`dataset/${newDataset.id}/pipeline`)
     }
     catch {
       Toast.notify({
@@ -67,7 +73,7 @@ const TemplateCard = ({
         message: t('datasetPipeline.creation.errorTip'),
       })
     }
-  }, [getPipelineTemplateInfo, importDSL, t, handleCheckPluginDependencies, push])
+  }, [getPipelineTemplateInfo, createEmptyDataset, t, handleCheckPluginDependencies, push])
 
   const handleShowTemplateDetails = useCallback(() => {
     setShowDetailModal(true)
@@ -140,7 +146,7 @@ const TemplateCard = ({
         docForm={pipeline.doc_form}
       />
       <Actions
-        handleApplyTemplate={handleUseTemplate}
+        onApplyTemplate={openCreateModal}
         handleShowTemplateDetails={handleShowTemplateDetails}
         showMoreOperations={showMoreOperations}
         openEditModal={openEditModal}
@@ -177,10 +183,18 @@ const TemplateCard = ({
           <Details
             id={pipeline.id}
             onClose={closeDetailsModal}
-            handleUseTemplate={handleUseTemplate}
+            onApplyTemplate={openCreateModal}
           />
         </Modal>
       )}
+      {showCreateModal && (
+        <CreateModal
+          show={showCreateModal}
+          onClose={() => setShowCreateModal(false)}
+          onCreate={handleUseTemplate}
+        />
+      )
+      }
     </div>
   )
 }

web/models/datasets.ts

@@ -6,6 +6,9 @@ import type { MetadataFilteringVariableType } from '@/app/components/workflow/no
 import type { MetadataItemWithValue } from '@/app/components/datasets/metadata/types'
 import { ExternalKnowledgeBase, General, Graph, ParentChild, Qa } from '@/app/components/base/icons/src/public/knowledge/dataset-card'
 import { GeneralChunk, ParentChildChunk, QuestionAndAnswer } from '@/app/components/base/icons/src/vender/knowledge'
+import type { Edge, EnvironmentVariable, Node } from '@/app/components/workflow/types'
+import type { Viewport } from 'reactflow'
+import type { RAGPipelineVariables } from './pipeline'
 
 export enum DataSourceType {
   FILE = 'upload_file',
@@ -737,6 +740,7 @@ export type CreateDatasetReq = {
     user_id: string
     role?: 'owner' | 'admin' | 'editor' | 'normal' | 'dataset_operator'
   }[]
+  yaml_content?: string
 }
 
 export type CreateDatasetResponse = {
@@ -749,4 +753,14 @@ export type CreateDatasetResponse = {
   created_at: number
   updated_by: string
   updated_at: number
+  pipeline_info: {
+    id: string
+    graph: {
+      nodes: Node[]
+      edges: Edge[]
+      viewport?: Viewport
+    }
+    environment_variables: EnvironmentVariable[]
+    rag_pipeline_variables: RAGPipelineVariables
+  }
 }