From 68aca8b6302b040c5edd2e694a0247072e6ee695 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Apr 2021 13:07:38 +0100
Subject: [PATCH] Update some more parts of the builder to use new form
 components

---
 .../common/DrawerBindableInput.svelte         |  3 +--
 .../EventsEditor/actions/SaveFields.svelte    | 16 +++++------
 .../EventsEditor/actions/SaveRow.svelte       | 27 +++++++++----------
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index 647638e8c9..fecce0705b 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -32,9 +32,8 @@
 
 <div class="control">
   <Input
-    {thin}
     value={readableValue}
-    on:change={event => onChange(event.target.value)}
+    on:change={event => onChange(event.detail)}
     {placeholder} />
   <div class="icon" on:click={bindingDrawer.show}>
     <Icon name="lightning" />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index 5b9237fb93..245d13a113 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@@ -53,15 +53,9 @@
     <Label small>{fieldLabel}</Label>
     {#if schemaFields}
       <Select
-        thin
-        secondary
         value={field[0]}
-        on:change={event => updateFieldName(idx, event.target.value)}>
-        <option value="" />
-        {#each schemaFields as schemaField}
-          <option value={schemaField.name}>{schemaField.name}</option>
-        {/each}
-      </Select>
+        on:change={event => updateFieldName(idx, event.detail)}
+        options={schemaFields.map(field => field.name)} />
     {:else}
       <Input
         thin
@@ -76,7 +70,11 @@
       bindings={bindableProperties}
       on:change={event => updateFieldValue(idx, event.detail)} />
     <div class="remove-field-container">
-      <Button icon="Close" size="S" quiet on:click={() => removeField(field[0])} />
+      <Button
+        icon="Close"
+        size="S"
+        quiet
+        on:click={() => removeField(field[0])} />
     </div>
   {/each}
   <div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
index a94a5e3002..15ab91983a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
@@ -15,7 +15,7 @@
     $store.selectedComponentId
   )
   $: schemaFields = getSchemaFields(parameters?.tableId)
-  $: tableOptions = $tables || []
+  $: tableOptions = $tables.list || []
 
   const getSchemaFields = tableId => {
     const { schema } = getSchemaForDatasource({ type: "table", tableId })
@@ -35,20 +35,19 @@
   </Body>
   <div class="fields">
     <Label small>Data Source</Label>
-    <Select thin secondary bind:value={parameters.providerId}>
-      <option value="">None</option>
-      {#each dataProviderComponents as provider}
-        <option value={provider._id}>{provider._instanceName}</option>
-      {/each}
-    </Select>
+    <Select
+      bind:value={parameters.providerId}
+      options={dataProviderComponents}
+      placeholder="None"
+      getOptionLabel={option => option._instanceName}
+      getOptionValue={option => option._id} />
 
     <Label small>Table</Label>
-    <Select thin secondary bind:value={parameters.tableId}>
-      <option value="" />
-      {#each tableOptions as table}
-        <option value={table._id}>{table.name}</option>
-      {/each}
-    </Select>
+    <Select
+      bind:value={parameters.tableId}
+      options={tableOptions}
+      getOptionLabel={option => option.name}
+      getOptionValue={option => option._id} />
 
     {#if parameters.tableId}
       <SaveFields
@@ -74,7 +73,7 @@
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
     grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
+    align-items: center;
   }
 
   .fields :global(> div:nth-child(2)),