From 7d8cb16824d34cdc3fae80e169395ec7ddd6a687 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 13 Oct 2020 10:59:24 +0100
Subject: [PATCH] prevent duplicate table names

---
 .../popovers/CreateEditColumnPopover.svelte   | 22 ++++++++++---------
 .../modals/CreateTableModal.svelte            | 17 ++++++++++++--
 .../popovers/EditTablePopover.svelte          | 19 ++++++++++++++--
 .../standard-components/src/Navigation.svelte | 12 ++++++----
 4 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
index 2e2ad6f158..bc076266e5 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
+++ b/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
-    secondary
-    thin
-    label="Type"
-    on:change={handleFieldConstraints}
-    bind:value={field.type}>
-    {#each Object.values(fieldDefinitions) as field}
-      <option value={field.type}>{field.name}</option>
-    {/each}
-  </Select>
+  {#if !originalName}
+    <Select
+      secondary
+      thin
+      label="Type"
+      on:change={handleFieldConstraints}
+      bind:value={field.type}>
+      {#each Object.values(fieldDefinitions) as field}
+        <option value={field.type}>{field.name}</option>
+      {/each}
+    </Select>
+  {/if}
 
   {#if field.type !== 'link'}
     <Toggle
diff --git a/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte
index ed369f45d3..cbb7a8fba1 100644
--- a/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte
+++ b/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 />
diff --git a/packages/builder/src/components/backend/ModelNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/ModelNavigator/popovers/EditTablePopover.svelte
index 028b78a1e8..36ccbb4800 100644
--- a/packages/builder/src/components/backend/ModelNavigator/popovers/EditTablePopover.svelte
+++ b/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}
diff --git a/packages/standard-components/src/Navigation.svelte b/packages/standard-components/src/Navigation.svelte
index 8fafffc0cd..fc05e97538 100644
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@@ -36,10 +36,14 @@
 </script>
 
 <nav use:cssVars={cssVariables}>
-  <a href="/">
-    <img class="logo" alt="logo" src={logoUrl} height="48" />
-    <span>{title}</span>
-  </a>
+  {#if logoUrl}
+    <a href="/">
+      <img class="logo" alt="logo" src={logoUrl} height="48" />
+      <span>{title}</span>
+    </a>
+  {:else}
+    <div />
+  {/if}
   <div class="menu-items" bind:this={itemContainer} />
 </nav>