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.

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
 

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"

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}

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),
         })

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> = {