Update top bar when not the primary builder and prevent flashing during loading states

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

@@ -39,6 +39,7 @@ import { makePropSafe as safe } from "@budibase/string-templates"
 import { getComponentFieldOptions } from "helpers/formFields"
 
 const INITIAL_FRONTEND_STATE = {
+  initialised: false,
   apps: [],
   name: "",
   url: "",
@@ -70,6 +71,7 @@ const INITIAL_FRONTEND_STATE = {
   previewDevice: "desktop",
   highlightedSettingKey: null,
   builderSidePanel: false,
+  hasLock: true,
 
   // URL params
   selectedScreenId: null,
@@ -112,7 +114,7 @@ export const getFrontendStore = () => {
       store.set({ ...INITIAL_FRONTEND_STATE })
     },
     initialise: async pkg => {
-      const { layouts, screens, application, clientLibPath } = pkg
+      const { layouts, screens, application, clientLibPath, hasLock } = pkg
 
       await store.actions.components.refreshDefinitions(application.appId)
 
@@ -137,6 +139,8 @@ export const getFrontendStore = () => {
         upgradableVersion: application.upgradableVersion,
         navigation: application.navigation || {},
         usedPlugins: application.usedPlugins || [],
+        hasLock,
+        initialised: true,
       }))
       screenHistoryStore.reset()
       automationHistoryStore.reset()

packages/builder/src/components/deploy/AppActions.svelte

@@ -113,7 +113,8 @@
   })
 </script>
 
-<div class="action-top-nav">
+{#if $store.hasLock}
+  <div class="action-top-nav">
     <div class="action-buttons">
       <div class="version">
         <VersionModal />
@@ -202,20 +203,23 @@
         </span>
       </TourWrap>
     </div>
-</div>
+  </div>
 
-<ConfirmDialog
+  <ConfirmDialog
     bind:this={unpublishModal}
     title="Confirm unpublish"
     okText="Unpublish app"
     onOk={confirmUnpublishApp}
->
+  >
     Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
-</ConfirmDialog>
+  </ConfirmDialog>
+{/if}
 
 <div class="buttons">
   <Button on:click={previewApp} secondary>Preview</Button>
+  {#if $store.hasLock}
     <DeployModal onOk={completePublish} />
+  {/if}
 </div>
 
 <style>

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

@@ -134,6 +134,7 @@
 
 <div class="root">
   <div class="top-nav">
+    {#if $store.initialised}
       <div class="topleftnav">
         <ActionMenu>
           <div slot="control">
@@ -148,7 +149,8 @@
             Overview
           </MenuItem>
           <MenuItem
-          on:click={() => $goto(`../../portal/overview/${application}/access`)}
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/access`)}
           >
             Access
           </MenuItem>
@@ -159,7 +161,8 @@
             Automation history
           </MenuItem>
           <MenuItem
-          on:click={() => $goto(`../../portal/overview/${application}/backups`)}
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/backups`)}
           >
             Backups
           </MenuItem>
@@ -171,7 +174,8 @@
             Name and URL
           </MenuItem>
           <MenuItem
-          on:click={() => $goto(`../../portal/overview/${application}/version`)}
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/version`)}
           >
             Version
           </MenuItem>
@@ -179,6 +183,7 @@
         <Heading size="XS">{$store.name}</Heading>
       </div>
       <div class="topcenternav">
+        {#if $store.hasLock}
           <Tabs {selected} size="M">
             {#each $layout.children as { path, title }}
               <TourWrap tourStepKey={`builder-${title}-section`}>
@@ -192,10 +197,17 @@
               </TourWrap>
             {/each}
           </Tabs>
+        {:else}
+          <div class="secondary-editor">
+            <Icon name="LockClosed" />
+            Another user is currently editing your screens and automations
+          </div>
+        {/if}
       </div>
       <div class="toprightnav">
         <AppActions {application} />
       </div>
+    {/if}
   </div>
   {#await promise}
     <!-- This should probably be some kind of loading state? -->
@@ -270,4 +282,11 @@
     align-items: center;
     gap: var(--spacing-l);
   }
+
+  .secondary-editor {
+    align-self: center;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
 </style>