fix: The name of the copy operator is displayed the same as before ##3265 (#3266)

### What problem does this PR solve?

fix: The name of the copy operator is displayed the same as before
##3265

### Type of change


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

web/src/pages/flow/store.ts

@@ -23,7 +23,12 @@ import { devtools } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { Operator, SwitchElseTo } from './constant';
 import { NodeData } from './interface';
-import { getNodeDragHandle, getOperatorIndex, isEdgeEqual } from './utils';
+import {
+  generateNodeNamesWithIncreasingIndex,
+  getNodeDragHandle,
+  getOperatorIndex,
+  isEdgeEqual,
+} from './utils';
 
 export type RFState = {
   nodes: Node<NodeData>[];
@@ -54,7 +59,7 @@ export type RFState = {
     target?: string | null,
   ) => void;
   deletePreviousEdgeOfClassificationNode: (connection: Connection) => void;
-  duplicateNode: (id: string) => void;
+  duplicateNode: (id: string, name: string) => void;
   deleteEdge: () => void;
   deleteEdgeById: (id: string) => void;
   deleteNodeById: (id: string) => void;
@@ -63,6 +68,7 @@ export type RFState = {
   updateMutableNodeFormItem: (id: string, field: string, value: any) => void;
   getOperatorTypeFromId: (id?: string | null) => string | undefined;
   updateNodeName: (id: string, name: string) => void;
+  generateNodeName: (name: string) => string;
   setClickedNodeId: (id?: string) => void;
 };
 
@@ -226,8 +232,8 @@ const useGraphStore = create<RFState>()(
           }
         }
       },
-      duplicateNode: (id: string) => {
-        const { getNode, addNode } = get();
+      duplicateNode: (id: string, name: string) => {
+        const { getNode, addNode, generateNodeName } = get();
         const node = getNode(id);
         const position = {
           x: (node?.position?.x || 0) + 30,
@@ -236,7 +242,7 @@ const useGraphStore = create<RFState>()(
 
         addNode({
           ...(node || {}),
-          data: node?.data,
+          data: { ...(node?.data ?? {}), name: generateNodeName(name) },
           selected: false,
           dragging: false,
           id: `${node?.data?.label}:${humanId()}`,
@@ -383,6 +389,11 @@ const useGraphStore = create<RFState>()(
       setClickedNodeId: (id?: string) => {
         set({ clickedNodeId: id });
       },
+      generateNodeName: (name: string) => {
+        const { nodes } = get();
+
+        return generateNodeNamesWithIncreasingIndex(name, nodes);
+      },
     })),
     { name: 'graph' },
   ),