Fixing an issue with attempting to access a locked app causes a redirect loop locking up browser.

packages/builder/src/builderStore/store/frontend.js

@@ -67,6 +67,14 @@ export const getFrontendStore = () => {
     initialise: async pkg => {
       const { layouts, screens, application, clientLibPath } = pkg
       const components = await fetchComponentLibDefinitions(application.appId)
+      // make sure app isn't locked
+      if (
+        components &&
+        components.status === 400 &&
+        components.message?.includes("lock")
+      ) {
+        throw { ok: false, reason: "locked" }
+      }
       store.update(state => ({
         ...state,
         libraries: application.componentLibraries,

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

@@ -11,16 +11,18 @@
   import ICONS from "./icons"
 
   let openDataSources = []
-  $: enrichedDataSources = $datasources.list.map(datasource => {
-    const selected = $datasources.selected === datasource._id
-    const open = openDataSources.includes(datasource._id)
-    const containsSelected = containsActiveEntity(datasource)
-    return {
-      ...datasource,
-      selected,
-      open: selected || open || containsSelected,
-    }
-  })
+  $: enrichedDataSources = Array.isArray($datasources.list)
+    ? $datasources.list.map(datasource => {
+        const selected = $datasources.selected === datasource._id
+        const open = openDataSources.includes(datasource._id)
+        const containsSelected = containsActiveEntity(datasource)
+        return {
+          ...datasource,
+          selected,
+          open: selected || open || containsSelected,
+        }
+      })
+    : []
   $: openDataSource = enrichedDataSources.find(x => x.open)
   $: {
     // Ensure the open data source is always included in the list of open

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

@@ -11,12 +11,14 @@
   function prepareData() {
     let datasource = {}
     let existingTypeCount = $datasources.list.filter(
-      ds => ds.source == integration.type
+      ds => ds.source === integration.type
     ).length
 
     let baseName = IntegrationNames[integration.type]
     let name =
-      existingTypeCount == 0 ? baseName : `${baseName}-${existingTypeCount + 1}`
+      existingTypeCount === 0
+        ? baseName
+        : `${baseName}-${existingTypeCount + 1}`
 
     datasource.type = "datasource"
     datasource.source = integration.type

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

@@ -8,7 +8,7 @@
   import NPSFeedbackForm from "components/feedback/NPSFeedbackForm.svelte"
   import { get } from "builderStore/api"
   import { auth, admin } from "stores/portal"
-  import { isActive, goto, layout } from "@roxi/routify"
+  import { isActive, goto, layout, redirect } from "@roxi/routify"
   import Logo from "assets/bb-emblem.svg"
   import { capitalise } from "helpers"
   import UpgradeModal from "../../../../components/upgrade/UpgradeModal.svelte"
@@ -34,7 +34,16 @@
     const pkg = await res.json()
 
     if (res.ok) {
-      await store.actions.initialise(pkg)
+      try {
+        await store.actions.initialise(pkg)
+        // edge case, lock wasn't known to client when it re-directed, or user went directly
+      } catch (err) {
+        if (!err.ok && err.reason === "locked") {
+          $redirect("../../")
+        } else {
+          throw err
+        }
+      }
       await automationStore.actions.fetch()
       await roles.fetch()
       return pkg

packages/server/src/middleware/builder.js

@@ -33,7 +33,7 @@ async function checkDevAppLocks(ctx) {
     return
   }
   if (!(await doesUserHaveLock(appId, ctx.user))) {
-    ctx.throw(403, "User does not hold app lock.")
+    ctx.throw(400, "User does not hold app lock.")
   }
 
   // they do have lock, update it