From d868c283c40d44cd5aee9729953729318e76b9ca Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 29 Oct 2024 19:21:52 +0800
Subject: [PATCH] feat: The order of the category operator form is messed up
 after refreshing the page #3088 (#3089)

### What problem does this PR solve?

feat: The order of the category operator form is messed up after
refreshing the page #3088

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):
---
 web/src/pages/flow/canvas/node/hooks.ts            | 14 ++++++++------
 .../form/categorize-form/dynamic-categorize.tsx    | 13 ++++++++++++-
 web/src/pages/flow/form/categorize-form/hooks.ts   |  9 ++++-----
 web/src/pages/flow/interface.ts                    |  1 +
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/web/src/pages/flow/canvas/node/hooks.ts b/web/src/pages/flow/canvas/node/hooks.ts
index c1bd80025c..a2bdf0586a 100644
--- a/web/src/pages/flow/canvas/node/hooks.ts
+++ b/web/src/pages/flow/canvas/node/hooks.ts
@@ -29,13 +29,15 @@ export const useBuildCategorizeHandlePositions = ({
       idx: number;
     }> = [];
 
-    Object.keys(categoryData).forEach((x, idx) => {
-      list.push({
-        text: x,
-        idx,
-        top: idx === 0 ? 98 : list[idx - 1].top + 8 + 26,
+    Object.keys(categoryData)
+      .sort((a, b) => categoryData[a].index - categoryData[b].index)
+      .forEach((x, idx) => {
+        list.push({
+          text: x,
+          idx,
+          top: idx === 0 ? 98 : list[idx - 1].top + 8 + 26,
+        });
       });
-    });
 
     return list;
   }, [categoryData]);
diff --git a/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx b/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
index 331071da76..dd8fd2c8ad 100644
--- a/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
+++ b/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
@@ -111,7 +111,15 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
       <Form.List name="items">
         {(fields, { add, remove }) => {
           const handleAdd = () => {
-            add({ name: humanId() });
+            const idx = form.getFieldValue([
+              'items',
+              fields.at(-1)?.name,
+              'index',
+            ]);
+            add({
+              name: humanId(),
+              index: fields.length === 0 ? 0 : idx + 1,
+            });
             if (nodeId) updateNodeInternals(nodeId);
           };
           return (
@@ -178,6 +186,9 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
                       )}
                     />
                   </Form.Item>
+                  <Form.Item hidden name={[field.name, 'index']}>
+                    <Input />
+                  </Form.Item>
                 </Card>
               ))}
 
diff --git a/web/src/pages/flow/form/categorize-form/hooks.ts b/web/src/pages/flow/form/categorize-form/hooks.ts
index 2de4c876c8..3a4af97ab8 100644
--- a/web/src/pages/flow/form/categorize-form/hooks.ts
+++ b/web/src/pages/flow/form/categorize-form/hooks.ts
@@ -24,15 +24,14 @@ const buildCategorizeListFromObject = (
 ) => {
   // Categorize's to field has two data sources, with edges as the data source.
   // Changes in the edge or to field need to be synchronized to the form field.
-  return Object.keys(categorizeItem).reduce<Array<ICategorizeItem>>(
-    (pre, cur) => {
+  return Object.keys(categorizeItem)
+    .reduce<Array<ICategorizeItem>>((pre, cur) => {
       // synchronize edge data to the to field
 
       pre.push({ name: cur, ...categorizeItem[cur] });
       return pre;
-    },
-    [],
-  );
+    }, [])
+    .sort((a, b) => a.index - b.index);
 };
 
 /**
diff --git a/web/src/pages/flow/interface.ts b/web/src/pages/flow/interface.ts
index dea2b405f1..880b44f545 100644
--- a/web/src/pages/flow/interface.ts
+++ b/web/src/pages/flow/interface.ts
@@ -43,6 +43,7 @@ export interface ICategorizeItem {
   description?: string;
   examples?: string;
   to?: string;
+  index: number;
 }
 
 export interface IGenerateParameter {