Allow custom naming of components inside blocks for better ejection

packages/client/src/components/BlockComponent.svelte

@@ -8,6 +8,7 @@
   export let props
   export let styles
   export let context
+  export let name
   export let order = 0
   export let containsSlot = false
 
@@ -25,7 +26,7 @@
   $: instance = {
     _component: `@budibase/standard-components/${type}`,
     _id: id,
-    _instanceName: type[0].toUpperCase() + type.slice(1),
+    _instanceName: name || type[0].toUpperCase() + type.slice(1),
     _styles: {
       ...styles,
       normal: styles?.normal || {},

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

@@ -208,12 +208,14 @@
       </BlockComponent>
       {#if clickBehaviour === "details"}
         <BlockComponent
+          name="Details side panel"
           type="sidepanel"
           bind:id={detailsSidePanelId}
           context="details-side-panel"
           order={2}
         >
           <BlockComponent
+            name="Details form block"
             type="formblock"
             props={{
               dataSource,
@@ -230,12 +232,14 @@
       {/if}
       {#if showTitleButton && titleButtonClickBehaviour === "new"}
         <BlockComponent
+          name="New row side panel"
           type="sidepanel"
           bind:id={newRowSidePanelId}
           context="new-side-panel"
           order={3}
         >
           <BlockComponent
+            name="New row form block"
             type="formblock"
             props={{
               dataSource,