Fix table imports

packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte

@@ -1,14 +1,7 @@
 <script>
-  import {
-    ActionButton,
-    Label,
-    Button,
-    Body,
-    Layout,
-    notifications,
-  } from "@budibase/bbui"
+  import { ActionButton, Button, Body, notifications } from "@budibase/bbui"
   import DetailPopover from "components/common/DetailPopover.svelte"
-  import TableDataImport from "components/backend/TableNavigator/TableDataImport.svelte"
+  import ExistingTableDataImport from "components/backend/TableNavigator/ExistingTableDataImport.svelte"
   import { createEventDispatcher } from "svelte"
   import { API } from "api"
 
@@ -72,9 +65,7 @@
     Import rows to an existing table from a CSV or JSON file. Only columns from
     the file which exist in the table will be imported.
   </Body>
-  <Layout gap="XS" noPadding>
-    <Label grey extraSmall>CSV or JSON file to import</Label>
-    <TableDataImport
+  <ExistingTableDataImport
     {tableId}
     {tableType}
     bind:rows
@@ -82,7 +73,6 @@
     bind:displayColumn
     bind:identifierFields
   />
-  </Layout>
   <div>
     <Button cta disabled={loading || !allValid} on:click={importData}>
       Import

packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte

@@ -4,7 +4,7 @@
     BBReferenceFieldSubType,
     SourceName,
   } from "@budibase/types"
-  import { Select, Toggle, Multiselect } from "@budibase/bbui"
+  import { Select, Toggle, Multiselect, Label, Layout } from "@budibase/bbui"
   import { DB_TYPE_INTERNAL } from "constants/backend"
   import { API } from "api"
   import { parseFile } from "./utils"
@@ -140,7 +140,10 @@
   }
 </script>
 
-<div class="dropzone">
+<Layout gap="S" noPadding>
+  <Layout noPadding gap="XS">
+    <Label grey extraSmall>CSV or JSON file to import</Label>
+    <div class="dropzone">
       <input
         disabled={!schema || loading}
         id="file-upload"
@@ -159,11 +162,13 @@
           Upload
         {/if}
       </label>
-</div>
-{#if fileName && Object.keys(validation).length === 0}
-  <p>No valid fields, try another file</p>
-{:else if rows.length > 0 && !error}
-  <div class="schema-fields">
+    </div>
+  </Layout>
+
+  {#if fileName && Object.keys(validation).length === 0}
+    <div>No valid fields - please try another file.</div>
+  {:else if fileName && rows.length > 0 && !error}
+    <div>
       {#each Object.keys(validation) as name}
         <div class="field">
           <span>{name}</span>
@@ -185,7 +190,6 @@
         </div>
       {/each}
     </div>
-  <br />
     <!-- SQL Server doesn't yet support overwriting rows by existing keys -->
     {#if datasource?.source !== SourceName.SQL_SERVER}
       <Toggle
@@ -203,21 +207,24 @@
           bind:value={identifierFields}
         />
       {:else}
-      <p>Rows will be updated based on the table's primary key.</p>
+        <div>Rows will be updated based on the table's primary key.</div>
       {/if}
     {/if}
     {#if invalidColumns.length > 0}
-    <p class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">
-      The following columns are present in the data you wish to import, but do
-      not match the schema of this table and will be ignored.
-    </p>
-    <ul class="ignoredList">
+      <Layout noPadding gap="XS">
+        <div>
+          The following columns are present in the data you wish to import, but
+          do not match the schema of this table and will be ignored:
+        </div>
+        <div>
           {#each invalidColumns as column}
-        <li>{column}</li>
+            - {column}<br />
           {/each}
-    </ul>
+        </div>
+      </Layout>
     {/if}
-{/if}
+  {/if}
+</Layout>
 
 <style>
   .dropzone {
@@ -228,11 +235,9 @@
     border-radius: 10px;
     transition: all 0.3s;
   }
-
   input {
     display: none;
   }
-
   label {
     font-family: var(--font-sans);
     cursor: pointer;
@@ -240,7 +245,6 @@
     box-sizing: border-box;
     overflow: hidden;
     border-radius: var(--border-radius-s);
-    color: var(--ink);
     padding: var(--spacing-m) var(--spacing-l);
     transition: all 0.2s ease 0s;
     display: inline-flex;
@@ -254,20 +258,14 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    background-color: var(--grey-2);
-    font-size: var(--font-size-xs);
+    background-color: var(--spectrum-global-color-gray-300);
+    font-size: var(--font-size-s);
     line-height: normal;
     border: var(--border-transparent);
   }
-
   .uploaded {
-    color: var(--blue);
+    color: var(--spectrum-global-color-blue-600);
   }
-
-  .schema-fields {
-    margin-top: var(--spacing-xl);
-  }
-
   .field {
     display: grid;
     grid-template-columns: 2fr 2fr 1fr auto;
@@ -276,23 +274,14 @@
     grid-gap: var(--spacing-m);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
-
   .fieldStatusSuccess {
     color: var(--green);
     justify-self: center;
     font-weight: 600;
   }
-
   .fieldStatusFailure {
     color: var(--red);
     justify-self: center;
     font-weight: 600;
   }
-
-  .ignoredList {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    font-size: var(--spectrum-global-dimension-font-size-75);
-  }
 </style>

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Select, Icon, Layout } from "@budibase/bbui"
+  import { Select, Icon, Layout, Label } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
   import { utils } from "@budibase/shared-core"
   import { canBeDisplayColumn } from "@budibase/frontend-core"
@@ -185,6 +185,10 @@
 </script>
 
 <Layout noPadding gap="S">
+  <Layout gap="XS" noPadding>
+    <Label grey extraSmall>
+      Create a Table from a CSV or JSON file (Optional)
+    </Label>
     <div class="dropzone">
       <input
         bind:this={fileInput}
@@ -204,6 +208,7 @@
         {/if}
       </label>
     </div>
+  </Layout>
 
   {#if rawRows.length > 0 && !error}
     <div>

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -1,13 +1,7 @@
 <script>
   import { goto, url } from "@roxi/routify"
   import { tables, datasources } from "stores/builder"
-  import {
-    notifications,
-    Input,
-    Label,
-    ModalContent,
-    Layout,
-  } from "@budibase/bbui"
+  import { notifications, Input, ModalContent } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import {
     BUDIBASE_INTERNAL_DB_ID,
@@ -101,11 +95,6 @@
     bind:value={name}
     {error}
   />
-  <div>
-    <Layout gap="XS" noPadding>
-      <Label grey extraSmall
-        >Create a Table from a CSV or JSON file (Optional)</Label
-      >
   <TableDataImport
     {promptUpload}
     bind:rows
@@ -113,6 +102,4 @@
     bind:allValid
     bind:displayColumn
   />
-    </Layout>
-  </div>
 </ModalContent>