ability to delete databases

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>

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"

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 {