refactor: standardize pipeline template properties and improve related components

web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx

@@ -3,7 +3,7 @@ import TemplateCard from './template-card'
 
 const BuiltInPipelineList = () => {
   const { data: pipelineList, isLoading } = usePipelineTemplateList({ type: 'built-in' })
-  const list = pipelineList?.pipelines
+  const list = pipelineList?.pipeline_templates
 
   if (isLoading || !list)
     return null

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

@@ -9,17 +9,17 @@ type ContentProps = {
   name: string
   description: string
   iconInfo: IconInfo
-  docForm: ChunkingMode
+  chunkStructure: ChunkingMode
 }
 
 const Content = ({
   name,
   description,
   iconInfo,
-  docForm,
+  chunkStructure,
 }: ContentProps) => {
   const { t } = useTranslation()
-  const Icon = DOC_FORM_ICON_WITH_BG[docForm] || General
+  const Icon = DOC_FORM_ICON_WITH_BG[chunkStructure] || General
 
   return (
     <>
@@ -44,7 +44,7 @@ const Content = ({
             {name}
           </div>
           <div className='system-2xs-medium-uppercase text-text-tertiary'>
-            {t(`dataset.chunkingMode.${DOC_FORM_TEXT[docForm]}`)}
+            {t(`dataset.chunkingMode.${DOC_FORM_TEXT[chunkStructure]}`)}
           </div>
         </div>
       </div>

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

@@ -25,7 +25,7 @@ const Details = ({
   const appIcon = React.useMemo(() => {
     if (!pipelineTemplateInfo)
       return { type: 'emoji', icon: '📙', background: '#FFF4ED' }
-    const iconInfo = pipelineTemplateInfo.icon_info
+    const iconInfo = pipelineTemplateInfo.icon
     return iconInfo.icon_type === 'image'
       ? { type: 'image', url: iconInfo.icon_url || '', fileId: iconInfo.icon || '' }
       : { type: 'icon', icon: iconInfo.icon || '', background: iconInfo.icon_background || '' }

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

@@ -9,7 +9,8 @@ import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
 import type { PipelineTemplate } from '@/models/pipeline'
-import { useUpdateTemplateInfo } from '@/service/use-pipeline'
+import { PipelineTemplateListQueryKeyPrefix, useUpdateTemplateInfo } from '@/service/use-pipeline'
+import { useInvalid } from '@/service/use-base'
 
 type EditPipelineInfoProps = {
   onClose: () => void
@@ -22,7 +23,7 @@ const EditPipelineInfo = ({
 }: EditPipelineInfoProps) => {
   const { t } = useTranslation()
   const [name, setName] = useState(pipeline.name)
-  const iconInfo = pipeline.icon_info
+  const iconInfo = pipeline.icon
   const [appIcon, setAppIcon] = useState<AppIconSelection>(
     iconInfo.icon_type === 'image'
       ? { type: 'image' as const, url: iconInfo.icon_url || '', fileId: iconInfo.icon || '' }
@@ -62,6 +63,7 @@ const EditPipelineInfo = ({
   }, [])
 
   const { mutateAsync: updatePipeline } = useUpdateTemplateInfo()
+  const invalidCustomizedTemplateList = useInvalid([...PipelineTemplateListQueryKeyPrefix, 'customized'])
 
   const handleSave = useCallback(async () => {
     if (!name) {
@@ -74,7 +76,7 @@ const EditPipelineInfo = ({
     const request = {
       template_id: pipeline.id,
       name,
-      icon_info: {
+      icon: {
         icon_type: appIcon.type,
         icon: appIcon.type === 'image' ? appIcon.fileId : appIcon.icon,
         icon_background: appIcon.type === 'image' ? undefined : appIcon.background,
@@ -83,11 +85,12 @@ const EditPipelineInfo = ({
       description,
     }
     await updatePipeline(request, {
-      onSettled: () => {
+      onSuccess: () => {
+        invalidCustomizedTemplateList()
         onClose()
       },
     })
-  }, [name, appIcon, description, pipeline.id, updatePipeline, onClose])
+  }, [name, appIcon, description, pipeline.id, updatePipeline, invalidCustomizedTemplateList, onClose])
 
   return (
     <div className='relative flex flex-col'>

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

@@ -139,8 +139,8 @@ const TemplateCard = ({
       <Content
         name={pipeline.name}
         description={pipeline.description}
-        iconInfo={pipeline.icon_info}
-        docForm={pipeline.doc_form}
+        iconInfo={pipeline.icon}
+        chunkStructure={pipeline.chunk_structure}
       />
       <Actions
         onApplyTemplate={openCreateModal}

web/models/pipeline.ts

@@ -19,10 +19,10 @@ export type PipelineTemplateListParams = {
 export type PipelineTemplate = {
   id: string
   name: string
-  icon_info: IconInfo
+  icon: IconInfo
   description: string
   position: number
-  doc_form: ChunkingMode
+  chunk_structure: ChunkingMode
 }
 
 export type PipelineTemplateListResponse = {
@@ -31,7 +31,7 @@ export type PipelineTemplateListResponse = {
 
 export type PipelineTemplateByIdResponse = {
   name: string
-  icon_info: IconInfo
+  icon: IconInfo
   description: string
   author: string // todo: TBD
   structure: string // todo: TBD
@@ -54,14 +54,14 @@ export type CreateFormData = {
 export type UpdateTemplateInfoRequest = {
   template_id: string
   name: string
-  icon_info: IconInfo
+  icon: IconInfo
   description: string
 }
 
 export type UpdateTemplateInfoResponse = {
   pipeline_id: string
   name: string
-  icon_info: IconInfo
+  icon: IconInfo
   description: string
   position: number
 }

web/service/use-pipeline.ts

@@ -32,10 +32,10 @@ import type { IconInfo } from '@/models/datasets'
 
 const NAME_SPACE = 'pipeline'
 
+export const PipelineTemplateListQueryKeyPrefix = [NAME_SPACE, 'template', 'list']
 export const usePipelineTemplateList = (params: PipelineTemplateListParams) => {
-  console.log('params', params)
   return useQuery<PipelineTemplateListResponse>({
-    queryKey: [NAME_SPACE, 'template', 'list', params.type],
+    queryKey: [...PipelineTemplateListQueryKeyPrefix, params.type],
     queryFn: () => {
       return get<PipelineTemplateListResponse>('/rag/pipeline/templates', { params })
     },