Merge pull request #1287 from Budibase/fix/route-preservation

Fix/route preservation

packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte

@@ -1,12 +1,9 @@
 <script>
-  import { automationStore, backendUiStore } from "builderStore"
+  import { automationStore } from "builderStore"
   import Flowchart from "./FlowChart/FlowChart.svelte"
   import BlockList from "./BlockList.svelte"
 
   $: automation = $automationStore.selectedAutomation?.automation
-  $: automationLive = automation?.live
-  $: instanceId = $backendUiStore.selectedDatabase._id
-  $: automationCount = $automationStore.automations?.length ?? 0
 
   function onSelect(block) {
     automationStore.update(state => {
@@ -19,14 +16,4 @@
 {#if automation}
   <BlockList />
   <Flowchart {automation} {onSelect} />
-{:else if automationCount === 0}
+{/if}
-  <i>Create your first automation to get started</i>
-{:else}<i>Select an automation to edit</i>{/if}
-
-<style>
-  i {
-    font-size: var(--font-size-m);
-    color: var(--grey-5);
-    margin-top: 2px;
-  }
-</style>

packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte

@@ -3,7 +3,6 @@
   import { automationStore } from "builderStore"
   import { DropdownMenu, Modal } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
-  import analytics from "analytics"
   import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
 
   $: hasTrigger = $automationStore.selectedAutomation.hasTrigger()

packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte"
+  import { goto } from "@sveltech/routify"
   import { automationStore } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import EditAutomationPopover from "./EditAutomationPopover.svelte"
@@ -9,6 +10,10 @@
   onMount(() => {
     automationStore.actions.fetch()
   })
+  function selectAutomation(automation) {
+    automationStore.actions.select(automation)
+    $goto(`./${automation._id}`)
+  }
 </script>
 
 <div class="automations-list">
@@ -18,7 +23,7 @@
       icon="ri-stackshare-line"
       text={automation.name}
       selected={automation._id === selectedAutomationId}
-      on:click={() => automationStore.actions.select(automation)}>
+      on:click={() => selectAutomation(automation)}>
       <EditAutomationPopover {automation} />
     </NavItem>
   {/each}

packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { store, backendUiStore, automationStore } from "builderStore"
+  import { backendUiStore, automationStore } from "builderStore"
+  import { goto } from "@sveltech/routify"
   import { notifier } from "builderStore/store/notifications"
   import { Input, ModalContent } from "@budibase/bbui"
   import analytics from "analytics"
@@ -15,6 +16,7 @@
       instanceId,
     })
     notifier.success(`Automation ${name} created.`)
+    $goto(`./${$automationStore.selectedAutomation.automation._id}`)
     analytics.captureEvent("Automation Created", { name })
   }
 </script>

packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte

@@ -1,4 +1,5 @@
 <script>    
+  import { goto } from "@sveltech/routify"
   import { automationStore, backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu } from "@budibase/bbui"
@@ -23,6 +24,7 @@
       automation,
     })
     notifier.success("Automation deleted.")
+    $goto('../automate')
   }
 </script>
 

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

@@ -4,7 +4,6 @@
   import { TableNames } from "constants"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
-  import { Switcher } from "@budibase/bbui"
   import NavItem from "components/common/NavItem.svelte"
 
   $: selectedView =

packages/builder/src/pages/[application]/automate/[automation]/_layout.svelte

@@ -1,6 +1,15 @@
 <script>
-  import { store } from "builderStore"
+  import { automationStore } from "builderStore"
   import { params } from "@sveltech/routify"
 
-  store.actions.layouts.select($params.layout)
+  if ($params.automation) {
+    const automation = $automationStore.automations.find(
+      m => m._id === $params.automation
+    )
+    if (automation) {
+      automationStore.actions.select(automation)
+    }
+  }
 </script>
+
+<slot />

packages/builder/src/pages/[application]/automate/[automation]/index.svelte

@@ -0,0 +1,6 @@
+<script>
+  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
+</script>
+  
+<AutomationBuilder />
+  

packages/builder/src/pages/[application]/automate/index.svelte

@@ -1,5 +1,26 @@
 <script>
-  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
+  import { goto, leftover } from "@sveltech/routify"
+  import { onMount } from 'svelte'
+  import { automationStore } from "builderStore"
+
+  onMount(async () => {
+      // navigate to first automation in list, if not already selected
+      if (
+        !$leftover &&
+        $automationStore.automations.length > 0 &&
+        (!$automationStore.selectedAutomation || !$automationStore.selectedAutomation?.automation?._id)
+      ) {
+        $goto(`../${$automationStore.automations[0]._id}`)
+      }
+    })
 </script>
 
-<AutomationBuilder />
+<i>Create your first automation to get started</i>
+
+<style>
+  i {
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+    margin-top: 2px;
+  }
+</style>

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

@@ -1,6 +1,6 @@
 <script>
-  import { params } from "@sveltech/routify"
+  import { isActive, goto } from "@sveltech/routify"
-  import { Button, Switcher, Modal } from "@budibase/bbui"
+  import { Switcher, Modal } from "@budibase/bbui"
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
   import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@@ -17,7 +17,16 @@
     },
   ]
 
-  let tab = $params.selectedDatasource ? "datasource" : "table"
+  let tab = $isActive('./datasource') ? "datasource" : "table"
+
+  function selectFirstTableOrSource({ detail }) {
+    const type = detail.heading.key
+    if (type === 'datasource') {
+      $goto("./datasource")
+    } else {
+      $goto("./table")
+    }
+  }
 
   let modal
 </script>
@@ -25,7 +34,7 @@
 <!-- routify:options index=0 -->
 <div class="root">
   <div class="nav">
-    <Switcher headings={tabs} bind:value={tab}>
+    <Switcher headings={tabs} bind:value={tab} on:change={selectFirstTableOrSource}>
       <div class="title">
         <i
           data-cy={`new-${tab}`}

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

@@ -0,0 +1,15 @@
+<script>
+  import { params } from "@sveltech/routify"
+  import { backendUiStore } from "builderStore"
+
+  if ($params.query) {
+    const query = $backendUiStore.queries.find(
+      m => m._id === $params.query
+    )
+    if (query) {
+      backendUiStore.actions.queries.select(query)
+    }
+  }
+</script>
+
+<slot />

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

@@ -2,12 +2,12 @@
   import { params } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
 
-  if ($params.selectedDatasourceId) {
+  if ($params.selectedDatasource) {
     const datasource = $backendUiStore.datasources.find(
       m => m._id === $params.selectedDatasource
     )
     if (datasource) {
-      backendUiStore.actions.datasources.select(datasource)
+      backendUiStore.actions.datasources.select(datasource._id)
     }
   }
 </script>

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

@@ -1,6 +1,6 @@
 <script>
   import { goto, beforeUrlChange } from "@sveltech/routify"
-  import { Button, Heading, Body, Spacer, Icon } from "@budibase/bbui"
+  import { Button, Heading, Body, Spacer } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"

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

@@ -0,0 +1,29 @@
+<script>
+    import { backendUiStore } from "builderStore"
+    import { goto, leftover } from "@sveltech/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 &&
+        $backendUiStore.datasources.length > 0 && !$backendUiStore.selectedDatasourceId
+      ) {
+        // this file routes as .../tables/index, so, go up one.
+        $goto(`../${$backendUiStore.datasources[0]._id}`)
+      }
+    })
+  </script>
+  
+  {#if $backendUiStore.tables.length === 0}
+    <i>Connect your first datasource to start building.</i>
+  {:else}<i>Select a datasource to edit</i>{/if}
+  
+  <style>
+    i {
+      font-size: var(--font-size-m);
+      color: var(--grey-5);
+      margin-top: 2px;
+    }
+  </style>

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

@@ -1,12 +1,8 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
+  import { backendUiStore } from "builderStore"
   import { goto, leftover } from "@sveltech/routify"
   import { onMount } from "svelte"
 
-  async function selectTable(table) {
-    backendUiStore.actions.tables.select(table)
-  }
-
   onMount(async () => {
     // navigate to first table in list, if not already selected
     // and this is the final url (i.e. no selectedTable)