From 43b5c120b5225f78cfb68febe4572a177dafed89 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 9 Nov 2022 10:28:15 +0000
Subject: [PATCH 1/6] Refactor form block to use a different structure
 depending on type, and fix issue with bindings breaking and forms not
 appearing

---
 .../components/app/blocks/FormBlock.svelte    | 242 ------------------
 .../app/blocks/form/FormBlock.svelte          | 101 ++++++++
 .../app/blocks/form/InnerFormBlock.svelte     | 192 ++++++++++++++
 .../client/src/components/app/blocks/index.js |   2 +-
 4 files changed, 294 insertions(+), 243 deletions(-)
 delete mode 100644 packages/client/src/components/app/blocks/FormBlock.svelte
 create mode 100644 packages/client/src/components/app/blocks/form/FormBlock.svelte
 create mode 100644 packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

diff --git a/packages/client/src/components/app/blocks/FormBlock.svelte b/packages/client/src/components/app/blocks/FormBlock.svelte
deleted file mode 100644
index 3311ddd7bb..0000000000
--- a/packages/client/src/components/app/blocks/FormBlock.svelte
+++ /dev/null
@@ -1,242 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import BlockComponent from "../../BlockComponent.svelte"
-  import Block from "../../Block.svelte"
-  import Placeholder from "../Placeholder.svelte"
-  import { makePropSafe as safe } from "@budibase/string-templates"
-
-  export let actionType
-  export let dataSource
-  export let size
-  export let disabled
-  export let fields
-  export let labelPosition
-  export let title
-  export let showSaveButton
-  export let showDeleteButton
-  export let rowId
-  export let actionUrl
-
-  const { fetchDatasourceSchema } = getContext("sdk")
-  const FieldTypeToComponentMap = {
-    string: "stringfield",
-    number: "numberfield",
-    options: "optionsfield",
-    array: "multifieldselect",
-    boolean: "booleanfield",
-    longform: "longformfield",
-    datetime: "datetimefield",
-    attachment: "attachmentfield",
-    link: "relationshipfield",
-    json: "jsonfield",
-    barcodeqr: "codescanner",
-  }
-
-  let schema
-  let formId
-  let providerId
-  let repeaterId
-
-  $: fetchSchema(dataSource)
-  $: onSave = [
-    {
-      "##eventHandlerType": "Save Row",
-      parameters: {
-        providerId: formId,
-        tableId: dataSource?.tableId,
-      },
-    },
-    {
-      "##eventHandlerType": "Close Screen Modal",
-    },
-    {
-      "##eventHandlerType": "Navigate To",
-      parameters: {
-        url: actionUrl,
-      },
-    },
-  ]
-  $: onDelete = [
-    {
-      "##eventHandlerType": "Delete Row",
-      parameters: {
-        confirm: true,
-        tableId: dataSource?.tableId,
-        rowId: `{{ ${safe(repeaterId)}.${safe("_id")} }}`,
-        revId: `{{ ${safe(repeaterId)}.${safe("_rev")} }}`,
-      },
-    },
-    {
-      "##eventHandlerType": "Close Screen Modal",
-    },
-    {
-      "##eventHandlerType": "Navigate To",
-      parameters: {
-        url: actionUrl,
-      },
-    },
-  ]
-  $: filter = [
-    {
-      field: "_id",
-      operator: "equal",
-      type: "string",
-      value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
-      valueType: "Binding",
-    },
-  ]
-
-  $: dataProvider = `{{ literal ${safe(providerId)} }}`
-  $: renderDeleteButton = showDeleteButton && actionType === "Update"
-  $: renderSaveButton = showSaveButton && actionType !== "View"
-  $: renderButtons = renderDeleteButton || renderSaveButton
-  $: renderHeader = renderButtons || title
-
-  const fetchSchema = async () => {
-    schema = (await fetchDatasourceSchema(dataSource)) || {}
-  }
-
-  const getComponentForField = field => {
-    if (!field || !schema?.[field]) {
-      return null
-    }
-    const type = schema[field].type
-    return FieldTypeToComponentMap[type]
-  }
-</script>
-
-<Block>
-  {#if fields?.length}
-    <BlockComponent
-      type="dataprovider"
-      context="provider"
-      bind:id={providerId}
-      props={{
-        dataSource,
-        filter,
-        limit: 1,
-        paginate: false,
-      }}
-    >
-      <BlockComponent
-        type="repeater"
-        context="repeater"
-        bind:id={repeaterId}
-        props={{
-          dataProvider,
-          noRowsMessage: "We couldn't find a row to display",
-          direction: "column",
-          hAlign: "center",
-        }}
-      >
-        <BlockComponent
-          type="form"
-          props={{
-            actionType: actionType === "Create" ? "Create" : "Update",
-            dataSource,
-            size,
-            disabled: disabled || actionType === "View",
-          }}
-          styles={{
-            normal: {
-              width: "600px",
-            },
-          }}
-          context="form"
-          bind:id={formId}
-        >
-          <BlockComponent
-            type="container"
-            props={{
-              direction: "column",
-              hAlign: "stretch",
-              vAlign: "top",
-              gap: "M",
-            }}
-          >
-            {#if renderHeader}
-              <BlockComponent
-                type="container"
-                props={{
-                  direction: "row",
-                  hAlign: "stretch",
-                  vAlign: "center",
-                  gap: "M",
-                  wrap: true,
-                }}
-                order={0}
-              >
-                <BlockComponent
-                  type="heading"
-                  props={{ text: title || "" }}
-                  order={0}
-                />
-                {#if renderButtons}
-                  <BlockComponent
-                    type="container"
-                    props={{
-                      direction: "row",
-                      hAlign: "stretch",
-                      vAlign: "center",
-                      gap: "M",
-                      wrap: true,
-                    }}
-                    order={1}
-                  >
-                    {#if renderDeleteButton}
-                      <BlockComponent
-                        type="button"
-                        props={{
-                          text: "Delete",
-                          onClick: onDelete,
-                          quiet: true,
-                          type: "secondary",
-                        }}
-                        order={0}
-                      />
-                    {/if}
-                    {#if renderSaveButton}
-                      <BlockComponent
-                        type="button"
-                        props={{
-                          text: "Save",
-                          onClick: onSave,
-                          type: "cta",
-                        }}
-                        order={1}
-                      />
-                    {/if}
-                  </BlockComponent>
-                {/if}
-              </BlockComponent>
-            {/if}
-            <BlockComponent
-              type="fieldgroup"
-              props={{ labelPosition }}
-              order={1}
-            >
-              {#each fields as field, idx}
-                {#if getComponentForField(field)}
-                  <BlockComponent
-                    type={getComponentForField(field)}
-                    props={{
-                      field,
-                      label: field,
-                      placeholder: field,
-                      disabled,
-                    }}
-                    order={idx}
-                  />
-                {/if}
-              {/each}
-            </BlockComponent>
-          </BlockComponent>
-        </BlockComponent>
-      </BlockComponent>
-    </BlockComponent>
-  {:else}
-    <Placeholder
-      text="Choose your table and add some fields to your form to get started"
-    />
-  {/if}
-</Block>
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
new file mode 100644
index 0000000000..9ec587519f
--- /dev/null
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -0,0 +1,101 @@
+<script>
+  import { getContext } from "svelte"
+  import BlockComponent from "components/BlockComponent.svelte"
+  import Block from "components/Block.svelte"
+  import { makePropSafe as safe } from "@budibase/string-templates"
+  import InnerFormBlock from "./InnerFormBlock.svelte"
+
+  export let actionType
+  export let dataSource
+  export let size
+  export let disabled
+  export let fields
+  export let labelPosition
+  export let title
+  export let showSaveButton
+  export let showDeleteButton
+  export let rowId
+  export let actionUrl
+
+  const { fetchDatasourceSchema } = getContext("sdk")
+
+  let schema
+  let providerId
+  let repeaterId
+
+  $: fetchSchema(dataSource)
+  $: dataProvider = `{{ literal ${safe(providerId)} }}`
+  $: filter = [
+    {
+      field: "_id",
+      operator: "equal",
+      type: "string",
+      value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
+      valueType: "Binding",
+    },
+  ]
+  // We could simply spread $$props into the inner form and append our
+  // additions, but that would create svelte warnings about unused props and
+  // make maintenance in future more confusing as we typically always have a
+  // proper mapping of schema settings to component exports, without having to
+  // search multiple files
+  $: innerProps = {
+    dataSource,
+    actionUrl,
+    actionType,
+    size,
+    disabled,
+    fields,
+    labelPosition,
+    title,
+    showSaveButton,
+    showDeleteButton,
+    schema,
+    repeaterId,
+  }
+
+  const fetchSchema = async () => {
+    schema = (await fetchDatasourceSchema(dataSource)) || {}
+  }
+</script>
+
+<Block>
+  {#if actionType === "Create"}
+    <BlockComponent
+      type="container"
+      props={{
+        direction: "column",
+        hAlign: "center",
+        vAlign: "stretch",
+      }}
+    >
+      <InnerFormBlock {...innerProps} />
+    </BlockComponent>
+  {:else}
+    <BlockComponent
+      type="dataprovider"
+      context="provider"
+      bind:id={providerId}
+      props={{
+        dataSource,
+        filter,
+        limit: 1,
+        paginate: false,
+      }}
+    >
+      <BlockComponent
+        type="repeater"
+        context="repeater"
+        bind:id={repeaterId}
+        props={{
+          dataProvider,
+          noRowsMessage: "We couldn't find a row to display",
+          direction: "column",
+          hAlign: "center",
+        }}
+      >
+        <InnerFormBlock {...innerProps} />
+      </BlockComponent>
+    </BlockComponent>
+  {/if}
+</Block>
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
new file mode 100644
index 0000000000..948584120b
--- /dev/null
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -0,0 +1,192 @@
+<script>
+  import BlockComponent from "components/BlockComponent.svelte"
+  import Placeholder from "components/app/Placeholder.svelte"
+  import { makePropSafe as safe } from "@budibase/string-templates"
+
+  export let dataSource
+  export let actionUrl
+  export let actionType
+  export let size
+  export let disabled
+  export let fields
+  export let labelPosition
+  export let title
+  export let showSaveButton
+  export let showDeleteButton
+  export let schema
+  export let repeaterId
+
+  const FieldTypeToComponentMap = {
+    string: "stringfield",
+    number: "numberfield",
+    options: "optionsfield",
+    array: "multifieldselect",
+    boolean: "booleanfield",
+    longform: "longformfield",
+    datetime: "datetimefield",
+    attachment: "attachmentfield",
+    link: "relationshipfield",
+    json: "jsonfield",
+    barcodeqr: "codescanner",
+  }
+
+  let formId
+
+  $: onSave = [
+    {
+      "##eventHandlerType": "Save Row",
+      parameters: {
+        providerId: formId,
+        tableId: dataSource?.tableId,
+      },
+    },
+    {
+      "##eventHandlerType": "Close Screen Modal",
+    },
+    {
+      "##eventHandlerType": "Navigate To",
+      parameters: {
+        url: actionUrl,
+      },
+    },
+  ]
+  $: onDelete = [
+    {
+      "##eventHandlerType": "Delete Row",
+      parameters: {
+        confirm: true,
+        tableId: dataSource?.tableId,
+        rowId: `{{ ${safe(repeaterId)}.${safe("_id")} }}`,
+        revId: `{{ ${safe(repeaterId)}.${safe("_rev")} }}`,
+      },
+    },
+    {
+      "##eventHandlerType": "Close Screen Modal",
+    },
+    {
+      "##eventHandlerType": "Navigate To",
+      parameters: {
+        url: actionUrl,
+      },
+    },
+  ]
+
+  $: renderDeleteButton = showDeleteButton && actionType === "Update"
+  $: renderSaveButton = showSaveButton && actionType !== "View"
+  $: renderButtons = renderDeleteButton || renderSaveButton
+  $: renderHeader = renderButtons || title
+
+  const getComponentForField = field => {
+    if (!field || !schema?.[field]) {
+      return null
+    }
+    const type = schema[field].type
+    return FieldTypeToComponentMap[type]
+  }
+</script>
+
+{#if fields?.length}
+  <BlockComponent
+    type="form"
+    props={{
+      actionType: actionType === "Create" ? "Create" : "Update",
+      dataSource,
+      size,
+      disabled: disabled || actionType === "View",
+    }}
+    styles={{
+      normal: {
+        width: "600px",
+      },
+    }}
+    context="form"
+    bind:id={formId}
+  >
+    <BlockComponent
+      type="container"
+      props={{
+        direction: "column",
+        hAlign: "stretch",
+        vAlign: "top",
+        gap: "M",
+      }}
+    >
+      {#if renderHeader}
+        <BlockComponent
+          type="container"
+          props={{
+            direction: "row",
+            hAlign: "stretch",
+            vAlign: "center",
+            gap: "M",
+            wrap: true,
+          }}
+          order={0}
+        >
+          <BlockComponent
+            type="heading"
+            props={{ text: title || "" }}
+            order={0}
+          />
+          {#if renderButtons}
+            <BlockComponent
+              type="container"
+              props={{
+                direction: "row",
+                hAlign: "stretch",
+                vAlign: "center",
+                gap: "M",
+                wrap: true,
+              }}
+              order={1}
+            >
+              {#if renderDeleteButton}
+                <BlockComponent
+                  type="button"
+                  props={{
+                    text: "Delete",
+                    onClick: onDelete,
+                    quiet: true,
+                    type: "secondary",
+                  }}
+                  order={0}
+                />
+              {/if}
+              {#if renderSaveButton}
+                <BlockComponent
+                  type="button"
+                  props={{
+                    text: "Save",
+                    onClick: onSave,
+                    type: "cta",
+                  }}
+                  order={1}
+                />
+              {/if}
+            </BlockComponent>
+          {/if}
+        </BlockComponent>
+      {/if}
+      <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
+        {#each fields as field, idx}
+          {#if getComponentForField(field)}
+            <BlockComponent
+              type={getComponentForField(field)}
+              props={{
+                field,
+                label: field,
+                placeholder: field,
+                disabled,
+              }}
+              order={idx}
+            />
+          {/if}
+        {/each}
+      </BlockComponent>
+    </BlockComponent>
+  </BlockComponent>
+{:else}
+  <Placeholder
+    text="Choose your table and add some fields to your form to get started"
+  />
+{/if}
diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js
index 734bff2c0f..0f05890fef 100644
--- a/packages/client/src/components/app/blocks/index.js
+++ b/packages/client/src/components/app/blocks/index.js
@@ -1,5 +1,5 @@
 export { default as tableblock } from "./TableBlock.svelte"
 export { default as cardsblock } from "./CardsBlock.svelte"
 export { default as repeaterblock } from "./RepeaterBlock.svelte"
-export { default as formblock } from "./FormBlock.svelte"
+export { default as formblock } from "./form/FormBlock.svelte"
 export { default as chartblock } from "./ChartBlock.svelte"

From 2eeac325f31abe2a479230454da80b6566286c35 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 14 Nov 2022 09:25:45 +0000
Subject: [PATCH 2/6] Adjust styles so placeholder component is left aligned

---
 packages/client/src/components/app/blocks/form/FormBlock.svelte | 2 +-
 .../client/src/components/app/blocks/form/InnerFormBlock.svelte | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index 9ec587519f..8964475673 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -65,7 +65,7 @@
       type="container"
       props={{
         direction: "column",
-        hAlign: "center",
+        hAlign: "left",
         vAlign: "stretch",
       }}
     >
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 948584120b..c4e9b0941c 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -97,6 +97,8 @@
     styles={{
       normal: {
         width: "600px",
+        "margin-left": "auto",
+        "margin-right": "auto",
       },
     }}
     context="form"

From 4c366114f02b205d39b59af458a944a5bb3c1e6d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 14 Nov 2022 09:33:01 +0000
Subject: [PATCH 3/6] Fix date time field inconsistency with showing time

---
 packages/client/src/components/app/forms/DateTimeField.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 19ff49c9ba..6bcd20d250 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -6,7 +6,7 @@
   export let label
   export let placeholder
   export let disabled = false
-  export let enableTime = false
+  export let enableTime = true
   export let timeOnly = false
   export let time24hr = false
   export let ignoreTimezones = false

From e7061647da6e2989166a201bc30a1526febe817c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 15 Nov 2022 12:52:06 +0000
Subject: [PATCH 4/6] Ensure action parameters can never be null and fix
 display of close screen modal action

---
 .../ButtonActionDrawer.svelte                 | 22 +++++++++----------
 .../actions/CloseScreenModal.svelte           |  9 ++++++--
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
index ef7c81233b..1d18fa3a92 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
@@ -23,14 +23,18 @@
   export let bindings = []
   export let nested
 
-  $: showAvailableActions = !actions?.length
-
   let actionQuery
-  $: parsedQuery =
-    typeof actionQuery === "string" ? actionQuery.toLowerCase().trim() : ""
-
   let selectedAction = actions?.length ? actions[0] : null
 
+  $: {
+    // Ensure parameters object is never null
+    if (selectedAction && !selectedAction.parameters) {
+      selectedAction.parameters = {}
+    }
+  }
+  $: parsedQuery =
+    typeof actionQuery === "string" ? actionQuery.toLowerCase().trim() : ""
+  $: showAvailableActions = !actions?.length
   $: mappedActionTypes = actionTypes.reduce((acc, action) => {
     let parsedName = action.name.toLowerCase().trim()
     if (parsedQuery.length && parsedName.indexOf(parsedQuery) < 0) {
@@ -40,7 +44,6 @@
     acc[action.type].push(action)
     return acc
   }, {})
-
   // These are ephemeral bindings which only exist while executing actions
   $: eventContexBindings = getEventContextBindings(
     $currentAsset,
@@ -50,9 +53,8 @@
     selectedAction?.id
   )
   $: allBindings = eventContexBindings.concat(bindings)
-
-  // Assign a unique ID to each action
   $: {
+    // Ensure each action has a unique ID
     if (actions) {
       actions.forEach(action => {
         if (!action.id) {
@@ -61,13 +63,11 @@
       })
     }
   }
-
   $: selectedActionComponent =
     selectedAction &&
     actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY])?.component
-
-  // Select the first action if we delete an action
   $: {
+    // Select the first action if we delete an action
     if (selectedAction && !actions?.includes(selectedAction)) {
       selectedAction = actions?.[0]
     }
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte
index 5f3b3ef639..d01a085a23 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte
@@ -6,9 +6,11 @@
   export let bindings = []
 </script>
 
-<Body size="S">Navigate To screen, or leave blank.</Body>
-<br />
 <div class="root">
+  <span>
+    You can optionally navigate to another screen after closing the screen
+    modal.
+  </span>
   <Label small>Screen</Label>
   <DrawerBindableInput
     title="Destination URL"
@@ -20,6 +22,9 @@
 </div>
 
 <style>
+  span {
+    grid-column: 1 / 3;
+  }
   .root {
     display: grid;
     align-items: center;

From 1ab1329e49343c223ec5a924b5b58446460f7c4f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 15 Nov 2022 12:58:52 +0000
Subject: [PATCH 5/6] Disregard block components from ejection which are
 unmounted during parent blocks lifecycles

---
 packages/client/src/components/Block.svelte          | 11 ++++++++++-
 packages/client/src/components/BlockComponent.svelte |  8 +++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index 75474dfd6f..8258912e52 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -9,7 +9,7 @@
   let structureLookupMap = {}
 
   const registerBlockComponent = (id, order, parentId, instance) => {
-    // Ensure child array exists
+    // Ensure child map exists
     if (!structureLookupMap[parentId]) {
       structureLookupMap[parentId] = {}
     }
@@ -18,6 +18,14 @@
     structureLookupMap[parentId][order] = instance
   }
 
+  const unregisterBlockComponent = (order, parentId) => {
+    // Ensure child map exists
+    if (!structureLookupMap[parentId]) {
+      return
+    }
+    delete structureLookupMap[parentId][order]
+  }
+
   const eject = () => {
     // Start the new structure with the root component
     let definition = structureLookupMap[$component.id][0]
@@ -73,6 +81,7 @@
     // We register block components with their raw props so that we can eject
     // blocks later on
     registerComponent: registerBlockComponent,
+    unregisterComponent: unregisterBlockComponent,
   })
 
   onMount(() => {
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index 2f756ce296..0131c5f0d4 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, onDestroy } from "svelte"
   import { generate } from "shortid"
   import { builderStore } from "../stores/builder.js"
   import Component from "components/Component.svelte"
@@ -41,6 +41,12 @@
       block.registerComponent(id, order ?? 0, $component?.id, instance)
     }
   }
+
+  onDestroy(() => {
+    if ($builderStore.inBuilder) {
+      block.unregisterComponent(order ?? 0, $component?.id)
+    }
+  })
 </script>
 
 <Component {instance} isBlock>

From fa3de9f0ac95bd413675b557ff8cbc9520f79348 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 15 Nov 2022 13:04:09 +0000
Subject: [PATCH 6/6] Lint

---
 .../controls/ButtonActionEditor/actions/CloseScreenModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte
index d01a085a23..12d4bad05a 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Label, Body } from "@budibase/bbui"
+  import { Label } from "@budibase/bbui"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters