From 42e662ad9fa0a2ccff7ab71ac4c8b4d735a3343e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Grabarz?= <frizi09@gmail.com>
Date: Thu, 5 Sep 2024 14:27:18 +0200
Subject: [PATCH] Prevent node name collisions when drag-and-dropping multiple
 files (#10979)

# Important Notes
Fixed a few warnings in dashboard caused by missing or misplaced key attributes.

(cherry picked from commit cab161a602bbee242cc3e116589e7ef72494a0c3)
---
 CHANGELOG.md                                  |  2 ++
 .../src/components/Devtools/EnsoDevtools.tsx  |  2 +-
 .../src/pages/dashboard/Dashboard.tsx         |  1 -
 app/gui2/src/components/GraphEditor.vue       |  6 +++---
 app/gui2/src/composables/nodeCreation.ts      | 19 +++++++++++++++----
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed1e3760cd4a..b3c96e8d40b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,12 +12,14 @@
 - [Fixed issue where switching edited widget with <kbd>tab</kbd> key did not
   updated actual code][10857]
 - [Added fullscreen modes to documentation editor and code editor][10876]
+- [Fixed issue with node name assignment when uploading multiple files.][10979]
 
 [10774]: https://github.com/enso-org/enso/pull/10774
 [10814]: https://github.com/enso-org/enso/pull/10814
 [10824]: https://github.com/enso-org/enso/pull/10824
 [10857]: https://github.com/enso-org/enso/pull/10857
 [10876]: https://github.com/enso-org/enso/pull/10876
+[10979]: https://github.com/enso-org/enso/pull/10979
 
 #### Enso Standard Library
 
diff --git a/app/dashboard/src/components/Devtools/EnsoDevtools.tsx b/app/dashboard/src/components/Devtools/EnsoDevtools.tsx
index 3b1e74fdb1e2..fe48ca405c7b 100644
--- a/app/dashboard/src/components/Devtools/EnsoDevtools.tsx
+++ b/app/dashboard/src/components/Devtools/EnsoDevtools.tsx
@@ -163,7 +163,7 @@ export function EnsoDevtools() {
           </Text>
 
           {unsafeEntries(LocalStorage.keyMetadata).map(([key]) => (
-            <div className="flex gap-1">
+            <div className="flex gap-1" key={key}>
               <ButtonGroup className="grow-0">
                 <Button
                   size="small"
diff --git a/app/dashboard/src/pages/dashboard/Dashboard.tsx b/app/dashboard/src/pages/dashboard/Dashboard.tsx
index 24865815a3f5..30a1595dcf66 100644
--- a/app/dashboard/src/pages/dashboard/Dashboard.tsx
+++ b/app/dashboard/src/pages/dashboard/Dashboard.tsx
@@ -333,7 +333,6 @@ function DashboardInner(props: DashboardProps) {
                 className="flex min-h-0 grow [&[data-inert]]:hidden"
               >
                 <Editor
-                  key={project.id}
                   hidden={page !== project.id}
                   ydocUrl={ydocUrl}
                   project={project}
diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index 26a210eda155..fcc823419e1e 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -240,7 +240,7 @@ const { place: nodePlacement, collapse: collapsedNodePlacement } = usePlacement(
   toRef(graphNavigator, 'viewport'),
 )
 
-const { createNode, createNodes, placeNode } = provideNodeCreation(
+const { scheduleCreateNode, createNodes, placeNode } = provideNodeCreation(
   graphStore,
   toRef(graphNavigator, 'viewport'),
   toRef(graphNavigator, 'sceneMousePos'),
@@ -468,7 +468,7 @@ function commitComponentBrowser(
     graphStore.setNodeContent(graphStore.editedNodeInfo.id, content, requiredImports)
   } else if (content != '') {
     // We finish creating a new node.
-    createNode({
+    scheduleCreateNode({
       placement: { type: 'fixed', position: componentBrowserNodePosition.value },
       expression: content,
       type,
@@ -630,7 +630,7 @@ async function handleFileDrop(event: DragEvent) {
       )
       const uploadResult = await uploader.upload()
       if (uploadResult.ok) {
-        createNode({
+        scheduleCreateNode({
           placement: { type: 'mouseEvent', position: pos },
           expression: uploadedExpression(uploadResult.value),
         })
diff --git a/app/gui2/src/composables/nodeCreation.ts b/app/gui2/src/composables/nodeCreation.ts
index b9cbcb4b32a9..e53c3349b83e 100644
--- a/app/gui2/src/composables/nodeCreation.ts
+++ b/app/gui2/src/composables/nodeCreation.ts
@@ -17,7 +17,7 @@ import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { qnLastSegment, tryQualifiedName } from '@/util/qualifiedName'
 import type { ToValue } from '@/util/reactivity'
-import { toValue } from 'vue'
+import { nextTick, toValue } from 'vue'
 import { assert, assertNever } from 'ydoc-shared/util/assert'
 import { mustExtend } from 'ydoc-shared/util/types'
 
@@ -173,8 +173,19 @@ export function useNodeCreation(
     }
   }
 
-  function createNode(options: NodeCreationOptions) {
-    createNodes([options])
+  let delayedNodesToCreate: NodeCreationOptions[] = []
+
+  function scheduleCreateNode(options: NodeCreationOptions) {
+    delayedNodesToCreate.push(options)
+    // Delay node creation to next tick, batch multiple synchronous createNode calls together
+    // to avoid node name collisions.
+    if (delayedNodesToCreate.length === 1) {
+      nextTick(() => {
+        const toCreate = delayedNodesToCreate
+        delayedNodesToCreate = []
+        createNodes(toCreate)
+      })
+    }
   }
 
   function newAssignmentNode(
@@ -208,7 +219,7 @@ export function useNodeCreation(
     return ident
   }
 
-  return { createNode, createNodes, placeNode }
+  return { scheduleCreateNode, createNodes, placeNode }
 }
 
 const operatorCodeToName: Record<string, string> = {