use params to select DB rather than store

packages/builder/src/components/nav/DatabasesList.svelte

@@ -1,5 +1,6 @@
 <script>
   import { tick, onMount } from "svelte"
+  import { goto } from "@sveltech/routify"
   import { store, backendUiStore } from "builderStore"
   import api from "builderStore/api"
   import getIcon from "../common/icon"
@@ -44,7 +45,9 @@
         </span>
         <button
           class:active={database.id === $backendUiStore.selectedDatabase.id}
-          on:click={() => selectDatabase(database)}>
+          on:click={() => {
+            $goto(`./database/${database.id}`), selectDatabase(database)
+          }}>
           {database.name}
         </button>
         <i

packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte

@@ -0,0 +1,43 @@
+<script>
+  import ModelDataTable from "components/database/ModelDataTable"
+  import { store, backendUiStore } from "builderStore"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import * as api from "components/database/ModelDataTable/api"
+
+  export let selectedDatabase
+
+  let selectedRecord
+
+  async function selectRecord(record) {
+    selectedRecord = await api.loadRecord(record.key, {
+      appname: $store.appname,
+      instanceId: selectedDatabase,
+    })
+  }
+
+  $: breadcrumbs = $backendUiStore.breadcrumbs.join(" / ")
+</script>
+
+<div class="database-actions">
+  <div class="budibase__label--big">{breadcrumbs}</div>
+  {#if $backendUiStore.selectedDatabase.id}
+    <ActionButton
+      primary
+      on:click={() => {
+        selectedRecord = null
+        backendUiStore.actions.modals.show('RECORD')
+      }}>
+      Create new record
+    </ActionButton>
+  {/if}
+</div>
+{#if $backendUiStore.selectedDatabase.id}
+  <ModelDataTable {selectRecord} />
+{:else}Please select a database{/if}
+
+<style>
+  .database-actions {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

packages/builder/src/pages/[application]/backend/database/_layout.svelte

@@ -0,0 +1,76 @@
+<script>
+  import ModelDataTable from "components/database/ModelDataTable"
+  import { store, backendUiStore } from "builderStore"
+  import getIcon from "components/common/icon"
+  import DropdownButton from "components/common/DropdownButton.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import Modal from "components/common/Modal.svelte"
+  import * as api from "components/database/ModelDataTable/api"
+  import {
+    CreateEditRecordModal,
+    CreateEditModelModal,
+    CreateEditViewModal,
+    CreateDatabaseModal,
+    DeleteRecordModal,
+    CreateUserModal,
+  } from "components/database/ModelDataTable/modals"
+
+  let selectedRecord
+
+  async function selectRecord(record) {
+    selectedRecord = await api.loadRecord(record.key, {
+      appname: $store.appname,
+      instanceId: $backendUiStore.selectedDatabase.id,
+    })
+  }
+
+  function onClosed() {
+    backendUiStore.actions.modals.hide()
+  }
+
+  $: recordOpen = $backendUiStore.visibleModal === "RECORD"
+  $: modelOpen = $backendUiStore.visibleModal === "MODEL"
+  $: viewOpen = $backendUiStore.visibleModal === "VIEW"
+  $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
+  $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
+  $: userOpen = $backendUiStore.visibleModal === "USER"
+</script>
+
+<Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
+  {#if recordOpen}
+    <CreateEditRecordModal record={selectedRecord} {onClosed} />
+  {/if}
+  {#if modelOpen}
+    <CreateEditModelModal {onClosed} />
+  {/if}
+  {#if viewOpen}
+    <CreateEditViewModal {onClosed} />
+  {/if}
+  {#if databaseOpen}
+    <CreateDatabaseModal {onClosed} />
+  {/if}
+  {#if deleteRecordOpen}
+    <DeleteRecordModal record={selectedRecord} {onClosed} />
+  {/if}
+  {#if userOpen}
+    <CreateUserModal {onClosed} />
+  {/if}
+</Modal>
+
+<div class="root">
+  <div class="node-view">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .root {
+    height: 100%;
+    position: relative;
+  }
+
+  .node-view {
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+</style>

packages/builder/src/pages/[application]/backend/database/index.svelte

@@ -1,97 +1 @@
-<script>
+Please select a database
-  import ModelDataTable from "components/database/ModelDataTable"
-  import { store, backendUiStore } from "builderStore"
-  import getIcon from "components/common/icon"
-  import DropdownButton from "components/common/DropdownButton.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import Modal from "components/common/Modal.svelte"
-  import * as api from "components/database/ModelDataTable/api"
-  import {
-    CreateEditRecordModal,
-    CreateEditModelModal,
-    CreateEditViewModal,
-    CreateDatabaseModal,
-    DeleteRecordModal,
-    CreateUserModal,
-  } from "components/database/ModelDataTable/modals"
-
-  let selectedRecord
-
-  async function selectRecord(record) {
-    selectedRecord = await api.loadRecord(record.key, {
-      appname: $store.appname,
-      instanceId: $backendUiStore.selectedDatabase.id,
-    })
-  }
-
-  function onClosed() {
-    backendUiStore.actions.modals.hide()
-  }
-
-  $: recordOpen = $backendUiStore.visibleModal === "RECORD"
-  $: modelOpen = $backendUiStore.visibleModal === "MODEL"
-  $: viewOpen = $backendUiStore.visibleModal === "VIEW"
-  $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
-  $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
-  $: userOpen = $backendUiStore.visibleModal === "USER"
-  $: breadcrumbs = $backendUiStore.breadcrumbs.join(" / ")
-</script>
-
-<Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
-  {#if recordOpen}
-    <CreateEditRecordModal record={selectedRecord} {onClosed} />
-  {/if}
-  {#if modelOpen}
-    <CreateEditModelModal {onClosed} />
-  {/if}
-  {#if viewOpen}
-    <CreateEditViewModal {onClosed} />
-  {/if}
-  {#if databaseOpen}
-    <CreateDatabaseModal {onClosed} />
-  {/if}
-  {#if deleteRecordOpen}
-    <DeleteRecordModal record={selectedRecord} {onClosed} />
-  {/if}
-  {#if userOpen}
-    <CreateUserModal {onClosed} />
-  {/if}
-</Modal>
-
-<div class="root">
-  <div class="node-view">
-    <div class="database-actions">
-      <div class="budibase__label--big">{breadcrumbs}</div>
-      {#if $backendUiStore.selectedDatabase.id}
-        <ActionButton
-          primary
-          on:click={() => {
-            selectedRecord = null
-            backendUiStore.actions.modals.show('RECORD')
-          }}>
-          Create new record
-        </ActionButton>
-      {/if}
-    </div>
-    {#if $backendUiStore.selectedDatabase.id}
-      <ModelDataTable {selectRecord} />
-    {:else}Please select a database{/if}
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    position: relative;
-  }
-
-  .node-view {
-    overflow-y: auto;
-    flex: 1 1 auto;
-  }
-
-  .database-actions {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>