prevent duplicate table names

packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte

@@ -65,16 +65,18 @@
 <div class="actions">
   <Input label="Name" thin bind:value={field.name} />
 
-  <Select
+  {#if !originalName}
-    secondary
+    <Select
-    thin
+      secondary
-    label="Type"
+      thin
-    on:change={handleFieldConstraints}
+      label="Type"
-    bind:value={field.type}>
+      on:change={handleFieldConstraints}
-    {#each Object.values(fieldDefinitions) as field}
+      bind:value={field.type}>
-      <option value={field.type}>{field.name}</option>
+      {#each Object.values(fieldDefinitions) as field}
-    {/each}
+        <option value={field.type}>{field.name}</option>
-  </Select>
+      {/each}
+    </Select>
+  {/if}
 
   {#if field.type !== 'link'}
     <Toggle

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

@@ -20,10 +20,21 @@
   let modal
   let name
   let dataImport
+  let error = ""
 
   function resetState() {
     name = ""
     dataImport = undefined
+    error = ""
+  }
+
+  function checkValid(evt) {
+    const tableName = evt.target.value
+    if ($backendUiStore.models.some(model => model.name === tableName)) {
+      error = `Table with name ${tableName} already exists. Please choose another name.`
+      return
+    }
+    error = ""
   }
 
   async function saveTable() {
@@ -61,12 +72,14 @@
     title="Create Table"
     confirmText="Create"
     onConfirm={saveTable}
-    disabled={!name || (dataImport && !dataImport.valid)}>
+    disabled={error || !name || (dataImport && !dataImport.valid)}>
     <Input
       data-cy="table-name-input"
       thin
       label="Table Name"
-      bind:value={name} />
+      on:input={checkValid}
+      bind:value={name}
+      {error} />
     <div>
       <Label grey extraSmall>Create Table from CSV (Optional)</Label>
       <TableDataImport bind:dataImport />

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

@@ -11,6 +11,8 @@
   let dropdown
   let editing
   let confirmDeleteDialog
+  let error = ""
+  let originalName = table.name
 
   $: fields = Object.keys(table.schema)
 
@@ -39,6 +41,15 @@
     notifier.success("Table renamed successfully")
     hideEditor()
   }
+
+  function checkValid(evt) {
+    const tableName = evt.target.value
+    if (originalName !== tableName && $backendUiStore.models.some(model => model.name === tableName)) {
+      error = `Table with name ${tableName} already exists. Please choose another name.`
+      return
+    }
+    error = ""
+  }
 </script>
 
 <div bind:this={anchor} class="icon" on:click={dropdown.show}>
@@ -48,7 +59,11 @@
   {#if editing}
     <div class="actions">
       <h5>Edit Table</h5>
-      <Input label="Table Name" thin bind:value={table.name} />
+      <Input 
+        label="Table Name" thin bind:value={table.name} 
+        on:input={checkValid}
+        {error}
+      />
       <Select
         label="Primary Display Column"
         thin
@@ -61,7 +76,7 @@
       </Select>
       <footer>
         <Button secondary on:click={hideEditor}>Cancel</Button>
-        <Button primary on:click={save}>Save</Button>
+        <Button primary disabled={error} on:click={save}>Save</Button>
       </footer>
     </div>
   {:else}

packages/standard-components/src/Navigation.svelte

@@ -36,10 +36,14 @@
 </script>
 
 <nav use:cssVars={cssVariables}>
-  <a href="/">
+  {#if logoUrl}
-    <img class="logo" alt="logo" src={logoUrl} height="48" />
+    <a href="/">
-    <span>{title}</span>
+      <img class="logo" alt="logo" src={logoUrl} height="48" />
-  </a>
+      <span>{title}</span>
+    </a>
+  {:else}
+    <div />
+  {/if}
   <div class="menu-items" bind:this={itemContainer} />
 </nav>