Change create table popover to modal to better support data import which can be long

packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte

@@ -2,7 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import ListItem from "./ListItem.svelte"
-  import CreateTablePopover from "./popovers/CreateTablePopover.svelte"
+  import CreateTableModal from "./modals/CreateTableModal.svelte"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
   import { Heading } from "@budibase/bbui"
@@ -28,7 +28,7 @@
       <div class="components-list-container">
         <Heading small>Tables</Heading>
         <Spacer medium />
-        <CreateTablePopover />
+        <CreateTableModal />
         <div class="hierarchy-items-container">
           {#each $backendUiStore.models as model}
             <ListItem

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

@@ -0,0 +1,56 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  import { backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import { Button, Input, Label } from "@budibase/bbui"
+  import Spinner from "components/common/Spinner.svelte"
+  import TableDataImport from "../TableDataImport.svelte"
+  import analytics from "analytics"
+  import { Modal } from "components/common/Modal"
+
+  let visible = false
+  let name
+  let dataImport
+  let loading = false
+
+  function resetState() {
+    name = ""
+    dataImport = undefined
+    loading = false
+  }
+
+  async function saveTable() {
+    loading = true
+    const model = await backendUiStore.actions.models.save({
+      name,
+      schema: dataImport.schema || {},
+      dataImport,
+    })
+    notifier.success(`Table ${name} created successfully.`)
+    $goto(`./model/${model._id}`)
+    analytics.captureEvent("Table Created", { name })
+    visible = false
+    resetState()
+  }
+
+  function onClosed() {
+    visible = false
+    resetState()
+  }
+</script>
+
+<Button primary wide on:click={() => (visible = true)}>Create New Table</Button>
+<Modal
+  bind:visible
+  {loading}
+  title="Create Table"
+  on:hide={onClosed}
+  confirmText="Create"
+  onConfirm={saveTable}
+  disabled={!name || (dataImport && !dataImport.valid)}>
+  <Input data-cy="table-name-input" thin label="Table Name" bind:value={name} />
+  <div>
+    <Label grey extraSmall>Create Table from CSV (Optional)</Label>
+    <TableDataImport bind:dataImport />
+  </div>
+</Modal>

packages/builder/src/components/backend/ModelNavigator/popovers/CreateTablePopover.svelte

@@ -1,84 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import { Popover, Button, Icon, Input, Select, Label } from "@budibase/bbui"
-  import Spinner from "components/common/Spinner.svelte"
-  import TableDataImport from "../TableDataImport.svelte"
-  import analytics from "analytics"
-
-  let anchor
-  let dropdown
-  let name
-  let dataImport
-  let loading
-
-  async function saveTable() {
-    loading = true
-    const model = await backendUiStore.actions.models.save({
-      name,
-      schema: dataImport.schema || {},
-      dataImport,
-    })
-    notifier.success(`Table ${name} created successfully.`)
-    $goto(`./model/${model._id}`)
-    analytics.captureEvent("Table Created", { name })
-    name = ""
-    dropdown.hide()
-    loading = false
-  }
-
-  const onClosed = () => {
-    name = ""
-    dropdown.hide()
-  }
-</script>
-
-<div bind:this={anchor}>
-  <Button primary wide on:click={dropdown.show}>Create New Table</Button>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <div class="actions">
-    <h5>Create Table</h5>
-    <Input
-      data-cy="table-name-input"
-      thin
-      label="Table Name"
-      bind:value={name} />
-    <div>
-      <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-      <TableDataImport bind:dataImport />
-    </div>
-    <footer>
-      <Button secondary on:click={onClosed}>Cancel</Button>
-      <Button
-        disabled={!name || (dataImport && !dataImport.valid)}
-        primary
-        on:click={saveTable}>
-        <span style={`margin-right: ${loading ? '10px' : 0};`}>Save</span>
-        {#if loading}
-          <Spinner size="10" />
-        {/if}
-      </Button>
-    </footer>
-  </div>
-</Popover>
-
-<style>
-  .actions {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    min-width: 400px;
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-</style>