From ce24339e22fba3c63419598584d0838b6be537c6 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 17 Jul 2023 16:48:57 +0100 Subject: [PATCH 1/5] Update how blocks key child components for reference when ejecting, and ensure search fields in table blocks are keyed properly --- packages/client/src/components/Block.svelte | 21 +++++++++++-------- .../src/components/BlockComponent.svelte | 10 +++++---- .../components/app/blocks/TableBlock.svelte | 2 +- 3 files changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte index b72ff81b49..37af28b4dc 100644 --- a/packages/client/src/components/Block.svelte +++ b/packages/client/src/components/Block.svelte @@ -8,27 +8,28 @@ let structureLookupMap = {} - const registerBlockComponent = (id, order, parentId, instance) => { + const registerBlockComponent = (id, parentId, order, instance) => { // Ensure child map exists if (!structureLookupMap[parentId]) { structureLookupMap[parentId] = {} } // Add this instance in this order, overwriting any existing instance in // this order in case of repeaters - structureLookupMap[parentId][order] = instance + structureLookupMap[parentId][id] = { order, instance } } - const unregisterBlockComponent = (order, parentId) => { + const unregisterBlockComponent = (id, parentId) => { // Ensure child map exists if (!structureLookupMap[parentId]) { return } - delete structureLookupMap[parentId][order] + delete structureLookupMap[parentId][id] } const eject = () => { // Start the new structure with the root component - let definition = structureLookupMap[$component.id][0] + let definition = Object.values(structureLookupMap[$component.id])[0] + .instance // Copy styles from block to root component definition._styles = { @@ -49,10 +50,12 @@ const attachChildren = (rootComponent, map) => { // Transform map into children array let id = rootComponent._id - const children = Object.entries(map[id] || {}).map(([order, instance]) => ({ - order, - instance, - })) + const children = Object.values(map[id] || {}).map( + ({ order, instance }) => ({ + order, + instance, + }) + ) if (!children.length) { return } diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte index 4f720e2931..24d9b4dee4 100644 --- a/packages/client/src/components/BlockComponent.svelte +++ b/packages/client/src/components/BlockComponent.svelte @@ -23,6 +23,8 @@ // Create a fake component instance so that we can use the core Component // to render this part of the block, taking advantage of binding enrichment $: id = `${block.id}-${context ?? rand}` + $: parentId = $component?.id + $: inBuilder = $builderStore.inBuilder $: instance = { _component: `@budibase/standard-components/${type}`, _id: id, @@ -38,14 +40,14 @@ // Register this block component if we're inside the builder so it can be // ejected later $: { - if ($builderStore.inBuilder) { - block.registerComponent(id, order ?? 0, $component?.id, instance) + if (inBuilder) { + block.registerComponent(id, parentId, order ?? 0, instance) } } onDestroy(() => { - if ($builderStore.inBuilder) { - block.unregisterComponent(order ?? 0, $component?.id) + if (inBuilder) { + block.unregisterComponent(id, parentId) } }) diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte index e45b53880d..eb42d85f45 100644 --- a/packages/client/src/components/app/blocks/TableBlock.svelte +++ b/packages/client/src/components/app/blocks/TableBlock.svelte @@ -169,7 +169,7 @@ order={1} > {#if enrichedSearchColumns?.length} - {#each enrichedSearchColumns as column, idx} + {#each enrichedSearchColumns as column, idx (column.name)} Date: Mon, 17 Jul 2023 16:49:39 +0100 Subject: [PATCH 2/5] Ensure search fields in cards block are keyed properly --- packages/client/src/components/app/blocks/CardsBlock.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte index bbe54867ee..3e48247f92 100644 --- a/packages/client/src/components/app/blocks/CardsBlock.svelte +++ b/packages/client/src/components/app/blocks/CardsBlock.svelte @@ -126,7 +126,7 @@ order={1} > {#if enrichedSearchColumns?.length} - {#each enrichedSearchColumns as column, idx} + {#each enrichedSearchColumns as column, idx (column.name)} Date: Mon, 17 Jul 2023 16:56:48 +0100 Subject: [PATCH 3/5] Increase safety when ejecting blocks --- packages/client/src/components/Block.svelte | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte index 37af28b4dc..65c2b38197 100644 --- a/packages/client/src/components/Block.svelte +++ b/packages/client/src/components/Block.svelte @@ -28,8 +28,11 @@ const eject = () => { // Start the new structure with the root component - let definition = Object.values(structureLookupMap[$component.id])[0] - .instance + const rootMap = structureLookupMap[$component.id] || {} + let definition = { ...Object.values(rootMap)[0]?.instance } + if (!definition) { + return + } // Copy styles from block to root component definition._styles = { From 4425c5992933c01f75e6b9c4d5f83b8c4abf19c9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 17 Jul 2023 16:57:56 +0100 Subject: [PATCH 4/5] Remove pointless shallow clone --- packages/client/src/components/Block.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte index 65c2b38197..26be3fd4bf 100644 --- a/packages/client/src/components/Block.svelte +++ b/packages/client/src/components/Block.svelte @@ -29,7 +29,7 @@ const eject = () => { // Start the new structure with the root component const rootMap = structureLookupMap[$component.id] || {} - let definition = { ...Object.values(rootMap)[0]?.instance } + let definition = Object.values(rootMap)[0]?.instance if (!definition) { return } From 92e4422e893cea97f22819a7e1f97f0eae83cb76 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 17 Jul 2023 16:59:40 +0100 Subject: [PATCH 5/5] Remove pointless map --- packages/client/src/components/Block.svelte | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte index 26be3fd4bf..a739065015 100644 --- a/packages/client/src/components/Block.svelte +++ b/packages/client/src/components/Block.svelte @@ -53,12 +53,7 @@ const attachChildren = (rootComponent, map) => { // Transform map into children array let id = rootComponent._id - const children = Object.values(map[id] || {}).map( - ({ order, instance }) => ({ - order, - instance, - }) - ) + const children = Object.values(map[id] || {}) if (!children.length) { return }