From 33a2dbd275d6b3c213bfbf0b1f7959ed06c6c271 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 31 Mar 2020 17:53:34 +0100
Subject: [PATCH 1/3] ability to delete databases

---
 .../modals/DeleteDatabase.svelte              | 35 +++++++++++++++++++
 .../database/ModelDataTable/modals/index.js   |  1 +
 packages/builder/src/nav/DatabasesList.svelte | 17 +++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 packages/builder/src/database/ModelDataTable/modals/DeleteDatabase.svelte

diff --git a/packages/builder/src/database/ModelDataTable/modals/DeleteDatabase.svelte b/packages/builder/src/database/ModelDataTable/modals/DeleteDatabase.svelte
new file mode 100644
index 0000000000..10fe09fa55
--- /dev/null
+++ b/packages/builder/src/database/ModelDataTable/modals/DeleteDatabase.svelte
@@ -0,0 +1,35 @@
+<script>
+  import Modal from "../../../common/Modal.svelte"
+  import { store } from "../../../builderStore"
+  import ActionButton from "../../../common/ActionButton.svelte"
+  import * as api from "../api"
+
+  export let onClosed
+
+  let databaseName
+
+  // async function deleteDatabase() {
+  //   const response = await api.deleteDatabase($)
+  //   store.createDatabaseForApp(response)
+  //   onClosed()
+  // }
+</script>
+
+<section>
+  Are you sure you want to delete {database}?
+  <footer>
+    <ActionButton disabled={!databaseName} on:click={deleteDatabase}>
+      Delete
+    </ActionButton>
+</section>
+
+<style>
+  footer {
+    position: absolute;
+    padding: 20px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
+  }
+</style>
diff --git a/packages/builder/src/database/ModelDataTable/modals/index.js b/packages/builder/src/database/ModelDataTable/modals/index.js
index c986160961..7ddb1efd43 100644
--- a/packages/builder/src/database/ModelDataTable/modals/index.js
+++ b/packages/builder/src/database/ModelDataTable/modals/index.js
@@ -4,3 +4,4 @@ export { default as CreateEditModelModal } from "./CreateEditModel.svelte"
 export { default as CreateEditViewModal } from "./CreateEditView.svelte"
 export { default as CreateDatabaseModal } from "./CreateDatabase.svelte"
 export { default as CreateUserModal } from "./CreateUser.svelte"
+export { default as DeleteDatabaseModal } from "./DeleteDatabase.svelte"
diff --git a/packages/builder/src/nav/DatabasesList.svelte b/packages/builder/src/nav/DatabasesList.svelte
index b531d34351..441a28484c 100644
--- a/packages/builder/src/nav/DatabasesList.svelte
+++ b/packages/builder/src/nav/DatabasesList.svelte
@@ -1,6 +1,7 @@
 <script>
   import { tick } from "svelte"
   import { store, backendUiStore } from "../builderStore"
+  import api from "../builderStore/api"
   import getIcon from "../common/icon"
   import { CheckIcon } from "../common/Icons"
 
@@ -13,6 +14,17 @@
     backendUiStore.actions.views.select(views[0])
     backendUiStore.actions.database.select(database)
   }
+
+  async function deleteDatabase(database) {
+    const DELETE_DATABASE_URL = `/_builder/instance/_master/0/api/record/applications/${$store.appId}/instances/${database.id}`
+    const response = await api.delete(DELETE_DATABASE_URL)
+    store.update(state => {
+      state.appInstances = state.appInstances.filter(
+        db => db.id !== database.id
+      )
+      return state
+    })
+  }
 </script>
 
 <div class="root">
@@ -30,6 +42,9 @@
           on:click={() => selectDatabase(database)}>
           {database.name}
         </button>
+        <i
+          class="ri-close-line hoverable uk-margin-small-left"
+          on:click={() => deleteDatabase(database)} />
       </li>
     {/each}
   </ul>
@@ -53,6 +68,8 @@
 
   li {
     margin: 0.5rem 0;
+    display: flex;
+    align-items: center;
   }
 
   button {

From 125af724e524614396d0d3eda6b824627b247d72 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 31 Mar 2020 17:58:47 +0100
Subject: [PATCH 2/3] tidy up

---
 .../modals/DeleteDatabase.svelte              | 35 -------------------
 .../database/ModelDataTable/modals/index.js   |  1 -
 2 files changed, 36 deletions(-)
 delete mode 100644 packages/builder/src/database/ModelDataTable/modals/DeleteDatabase.svelte

diff --git a/packages/builder/src/database/ModelDataTable/modals/DeleteDatabase.svelte b/packages/builder/src/database/ModelDataTable/modals/DeleteDatabase.svelte
deleted file mode 100644
index 10fe09fa55..0000000000
--- a/packages/builder/src/database/ModelDataTable/modals/DeleteDatabase.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import Modal from "../../../common/Modal.svelte"
-  import { store } from "../../../builderStore"
-  import ActionButton from "../../../common/ActionButton.svelte"
-  import * as api from "../api"
-
-  export let onClosed
-
-  let databaseName
-
-  // async function deleteDatabase() {
-  //   const response = await api.deleteDatabase($)
-  //   store.createDatabaseForApp(response)
-  //   onClosed()
-  // }
-</script>
-
-<section>
-  Are you sure you want to delete {database}?
-  <footer>
-    <ActionButton disabled={!databaseName} on:click={deleteDatabase}>
-      Delete
-    </ActionButton>
-</section>
-
-<style>
-  footer {
-    position: absolute;
-    padding: 20px;
-    width: 100%;
-    bottom: 0;
-    left: 0;
-    background: #fafafa;
-  }
-</style>
diff --git a/packages/builder/src/database/ModelDataTable/modals/index.js b/packages/builder/src/database/ModelDataTable/modals/index.js
index 7ddb1efd43..c986160961 100644
--- a/packages/builder/src/database/ModelDataTable/modals/index.js
+++ b/packages/builder/src/database/ModelDataTable/modals/index.js
@@ -4,4 +4,3 @@ export { default as CreateEditModelModal } from "./CreateEditModel.svelte"
 export { default as CreateEditViewModal } from "./CreateEditView.svelte"
 export { default as CreateDatabaseModal } from "./CreateDatabase.svelte"
 export { default as CreateUserModal } from "./CreateUser.svelte"
-export { default as DeleteDatabaseModal } from "./DeleteDatabase.svelte"

From 8dce9789b1249d081091872c772719fffc128ef8 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 31 Mar 2020 18:11:12 +0100
Subject: [PATCH 3/3] change icon

---
 packages/builder/src/nav/DatabasesList.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/nav/DatabasesList.svelte b/packages/builder/src/nav/DatabasesList.svelte
index 441a28484c..ba40b8c1b4 100644
--- a/packages/builder/src/nav/DatabasesList.svelte
+++ b/packages/builder/src/nav/DatabasesList.svelte
@@ -36,15 +36,15 @@
             <CheckIcon />
           {/if}
         </span>
-
+        <i
+          class="ri-delete-bin-7-line hoverable uk-margin-small-left"
+          on:click={() => deleteDatabase(database)} />
         <button
           class:active={database.id === $backendUiStore.selectedDatabase.id}
           on:click={() => selectDatabase(database)}>
           {database.name}
         </button>
-        <i
-          class="ri-close-line hoverable uk-margin-small-left"
-          on:click={() => deleteDatabase(database)} />
+
       </li>
     {/each}
   </ul>