General tidying and refactoring. Updated the publish button behaviour to also take into account revert and version update behaviours.

packages/builder/src/components/commandPalette/CommandPalette.svelte

@@ -55,7 +55,7 @@
       name: "Automations",
       description: "",
       icon: "Compass",
-      action: () => $goto("./automate"),
+      action: () => $goto("./automation"),
     },
     {
       type: "Publish",
@@ -127,7 +127,7 @@
       type: "Automation",
       name: automation.name,
       icon: "ShareAndroid",
-      action: () => $goto(`./automate/${automation._id}`),
+      action: () => $goto(`./automation/${automation._id}`),
     })),
     ...Constants.Themes.map(theme => ({
       type: "Change Builder Theme",

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

@@ -24,12 +24,18 @@
   import { onMount } from "svelte"
   import DeployModal from "components/deploy/DeployModal.svelte"
   import { apps } from "stores/portal"
-  import { store } from "builderStore"
+  import {
+    store,
+    screenHistoryStore,
+    automationHistoryStore,
+  } from "builderStore"
   import TourWrap from "components/portal/onboarding/TourWrap.svelte"
   import { TOUR_STEP_KEYS } from "components/portal/onboarding/tours.js"
   import { url, goto } from "@roxi/routify"
+  import { isEqual, cloneDeep } from "lodash"
 
   export let application
+  export let loaded
 
   let unpublishModal
   let updateAppModal
@@ -40,7 +46,7 @@
   let appActionPopoverOpen = false
   let appActionPopoverAnchor
 
-  let publishing
+  let publishing = false
 
   $: filteredApps = $apps.filter(app => app.devId === application)
   $: selectedApp = filteredApps?.length ? filteredApps[0] : null
@@ -58,6 +64,81 @@
     $store.version &&
     $store.upgradableVersion !== $store.version
 
+  let cachedVersion = $store.version + ""
+  let versionAltered = false
+  let screensAltered = false
+  let automationsAltered = false
+
+  let publishRecord = {
+    screenHistory: null,
+    automationHistory: null,
+  }
+
+  //Meta Changes
+  let appMeta = {}
+  let appMetaUpdated = false
+  let appMetaInitialised = false
+
+  const unsub = store.subscribe(state => {
+    let { name, url: appUrl, navigation, theme, customTheme, icon } = state
+    const update = {
+      name,
+      url: appUrl,
+      navigation: { ...cloneDeep(navigation) },
+      theme,
+      customTheme,
+      icon,
+    }
+
+    if (!isEqual(update, appMeta)) {
+      if (!appMetaInitialised) {
+        appMetaInitialised = true
+      } else {
+        appMetaUpdated = true
+      }
+      appMeta = {
+        ...(appMeta || {}),
+        ...update,
+      }
+    }
+  })
+
+  const monitorHistoryStore = (historyStore, publishedHistoryId, cb) => {
+    if (!historyStore.history.length || historyStore.loading) {
+      return
+    }
+    if (!historyStore.canUndo) {
+      cb(publishedHistoryId != -1)
+      return
+    }
+    const historyEntry = historyStore.history[historyStore.position - 1]
+
+    if (historyEntry) {
+      cb(publishedHistoryId != historyEntry.id)
+    }
+  }
+
+  $: monitorHistoryStore(
+    $screenHistoryStore,
+    publishRecord.screenHistory,
+    updated => {
+      screensAltered = updated
+    }
+  )
+
+  $: monitorHistoryStore(
+    $automationHistoryStore,
+    publishRecord.automationHistory,
+    updated => {
+      automationsAltered = updated
+    }
+  )
+
+  $: versionAltered = cachedVersion != $store.version
+  $: altered =
+    screensAltered || appMetaUpdated || automationsAltered || versionAltered
+  $: canPublish = (!isPublished || altered) && !publishing && loaded
+
   const initialiseApp = async () => {
     const applicationPkg = await API.fetchAppPackage($store.devId)
     await store.actions.initialise(applicationPkg)
@@ -112,6 +193,27 @@
     }
   }
 
+  const resetAppHistory = (historyStore, historyKey) => {
+    if (historyStore.history.length) {
+      const historyEntryPos = historyStore.position
+      const historyEntry = historyStore.history[historyEntryPos - 1]
+
+      publishRecord = {
+        ...publishRecord,
+        [historyKey]: historyEntry?.id || -1,
+      }
+    }
+  }
+
+  const resetStateTracking = () => {
+    resetAppHistory($automationHistoryStore, "automationHistory")
+    resetAppHistory($screenHistoryStore, "screenHistory")
+    automationsAltered = false
+    screensAltered = false
+    appMetaUpdated = false
+    cachedVersion = $store.version + ""
+  }
+
   async function publishApp() {
     try {
       publishing = true
@@ -124,7 +226,9 @@
       })
 
       await completePublish()
+      resetStateTracking()
     } catch (error) {
+      console.error(error)
       analytics.captureException(error)
       notifications.error("Error publishing app")
     }
@@ -153,6 +257,7 @@
         type: "success",
         icon: "GlobeStrike",
       })
+      publishRecord = {}
     } catch (err) {
       notifications.error("Error unpublishing app")
     }
@@ -176,7 +281,7 @@
 </script>
 
 {#if $store.hasLock}
-  <div class="action-top-nav">
+  <div class="action-top-nav" class:has-lock={$store.hasLock}>
     <div class="action-buttons">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       {#if updateAvailable}
@@ -317,7 +422,7 @@
                     cta
                     on:click={publishApp}
                     id={"builder-app-publish-button"}
-                    disabled={publishing}
+                    disabled={!canPublish}
                   >
                     Publish
                   </Button>
@@ -349,8 +454,20 @@
     />
   </Modal>
 
-  <RevertModal bind:this={revertModal} />
-  <VersionModal hideIcon bind:this={versionModal} />
+  <RevertModal bind:this={revertModal} onComplete={resetStateTracking} />
+  <VersionModal
+    hideIcon
+    bind:this={versionModal}
+    onComplete={resetStateTracking}
+  />
+{:else}
+  <div class="app-action-button preview-locked">
+    <div class="app-action">
+      <ActionButton quiet icon="PlayCircle" on:click={previewApp}>
+        Preview
+      </ActionButton>
+    </div>
+  </div>
 {/if}
 
 <style>
@@ -385,7 +502,7 @@
     cursor: pointer;
   }
   .app-action-popover-content .status-text {
-    color: #1ca872;
+    color: var(--spectrum-global-color-green-500);
     border-right: 1px solid var(--spectrum-global-color-gray-500);
     padding-right: var(--spacing-m);
   }
@@ -401,7 +518,7 @@
     .publish-popover-status
     .unpublish-link
     :global(.spectrum-Link) {
-    color: #ee4331;
+    color: var(--spectrum-global-color-red-400);
   }
   .publish-popover-status {
     display: flex;
@@ -435,6 +552,10 @@
     gap: var(--spectrum-actionbutton-icon-gap);
   }
 
+  .app-action-button.preview-locked {
+    padding-right: 0px;
+  }
+
   .app-action {
     display: flex;
     align-items: center;

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

@@ -10,7 +10,7 @@
   import { store } from "builderStore"
   import { API } from "api"
 
-  export let disabled = false
+  export let onComplete = () => {}
 
   let revertModal
   let appName
@@ -25,6 +25,7 @@
       const applicationPkg = await API.fetchAppPackage(appId)
       await store.actions.initialise(applicationPkg)
       notifications.info("Changes reverted successfully")
+      onComplete()
     } catch (error) {
       notifications.error(`Error reverting changes: ${error}`)
     }

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

@@ -18,6 +18,7 @@
     updateModal.hide()
   }
 
+  export let onComplete = () => {}
   export let hideIcon = false
 
   let updateModal
@@ -47,6 +48,7 @@
       notifications.success(
         `App updated successfully to version ${$store.upgradableVersion}`
       )
+      onComplete()
     } catch (err) {
       notifications.error(`Error updating app: ${err}`)
     }

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

@@ -143,7 +143,7 @@
 {/if}
 
 <div class="root" class:blur={$store.showPreview}>
-  <div class="top-nav">
+  <div class="top-nav" class:has-lock={$store.hasLock}>
     {#if $store.initialised}
       <div class="topleftnav">
         <span class="back-to-apps">
@@ -171,7 +171,10 @@
         {:else}
           <div class="secondary-editor">
             <Icon name="LockClosed" />
-            <div class="secondary-editor-body">
+            <div
+              class="secondary-editor-body"
+              title="Another user is currently editing your screens and automations"
+            >
               Another user is currently editing your screens and automations
             </div>
           </div>
@@ -184,7 +187,7 @@
         <span class:nav-lock={!$store.hasLock}>
           <UserAvatars users={$userStore} />
         </span>
-        <AppActions {application} />
+        <AppActions {application} {loaded} />
       </div>
     {/if}
   </div>
@@ -239,7 +242,6 @@
     flex: 0 0 60px;
     background: var(--background);
     padding: 0 var(--spacing-xl);
-    padding-right: 0px;
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     flex-direction: row;
@@ -249,6 +251,10 @@
     z-index: 2;
   }
 
+  .top-nav.has-lock {
+    padding-right: 0px;
+  }
+
   .topcenternav {
     display: flex;
     flex-direction: row;
@@ -259,16 +265,17 @@
 
   .topcenternav :global(.spectrum-Heading) {
     flex: 1 1 auto;
-    /* width: 0; */
     font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding: 0px var(--spacing-m);
   }
 
   .topleftnav {
     display: flex;
     position: relative;
     margin-bottom: -2px;
+    overflow: hidden;
   }
 
   .topleftnav :global(.spectrum-Tabs-itemLabel) {
@@ -291,6 +298,15 @@
     display: flex;
     flex-direction: row;
     gap: 8px;
+    min-width: 0px;
+    overflow: hidden;
+  }
+
+  .secondary-editor-body {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0px;
   }
 
   .body {

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

@@ -68,7 +68,7 @@
 
 <style>
   .delete-action :global(span) {
-    color: #ee4331;
+    color: var(--spectrum-global-color-red-400);
   }
   .delete-action {
     display: contents;

packages/builder/src/pages/builder/app/[application]/settings/index.svelte

@@ -7,12 +7,6 @@
     layout,
     route,
   } from "@roxi/routify"
-  // $: console.log("isChangingPage", $isChangingPage)
-  // $: console.log("page ", $page)
-  // $: console.log("is Active ", $isActive("../settings"))
-  $: indexCheck = $layout.meta.index
-  $: console.log("Index Check ", indexCheck)
-  $: console.log("layout", $layout)
 
   $redirect("../settings/automation-history")
 </script>

packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte

@@ -23,9 +23,6 @@
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
   const initialiseApp = async () => {
-    // In order for these changes to make it back into the app, the app package must be reinitialied
-    // could this have negative side affects???
-    console.log("Reinitialise")
     const applicationPkg = await API.fetchAppPackage(app.devId)
     await store.actions.initialise(applicationPkg)
   }

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -103,7 +103,6 @@
     $goto(
       `/builder/app/${appId}/settings/automation-history?${params.toString()}`
     )
-    // $goto(`../overview/${appId}/automation-history?${params.toString()}`)
   }
 
   const errorCount = errors => {

packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte

@@ -141,7 +141,7 @@
         customPlaceholder
         allowEditRows={false}
         customRenderers={customAppTableRenderers}
-        on:click={e => $goto(`../../overview/${e.detail.devId}`)}
+        on:click={e => $goto(`/builder/app/${e.detail.devId}`)}
       >
         <div class="placeholder" slot="placeholder">
           <Heading size="S">This group doesn't have access to any apps</Heading>

packages/builder/src/pages/builder/portal/users/users/[userId].svelte

@@ -346,7 +346,7 @@
           customPlaceholder
           allowEditRows={false}
           customRenderers={customAppTableRenderers}
-          on:click={e => $goto(`../../overview/${e.detail.devId}`)}
+          on:click={e => $goto(`/builder/app/${e.detail.devId}`)}
         >
           <div class="placeholder" slot="placeholder">
             <Heading size="S">

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

@@ -10,7 +10,6 @@ export { licensing } from "./licensing"
 export { groups } from "./groups"
 export { plugins } from "./plugins"
 export { backups } from "./backups"
-export { overview } from "./overview"
 export { environment } from "./environment"
 export { menu } from "./menu"
 export { auditLogs } from "./auditLogs"

packages/server/src/middleware/builder.ts

@@ -86,12 +86,6 @@ export default async function builder(ctx: UserCtx) {
 
   const referer = ctx.headers["referer"]
 
-  const overviewPath = "/builder/portal/overview/"
-  const overviewContext = !referer ? false : referer.includes(overviewPath)
-  if (overviewContext) {
-    return
-  }
-
   const hasAppId = !referer ? false : referer.includes(appId)
   const editingApp = referer ? hasAppId : false
   // check this is a builder call and editing