Improve makeComponentUniqueUtil and improve ejected table block structure

packages/builder/src/builderStore/componentUtils.js

@@ -182,13 +182,22 @@ export const makeComponentUnique = component => {
     return
   }
 
-  // Replace component ID
-  const oldId = component._id
-  const newId = Helpers.uuid()
-  let definition = JSON.stringify(component)
+  // Generate a full set of component ID replacements in this tree
+  const idReplacements = []
+  const generateIdReplacements = (component, replacements) => {
+    const oldId = component._id
+    const newId = Helpers.uuid()
+    replacements.push([oldId, newId])
+    component._children?.forEach(x => generateIdReplacements(x, replacements))
+  }
+  generateIdReplacements(component, idReplacements)
+  console.log(idReplacements)
 
   // Replace all instances of this ID in HBS bindings
-  definition = definition.replace(new RegExp(oldId, "g"), newId)
+  let definition = JSON.stringify(component)
+  idReplacements.forEach(([oldId, newId]) => {
+    definition = definition.replace(new RegExp(oldId, "g"), newId)
+  })
 
   // Replace all instances of this ID in JS bindings
   const bindings = findHBSBlocks(definition)
@@ -201,7 +210,9 @@ export const makeComponentUnique = component => {
     let js = decodeJSBinding(sanitizedBinding)
     if (js != null) {
       // Replace ID inside JS binding
-      js = js.replace(new RegExp(oldId, "g"), newId)
+      idReplacements.forEach(([oldId, newId]) => {
+        js = js.replace(new RegExp(oldId, "g"), newId)
+      })
 
       // Create new valid JS binding
       let newBinding = encodeJSBinding(js)
@@ -218,9 +229,5 @@ export const makeComponentUnique = component => {
   })
 
   // Recurse on all children
-  component = JSON.parse(definition)
-  return {
-    ...component,
-    _children: component._children?.map(makeComponentUnique),
-  }
+  return JSON.parse(definition)
 }

packages/client/src/components/app/SidePanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getContext, onMount } from "svelte"
+  import { getContext } from "svelte"
 
   const component = getContext("component")
   const { styleable, sidePanelStore, builderStore } = getContext("sdk")

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import { generate } from "shortid"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
@@ -26,7 +27,7 @@
   export let onClickTitleButton
 
   const { fetchDatasourceSchema } = getContext("sdk")
-  const stateKey = `${Math.random()}-id`
+  const stateKey = `ID_${generate()}`
 
   let formId
   let dataProviderId
@@ -50,9 +51,7 @@
               key: stateKey,
               type: "set",
               persist: false,
-              value: `{{ ${safe("eventContext")}.${safe("row")}.${safe(
-                "_id"
-              )} }}`,
+              value: `{{ ${safe("eventContext")}.${safe("row")}._id }}`,
             },
           },
           {