From eb3f7ba8104980fcecfa1e8bbe2283a6bbfa3ad1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 23 Aug 2022 15:53:28 +0100
Subject: [PATCH] Update block ejection with latest codebase

---
 .../src/builderStore/store/frontend.js        | 22 +++++++++++++------
 packages/client/src/components/Block.svelte   |  3 ++-
 .../src/components/BlockComponent.svelte      | 12 ++++++++--
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index fb5b9f6c54..5aecd4aff7 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -895,13 +895,21 @@ export const getFrontendStore = () => {
           component[name] = value
         })
       },
-      ejectBlock: async (id, definition) => {
-        // const asset = get(currentAsset)
-        // let parent = findComponentParent(asset.props, id)
-        // const childIndex = parent._children.findIndex(x => x._id === id)
-        // parent._children[childIndex] = definition
-        // await store.actions.preview.saveSelected()
-        // await store.actions.components.select(definition)
+      ejectBlock: async (componentId, ejectedDefinition) => {
+        await store.actions.screens.patch(screen => {
+          const parent = findComponentParent(screen.props, componentId)
+
+          // Sanity check parent is found
+          if (!parent?._children?.length) {
+            return false
+          }
+
+          // Replace block with ejected definition
+          const childIndex = parent._children.findIndex(
+            child => child._id === componentId
+          )
+          parent._children[childIndex] = ejectedDefinition
+        })
       },
     },
     links: {
diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index 5605ebb711..10da66dc39 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -6,6 +6,7 @@
   const component = getContext("component")
 
   let structureLookupMap = {}
+
   const registerBlockComponent = (id, order, parentId, instance) => {
     // Ensure child array exists
     if (!structureLookupMap[parentId]) {
@@ -13,7 +14,7 @@
     }
     // Remove existing instance of this component in case props changed
     structureLookupMap[parentId] = structureLookupMap[parentId].filter(
-      x => x.instance._id !== id
+      blockComponent => blockComponent.instance._id !== id
     )
     // Add new instance of this component
     structureLookupMap[parentId].push({ order, instance })
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index 75ad7b57fe..7076aad514 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import { generate } from "shortid"
+  import { builderStore } from "../stores/builder.js"
   import Component from "components/Component.svelte"
 
   export let type
@@ -23,7 +24,7 @@
   $: instance = {
     _component: `@budibase/standard-components/${type}`,
     _id: id,
-    _instanceName: type,
+    _instanceName: type[0].toUpperCase() + type.slice(1),
     _styles: {
       normal: {
         ...styles,
@@ -31,7 +32,14 @@
     },
     ...props,
   }
-  $: block.registerComponent(id, order, $component?.id, instance)
+
+  // Register this block component if we're inside the builder so it can be
+  // ejected later
+  $: {
+    if ($builderStore.inBuilder) {
+      block.registerComponent(id, order, $component?.id, instance)
+    }
+  }
 </script>
 
 <Component {instance} isBlock>