From a83ce95f8eca2a92f60ce33dda0dee417c6c4f6e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 17 Nov 2022 14:49:13 +0000
Subject: [PATCH] Improve makeComponentUniqueUtil and improve ejected table
 block structure

---
 .../src/builderStore/componentUtils.js        | 29 ++++++++++++-------
 .../src/components/app/SidePanel.svelte       |  2 +-
 .../components/app/blocks/TableBlock.svelte   |  7 ++---
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js
index 54997df38f..22f47d829c 100644
--- a/packages/builder/src/builderStore/componentUtils.js
+++ b/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)
 }
diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte
index ffe39a24e3..e1b515c5ac 100644
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/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")
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index b825ec97b1..dc20171366 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/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 }}`,
             },
           },
           {