Use routify

packages/builder/src/api.js

@@ -5,7 +5,7 @@ import {
 } from "@budibase/frontend-core"
 import { store } from "./builderStore"
 import { get } from "svelte/store"
-import { auth } from "./stores/portal"
+import { auth, navigation } from "./stores/portal"
 
 export const API = createAPIClient({
   attachHeaders: headers => {
@@ -52,8 +52,8 @@ export const API = createAPIClient({
       return
     }
 
-    window.location = `${updatingUrl}?returnUrl=${encodeURIComponent(
-      window.location
-    )}`
+    navigation.actions.goTo(
+      `${updatingUrl}?returnUrl=${encodeURIComponent(window.location)}`
+    )
   },
 })

packages/builder/src/pages/builder/_layout.svelte

@@ -1,10 +1,11 @@
 <script>
   import { isActive, redirect, params } from "@roxi/routify"
-  import { admin, auth, licensing } from "stores/portal"
+  import { admin, auth, licensing, navigation } from "stores/portal"
   import { onMount } from "svelte"
   import { CookieUtils, Constants } from "@budibase/frontend-core"
   import { API } from "api"
   import Branding from "./Branding.svelte"
+  import { goto } from "@roxi/routify"
 
   let loaded = false
 
@@ -17,6 +18,8 @@
 
   $: useAccountPortal = cloud && !$admin.disableAccountPortal
 
+  navigation.actions.init($goto)
+
   const validateTenantId = async () => {
     const host = window.location.host
     if (host.includes("localhost:") || !baseUrl) {

packages/builder/src/stores/portal/index.js

@@ -16,5 +16,6 @@ export { environment } from "./environment"
 export { menu } from "./menu"
 export { auditLogs } from "./auditLogs"
 export { features } from "./features"
+export { navigation } from "./navigation"
 
 export const sideBarCollapsed = writable(false)

packages/builder/src/stores/portal/navigation.js

@@ -0,0 +1,35 @@
+import { writable } from "svelte/store"
+
+export function createNavigationStore() {
+  const { subscribe } = writable([])
+
+  let initialisated = false
+  let _goTo
+
+  const init = goToFunc => {
+    initialisated = true
+    if (typeof goToFunc !== "function") {
+      throw new Error('A valid "goToFunc" must be provided')
+    }
+
+    _goTo = goToFunc
+  }
+
+  const goTo = (...params) => {
+    if (!initialisated) {
+      throw new Error("You need to call navigation.init first")
+    }
+
+    _goTo(...params)
+  }
+
+  return {
+    subscribe,
+    actions: {
+      init,
+      goTo,
+    },
+  }
+}
+
+export const navigation = createNavigationStore()