Builder data section routing refactor (#8996)

* Improve theming with spectrum badges and dedupe spectrum label usage

* Update data section nav to match designs and use panel component

* Fix main content layout in data section

* Update data section routing for tables

* Improve data section routing for tables to account for edge cases

* Update internal and sample datasource routing

* Update external datasource routing

* Update routing for queries and make a top level concept like everything else

* Update routing for views

* Fix undefined reference when deleting datasource

* Reduce network calls and fix issues with stale datasourcenavigator state

* Update routing for REST queries and unify routes for normal queries and REST queries

* Lint

* Fix links for queries from datasource details page

* Remove redundant API calls and improve table deletion logic

* Improve data entity deletion logic and redirection and fix query details keying

* Improve determination of selected item in datasource tree

* Lint

* Fix BBUI import

* Fix datasource navigator selected state not working for internal DB or sample data

packages/bbui/src/Badge/Badge.svelte

@@ -10,10 +10,13 @@
   export let green = false
   export let active = false
   export let inactive = false
+  export let hoverable = false
 </script>
 
 <span
+  on:click
   class="spectrum-Label"
+  class:hoverable
   class:spectrum-Label--small={size === "S"}
   class:spectrum-Label--large={size === "L"}
   class:spectrum-Label--grey={grey}
@@ -27,3 +30,13 @@
 >
   <slot />
 </span>
+
+<style>
+  .spectrum-Label--grey {
+    background-color: var(--spectrum-global-color-gray-500);
+    font-weight: 600;
+  }
+  .hoverable:hover {
+    cursor: pointer;
+  }
+</style>

packages/bbui/src/Table/RelationshipRenderer.svelte

@@ -1,6 +1,7 @@
 <script>
   import "@spectrum-css/label/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
+  import Badge from "../Badge/Badge.svelte"
 
   export let row
   export let value
@@ -24,17 +25,11 @@
 
 {#each relationships as relationship}
   {#if relationship?.primaryDisplay}
-    <span class="spectrum-Label spectrum-Label--grey" on:click={onClick}>
+    <Badge hoverable grey on:click={onClick}>
       {relationship.primaryDisplay}
-    </span>
+    </Badge>
   {/if}
 {/each}
 {#if leftover}
   <div>+{leftover} more</div>
 {/if}
-
-<style>
-  span:hover {
-    cursor: pointer;
-  }
-</style>

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -216,7 +216,6 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    margin-top: var(--spacing-m);
   }
   .table-title > div {
     margin-left: var(--spacing-xs);

packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte

@@ -9,13 +9,13 @@
 
   $: views = $tables.list.flatMap(table => Object.keys(table.views || {}))
 
-  function saveView() {
+  const saveView = async () => {
     if (views.includes(name)) {
       notifications.error(`View exists with name ${name}`)
       return
     }
     try {
-      viewsStore.save({
+      await viewsStore.save({
         name,
         tableId: $tables.selected._id,
         field,

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -1,7 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { goto, isActive, params } from "@roxi/routify"
-  import { get } from "svelte/store"
-  import { goto, params } from "@roxi/routify"
   import { BUDIBASE_INTERNAL_DB_ID } from "constants/backend"
   import { database, datasources, queries, tables, views } from "stores/backend"
   import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
@@ -14,40 +12,61 @@
     customQueryText,
   } from "helpers/data/utils"
   import IntegrationIcon from "./IntegrationIcon.svelte"
-  import { notifications } from "@budibase/bbui"
 
   let openDataSources = []
-  $: enrichedDataSources = Array.isArray($datasources.list)
+  $: enrichedDataSources = enrichDatasources(
-    ? $datasources.list.map(datasource => {
+    $datasources,
-        const selected = $datasources.selected === datasource._id
+    $params,
-        const open = openDataSources.includes(datasource._id)
+    $isActive,
-        const containsSelected = containsActiveEntity(datasource)
+    $tables,
-        const onlySource = $datasources.list.length === 1
+    $queries,
-        return {
+    $views
-          ...datasource,
+  )
-          selected,
-          open: selected || open || containsSelected || onlySource,
-        }
-      })
-    : []
   $: openDataSource = enrichedDataSources.find(x => x.open)
   $: {
-    // Ensure the open datasource is always included in the list of open
+    // Ensure the open datasource is always actually open
-    // datasources
     if (openDataSource) {
       openNode(openDataSource)
     }
   }
 
-  function selectDatasource(datasource) {
+  const enrichDatasources = (
-    openNode(datasource)
+    datasources,
-    datasources.select(datasource._id)
+    params,
-    $goto(`./datasource/${datasource._id}`)
+    isActive,
+    tables,
+    queries,
+    views
+  ) => {
+    if (!datasources?.list?.length) {
+      return []
+    }
+    return datasources.list.map(datasource => {
+      const selected =
+        isActive("./datasource") &&
+        datasources.selectedDatasourceId === datasource._id
+      const open = openDataSources.includes(datasource._id)
+      const containsSelected = containsActiveEntity(
+        datasource,
+        params,
+        isActive,
+        tables,
+        queries,
+        views
+      )
+      const onlySource = datasources.list.length === 1
+      return {
+        ...datasource,
+        selected,
+        containsSelected,
+        open: selected || open || containsSelected || onlySource,
+      }
+    })
   }
 
-  function onClickQuery(query) {
+  function selectDatasource(datasource) {
-    queries.select(query)
+    openNode(datasource)
-    $goto(`./datasource/${query.datasourceId}/${query._id}`)
+    $goto(`./datasource/${datasource._id}`)
   }
 
   function closeNode(datasource) {
@@ -69,21 +88,39 @@
     }
   }
 
-  onMount(async () => {
+  const containsActiveEntity = (
-    try {
+    datasource,
-      await datasources.fetch()
+    params,
-      await queries.fetch()
+    isActive,
-    } catch (error) {
+    tables,
-      notifications.error("Error fetching datasources and queries")
+    queries,
-    }
+    views
-  })
+  ) => {
-
+    // Check for being on a datasource page
-  const containsActiveEntity = datasource => {
+    if (params.datasourceId === datasource._id) {
-    // If we're view a query then the datasource ID is in the URL
-    if ($params.selectedDatasource === datasource._id) {
       return true
     }
 
+    // Check for hardcoded datasource edge cases
+    if (
+      isActive("./datasource/bb_internal") &&
+      datasource._id === "bb_internal"
+    ) {
+      return true
+    }
+    if (
+      isActive("./datasource/datasource_internal_bb_default") &&
+      datasource._id === "datasource_internal_bb_default"
+    ) {
+      return true
+    }
+
+    // Check for a matching query
+    if (params.queryId) {
+      const query = queries.list?.find(q => q._id === params.queryId)
+      return datasource._id === query?.datasourceId
+    }
+
     // If there are no entities it can't contain anything
     if (!datasource.entities) {
       return false
@@ -96,13 +133,13 @@
     }
 
     // Check for a matching table
-    if ($params.selectedTable) {
+    if (params.tableId) {
-      const selectedTable = get(tables).selected?._id
+      const selectedTable = tables.selected?._id
       return options.find(x => x._id === selectedTable) != null
     }
 
     // Check for a matching view
-    const selectedView = get(views).selected?.name
+    const selectedView = views.selected?.name
     const table = options.find(table => {
       return table.views?.[selectedView] != null
     })
@@ -117,7 +154,7 @@
         border={idx > 0}
         text={datasource.name}
         opened={datasource.open}
-        selected={datasource.selected}
+        selected={$isActive("./datasource") && datasource.selected}
         withArrow={true}
         on:click={() => selectDatasource(datasource)}
         on:iconClick={() => toggleNode(datasource)}
@@ -143,11 +180,11 @@
             iconText={customQueryIconText(datasource, query)}
             iconColor={customQueryIconColor(datasource, query)}
             text={customQueryText(datasource, query)}
-            opened={$queries.selected === query._id}
+            selected={$isActive("./query/:queryId") &&
-            selected={$queries.selected === query._id}
+              $queries.selectedQueryId === query._id}
-            on:click={() => onClickQuery(query)}
+            on:click={() => $goto(`./query/${query._id}`)}
           >
-            <EditQueryPopover {query} {onClickQuery} />
+            <EditQueryPopover {query} />
           </NavItem>
         {/each}
       {/if}
@@ -156,6 +193,9 @@
 {/if}
 
 <style>
+  .hierarchy-items-container {
+    margin: 0 calc(-1 * var(--spacing-xl));
+  }
   .datasource-icon {
     display: grid;
     place-items: center;

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { datasources, queries, tables } from "stores/backend"
+  import { datasources } from "stores/backend"
   import { notifications } from "@budibase/bbui"
   import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -14,23 +14,10 @@
 
   async function deleteDatasource() {
     try {
-      let wasSelectedSource = $datasources.selected
+      const isSelected = datasource.selected || datasource.containsSelected
-      if (!wasSelectedSource && $queries.selected) {
-        const queryId = $queries.selected
-        wasSelectedSource = $datasources.list.find(ds =>
-          queryId.includes(ds._id)
-        )?._id
-      }
-      const wasSelectedTable = $tables.selected
       await datasources.delete(datasource)
       notifications.success("Datasource deleted")
-      // Navigate to first index page if the source you are deleting is selected
+      if (isSelected) {
-      const entities = Object.values(datasource?.entities || {})
-      if (
-        wasSelectedSource === datasource._id ||
-        (entities &&
-          entities.find(entity => entity._id === wasSelectedTable?._id))
-      ) {
         $goto("./datasource")
       }
     } catch (error) {

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte

@@ -5,23 +5,17 @@
   import { datasources, queries } from "stores/backend"
 
   export let query
-  export let onClickQuery
 
   let confirmDeleteDialog
 
   async function deleteQuery() {
     try {
-      const wasSelectedQuery = $queries.selected
+      // Go back to the datasource if we are deleting the active query
-      // need to calculate this before the query is deleted
+      if ($queries.selectedQueryId === query._id) {
-      const navigateToDatasource = wasSelectedQuery === query._id
-
-      await queries.delete(query)
-      await datasources.fetch()
-
-      if (navigateToDatasource) {
-        await datasources.select(query.datasourceId)
         $goto(`./datasource/${query.datasourceId}`)
       }
+      await queries.delete(query)
+      await datasources.fetch()
       notifications.success("Query deleted")
     } catch (error) {
       notifications.error("Error deleting query")
@@ -31,7 +25,7 @@
   async function duplicateQuery() {
     try {
       const newQuery = await queries.duplicate(query)
-      onClickQuery(newQuery)
+      $goto(`./query/${newQuery._id}`)
     } catch (error) {
       notifications.error("Error duplicating query")
     }

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -1,39 +1,18 @@
 <script>
-  import { goto } from "@roxi/routify"
   import { tables, views, database } from "stores/backend"
   import { TableNames } from "constants"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
+  import { goto, isActive } from "@roxi/routify"
 
   const alphabetical = (a, b) => a.name?.toLowerCase() > b.name?.toLowerCase()
 
   export let sourceId
 
-  $: selectedView = $views.selected && $views.selected.name
   $: sortedTables = $tables.list
     .filter(table => table.sourceId === sourceId)
     .sort(alphabetical)
-
-  function selectTable(table) {
-    tables.select(table)
-    $goto(`./table/${table._id}`)
-  }
-
-  function selectView(view) {
-    views.select(view)
-    $goto(`./view/${view.name}`)
-  }
-
-  function onClickView(table, viewName) {
-    if (selectedView === viewName) {
-      return
-    }
-    selectView({
-      name: viewName,
-      ...table.views[viewName],
-    })
-  }
 </script>
 
 {#if $database?._id}
@@ -44,8 +23,9 @@
         border={idx > 0}
         icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
         text={table.name}
-        selected={$tables.selected?._id === table._id}
+        selected={$isActive("./table/:tableId") &&
-        on:click={() => selectTable(table)}
+          $tables.selected?._id === table._id}
+        on:click={() => $goto(`./table/${table._id}`)}
       >
         {#if table._id !== TableNames.USERS}
           <EditTablePopover {table} />
@@ -56,8 +36,9 @@
           indentLevel={2}
           icon="Remove"
           text={viewName}
-          selected={selectedView === viewName}
+          selected={$isActive("./view/:viewName") &&
-          on:click={() => onClickView(table, viewName)}
+            $views.selected?.name === viewName}
+          on:click={() => $goto(`./view/${viewName}`)}
         >
           <EditViewPopover
             view={{ name: viewName, ...table.views[viewName] }}

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

@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { goto, params } from "@roxi/routify"
   import { store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
   import { tables, datasources } from "stores/backend"
@@ -41,17 +41,16 @@
   }
 
   async function deleteTable() {
-    const wasSelectedTable = $tables.selected
+    const isSelected = $params.tableId === table._id
     try {
       await tables.delete(table)
       await store.actions.screens.delete(templateScreens)
-      await tables.fetch()
       if (table.type === "external") {
         await datasources.fetch()
       }
       notifications.success("Table deleted")
-      if (wasSelectedTable && wasSelectedTable._id === table._id) {
+      if (isSelected) {
-        $goto("./table")
+        $goto(`./datasource/${table.datasourceId}`)
       }
     } catch (error) {
       notifications.error("Error deleting table")

packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { goto, params } from "@roxi/routify"
   import { views } from "stores/backend"
   import { cloneDeep } from "lodash/fp"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -33,11 +33,14 @@
 
   async function deleteView() {
     try {
+      const isSelected = $params.viewName === $views.selectedViewName
       const name = view.name
       const id = view.tableId
       await views.delete(name)
       notifications.success("View deleted")
-      $goto(`./table/${id}`)
+      if (isSelected) {
+        $goto(`./table/${id}`)
+      }
     } catch (error) {
       notifications.error("Error deleting view")
     }

packages/builder/src/components/design/Panel.svelte

@@ -51,6 +51,7 @@
 <style>
   .panel {
     width: 260px;
+    flex: 0 0 260px;
     background: var(--background);
     display: flex;
     flex-direction: column;
@@ -66,6 +67,7 @@
   }
   .panel.wide {
     width: 420px;
+    flex: 0 0 420px;
   }
   .header {
     flex: 0 0 48px;

packages/builder/src/components/integration/QueryViewer.svelte

@@ -29,11 +29,12 @@
 
   export let query
 
+  const transformerDocs = "https://docs.budibase.com/docs/transformers"
+
   let fields = query?.schema ? schemaToFields(query.schema) : []
   let parameters
   let data = []
   let saveId
-  const transformerDocs = "https://docs.budibase.com/docs/transformers"
 
   $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
   $: query.schema = fieldsToSchema(fields)
@@ -94,132 +95,144 @@
     try {
       const { _id } = await queries.save(query.datasourceId, query)
       saveId = _id
-      notifications.success(`Query saved successfully.`)
+      notifications.success(`Query saved successfully`)
-      $goto(`../${_id}`)
+
+      // Go to the correct URL if we just created a new query
+      if (!query._rev) {
+        $goto(`../../${_id}`)
+      }
     } catch (error) {
-      notifications.error("Error creating query")
+      notifications.error("Error saving query")
     }
   }
 </script>
 
-<Layout gap="S" noPadding>
+<div class="wrapper">
-  <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
+  <Layout gap="S" noPadding>
-  <Divider />
+    <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
-  <Heading size="S">Config</Heading>
-  <div class="config">
-    <div class="config-field">
-      <Label>Query Name</Label>
-      <Input bind:value={query.name} />
-    </div>
-    {#if queryConfig}
-      <div class="config-field">
-        <Label>Function</Label>
-        <Select
-          bind:value={query.queryVerb}
-          on:change={resetDependentFields}
-          options={Object.keys(queryConfig)}
-          getOptionLabel={verb =>
-            queryConfig[verb]?.displayName || capitalise(verb)}
-        />
-      </div>
-      <div class="config-field">
-        <AccessLevelSelect {saveId} {query} label="Access Level" />
-      </div>
-      {#if integrationInfo?.extra && query.queryVerb}
-        <ExtraQueryConfig
-          {query}
-          {populateExtraQuery}
-          config={integrationInfo.extra}
-        />
-      {/if}
-      {#key query.parameters}
-        <BindingBuilder
-          queryBindings={query.parameters}
-          bindable={false}
-          on:change={e => {
-            query.parameters = e.detail.map(binding => {
-              return {
-                name: binding.name,
-                default: binding.value,
-              }
-            })
-          }}
-        />
-      {/key}
-    {/if}
-  </div>
-  {#if shouldShowQueryConfig}
     <Divider />
+    <Heading size="S">Config</Heading>
     <div class="config">
-      <Heading size="S">Fields</Heading>
+      <div class="config-field">
-      <Body size="S">Fill in the fields specific to this query.</Body>
+        <Label>Query Name</Label>
-      <IntegrationQueryEditor
+        <Input bind:value={query.name} />
-        {datasource}
-        {query}
-        height={200}
-        schema={queryConfig[query.queryVerb]}
-        bind:parameters
-      />
-      <Divider />
-    </div>
-    <div class="config">
-      <div class="help-heading">
-        <Heading size="S">Transformer</Heading>
-        <Icon
-          on:click={() => window.open(transformerDocs)}
-          hoverable
-          name="Help"
-          size="L"
-        />
       </div>
-      <Body size="S"
+      {#if queryConfig}
-        >Add a JavaScript function to transform the query result.</Body
+        <div class="config-field">
-      >
+          <Label>Function</Label>
-      <CodeMirrorEditor
+          <Select
-        height={200}
+            bind:value={query.queryVerb}
-        label="Transformer"
+            on:change={resetDependentFields}
-        value={query.transformer}
+            options={Object.keys(queryConfig)}
-        resize="vertical"
+            getOptionLabel={verb =>
-        on:change={e => (query.transformer = e.detail)}
+              queryConfig[verb]?.displayName || capitalise(verb)}
-      />
+          />
-      <Divider />
+        </div>
-    </div>
+        <div class="config-field">
-    <div class="viewer-controls">
+          <AccessLevelSelect {saveId} {query} label="Access Level" />
-      <Heading size="S">Results</Heading>
+        </div>
-      <ButtonGroup gap="M">
+        {#if integrationInfo?.extra && query.queryVerb}
-        <Button cta disabled={queryInvalid} on:click={saveQuery}>
+          <ExtraQueryConfig
-          Save Query
+            {query}
-        </Button>
+            {populateExtraQuery}
-        <Button secondary on:click={previewQuery}>Run Query</Button>
+            config={integrationInfo.extra}
-      </ButtonGroup>
+          />
-    </div>
+        {/if}
-    <Body size="S">
+        {#key query.parameters}
-      Below, you can preview the results from your query and change the schema.
+          <BindingBuilder
-    </Body>
+            queryBindings={query.parameters}
-    <section class="viewer">
+            bindable={false}
-      {#if data}
+            on:change={e => {
-        <Tabs selected="JSON">
+              query.parameters = e.detail.map(binding => {
-          <Tab title="JSON">
+                return {
-            <JSONPreview data={data[0]} minHeight="120" />
+                  name: binding.name,
-          </Tab>
+                  default: binding.value,
-          <Tab title="Schema">
+                }
-            <KeyValueBuilder
+              })
-              bind:object={fields}
+            }}
-              name="field"
+          />
-              headings
+        {/key}
-              options={SchemaTypeOptions}
-            />
-          </Tab>
-          <Tab title="Preview">
-            <ExternalDataSourceTable {query} {data} />
-          </Tab>
-        </Tabs>
       {/if}
-    </section>
+    </div>
-  {/if}
+    {#if shouldShowQueryConfig}
-</Layout>
+      <Divider />
+      <div class="config">
+        <Heading size="S">Fields</Heading>
+        <Body size="S">Fill in the fields specific to this query.</Body>
+        <IntegrationQueryEditor
+          {datasource}
+          {query}
+          height={200}
+          schema={queryConfig[query.queryVerb]}
+          bind:parameters
+        />
+        <Divider />
+      </div>
+      <div class="config">
+        <div class="help-heading">
+          <Heading size="S">Transformer</Heading>
+          <Icon
+            on:click={() => window.open(transformerDocs)}
+            hoverable
+            name="Help"
+            size="L"
+          />
+        </div>
+        <Body size="S"
+          >Add a JavaScript function to transform the query result.</Body
+        >
+        <CodeMirrorEditor
+          height={200}
+          label="Transformer"
+          value={query.transformer}
+          resize="vertical"
+          on:change={e => (query.transformer = e.detail)}
+        />
+        <Divider />
+      </div>
+      <div class="viewer-controls">
+        <Heading size="S">Results</Heading>
+        <ButtonGroup gap="XS">
+          <Button cta disabled={queryInvalid} on:click={saveQuery}>
+            Save Query
+          </Button>
+          <Button secondary on:click={previewQuery}>Run Query</Button>
+        </ButtonGroup>
+      </div>
+      <Body size="S">
+        Below, you can preview the results from your query and change the
+        schema.
+      </Body>
+      <section class="viewer">
+        {#if data}
+          <Tabs selected="JSON">
+            <Tab title="JSON">
+              <JSONPreview data={data[0]} minHeight="120" />
+            </Tab>
+            <Tab title="Schema">
+              <KeyValueBuilder
+                bind:object={fields}
+                name="field"
+                headings
+                options={SchemaTypeOptions}
+              />
+            </Tab>
+            <Tab title="Preview">
+              <ExternalDataSourceTable {query} {data} />
+            </Tab>
+          </Tabs>
+        {/if}
+      </section>
+    {/if}
+  </Layout>
+</div>
 
 <style>
+  .wrapper {
+    width: 640px;
+    margin: auto;
+  }
+
   .config {
     display: grid;
     grid-gap: var(--spacing-s);

packages/builder/src/components/integration/RestQueryViewer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { params } from "@roxi/routify"
+  import { goto, params } from "@roxi/routify"
   import { datasources, flags, integrations, queries } from "stores/backend"
   import {
     Banner,
@@ -23,7 +23,7 @@
   import CodeMirrorEditor, {
     EditorModes,
   } from "components/common/CodeMirrorEditor.svelte"
-  import RestBodyInput from "../../_components/RestBodyInput.svelte"
+  import RestBodyInput from "./RestBodyInput.svelte"
   import { capitalise } from "helpers"
   import { onMount } from "svelte"
   import restUtils from "helpers/data/utils"
@@ -36,7 +36,7 @@
   } from "constants/backend"
   import JSONPreview from "components/integration/JSONPreview.svelte"
   import AccessLevelSelect from "components/integration/AccessLevelSelect.svelte"
-  import DynamicVariableModal from "../../_components/DynamicVariableModal.svelte"
+  import DynamicVariableModal from "./DynamicVariableModal.svelte"
   import Placeholder from "assets/bb-spaceship.svg"
   import { cloneDeep } from "lodash/fp"
 
@@ -49,6 +49,8 @@
     toBindingsArray,
   } from "builderStore/dataBinding"
 
+  export let queryId
+
   let query, datasource
   let breakQs = {},
     requestBindings = {}
@@ -102,8 +104,8 @@
 
   function getSelectedQuery() {
     return cloneDeep(
-      $queries.list.find(q => q._id === $queries.selected) || {
+      $queries.list.find(q => q._id === queryId) || {
-        datasourceId: $params.selectedDatasource,
+        datasourceId: $params.datasourceId,
         parameters: [],
         fields: {
           // only init the objects, everything else is optional strings
@@ -159,6 +161,7 @@
   async function saveQuery() {
     const toSave = buildQuery()
     try {
+      const isNew = !query._rev
       const { _id } = await queries.save(toSave.datasourceId, toSave)
       saveId = _id
       query = getSelectedQuery()
@@ -174,6 +177,9 @@
         staticVariables,
         restBindings
       )
+      if (isNew) {
+        $goto(`../../${_id}`)
+      }
     } catch (err) {
       notifications.error(`Error saving query`)
     }
@@ -464,8 +470,9 @@
             on:click={saveQuery}
             tooltip={!hasSchema
               ? "Saving a query before sending will mean no schema is generated"
-              : null}>Save</Button
+              : null}
-          >
+            >Save
+          </Button>
         </div>
         <Tabs selected="Bindings" quiet noPadding noHorizPadding onTop>
           <Tab title="Bindings">
@@ -708,26 +715,33 @@
     margin: 0 auto;
     height: 100%;
   }
+
   .table {
     width: 960px;
   }
+
   .url-block {
     display: flex;
     gap: var(--spacing-s);
     z-index: 200;
   }
+
   .verb {
     flex: 1;
   }
+
   .url {
     flex: 4;
   }
+
   .top {
     min-height: 50%;
   }
+
   .bottom {
     padding-bottom: 50px;
   }
+
   .stats {
     display: flex;
     gap: var(--spacing-xl);
@@ -735,40 +749,49 @@
     margin-right: 0;
     align-items: center;
   }
+
   .green {
     color: #53a761;
   }
+
   .red {
     color: #ea7d82;
   }
+
   .top-bar {
     display: flex;
     justify-content: space-between;
   }
+
   .access {
     display: flex;
     gap: var(--spacing-m);
     align-items: center;
   }
+
   .placeholder-internal {
     display: flex;
     flex-direction: column;
     width: 200px;
     gap: var(--spacing-l);
   }
+
   .placeholder {
     display: flex;
     margin-top: var(--spacing-xl);
     justify-content: center;
   }
+
   .auth-container {
     width: 100%;
     display: flex;
     justify-content: space-between;
   }
+
   .auth-select {
     width: 200px;
   }
+
   .pagination {
     display: grid;
     grid-template-columns: 1fr 1fr;

packages/builder/src/helpers/urlStateSync.js

@@ -6,6 +6,7 @@ export const syncURLToState = options => {
     urlParam,
     stateKey,
     validate,
+    update,
     baseUrl = "..",
     fallbackUrl,
     store,
@@ -37,8 +38,8 @@ export const syncURLToState = options => {
   let cachedRedirect = get(routify.redirect)
   let cachedPage = get(routify.page)
   let previousParamsHash = null
-  let debug = false
+  let debug = true
-  const log = (...params) => debug && console.log(...params)
+  const log = (...params) => debug && console.log(`[${urlParam}]`, ...params)
 
   // Navigate to a certain URL
   const gotoUrl = (url, params) => {
@@ -85,10 +86,16 @@ export const syncURLToState = options => {
     // Only update state if we have a new value
     if (urlValue !== stateValue) {
       log(`state.${stateKey} (${stateValue}) <= url.${urlParam} (${urlValue})`)
-      store.update(state => {
+      if (update) {
-        state[stateKey] = urlValue
+        // Use custom update function if provided
-        return state
+        update(urlValue)
-      })
+      } else {
+        // Otherwise manually update the store
+        store.update(state => ({
+          ...state,
+          [stateKey]: urlValue,
+        }))
+      }
     }
   }
 

packages/builder/src/pages/builder/app/[application]/data/_layout.svelte

@@ -1,75 +1,46 @@
 <script>
-  import { redirect } from "@roxi/routify"
+  import { Button, Layout } from "@budibase/bbui"
-  import { Button, Tabs, Tab, Layout } from "@budibase/bbui"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
   import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
-
+  import Panel from "components/design/Panel.svelte"
-  let selected = "Sources"
 
   let modal
-
-  function selectFirstDatasource() {
-    $redirect("./table")
-  }
 </script>
 
 <!-- routify:options index=1 -->
-<div class="root">
+<div class="data">
-  <div class="nav">
+  <Panel title="Sources" borderRight>
-    <Tabs {selected} on:select={selectFirstDatasource}>
+    <Layout paddingX="L" paddingY="XL" gap="S">
-      <Tab title="Sources">
+      <Button dataCy={`new-datasource`} cta on:click={modal.show}>
-        <Layout paddingX="L" paddingY="L" gap="S">
+        Add source
-          <Button dataCy={`new-datasource`} cta wide on:click={modal.show}
+      </Button>
-            >Add source</Button
+      <CreateDatasourceModal bind:modal />
-          >
+      <DatasourceNavigator />
-        </Layout>
+    </Layout>
-        <CreateDatasourceModal bind:modal />
+  </Panel>
-        <DatasourceNavigator />
+
-      </Tab>
-    </Tabs>
-  </div>
   <div class="content">
     <slot />
   </div>
 </div>
 
 <style>
-  .root {
+  .data {
     flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
     height: 0;
-    display: grid;
-    grid-template-columns: 260px minmax(0, 1fr);
   }
-
   .content {
-    flex: 1 1 auto;
+    padding: 28px 40px 40px 40px;
-    padding: var(--spacing-l) 40px 40px 40px;
     overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
     gap: var(--spacing-l);
-  }
-  .content :global(> span) {
-    display: contents;
-  }
-
-  .nav {
-    overflow-y: auto;
-    background: var(--background);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    position: relative;
+    flex: 1 1 auto;
-    border-right: var(--border-light);
-    padding-bottom: 60px;
-  }
-
-  .add-button {
-    position: absolute;
-    top: var(--spacing-l);
-    right: var(--spacing-xl);
   }
 </style>

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_layout.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { params } from "@roxi/routify"
+  import { datasources } from "stores/backend"
+  import { syncURLToState } from "helpers/urlStateSync"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+
+  const stopSyncing = syncURLToState({
+    urlParam: "datasourceId",
+    stateKey: "selectedDatasourceId",
+    validate: id => $datasources.list?.some(ds => ds._id === id),
+    update: datasources.select,
+    fallbackUrl: "../",
+    store: datasources,
+    routify,
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+{#key $params.datasourceId}
+  <slot />
+{/key}

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte

@@ -21,34 +21,31 @@
   import { cloneDeep } from "lodash/fp"
   import ImportRestQueriesModal from "components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte"
 
-  let importQueriesModal
-
-  let changed,
-    isValid = true
-  let integration, baseDatasource, datasource
-  let queryList
   const querySchema = {
     name: {},
     queryVerb: { displayName: "Method" },
   }
 
-  $: baseDatasource = $datasources.list.find(
+  let importQueriesModal
-    ds => ds._id === $datasources.selected
+  let changed = false
-  )
+  let isValid = true
+  let integration, baseDatasource, datasource
+  let queryList
 
+  $: baseDatasource = $datasources.selected
   $: queryList = $queries.list.filter(
     query => query.datasourceId === datasource?._id
   )
   $: hasChanged(baseDatasource, datasource)
   $: updateDatasource(baseDatasource)
 
-  function hasChanged(base, ds) {
+  const hasChanged = (base, ds) => {
     if (base && ds) {
       changed = !isEqual(base, ds)
     }
   }
 
-  async function saveDatasource() {
+  const saveDatasource = async () => {
     try {
       // Create datasource
       await datasources.save(datasource)
@@ -63,12 +60,7 @@
     }
   }
 
-  function onClickQuery(query) {
+  const updateDatasource = base => {
-    queries.select(query)
-    $goto(`./${query._id}`)
-  }
-
-  function updateDatasource(base) {
     if (base) {
       datasource = cloneDeep(base)
       integration = $integrations[datasource.source]
@@ -87,7 +79,7 @@
 
 {#if datasource && integration}
   <section>
-    <Layout>
+    <Layout noPadding>
       <Layout gap="XS" noPadding>
         <header>
           <svelte:component
@@ -95,16 +87,16 @@
             height="26"
             width="26"
           />
-          <Heading size="M">{datasource.name}</Heading>
+          <Heading size="M">{$datasources.selected?.name}</Heading>
         </header>
         <Body size="M">{integration.description}</Body>
       </Layout>
       <Divider />
       <div class="config-header">
         <Heading size="S">Configuration</Heading>
-        <Button disabled={!changed || !isValid} cta on:click={saveDatasource}
+        <Button disabled={!changed || !isValid} cta on:click={saveDatasource}>
-          >Save</Button
+          Save
-        >
+        </Button>
       </div>
       <IntegrationConfigForm
         on:change={hasChanged}
@@ -120,12 +112,16 @@
         <Heading size="S">Queries</Heading>
         <div class="query-buttons">
           {#if datasource?.source === IntegrationTypes.REST}
-            <Button secondary on:click={() => importQueriesModal.show()}
+            <Button secondary on:click={() => importQueriesModal.show()}>
-              >Import</Button
+              Import
-            >
+            </Button>
           {/if}
-          <Button cta icon="Add" on:click={() => $goto("./new")}
+          <Button
-            >Add query
+            cta
+            icon="Add"
+            on:click={() => $goto(`../../query/new/${datasource._id}`)}
+          >
+            Add query
           </Button>
         </div>
       </div>
@@ -137,7 +133,7 @@
       {#if queryList && queryList.length > 0}
         <div class="query-list">
           <Table
-            on:click={({ detail }) => onClickQuery(detail)}
+            on:click={({ detail }) => $goto(`../../query/${detail._id}`)}
             schema={querySchema}
             data={queryList}
             allowEditColumns={false}

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte

@@ -1,23 +0,0 @@
-<script>
-  import { params } from "@roxi/routify"
-  import { queries, datasources } from "stores/backend"
-  import { IntegrationTypes } from "constants/backend"
-  import { redirect } from "@roxi/routify"
-
-  let datasourceId
-  if ($params.query) {
-    const query = $queries.list.find(q => q._id === $params.query)
-    if (query) {
-      queries.select(query)
-      datasourceId = query.datasourceId
-    }
-  }
-  const datasource = $datasources.list.find(
-    ds => ds._id === $datasources.selected || ds._id === datasourceId
-  )
-  if (datasource?.source === IntegrationTypes.REST) {
-    $redirect(`../rest/${$params.query}`)
-  }
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte

@@ -1,39 +0,0 @@
-<script>
-  import { params, redirect } from "@roxi/routify"
-  import { database, datasources, queries } from "stores/backend"
-  import QueryInterface from "components/integration/QueryViewer.svelte"
-  import { IntegrationTypes } from "constants/backend"
-
-  let selectedQuery, datasource
-  $: selectedQuery = $queries.list.find(
-    query => query._id === $queries.selected
-  ) || {
-    datasourceId: $params.selectedDatasource,
-    parameters: [],
-    fields: {},
-    queryVerb: "read",
-  }
-  $: datasource = $datasources.list.find(
-    ds => ds._id === $params.selectedDatasource
-  )
-  $: {
-    if (datasource?.source === IntegrationTypes.REST) {
-      $redirect(`../rest/${$params.query}`)
-    }
-  }
-</script>
-
-<section>
-  <div class="inner">
-    {#if $database._id && selectedQuery}
-      <QueryInterface query={selectedQuery} />
-    {/if}
-  </div>
-</section>
-
-<style>
-  .inner {
-    width: 640px;
-    margin: 0 auto;
-  }
-</style>

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_layout.svelte

@@ -1,17 +0,0 @@
-<script>
-  import { params } from "@roxi/routify"
-  import { datasources } from "stores/backend"
-
-  if ($params.selectedDatasource && !$params.query) {
-    const datasource = $datasources.list.find(
-      m => m._id === $params.selectedDatasource
-    )
-    if (datasource) {
-      datasources.select(datasource._id)
-    }
-  }
-</script>
-
-{#key $params.selectedDatasource}
-  <slot />
-{/key}

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/_layout.svelte

@@ -1,13 +0,0 @@
-<script>
-  import { params } from "@roxi/routify"
-  import { queries } from "stores/backend"
-
-  if ($params.query) {
-    const query = $queries.list.find(q => q._id === $params.query)
-    if (query) {
-      queries.select(query)
-    }
-  }
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/_layout.svelte

@@ -1,7 +0,0 @@
-<script>
-  import { datasources } from "stores/backend"
-
-  datasources.select("bb_internal")
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte

@@ -4,13 +4,19 @@
   import ICONS from "components/backend/DatasourceNavigator/icons"
   import { tables, datasources } from "stores/backend"
   import { goto } from "@roxi/routify"
+  import { onMount } from "svelte"
+  import { BUDIBASE_INTERNAL_DB_ID } from "constants/backend"
 
   let modal
 
   $: internalTablesBySourceId = $tables.list.filter(
     table =>
-      table.type !== "external" && $datasources.selected === table.sourceId
+      table.type !== "external" && table.sourceId === BUDIBASE_INTERNAL_DB_ID
   )
+
+  onMount(() => {
+    datasources.select(BUDIBASE_INTERNAL_DB_ID)
+  })
 </script>
 
 <Modal bind:this={modal}>
@@ -73,7 +79,7 @@
     background: var(--background);
     border: var(--border-dark);
     display: grid;
-    grid-template-columns: 2fr 0.75fr 20px;
+    grid-template-columns: 1fr auto;
     align-items: center;
     padding: var(--spacing-m);
     gap: var(--layout-xs);

packages/builder/src/pages/builder/app/[application]/data/datasource/datasource_internal_bb_default/_layout.svelte

@@ -1,8 +0,0 @@
-<script>
-  import { datasources } from "stores/backend"
-  import { DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
-
-  datasources.select(DEFAULT_BB_DATASOURCE_ID)
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/data/datasource/datasource_internal_bb_default/index.svelte

@@ -4,12 +4,18 @@
   import ICONS from "components/backend/DatasourceNavigator/icons"
   import { tables, datasources } from "stores/backend"
   import { goto } from "@roxi/routify"
+  import { DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
+  import { onMount } from "svelte"
 
   let modal
   $: internalTablesBySourceId = $tables.list.filter(
     table =>
-      table.type !== "external" && $datasources.selected === table.sourceId
+      table.type !== "external" && table.sourceId === DEFAULT_BB_DATASOURCE_ID
   )
+
+  onMount(() => {
+    datasources.select(DEFAULT_BB_DATASOURCE_ID)
+  })
 </script>
 
 <Modal bind:this={modal}>
@@ -23,10 +29,11 @@
         <svelte:component this={ICONS.BUDIBASE} height="26" width="26" />
         <Heading size="M">Sample Data</Heading>
       </header>
-      <Body size="M">A little something to get you up and running!</Body>
+      <Body size="M">
-      <Body size="M"
+        A little something to get you up and running!
-        >If you have no need for this datasource, feel free to delete it.</Body
+        <br />
-      >
+        If you have no need for this datasource, feel free to delete it.
+      </Body>
     </Layout>
     <Divider />
     <Heading size="S">Tables</Heading>
@@ -73,7 +80,7 @@
     background: var(--background);
     border: var(--border-dark);
     display: grid;
-    grid-template-columns: 2fr 0.75fr 20px;
+    grid-template-columns: 1fr auto;
     align-items: center;
     padding: var(--spacing-m);
     gap: var(--layout-xs);

packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte

@@ -4,12 +4,16 @@
   import { onMount } from "svelte"
 
   onMount(async () => {
-    // navigate to first table in list, if not already selected
+    const { list, selected } = $datasources
-    $datasources.list.length > 0 && $redirect(`./${$datasources.list[0]._id}`)
+    if (selected) {
+      $redirect(`./${selected?._id}`)
+    } else {
+      $redirect(`./${list[0]._id}`)
+    }
   })
 </script>
 
-{#if $datasources.list.length === 0}
+{#if !$datasources.list?.length}
   <i>Connect your first datasource to start building.</i>
 {:else}<i>Select a datasource to edit</i>{/if}
 

packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/_layout.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { queries } from "stores/backend"
+  import { syncURLToState } from "helpers/urlStateSync"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+
+  const stopSyncing = syncURLToState({
+    urlParam: "queryId",
+    stateKey: "selectedQueryId",
+    validate: id => id === "new" || $queries.list?.some(q => q._id === id),
+    update: queries.select,
+    fallbackUrl: "../",
+    store: queries,
+    routify,
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+{#key $queries.selectedQueryId}
+  <slot />
+{/key}

packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { database, queries, datasources } from "stores/backend"
+  import QueryViewer from "components/integration/QueryViewer.svelte"
+  import RestQueryViewer from "components/integration/RestQueryViewer.svelte"
+  import { IntegrationTypes } from "constants/backend"
+
+  $: query = $queries.selected
+  $: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
+  $: isRestQuery = datasource?.source === IntegrationTypes.REST
+</script>
+
+{#if $database._id && query}
+  {#if isRestQuery}
+    <RestQueryViewer queryId={$queries.selectedQueryId} />
+  {:else}
+    <QueryViewer {query} />
+  {/if}
+{/if}

packages/builder/src/pages/builder/app/[application]/data/query/index.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { onMount } from "svelte"
+  import { queries } from "stores/backend"
+  import { redirect } from "@roxi/routify"
+
+  onMount(async () => {
+    const { list, selected } = $queries
+    if (selected) {
+      $redirect(`./${selected?._id}`)
+    } else if (list?.length) {
+      $redirect(`./${list[0]._id}`)
+    } else {
+      $redirect("../")
+    }
+  })
+</script>

packages/builder/src/pages/builder/app/[application]/data/query/new/[datasourceId]/index.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { params, redirect } from "@roxi/routify"
+  import { database, datasources } from "stores/backend"
+  import QueryViewer from "components/integration/QueryViewer.svelte"
+  import RestQueryViewer from "components/integration/RestQueryViewer.svelte"
+  import { IntegrationTypes } from "constants/backend"
+
+  $: datasource = $datasources.list.find(ds => ds._id === $params.datasourceId)
+  $: {
+    if (!datasource) {
+      $redirect("../../../")
+    }
+  }
+  $: isRestQuery = datasource?.source === IntegrationTypes.REST
+  $: query = buildNewQuery(isRestQuery)
+
+  const buildNewQuery = isRestQuery => {
+    let query = {
+      datasourceId: $params.datasourceId,
+      parameters: [],
+      fields: {},
+      queryVerb: "read",
+    }
+    if (isRestQuery) {
+      query.flags = {}
+      query.fields = { disabledHeaders: {}, headers: {} }
+    }
+    return query
+  }
+</script>
+
+{#if $database._id && datasource && query}
+  {#if isRestQuery}
+    <RestQueryViewer />
+  {:else}
+    <QueryViewer {query} />
+  {/if}
+{/if}

packages/builder/src/pages/builder/app/[application]/data/query/new/index.svelte

@@ -0,0 +1,5 @@
+<script>
+  import { redirect } from "@roxi/routify"
+
+  $redirect("../")
+</script>

packages/builder/src/pages/builder/app/[application]/data/table/[selectedTable]/_layout.svelte

@@ -1,13 +0,0 @@
-<script>
-  import { params } from "@roxi/routify"
-  import { tables } from "stores/backend"
-
-  if ($params.selectedTable) {
-    const table = $tables.list.find(m => m._id === $params.selectedTable)
-    if (table) {
-      tables.select(table)
-    }
-  }
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_layout.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { syncURLToState } from "helpers/urlStateSync"
+  import { tables } from "stores/backend"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+
+  const stopSyncing = syncURLToState({
+    urlParam: "tableId",
+    stateKey: "selectedTableId",
+    validate: id => $tables.list?.some(table => table._id === id),
+    update: tables.select,
+    fallbackUrl: "../",
+    store: tables,
+    routify,
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+<slot />

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte

@@ -3,9 +3,11 @@
   import { tables, database } from "stores/backend"
 </script>
 
-{#if $database?._id && $tables?.selected?.name}
+{#if $database?._id && $tables?.selected}
   <TableDataTable />
-{:else}<i>Create your first table to start building</i>{/if}
+{:else}
+  <i>Create your first table to start building</i>
+{/if}
 
 <style>
   i {

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/relationship/[rowId]/[field]/index.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <RelationshipDataTable
-  tableId={$params.selectedTable}
+  tableId={$params.tableId}
-  rowId={$params.selectedRow}
+  rowId={$params.rowId}
-  fieldName={decodeURI($params.selectedField)}
+  fieldName={decodeURI($params.field)}
 />

packages/builder/src/pages/builder/app/[application]/data/table/_layout.svelte

@@ -1,19 +0,0 @@
-<script>
-  import { tables } from "stores/backend"
-  import { redirect, leftover } from "@roxi/routify"
-  import { onMount } from "svelte"
-
-  onMount(async () => {
-    // navigate to first table in list, if not already selected
-    // and this is the final url (i.e. no selectedTable)
-    if (
-      !$leftover &&
-      $tables.list.length > 0 &&
-      (!$tables.selected || !$tables.selected._id)
-    ) {
-      $redirect(`./${$tables.list[0]._id}`)
-    }
-  })
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/data/table/index.svelte

@@ -1,14 +1,19 @@
 <script>
-  import { redirect } from "@roxi/routify"
   import { onMount } from "svelte"
   import { tables } from "stores/backend"
+  import { redirect } from "@roxi/routify"
 
   onMount(async () => {
-    $tables.list.length > 0 && $redirect(`./${$tables.list[0]._id}`)
+    const { list, selected } = $tables
+    if (selected) {
+      $redirect(`./${selected?._id}`)
+    } else if (list?.length) {
+      $redirect(`./${list[0]._id}`)
+    }
   })
 </script>
 
-{#if $tables.list.length === 0}
+{#if !$tables.list?.length}
   <i>Create your first table to start building</i>
 {:else}<i>Select a table to edit</i>{/if}
 

packages/builder/src/pages/builder/app/[application]/data/view/[selectedView]/_layout.svelte

@@ -1,22 +0,0 @@
-<script>
-  import { params } from "@roxi/routify"
-  import { tables, views } from "stores/backend"
-
-  if ($params.selectedView) {
-    let view
-    const viewName = decodeURI($params.selectedView)
-    for (let table of $tables.list) {
-      if (table.views && table.views[viewName]) {
-        view = table.views[viewName]
-      }
-    }
-    if (view) {
-      views.select({
-        name: viewName,
-        ...view,
-      })
-    }
-  }
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/data/view/[viewName]/_layout.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { views } from "stores/backend"
+  import { syncURLToState } from "helpers/urlStateSync"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+
+  const stopSyncing = syncURLToState({
+    urlParam: "viewName",
+    stateKey: "selectedViewName",
+    validate: name => $views.list?.some(view => view.name === name),
+    update: views.select,
+    fallbackUrl: "../",
+    store: views,
+    routify,
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+<slot />

packages/builder/src/pages/builder/app/[application]/data/view/index.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { onMount } from "svelte"
+  import { views } from "stores/backend"
+  import { redirect } from "@roxi/routify"
+
+  onMount(async () => {
+    const { list, selected } = $views
+    if (selected) {
+      $redirect(`./${selected?.name}`)
+    } else if (list?.length) {
+      $redirect(`./${list[0].name}`)
+    } else {
+      $redirect("../")
+    }
+  })
+</script>

packages/builder/src/stores/backend/datasources.js

@@ -1,20 +1,36 @@
-import { writable, get } from "svelte/store"
+import { writable, derived } from "svelte/store"
-import { queries, tables, views } from "./"
+import { queries, tables } from "./"
 import { API } from "api"
 
-export const INITIAL_DATASOURCE_VALUES = {
-  list: [],
-  selected: null,
-  schemaError: null,
-}
-
 export function createDatasourcesStore() {
-  const store = writable(INITIAL_DATASOURCE_VALUES)
+  const store = writable({
-  const { subscribe, update, set } = store
+    list: [],
+    selectedDatasourceId: null,
+    schemaError: null,
+  })
+  const derivedStore = derived(store, $store => ({
+    ...$store,
+    selected: $store.list?.find(ds => ds._id === $store.selectedDatasourceId),
+  }))
 
-  async function updateDatasource(response) {
+  const fetch = async () => {
+    const datasources = await API.getDatasources()
+    store.update(state => ({
+      ...state,
+      list: datasources,
+    }))
+  }
+
+  const select = id => {
+    store.update(state => ({
+      ...state,
+      selectedDatasourceId: id,
+    }))
+  }
+
+  const updateDatasource = async response => {
     const { datasource, error } = response
-    update(state => {
+    store.update(state => {
       const currentIdx = state.list.findIndex(ds => ds._id === datasource._id)
       const sources = state.list
       if (currentIdx >= 0) {
@@ -24,82 +40,64 @@ export function createDatasourcesStore() {
       }
       return {
         list: sources,
-        selected: datasource._id,
+        selectedDatasourceId: datasource._id,
         schemaError: error,
       }
     })
     return datasource
   }
 
+  const updateSchema = async (datasource, tablesFilter) => {
+    const response = await API.buildDatasourceSchema({
+      datasourceId: datasource?._id,
+      tablesFilter,
+    })
+    return await updateDatasource(response)
+  }
+
+  const save = async (body, fetchSchema = false) => {
+    let response
+    if (body._id) {
+      response = await API.updateDatasource(body)
+    } else {
+      response = await API.createDatasource({
+        datasource: body,
+        fetchSchema,
+      })
+    }
+    return updateDatasource(response)
+  }
+
+  const deleteDatasource = async datasource => {
+    await API.deleteDatasource({
+      datasourceId: datasource?._id,
+      datasourceRev: datasource?._rev,
+    })
+    store.update(state => {
+      const sources = state.list.filter(
+        existing => existing._id !== datasource._id
+      )
+      return { list: sources, selected: null }
+    })
+    await queries.fetch()
+    await tables.fetch()
+  }
+
+  const removeSchemaError = () => {
+    store.update(state => {
+      return { ...state, schemaError: null }
+    })
+  }
+
   return {
-    subscribe,
+    subscribe: derivedStore.subscribe,
-    update,
+    fetch,
-    init: async () => {
+    init: fetch,
-      const datasources = await API.getDatasources()
+    select,
-      set({
+    updateSchema,
-        list: datasources,
+    save,
-        selected: null,
+    delete: deleteDatasource,
-      })
+    removeSchemaError,
-    },
-    fetch: async () => {
-      const datasources = await API.getDatasources()
-
-      // Clear selected if it no longer exists, otherwise keep it
-      const selected = get(store).selected
-      let nextSelected = null
-      if (selected && datasources.find(source => source._id === selected)) {
-        nextSelected = selected
-      }
-
-      update(state => ({ ...state, list: datasources, selected: nextSelected }))
-    },
-    select: datasourceId => {
-      update(state => ({ ...state, selected: datasourceId }))
-      queries.unselect()
-      tables.unselect()
-      views.unselect()
-    },
-    unselect: () => {
-      update(state => ({ ...state, selected: null }))
-    },
-    updateSchema: async (datasource, tablesFilter) => {
-      const response = await API.buildDatasourceSchema({
-        datasourceId: datasource?._id,
-        tablesFilter,
-      })
-      return await updateDatasource(response)
-    },
-    save: async (body, fetchSchema = false) => {
-      let response
-      if (body._id) {
-        response = await API.updateDatasource(body)
-      } else {
-        response = await API.createDatasource({
-          datasource: body,
-          fetchSchema,
-        })
-      }
-      return updateDatasource(response)
-    },
-    delete: async datasource => {
-      await API.deleteDatasource({
-        datasourceId: datasource?._id,
-        datasourceRev: datasource?._rev,
-      })
-      update(state => {
-        const sources = state.list.filter(
-          existing => existing._id !== datasource._id
-        )
-        return { list: sources, selected: null }
-      })
-      await queries.fetch()
-      await tables.fetch()
-    },
-    removeSchemaError: () => {
-      update(state => {
-        return { ...state, schemaError: null }
-      })
-    },
   }
 }
 

packages/builder/src/stores/backend/queries.js

@@ -1,5 +1,5 @@
-import { writable, get } from "svelte/store"
+import { writable, get, derived } from "svelte/store"
-import { datasources, integrations, tables, views } from "./"
+import { datasources, integrations } from "./"
 import { API } from "api"
 import { duplicateName } from "helpers/duplicate"
 
@@ -10,125 +10,127 @@ const sortQueries = queryList => {
 }
 
 export function createQueriesStore() {
-  const store = writable({ list: [], selected: null })
+  const store = writable({
-  const { subscribe, set, update } = store
+    list: [],
+    selectedQueryId: null,
+  })
+  const derivedStore = derived(store, $store => ({
+    ...$store,
+    selected: $store.list?.find(q => q._id === $store.selectedQueryId),
+  }))
 
-  const actions = {
+  const fetch = async () => {
-    init: async () => {
+    const queries = await API.getQueries()
-      const queries = await API.getQueries()
+    sortQueries(queries)
-      set({
+    store.update(state => ({
-        list: queries,
+      ...state,
-        selected: null,
+      list: queries,
-      })
+    }))
-    },
+  }
-    fetch: async () => {
+
-      const queries = await API.getQueries()
+  const save = async (datasourceId, query) => {
+    const _integrations = get(integrations)
+    const dataSource = get(datasources).list.filter(
+      ds => ds._id === datasourceId
+    )
+    // Check if readable attribute is found
+    if (dataSource.length !== 0) {
+      const integration = _integrations[dataSource[0].source]
+      const readable = integration.query[query.queryVerb].readable
+      if (readable) {
+        query.readable = readable
+      }
+    }
+    query.datasourceId = datasourceId
+    const savedQuery = await API.saveQuery(query)
+    store.update(state => {
+      const idx = state.list.findIndex(query => query._id === savedQuery._id)
+      const queries = state.list
+      if (idx >= 0) {
+        queries.splice(idx, 1, savedQuery)
+      } else {
+        queries.push(savedQuery)
+      }
       sortQueries(queries)
-      update(state => ({
+      return {
-        ...state,
         list: queries,
-      }))
+        selectedQueryId: savedQuery._id,
-    },
-    save: async (datasourceId, query) => {
-      const _integrations = get(integrations)
-      const dataSource = get(datasources).list.filter(
-        ds => ds._id === datasourceId
-      )
-      // Check if readable attribute is found
-      if (dataSource.length !== 0) {
-        const integration = _integrations[dataSource[0].source]
-        const readable = integration.query[query.queryVerb].readable
-        if (readable) {
-          query.readable = readable
-        }
       }
-      query.datasourceId = datasourceId
+    })
-      const savedQuery = await API.saveQuery(query)
+    return savedQuery
-      update(state => {
+  }
-        const idx = state.list.findIndex(query => query._id === savedQuery._id)
-        const queries = state.list
-        if (idx >= 0) {
-          queries.splice(idx, 1, savedQuery)
-        } else {
-          queries.push(savedQuery)
-        }
-        sortQueries(queries)
-        return {
-          list: queries,
-          selected: savedQuery._id,
-        }
-      })
-      return savedQuery
-    },
-    import: async ({ data, datasourceId }) => {
-      return await API.importQueries({
-        datasourceId,
-        data,
-      })
-    },
-    select: query => {
-      update(state => ({ ...state, selected: query._id }))
-      views.unselect()
-      tables.unselect()
-      datasources.unselect()
-    },
-    unselect: () => {
-      update(state => ({ ...state, selected: null }))
-    },
-    preview: async query => {
-      const parameters = query.parameters.reduce(
-        (acc, next) => ({
-          ...acc,
-          [next.name]: next.default,
-        }),
-        {}
-      )
-      const result = await API.previewQuery({
-        ...query,
-        parameters,
-      })
-      // Assume all the fields are strings and create a basic schema from the
-      // unique fields returned by the server
-      const schema = {}
-      for (let [field, type] of Object.entries(result.schemaFields)) {
-        schema[field] = type || "string"
-      }
-      return { ...result, schema, rows: result.rows || [] }
-    },
-    delete: async query => {
-      await API.deleteQuery({
-        queryId: query?._id,
-        queryRev: query?._rev,
-      })
-      update(state => {
-        state.list = state.list.filter(existing => existing._id !== query._id)
-        if (state.selected === query._id) {
-          state.selected = null
-        }
-        return state
-      })
-    },
-    duplicate: async query => {
-      let list = get(store).list
-      const newQuery = { ...query }
-      const datasourceId = query.datasourceId
 
-      delete newQuery._id
+  const importQueries = async ({ data, datasourceId }) => {
-      delete newQuery._rev
+    return await API.importQueries({
-      newQuery.name = duplicateName(
+      datasourceId,
-        query.name,
+      data,
-        list.map(q => q.name)
+    })
-      )
+  }
 
-      return actions.save(datasourceId, newQuery)
+  const select = id => {
-    },
+    store.update(state => ({
+      ...state,
+      selectedQueryId: id,
+    }))
+  }
+
+  const preview = async query => {
+    const parameters = query.parameters.reduce(
+      (acc, next) => ({
+        ...acc,
+        [next.name]: next.default,
+      }),
+      {}
+    )
+    const result = await API.previewQuery({
+      ...query,
+      parameters,
+    })
+    // Assume all the fields are strings and create a basic schema from the
+    // unique fields returned by the server
+    const schema = {}
+    for (let [field, type] of Object.entries(result.schemaFields)) {
+      schema[field] = type || "string"
+    }
+    return { ...result, schema, rows: result.rows || [] }
+  }
+
+  const deleteQuery = async query => {
+    await API.deleteQuery({
+      queryId: query?._id,
+      queryRev: query?._rev,
+    })
+    store.update(state => {
+      state.list = state.list.filter(existing => existing._id !== query._id)
+      return state
+    })
+  }
+
+  const duplicate = async query => {
+    let list = get(store).list
+    const newQuery = { ...query }
+    const datasourceId = query.datasourceId
+
+    delete newQuery._id
+    delete newQuery._rev
+    newQuery.name = duplicateName(
+      query.name,
+      list.map(q => q.name)
+    )
+
+    return await save(datasourceId, newQuery)
   }
 
   return {
-    subscribe,
+    subscribe: derivedStore.subscribe,
-    set,
+    fetch,
-    update,
+    init: fetch,
-    ...actions,
+    select,
+    save,
+    import: importQueries,
+    delete: deleteQuery,
+    preview,
+    duplicate,
   }
 }
 

packages/builder/src/stores/backend/tables.js

@@ -1,41 +1,35 @@
-import { get, writable } from "svelte/store"
+import { get, writable, derived } from "svelte/store"
-import { datasources, queries, views } from "./"
+import { datasources } from "./"
 import { cloneDeep } from "lodash/fp"
 import { API } from "api"
 import { SWITCHABLE_TYPES } from "constants/backend"
 
 export function createTablesStore() {
-  const store = writable({})
+  const store = writable({
-  const { subscribe, update, set } = store
+    list: [],
+    selectedTableId: null,
+  })
+  const derivedStore = derived(store, $store => ({
+    ...$store,
+    selected: $store.list?.find(table => table._id === $store.selectedTableId),
+  }))
 
-  async function fetch() {
+  const fetch = async () => {
     const tables = await API.getTables()
-    update(state => ({
+    store.update(state => ({
       ...state,
       list: tables,
     }))
-    return tables
   }
 
-  async function select(table) {
+  const select = tableId => {
-    if (!table) {
+    store.update(state => ({
-      update(state => ({
+      ...state,
-        ...state,
+      selectedTableId: tableId,
-        selected: {},
+    }))
-      }))
-    } else {
-      update(state => ({
-        ...state,
-        selected: table,
-        draft: cloneDeep(table),
-      }))
-      views.unselect()
-      queries.unselect()
-      datasources.unselect()
-    }
   }
 
-  async function save(table) {
+  const save = async table => {
     const updatedTable = cloneDeep(table)
     const oldTable = get(store).list.filter(t => t._id === table._id)[0]
 
@@ -72,96 +66,84 @@ export function createTablesStore() {
     if (table.type === "external") {
       await datasources.fetch()
     }
-    await select(savedTable)
+    await select(savedTable._id)
     return savedTable
   }
 
+  const deleteTable = async table => {
+    await API.deleteTable({
+      tableId: table?._id,
+      tableRev: table?._rev,
+    })
+    await fetch()
+  }
+
+  const saveField = async ({
+    originalName,
+    field,
+    primaryDisplay = false,
+    indexes,
+  }) => {
+    let promise
+    store.update(state => {
+      // delete the original if renaming
+      // need to handle if the column had no name, empty string
+      if (originalName != null && originalName !== field.name) {
+        delete state.draft.schema[originalName]
+        state.draft._rename = {
+          old: originalName,
+          updated: field.name,
+        }
+      }
+
+      // Optionally set display column
+      if (primaryDisplay) {
+        state.draft.primaryDisplay = field.name
+      } else if (state.draft.primaryDisplay === originalName) {
+        const fields = Object.keys(state.draft.schema)
+        // pick another display column randomly if unselecting
+        state.draft.primaryDisplay = fields.filter(
+          name => name !== originalName || name !== field
+        )[0]
+      }
+
+      if (indexes) {
+        state.draft.indexes = indexes
+      }
+
+      state.draft.schema = {
+        ...state.draft.schema,
+        [field.name]: cloneDeep(field),
+      }
+      promise = save(state.draft)
+      return state
+    })
+    if (promise) {
+      await promise
+    }
+  }
+
+  const deleteField = async field => {
+    let promise
+    store.update(state => {
+      delete state.draft.schema[field.name]
+      promise = save(state.draft)
+      return state
+    })
+    if (promise) {
+      await promise
+    }
+  }
+
   return {
-    subscribe,
+    subscribe: derivedStore.subscribe,
-    update,
     fetch,
+    init: fetch,
     select,
-    unselect: () => {
-      update(state => ({
-        ...state,
-        selected: null,
-      }))
-    },
     save,
-    init: async () => {
+    delete: deleteTable,
-      const tables = await API.getTables()
+    saveField,
-      set({
+    deleteField,
-        list: tables,
-        selected: {},
-        draft: {},
-      })
-    },
-    delete: async table => {
-      await API.deleteTable({
-        tableId: table?._id,
-        tableRev: table?._rev,
-      })
-      update(state => ({
-        ...state,
-        list: state.list.filter(existing => existing._id !== table._id),
-        selected: {},
-      }))
-    },
-    saveField: async ({
-      originalName,
-      field,
-      primaryDisplay = false,
-      indexes,
-    }) => {
-      let promise
-      update(state => {
-        // delete the original if renaming
-        // need to handle if the column had no name, empty string
-        if (originalName != null && originalName !== field.name) {
-          delete state.draft.schema[originalName]
-          state.draft._rename = {
-            old: originalName,
-            updated: field.name,
-          }
-        }
-
-        // Optionally set display column
-        if (primaryDisplay) {
-          state.draft.primaryDisplay = field.name
-        } else if (state.draft.primaryDisplay === originalName) {
-          const fields = Object.keys(state.draft.schema)
-          // pick another display column randomly if unselecting
-          state.draft.primaryDisplay = fields.filter(
-            name => name !== originalName || name !== field
-          )[0]
-        }
-
-        if (indexes) {
-          state.draft.indexes = indexes
-        }
-
-        state.draft.schema = {
-          ...state.draft.schema,
-          [field.name]: cloneDeep(field),
-        }
-        promise = save(state.draft)
-        return state
-      })
-      if (promise) {
-        await promise
-      }
-    },
-    deleteField: async field => {
-      let promise
-      update(state => {
-        delete state.draft.schema[field.name]
-        promise = save(state.draft)
-        return state
-      })
-      if (promise) {
-        await promise
-      }
-    },
   }
 }
 

packages/builder/src/stores/backend/views.js

@@ -1,52 +1,54 @@
-import { writable, get } from "svelte/store"
+import { writable, get, derived } from "svelte/store"
-import { tables, datasources, queries } from "./"
+import { tables } from "./"
 import { API } from "api"
 
 export function createViewsStore() {
-  const { subscribe, update } = writable({
+  const store = writable({
-    list: [],
+    selectedViewName: null,
-    selected: null,
+  })
+  const derivedStore = derived([store, tables], ([$store, $tables]) => {
+    let list = []
+    $tables.list?.forEach(table => {
+      list = list.concat(Object.values(table?.views || {}))
+    })
+    return {
+      ...$store,
+      list,
+      selected: list.find(view => view.name === $store.selectedViewName),
+    }
   })
 
+  const select = name => {
+    store.update(state => ({
+      ...state,
+      selectedViewName: name,
+    }))
+  }
+
+  const deleteView = async view => {
+    await API.deleteView(view)
+    await tables.fetch()
+  }
+
+  const save = async view => {
+    const savedView = await API.saveView(view)
+    const viewMeta = {
+      name: view.name,
+      ...savedView,
+    }
+
+    const viewTable = get(tables).list.find(table => table._id === view.tableId)
+
+    if (view.originalName) delete viewTable.views[view.originalName]
+    viewTable.views[view.name] = viewMeta
+    await tables.save(viewTable)
+  }
+
   return {
-    subscribe,
+    subscribe: derivedStore.subscribe,
-    update,
+    select,
-    select: view => {
+    delete: deleteView,
-      update(state => ({
+    save,
-        ...state,
-        selected: view,
-      }))
-      tables.unselect()
-      queries.unselect()
-      datasources.unselect()
-    },
-    unselect: () => {
-      update(state => ({
-        ...state,
-        selected: null,
-      }))
-    },
-    delete: async view => {
-      await API.deleteView(view)
-      await tables.fetch()
-    },
-    save: async view => {
-      const savedView = await API.saveView(view)
-      const viewMeta = {
-        name: view.name,
-        ...savedView,
-      }
-
-      const viewTable = get(tables).list.find(
-        table => table._id === view.tableId
-      )
-
-      if (view.originalName) delete viewTable.views[view.originalName]
-      viewTable.views[view.name] = viewMeta
-      await tables.save(viewTable)
-
-      update(state => ({ ...state, selected: viewMeta }))
-    },
   }
 }