From 2a5b81a40a3be4ec4b667c970d25d5e206ec461a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Apr 2022 15:30:55 +0100
Subject: [PATCH 01/22] Add placeholder table content and add highlighted and
 disabled states to table buttons

---
 packages/bbui/src/Table/Table.svelte          | 31 +++++++---
 .../backend/DataTable/DataTable.svelte        | 59 +++++++++++++++----
 .../components/backend/DataTable/Table.svelte |  6 +-
 .../buttons/CreateColumnButton.svelte         | 13 +++-
 .../DataTable/buttons/CreateRowButton.svelte  | 12 +++-
 .../DataTable/buttons/CreateViewButton.svelte | 10 +++-
 6 files changed, 106 insertions(+), 25 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 1d957b3f30..1b7f1cddfb 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -36,6 +36,7 @@
   export let disableSorting = false
   export let autoSortColumns = true
   export let compact = false
+  export let customPlaceholder = false
 
   const dispatch = createEventDispatcher()
 
@@ -387,13 +388,24 @@
           </div>
         {/each}
       {:else}
-        <div class="placeholder" class:placeholder--no-fields={!fields?.length}>
-          <div class="placeholder-content">
-            <svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false">
-              <use xlink:href="#spectrum-icon-18-Table" />
-            </svg>
-            <div>No rows found</div>
-          </div>
+        <div
+          class="placeholder"
+          class:placeholder--custom={customPlaceholder}
+          class:placeholder--no-fields={!fields?.length}
+        >
+          {#if customPlaceholder}
+            <slot name="placeholder" />
+          {:else}
+            <div class="placeholder-content">
+              <svg
+                class="spectrum-Icon spectrum-Icon--sizeXXL"
+                focusable="false"
+              >
+                <use xlink:href="#spectrum-icon-18-Table" />
+              </svg>
+              <div>No rows found</div>
+            </div>
+          {/if}
         </div>
       {/if}
     </div>
@@ -576,16 +588,19 @@
     border-top: none;
     grid-column: 1 / -1;
     background-color: var(--table-bg);
+    padding: 60px 40px;
   }
   .placeholder--no-fields {
     border-top: var(--table-border);
   }
+  .placeholder--custom {
+    justify-content: flex-start;
+  }
   .wrapper--quiet .placeholder {
     border-left: none;
     border-right: none;
   }
   .placeholder-content {
-    padding: 40px;
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 9132fc1c89..0a1244d9c9 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -14,7 +14,7 @@
   import Table from "./Table.svelte"
   import { TableNames } from "constants"
   import CreateEditRow from "./modals/CreateEditRow.svelte"
-  import { Pagination } from "@budibase/bbui"
+  import { Pagination, Heading, Body, Layout } from "@budibase/bbui"
   import { fetchData } from "@budibase/frontend-core"
   import { API } from "api"
 
@@ -27,6 +27,8 @@
   $: enrichedSchema = enrichSchema($tables.selected?.schema)
   $: id = $tables.selected?._id
   $: fetch = createFetch(id)
+  $: hasCols = checkHasCols(schema)
+  $: hasRows = !!$fetch.data?.length
 
   const enrichSchema = schema => {
     let tempSchema = { ...schema }
@@ -47,6 +49,20 @@
 
     return tempSchema
   }
+
+  const checkHasCols = schema => {
+    if (!schema || Object.keys(schema).length === 0) {
+      return false
+    }
+    let fields = Object.values(schema)
+    for (let field of fields) {
+      if (!field.autocolumn) {
+        return true
+      }
+    }
+    return false
+  }
+
   // Fetches new data whenever the table changes
   const createFetch = tableId => {
     return fetchData({
@@ -104,19 +120,27 @@
     disableSorting
     on:updatecolumns={onUpdateColumns}
     on:updaterows={onUpdateRows}
+    customPlaceholder
   >
-    <CreateColumnButton on:updatecolumns={onUpdateColumns} />
-    {#if schema && Object.keys(schema).length > 0}
-      {#if !isUsersTable}
-        <CreateRowButton
-          on:updaterows={onUpdateRows}
-          title={"Create row"}
-          modalContentComponent={CreateEditRow}
-        />
-      {/if}
-      {#if isInternal}
-        <CreateViewButton />
-      {/if}
+    <div class="buttons">
+      <div class="left-buttons">
+        <CreateColumnButton highlighted on:updatecolumns={onUpdateColumns} />
+        {#if !isUsersTable}
+          <CreateRowButton
+            on:updaterows={onUpdateRows}
+            title={"Create row"}
+            modalContentComponent={CreateEditRow}
+            disabled={!hasCols}
+            highlighted={hasCols && !hasRows}
+          />
+        {/if}
+        {#if isInternal}
+          <CreateViewButton disabled={!hasCols || !hasRows} />
+        {/if}
+      </div>
+      <div class="right-buttons" />
+    </div>
+    {#if hasCols}
       <ManageAccessButton resourceId={$tables.selected?._id} />
       {#if isUsersTable}
         <EditRolesButton />
@@ -138,6 +162,15 @@
         <TableFilterButton {schema} on:change={onFilter} />
       {/key}
     {/if}
+    <div slot="placeholder">
+      <Layout gap="S">
+        <Heading>Let's create some columns!</Heading>
+        <Body>
+          Start building out your table structure<br />
+          by adding some columns
+        </Body>
+      </Layout>
+    </div>
   </Table>
   {#key id}
     <div in:fade={{ delay: 200, duration: 100 }}>
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 81edb39667..543b31ca4d 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -25,6 +25,7 @@
   export let rowCount
   export let type
   export let disableSorting = false
+  export let customPlaceholder = false
 
   let selectedRows = []
   let editableColumn
@@ -144,6 +145,7 @@
         {customRenderers}
         {rowCount}
         {disableSorting}
+        {customPlaceholder}
         bind:selectedRows
         allowSelectRows={allowEditing && !isUsersTable}
         allowEditRows={allowEditing}
@@ -153,7 +155,9 @@
         on:editrow={e => editRow(e.detail)}
         on:clickrelationship={e => selectRelationship(e.detail)}
         on:sort
-      />
+      >
+        <slot slot="placeholder" name="placeholder" />
+      </Table>
     </div>
   {/key}
 </Layout>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index abf7e25d2a..8644ee86da 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -2,10 +2,21 @@
   import { ActionButton, Modal } from "@budibase/bbui"
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
+  export let highlighted = false
+  export let disabled = false
+
   let modal
 </script>
 
-<ActionButton icon="TableColumnAddRight" quiet size="S" on:click={modal.show}>
+<ActionButton
+  {disabled}
+  selected={highlighted}
+  emphasized={highlighted}
+  icon="TableColumnAddRight"
+  quiet
+  size="S"
+  on:click={modal.show}
+>
   Create column
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
index 2a31d02375..1676a5b23c 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@@ -4,11 +4,21 @@
 
   export let modalContentComponent = CreateEditRow
   export let title = "Create row"
+  export let disabled = false
+  export let highlighted = false
 
   let modal
 </script>
 
-<ActionButton icon="TableRowAddBottom" size="S" quiet on:click={modal.show}>
+<ActionButton
+  {disabled}
+  emphasized={highlighted}
+  selected={highlighted}
+  icon="TableRowAddBottom"
+  size="S"
+  quiet
+  on:click={modal.show}
+>
   {title}
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
index 297d120ede..0133b5bd79 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@@ -2,10 +2,18 @@
   import { Modal, ActionButton } from "@budibase/bbui"
   import CreateViewModal from "../modals/CreateViewModal.svelte"
 
+  export let disabled = false
+
   let modal
 </script>
 
-<ActionButton icon="CollectionAdd" size="S" quiet on:click={modal.show}>
+<ActionButton
+  {disabled}
+  icon="CollectionAdd"
+  size="S"
+  quiet
+  on:click={modal.show}
+>
   Create view
 </ActionButton>
 <Modal bind:this={modal}>

From 7a2a7bfc878f00af075db50d143e1f2d191f1aac Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Apr 2022 15:32:46 +0100
Subject: [PATCH 02/22] Split buttons into left and right sides

---
 .../backend/DataTable/DataTable.svelte        | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 0a1244d9c9..fd2045fc07 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -138,30 +138,29 @@
           <CreateViewButton disabled={!hasCols || !hasRows} />
         {/if}
       </div>
-      <div class="right-buttons" />
-    </div>
-    {#if hasCols}
-      <ManageAccessButton resourceId={$tables.selected?._id} />
-      {#if isUsersTable}
-        <EditRolesButton />
-      {/if}
-      {#if !isInternal}
-        <ExistingRelationshipButton
-          table={$tables.selected}
-          on:updatecolumns={onUpdateColumns}
+      <div class="right-buttons">
+        <ManageAccessButton resourceId={$tables.selected?._id} />
+        {#if isUsersTable}
+          <EditRolesButton />
+        {/if}
+        {#if !isInternal}
+          <ExistingRelationshipButton
+            table={$tables.selected}
+            on:updatecolumns={onUpdateColumns}
+          />
+        {/if}
+        <HideAutocolumnButton bind:hideAutocolumns />
+        <!-- always have the export last -->
+        <ExportButton view={$tables.selected?._id} />
+        <ImportButton
+          tableId={$tables.selected?._id}
+          on:updaterows={onUpdateRows}
         />
-      {/if}
-      <HideAutocolumnButton bind:hideAutocolumns />
-      <!-- always have the export last -->
-      <ExportButton view={$tables.selected?._id} />
-      <ImportButton
-        tableId={$tables.selected?._id}
-        on:updaterows={onUpdateRows}
-      />
-      {#key id}
-        <TableFilterButton {schema} on:change={onFilter} />
-      {/key}
-    {/if}
+        {#key id}
+          <TableFilterButton {schema} on:change={onFilter} />
+        {/key}
+      </div>
+    </div>
     <div slot="placeholder">
       <Layout gap="S">
         <Heading>Let's create some columns!</Heading>
@@ -195,4 +194,11 @@
     align-items: center;
     margin-top: var(--spacing-xl);
   }
+  .buttons {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
 </style>

From 2d3618eab09f6770473bcf0bbefc3229a45a8cf0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Apr 2022 15:38:51 +0100
Subject: [PATCH 03/22] Fix padding in action buttons

---
 packages/bbui/src/ActionButton/ActionButton.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 5ab7a7f047..b518ac3d92 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -80,8 +80,4 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
-
-  .spectrum-ActionButton-label {
-    padding-bottom: 2px;
-  }
 </style>

From 9e20f0406c0ba49965939e3d35fd1abd00865b24 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Apr 2022 15:39:14 +0100
Subject: [PATCH 04/22] Update auto column, export and filter buttons to new
 designs and to support disabled state

---
 .../components/backend/DataTable/DataTable.svelte    | 12 +++++++++---
 .../backend/DataTable/buttons/ExportButton.svelte    |  9 ++++++++-
 .../DataTable/buttons/HideAutocolumnButton.svelte    | 10 ++++++++--
 .../DataTable/buttons/TableFilterButton.svelte       |  2 ++
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index fd2045fc07..6a6b16b6fd 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -150,14 +150,20 @@
           />
         {/if}
         <HideAutocolumnButton bind:hideAutocolumns />
-        <!-- always have the export last -->
-        <ExportButton view={$tables.selected?._id} />
         <ImportButton
           tableId={$tables.selected?._id}
           on:updaterows={onUpdateRows}
         />
+        <ExportButton
+          disabled={!hasRows || !hasCols}
+          view={$tables.selected?._id}
+        />
         {#key id}
-          <TableFilterButton {schema} on:change={onFilter} />
+          <TableFilterButton
+            {schema}
+            on:change={onFilter}
+            disabled={!hasCols || !hasRows}
+          />
         {/key}
       </div>
     </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
index d8502c7d3e..093ca33182 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -3,11 +3,18 @@
   import ExportModal from "../modals/ExportModal.svelte"
 
   export let view
+  export let disabled = false
 
   let modal
 </script>
 
-<ActionButton icon="DataDownload" size="S" quiet on:click={modal.show}>
+<ActionButton
+  {disabled}
+  icon="DataDownload"
+  size="S"
+  quiet
+  on:click={modal.show}
+>
   Export
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
index 3d74188ee4..e9b042a653 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@@ -8,6 +8,12 @@
   }
 </script>
 
-<ActionButton icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
-  {#if hideAutocolumns}Show auto columns{:else}Hide auto columns{/if}
+<ActionButton
+  icon={hideAutocolumns ? "VisibilityOff" : "Visibility"}
+  primary
+  size="S"
+  quiet
+  on:click={hideOrUnhide}
+>
+  Auto columns
 </ActionButton>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
index c07b11237b..cf9e4b1358 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
@@ -5,6 +5,7 @@
 
   export let schema
   export let filters
+  export let disabled = false
 
   const dispatch = createEventDispatcher()
   let modal
@@ -17,6 +18,7 @@
   icon="Filter"
   size="S"
   quiet
+  {disabled}
   on:click={modal.show}
   active={tempValue?.length > 0}
 >

From 620008fc42142ffeeffd35bae957aee82830d360 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Apr 2022 15:48:35 +0100
Subject: [PATCH 05/22] Prevent flashing CTA buttons when initially loading
 table data

---
 packages/bbui/src/Table/Table.svelte          |  2 +-
 .../backend/DataTable/DataTable.svelte        | 27 +++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 1b7f1cddfb..d34b012bfa 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -588,7 +588,7 @@
     border-top: none;
     grid-column: 1 / -1;
     background-color: var(--table-bg);
-    padding: 60px 40px;
+    padding: 40px;
   }
   .placeholder--no-fields {
     border-top: var(--table-border);
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 6a6b16b6fd..4442346653 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -28,7 +28,7 @@
   $: id = $tables.selected?._id
   $: fetch = createFetch(id)
   $: hasCols = checkHasCols(schema)
-  $: hasRows = !!$fetch.data?.length
+  $: hasRows = !!$fetch.rows?.length
 
   const enrichSchema = schema => {
     let tempSchema = { ...schema }
@@ -124,14 +124,17 @@
   >
     <div class="buttons">
       <div class="left-buttons">
-        <CreateColumnButton highlighted on:updatecolumns={onUpdateColumns} />
+        <CreateColumnButton
+          highlighted={$fetch.loaded && (!hasCols || !hasRows)}
+          on:updatecolumns={onUpdateColumns}
+        />
         {#if !isUsersTable}
           <CreateRowButton
             on:updaterows={onUpdateRows}
             title={"Create row"}
             modalContentComponent={CreateEditRow}
             disabled={!hasCols}
-            highlighted={hasCols && !hasRows}
+            highlighted={$fetch.loaded && hasCols && !hasRows}
           />
         {/if}
         {#if isInternal}
@@ -169,11 +172,19 @@
     </div>
     <div slot="placeholder">
       <Layout gap="S">
-        <Heading>Let's create some columns!</Heading>
-        <Body>
-          Start building out your table structure<br />
-          by adding some columns
-        </Body>
+        {#if !hasCols}
+          <Heading>Let's create some columns</Heading>
+          <Body>
+            Start building out your table structure<br />
+            by adding some columns
+          </Body>
+        {:else}
+          <Heading>Now let's add a row</Heading>
+          <Body>
+            Add some data to your table<br />
+            by adding some rows
+          </Body>
+        {/if}
       </Layout>
     </div>
   </Table>

From 526805d7e7b261838557a7558b2372cc71e24035 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 8 Apr 2022 10:28:07 +0100
Subject: [PATCH 06/22] Increase table title size and padding around table
 headers

---
 packages/bbui/src/Table/Table.svelte                       | 7 +++++++
 .../builder/src/components/backend/DataTable/Table.svelte  | 7 ++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index d34b012bfa..863dc84040 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -470,6 +470,13 @@
     justify-content: flex-start;
     align-items: center;
     user-select: none;
+    border-top: var(--table-border);
+  }
+  .spectrum-Table-headCell:first-of-type {
+    border-left: var(--table-border);
+  }
+  .spectrum-Table-headCell:last-of-type {
+    border-right: var(--table-border);
   }
   .spectrum-Table-headCell--alignCenter {
     justify-content: center;
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 543b31ca4d..85b271dee8 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -118,10 +118,10 @@
 </script>
 
 <Layout noPadding gap="S">
-  <div>
+  <Layout noPadding gap="XS">
     {#if title}
       <div class="table-title">
-        <Heading size="S">{title}</Heading>
+        <Heading size="M">{title}</Heading>
         {#if loading}
           <div transition:fade|local>
             <Spinner size="10" />
@@ -135,7 +135,7 @@
         <DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
       {/if}
     </div>
-  </div>
+  </Layout>
   {#key tableId}
     <div class="table-wrapper">
       <Table
@@ -180,6 +180,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    margin-top: var(--spacing-m);
   }
   .table-title > div {
     margin-left: var(--spacing-xs);

From 6be3c7c6248592308264bcdb35a4a69c2b51214b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 8 Apr 2022 10:35:13 +0100
Subject: [PATCH 07/22] Allow table buttons to wrap

---
 .../src/components/backend/DataTable/DataTable.svelte     | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 4442346653..182fbf382e 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -217,5 +217,13 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+  }
+  .left-buttons,
+  .right-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
   }
 </style>

From 61fb90e03d9b56d78d8ed290b9b30cfc36aac138 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 8 Apr 2022 10:37:45 +0100
Subject: [PATCH 08/22] Add spacing between title buttons

---
 .../builder/src/components/backend/DataTable/DataTable.svelte    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 182fbf382e..6a1befd7e4 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -225,5 +225,6 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    gap: var(--spacing-m);
   }
 </style>

From 1c4294fb138f663f3a9d179f903b1260c5d10d54 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Apr 2022 14:42:09 +0100
Subject: [PATCH 09/22] Fix sizing of create new app screen

---
 .../builder/src/pages/builder/portal/apps/create.svelte   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte
index cf1e3b66bd..cd2d47ea4c 100644
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@@ -75,8 +75,8 @@
     <div class="title">
       <div class="welcome">
         <Layout noPadding gap="XS">
-          <Heading size="M">{createAppTitle}</Heading>
-          <Body size="S">
+          <Heading size="L">{createAppTitle}</Heading>
+          <Body size="M">
             {welcomeBody}
           </Body>
         </Layout>
@@ -84,7 +84,7 @@
         <div class="buttons">
           <Button
             dataCy="create-app-btn"
-            size="L"
+            size="M"
             icon="Add"
             cta
             on:click={initiateAppCreation}
@@ -94,7 +94,7 @@
           <Button
             dataCy="import-app-btn"
             icon="Import"
-            size="L"
+            size="M"
             quiet
             secondary
             on:click={initiateAppImport}

From 9545b3af1b535e6e826a8d7c50f2dee31c7af7b6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 09:46:07 +0100
Subject: [PATCH 10/22] Add button actions to update form field values

---
 .../builder/src/builderStore/dataBinding.js   |   2 +-
 .../actions/UpdateFieldValue.svelte           |  78 +++++++++++
 .../ButtonActionEditor/actions/index.js       |   1 +
 .../ButtonActionEditor/manifest.json          |  16 ++-
 packages/client/manifest.json                 | 128 +++++++++++++++++-
 .../src/components/app/forms/InnerForm.svelte |  41 ++++--
 packages/client/src/constants.js              |   1 +
 packages/client/src/utils/buttonActions.js    |  14 ++
 8 files changed, 265 insertions(+), 16 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 8dff56dd6b..8cbc629291 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -654,7 +654,7 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
  * Builds a form schema given a form component.
  * A form schema is a schema of all the fields nested anywhere within a form.
  */
-const buildFormSchema = component => {
+export const buildFormSchema = component => {
   let schema = {}
   if (!component) {
     return schema
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte
new file mode 100644
index 0000000000..cddf3e9fda
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte
@@ -0,0 +1,78 @@
+<script>
+  import { Select, Label, Combobox } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { currentAsset, store } from "builderStore"
+  import {
+    getActionProviderComponents,
+    buildFormSchema,
+  } from "builderStore/dataBinding"
+  import { findComponent } from "builderStore/componentUtils"
+
+  export let parameters
+  export let bindings = []
+
+  const typeOptions = [
+    {
+      label: "Set value",
+      value: "set",
+    },
+    {
+      label: "Reset to default value",
+      value: "reset",
+    },
+  ]
+
+  $: formComponent = findComponent($currentAsset.props, parameters.componentId)
+  $: formSchema = buildFormSchema(formComponent)
+  $: fieldOptions = Object.keys(formSchema || {})
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "ValidateForm"
+  )
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "set"
+    }
+  })
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+  <Label small>Type</Label>
+  <Select
+    placeholder={null}
+    bind:value={parameters.type}
+    options={typeOptions}
+  />
+  <Label small>Field</Label>
+  <Combobox bind:value={parameters.field} options={fieldOptions} />
+  {#if parameters.type === "set"}
+    <Label small>Value</Label>
+    <DrawerBindableInput
+      {bindings}
+      value={parameters.value}
+      on:change={e => (parameters.value = e.detail)}
+    />
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
index 2306d4a548..8f0baf08be 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
@@ -14,3 +14,4 @@ export { default as DuplicateRow } from "./DuplicateRow.svelte"
 export { default as S3Upload } from "./S3Upload.svelte"
 export { default as ExportData } from "./ExportData.svelte"
 export { default as ContinueIf } from "./ContinueIf.svelte"
+export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
index 80464b281f..cf18fee3a6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
@@ -42,25 +42,29 @@
       "name": "Trigger Automation",
       "component": "TriggerAutomation"
     },
+    {
+      "name": "Update Field Value",
+      "component": "UpdateFieldValue"
+    },
     {
       "name": "Validate Form",
       "component": "ValidateForm"
     },
     {
-      "name": "Log Out",
-      "component": "LogOut"
+      "name": "Change Form Step",
+      "component": "ChangeFormStep"
     },
     {
       "name": "Clear Form",
       "component": "ClearForm"
     },
     {
-      "name": "Close Screen Modal",
-      "component": "CloseScreenModal"
+      "name": "Log Out",
+      "component": "LogOut"
     },
     {
-      "name": "Change Form Step",
-      "component": "ChangeFormStep"
+      "name": "Close Screen Modal",
+      "component": "CloseScreenModal"
     },
     {
       "name": "Refresh Data Provider",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 4c3c0faf1f..9df9a30d1c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1834,7 +1834,12 @@
     "icon": "Form",
     "hasChildren": true,
     "illegalChildren": ["section", "form"],
-    "actions": ["ValidateForm", "ClearForm", "ChangeFormStep"],
+    "actions": [
+      "ValidateForm",
+      "ClearForm",
+      "ChangeFormStep",
+      "UpdateFieldValue"
+    ],
     "styles": ["size"],
     "settings": [
       {
@@ -1975,6 +1980,17 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -2049,6 +2065,17 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -2089,6 +2116,17 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -2125,6 +2163,17 @@
         "key": "placeholder",
         "placeholder": "Choose an option"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "select",
         "label": "Type",
@@ -2274,6 +2323,17 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Autocomplete",
@@ -2399,6 +2459,17 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -2439,6 +2510,17 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "select",
         "label": "Formatting",
@@ -2512,6 +2594,17 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -2657,6 +2750,17 @@
         "label": "Extensions",
         "key": "extensions"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -2697,6 +2801,17 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Autocomplete",
@@ -2742,6 +2857,17 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Disabled",
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index ae6ae3ebcc..99dcbf4d5e 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -219,10 +219,10 @@
       })
       return valid
     },
-    clear: () => {
-      // Clear the form by clearing each individual field
+    reset: () => {
+      // Reset the form by resetting each individual field
       fields.forEach(field => {
-        get(field).fieldApi.clearValue()
+        get(field).fieldApi.reset()
       })
     },
     changeStep: ({ type, number }) => {
@@ -241,6 +241,22 @@
         currentStep.set(step)
       }
     },
+    setFieldValue: (fieldName, value) => {
+      const field = getField(fieldName)
+      if (!field) {
+        return
+      }
+      const { fieldApi } = get(field)
+      fieldApi.setValue(value)
+    },
+    resetField: fieldName => {
+      const field = getField(fieldName)
+      if (!field) {
+        return
+      }
+      const { fieldApi } = get(field)
+      fieldApi.reset()
+    },
   }
 
   // Creates an API for a specific field
@@ -268,11 +284,11 @@
       return !error
     }
 
-    // Clears the value of a certain field back to the initial value
-    const clearValue = () => {
+    // Clears the value of a certain field back to the default value
+    const reset = () => {
       const fieldInfo = getField(field)
       const { fieldState } = get(fieldInfo)
-      const newValue = initialValues[field] ?? fieldState.defaultValue
+      const newValue = fieldState.defaultValue
 
       // Update field state
       fieldInfo.update(state => {
@@ -329,7 +345,7 @@
 
     return {
       setValue,
-      clearValue,
+      reset,
       updateValidation,
       setDisabled,
       validate: () => {
@@ -354,11 +370,20 @@
   // register their fields to step 1
   setContext("form-step", writable(1))
 
+  const handleUpdateFieldValue = ({ type, field, value }) => {
+    if (type === "set") {
+      formApi.setFieldValue(field, value)
+    } else {
+      formApi.resetField(field)
+    }
+  }
+
   // Action context to pass to children
   const actions = [
     { type: ActionTypes.ValidateForm, callback: formApi.validate },
-    { type: ActionTypes.ClearForm, callback: formApi.clear },
+    { type: ActionTypes.ClearForm, callback: formApi.reset },
     { type: ActionTypes.ChangeFormStep, callback: formApi.changeStep },
+    { type: ActionTypes.UpdateFieldValue, callback: handleUpdateFieldValue },
   ]
 </script>
 
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 965ca788e1..51ef3fd124 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -21,6 +21,7 @@ export const UnsortableTypes = [
 
 export const ActionTypes = {
   ValidateForm: "ValidateForm",
+  UpdateFieldValue: "UpdateFieldValue",
   RefreshDatasource: "RefreshDatasource",
   AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
   RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index f851a623c0..bb1e7c30c9 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -162,6 +162,19 @@ const executeActionHandler = async (
   }
 }
 
+const updateFieldValueHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.UpdateFieldValue,
+    {
+      type: action.parameters.type,
+      field: action.parameters.field,
+      value: action.parameters.value,
+    }
+  )
+}
+
 const validateFormHandler = async (action, context) => {
   return await executeActionHandler(
     context,
@@ -295,6 +308,7 @@ const handlerMap = {
   ["Execute Query"]: queryExecutionHandler,
   ["Trigger Automation"]: triggerAutomationHandler,
   ["Validate Form"]: validateFormHandler,
+  ["Update Field Value"]: updateFieldValueHandler,
   ["Refresh Data Provider"]: refreshDataProviderHandler,
   ["Log Out"]: logoutHandler,
   ["Clear Form"]: clearFormHandler,

From 8b3cf851b86552fe4a9c254a1a7b72e224d55806 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 09:46:24 +0100
Subject: [PATCH 11/22] Add on change action to attachment field

---
 .../src/components/app/forms/AttachmentField.svelte  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte
index 679dfa9702..5b2eab0c42 100644
--- a/packages/client/src/components/app/forms/AttachmentField.svelte
+++ b/packages/client/src/components/app/forms/AttachmentField.svelte
@@ -8,6 +8,7 @@
   export let disabled = false
   export let validation
   export let extensions
+  export let onChange
 
   let fieldState
   let fieldApi
@@ -38,6 +39,13 @@
       return []
     }
   }
+
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
 </script>
 
 <Field
@@ -55,9 +63,7 @@
       value={fieldState.value}
       disabled={fieldState.disabled}
       error={fieldState.error}
-      on:change={e => {
-        fieldApi.setValue(e.detail)
-      }}
+      on:change={handleChange}
       {processFiles}
       {handleFileTooLarge}
       {extensions}

From ede7f684c429fed59f1afdce6ce40362b29bcd97 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 09:46:36 +0100
Subject: [PATCH 12/22] Add on change action to boolean field

---
 .../src/components/app/forms/BooleanField.svelte       | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/forms/BooleanField.svelte b/packages/client/src/components/app/forms/BooleanField.svelte
index 1e3bc2fc8c..b9c69ce684 100644
--- a/packages/client/src/components/app/forms/BooleanField.svelte
+++ b/packages/client/src/components/app/forms/BooleanField.svelte
@@ -9,6 +9,7 @@
   export let size
   export let validation
   export let defaultValue
+  export let onChange
 
   let fieldState
   let fieldApi
@@ -25,6 +26,13 @@
     }
     return false
   }
+
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
 </script>
 
 <Field
@@ -44,8 +52,8 @@
       error={fieldState.error}
       id={fieldState.fieldId}
       {size}
-      on:change={e => fieldApi.setValue(e.detail)}
       {text}
+      on:change={handleChange}
     />
   {/if}
 </Field>

From bbaec2e50f9cdb682c2144e1d9b693dd5fb7bfb3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 09:46:46 +0100
Subject: [PATCH 13/22] Add on change action to datetime field

---
 .../src/components/app/forms/DateTimeField.svelte      | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 022a634bc5..1010883cad 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -10,9 +10,17 @@
   export let timeOnly = false
   export let validation
   export let defaultValue
+  export let onChange
 
   let fieldState
   let fieldApi
+
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
 </script>
 
 <Field
@@ -28,7 +36,7 @@
   {#if fieldState}
     <CoreDatePicker
       value={fieldState.value}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={handleChange}
       disabled={fieldState.disabled}
       error={fieldState.error}
       id={fieldState.fieldId}

From 0957b3195a7fcb6b37c0c74c35f848e7b3aa0b99 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 09:47:00 +0100
Subject: [PATCH 14/22] Add on change action to JSON field

---
 .../client/src/components/app/forms/JSONField.svelte  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/forms/JSONField.svelte b/packages/client/src/components/app/forms/JSONField.svelte
index d38a41b430..4bb5ee542c 100644
--- a/packages/client/src/components/app/forms/JSONField.svelte
+++ b/packages/client/src/components/app/forms/JSONField.svelte
@@ -8,6 +8,7 @@
   export let placeholder
   export let disabled = false
   export let defaultValue = ""
+  export let onChange
 
   const component = getContext("component")
   const validation = [
@@ -33,6 +34,14 @@
       return value
     }
   }
+
+  const handleChange = e => {
+    const value = parseValue(e.detail)
+    fieldApi.setValue(value)
+    if (onChange) {
+      onChange({ value })
+    }
+  }
 </script>
 
 <Field
@@ -49,7 +58,7 @@
     <div style="--height: {height};">
       <CoreTextArea
         value={serialiseValue(fieldState.value)}
-        on:change={e => fieldApi.setValue(parseValue(e.detail))}
+        on:change={handleChange}
         disabled={fieldState.disabled}
         error={fieldState.error}
         id={fieldState.fieldId}

From b886fe95c2712c5d88941d7f7932d731f97efdb1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 09:47:27 +0100
Subject: [PATCH 15/22] Add on change action to string field

---
 .../src/components/app/forms/StringField.svelte       | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/forms/StringField.svelte b/packages/client/src/components/app/forms/StringField.svelte
index bb598bb1e0..fcdcfdc099 100644
--- a/packages/client/src/components/app/forms/StringField.svelte
+++ b/packages/client/src/components/app/forms/StringField.svelte
@@ -10,9 +10,17 @@
   export let validation
   export let defaultValue = ""
   export let align
+  export let onChange
 
   let fieldState
   let fieldApi
+
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
 </script>
 
 <Field
@@ -21,6 +29,7 @@
   {disabled}
   {validation}
   {defaultValue}
+  {onChange}
   type={type === "number" ? "number" : "string"}
   bind:fieldState
   bind:fieldApi
@@ -29,7 +38,7 @@
     <CoreTextField
       updateOnChange={false}
       value={fieldState.value}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={handleChange}
       disabled={fieldState.disabled}
       error={fieldState.error}
       id={fieldState.fieldId}

From bd313c72042ae099572bec3cd25d5db5a4435b4a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 09:49:13 +0100
Subject: [PATCH 16/22] Add on change action to long form field

---
 .../src/components/app/forms/LongFormField.svelte    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index 15a10827b2..200e55af41 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -11,6 +11,7 @@
   export let validation
   export let defaultValue = ""
   export let format = "auto"
+  export let onChange
 
   let fieldState
   let fieldApi
@@ -44,6 +45,13 @@
       },
     })
   }
+
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
 </script>
 
 <Field
@@ -61,7 +69,7 @@
     {#if useRichText}
       <CoreRichTextField
         value={fieldState.value}
-        on:change={e => fieldApi.setValue(e.detail)}
+        on:change={handleChange}
         disabled={fieldState.disabled}
         error={fieldState.error}
         id={fieldState.fieldId}
@@ -78,7 +86,7 @@
     {:else}
       <CoreTextArea
         value={fieldState.value}
-        on:change={e => fieldApi.setValue(e.detail)}
+        on:change={handleChange}
         disabled={fieldState.disabled}
         error={fieldState.error}
         id={fieldState.fieldId}

From bd7c0095371725548c4b30ad6307ebf988ab0bdf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 09:51:41 +0100
Subject: [PATCH 17/22] Add on change action to multi-select field

---
 .../src/components/app/forms/MultiFieldSelect.svelte | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/forms/MultiFieldSelect.svelte b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
index 686198dfe1..6bc0970051 100644
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
@@ -14,6 +14,7 @@
   export let valueColumn
   export let customOptions
   export let autocomplete = false
+  export let onChange
 
   let fieldState
   let fieldApi
@@ -34,13 +35,18 @@
     if (!values) {
       return []
     }
-
     if (Array.isArray(values)) {
       return values
     }
-
     return values.split(",").map(value => value.trim())
   }
+
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
 </script>
 
 <Field
@@ -62,7 +68,7 @@
       getOptionValue={flatOptions ? x => x : x => x.value}
       id={fieldState.fieldId}
       disabled={fieldState.disabled}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={handleChange}
       {placeholder}
       {options}
       {autocomplete}

From 02178d3f2b00185e0a0a2ac89fabc1c33dfc380d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 09:54:49 +0100
Subject: [PATCH 18/22] Add on change action to options field

---
 .../src/components/app/forms/OptionsField.svelte     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/forms/OptionsField.svelte b/packages/client/src/components/app/forms/OptionsField.svelte
index 8140600e7e..c0f98ed827 100644
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/packages/client/src/components/app/forms/OptionsField.svelte
@@ -16,6 +16,7 @@
   export let customOptions
   export let autocomplete = false
   export let direction = "vertical"
+  export let onChange
 
   let fieldState
   let fieldApi
@@ -30,6 +31,13 @@
     valueColumn,
     customOptions
   )
+
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
 </script>
 
 <Field
@@ -52,7 +60,7 @@
         error={fieldState.error}
         {options}
         {placeholder}
-        on:change={e => fieldApi.setValue(e.detail)}
+        on:change={handleChange}
         getOptionLabel={flatOptions ? x => x : x => x.label}
         getOptionValue={flatOptions ? x => x : x => x.value}
         {autocomplete}
@@ -66,7 +74,7 @@
         error={fieldState.error}
         {options}
         {direction}
-        on:change={e => fieldApi.setValue(e.detail)}
+        on:change={handleChange}
         getOptionLabel={flatOptions ? x => x : x => x.label}
         getOptionValue={flatOptions ? x => x : x => x.value}
       />

From b3ca4357b24f7cae7f85871c50a612e72acbbfb1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 10:01:14 +0100
Subject: [PATCH 19/22] Add on change action to relationship field

---
 .../components/app/forms/RelationshipField.svelte    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 6089939dcd..2c1136bea3 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -13,6 +13,7 @@
   export let validation
   export let autocomplete = false
   export let defaultValue
+  export let onChange
 
   let fieldState
   let fieldApi
@@ -62,11 +63,11 @@
   }
 
   const singleHandler = e => {
-    fieldApi.setValue(e.detail == null ? [] : [e.detail])
+    handleChange(e.detail == null ? [] : [e.detail])
   }
 
   const multiHandler = e => {
-    fieldApi.setValue(e.detail)
+    handleChange(e.detail)
   }
 
   const expand = values => {
@@ -78,6 +79,13 @@
     }
     return values.split(",").map(value => value.trim())
   }
+
+  const handleChange = value => {
+    fieldApi.setValue(value)
+    if (onChange) {
+      onChange({ value })
+    }
+  }
 </script>
 
 <Field

From 8ab79c3cbb2dbd069ba7f9a3ada8020a0ad87553 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 10:04:38 +0100
Subject: [PATCH 20/22] Add on change action to S3 upload field

---
 packages/client/manifest.json                 | 101 ++++++++++--------
 .../src/components/app/forms/S3Upload.svelte  |  12 ++-
 2 files changed, 65 insertions(+), 48 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 9df9a30d1c..920926d508 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2876,6 +2876,62 @@
       }
     ]
   },
+  "s3upload": {
+    "name": "S3 File Upload",
+    "info": "This component can't be used with S3 datasources that use custom endpoints.",
+    "icon": "UploadToCloud",
+    "styles": ["size"],
+    "editable": true,
+    "settings": [
+      {
+        "type": "field/attachment",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "dataSource/s3",
+        "label": "S3 Datasource",
+        "key": "datasourceId"
+      },
+      {
+        "type": "text",
+        "label": "Bucket",
+        "key": "bucket"
+      },
+      {
+        "type": "text",
+        "label": "File Name",
+        "key": "key"
+      },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "validation/attachment",
+        "label": "Validation",
+        "key": "validation"
+      }
+    ]
+  },
   "dataprovider": {
     "name": "Data Provider",
     "info": "Pagination is only available for data stored in tables.",
@@ -3707,51 +3763,6 @@
       }
     ]
   },
-  "s3upload": {
-    "name": "S3 File Upload",
-    "info": "This component can't be used with S3 datasources that use custom endpoints.",
-    "icon": "UploadToCloud",
-    "styles": ["size"],
-    "editable": true,
-    "settings": [
-      {
-        "type": "field/attachment",
-        "label": "Field",
-        "key": "field"
-      },
-      {
-        "type": "text",
-        "label": "Label",
-        "key": "label"
-      },
-      {
-        "type": "dataSource/s3",
-        "label": "S3 Datasource",
-        "key": "datasourceId"
-      },
-      {
-        "type": "text",
-        "label": "Bucket",
-        "key": "bucket"
-      },
-      {
-        "type": "text",
-        "label": "File Name",
-        "key": "key"
-      },
-      {
-        "type": "boolean",
-        "label": "Disabled",
-        "key": "disabled",
-        "defaultValue": false
-      },
-      {
-        "type": "validation/attachment",
-        "label": "Validation",
-        "key": "validation"
-      }
-    ]
-  },
   "markdownviewer": {
     "name": "Markdown Viewer",
     "icon": "TaskList",
diff --git a/packages/client/src/components/app/forms/S3Upload.svelte b/packages/client/src/components/app/forms/S3Upload.svelte
index 031c49f4b4..188ff042e9 100644
--- a/packages/client/src/components/app/forms/S3Upload.svelte
+++ b/packages/client/src/components/app/forms/S3Upload.svelte
@@ -10,6 +10,7 @@
   export let label
   export let disabled = false
   export let validation
+  export let onChange
 
   let fieldState
   let fieldApi
@@ -88,6 +89,13 @@
     }
   }
 
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
+
   onMount(() => {
     uploadStore.actions.registerFileUpload($component.id, upload)
   })
@@ -113,9 +121,7 @@
         value={fieldState.value}
         disabled={loading || fieldState.disabled}
         error={fieldState.error}
-        on:change={e => {
-          fieldApi.setValue(e.detail)
-        }}
+        on:change={handleChange}
         {processFiles}
         {handleFileTooLarge}
         maximum={1}

From e60c1a968573e17e9406b9530b8ff7098c2a80c0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Apr 2022 10:38:24 +0100
Subject: [PATCH 21/22] Capitalise on change labels for form fields

---
 packages/client/manifest.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 920926d508..4190d7f076 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1982,7 +1982,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2067,7 +2067,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2118,7 +2118,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2165,7 +2165,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2325,7 +2325,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2461,7 +2461,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2512,7 +2512,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2596,7 +2596,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2752,7 +2752,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2803,7 +2803,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2859,7 +2859,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {
@@ -2910,7 +2910,7 @@
       },
       {
         "type": "event",
-        "label": "On change",
+        "label": "On Change",
         "key": "onChange",
         "context": [
           {

From 7bf32ddcb2d636adbb7b28b6775d30d0098de5cd Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Fri, 22 Apr 2022 09:55:26 +0000
Subject: [PATCH 22/22] v1.0.105-alpha.30

---
 lerna.json                             |  2 +-
 packages/backend-core/package.json     |  2 +-
 packages/bbui/package.json             |  4 ++--
 packages/builder/package.json          | 10 +++++-----
 packages/cli/package.json              |  2 +-
 packages/client/package.json           |  8 ++++----
 packages/frontend-core/package.json    |  4 ++--
 packages/server/package.json           |  8 ++++----
 packages/string-templates/package.json |  2 +-
 packages/worker/package.json           |  6 +++---
 10 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/lerna.json b/lerna.json
index bfafe7be44..3c3b56bf83 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json
index 027a11e910..6fdafea9de 100644
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/backend-core",
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "description": "Budibase backend core libraries used in server and worker",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index e9fa0e88a0..5e8c431855 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "^1.0.105-alpha.29",
+    "@budibase/string-templates": "^1.0.105-alpha.30",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 93e4ecda7a..d56f60405d 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "license": "GPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.0.105-alpha.29",
-    "@budibase/client": "^1.0.105-alpha.29",
-    "@budibase/frontend-core": "^1.0.105-alpha.29",
-    "@budibase/string-templates": "^1.0.105-alpha.29",
+    "@budibase/bbui": "^1.0.105-alpha.30",
+    "@budibase/client": "^1.0.105-alpha.30",
+    "@budibase/frontend-core": "^1.0.105-alpha.30",
+    "@budibase/string-templates": "^1.0.105-alpha.30",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 2e04a97a84..2abdee2bb2 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 9be16ff6ab..06ed092726 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^1.0.105-alpha.29",
-    "@budibase/frontend-core": "^1.0.105-alpha.29",
-    "@budibase/string-templates": "^1.0.105-alpha.29",
+    "@budibase/bbui": "^1.0.105-alpha.30",
+    "@budibase/frontend-core": "^1.0.105-alpha.30",
+    "@budibase/string-templates": "^1.0.105-alpha.30",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json
index b7064fbb95..c99add81d6 100644
--- a/packages/frontend-core/package.json
+++ b/packages/frontend-core/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "^1.0.105-alpha.29",
+    "@budibase/bbui": "^1.0.105-alpha.30",
     "lodash": "^4.17.21",
     "svelte": "^3.46.2"
   }
diff --git a/packages/server/package.json b/packages/server/package.json
index 23c0b72e39..0e05c1d2e0 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "description": "Budibase Web Server",
   "main": "src/index.ts",
   "repository": {
@@ -68,10 +68,10 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@apidevtools/swagger-parser": "^10.0.3",
-    "@budibase/backend-core": "^1.0.105-alpha.29",
-    "@budibase/client": "^1.0.105-alpha.29",
+    "@budibase/backend-core": "^1.0.105-alpha.30",
+    "@budibase/client": "^1.0.105-alpha.30",
     "@budibase/pro": "^1.0.0",
-    "@budibase/string-templates": "^1.0.105-alpha.29",
+    "@budibase/string-templates": "^1.0.105-alpha.30",
     "@bull-board/api": "^3.7.0",
     "@bull-board/koa": "^3.7.0",
     "@elastic/elasticsearch": "7.10.0",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 542daf2bab..9ad7d25bf7 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 45c87e5a70..819373cebb 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "1.0.105-alpha.29",
+  "version": "1.0.105-alpha.30",
   "description": "Budibase background service",
   "main": "src/index.ts",
   "repository": {
@@ -31,9 +31,9 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "dependencies": {
-    "@budibase/backend-core": "^1.0.105-alpha.29",
+    "@budibase/backend-core": "^1.0.105-alpha.30",
     "@budibase/pro": "^1.0.0",
-    "@budibase/string-templates": "^1.0.105-alpha.29",
+    "@budibase/string-templates": "^1.0.105-alpha.30",
     "@koa/router": "^8.0.0",
     "@sentry/node": "6.17.7",
     "@techpass/passport-openidconnect": "^0.3.0",