Merge pull request #1298 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>
+<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/DatasourceNavigator/popovers/EditDatasourcePopover.svelte

@@ -1,7 +1,8 @@
 <script>
-  import { backendUiStore, store, allScreens } from "builderStore"
+  import { goto } from "@sveltech/routify"
+  import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { DropdownMenu } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -10,9 +11,6 @@
   let anchor
   let dropdown
   let confirmDeleteDialog
-  let error = ""
-  let originalName = datasource.name
-  let willBeDeleted
 
   function hideEditor() {
     dropdown?.hide()
@@ -26,6 +24,7 @@
   async function deleteDatasource() {
     await backendUiStore.actions.datasources.delete(datasource)
     notifier.success("Datasource deleted")
+    $goto('./datasource')
     hideEditor()
   }
 </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/components/deploy/DeploymentHistory.svelte

@@ -80,6 +80,7 @@
   }
 
   function showErrorReasonModal(err) {
+    if (!err) return
     errorReason = err
     errorReasonModal.show()
   }
@@ -118,13 +119,11 @@
             {#if deployment.status.toLowerCase() === 'pending'}
               <Spinner size="10" />
             {/if}
-            <div class={`deployment-status ${deployment.status}`}>
+            <div on:click={() => showErrorReasonModal(deployment.err)} class={`deployment-status ${deployment.status}`}>
               <span>
                 {deployment.status}
                 {#if deployment.status === DeploymentStatus.FAILURE}
-                  <i
+                  <i class="ri-information-line"/>
-                    class="ri-information-line"
-                    on:click={() => showErrorReasonModal(deployment.err)} />
                 {/if}
               </span>
             </div>

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -19,6 +19,7 @@
     const response = await api.put(`/api/keys/${key}`, { value })
     const res = await response.json()
     keys = { ...keys, ...res }
+    notifier.success("API Key saved.")
   }
 
   // Get Keys

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,22 @@
+<script>
+    import { backendUiStore } from "builderStore"
+    import { goto } from "@sveltech/routify"
+    import { onMount } from "svelte"
+
+    onMount(async () => {
+      // navigate to first table in list, if not already selected
+      $backendUiStore.datasources.length > 0 && $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,23 +1,10 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
+  import { backendUiStore } from "builderStore"
-  import { goto, leftover } from "@sveltech/routify"
+  import { goto } 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
+    $backendUiStore.tables.length > 0 && $goto(`../${$backendUiStore.tables[0]._id}`)
-    // and this is the final url (i.e. no selectedTable)
-    if (
-      !$leftover &&
-      $backendUiStore.tables.length > 0 &&
-      (!$backendUiStore.selectedTable || !$backendUiStore.selectedTable._id)
-    ) {
-      // this file routes as .../tables/index, so, go up one.
-      $goto(`../${$backendUiStore.tables[0]._id}`)
-    }
   })
 </script>