fix(pipeline dialog): config reset between tabs switching (#1597)

web/README.md

@@ -1,3 +1,3 @@
 # Debug LangBot Frontend
 
-Please refer to the [Development Guide](https://docs.langbot.app/en/develop/dev-config.html) for more information.
+Please refer to the [Development Guide](https://docs.langbot.app/en/develop/dev-config.html) for more information.

web/src/app/home/pipelines/PipelineDetailDialog.tsx

@@ -18,7 +18,6 @@ import {
 } from '@/components/ui/sidebar';
 import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent';
 import DebugDialog from './components/debug-dialog/DebugDialog';
-import { PipelineFormEntity } from '@/app/infra/entities/pipeline';
 
 interface PipelineDialogProps {
   open: boolean;
@@ -26,7 +25,6 @@ interface PipelineDialogProps {
   pipelineId?: string;
   isEditMode?: boolean;
   isDefaultPipeline?: boolean;
-  initValues?: PipelineFormEntity;
   onFinish: () => void;
   onNewPipelineCreated?: (pipelineId: string) => void;
   onDeletePipeline: () => void;
@@ -41,7 +39,6 @@ export default function PipelineDialog({
   pipelineId: propPipelineId,
   isEditMode = false,
   isDefaultPipeline = false,
-  initValues,
   onFinish,
   onNewPipelineCreated,
   onDeletePipeline,
@@ -119,7 +116,6 @@ export default function PipelineDialog({
             </DialogHeader>
             <div className="flex-1 overflow-y-auto px-6 pb-6">
               <PipelineFormComponent
-                initValues={initValues}
                 isDefaultPipeline={isDefaultPipeline}
                 onFinish={handleFinish}
                 onNewPipelineCreated={handleNewPipelineCreated}
@@ -184,7 +180,6 @@ export default function PipelineDialog({
             >
               {currentMode === 'config' && (
                 <PipelineFormComponent
-                  initValues={initValues}
                   isDefaultPipeline={isDefaultPipeline}
                   onFinish={handleFinish}
                   onNewPipelineCreated={handleNewPipelineCreated}

web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { Pipeline } from '@/app/infra/entities/api';
+import { GetPipelineResponseData, Pipeline } from '@/app/infra/entities/api';
 import {
-  PipelineFormEntity,
   PipelineConfigTab,
   PipelineConfigStage,
 } from '@/app/infra/entities/pipeline';
@@ -34,7 +33,6 @@ import { useTranslation } from 'react-i18next';
 import { i18nObj } from '@/i18n/I18nProvider';
 
 export default function PipelineFormComponent({
-  initValues,
   isDefaultPipeline,
   onFinish,
   onNewPipelineCreated,
@@ -49,8 +47,6 @@ export default function PipelineFormComponent({
   isEditMode: boolean;
   disableForm: boolean;
   showButtons?: boolean;
-  // 这里的写法很不安全不规范，未来流水线需要重新整理
-  initValues?: PipelineFormEntity;
   onFinish: () => void;
   onNewPipelineCreated: (pipelineId: string) => void;
   onDeletePipeline: () => void;
@@ -132,13 +128,26 @@ export default function PipelineFormComponent({
         }
       }
     });
+
+    if (isEditMode) {
+      httpClient
+        .getPipeline(pipelineId || '')
+        .then((resp: GetPipelineResponseData) => {
+          form.reset({
+            basic: {
+              name: resp.pipeline.name,
+              description: resp.pipeline.description,
+            },
+            ai: resp.pipeline.config.ai,
+            trigger: resp.pipeline.config.trigger,
+            safety: resp.pipeline.config.safety,
+            output: resp.pipeline.config.output,
+          });
+        });
+    }
   }, []);
 
   useEffect(() => {
-    if (initValues) {
-      form.reset(initValues);
-    }
-
     if (!isEditMode) {
       form.reset({
         basic: {
@@ -147,7 +156,7 @@ export default function PipelineFormComponent({
         },
       });
     }
-  }, [initValues, form, isEditMode]);
+  }, [form, isEditMode]);
 
   function handleFormSubmit(values: FormValues) {
     console.log('handleFormSubmit', values);

web/src/app/home/pipelines/page.tsx

@@ -4,7 +4,6 @@ import CreateCardComponent from '@/app/infra/basic-component/create-card-compone
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO';
 import PipelineCard from '@/app/home/pipelines/components/pipeline-card/PipelineCard';
-import { PipelineFormEntity } from '@/app/infra/entities/pipeline';
 import styles from './pipelineConfig.module.css';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -23,14 +22,7 @@ export default function PluginConfigPage() {
   const [isEditForm, setIsEditForm] = useState(false);
   const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([]);
   const [selectedPipelineId, setSelectedPipelineId] = useState('');
-  const [selectedPipelineFormValue, setSelectedPipelineFormValue] =
-    useState<PipelineFormEntity>({
-      basic: {},
-      ai: {},
-      trigger: {},
-      safety: {},
-      output: {},
-    });
+
   const [selectedPipelineIsDefault, setSelectedPipelineIsDefault] =
     useState(false);
   const [sortByValue, setSortByValue] = useState<string>('created_at');
@@ -81,39 +73,16 @@ export default function PluginConfigPage() {
       });
   }
 
-  function getSelectedPipelineForm(id?: string) {
-    httpClient.getPipeline(id ?? selectedPipelineId).then((value) => {
-      setSelectedPipelineFormValue({
-        ai: value.pipeline.config.ai,
-        basic: {
-          description: value.pipeline.description,
-          name: value.pipeline.name,
-        },
-        output: value.pipeline.config.output,
-        safety: value.pipeline.config.safety,
-        trigger: value.pipeline.config.trigger,
-      });
-      setSelectedPipelineIsDefault(value.pipeline.is_default ?? false);
-    });
-  }
-
   const handlePipelineClick = (pipelineId: string) => {
     setSelectedPipelineId(pipelineId);
     setIsEditForm(true);
     setDialogOpen(true);
-    getSelectedPipelineForm(pipelineId);
   };
 
   const handleCreateNew = () => {
     setIsEditForm(false);
     setSelectedPipelineId('');
-    setSelectedPipelineFormValue({
-      basic: {},
-      ai: {},
-      trigger: {},
-      safety: {},
-      output: {},
-    });
+
     setSelectedPipelineIsDefault(false);
     setDialogOpen(true);
   };
@@ -133,7 +102,6 @@ export default function PluginConfigPage() {
         pipelineId={selectedPipelineId || undefined}
         isEditMode={isEditForm}
         isDefaultPipeline={selectedPipelineIsDefault}
-        initValues={selectedPipelineFormValue}
         onFinish={() => {
           getPipelines();
         }}
@@ -142,7 +110,6 @@ export default function PluginConfigPage() {
           setSelectedPipelineId(pipelineId);
           setIsEditForm(true);
           setDialogOpen(true);
-          getSelectedPipelineForm(pipelineId);
         }}
         onDeletePipeline={() => {
           getPipelines();