From c82c298a9301ee2b6191e9ef19700c622da16c13 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Apr 2021 09:40:44 +0100
Subject: [PATCH] Update create table modal to use new forms

---
 .../TableNavigator/TableDataImport.svelte     | 41 ++++++++++++-------
 .../modals/CreateTableModal.svelte            |  1 -
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index ea9cb644e0..806961476e 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -91,9 +91,24 @@
   }
 
   const handleTypeChange = column => evt => {
-    schema[column].type = evt.target.value
+    schema[column].type = evt.detail
     validateCSV()
   }
+
+  const typeOptions = [
+    {
+      label: "Text",
+      value: "string",
+    },
+    {
+      label: "Number",
+      value: "number",
+    },
+    {
+      label: "Date",
+      value: "datetime",
+    },
+  ]
 </script>
 
 <div class="dropzone">
@@ -108,14 +123,12 @@
       <div class="field">
         <span>{columnName}</span>
         <Select
-          secondary
-          thin
           bind:value={schema[columnName].type}
-          on:change={handleTypeChange(columnName)}>
-          <option value={'string'}>Text</option>
-          <option value={'number'}>Number</option>
-          <option value={'datetime'}>Date</option>
-        </Select>
+          on:change={handleTypeChange(columnName)}
+          options={typeOptions}
+          placeholder={null}
+          getOptionLabel={option => option.label}
+          getOptionValue={option => option.value} />
         <span class="field-status" class:error={!schema[columnName].success}>
           {schema[columnName].success ? 'Success' : 'Failure'}
         </span>
@@ -128,12 +141,10 @@
 </div>
 {#if fields.length}
   <div class="display-column">
-    <Label extraSmall grey>Display Column</Label>
-    <Select thin secondary bind:value={primaryDisplay}>
-      {#each fields as field}
-        <option value={field}>{field}</option>
-      {/each}
-    </Select>
+    <Select
+      label="Display Column"
+      bind:value={primaryDisplay}
+      options={fields} />
   </div>
 {/if}
 
@@ -201,7 +212,7 @@
 
   .field {
     display: grid;
-    grid-template-columns: 2fr 4fr 1fr 1fr;
+    grid-template-columns: 2fr 2fr 1fr auto;
     margin-top: var(--spacing-m);
     align-items: center;
     grid-gap: var(--spacing-m);
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index f6a4298521..3a82dc3815 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -92,7 +92,6 @@
 <ModalContent
   title="Create Table"
   confirmText="Create"
-  size="large"
   onConfirm={saveTable}
   disabled={error || !name || (dataImport && !dataImport.valid)}>
   <Input