Feat: Creating a data flow from a template page #9869 (#10573)

### What problem does this PR solve?

Feat: Creating a data flow from a template page #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/interfaces/database/flow.ts

@@ -46,6 +46,7 @@ export declare interface IFlow {
 export interface IFlowTemplate {
   avatar: string;
   canvas_type: string;
+  canvas_category?: string;
   create_date: string;
   create_time: number;
   description: {

web/src/pages/agents/agent-templates.tsx

@@ -12,6 +12,7 @@ import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentTemplates, useSetAgent } from '@/hooks/use-agent-request';
 import { IFlowTemplate } from '@/interfaces/database/flow';
 
+import { AgentCategory } from '@/constants/agent';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateAgentDialog } from './create-agent-dialog';
@@ -48,27 +49,36 @@ export default function AgentTemplates() {
     [showCreatingModal],
   );
 
-  const { navigateToAgent } = useNavigatePage();
+  const { navigateToAgent, navigateToDataflow } = useNavigatePage();
 
   const handleOk = useCallback(
     async (payload: any) => {
       let dsl = template?.dsl;
+      const canvasCategory = template?.canvas_category;
+
       const ret = await setAgent({
         title: payload.name,
         dsl,
         avatar: template?.avatar,
+        canvas_category: canvasCategory,
       });
 
       if (ret?.code === 0) {
         hideCreatingModal();
+        if (canvasCategory === AgentCategory.DataflowCanvas) {
+          navigateToDataflow(ret.data.id)();
+        } else {
           navigateToAgent(ret.data.id)();
         }
+      }
     },
     [
       hideCreatingModal,
       navigateToAgent,
+      navigateToDataflow,
       setAgent,
       template?.avatar,
+      template?.canvas_category,
       template?.dsl,
     ],
   );
@@ -128,6 +138,7 @@ export default function AgentTemplates() {
               visible={creatingVisible}
               hideModal={hideCreatingModal}
               onOk={handleOk}
+              canvasCategory={template?.canvas_category}
             ></CreateAgentDialog>
           )}
         </main>

web/src/pages/agents/template-sidebar.tsx

@@ -17,7 +17,7 @@ export enum MenuItemKey {
   CustomerSupport = 'Customer Support',
   Marketing = 'Marketing',
   ConsumerApp = 'Consumer App',
-  Pipeline = 'Pipeline',
+  Pipeline = 'Ingestion Pipeline',
   Other = 'Other',
 }
 const menuItems = [