new components get unique name

packages/builder/src/builderStore/getNewComponentName.js

@@ -0,0 +1,34 @@
+import { walkProps } from "./storeUtils"
+import { get_capitalised_name } from "../helpers"
+
+export default function(component, state) {
+  const screen =
+    state.currentFrontEndType === "screen" ? state.currentPreviewItem : null
+  const page = state.pages[state.currentPageName]
+  const capitalised = get_capitalised_name(component)
+
+  const matchingComponents = []
+
+  if (screen)
+    walkProps(screen.props, c => {
+      if ((c._instanceName || "").startsWith(capitalised)) {
+        matchingComponents.push(c._instanceName)
+      }
+    })
+
+  walkProps(page.props, c => {
+    if ((c._instanceName || "").startsWith(capitalised)) {
+      matchingComponents.push(c._instanceName)
+    }
+  })
+
+  let index = 0
+  let name
+  while (!name) {
+    const tryName = `${capitalised} ${index}`
+    if (!matchingComponents.includes(tryName)) name = tryName
+    index++
+  }
+
+  return name
+}

packages/builder/src/builderStore/store/index.js

@@ -1,5 +1,5 @@
 import { values } from "lodash/fp"
-import { get_capitalised_name } from "../../helpers"
+import getNewComponentName from "../getNewComponentName"
 import { backendUiStore } from "builderStore"
 import * as backendStoreActions from "./backend"
 import { writable, get } from "svelte/store"
@@ -281,7 +281,7 @@ const addChildComponent = store => (componentToAdd, presetName) => {
     const presetProps = presetName ? component.presets[presetName] : {}
 
     const instanceId = get(backendUiStore).selectedDatabase._id
-    const instanceName = get_capitalised_name(componentToAdd)
+    const instanceName = getNewComponentName(componentToAdd, state)
 
     const newComponent = createProps(
       component,

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -2,6 +2,7 @@
   import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/store"
+  import getNewComponentName from "builderStore/getNewComponentName"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last, cloneDeep } from "lodash/fp"
   import UIkit from "uikit"
@@ -80,9 +81,7 @@
     store.update(s => {
       const parent = getParent(s.currentPreviewItem.props, component)
       const copiedComponent = cloneDeep(component)
-      walkProps(copiedComponent, p => {
-        p._id = uuid()
-      })
+      generateNewIdsForComponent(copiedComponent, s)
       parent._children = [...parent._children, copiedComponent]
       saveCurrentPreviewItem(s)
       s.currentComponentInfo = copiedComponent
@@ -105,9 +104,10 @@
     })
   }
 
-  const generateNewIdsForComponent = c =>
+  const generateNewIdsForComponent = (c, state) =>
     walkProps(c, p => {
       p._id = uuid()
+      p._instanceName = getNewComponentName(p._component, state)
     })
 
   const storeComponentForCopy = (cut = false) => {
@@ -129,7 +129,7 @@
       if (!s.componentToPaste) return s
 
       const componentToPaste = cloneDeep(s.componentToPaste)
-      generateNewIdsForComponent(componentToPaste)
+      generateNewIdsForComponent(componentToPaste, s)
       delete componentToPaste._cutId
 
       if (mode === "inside") {