From f37c49e8afdbbd3c7df05626d22168d7837560e3 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 6 Jun 2023 16:16:09 +0100
Subject: [PATCH 01/18] Initial commit

---
 .../src/components/start/AppRow.svelte        |   2 +-
 .../builder/app/[application]/_layout.svelte  |  78 ++++-------
 .../automate/[automationId]/_layout.svelte    |  15 --
 .../automate/[automationId]/index.svelte      |   5 -
 .../app/[application]/automate/_layout.svelte | 131 ------------------
 .../app/[application]/automate/index.svelte   |  10 --
 .../pages/builder/portal/apps/index.svelte    |   5 +-
 7 files changed, 31 insertions(+), 215 deletions(-)
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/automate/[automationId]/_layout.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/automate/[automationId]/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/automate/index.svelte

diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 142c5c6e31..50e6b8466a 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -22,7 +22,7 @@
   }
 
   const goToOverview = () => {
-    $goto(`../overview/${app.devId}`)
+    $goto(`../../app/${app.devId}/settings`)
   }
 </script>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index f13aa3dab6..d10657bdbe 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -12,6 +12,7 @@
     Heading,
     Modal,
     notifications,
+    Button,
   } from "@budibase/bbui"
   import AppActions from "components/deploy/AppActions.svelte"
   import { API } from "api"
@@ -144,53 +145,14 @@
   <div class="top-nav">
     {#if $store.initialised}
       <div class="topleftnav">
-        <ActionMenu>
-          <div slot="control">
-            <Icon size="M" hoverable name="ShowMenu" />
-          </div>
-          <MenuItem on:click={() => $goto("../../portal/apps")}>
-            Exit to portal
-          </MenuItem>
-          <MenuItem
-            on:click={() => $goto(`../../portal/overview/${application}`)}
-          >
-            Overview
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/access`)}
-          >
-            Access
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/automation-history`)}
-          >
-            Automation history
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/backups`)}
-          >
-            Backups
-          </MenuItem>
-
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/name-and-url`)}
-          >
-            Name and URL
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/version`)}
-          >
-            Version
-          </MenuItem>
-        </ActionMenu>
-        <Heading size="XS">{$store.name}</Heading>
-      </div>
-      <div class="topcenternav">
+        <span class="back-to-apps">
+          <Icon
+            size="S"
+            hoverable
+            name="BackAndroid"
+            on:click={() => $goto("../../portal/apps")}
+          />
+        </span>
         {#if $store.hasLock}
           <Tabs {selected} size="M">
             {#each $layout.children as { path, title }}
@@ -212,6 +174,9 @@
           </div>
         {/if}
       </div>
+      <div class="topcenternav">
+        <Heading size="XS">{$store.name}</Heading>
+      </div>
       <div class="toprightnav">
         <UserAvatars users={$userStore} />
         <AppActions {application} />
@@ -236,6 +201,13 @@
 </Modal>
 
 <style>
+  .back-to-apps {
+    display: contents;
+  }
+  .back-to-apps :global(.icon) {
+    margin-left: 12px;
+    margin-right: 12px;
+  }
   .loading {
     min-height: 100%;
     height: 100%;
@@ -263,27 +235,29 @@
     z-index: 2;
   }
 
-  .topleftnav {
+  .topcenternav {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-xl);
   }
-  .topleftnav :global(.spectrum-Heading) {
+
+  .topcenternav :global(.spectrum-Heading) {
     flex: 1 1 auto;
-    width: 0;
+    /* width: 0; */
     font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .topcenternav {
+  .topleftnav {
     display: flex;
     position: relative;
     margin-bottom: -2px;
   }
-  .topcenternav :global(.spectrum-Tabs-itemLabel) {
+
+  .topleftnav :global(.spectrum-Tabs-itemLabel) {
     font-weight: 600;
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/[automationId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/[automationId]/_layout.svelte
deleted file mode 100644
index 3be71a1bbe..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/automate/[automationId]/_layout.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import { automationStore } from "builderStore"
-  import { params } from "@roxi/routify"
-
-  if ($params.automation) {
-    const automation = $automationStore.automations.find(
-      m => m._id === $params.automation
-    )
-    if (automation) {
-      automationStore.actions.select(automation)
-    }
-  }
-</script>
-
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/[automationId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/automate/[automationId]/index.svelte
deleted file mode 100644
index 1a15ed48c6..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/automate/[automationId]/index.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
-</script>
-
-<AutomationBuilder />
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
deleted file mode 100644
index 79ca5df168..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
+++ /dev/null
@@ -1,131 +0,0 @@
-<script>
-  import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui"
-  import { automationStore, selectedAutomation } from "builderStore"
-  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
-  import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
-  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
-  import { onDestroy, onMount } from "svelte"
-  import { syncURLToState } from "helpers/urlStateSync"
-  import * as routify from "@roxi/routify"
-  import { store } from "builderStore"
-  import { redirect } from "@roxi/routify"
-
-  // Prevent access for other users than the lock holder
-  $: {
-    if (!$store.hasLock) {
-      $redirect("../data")
-    }
-  }
-
-  // Keep URL and state in sync for selected screen ID
-  const stopSyncing = syncURLToState({
-    urlParam: "automationId",
-    stateKey: "selectedAutomationId",
-    validate: id => $automationStore.automations.some(x => x._id === id),
-    fallbackUrl: "./index",
-    store: automationStore,
-    up: automationStore.actions.select,
-    routify,
-  })
-
-  let modal
-  let webhookModal
-
-  onMount(() => {
-    $automationStore.showTestPanel = false
-  })
-
-  onDestroy(stopSyncing)
-</script>
-
-<!-- routify:options index=3 -->
-<div class="root">
-  <AutomationPanel {modal} {webhookModal} />
-  <div class="content">
-    {#if $automationStore.automations?.length}
-      <slot />
-    {:else}
-      <div class="centered">
-        <div class="main">
-          <Layout gap="S" justifyItems="center">
-            <svg
-              width="60px"
-              height="60px"
-              class="spectrum-Icon"
-              focusable="false"
-            >
-              <use xlink:href="#spectrum-icon-18-WorkflowAdd" />
-            </svg>
-            <Heading size="M">You have no automations</Heading>
-            <Body size="M">Let's fix that. Call the bots!</Body>
-            <Button on:click={() => modal.show()} size="M" cta>
-              Create automation
-            </Button>
-          </Layout>
-        </div>
-      </div>
-    {/if}
-  </div>
-
-  {#if $automationStore.showTestPanel}
-    <div class="setup">
-      <TestPanel automation={$selectedAutomation} />
-    </div>
-  {/if}
-  <Modal bind:this={modal}>
-    <CreateAutomationModal {webhookModal} />
-  </Modal>
-  <Modal bind:this={webhookModal} width="30%">
-    <CreateWebhookModal />
-  </Modal>
-</div>
-
-<style>
-  .root {
-    flex: 1 1 auto;
-    height: 0;
-    display: grid;
-    grid-auto-flow: column dense;
-    grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
-    overflow: hidden;
-  }
-  .content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-l);
-    overflow: auto;
-  }
-  .centered {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .main {
-    width: 300px;
-  }
-
-  .setup {
-    padding-top: var(--spectrum-global-dimension-size-200);
-    border-left: var(--border-light);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-l);
-    background-color: var(--background);
-    grid-column: 3;
-    overflow: auto;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/index.svelte b/packages/builder/src/pages/builder/app/[application]/automate/index.svelte
deleted file mode 100644
index ea2c853139..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/automate/index.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-  import { redirect } from "@roxi/routify"
-  import { automationStore } from "builderStore"
-
-  $: {
-    if ($automationStore.automations?.length) {
-      $redirect(`./${$automationStore.automations[0]._id}`)
-    }
-  }
-</script>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 8b8451f036..f2ea7b3896 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -100,7 +100,10 @@
     const params = new URLSearchParams({
       open: "error",
     })
-    $goto(`../overview/${appId}/automation-history?${params.toString()}`)
+    $goto(
+      `/builder/app/${appId}/settings/automation-history?${params.toString()}`
+    )
+    // $goto(`../overview/${appId}/automation-history?${params.toString()}`)
   }
 
   const errorCount = errors => {

From e1b63842e5e50be106371fd165b704d2a177f9e0 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 6 Jun 2023 16:24:30 +0100
Subject: [PATCH 02/18] Adding in relocated screen components

---
 .../automation/[automationId]/_layout.svelte  |  15 +
 .../automation/[automationId]/index.svelte    |   5 +
 .../[application]/automation/_layout.svelte   | 131 +++++++
 .../app/[application]/automation/index.svelte |  10 +
 .../app/[application]/settings/_layout.svelte |  74 ++++
 .../_components/HistoryDetailsPanel.svelte    |  82 +++++
 .../_components/StatusRenderer.svelte         |  27 ++
 .../settings/automation-history/index.svelte  | 262 ++++++++++++++
 .../_components/ActionsRenderer.svelte        |  87 +++++
 .../_components/AppSizeRenderer.svelte        |  41 +++
 .../_components/CreateRestoreModal.svelte     |  27 ++
 .../_components/DatasourceRenderer.svelte     |  21 ++
 .../backups/_components/StatusRenderer.svelte |  15 +
 .../_components/TimeAgoRenderer.svelte        |  10 +
 .../backups/_components/TypeRenderer.svelte   |  36 ++
 .../backups/_components/UserRenderer.svelte   |  18 +
 .../settings/backups/index.svelte             | 340 ++++++++++++++++++
 .../app/[application]/settings/embed.svelte   |  23 ++
 .../app/[application]/settings/index.svelte   |   4 +
 .../settings/name-and-url.svelte              |  79 ++++
 .../app/[application]/settings/version.svelte |  39 ++
 21 files changed, 1346 insertions(+)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/automation/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/HistoryDetailsPanel.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/backups/_components/AppSizeRenderer.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/backups/_components/DatasourceRenderer.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/backups/_components/StatusRenderer.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TimeAgoRenderer.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/backups/_components/UserRenderer.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/version.svelte

diff --git a/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte
new file mode 100644
index 0000000000..3be71a1bbe
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { automationStore } from "builderStore"
+  import { params } from "@roxi/routify"
+
+  if ($params.automation) {
+    const automation = $automationStore.automations.find(
+      m => m._id === $params.automation
+    )
+    if (automation) {
+      automationStore.actions.select(automation)
+    }
+  }
+</script>
+
+<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte
new file mode 100644
index 0000000000..1a15ed48c6
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte
@@ -0,0 +1,5 @@
+<script>
+  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
+</script>
+
+<AutomationBuilder />
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
new file mode 100644
index 0000000000..79ca5df168
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -0,0 +1,131 @@
+<script>
+  import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui"
+  import { automationStore, selectedAutomation } from "builderStore"
+  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
+  import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
+  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
+  import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
+  import { onDestroy, onMount } from "svelte"
+  import { syncURLToState } from "helpers/urlStateSync"
+  import * as routify from "@roxi/routify"
+  import { store } from "builderStore"
+  import { redirect } from "@roxi/routify"
+
+  // Prevent access for other users than the lock holder
+  $: {
+    if (!$store.hasLock) {
+      $redirect("../data")
+    }
+  }
+
+  // Keep URL and state in sync for selected screen ID
+  const stopSyncing = syncURLToState({
+    urlParam: "automationId",
+    stateKey: "selectedAutomationId",
+    validate: id => $automationStore.automations.some(x => x._id === id),
+    fallbackUrl: "./index",
+    store: automationStore,
+    up: automationStore.actions.select,
+    routify,
+  })
+
+  let modal
+  let webhookModal
+
+  onMount(() => {
+    $automationStore.showTestPanel = false
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+<!-- routify:options index=3 -->
+<div class="root">
+  <AutomationPanel {modal} {webhookModal} />
+  <div class="content">
+    {#if $automationStore.automations?.length}
+      <slot />
+    {:else}
+      <div class="centered">
+        <div class="main">
+          <Layout gap="S" justifyItems="center">
+            <svg
+              width="60px"
+              height="60px"
+              class="spectrum-Icon"
+              focusable="false"
+            >
+              <use xlink:href="#spectrum-icon-18-WorkflowAdd" />
+            </svg>
+            <Heading size="M">You have no automations</Heading>
+            <Body size="M">Let's fix that. Call the bots!</Body>
+            <Button on:click={() => modal.show()} size="M" cta>
+              Create automation
+            </Button>
+          </Layout>
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  {#if $automationStore.showTestPanel}
+    <div class="setup">
+      <TestPanel automation={$selectedAutomation} />
+    </div>
+  {/if}
+  <Modal bind:this={modal}>
+    <CreateAutomationModal {webhookModal} />
+  </Modal>
+  <Modal bind:this={webhookModal} width="30%">
+    <CreateWebhookModal />
+  </Modal>
+</div>
+
+<style>
+  .root {
+    flex: 1 1 auto;
+    height: 0;
+    display: grid;
+    grid-auto-flow: column dense;
+    grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
+    overflow: hidden;
+  }
+  .content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    overflow: auto;
+  }
+  .centered {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .main {
+    width: 300px;
+  }
+
+  .setup {
+    padding-top: var(--spectrum-global-dimension-size-200);
+    border-left: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    background-color: var(--background);
+    grid-column: 3;
+    overflow: auto;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/index.svelte b/packages/builder/src/pages/builder/app/[application]/automation/index.svelte
new file mode 100644
index 0000000000..ea2c853139
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/automation/index.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  import { automationStore } from "builderStore"
+
+  $: {
+    if ($automationStore.automations?.length) {
+      $redirect(`./${$automationStore.automations[0]._id}`)
+    }
+  }
+</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
new file mode 100644
index 0000000000..3c0299d50a
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -0,0 +1,74 @@
+<script>
+  import {
+    Content,
+    SideNav,
+    SideNavItem,
+    Breadcrumbs,
+    Breadcrumb,
+    Header,
+  } from "components/portal/page"
+  import {
+    Page,
+    Layout,
+    Button,
+    Icon,
+    ActionMenu,
+    MenuItem,
+    Helpers,
+    Input,
+    Modal,
+    notifications,
+  } from "@budibase/bbui"
+  import EditableIcon from "components/common/EditableIcon.svelte"
+  import { url, isActive, goto } from "@roxi/routify"
+  import { apps } from "stores/portal"
+</script>
+
+<!-- routify:options index=4 -->
+<div class="settings">
+  <Page>
+    <Layout noPadding gap="L">
+      <Content showMobileNav>
+        <SideNav slot="side-nav">
+          <SideNavItem
+            text="Automation History"
+            url={$url("./automation-history")}
+            active={$isActive("./automation-history")}
+          />
+          <SideNavItem
+            text="Backups"
+            url={$url("./backups")}
+            active={$isActive("./backups")}
+          />
+          <SideNavItem
+            text="Embed"
+            url={$url("./embed")}
+            active={$isActive("./embed")}
+          />
+          <SideNavItem
+            text="Name and URL"
+            url={$url("./name-and-url")}
+            active={$isActive("./name-and-url")}
+          />
+          <SideNavItem
+            text="Version"
+            url={$url("./version")}
+            active={$isActive("./version")}
+          />
+        </SideNav>
+        <slot />
+      </Content>
+    </Layout>
+  </Page>
+</div>
+
+<style>
+  .settings {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    height: 0;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/HistoryDetailsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/HistoryDetailsPanel.svelte
new file mode 100644
index 0000000000..5b9c925130
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/HistoryDetailsPanel.svelte
@@ -0,0 +1,82 @@
+<script>
+  import {
+    Layout,
+    Body,
+    Button,
+    InlineAlert,
+    Heading,
+    Icon,
+  } from "@budibase/bbui"
+  import StatusRenderer from "./StatusRenderer.svelte"
+  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
+  import { goto } from "@roxi/routify"
+  import { automationStore } from "builderStore"
+
+  export let history
+  export let appId
+  export let close
+  const STOPPED_ERROR = "stopped_error"
+
+  $: exists = $automationStore.automations?.find(
+    auto => auto._id === history?.automationId
+  )
+</script>
+
+{#if history}
+  <Layout noPadding>
+    <div class="controls">
+      <StatusRenderer value={history.status} />
+      <Icon hoverable name="Close" on:click={close} />
+    </div>
+    <Layout noPadding gap="XS">
+      <Heading>{history.automationName}</Heading>
+      <DateTimeRenderer value={history.createdAt} />
+    </Layout>
+    {#if history.status === STOPPED_ERROR}
+      <div class="cron-error">
+        <InlineAlert
+          type="error"
+          header="CRON automation disabled"
+          message="Fix the error and re-publish your app to re-activate."
+        />
+      </div>
+    {/if}
+    {#if exists}
+      <div>
+        <Button
+          secondary
+          on:click={() => {
+            $goto(`/builder/app/${appId}/automation/${history.automationId}`)
+          }}
+        >
+          Edit automation
+        </Button>
+      </div>
+    {/if}
+    {#key history}
+      <div class="history">
+        <TestDisplay testResults={history} width="100%" />
+      </div>
+    {/key}
+  </Layout>
+{:else}
+  <Body>No details found</Body>
+{/if}
+
+<style>
+  .controls {
+    display: flex;
+    gap: var(--spacing-s);
+    justify-content: space-between;
+    align-items: center;
+  }
+  .cron-error {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+  .history {
+    margin: 0 -30px;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte
new file mode 100644
index 0000000000..f041faa349
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { Badge } from "@budibase/bbui"
+  export let value
+
+  $: isError = !value || value.toLowerCase() === "error"
+  $: isStoppedError = value?.toLowerCase() === "stopped_error"
+  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
+  $: info = getInfo(isError, isStopped)
+
+  const getInfo = (error, stopped) => {
+    if (error) {
+      return { color: "red", message: "Error" }
+    } else if (stopped) {
+      return { color: "yellow", message: "Stopped" }
+    } else {
+      return { color: "green", message: "Success" }
+    }
+  }
+</script>
+
+<Badge
+  green={info.color === "green"}
+  red={info.color === "red"}
+  yellow={info.color === "yellow"}
+>
+  {info.message}
+</Badge>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
new file mode 100644
index 0000000000..c1c6be997b
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
@@ -0,0 +1,262 @@
+<script>
+  import {
+    Layout,
+    Table,
+    Select,
+    Pagination,
+    Button,
+    Body,
+    Heading,
+    Divider,
+  } from "@budibase/bbui"
+  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.svelte"
+  import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
+  import { automationStore, store } from "builderStore"
+  import { createPaginationStore } from "helpers/pagination"
+  import { getContext, onDestroy, onMount } from "svelte"
+  import dayjs from "dayjs"
+  import { auth, licensing, admin } from "stores/portal"
+  import { Constants } from "@budibase/frontend-core"
+  import Portal from "svelte-portal"
+
+  const ERROR = "error",
+    SUCCESS = "success",
+    STOPPED = "stopped"
+  const sidePanel = getContext("side-panel")
+
+  let pageInfo = createPaginationStore()
+  let runHistory = null
+  let selectedHistory = null
+  let automationOptions = []
+  let automationId = null
+  let status = null
+  let timeRange = null
+  let loaded = false
+
+  $: licensePlan = $auth.user?.license?.plan
+  $: page = $pageInfo.page
+  $: fetchLogs(automationId, status, page, timeRange)
+
+  const timeOptions = [
+    { value: "90-d", label: "Past 90 days" },
+    { value: "30-d", label: "Past 30 days" },
+    { value: "1-w", label: "Past week" },
+    { value: "1-d", label: "Past day" },
+    { value: "1-h", label: "Past 1 hour" },
+    { value: "15-m", label: "Past 15 mins" },
+    { value: "5-m", label: "Past 5 mins" },
+  ]
+
+  const statusOptions = [
+    { value: SUCCESS, label: "Success" },
+    { value: ERROR, label: "Error" },
+    { value: STOPPED, label: "Stopped" },
+  ]
+
+  const runHistorySchema = {
+    status: { displayName: "Status" },
+    automationName: { displayName: "Automation" },
+    createdAt: { displayName: "Time" },
+  }
+
+  const customRenderers = [
+    { column: "createdAt", component: DateTimeRenderer },
+    { column: "status", component: StatusRenderer },
+  ]
+
+  async function fetchLogs(
+    automationId,
+    status,
+    page,
+    timeRange,
+    force = false
+  ) {
+    if (!force && !loaded) {
+      return
+    }
+    let startDate = null
+    if (timeRange) {
+      const [length, units] = timeRange.split("-")
+      startDate = dayjs().subtract(length, units)
+    }
+    const response = await automationStore.actions.getLogs({
+      automationId,
+      status,
+      page,
+      startDate,
+    })
+    pageInfo.fetched(response.hasNextPage, response.nextPage)
+    runHistory = enrichHistory($automationStore.blockDefinitions, response.data)
+  }
+
+  function enrichHistory(definitions, runHistory) {
+    if (!definitions) {
+      return []
+    }
+    const finalHistory = []
+    for (let history of runHistory) {
+      if (!history.steps) {
+        continue
+      }
+      let notFound = false
+      for (let step of history.steps) {
+        const trigger = definitions.TRIGGER[step.stepId],
+          action = definitions.ACTION[step.stepId]
+        if (!trigger && !action) {
+          notFound = true
+          break
+        }
+        step.icon = trigger ? trigger.icon : action.icon
+        step.name = trigger ? trigger.name : action.name
+      }
+      if (!notFound) {
+        finalHistory.push(history)
+      }
+    }
+    return finalHistory
+  }
+
+  function viewDetails({ detail }) {
+    selectedHistory = detail
+    sidePanel.open()
+  }
+
+  onMount(async () => {
+    await automationStore.actions.fetch()
+    const params = new URLSearchParams(window.location.search)
+    const shouldOpen = params.get("open") === ERROR
+    if (shouldOpen) {
+      status = ERROR
+    }
+    automationOptions = []
+    for (let automation of $automationStore.automations) {
+      automationOptions.push({ value: automation._id, label: automation.name })
+    }
+    await fetchLogs(automationId, status, 0, timeRange, true)
+    // Open the first automation info if one exists
+    if (shouldOpen && runHistory?.[0]) {
+      viewDetails({ detail: runHistory[0] })
+    }
+    loaded = true
+  })
+
+  onDestroy(() => {
+    sidePanel.close()
+  })
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Automation History</Heading>
+    <Body>View the automations your app has executed</Body>
+  </Layout>
+  <Divider />
+
+  <div class="controls">
+    <div class="search">
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Status"
+          bind:value={status}
+          options={statusOptions}
+        />
+      </div>
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Automation"
+          bind:value={automationId}
+          options={automationOptions}
+        />
+      </div>
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Date range"
+          bind:value={timeRange}
+          options={timeOptions}
+          isOptionEnabled={x => {
+            if (licensePlan?.type === Constants.PlanType.FREE) {
+              return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
+            } else if (licensePlan?.type === Constants.PlanType.TEAM) {
+              return ["90-d"].indexOf(x.value) < 0
+            } else if (licensePlan?.type === Constants.PlanType.PRO) {
+              return ["30-d", "90-d"].indexOf(x.value) < 0
+            }
+            return true
+          }}
+        />
+      </div>
+    </div>
+    {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
+      <Button secondary on:click={$licensing.goToUpgradePage()}>
+        Get more history
+      </Button>
+    {/if}
+  </div>
+
+  {#if runHistory}
+    <div>
+      <Table
+        on:click={viewDetails}
+        schema={runHistorySchema}
+        allowSelectRows={false}
+        allowEditColumns={false}
+        allowEditRows={false}
+        data={runHistory}
+        {customRenderers}
+        placeholderText="No history found"
+        border={false}
+      />
+      <div class="pagination">
+        <Pagination
+          page={$pageInfo.pageNumber}
+          hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+          hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+          goToPrevPage={pageInfo.prevPage}
+          goToNextPage={pageInfo.nextPage}
+        />
+      </div>
+    </div>
+  {/if}
+</Layout>
+
+{#if selectedHistory}
+  <Portal target="#side-panel">
+    <HistoryDetailsPanel
+      appId={$store.appId}
+      bind:history={selectedHistory}
+      close={sidePanel.close}
+    />
+  </Portal>
+{/if}
+
+<style>
+  .controls {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-xl);
+    align-items: flex-end;
+    flex-wrap: wrap;
+  }
+  .search {
+    display: flex;
+    gap: var(--spacing-xl);
+    align-items: flex-start;
+    flex: 1 0 auto;
+    max-width: 100%;
+  }
+  .select {
+    flex: 1 1 0;
+    max-width: 150px;
+    min-width: 80px;
+  }
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: var(--spacing-xl);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
new file mode 100644
index 0000000000..4787112760
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
@@ -0,0 +1,87 @@
+<script>
+  import {
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Heading,
+    Body,
+    Modal,
+  } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import CreateRestoreModal from "./CreateRestoreModal.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let row
+
+  let deleteDialog
+  let restoreDialog
+  let restoreBackupModal
+
+  const dispatch = createEventDispatcher()
+
+  const onClickRestore = () => {
+    dispatch("buttonclick", {
+      type: "backupRestore",
+      backupId: row._id,
+    })
+  }
+
+  const onClickDelete = () => {
+    dispatch("buttonclick", {
+      type: "backupDelete",
+      backupId: row._id,
+    })
+  }
+
+  async function downloadExport() {
+    window.open(`/api/apps/${row.appId}/backups/${row._id}/file`, "_blank")
+  }
+</script>
+
+<div class="cell">
+  <ActionMenu align="right">
+    <div slot="control">
+      <Icon size="M" hoverable name="MoreSmallList" />
+    </div>
+
+    {#if row.type !== "restore"}
+      <MenuItem on:click={restoreDialog.show} icon="Revert">Restore</MenuItem>
+      <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
+      <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
+    {/if}
+  </ActionMenu>
+</div>
+
+<Modal bind:this={restoreBackupModal}>
+  <CreateRestoreModal confirm={onClickRestore} />
+</Modal>
+
+<ConfirmDialog
+  bind:this={deleteDialog}
+  okText="Delete Backup"
+  onOk={onClickDelete}
+  title="Confirm Deletion"
+>
+  Are you sure you wish to delete this backup? This action cannot be undone.
+</ConfirmDialog>
+
+<ConfirmDialog
+  bind:this={restoreDialog}
+  okText="Continue"
+  onOk={restoreBackupModal?.show}
+  title="Confirm restore"
+  warning={false}
+>
+  <Heading size="S">Backup</Heading>
+  <Body size="S">{new Date(row.timestamp).toLocaleString()}</Body>
+</ConfirmDialog>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+    margin-left: auto;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/AppSizeRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/AppSizeRenderer.svelte
new file mode 100644
index 0000000000..c103399f5b
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/AppSizeRenderer.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let row
+
+  $: automations = row?.automations
+  $: datasources = row?.datasources
+  $: screens = row?.screens
+</script>
+
+<div class="cell">
+  {#if automations != null && screens != null && datasources != null}
+    <div class="item">
+      <Icon name="Data" />
+      <div>{datasources || 0}</div>
+    </div>
+    <div class="item">
+      <Icon name="WebPage" />
+      <div>{screens || 0}</div>
+    </div>
+    <div class="item">
+      <Icon name="JourneyVoyager" />
+      <div>{automations || 0}</div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: calc(var(--spacing-xl) * 2);
+    align-items: center;
+  }
+
+  .item {
+    display: flex;
+    gap: var(--spacing-s);
+    flex-direction: row;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte
new file mode 100644
index 0000000000..62ef3e239d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { ModalContent, Input, Body } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+
+  export let confirm
+
+  let templateName = $auth.user.firstName
+    ? `${$auth.user.firstName}'s Backup`
+    : "Restore Backup"
+  let name = templateName
+</script>
+
+<ModalContent
+  onConfirm={() => confirm(name)}
+  title="Back up your current version"
+  confirmText="Confirm Restore"
+  disabled={!name}
+>
+  <Body size="S"
+    >Create a backup of your current app to allow you to roll back after
+    restoring this backup</Body
+  >
+  <Input label="Backup name" bind:value={name} />
+</ModalContent>
+
+<style>
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/DatasourceRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/DatasourceRenderer.svelte
new file mode 100644
index 0000000000..198339dae9
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/DatasourceRenderer.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let value
+</script>
+
+<div class="cell">
+  {#if value != null}
+    <Icon name="Data" />
+    <div>{value || 0}</div>
+  {/if}
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/StatusRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/StatusRenderer.svelte
new file mode 100644
index 0000000000..3b3cce731d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/StatusRenderer.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { Badge } from "@budibase/bbui"
+
+  export let value = "started"
+  $: status = value[0].toUpperCase() + value?.slice(1)
+</script>
+
+<Badge
+  grey={value === "started" || value === "pending"}
+  green={value === "complete"}
+  red={value === "failed"}
+  size="S"
+>
+  {status}
+</Badge>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TimeAgoRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TimeAgoRenderer.svelte
new file mode 100644
index 0000000000..fd67b4010b
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TimeAgoRenderer.svelte
@@ -0,0 +1,10 @@
+<script>
+  import dayjs from "dayjs"
+  import relativeTime from "dayjs/plugin/relativeTime"
+
+  dayjs.extend(relativeTime)
+
+  export let value
+</script>
+
+<span title={value}>{dayjs(value).fromNow()}</span>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte
new file mode 100644
index 0000000000..86ad0f3d4e
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { BackupTrigger } from "constants/backend/backups"
+  export let row
+
+  $: trigger = row?.trigger || "manual"
+  $: type = row?.type || "backup"
+
+  function printTrigger(trig) {
+    let final = "undefined"
+    switch (trig) {
+      case BackupTrigger.PUBLISH:
+        final = "published"
+        break
+      case BackupTrigger.RESTORING:
+        final = "pre-restore"
+        break
+      default:
+        final = trig
+        break
+    }
+    return final.charAt(0).toUpperCase() + final.slice(1)
+  }
+</script>
+
+<div class="cell">
+  {printTrigger(trigger)}
+  {type}
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/UserRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/UserRenderer.svelte
new file mode 100644
index 0000000000..399877a801
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/UserRenderer.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { UserAvatar } from "@budibase/frontend-core"
+
+  export let value
+</script>
+
+<div class="cell">
+  <UserAvatar user={value} />
+</div>
+
+<style>
+  .cell {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
new file mode 100644
index 0000000000..1d612117e2
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
@@ -0,0 +1,340 @@
+<script>
+  import {
+    Button,
+    DatePicker,
+    Divider,
+    Layout,
+    notifications,
+    Pagination,
+    Select,
+    Heading,
+    Body,
+    Tags,
+    Tag,
+    Table,
+  } from "@budibase/bbui"
+  import { backups, licensing, auth, admin } from "stores/portal"
+  import { store } from "builderStore"
+  import { createPaginationStore } from "helpers/pagination"
+  import TimeAgoRenderer from "./_components/TimeAgoRenderer.svelte"
+  import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
+  import ActionsRenderer from "./_components/ActionsRenderer.svelte"
+  import UserRenderer from "./_components/UserRenderer.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.svelte"
+  import TypeRenderer from "./_components/TypeRenderer.svelte"
+  import BackupsDefault from "assets/backups-default.png"
+  import { BackupTrigger, BackupType } from "constants/backend/backups"
+  import { onMount } from "svelte"
+
+  let loading = true
+  let backupData = null
+  let pageInfo = createPaginationStore()
+  let filterOpt = null
+  let startDate = null
+  let endDate = null
+  let filters = [
+    {
+      label: "Manual backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.MANUAL },
+    },
+    {
+      label: "Published backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.PUBLISH },
+    },
+    {
+      label: "Pre-restore backup",
+      value: { type: BackupType.BACKUP, trigger: BackupTrigger.RESTORING },
+    },
+    {
+      label: "Manual restore",
+      value: { type: BackupType.RESTORE, trigger: BackupTrigger.MANUAL },
+    },
+  ]
+
+  $: page = $pageInfo.page
+  $: fetchBackups(filterOpt, page, startDate, endDate)
+
+  let schema = {
+    type: {
+      displayName: "Type",
+      width: "auto",
+    },
+    createdAt: {
+      displayName: "Date",
+      width: "auto",
+    },
+    appSize: {
+      displayName: "App size",
+      width: "auto",
+    },
+    createdBy: {
+      displayName: "User",
+      width: "auto",
+    },
+    status: {
+      displayName: "Status",
+      width: "auto",
+    },
+    actions: {
+      displayName: null,
+      width: "auto",
+    },
+  }
+
+  const customRenderers = [
+    { column: "appSize", component: AppSizeRenderer },
+    { column: "actions", component: ActionsRenderer },
+    { column: "createdAt", component: TimeAgoRenderer },
+    { column: "createdBy", component: UserRenderer },
+    { column: "status", component: StatusRenderer },
+    { column: "type", component: TypeRenderer },
+  ]
+
+  function flattenBackups(backups) {
+    return backups.map(backup => {
+      return {
+        ...backup,
+        ...backup?.contents,
+      }
+    })
+  }
+
+  async function fetchBackups(filters, page, startDate, endDate) {
+    const response = await backups.searchBackups({
+      appId: $store.appId,
+      ...filters,
+      page,
+      startDate,
+      endDate,
+    })
+    pageInfo.fetched(response.hasNextPage, response.nextPage)
+
+    // flatten so we have an easier structure to use for the table schema
+    backupData = flattenBackups(response.data)
+  }
+
+  async function createManualBackup() {
+    try {
+      loading = true
+      let response = await backups.createManualBackup({
+        appId: $store.appId,
+      })
+      await fetchBackups(filterOpt, page)
+      notifications.success(response.message)
+    } catch {
+      notifications.error("Unable to create backup")
+    }
+  }
+
+  const poll = backupData => {
+    if (backupData === null) {
+      return
+    }
+
+    if (backupData.some(datum => datum.status === "started")) {
+      setTimeout(() => fetchBackups(filterOpt, page), 2000)
+    } else {
+      loading = false
+    }
+  }
+
+  $: poll(backupData)
+
+  async function handleButtonClick({ detail }) {
+    if (detail.type === "backupDelete") {
+      await backups.deleteBackup({
+        appId: $store.appId,
+        backupId: detail.backupId,
+      })
+      await fetchBackups(filterOpt, page)
+    } else if (detail.type === "backupRestore") {
+      await backups.restoreBackup({
+        appId: $store.appId,
+        backupId: detail.backupId,
+        name: detail.restoreBackupName,
+      })
+      await fetchBackups(filterOpt, page)
+    } else if (detail.type === "backupUpdate") {
+      await backups.updateBackup({
+        appId: $store.appId,
+        backupId: detail.backupId,
+        name: detail.name,
+      })
+      await fetchBackups(filterOpt, page)
+    }
+  }
+
+  onMount(async () => {
+    await fetchBackups(filterOpt, page, startDate, endDate)
+    loading = false
+  })
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <div class="title">
+      <Heading>Backups</Heading>
+      {#if !$licensing.backupsEnabled}
+        <Tags>
+          <Tag icon="LockClosed">Premium</Tag>
+        </Tags>
+      {/if}
+    </div>
+    <Body>Back up your apps and restore them to their previous state</Body>
+  </Layout>
+  <Divider />
+
+  {#if !$licensing.backupsEnabled}
+    {#if !$auth.accountPortalAccess && $admin.cloud}
+      <Body>Contact your account holder to upgrade your plan.</Body>
+    {/if}
+    <div class="pro-buttons">
+      {#if $auth.accountPortalAccess}
+        <Button
+          primary
+          disabled={!$auth.accountPortalAccess && $admin.cloud}
+          on:click={$licensing.goToUpgradePage()}
+        >
+          Upgrade
+        </Button>
+      {/if}
+      <Button
+        secondary
+        on:click={() => {
+          window.open("https://budibase.com/pricing/", "_blank")
+        }}
+      >
+        View plans
+      </Button>
+    </div>
+  {:else if !backupData?.length && !loading && !filterOpt && !startDate}
+    <div class="center">
+      <Layout noPadding gap="S" justifyItems="center">
+        <img height="130px" src={BackupsDefault} alt="BackupsDefault" />
+        <Layout noPadding gap="XS">
+          <Heading>You have no backups yet</Heading>
+          <Body>You can manually back up your app any time</Body>
+        </Layout>
+        <div>
+          <Button cta disabled={loading} on:click={createManualBackup}>
+            Create backup
+          </Button>
+        </div>
+      </Layout>
+    </div>
+  {:else}
+    <Layout noPadding gap="M" alignContent="start">
+      <div class="controls">
+        <div class="search">
+          <div class="select">
+            <Select
+              placeholder="All"
+              label="Type"
+              options={filters}
+              getOptionValue={filter => filter.value}
+              getOptionLabel={filter => filter.label}
+              bind:value={filterOpt}
+            />
+          </div>
+          <DatePicker
+            range={true}
+            label="Date Range"
+            on:change={e => {
+              if (e.detail[0].length > 1) {
+                startDate = e.detail[0][0].toISOString()
+                endDate = e.detail[0][1].toISOString()
+              }
+            }}
+          />
+        </div>
+        <div>
+          <Button cta disabled={loading} on:click={createManualBackup}
+            >Create new backup</Button
+          >
+        </div>
+      </div>
+      <div class="table">
+        <Table
+          {schema}
+          disableSorting
+          allowSelectRows={false}
+          allowEditColumns={false}
+          allowEditRows={false}
+          data={backupData}
+          {customRenderers}
+          placeholderText="No backups found"
+          border={false}
+          on:buttonclick={handleButtonClick}
+        />
+        <div class="pagination">
+          <Pagination
+            page={$pageInfo.pageNumber}
+            hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+            hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+            goToPrevPage={pageInfo.prevPage}
+            goToNextPage={pageInfo.nextPage}
+          />
+        </div>
+      </div>
+    </Layout>
+  {/if}
+</Layout>
+
+<style>
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+
+  .controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: var(--spacing-xl);
+    flex-wrap: wrap;
+  }
+
+  .search {
+    flex: 1 1 auto;
+    display: flex;
+    gap: var(--spacing-xl);
+    align-items: flex-end;
+  }
+  .search :global(.spectrum-InputGroup) {
+    min-width: 100px;
+  }
+
+  .select {
+    flex-basis: 160px;
+    width: 0;
+    min-width: 100px;
+  }
+
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: var(--spacing-xl);
+  }
+
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  .pro-buttons {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+
+  .center {
+    text-align: center;
+    display: contents;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
new file mode 100644
index 0000000000..9e450557c4
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -0,0 +1,23 @@
+<script>
+  import {
+    Layout,
+    Table,
+    Select,
+    Pagination,
+    Button,
+    Body,
+    Heading,
+    Divider,
+  } from "@budibase/bbui"
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Embed</Heading>
+    <Body>View the automations your app has executed</Body>
+  </Layout>
+  <Divider />
+</Layout>
+
+<style>
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
new file mode 100644
index 0000000000..a99eb55f7a
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
@@ -0,0 +1,4 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  $redirect("../settings/automation-history")
+</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
new file mode 100644
index 0000000000..86af5df3bc
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
@@ -0,0 +1,79 @@
+<script>
+  import {
+    Layout,
+    Divider,
+    Heading,
+    Body,
+    Button,
+    Label,
+    Modal,
+    Icon,
+  } from "@budibase/bbui"
+  import { AppStatus } from "constants"
+  import { store } from "builderStore"
+  import { apps } from "stores/portal"
+  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
+
+  let updatingModal
+
+  $: filteredApps = $apps.filter(app => app.devId == $store.appId)
+  $: app = filteredApps.length ? filteredApps[0] : {}
+  $: appUrl = `${window.origin}/app${app?.url}`
+  $: appDeployed = app?.status === AppStatus.DEPLOYED
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Name and URL</Heading>
+    <Body>Edit your app's name and URL</Body>
+  </Layout>
+  <Divider />
+
+  <Layout noPadding gap="XXS">
+    <Label size="L">Name</Label>
+    <Body>{app?.name}</Body>
+  </Layout>
+
+  <Layout noPadding gap="XS">
+    <Label size="L">Icon</Label>
+    <div class="icon">
+      <Icon
+        size="L"
+        name={app?.icon?.name || "Apps"}
+        color={app?.icon?.color}
+      />
+    </div>
+  </Layout>
+
+  <Layout noPadding gap="XXS">
+    <Label size="L">URL</Label>
+    <Body>{appUrl}</Body>
+  </Layout>
+
+  <div>
+    <Button
+      cta
+      on:click={() => {
+        updatingModal.show()
+      }}
+      disabled={appDeployed}
+      tooltip={appDeployed
+        ? "You must unpublish your app to make changes to these settings"
+        : null}
+      icon={appDeployed ? "HelpOutline" : null}
+    >
+      Edit
+    </Button>
+  </div>
+</Layout>
+
+<Modal bind:this={updatingModal} padding={false} width="600px">
+  <UpdateAppModal {app} />
+</Modal>
+
+<style>
+  .icon {
+    display: flex;
+    justify-content: flex-start;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/version.svelte b/packages/builder/src/pages/builder/app/[application]/settings/version.svelte
new file mode 100644
index 0000000000..723e32984d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/version.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { Layout, Heading, Body, Divider, Button } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import VersionModal from "components/deploy/VersionModal.svelte"
+
+  let versionModal
+
+  $: updateAvailable = $store.upgradableVersion !== $store.version
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Version</Heading>
+    <Body>See the current version of your app and check for updates</Body>
+  </Layout>
+  <Divider />
+  {#if updateAvailable}
+    <Body>
+      The app is currently using version <strong>{$store.version}</strong>
+      but version <strong>{$store.upgradableVersion}</strong> is available.
+      <br />
+      Updates can contain new features, performance improvements and bug fixes.
+    </Body>
+    <div>
+      <Button cta on:click={versionModal.show}>Update app</Button>
+    </div>
+  {:else}
+    <Body>
+      The app is currently using version <strong>{$store.version}</strong>.
+      <br />
+      You're running the latest!
+    </Body>
+    <div>
+      <Button secondary on:click={versionModal.show}>Revert app</Button>
+    </div>
+  {/if}
+</Layout>
+
+<VersionModal bind:this={versionModal} hideIcon={true} />

From 795d8a5875809cf44dfadaddfbc5e772312c6023 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 9 Jun 2023 11:42:10 +0100
Subject: [PATCH 03/18] Merge commit

---
 .../app/[application]/settings/_layout.svelte | 29 ++-------
 .../settings/automation-history/index.svelte  | 10 ++-
 .../app/[application]/settings/embed.svelte   | 62 +++++++++++++++++--
 .../app/[application]/settings/index.svelte   | 16 ++++-
 4 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index 3c0299d50a..f853e95baa 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -1,27 +1,10 @@
 <script>
-  import {
-    Content,
-    SideNav,
-    SideNavItem,
-    Breadcrumbs,
-    Breadcrumb,
-    Header,
-  } from "components/portal/page"
-  import {
-    Page,
-    Layout,
-    Button,
-    Icon,
-    ActionMenu,
-    MenuItem,
-    Helpers,
-    Input,
-    Modal,
-    notifications,
-  } from "@budibase/bbui"
-  import EditableIcon from "components/common/EditableIcon.svelte"
-  import { url, isActive, goto } from "@roxi/routify"
-  import { apps } from "stores/portal"
+  import { Content, SideNav, SideNavItem } from "components/portal/page"
+  import { Page, Layout } from "@budibase/bbui"
+  import { url, isActive } from "@roxi/routify"
+
+  $: $url(), console.log("Hello ", $url())
+  $: console.log($isActive("./automation-history"))
 </script>
 
 <!-- routify:options index=4 -->
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
index c1c6be997b..6ab2744dbb 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
@@ -190,7 +190,15 @@
         />
       </div>
     </div>
-    {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
+
+    <!-- 
+      From the apps list header
+      isOwner = $auth.accountPortalAccess && $admin.cloud
+      isOwner ? $licensing.goToUpgradePage() : $licensing.goToPricingPage() 
+    -->
+    {` acc portal access ${$auth.user.accountPortalAccess} `}
+    <!-- {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud} -->
+    {#if (!$licensing.isEnterprisePlan && $auth.user.accountPortalAccess) || !$admin.cloud}
       <Button secondary on:click={$licensing.goToUpgradePage()}>
         Get more history
       </Button>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
index 9e450557c4..90be8d0803 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -1,23 +1,75 @@
 <script>
   import {
     Layout,
-    Table,
-    Select,
-    Pagination,
-    Button,
     Body,
     Heading,
     Divider,
+    Button,
+    Helpers,
+    Icon,
+    notifications,
   } from "@budibase/bbui"
+  import { AppStatus } from "constants"
+  import { apps } from "stores/portal"
+  import { store } from "builderStore"
+
+  $: filteredApps = $apps.filter(app => app.devId == $store.appId)
+  $: app = filteredApps.length ? filteredApps[0] : {}
+  $: appUrl = `${window.origin}/app${app?.url}`
+  $: appDeployed = app?.status === AppStatus.DEPLOYED
+
+  $: embed = `<iframe width="560" height="315" frameborder="0" allow="clipboard-write" src="${appUrl}" ></iframe>`
 </script>
 
 <Layout noPadding>
   <Layout gap="XS" noPadding>
     <Heading>Embed</Heading>
-    <Body>View the automations your app has executed</Body>
+    <Body>Embed your app into your other tools of choice</Body>
   </Layout>
   <Divider />
+  <div class="embed-body">
+    <div class="embed-code">{embed}</div>
+    {#if appDeployed}
+      <div>
+        <Button
+          cta
+          disabled={!appDeployed}
+          on:click={async () => {
+            await Helpers.copyToClipboard(embed)
+            notifications.success("Copied")
+          }}
+        >
+          Copy Code
+        </Button>
+      </div>
+    {:else}
+      <div class="embed-info">
+        <Icon size="S" name="Info" /> Embeds will only work with a published app
+      </div>
+    {/if}
+  </div>
 </Layout>
 
 <style>
+  .embed-info {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .embed-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spectrum-alias-grid-gutter-small);
+  }
+  .embed-code {
+    display: flex;
+    align-items: center;
+    /* justify-content: center; */
+    background-color: var(
+      --spectrum-textfield-m-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    border-radius: var(--border-radius-s);
+    padding: var(--spacing-xl);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
index a99eb55f7a..df88627420 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
@@ -1,4 +1,18 @@
 <script>
-  import { redirect } from "@roxi/routify"
+  import {
+    redirect,
+    isChangingPage,
+    page,
+    isActive,
+    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>

From 6836ca8573c1025bba859db413743058f1013aed Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 9 Jun 2023 11:47:05 +0100
Subject: [PATCH 04/18] Merge commit

---
 packages/builder/src/stores/portal/licensing.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js
index ded77894f9..e94e7d2e21 100644
--- a/packages/builder/src/stores/portal/licensing.js
+++ b/packages/builder/src/stores/portal/licensing.js
@@ -76,7 +76,16 @@ export const createLicensingStore = () => {
       await actions.setQuotaUsage()
     },
     setNavigation: () => {
-      const upgradeUrl = `${get(admin).accountPortalUrl}/portal/upgrade`
+      //"/builder/portal/account/upgrade"
+      const adminStore = get(admin)
+      const authStore = get(auth)
+
+      //Add cloud check here too???
+
+      const upgradeUrl = authStore?.user?.accountPortalAccess
+        ? `${adminStore.accountPortalUrl}/portal/upgrade`
+        : "/builder/portal/account/upgrade"
+
       const goToUpgradePage = () => {
         window.location.href = upgradeUrl
       }

From 5a7a348ded7d9bdbc59465d0b16cb7876508edda Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 12 Jun 2023 11:49:33 +0100
Subject: [PATCH 05/18] Added the export section link

---
 .../pages/builder/app/[application]/settings/_layout.svelte  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index f853e95baa..ec4386a6bd 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -28,6 +28,11 @@
             url={$url("./embed")}
             active={$isActive("./embed")}
           />
+          <SideNavItem
+            text="Export"
+            url={$url("./export")}
+            active={$isActive("./export")}
+          />
           <SideNavItem
             text="Name and URL"
             url={$url("./name-and-url")}

From 0dda7afee7766417135dfa788d7748fb0db1e8fc Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 12 Jun 2023 14:09:11 +0100
Subject: [PATCH 06/18] Added the export page

---
 .../components/start/UpdateAppModal.svelte    |  4 ++
 .../app/[application]/settings/_layout.svelte | 13 +++-
 .../app/[application]/settings/export.svelte  | 62 +++++++++++++++++++
 .../settings/name-and-url.svelte              | 16 ++++-
 4 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/settings/export.svelte

diff --git a/packages/builder/src/components/start/UpdateAppModal.svelte b/packages/builder/src/components/start/UpdateAppModal.svelte
index 59d2957bf5..3d825003a1 100644
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@@ -14,6 +14,7 @@
   import EditableIcon from "../common/EditableIcon.svelte"
 
   export let app
+  export let onUpdateComplete
 
   const values = writable({
     name: app.name,
@@ -54,6 +55,9 @@
           color: $values.iconColor,
         },
       })
+      if (typeof onUpdateComplete == "function") {
+        onUpdateComplete()
+      }
     } catch (error) {
       console.error(error)
       notifications.error("Error updating app")
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index ec4386a6bd..f9cb8931e9 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -1,10 +1,17 @@
 <script>
   import { Content, SideNav, SideNavItem } from "components/portal/page"
   import { Page, Layout } from "@budibase/bbui"
-  import { url, isActive } from "@roxi/routify"
+  import { url, isActive, layout } from "@roxi/routify"
+  import { capitalise } from "helpers"
 
-  $: $url(), console.log("Hello ", $url())
-  $: console.log($isActive("./automation-history"))
+  // $: $url(), console.log("Hello ", $url())
+  // $: console.log("is auto", $isActive("./automation-history"))
+  // $: selected = capitalise(
+  //   $layout.children.find(layout => $isActive(layout.path))?.title ?? "settings"
+  // )
+  // $: console.log("Settings Selected ", selected)
+
+  // if updated to Settings and automation-history is not selected, switch to ./automation-history
 </script>
 
 <!-- routify:options index=4 -->
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/export.svelte b/packages/builder/src/pages/builder/app/[application]/settings/export.svelte
new file mode 100644
index 0000000000..30534ece4d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/settings/export.svelte
@@ -0,0 +1,62 @@
+<script>
+  import {
+    Layout,
+    Body,
+    Heading,
+    Divider,
+    ActionButton,
+    Helpers,
+    Icon,
+    notifications,
+    Modal,
+  } from "@budibase/bbui"
+  import { AppStatus } from "constants"
+  import { apps } from "stores/portal"
+  import { store } from "builderStore"
+  import ExportAppModal from "components/start/ExportAppModal.svelte"
+
+  $: filteredApps = $apps.filter(app => app.devId == $store.appId)
+  $: app = filteredApps.length ? filteredApps[0] : {}
+  $: appDeployed = app?.status === AppStatus.DEPLOYED
+
+  let exportModal
+  let exportPublishedVersion = false
+
+  const exportApp = opts => {
+    exportPublishedVersion = !!opts?.published
+    exportModal.show()
+  }
+
+  // $: embed = `<iframe width="560" height="315" frameborder="0" allow="clipboard-write" src="${appUrl}" ></iframe>`
+</script>
+
+<Modal bind:this={exportModal} padding={false}>
+  <ExportAppModal {app} published={exportPublishedVersion} />
+</Modal>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Export your app</Heading>
+    <Body>Export your latest edited or published app</Body>
+  </Layout>
+  <Divider />
+  <div class="export-body">
+    <ActionButton secondary on:click={() => exportApp({ published: false })}>
+      Export latest edited app
+    </ActionButton>
+    <ActionButton
+      secondary
+      disabled={!appDeployed}
+      on:click={() => exportApp({ published: true })}
+    >
+      Export latest published app
+    </ActionButton>
+  </div>
+</Layout>
+
+<style>
+  .export-body {
+    display: flex;
+    gap: var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
index 86af5df3bc..8228739287 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
@@ -13,6 +13,7 @@
   import { store } from "builderStore"
   import { apps } from "stores/portal"
   import UpdateAppModal from "components/start/UpdateAppModal.svelte"
+  import { API } from "api"
 
   let updatingModal
 
@@ -20,6 +21,14 @@
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appUrl = `${window.origin}/app${app?.url}`
   $: 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)
+  }
 </script>
 
 <Layout noPadding>
@@ -68,7 +77,12 @@
 </Layout>
 
 <Modal bind:this={updatingModal} padding={false} width="600px">
-  <UpdateAppModal {app} />
+  <UpdateAppModal
+    {app}
+    onUpdateComplete={async () => {
+      await initialiseApp()
+    }}
+  />
 </Modal>
 
 <style>

From e8f28113da9b14cb13bf39b81330877fd73f36d0 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 15 Jun 2023 10:56:46 +0100
Subject: [PATCH 07/18] Merge commit

---
 .../src/components/deploy/AppActions.svelte   | 371 +++++++++++++-----
 1 file changed, 271 insertions(+), 100 deletions(-)

diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 9813237317..6a381608bd 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -7,9 +7,15 @@
     Body,
     Button,
     ActionButton,
+    Icon,
+    Link,
+    Modal,
+    StatusLight,
   } from "@budibase/bbui"
   import RevertModal from "components/deploy/RevertModal.svelte"
   import VersionModal from "components/deploy/VersionModal.svelte"
+  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
+
   import { processStringSync } from "@budibase/string-templates"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import analytics, { Events, EventSource } from "analytics"
@@ -21,16 +27,22 @@
   import { store } 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"
 
   export let application
 
-  let publishPopover
-  let publishPopoverAnchor
   let unpublishModal
+  let updateAppModal
+  let revertModal
+  let versionModal
 
-  $: filteredApps = $apps.filter(
-    app => app.devId === application && app.status === "published"
-  )
+  let appActionPopover
+  let appActionPopoverOpen = false
+  let appActionPopoverAnchor
+
+  let publishing
+
+  $: filteredApps = $apps.filter(app => app.devId === application)
   $: selectedApp = filteredApps?.length ? filteredApps[0] : null
 
   $: deployments = []
@@ -38,7 +50,30 @@
     .filter(deployment => deployment.status === "SUCCESS")
     .sort((a, b) => a.updatedAt > b.updatedAt)
 
-  $: isPublished = selectedApp && latestDeployments?.length > 0
+  $: isPublished =
+    selectedApp?.status === "published" && latestDeployments?.length > 0
+
+  $: updateAvailable =
+    $store.upgradableVersion &&
+    $store.version &&
+    $store.upgradableVersion !== $store.version
+
+  const initialiseApp = async () => {
+    console.log("AppActions :: Reinitialise")
+    const applicationPkg = await API.fetchAppPackage($store.devId)
+    await store.actions.initialise(applicationPkg)
+  }
+
+  const updateDeploymentString = () => {
+    return deployments?.length
+      ? processStringSync("Published {{ duration time 'millisecond' }} ago", {
+          time:
+            new Date().getTime() - new Date(deployments[0].updatedAt).getTime(),
+        })
+      : ""
+  }
+
+  $: deploymentString = updateDeploymentString(deployments)
 
   const reviewPendingDeployments = (deployments, newDeployments) => {
     if (deployments.length > 0) {
@@ -77,11 +112,35 @@
     }
   }
 
+  async function publishApp() {
+    try {
+      publishing = true
+
+      let published = await API.publishAppChanges($store.appId)
+
+      notifications.send("App published", {
+        type: "success",
+        icon: "GlobeCheck",
+      })
+
+      await completePublish()
+    } catch (error) {
+      analytics.captureException(error)
+      notifications.error("Error publishing app")
+    }
+    publishing = false
+  }
+
   const unpublishApp = () => {
-    publishPopover.hide()
+    appActionPopover.hide()
     unpublishModal.show()
   }
 
+  const revertApp = () => {
+    appActionPopover.hide()
+    revertModal.show()
+  }
+
   const confirmUnpublishApp = async () => {
     if (!application || !isPublished) {
       //confirm the app has loaded.
@@ -90,7 +149,10 @@
     try {
       await API.unpublishApp(selectedApp.prodId)
       await apps.load()
-      notifications.success("App unpublished successfully")
+      notifications.send("App unpublished", {
+        type: "success",
+        icon: "GlobeStrike",
+      })
     } catch (err) {
       notifications.error("Error unpublishing app")
     }
@@ -116,81 +178,25 @@
 {#if $store.hasLock}
   <div class="action-top-nav">
     <div class="action-buttons">
-      <div class="version">
-        <VersionModal />
-      </div>
-      <RevertModal />
-
-      {#if isPublished}
-        <div class="publish-popover">
-          <div bind:this={publishPopoverAnchor}>
-            <ActionButton
-              quiet
-              icon="Globe"
-              size="M"
-              tooltip="Your published app"
-              on:click={publishPopover.show()}
-            />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      {#if updateAvailable}
+        <div class="app-action-button version" on:click={versionModal.show}>
+          <div class="app-action">
+            <StatusLight notice />
+            Update
           </div>
-          <Popover
-            bind:this={publishPopover}
-            align="right"
-            disabled={!isPublished}
-            anchor={publishPopoverAnchor}
-            offset={10}
-          >
-            <div class="popover-content">
-              <Layout noPadding gap="M">
-                <Heading size="XS">Your published app</Heading>
-                <Body size="S">
-                  <span class="publish-popover-message">
-                    {processStringSync(
-                      "Last published {{ duration time 'millisecond' }} ago",
-                      {
-                        time:
-                          new Date().getTime() -
-                          new Date(latestDeployments[0].updatedAt).getTime(),
-                      }
-                    )}
-                  </span>
-                </Body>
-                <div class="buttons">
-                  <Button
-                    warning={true}
-                    icon="GlobeStrike"
-                    disabled={!isPublished}
-                    on:click={unpublishApp}
-                  >
-                    Unpublish
-                  </Button>
-                  <Button cta on:click={viewApp}>View app</Button>
-                </div>
-              </Layout>
-            </div>
-          </Popover>
         </div>
       {/if}
-
-      {#if !isPublished}
-        <ActionButton
-          quiet
-          icon="GlobeStrike"
-          size="M"
-          tooltip="Your app has not been published yet"
-          disabled
-        />
-      {/if}
-
       <TourWrap
         tourStepKey={$store.onboarding
           ? TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT
           : TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT}
       >
-        <span id="builder-app-users-button">
-          <ActionButton
-            quiet
-            icon="UserGroup"
-            size="M"
+        <div class="app-action-button users">
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <div
+            class="app-action"
+            id="builder-app-users-button"
             on:click={() => {
               store.update(state => {
                 state.builderSidePanel = true
@@ -198,13 +204,124 @@
               })
             }}
           >
+            <Icon name={"UserGroup"} />
             Users
-          </ActionButton>
-        </span>
+          </div>
+        </div>
       </TourWrap>
+
+      <div class="app-action-button preview">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div class="app-action" on:click={previewApp}>
+          <Icon name={"PlayCircle"} />
+
+          Preview
+        </div>
+      </div>
+
+      <div class="app-action-button publish app-action-popover">
+        <div bind:this={appActionPopoverAnchor}>
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <div
+            class="app-action"
+            on:click={() => {
+              appActionPopover.show()
+            }}
+          >
+            <Icon name={isPublished ? "GlobeCheck" : "GlobeStrike"} />
+            <TourWrap tourStepKey={TOUR_STEP_KEYS.BUILDER_APP_PUBLISH}>
+              <span class="publish-open" id="builder-app-publish-button">
+                Publish
+                <Icon
+                  name={appActionPopoverOpen ? "ChevronUp" : "ChevronDown"}
+                  size="M"
+                />
+              </span>
+            </TourWrap>
+          </div>
+        </div>
+        <Popover
+          bind:this={appActionPopover}
+          align="right"
+          disabled={!isPublished}
+          anchor={appActionPopoverAnchor}
+          offset={10}
+          on:close={() => {
+            appActionPopoverOpen = false
+          }}
+          on:open={() => {
+            appActionPopoverOpen = true
+          }}
+        >
+          <div class="app-action-popover-content">
+            <Layout noPadding gap="M">
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <Body size="M">
+                <span
+                  class="app-link"
+                  on:click={() => {
+                    if (isPublished) {
+                      viewApp()
+                    } else {
+                      appActionPopover.hide()
+                      updateAppModal.show()
+                    }
+                  }}
+                >
+                  {selectedApp ? `${selectedApp?.url}` : ""}
+                  {#if isPublished}
+                    <Icon size="S" name="LinkOut" />
+                  {:else}
+                    <Icon size="S" name="Edit" />
+                  {/if}
+                </span>
+              </Body>
+
+              <Body size="S">
+                <span class="publish-popover-status">
+                  {#if isPublished}
+                    <span class="status-text">{deploymentString}</span>
+                    <span class="unpublish-link">
+                      <Link quiet on:click={unpublishApp}>Unpublish</Link>
+                    </span>
+                    <span class="revert-link">
+                      <Link quiet secondary on:click={revertApp}>Revert</Link>
+                    </span>
+                  {:else}
+                    <span class="status-text unpublished">Not published</span>
+                  {/if}
+                </span>
+              </Body>
+              <div class="action-buttons">
+                {#if $store.hasLock}
+                  <Button
+                    secondary
+                    icon="Code"
+                    on:click={() => {
+                      $goto("./settings/embed")
+                      appActionPopover.hide()
+                    }}
+                  >
+                    Embed
+                  </Button>
+                  <Button
+                    cta
+                    on:click={publishApp}
+                    id={"builder-app-publish-button"}
+                    disabled={publishing}
+                  >
+                    Publish
+                  </Button>
+                {/if}
+              </div>
+            </Layout>
+          </div>
+        </Popover>
+      </div>
     </div>
   </div>
 
+  <!-- Modals -->
   <ConfirmDialog
     bind:this={unpublishModal}
     title="Confirm unpublish"
@@ -213,45 +330,99 @@
   >
     Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
   </ConfirmDialog>
+
+  <Modal bind:this={updateAppModal} padding={false} width="600px">
+    <UpdateAppModal
+      app={selectedApp}
+      onUpdateComplete={async () => {
+        await initialiseApp()
+      }}
+    />
+  </Modal>
+
+  <RevertModal bind:this={revertModal} />
+  <VersionModal hideIcon bind:this={versionModal} />
 {/if}
 
-<div class="buttons">
-  <Button on:click={previewApp} secondary>Preview</Button>
-  {#if $store.hasLock}
-    <DeployModal onOk={completePublish} />
-  {/if}
-</div>
-
 <style>
-  /* .banner-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-s);
-  } */
-  .popover-content {
+  .app-action-popover-content {
     padding: var(--spacing-xl);
   }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--spacing-l);
+
+  .app-action-popover-content :global(.icon svg.spectrum-Icon) {
+    height: 0.8em;
   }
+
   .action-buttons {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
-    /* gap: var(--spacing-s); */
-  }
-  .version {
-    margin-right: var(--spacing-s);
+    height: 100%;
   }
+
   .action-top-nav {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
+    height: 100%;
+  }
+  .app-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+    cursor: pointer;
+  }
+  .app-action-popover-content .status-text {
+    color: #1ca872;
+    border-right: 1px solid var(--spectrum-global-color-gray-500);
+    padding-right: var(--spacing-m);
+  }
+  .app-action-popover-content .status-text.unpublished {
+    color: var(--spectrum-global-color-gray-600);
+    border-right: 0px;
+    padding-right: 0px;
+  }
+  .app-action-popover-content .action-buttons {
+    gap: var(--spacing-m);
+  }
+  .app-action-popover-content
+    .publish-popover-status
+    .unpublish-link
+    :global(.spectrum-Link) {
+    color: #ee4331;
+  }
+  .publish-popover-status {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+  .app-action-popover .publish-open {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+
+  .app-action-button {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0px var(--spacing-l);
+    /* border-left: var(--border-light); */
+  }
+
+  .app-action-button:hover {
+    background-color: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+
+  .app-action-button.publish {
+    border-left: var(--border-light);
+  }
+
+  .app-action {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
   }
 </style>

From 08ea400312a21fcada9621e78e9aa4dddc16b566 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 15 Jun 2023 10:59:24 +0100
Subject: [PATCH 08/18] Merge commit

---
 .../src/pages/builder/app/[application]/_layout.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index d10657bdbe..3a6fe11ef0 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -178,7 +178,9 @@
         <Heading size="XS">{$store.name}</Heading>
       </div>
       <div class="toprightnav">
-        <UserAvatars users={$userStore} />
+        <span class:nav-lock={!$store.hasLock}>
+          <UserAvatars users={$userStore} />
+        </span>
         <AppActions {application} />
       </div>
     {/if}
@@ -226,6 +228,7 @@
     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;
@@ -266,7 +269,10 @@
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
-    gap: var(--spacing-l);
+  }
+
+  .toprightnav :global(.avatars) {
+    margin-right: var(--spacing-l);
   }
 
   .secondary-editor {

From 2304032423eeb5cca745ac923d621641a2d2a18c Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 16 Jun 2023 12:30:08 +0100
Subject: [PATCH 09/18] Added embed state, behaviours and event tracking to
 client app. UI/UX Refactoring

---
 hosting/nginx.dev.conf                        |  10 +
 hosting/proxy/nginx.prod.conf                 |  10 +
 .../src/events/publishers/serve.ts            |   7 +-
 .../SetupPanel/AutomationBlockSetup.svelte    |   2 +-
 .../src/components/deploy/AppActions.svelte   | 104 ++---
 .../src/components/deploy/DeleteModal.svelte  |  45 +++
 .../src/components/deploy/RevertModal.svelte  |  18 +-
 .../src/components/deploy/VersionModal.svelte |   4 +-
 .../src/components/portal/onboarding/tours.js |  14 +-
 .../components/portal/page/SideNavItem.svelte |  17 +-
 .../builder/app/[application]/_layout.svelte  |   4 +-
 .../app/[application]/settings/_layout.svelte |  33 +-
 .../settings/automation-history/index.svelte  |   7 -
 .../app/[application]/settings/embed.svelte   |   4 +-
 .../portal/overview/[appId]/_layout.svelte    | 252 ------------
 .../access/_components/AssignmentModal.svelte | 211 ----------
 .../_components/EditableRoleRenderer.svelte   |  26 --
 .../overview/[appId]/access/index.svelte      | 271 -------------
 .../_components/HistoryDetailsPanel.svelte    |  82 ----
 .../_components/StatusRenderer.svelte         |  27 --
 .../[appId]/automation-history/index.svelte   | 263 -------------
 .../_components/ActionsRenderer.svelte        |  87 -----
 .../_components/AppSizeRenderer.svelte        |  41 --
 .../_components/CreateRestoreModal.svelte     |  27 --
 .../_components/DatasourceRenderer.svelte     |  21 -
 .../backups/_components/StatusRenderer.svelte |  15 -
 .../_components/TimeAgoRenderer.svelte        |  10 -
 .../backups/_components/TypeRenderer.svelte   |  36 --
 .../backups/_components/UserRenderer.svelte   |  18 -
 .../overview/[appId]/backups/index.svelte     | 344 ----------------
 .../portal/overview/[appId]/index.svelte      |   4 -
 .../overview/[appId]/name-and-url.svelte      |  77 ----
 .../portal/overview/[appId]/overview.svelte   | 368 ------------------
 .../portal/overview/[appId]/version.svelte    |  39 --
 .../builder/portal/overview/_layout.svelte    |  15 -
 .../builder/portal/overview/index.svelte      |   4 -
 .../client/src/components/ClientApp.svelte    |  17 +-
 .../client/src/components/app/Layout.svelte   |  10 +-
 packages/client/src/index.js                  |   3 +
 packages/client/src/stores/app.js             |  14 +-
 packages/client/src/stores/builder.js         |   4 +-
 packages/client/src/stores/screens.js         |   3 +-
 packages/frontend-core/src/api/analytics.js   |   4 +-
 .../server/src/api/controllers/analytics.ts   |   3 +-
 .../src/api/controllers/static/index.ts       |   5 +
 .../api/controllers/static/templates/app.hbs  |   2 +-
 packages/types/src/api/web/analytics.ts       |   1 +
 packages/types/src/sdk/events/serve.ts        |   1 +
 48 files changed, 243 insertions(+), 2341 deletions(-)
 create mode 100644 packages/builder/src/components/deploy/DeleteModal.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/EditableRoleRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/HistoryDetailsPanel.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/ActionsRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/AppSizeRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/CreateRestoreModal.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/DatasourceRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/StatusRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TimeAgoRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TypeRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/name-and-url.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/version.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/_layout.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/index.svelte

diff --git a/hosting/nginx.dev.conf b/hosting/nginx.dev.conf
index 1ecee422cd..915125cbce 100644
--- a/hosting/nginx.dev.conf
+++ b/hosting/nginx.dev.conf
@@ -126,6 +126,16 @@ http {
       proxy_pass      http://app-service;
     }
 
+    location /embed {
+      rewrite /embed/(.*) /app/$1  break;
+      proxy_pass         http://app-service;
+      proxy_redirect     off;
+      proxy_set_header   Host $host;
+      proxy_set_header   x-budibase-embed "true";
+      add_header x-budibase-embed "true";
+      add_header Content-Security-Policy "frame-ancestors *";
+    }
+
     location /builder {
       proxy_read_timeout 120s;
       proxy_connect_timeout 120s;
diff --git a/hosting/proxy/nginx.prod.conf b/hosting/proxy/nginx.prod.conf
index 001a08a9a6..9ce6b54053 100644
--- a/hosting/proxy/nginx.prod.conf
+++ b/hosting/proxy/nginx.prod.conf
@@ -92,6 +92,16 @@ http {
       proxy_pass      $apps;
     }
 
+    location /embed {
+      rewrite /embed/(.*) /app/$1  break;
+      proxy_pass         $apps;
+      proxy_redirect     off;
+      proxy_set_header   Host $host;
+      proxy_set_header   x-budibase-embed "true";
+      add_header x-budibase-embed "true";
+      add_header Content-Security-Policy "frame-ancestors *";
+    }
+
     location = / {
       proxy_pass      $apps;
     }
diff --git a/packages/backend-core/src/events/publishers/serve.ts b/packages/backend-core/src/events/publishers/serve.ts
index 64e24e20a7..5fb0883b0b 100644
--- a/packages/backend-core/src/events/publishers/serve.ts
+++ b/packages/backend-core/src/events/publishers/serve.ts
@@ -14,10 +14,15 @@ async function servedBuilder(timezone: string) {
   await publishEvent(Event.SERVED_BUILDER, properties)
 }
 
-async function servedApp(app: App, timezone: string) {
+async function servedApp(
+  app: App,
+  timezone: string,
+  embed: boolean | undefined
+) {
   const properties: AppServedEvent = {
     appVersion: app.version,
     timezone,
+    embed,
   }
   await publishEvent(Event.SERVED_APP, properties)
 }
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index a8fa700b90..3144a7b44b 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -333,7 +333,7 @@
               : null}>{value.title || (key === "row" ? "Table" : key)}</Label
           >
         {/if}
-        {#if value.type === "string" && value.enum && canShowField(key)}
+        {#if value.type === "string" && value.enum && canShowField(key, value)}
           <Select
             on:change={e => onChange(e, key)}
             value={inputData[key]}
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 477a115d08..84feb4f189 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -59,7 +59,6 @@
     $store.upgradableVersion !== $store.version
 
   const initialiseApp = async () => {
-    console.log("AppActions :: Reinitialise")
     const applicationPkg = await API.fetchAppPackage($store.devId)
     await store.actions.initialise(applicationPkg)
   }
@@ -73,8 +72,6 @@
       : ""
   }
 
-  $: deploymentString = updateDeploymentString(deployments)
-
   const reviewPendingDeployments = (deployments, newDeployments) => {
     if (deployments.length > 0) {
       const pending = checkIncomingDeploymentStatus(deployments, newDeployments)
@@ -185,8 +182,10 @@
       {#if updateAvailable}
         <div class="app-action-button version" on:click={versionModal.show}>
           <div class="app-action">
-            <StatusLight notice />
-            Update
+            <ActionButton quiet>
+              <StatusLight notice />
+              Update
+            </ActionButton>
           </div>
         </div>
       {/if}
@@ -196,41 +195,44 @@
           : TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT}
       >
         <div class="app-action-button users">
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <div
-            class="app-action"
-            id="builder-app-users-button"
-            on:click={() => {
-              store.update(state => {
-                state.builderSidePanel = true
-                return state
-              })
-            }}
-          >
-            <Icon name={"UserGroup"} />
-            Users
+          <div class="app-action" id="builder-app-users-button">
+            <ActionButton
+              quiet
+              icon="UserGroup"
+              on:click={() => {
+                store.update(state => {
+                  state.builderSidePanel = true
+                  return state
+                })
+              }}
+            >
+              Users
+            </ActionButton>
           </div>
         </div>
       </TourWrap>
 
       <div class="app-action-button preview">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="app-action" on:click={previewApp}>
-          <Icon name={"PlayCircle"} />
-
-          Preview
+        <div class="app-action">
+          <ActionButton quiet icon="PlayCircle" on:click={previewApp}>
+            Preview
+          </ActionButton>
         </div>
       </div>
 
-      <div class="app-action-button publish app-action-popover">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div
+        class="app-action-button publish app-action-popover"
+        on:click={() => {
+          if (!appActionPopoverOpen) {
+            appActionPopover.show()
+          } else {
+            appActionPopover.hide()
+          }
+        }}
+      >
         <div bind:this={appActionPopoverAnchor}>
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <div
-            class="app-action"
-            on:click={() => {
-              appActionPopover.show()
-            }}
-          >
+          <div class="app-action">
             <Icon name={isPublished ? "GlobeCheck" : "GlobeStrike"} />
             <TourWrap tourStepKey={TOUR_STEP_KEYS.BUILDER_APP_PUBLISH}>
               <span class="publish-open" id="builder-app-publish-button">
@@ -248,7 +250,7 @@
           align="right"
           disabled={!isPublished}
           anchor={appActionPopoverAnchor}
-          offset={10}
+          offset={35}
           on:close={() => {
             appActionPopoverOpen = false
           }}
@@ -283,7 +285,9 @@
               <Body size="S">
                 <span class="publish-popover-status">
                   {#if isPublished}
-                    <span class="status-text">{deploymentString}</span>
+                    <span class="status-text">
+                      {updateDeploymentString(deployments)}
+                    </span>
                     <span class="unpublish-link">
                       <Link quiet on:click={unpublishApp}>Unpublish</Link>
                     </span>
@@ -297,16 +301,18 @@
               </Body>
               <div class="action-buttons">
                 {#if $store.hasLock}
-                  <Button
-                    secondary
-                    icon="Code"
-                    on:click={() => {
-                      $goto("./settings/embed")
-                      appActionPopover.hide()
-                    }}
-                  >
-                    Embed
-                  </Button>
+                  {#if isPublished}
+                    <ActionButton
+                      quiet
+                      icon="Code"
+                      on:click={() => {
+                        $goto("./settings/embed")
+                        appActionPopover.hide()
+                      }}
+                    >
+                      Embed
+                    </ActionButton>
+                  {/if}
                   <Button
                     cta
                     on:click={publishApp}
@@ -350,6 +356,7 @@
 <style>
   .app-action-popover-content {
     padding: var(--spacing-xl);
+    width: 360px;
   }
 
   .app-action-popover-content :global(.icon svg.spectrum-Icon) {
@@ -410,17 +417,22 @@
     height: 100%;
     display: flex;
     align-items: center;
-    padding: 0px var(--spacing-l);
-    /* border-left: var(--border-light); */
+    padding-right: var(--spacing-m);
   }
 
-  .app-action-button:hover {
+  .app-action-button.publish:hover {
     background-color: var(--spectrum-global-color-gray-200);
     cursor: pointer;
   }
 
   .app-action-button.publish {
     border-left: var(--border-light);
+    padding: 0px var(--spacing-l);
+  }
+
+  .app-action-button.version :global(.spectrum-ActionButton-label) {
+    display: flex;
+    gap: var(--spectrum-actionbutton-icon-gap);
   }
 
   .app-action {
diff --git a/packages/builder/src/components/deploy/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
new file mode 100644
index 0000000000..9b22fe5b94
--- /dev/null
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -0,0 +1,45 @@
+<script>
+  import { Layout, Input, notifications } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import { store } from "builderStore"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { apps } from "stores/portal"
+  import { API } from "api"
+
+  export const show = () => {
+    deletionModal.show()
+  }
+
+  export const hide = () => {
+    deletionModal.hide()
+  }
+
+  let deletionModal
+  let deletionConfirmationAppName
+
+  const deleteApp = async () => {
+    try {
+      await API.deleteApp($store.appId)
+      apps.load()
+      notifications.success("App deleted successfully")
+      $goto("/builder")
+    } catch (err) {
+      notifications.error("Error deleting app")
+    }
+  }
+</script>
+
+<ConfirmDialog
+  bind:this={deletionModal}
+  title="Delete app"
+  okText="Delete"
+  onOk={deleteApp}
+  onCancel={() => (deletionConfirmationAppName = null)}
+  disabled={deletionConfirmationAppName !== $store.name}
+>
+  Are you sure you want to delete <b>{$store.name}</b>?
+  <br />
+  Please enter the app name below to confirm.
+  <br /><br />
+  <Input bind:value={deletionConfirmationAppName} placeholder={$store.name} />
+</ConfirmDialog>
diff --git a/packages/builder/src/components/deploy/RevertModal.svelte b/packages/builder/src/components/deploy/RevertModal.svelte
index 364add9053..a36ecb0b79 100644
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@@ -5,6 +5,7 @@
     notifications,
     ModalContent,
     ActionButton,
+    Link,
   } from "@budibase/bbui"
   import { store } from "builderStore"
   import { API } from "api"
@@ -28,16 +29,15 @@
       notifications.error(`Error reverting changes: ${error}`)
     }
   }
-</script>
 
-<ActionButton
-  quiet
-  icon="Revert"
-  size="M"
-  tooltip="Revert changes"
-  on:click={revertModal.show}
-  {disabled}
-/>
+  export const hide = () => {
+    revertModal.hide()
+  }
+
+  export const show = () => {
+    revertModal.show()
+  }
+</script>
 
 <Modal bind:this={revertModal}>
   <ModalContent
diff --git a/packages/builder/src/components/deploy/VersionModal.svelte b/packages/builder/src/components/deploy/VersionModal.svelte
index 75acc974ce..918587a55c 100644
--- a/packages/builder/src/components/deploy/VersionModal.svelte
+++ b/packages/builder/src/components/deploy/VersionModal.svelte
@@ -70,9 +70,7 @@
 </script>
 
 {#if !hideIcon && updateAvailable}
-  <StatusLight hoverable on:click={updateModal.show} notice>
-    Update available
-  </StatusLight>
+  <StatusLight hoverable on:click={updateModal.show} notice>Update</StatusLight>
 {/if}
 <Modal bind:this={updateModal}>
   <ModalContent
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index ed7776fc2d..1101034e0f 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -11,7 +11,7 @@ export const TOUR_STEP_KEYS = {
   BUILDER_DATA_SECTION: "builder-data-section",
   BUILDER_DESIGN_SECTION: "builder-design-section",
   BUILDER_USER_MANAGEMENT: "builder-user-management",
-  BUILDER_AUTOMATE_SECTION: "builder-automate-section",
+  BUILDER_AUTOMATION_SECTION: "builder-automation-section",
   FEATURE_USER_MANAGEMENT: "feature-user-management",
 }
 
@@ -34,7 +34,7 @@ const getTours = () => {
         title: "Data",
         route: "/builder/app/:application/data",
         layout: OnboardingData,
-        query: ".topcenternav .spectrum-Tabs-item#builder-data-tab",
+        query: ".topleftnav .spectrum-Tabs-item#builder-data-tab",
         onLoad: async () => {
           tourEvent(TOUR_STEP_KEYS.BUILDER_DATA_SECTION)
         },
@@ -45,20 +45,20 @@ const getTours = () => {
         title: "Design",
         route: "/builder/app/:application/design",
         layout: OnboardingDesign,
-        query: ".topcenternav .spectrum-Tabs-item#builder-design-tab",
+        query: ".topleftnav .spectrum-Tabs-item#builder-design-tab",
         onLoad: () => {
           tourEvent(TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION)
         },
         align: "left",
       },
       {
-        id: TOUR_STEP_KEYS.BUILDER_AUTOMATE_SECTION,
+        id: TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION,
         title: "Automations",
-        route: "/builder/app/:application/automate",
-        query: ".topcenternav .spectrum-Tabs-item#builder-automate-tab",
+        route: "/builder/app/:application/automation",
+        query: ".topleftnav .spectrum-Tabs-item#builder-automation-tab",
         body: "Once you have your app screens made, you can set up automations to fit in with your current workflow",
         onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_AUTOMATE_SECTION)
+          tourEvent(TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION)
         },
         align: "left",
       },
diff --git a/packages/builder/src/components/portal/page/SideNavItem.svelte b/packages/builder/src/components/portal/page/SideNavItem.svelte
index c22b8b6113..ff627acfc5 100644
--- a/packages/builder/src/components/portal/page/SideNavItem.svelte
+++ b/packages/builder/src/components/portal/page/SideNavItem.svelte
@@ -4,18 +4,27 @@
   export let active = false
 </script>
 
-<a on:click href={url} class:active>
-  {text || ""}
-</a>
+{#if url}
+  <a on:click href={url} class:active>
+    {text || ""}
+  </a>
+{:else}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <span on:click class:active>
+    {text || ""}
+  </span>
+{/if}
 
 <style>
-  a {
+  a,
+  span {
     padding: var(--spacing-s) var(--spacing-m);
     color: var(--spectrum-global-color-gray-900);
     border-radius: 4px;
     transition: background 130ms ease-out;
   }
   .active,
+  span:hover,
   a:hover {
     background-color: var(--spectrum-global-color-gray-200);
     cursor: pointer;
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 4c2b8c4ba6..8c79d0e80b 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -171,7 +171,9 @@
         {:else}
           <div class="secondary-editor">
             <Icon name="LockClosed" />
-            Another user is currently editing your screens and automations
+            <div class="secondary-editor-body">
+              Another user is currently editing your screens and automations
+            </div>
           </div>
         {/if}
       </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index f9cb8931e9..1971d3bc61 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -1,17 +1,16 @@
 <script>
   import { Content, SideNav, SideNavItem } from "components/portal/page"
-  import { Page, Layout } from "@budibase/bbui"
-  import { url, isActive, layout } from "@roxi/routify"
+  import { Page, Layout, Input, notifications } from "@budibase/bbui"
+  import { url, isActive, layout, goto } from "@roxi/routify"
   import { capitalise } from "helpers"
 
-  // $: $url(), console.log("Hello ", $url())
-  // $: console.log("is auto", $isActive("./automation-history"))
-  // $: selected = capitalise(
-  //   $layout.children.find(layout => $isActive(layout.path))?.title ?? "settings"
-  // )
-  // $: console.log("Settings Selected ", selected)
+  import { store } from "builderStore"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { apps } from "stores/portal"
+  import { API } from "api"
+  import DeleteModal from "components/deploy/DeleteModal.svelte"
 
-  // if updated to Settings and automation-history is not selected, switch to ./automation-history
+  let deleteModal
 </script>
 
 <!-- routify:options index=4 -->
@@ -50,6 +49,14 @@
             url={$url("./version")}
             active={$isActive("./version")}
           />
+          <div class="delete-action">
+            <SideNavItem
+              text="Delete app"
+              on:click={() => {
+                deleteModal.show()
+              }}
+            />
+          </div>
         </SideNav>
         <slot />
       </Content>
@@ -57,7 +64,15 @@
   </Page>
 </div>
 
+<DeleteModal bind:this={deleteModal} />
+
 <style>
+  .delete-action :global(span) {
+    color: #ee4331;
+  }
+  .delete-action {
+    display: contents;
+  }
   .settings {
     flex: 1 1 auto;
     display: flex;
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
index 6ab2744dbb..190ced4b36 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
@@ -191,13 +191,6 @@
       </div>
     </div>
 
-    <!-- 
-      From the apps list header
-      isOwner = $auth.accountPortalAccess && $admin.cloud
-      isOwner ? $licensing.goToUpgradePage() : $licensing.goToPricingPage() 
-    -->
-    {` acc portal access ${$auth.user.accountPortalAccess} `}
-    <!-- {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud} -->
     {#if (!$licensing.isEnterprisePlan && $auth.user.accountPortalAccess) || !$admin.cloud}
       <Button secondary on:click={$licensing.goToUpgradePage()}>
         Get more history
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
index 90be8d0803..9b19f03fe9 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -15,10 +15,10 @@
 
   $: filteredApps = $apps.filter(app => app.devId == $store.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
-  $: appUrl = `${window.origin}/app${app?.url}`
+  $: appUrl = `${window.origin}/embed${app?.url}`
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
-  $: embed = `<iframe width="560" height="315" frameborder="0" allow="clipboard-write" src="${appUrl}" ></iframe>`
+  $: embed = `<iframe width="800" height="600" frameborder="0" allow="clipboard-write" src="${appUrl}" ></iframe>`
 </script>
 
 <Layout noPadding>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte
deleted file mode 100644
index 333a10bef7..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte
+++ /dev/null
@@ -1,252 +0,0 @@
-<script>
-  import { url, isActive, goto } from "@roxi/routify"
-  import {
-    Page,
-    Layout,
-    Button,
-    Icon,
-    ActionMenu,
-    MenuItem,
-    Helpers,
-    Input,
-    Modal,
-    notifications,
-  } from "@budibase/bbui"
-  import {
-    Content,
-    SideNav,
-    SideNavItem,
-    Breadcrumbs,
-    Breadcrumb,
-    Header,
-  } from "components/portal/page"
-  import { apps, overview } from "stores/portal"
-  import { AppStatus } from "constants"
-  import analytics, { Events, EventSource } from "analytics"
-  import { store } from "builderStore"
-  import EditableIcon from "components/common/EditableIcon.svelte"
-  import { API } from "api"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import ExportAppModal from "components/start/ExportAppModal.svelte"
-  import { syncURLToState } from "helpers/urlStateSync"
-  import * as routify from "@roxi/routify"
-  import { onDestroy } from "svelte"
-
-  // Keep URL and state in sync for selected app ID
-  const stopSyncing = syncURLToState({
-    urlParam: "appId",
-    stateKey: "selectedAppId",
-    validate: id => $apps.some(app => app.devId === id),
-    fallbackUrl: "../../",
-    store: overview,
-    routify,
-  })
-
-  let exportModal
-  let deletionModal
-  let exportPublishedVersion = false
-  let deletionConfirmationAppName
-  let loaded = false
-
-  $: app = $overview.selectedApp
-  $: appId = $overview.selectedAppId
-  $: initialiseApp(appId)
-  $: isPublished = app?.status === AppStatus.DEPLOYED
-
-  const initialiseApp = async appId => {
-    loaded = false
-    try {
-      const pkg = await API.fetchAppPackage(appId)
-      await store.actions.initialise(pkg)
-      await API.syncApp(appId)
-      loaded = true
-    } catch (error) {
-      notifications.error("Error initialising app overview")
-      $goto("../../")
-    }
-  }
-
-  const viewApp = () => {
-    if (isPublished) {
-      analytics.captureEvent(Events.APP_VIEW_PUBLISHED, {
-        appId: $store.appId,
-        eventSource: EventSource.PORTAL,
-      })
-      window.open(`/app${app?.url}`, "_blank")
-    }
-  }
-
-  const editApp = () => {
-    $goto(`../../../app/${app.devId}`)
-  }
-
-  const exportApp = opts => {
-    exportPublishedVersion = !!opts?.published
-    exportModal.show()
-  }
-
-  const copyAppId = async () => {
-    await Helpers.copyToClipboard(app.prodId)
-    notifications.success("App ID copied to clipboard")
-  }
-
-  const deleteApp = async () => {
-    try {
-      await API.deleteApp(app?.devId)
-      apps.load()
-      notifications.success("App deleted successfully")
-      $goto("../../")
-    } catch (err) {
-      notifications.error("Error deleting app")
-    }
-  }
-
-  onDestroy(() => {
-    stopSyncing()
-    store.actions.reset()
-  })
-</script>
-
-{#key appId}
-  <Page>
-    <Layout noPadding gap="L">
-      <Breadcrumbs>
-        <Breadcrumb url={$url("../")} text="Apps" />
-        <Breadcrumb text={app?.name} />
-      </Breadcrumbs>
-      <Header title={app?.name} wrap={false}>
-        <div slot="icon">
-          <EditableIcon
-            {app}
-            autoSave
-            size="XL"
-            name={app?.icon?.name || "Apps"}
-            color={app?.icon?.color}
-          />
-        </div>
-        <div slot="buttons">
-          <span class="desktop">
-            <Button
-              size="M"
-              quiet
-              secondary
-              disabled={!isPublished}
-              on:click={viewApp}
-            >
-              View
-            </Button>
-          </span>
-          <span class="desktop">
-            <Button size="M" cta on:click={editApp}>Edit</Button>
-          </span>
-          <ActionMenu align="right">
-            <span slot="control" class="app-overview-actions-icon">
-              <Icon hoverable name="More" />
-            </span>
-            <span class="mobile">
-              <MenuItem icon="Globe" disabled={!isPublished} on:click={viewApp}>
-                View
-              </MenuItem>
-            </span>
-            <span class="mobile">
-              <MenuItem icon="Edit" on:click={editApp}>Edit</MenuItem>
-            </span>
-            <MenuItem
-              on:click={() => exportApp({ published: false })}
-              icon="DownloadFromCloud"
-            >
-              Export latest
-            </MenuItem>
-            {#if isPublished}
-              <MenuItem
-                on:click={() => exportApp({ published: true })}
-                icon="DownloadFromCloudOutline"
-              >
-                Export published
-              </MenuItem>
-              <MenuItem on:click={copyAppId} icon="Copy">Copy app ID</MenuItem>
-            {/if}
-            {#if !isPublished}
-              <MenuItem on:click={deletionModal.show} icon="Delete">
-                Delete
-              </MenuItem>
-            {/if}
-          </ActionMenu>
-        </div>
-      </Header>
-      <Content showMobileNav>
-        <SideNav slot="side-nav">
-          <SideNavItem
-            text="Overview"
-            url={$url("./overview")}
-            active={$isActive("./overview")}
-          />
-          <SideNavItem
-            text="Access"
-            url={$url("./access")}
-            active={$isActive("./access")}
-          />
-          <SideNavItem
-            text="Automation History"
-            url={$url("./automation-history")}
-            active={$isActive("./automation-history")}
-          />
-          <SideNavItem
-            text="Backups"
-            url={$url("./backups")}
-            active={$isActive("./backups")}
-          />
-          <SideNavItem
-            text="Name and URL"
-            url={$url("./name-and-url")}
-            active={$isActive("./name-and-url")}
-          />
-          <SideNavItem
-            text="Version"
-            url={$url("./version")}
-            active={$isActive("./version")}
-          />
-        </SideNav>
-        {#if loaded}
-          <slot />
-        {/if}
-      </Content>
-    </Layout>
-  </Page>
-
-  <Modal bind:this={exportModal} padding={false}>
-    <ExportAppModal {app} published={exportPublishedVersion} />
-  </Modal>
-  <ConfirmDialog
-    bind:this={deletionModal}
-    title="Delete app"
-    okText="Delete"
-    onOk={deleteApp}
-    onCancel={() => (deletionConfirmationAppName = null)}
-    disabled={deletionConfirmationAppName !== app?.name}
-  >
-    Are you sure you want to delete <b>{app?.name}</b>?
-    <br />
-    Please enter the app name below to confirm.
-    <br /><br />
-    <Input bind:value={deletionConfirmationAppName} placeholder={app?.name} />
-  </ConfirmDialog>
-{/key}
-
-<style>
-  .desktop {
-    display: contents;
-  }
-  .mobile {
-    display: none;
-  }
-
-  @media (max-width: 640px) {
-    .desktop {
-      display: none;
-    }
-    .mobile {
-      display: contents;
-    }
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte
deleted file mode 100644
index b3aed56a48..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte
+++ /dev/null
@@ -1,211 +0,0 @@
-<script>
-  import {
-    ModalContent,
-    PickerDropdown,
-    ActionButton,
-    Layout,
-    Icon,
-  } from "@budibase/bbui"
-  import { roles } from "stores/backend"
-  import { groups, users, licensing, apps } from "stores/portal"
-  import { Constants, RoleUtils, fetchData } from "@budibase/frontend-core"
-  import { API } from "api"
-  import { createEventDispatcher } from "svelte"
-
-  export let app
-  export let appUsers = []
-  export let showUsers = false
-  export let showGroups = false
-
-  const dispatch = createEventDispatcher()
-  const usersFetch = fetchData({
-    API,
-    datasource: {
-      type: "user",
-    },
-    options: {
-      query: {
-        email: "",
-      },
-    },
-  })
-
-  let search = ""
-  let data = [{ id: "", role: "" }]
-
-  $: usersFetch.update({
-    query: {
-      email: search,
-    },
-  })
-  $: fixedAppId = apps.getProdAppID(app.devId)
-  $: availableUsers = getAvailableUsers($usersFetch.rows, appUsers, data)
-  $: availableGroups = getAvailableGroups($groups, app.appId, search, data)
-  $: valid = data?.length && !data?.some(x => !x.id?.length || !x.role?.length)
-  $: optionSections = {
-    ...(showGroups &&
-      $licensing.groupsEnabled &&
-      availableGroups.length && {
-        ["User groups"]: {
-          data: availableGroups,
-          getLabel: group => group.name,
-          getValue: group => group._id,
-          getIcon: group => group.icon,
-          getColour: group => group.color,
-        },
-      }),
-    ...(showUsers && {
-      users: {
-        data: availableUsers,
-        getLabel: user => user.email,
-        getValue: user => user._id,
-        getIcon: user => user.icon,
-        getColour: user => user.color,
-      },
-    }),
-  }
-
-  const addData = async appData => {
-    const gr_prefix = "gr"
-    const us_prefix = "us"
-    for (let data of appData) {
-      // Assign group
-      if (data.id.startsWith(gr_prefix)) {
-        const group = $groups.find(group => {
-          return group._id === data.id
-        })
-        if (!group) {
-          continue
-        }
-        await groups.actions.addApp(group._id, fixedAppId, data.role)
-      }
-      // Assign user
-      else if (data.id.startsWith(us_prefix)) {
-        const user = await users.get(data.id)
-        await users.save({
-          ...user,
-          roles: {
-            ...user.roles,
-            [fixedAppId]: data.role,
-          },
-        })
-      }
-    }
-
-    // Refresh data when completed
-    await usersFetch.refresh()
-    dispatch("update")
-  }
-
-  const getAvailableUsers = (allUsers, appUsers, newUsers) => {
-    return (allUsers || []).filter(user => {
-      // Filter out admin users
-      if (user?.admin?.global || user?.builder?.global) {
-        return false
-      }
-
-      // Filter out assigned users
-      if (appUsers.find(x => x._id === user._id)) {
-        return false
-      }
-
-      // Filter out new users which are going to be assigned
-      return !newUsers.find(x => x.id === user._id)
-    })
-  }
-
-  const getAvailableGroups = (allGroups, appId, search, newGroups) => {
-    search = search?.toLowerCase()
-    return (allGroups || []).filter(group => {
-      // Filter out assigned groups
-      const appIds = groups.actions.getGroupAppIds(group)
-      if (appIds.includes(apps.getProdAppID(appId))) {
-        return false
-      }
-
-      // Filter out new groups which are going to be assigned
-      if (newGroups.find(x => x.id === group._id)) {
-        return false
-      }
-
-      // Match search string
-      return !search || group.name.toLowerCase().includes(search)
-    })
-  }
-
-  function addNewInput() {
-    data = [...data, { id: "", role: "" }]
-  }
-
-  const removeItem = index => {
-    data = data.filter((x, idx) => idx !== index)
-  }
-</script>
-
-<ModalContent
-  size="M"
-  title="Assign access to your app"
-  confirmText="Done"
-  cancelText="Cancel"
-  onConfirm={() => addData(data)}
-  showCloseIcon={false}
-  disabled={!valid}
->
-  {#if data.length}
-    <Layout noPadding gap="XS">
-      {#each data as input, index}
-        <div class="item">
-          <div class="picker">
-            <PickerDropdown
-              autocomplete
-              showClearIcon={false}
-              primaryOptions={optionSections}
-              secondaryOptions={$roles.filter(
-                x => x._id !== Constants.Roles.PUBLIC
-              )}
-              secondaryPlaceholder="Access"
-              bind:primaryValue={input.id}
-              bind:secondaryValue={input.role}
-              bind:searchTerm={search}
-              getPrimaryOptionLabel={group => group.name}
-              getPrimaryOptionValue={group => group.name}
-              getPrimaryOptionIcon={group => group.icon}
-              getPrimaryOptionColour={group => group.colour}
-              getSecondaryOptionLabel={role => role.name}
-              getSecondaryOptionValue={role => role._id}
-              getSecondaryOptionColour={role =>
-                RoleUtils.getRoleColour(role._id)}
-            />
-          </div>
-          <div class="icon">
-            <Icon
-              name="Close"
-              hoverable
-              size="S"
-              on:click={() => removeItem(index)}
-            />
-          </div>
-        </div>
-      {/each}
-    </Layout>
-  {/if}
-  <div>
-    <ActionButton on:click={addNewInput} icon="Add">Add more</ActionButton>
-  </div>
-</ModalContent>
-
-<style>
-  .item {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .picker {
-    width: calc(100% - 30px);
-  }
-  .icon {
-    width: 20px;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/EditableRoleRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/EditableRoleRenderer.svelte
deleted file mode 100644
index d92a522602..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/EditableRoleRenderer.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-  import RoleSelect from "components/common/RoleSelect.svelte"
-  import { getContext } from "svelte"
-
-  const rolesContext = getContext("roles")
-
-  export let value
-  export let row
-</script>
-
-<div>
-  <RoleSelect
-    {value}
-    quiet
-    allowRemove
-    allowPublic={false}
-    on:change={e => rolesContext.updateRole(e.detail, row._id)}
-    on:remove={() => rolesContext.removeRole(row._id)}
-  />
-</div>
-
-<style>
-  div {
-    width: 100%;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte
deleted file mode 100644
index 62c5da12ec..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte
+++ /dev/null
@@ -1,271 +0,0 @@
-<script>
-  import {
-    Layout,
-    Heading,
-    Body,
-    Button,
-    Modal,
-    notifications,
-    Pagination,
-    Divider,
-    Table,
-  } from "@budibase/bbui"
-  import { onMount, setContext } from "svelte"
-  import { users, groups, apps, licensing, overview } from "stores/portal"
-  import AssignmentModal from "./_components/AssignmentModal.svelte"
-  import { roles } from "stores/backend"
-  import { API } from "api"
-  import { fetchData } from "@budibase/frontend-core"
-  import EditableRoleRenderer from "./_components/EditableRoleRenderer.svelte"
-
-  const userSchema = {
-    email: {
-      type: "string",
-      width: "1fr",
-    },
-    role: {
-      displayName: "Access",
-      width: "150px",
-      borderLeft: true,
-    },
-  }
-  const groupSchema = {
-    name: {
-      type: "string",
-      width: "1fr",
-    },
-    role: {
-      displayName: "Access",
-      width: "150px",
-      borderLeft: true,
-    },
-  }
-  const customRenderers = [
-    {
-      column: "role",
-      component: EditableRoleRenderer,
-    },
-  ]
-
-  let assignmentModal
-  let appGroups
-  let appUsers
-  let showAddUsers = false
-  let showAddGroups = false
-
-  $: app = $overview.selectedApp
-  $: devAppId = app.devId
-  $: prodAppId = apps.getProdAppID(app.devId)
-  $: usersFetch = fetchData({
-    API,
-    datasource: {
-      type: "user",
-    },
-    options: {
-      query: {
-        appId: apps.getProdAppID(devAppId),
-      },
-    },
-  })
-  $: appUsers = getAppUsers($usersFetch.rows, prodAppId)
-  $: appGroups = getAppGroups($groups, prodAppId)
-
-  const getAppUsers = (users, appId) => {
-    return users.map(user => ({
-      ...user,
-      role: user.roles[Object.keys(user.roles).find(x => x === appId)],
-    }))
-  }
-
-  const getAppGroups = (allGroups, appId) => {
-    return allGroups
-      .filter(group => {
-        if (!group.roles) {
-          return false
-        }
-        return groups.actions.getGroupAppIds(group).includes(appId)
-      })
-      .map(group => ({
-        ...group,
-        role: group.roles[
-          groups.actions.getGroupAppIds(group).find(x => x === appId)
-        ],
-      }))
-  }
-
-  const updateRole = async (role, id) => {
-    // Check if this is a user or a group
-    if ($usersFetch.rows.some(user => user._id === id)) {
-      await updateUserRole(role, id)
-    } else {
-      await updateGroupRole(role, id)
-    }
-  }
-
-  const removeRole = async id => {
-    // Check if this is a user or a group
-    if ($usersFetch.rows.some(user => user._id === id)) {
-      await removeUserRole(id)
-    } else {
-      await removeGroupRole(id)
-    }
-  }
-
-  const updateUserRole = async (role, userId) => {
-    const user = $usersFetch.rows.find(user => user._id === userId)
-    if (!user) {
-      return
-    }
-    user.roles[prodAppId] = role
-    await users.save(user)
-    await usersFetch.refresh()
-  }
-
-  const removeUserRole = async userId => {
-    const user = $usersFetch.rows.find(user => user._id === userId)
-    if (!user) {
-      return
-    }
-    const filteredRoles = { ...user.roles }
-    delete filteredRoles[prodAppId]
-    await users.save({
-      ...user,
-      roles: {
-        ...filteredRoles,
-      },
-    })
-    await usersFetch.refresh()
-  }
-
-  const updateGroupRole = async (role, groupId) => {
-    const group = $groups.find(group => group._id === groupId)
-    if (!group) {
-      return
-    }
-    await groups.actions.addApp(group._id, prodAppId, role)
-    await usersFetch.refresh()
-  }
-
-  const removeGroupRole = async groupId => {
-    const group = $groups.find(group => group._id === groupId)
-    if (!group) {
-      return
-    }
-    await groups.actions.removeApp(group._id, prodAppId)
-    await usersFetch.refresh()
-  }
-
-  const showUsersModal = () => {
-    showAddUsers = true
-    showAddGroups = false
-    assignmentModal.show()
-  }
-
-  const showGroupsModal = () => {
-    showAddUsers = false
-    showAddGroups = true
-    assignmentModal.show()
-  }
-
-  setContext("roles", {
-    updateRole,
-    removeRole,
-  })
-
-  onMount(async () => {
-    try {
-      await roles.fetch()
-    } catch (error) {
-      notifications.error(error)
-    }
-  })
-</script>
-
-<Layout noPadding>
-  <Layout gap="XS" noPadding>
-    <Heading>Access</Heading>
-    <Body>Assign users to your app and set their access</Body>
-  </Layout>
-  <Divider />
-  <Layout noPadding gap="L">
-    {#if $usersFetch.loaded}
-      <Layout noPadding gap="S">
-        <div class="title">
-          <Heading size="S">Users</Heading>
-          <Button cta on:click={showUsersModal}>Assign user</Button>
-        </div>
-        <Table
-          customPlaceholder
-          data={appUsers}
-          schema={userSchema}
-          allowEditRows={false}
-          {customRenderers}
-        >
-          <div class="placeholder" slot="placeholder">
-            <Heading size="S">You have no users assigned yet</Heading>
-          </div>
-        </Table>
-        <div class="pagination">
-          <Pagination
-            page={$usersFetch.pageNumber + 1}
-            hasPrevPage={$usersFetch.hasPrevPage}
-            hasNextPage={$usersFetch.hasNextPage}
-            goToPrevPage={$usersFetch.loading ? null : usersFetch.prevPage}
-            goToNextPage={$usersFetch.loading ? null : usersFetch.nextPage}
-          />
-        </div>
-      </Layout>
-    {/if}
-
-    {#if $usersFetch.loaded && $licensing.groupsEnabled}
-      <Layout noPadding gap="S">
-        <div class="title">
-          <Heading size="S">Groups</Heading>
-          <Button cta on:click={showGroupsModal}>Assign group</Button>
-        </div>
-        <Table
-          customPlaceholder
-          data={appGroups}
-          schema={groupSchema}
-          allowEditRows={false}
-          {customRenderers}
-        >
-          <div class="placeholder" slot="placeholder">
-            <Heading size="S">You have no groups assigned yet</Heading>
-          </div>
-        </Table>
-      </Layout>
-    {/if}
-  </Layout>
-</Layout>
-
-<Modal bind:this={assignmentModal}>
-  <AssignmentModal
-    {app}
-    {appUsers}
-    on:update={usersFetch.refresh}
-    showGroups={showAddGroups}
-    showUsers={showAddUsers}
-  />
-</Modal>
-
-<style>
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-  .placeholder {
-    flex: 1 1 auto;
-    display: grid;
-    place-items: center;
-    text-align: center;
-  }
-  .pagination {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin-top: calc(-1 * var(--spacing-s));
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/HistoryDetailsPanel.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/HistoryDetailsPanel.svelte
deleted file mode 100644
index 565c0d1f2f..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/HistoryDetailsPanel.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-  import {
-    Layout,
-    Body,
-    Button,
-    InlineAlert,
-    Heading,
-    Icon,
-  } from "@budibase/bbui"
-  import StatusRenderer from "./StatusRenderer.svelte"
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
-  import { goto } from "@roxi/routify"
-  import { automationStore } from "builderStore"
-
-  export let history
-  export let appId
-  export let close
-  const STOPPED_ERROR = "stopped_error"
-
-  $: exists = $automationStore.automations?.find(
-    auto => auto._id === history?.automationId
-  )
-</script>
-
-{#if history}
-  <Layout noPadding>
-    <div class="controls">
-      <StatusRenderer value={history.status} />
-      <Icon hoverable name="Close" on:click={close} />
-    </div>
-    <Layout noPadding gap="XS">
-      <Heading>{history.automationName}</Heading>
-      <DateTimeRenderer value={history.createdAt} />
-    </Layout>
-    {#if history.status === STOPPED_ERROR}
-      <div class="cron-error">
-        <InlineAlert
-          type="error"
-          header="CRON automation disabled"
-          message="Fix the error and re-publish your app to re-activate."
-        />
-      </div>
-    {/if}
-    {#if exists}
-      <div>
-        <Button
-          secondary
-          on:click={() => {
-            $goto(`../../../../app/${appId}/automate/${history.automationId}`)
-          }}
-        >
-          Edit automation
-        </Button>
-      </div>
-    {/if}
-    {#key history}
-      <div class="history">
-        <TestDisplay testResults={history} width="100%" />
-      </div>
-    {/key}
-  </Layout>
-{:else}
-  <Body>No details found</Body>
-{/if}
-
-<style>
-  .controls {
-    display: flex;
-    gap: var(--spacing-s);
-    justify-content: space-between;
-    align-items: center;
-  }
-  .cron-error {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-  }
-  .history {
-    margin: 0 -30px;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte
deleted file mode 100644
index f041faa349..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import { Badge } from "@budibase/bbui"
-  export let value
-
-  $: isError = !value || value.toLowerCase() === "error"
-  $: isStoppedError = value?.toLowerCase() === "stopped_error"
-  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
-  $: info = getInfo(isError, isStopped)
-
-  const getInfo = (error, stopped) => {
-    if (error) {
-      return { color: "red", message: "Error" }
-    } else if (stopped) {
-      return { color: "yellow", message: "Stopped" }
-    } else {
-      return { color: "green", message: "Success" }
-    }
-  }
-</script>
-
-<Badge
-  green={info.color === "green"}
-  red={info.color === "red"}
-  yellow={info.color === "yellow"}
->
-  {info.message}
-</Badge>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte
deleted file mode 100644
index 5eb8b9d965..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte
+++ /dev/null
@@ -1,263 +0,0 @@
-<script>
-  import {
-    Layout,
-    Table,
-    Select,
-    Pagination,
-    Button,
-    Body,
-    Heading,
-    Divider,
-  } from "@budibase/bbui"
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import StatusRenderer from "./_components/StatusRenderer.svelte"
-  import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
-  import { automationStore } from "builderStore"
-  import { createPaginationStore } from "helpers/pagination"
-  import { getContext, onDestroy, onMount } from "svelte"
-  import dayjs from "dayjs"
-  import { auth, licensing, admin, overview } from "stores/portal"
-  import { Constants } from "@budibase/frontend-core"
-  import Portal from "svelte-portal"
-
-  const ERROR = "error",
-    SUCCESS = "success",
-    STOPPED = "stopped"
-  const sidePanel = getContext("side-panel")
-
-  let pageInfo = createPaginationStore()
-  let runHistory = null
-  let selectedHistory = null
-  let automationOptions = []
-  let automationId = null
-  let status = null
-  let timeRange = null
-  let loaded = false
-
-  $: licensePlan = $auth.user?.license?.plan
-  $: app = $overview.selectedApp
-  $: page = $pageInfo.page
-  $: fetchLogs(automationId, status, page, timeRange)
-
-  const timeOptions = [
-    { value: "90-d", label: "Past 90 days" },
-    { value: "30-d", label: "Past 30 days" },
-    { value: "1-w", label: "Past week" },
-    { value: "1-d", label: "Past day" },
-    { value: "1-h", label: "Past 1 hour" },
-    { value: "15-m", label: "Past 15 mins" },
-    { value: "5-m", label: "Past 5 mins" },
-  ]
-
-  const statusOptions = [
-    { value: SUCCESS, label: "Success" },
-    { value: ERROR, label: "Error" },
-    { value: STOPPED, label: "Stopped" },
-  ]
-
-  const runHistorySchema = {
-    status: { displayName: "Status" },
-    automationName: { displayName: "Automation" },
-    createdAt: { displayName: "Time" },
-  }
-
-  const customRenderers = [
-    { column: "createdAt", component: DateTimeRenderer },
-    { column: "status", component: StatusRenderer },
-  ]
-
-  async function fetchLogs(
-    automationId,
-    status,
-    page,
-    timeRange,
-    force = false
-  ) {
-    if (!force && !loaded) {
-      return
-    }
-    let startDate = null
-    if (timeRange) {
-      const [length, units] = timeRange.split("-")
-      startDate = dayjs().subtract(length, units)
-    }
-    const response = await automationStore.actions.getLogs({
-      automationId,
-      status,
-      page,
-      startDate,
-    })
-    pageInfo.fetched(response.hasNextPage, response.nextPage)
-    runHistory = enrichHistory($automationStore.blockDefinitions, response.data)
-  }
-
-  function enrichHistory(definitions, runHistory) {
-    if (!definitions) {
-      return []
-    }
-    const finalHistory = []
-    for (let history of runHistory) {
-      if (!history.steps) {
-        continue
-      }
-      let notFound = false
-      for (let step of history.steps) {
-        const trigger = definitions.TRIGGER[step.stepId],
-          action = definitions.ACTION[step.stepId]
-        if (!trigger && !action) {
-          notFound = true
-          break
-        }
-        step.icon = trigger ? trigger.icon : action.icon
-        step.name = trigger ? trigger.name : action.name
-      }
-      if (!notFound) {
-        finalHistory.push(history)
-      }
-    }
-    return finalHistory
-  }
-
-  function viewDetails({ detail }) {
-    selectedHistory = detail
-    sidePanel.open()
-  }
-
-  onMount(async () => {
-    await automationStore.actions.fetch()
-    const params = new URLSearchParams(window.location.search)
-    const shouldOpen = params.get("open") === ERROR
-    if (shouldOpen) {
-      status = ERROR
-    }
-    automationOptions = []
-    for (let automation of $automationStore.automations) {
-      automationOptions.push({ value: automation._id, label: automation.name })
-    }
-    await fetchLogs(automationId, status, 0, timeRange, true)
-    // Open the first automation info if one exists
-    if (shouldOpen && runHistory?.[0]) {
-      viewDetails({ detail: runHistory[0] })
-    }
-    loaded = true
-  })
-
-  onDestroy(() => {
-    sidePanel.close()
-  })
-</script>
-
-<Layout noPadding>
-  <Layout gap="XS" noPadding>
-    <Heading>Automation History</Heading>
-    <Body>View the automations your app has executed</Body>
-  </Layout>
-  <Divider />
-
-  <div class="controls">
-    <div class="search">
-      <div class="select">
-        <Select
-          placeholder="All"
-          label="Status"
-          bind:value={status}
-          options={statusOptions}
-        />
-      </div>
-      <div class="select">
-        <Select
-          placeholder="All"
-          label="Automation"
-          bind:value={automationId}
-          options={automationOptions}
-        />
-      </div>
-      <div class="select">
-        <Select
-          placeholder="All"
-          label="Date range"
-          bind:value={timeRange}
-          options={timeOptions}
-          isOptionEnabled={x => {
-            if (licensePlan?.type === Constants.PlanType.FREE) {
-              return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
-            } else if (licensePlan?.type === Constants.PlanType.TEAM) {
-              return ["90-d"].indexOf(x.value) < 0
-            } else if (licensePlan?.type === Constants.PlanType.PRO) {
-              return ["30-d", "90-d"].indexOf(x.value) < 0
-            }
-            return true
-          }}
-        />
-      </div>
-    </div>
-    {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
-      <Button secondary on:click={$licensing.goToUpgradePage()}>
-        Get more history
-      </Button>
-    {/if}
-  </div>
-
-  {#if runHistory}
-    <div>
-      <Table
-        on:click={viewDetails}
-        schema={runHistorySchema}
-        allowSelectRows={false}
-        allowEditColumns={false}
-        allowEditRows={false}
-        data={runHistory}
-        {customRenderers}
-        placeholderText="No history found"
-        border={false}
-      />
-      <div class="pagination">
-        <Pagination
-          page={$pageInfo.pageNumber}
-          hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
-          hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
-          goToPrevPage={pageInfo.prevPage}
-          goToNextPage={pageInfo.nextPage}
-        />
-      </div>
-    </div>
-  {/if}
-</Layout>
-
-{#if selectedHistory}
-  <Portal target="#side-panel">
-    <HistoryDetailsPanel
-      appId={app.devId}
-      bind:history={selectedHistory}
-      close={sidePanel.close}
-    />
-  </Portal>
-{/if}
-
-<style>
-  .controls {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-xl);
-    align-items: flex-end;
-    flex-wrap: wrap;
-  }
-  .search {
-    display: flex;
-    gap: var(--spacing-xl);
-    align-items: flex-start;
-    flex: 1 0 auto;
-    max-width: 100%;
-  }
-  .select {
-    flex: 1 1 0;
-    max-width: 150px;
-    min-width: 80px;
-  }
-  .pagination {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin-top: var(--spacing-xl);
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/ActionsRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/ActionsRenderer.svelte
deleted file mode 100644
index 4787112760..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/ActionsRenderer.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script>
-  import {
-    ActionMenu,
-    MenuItem,
-    Icon,
-    Heading,
-    Body,
-    Modal,
-  } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import CreateRestoreModal from "./CreateRestoreModal.svelte"
-  import { createEventDispatcher } from "svelte"
-
-  export let row
-
-  let deleteDialog
-  let restoreDialog
-  let restoreBackupModal
-
-  const dispatch = createEventDispatcher()
-
-  const onClickRestore = () => {
-    dispatch("buttonclick", {
-      type: "backupRestore",
-      backupId: row._id,
-    })
-  }
-
-  const onClickDelete = () => {
-    dispatch("buttonclick", {
-      type: "backupDelete",
-      backupId: row._id,
-    })
-  }
-
-  async function downloadExport() {
-    window.open(`/api/apps/${row.appId}/backups/${row._id}/file`, "_blank")
-  }
-</script>
-
-<div class="cell">
-  <ActionMenu align="right">
-    <div slot="control">
-      <Icon size="M" hoverable name="MoreSmallList" />
-    </div>
-
-    {#if row.type !== "restore"}
-      <MenuItem on:click={restoreDialog.show} icon="Revert">Restore</MenuItem>
-      <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
-      <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
-    {/if}
-  </ActionMenu>
-</div>
-
-<Modal bind:this={restoreBackupModal}>
-  <CreateRestoreModal confirm={onClickRestore} />
-</Modal>
-
-<ConfirmDialog
-  bind:this={deleteDialog}
-  okText="Delete Backup"
-  onOk={onClickDelete}
-  title="Confirm Deletion"
->
-  Are you sure you wish to delete this backup? This action cannot be undone.
-</ConfirmDialog>
-
-<ConfirmDialog
-  bind:this={restoreDialog}
-  okText="Continue"
-  onOk={restoreBackupModal?.show}
-  title="Confirm restore"
-  warning={false}
->
-  <Heading size="S">Backup</Heading>
-  <Body size="S">{new Date(row.timestamp).toLocaleString()}</Body>
-</ConfirmDialog>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-    margin-left: auto;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/AppSizeRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/AppSizeRenderer.svelte
deleted file mode 100644
index c103399f5b..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/AppSizeRenderer.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  import { Icon } from "@budibase/bbui"
-
-  export let row
-
-  $: automations = row?.automations
-  $: datasources = row?.datasources
-  $: screens = row?.screens
-</script>
-
-<div class="cell">
-  {#if automations != null && screens != null && datasources != null}
-    <div class="item">
-      <Icon name="Data" />
-      <div>{datasources || 0}</div>
-    </div>
-    <div class="item">
-      <Icon name="WebPage" />
-      <div>{screens || 0}</div>
-    </div>
-    <div class="item">
-      <Icon name="JourneyVoyager" />
-      <div>{automations || 0}</div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: calc(var(--spacing-xl) * 2);
-    align-items: center;
-  }
-
-  .item {
-    display: flex;
-    gap: var(--spacing-s);
-    flex-direction: row;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/CreateRestoreModal.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/CreateRestoreModal.svelte
deleted file mode 100644
index 62ef3e239d..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/CreateRestoreModal.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import { ModalContent, Input, Body } from "@budibase/bbui"
-  import { auth } from "stores/portal"
-
-  export let confirm
-
-  let templateName = $auth.user.firstName
-    ? `${$auth.user.firstName}'s Backup`
-    : "Restore Backup"
-  let name = templateName
-</script>
-
-<ModalContent
-  onConfirm={() => confirm(name)}
-  title="Back up your current version"
-  confirmText="Confirm Restore"
-  disabled={!name}
->
-  <Body size="S"
-    >Create a backup of your current app to allow you to roll back after
-    restoring this backup</Body
-  >
-  <Input label="Backup name" bind:value={name} />
-</ModalContent>
-
-<style>
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/DatasourceRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/DatasourceRenderer.svelte
deleted file mode 100644
index 198339dae9..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/DatasourceRenderer.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { Icon } from "@budibase/bbui"
-
-  export let value
-</script>
-
-<div class="cell">
-  {#if value != null}
-    <Icon name="Data" />
-    <div>{value || 0}</div>
-  {/if}
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/StatusRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/StatusRenderer.svelte
deleted file mode 100644
index 3b3cce731d..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/StatusRenderer.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import { Badge } from "@budibase/bbui"
-
-  export let value = "started"
-  $: status = value[0].toUpperCase() + value?.slice(1)
-</script>
-
-<Badge
-  grey={value === "started" || value === "pending"}
-  green={value === "complete"}
-  red={value === "failed"}
-  size="S"
->
-  {status}
-</Badge>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TimeAgoRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TimeAgoRenderer.svelte
deleted file mode 100644
index fd67b4010b..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TimeAgoRenderer.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-  import dayjs from "dayjs"
-  import relativeTime from "dayjs/plugin/relativeTime"
-
-  dayjs.extend(relativeTime)
-
-  export let value
-</script>
-
-<span title={value}>{dayjs(value).fromNow()}</span>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TypeRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TypeRenderer.svelte
deleted file mode 100644
index 86ad0f3d4e..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TypeRenderer.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  import { BackupTrigger } from "constants/backend/backups"
-  export let row
-
-  $: trigger = row?.trigger || "manual"
-  $: type = row?.type || "backup"
-
-  function printTrigger(trig) {
-    let final = "undefined"
-    switch (trig) {
-      case BackupTrigger.PUBLISH:
-        final = "published"
-        break
-      case BackupTrigger.RESTORING:
-        final = "pre-restore"
-        break
-      default:
-        final = trig
-        break
-    }
-    return final.charAt(0).toUpperCase() + final.slice(1)
-  }
-</script>
-
-<div class="cell">
-  {printTrigger(trigger)}
-  {type}
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte
deleted file mode 100644
index 399877a801..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-  import { UserAvatar } from "@budibase/frontend-core"
-
-  export let value
-</script>
-
-<div class="cell">
-  <UserAvatar user={value} />
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
deleted file mode 100644
index 77d76c9609..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
+++ /dev/null
@@ -1,344 +0,0 @@
-<script>
-  import {
-    Button,
-    DatePicker,
-    Divider,
-    Layout,
-    notifications,
-    Pagination,
-    Select,
-    Heading,
-    Body,
-    Tags,
-    Tag,
-    Table,
-  } from "@budibase/bbui"
-  import { backups, licensing, auth, admin, overview } from "stores/portal"
-  import { createPaginationStore } from "helpers/pagination"
-  import TimeAgoRenderer from "./_components/TimeAgoRenderer.svelte"
-  import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
-  import ActionsRenderer from "./_components/ActionsRenderer.svelte"
-  import UserRenderer from "./_components/UserRenderer.svelte"
-  import StatusRenderer from "./_components/StatusRenderer.svelte"
-  import TypeRenderer from "./_components/TypeRenderer.svelte"
-  import BackupsDefault from "assets/backups-default.png"
-  import { BackupTrigger, BackupType } from "constants/backend/backups"
-  import { onMount } from "svelte"
-
-  let loading = true
-  let backupData = null
-  let pageInfo = createPaginationStore()
-  let filterOpt = null
-  let startDate = null
-  let endDate = null
-  let filters = [
-    {
-      label: "Manual backup",
-      value: { type: BackupType.BACKUP, trigger: BackupTrigger.MANUAL },
-    },
-    {
-      label: "Published backup",
-      value: { type: BackupType.BACKUP, trigger: BackupTrigger.PUBLISH },
-    },
-    {
-      label: "Pre-restore backup",
-      value: { type: BackupType.BACKUP, trigger: BackupTrigger.RESTORING },
-    },
-    {
-      label: "Manual restore",
-      value: { type: BackupType.RESTORE, trigger: BackupTrigger.MANUAL },
-    },
-  ]
-
-  $: app = $overview.selectedApp
-  $: page = $pageInfo.page
-  $: fetchBackups(filterOpt, page, startDate, endDate)
-
-  let schema = {
-    type: {
-      displayName: "Type",
-      width: "auto",
-    },
-    createdAt: {
-      displayName: "Date",
-      width: "auto",
-    },
-    appSize: {
-      displayName: "App size",
-      width: "auto",
-    },
-    createdBy: {
-      displayName: "User",
-      width: "auto",
-    },
-    status: {
-      displayName: "Status",
-      width: "auto",
-    },
-    actions: {
-      displayName: null,
-      width: "auto",
-    },
-  }
-
-  const customRenderers = [
-    { column: "appSize", component: AppSizeRenderer },
-    { column: "actions", component: ActionsRenderer },
-    { column: "createdAt", component: TimeAgoRenderer },
-    { column: "createdBy", component: UserRenderer },
-    { column: "status", component: StatusRenderer },
-    { column: "type", component: TypeRenderer },
-  ]
-
-  function flattenBackups(backups) {
-    return backups.map(backup => {
-      return {
-        ...backup,
-        ...backup?.contents,
-      }
-    })
-  }
-
-  async function fetchBackups(filters, page, startDate, endDate) {
-    const response = await backups.searchBackups({
-      appId: app.instance._id,
-      ...filters,
-      page,
-      startDate,
-      endDate,
-    })
-    pageInfo.fetched(response.hasNextPage, response.nextPage)
-
-    // flatten so we have an easier structure to use for the table schema
-    backupData = flattenBackups(response.data)
-  }
-
-  async function createManualBackup() {
-    try {
-      loading = true
-      let response = await backups.createManualBackup({
-        appId: app.instance._id,
-      })
-      await fetchBackups(filterOpt, page)
-      notifications.success(response.message)
-    } catch {
-      notifications.error("Unable to create backup")
-    }
-  }
-
-  const poll = backupData => {
-    if (backupData === null) {
-      return
-    }
-
-    if (backupData.some(datum => datum.status === "started")) {
-      setTimeout(() => fetchBackups(filterOpt, page), 2000)
-    } else {
-      loading = false
-    }
-  }
-
-  $: poll(backupData)
-
-  async function handleButtonClick({ detail }) {
-    if (detail.type === "backupDelete") {
-      await backups.deleteBackup({
-        appId: app.instance._id,
-        backupId: detail.backupId,
-      })
-      await fetchBackups(filterOpt, page)
-    } else if (detail.type === "backupRestore") {
-      await backups.restoreBackup({
-        appId: app.instance._id,
-        backupId: detail.backupId,
-        name: detail.restoreBackupName,
-      })
-      await fetchBackups(filterOpt, page)
-    } else if (detail.type === "backupUpdate") {
-      await backups.updateBackup({
-        appId: app.instance._id,
-        backupId: detail.backupId,
-        name: detail.name,
-      })
-      await fetchBackups(filterOpt, page)
-    }
-  }
-
-  onMount(async () => {
-    await fetchBackups(filterOpt, page, startDate, endDate)
-    loading = false
-  })
-</script>
-
-<Layout noPadding>
-  <Layout gap="XS" noPadding>
-    <div class="title">
-      <Heading>Backups</Heading>
-      {#if !$licensing.backupsEnabled}
-        <Tags>
-          <Tag icon="LockClosed">Premium</Tag>
-        </Tags>
-      {/if}
-    </div>
-    <Body>Back up your apps and restore them to their previous state</Body>
-  </Layout>
-  <Divider />
-
-  {#if !$licensing.backupsEnabled}
-    {#if !$auth.accountPortalAccess && $admin.cloud}
-      <Body>Contact your account holder to upgrade your plan.</Body>
-    {/if}
-    <div class="pro-buttons">
-      {#if $auth.accountPortalAccess}
-        <Button
-          primary
-          disabled={!$auth.accountPortalAccess && $admin.cloud}
-          on:click={$licensing.goToUpgradePage()}
-        >
-          Upgrade
-        </Button>
-      {/if}
-      <Button
-        secondary
-        on:click={() => {
-          window.open("https://budibase.com/pricing/", "_blank")
-        }}
-      >
-        View plans
-      </Button>
-    </div>
-  {:else if !backupData?.length && !loading && !filterOpt && !startDate}
-    <div class="center">
-      <Layout noPadding gap="S" justifyItems="center">
-        <img height="130px" src={BackupsDefault} alt="BackupsDefault" />
-        <Layout noPadding gap="XS">
-          <Heading>You have no backups yet</Heading>
-          <Body>You can manually back up your app any time</Body>
-        </Layout>
-        <div>
-          <Button cta disabled={loading} on:click={createManualBackup}>
-            Create backup
-          </Button>
-        </div>
-      </Layout>
-    </div>
-  {:else}
-    <Layout noPadding gap="M" alignContent="start">
-      <div class="controls">
-        <div class="search">
-          <div class="select">
-            <Select
-              placeholder="All"
-              label="Type"
-              options={filters}
-              getOptionValue={filter => filter.value}
-              getOptionLabel={filter => filter.label}
-              bind:value={filterOpt}
-            />
-          </div>
-          <DatePicker
-            range={true}
-            label="Date Range"
-            on:change={e => {
-              if (e.detail[0].length > 1) {
-                startDate = e.detail[0][0].toISOString()
-                endDate = e.detail[0][1].toISOString()
-              }
-            }}
-          />
-        </div>
-        <div>
-          <Button cta disabled={loading} on:click={createManualBackup}
-            >Create new backup</Button
-          >
-        </div>
-      </div>
-      <div class="table">
-        <Table
-          {schema}
-          disableSorting
-          allowSelectRows={false}
-          allowEditColumns={false}
-          allowEditRows={false}
-          data={backupData}
-          {customRenderers}
-          placeholderText="No backups found"
-          border={false}
-          on:buttonclick={handleButtonClick}
-        />
-        <div class="pagination">
-          <Pagination
-            page={$pageInfo.pageNumber}
-            hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
-            hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
-            goToPrevPage={pageInfo.prevPage}
-            goToNextPage={pageInfo.nextPage}
-          />
-        </div>
-      </div>
-    </Layout>
-  {/if}
-</Layout>
-
-<style>
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xl);
-  }
-
-  .controls {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-end;
-    gap: var(--spacing-xl);
-    flex-wrap: wrap;
-  }
-
-  .search {
-    flex: 1 1 auto;
-    display: flex;
-    gap: var(--spacing-xl);
-    align-items: flex-end;
-  }
-  .search :global(.spectrum-InputGroup) {
-    min-width: 100px;
-  }
-
-  .select {
-    flex-basis: 160px;
-    width: 0;
-    min-width: 100px;
-  }
-
-  .pagination {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin-top: var(--spacing-xl);
-  }
-
-  .title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-
-  .pro-buttons {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-
-  .table {
-    overflow-x: scroll;
-  }
-
-  .center {
-    text-align: center;
-    display: contents;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte
deleted file mode 100644
index 437a0663c0..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<script>
-  import { redirect } from "@roxi/routify"
-  $redirect("./overview")
-</script>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/name-and-url.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/name-and-url.svelte
deleted file mode 100644
index e6e437859b..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/name-and-url.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script>
-  import {
-    Layout,
-    Divider,
-    Heading,
-    Body,
-    Button,
-    Label,
-    Modal,
-    Icon,
-  } from "@budibase/bbui"
-  import { AppStatus } from "constants"
-  import { overview } from "stores/portal"
-  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
-
-  let updatingModal
-
-  $: app = $overview.selectedApp
-  $: appUrl = `${window.origin}/app${app?.url}`
-  $: appDeployed = app?.status === AppStatus.DEPLOYED
-</script>
-
-<Layout noPadding>
-  <Layout gap="XS" noPadding>
-    <Heading>Name and URL</Heading>
-    <Body>Edit your app's name and URL</Body>
-  </Layout>
-  <Divider />
-
-  <Layout noPadding gap="XXS">
-    <Label size="L">Name</Label>
-    <Body>{app?.name}</Body>
-  </Layout>
-
-  <Layout noPadding gap="XS">
-    <Label size="L">Icon</Label>
-    <div class="icon">
-      <Icon
-        size="L"
-        name={app?.icon?.name || "Apps"}
-        color={app?.icon?.color}
-      />
-    </div>
-  </Layout>
-
-  <Layout noPadding gap="XXS">
-    <Label size="L">URL</Label>
-    <Body>{appUrl}</Body>
-  </Layout>
-
-  <div>
-    <Button
-      cta
-      on:click={() => {
-        updatingModal.show()
-      }}
-      disabled={appDeployed}
-      tooltip={appDeployed
-        ? "You must unpublish your app to make changes to these settings"
-        : null}
-      icon={appDeployed ? "HelpOutline" : null}
-    >
-      Edit
-    </Button>
-  </div>
-</Layout>
-
-<Modal bind:this={updatingModal} padding={false} width="600px">
-  <UpdateAppModal app={$overview.selectedApp} />
-</Modal>
-
-<style>
-  .icon {
-    display: flex;
-    justify-content: flex-start;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte
deleted file mode 100644
index 0932d2d79a..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte
+++ /dev/null
@@ -1,368 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import DashCard from "components/common/DashCard.svelte"
-  import { AppStatus } from "constants"
-  import { goto } from "@roxi/routify"
-  import {
-    Icon,
-    Heading,
-    Link,
-    Layout,
-    Body,
-    notifications,
-  } from "@budibase/bbui"
-  import { store } from "builderStore"
-  import { processStringSync } from "@budibase/string-templates"
-  import { users, auth, apps, groups, overview } from "stores/portal"
-  import { fetchData, UserAvatar } from "@budibase/frontend-core"
-  import { API } from "api"
-  import GroupIcon from "../../users/groups/_components/GroupIcon.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { checkIncomingDeploymentStatus } from "components/deploy/utils"
-
-  let appEditor
-  let unpublishModal
-  let deployments
-
-  $: app = $overview.selectedApp
-  $: devAppId = app.devId
-  $: prodAppId = apps.getProdAppID(devAppId)
-  $: appUsersFetch = fetchData({
-    API,
-    datasource: {
-      type: "user",
-    },
-    options: {
-      query: {
-        appId: apps.getProdAppID(devAppId),
-      },
-    },
-  })
-  $: updateAvailable = $store.upgradableVersion !== $store.version
-  $: isPublished = app?.status === AppStatus.DEPLOYED
-  $: appEditorId = !app?.updatedBy ? $auth.user._id : app?.updatedBy
-  $: appEditorText = appEditor?.firstName || appEditor?.email
-  $: fetchAppEditor(appEditorId)
-  $: appUsers = $appUsersFetch.rows || []
-  $: appGroups = $groups.filter(group => {
-    if (!group.roles) {
-      return false
-    }
-    return groups.actions.getGroupAppIds(group).includes(prodAppId)
-  })
-
-  const updateDeploymentString = () => {
-    return deployments?.length
-      ? processStringSync(
-          "Last published {{ duration time 'millisecond' }} ago",
-          {
-            time:
-              new Date().getTime() -
-              new Date(deployments[0].updatedAt).getTime(),
-          }
-        )
-      : ""
-  }
-  // App is updating in the layout asynchronously
-  $: if ($store.appId?.length) {
-    fetchDeployments().then(resp => {
-      deployments = resp
-    })
-  }
-  $: deploymentString = updateDeploymentString(deployments)
-
-  async function fetchAppEditor(editorId) {
-    appEditor = await users.get(editorId)
-  }
-
-  const confirmUnpublishApp = async () => {
-    try {
-      await API.unpublishApp(app.prodId)
-      await apps.load()
-      notifications.success("App unpublished successfully")
-    } catch (err) {
-      notifications.error("Error unpublishing app")
-    }
-  }
-
-  const reviewPendingDeployments = (deployments, newDeployments) => {
-    if (deployments?.length > 0) {
-      const pending = checkIncomingDeploymentStatus(deployments, newDeployments)
-      if (pending.length) {
-        notifications.warning(
-          "Deployment has been queued and will be processed shortly"
-        )
-      }
-    }
-  }
-  async function fetchDeployments() {
-    try {
-      const newDeployments = await API.getAppDeployments()
-      reviewPendingDeployments(deployments, newDeployments)
-      return newDeployments
-    } catch (err) {
-      console.log(err)
-      notifications.error("Error fetching deployment history")
-    }
-  }
-
-  onMount(async () => {
-    deployments = await fetchDeployments()
-  })
-</script>
-
-<div class="overview-tab">
-  <Layout noPadding gap="XL">
-    <div class="top">
-      <DashCard title={"App Status"}>
-        <div class="status-content">
-          <div class="status-display">
-            {#if isPublished}
-              <Icon name="GlobeCheck" size="XL" disabled={false} />
-              <span>Published</span>
-            {:else}
-              <Icon name="GlobeStrike" size="XL" disabled={true} />
-              <span class="disabled">Unpublished</span>
-            {/if}
-          </div>
-
-          <div class="status-text">
-            {#if isPublished}
-              {deploymentString}
-              - <Link on:click={unpublishModal.show}>Unpublish</Link>
-            {/if}
-
-            {#if !deployments?.length}
-              -
-            {/if}
-          </div>
-        </div>
-      </DashCard>
-      {#if appEditor}
-        <DashCard title={"Last Edited"}>
-          <div class="last-edited-content">
-            <div class="updated-by">
-              {#if appEditor}
-                <UserAvatar user={appEditor} showTooltip={false} />
-                <div class="editor-name">
-                  {appEditor._id === $auth.user._id ? "You" : appEditorText}
-                </div>
-              {/if}
-            </div>
-            <div class="last-edit-text">
-              {#if app}
-                {processStringSync(
-                  "Last edited {{ duration time 'millisecond' }} ago",
-                  {
-                    time:
-                      new Date().getTime() - new Date(app?.updatedAt).getTime(),
-                  }
-                )}
-              {/if}
-            </div>
-          </div>
-        </DashCard>
-      {/if}
-      <DashCard
-        title={"Version"}
-        showIcon={true}
-        action={() => {
-          $goto("./version")
-        }}
-      >
-        <div class="version-content">
-          <Heading size="XS">{$store.version}</Heading>
-          {#if updateAvailable}
-            <div class="version-status">
-              New version <strong>{$store.upgradableVersion}</strong> is
-              available -
-              <Link
-                on:click={() => {
-                  $goto("./version")
-                }}
-              >
-                Update
-              </Link>
-            </div>
-          {:else}
-            <div class="version-status">You're running the latest!</div>
-          {/if}
-        </div>
-      </DashCard>
-      {#if $appUsersFetch.loaded}
-        <DashCard
-          title={"Access"}
-          showIcon={true}
-          action={() => {
-            $goto("./access")
-          }}
-        >
-          {#if appUsers.length || appGroups.length}
-            <Layout noPadding gap="S">
-              <div class="access-tab-content">
-                {#if appUsers.length}
-                  <div class="users">
-                    <div class="list">
-                      {#each appUsers.slice(0, 4) as user}
-                        <UserAvatar {user} />
-                      {/each}
-                    </div>
-                    <div class="text">
-                      {appUsers.length}
-                      {appUsers.length > 1 ? "users" : "user"} assigned
-                    </div>
-                  </div>
-                {/if}
-                {#if appGroups.length}
-                  <div class="groups">
-                    <div class="list">
-                      {#each appGroups.slice(0, 4) as group}
-                        <GroupIcon {group} />
-                      {/each}
-                    </div>
-                    <div class="text">
-                      {appGroups.length} user
-                      {appGroups.length > 1 ? "groups" : "group"} assigned
-                    </div>
-                  </div>
-                {/if}
-              </div>
-            </Layout>
-          {:else}
-            <Layout noPadding gap="S">
-              <Body>No users</Body>
-              <div class="users-text">
-                No users have been assigned to this app
-              </div>
-            </Layout>
-          {/if}
-        </DashCard>
-      {/if}
-    </div>
-    {#if false}
-      <div class="bottom">
-        <DashCard
-          title={"Automation History"}
-          action={() => {
-            $goto("../automation-history")
-          }}
-        >
-          <div class="automation-content">
-            <div class="automation-metrics">
-              <div class="succeeded">
-                <Heading size="XL">0</Heading>
-                <div class="metric-info">
-                  <Icon name="CheckmarkCircle" />
-                  Success
-                </div>
-              </div>
-              <div class="failed">
-                <Heading size="XL">0</Heading>
-                <div class="metric-info">
-                  <Icon name="Alert" />
-                  Error
-                </div>
-              </div>
-            </div>
-          </div>
-        </DashCard>
-        <DashCard
-          title={"Backups"}
-          action={() => {
-            $goto("../backups")
-          }}
-        >
-          <div class="backups-content">test</div>
-        </DashCard>
-      </div>
-    {/if}
-  </Layout>
-</div>
-
-<ConfirmDialog
-  bind:this={unpublishModal}
-  title="Confirm unpublish"
-  okText="Unpublish app"
-  onOk={confirmUnpublishApp}
->
-  Are you sure you want to unpublish the app <b>{app?.name}</b>?
-</ConfirmDialog>
-
-<style>
-  .overview-tab {
-    display: grid;
-  }
-
-  .overview-tab .top {
-    display: grid;
-    grid-gap: var(--spectrum-alias-grid-gutter-medium);
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  }
-
-  .access-tab-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: var(--spacing-xl);
-    flex-wrap: wrap;
-  }
-  .access-tab-content > * {
-    flex: 1 1 0;
-  }
-  .access-tab-content .list {
-    display: flex;
-    gap: 4px;
-  }
-  .access-tab-content .text {
-    color: var(--spectrum-global-color-gray-600);
-    margin-top: var(--spacing-xl);
-  }
-
-  .overview-tab .bottom,
-  .automation-metrics {
-    display: grid;
-    grid-gap: var(--spectrum-alias-grid-gutter-large);
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .status-display {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-
-  .status-text,
-  .last-edit-text {
-    color: var(--spectrum-global-color-gray-600);
-  }
-
-  .updated-by {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-
-  .succeeded :global(.icon) {
-    color: var(--spectrum-global-color-green-600);
-  }
-
-  .failed :global(.icon) {
-    color: var(
-      --spectrum-semantic-negative-color-default,
-      var(--spectrum-global-color-red-500)
-    );
-  }
-
-  .metric-info {
-    display: flex;
-    gap: var(--spacing-l);
-    margin-top: var(--spacing-s);
-  }
-
-  .version-status,
-  .last-edit-text,
-  .status-text {
-    padding-top: var(--spacing-xl);
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/version.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/version.svelte
deleted file mode 100644
index 723e32984d..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/version.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-  import { Layout, Heading, Body, Divider, Button } from "@budibase/bbui"
-  import { store } from "builderStore"
-  import VersionModal from "components/deploy/VersionModal.svelte"
-
-  let versionModal
-
-  $: updateAvailable = $store.upgradableVersion !== $store.version
-</script>
-
-<Layout noPadding>
-  <Layout gap="XS" noPadding>
-    <Heading>Version</Heading>
-    <Body>See the current version of your app and check for updates</Body>
-  </Layout>
-  <Divider />
-  {#if updateAvailable}
-    <Body>
-      The app is currently using version <strong>{$store.version}</strong>
-      but version <strong>{$store.upgradableVersion}</strong> is available.
-      <br />
-      Updates can contain new features, performance improvements and bug fixes.
-    </Body>
-    <div>
-      <Button cta on:click={versionModal.show}>Update app</Button>
-    </div>
-  {:else}
-    <Body>
-      The app is currently using version <strong>{$store.version}</strong>.
-      <br />
-      You're running the latest!
-    </Body>
-    <div>
-      <Button secondary on:click={versionModal.show}>Revert app</Button>
-    </div>
-  {/if}
-</Layout>
-
-<VersionModal bind:this={versionModal} hideIcon={true} />
diff --git a/packages/builder/src/pages/builder/portal/overview/_layout.svelte b/packages/builder/src/pages/builder/portal/overview/_layout.svelte
deleted file mode 100644
index 2157840bbc..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/_layout.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import { groups } from "stores/portal"
-  import { onMount } from "svelte"
-
-  let loaded = false
-
-  onMount(async () => {
-    await groups.actions.init()
-    loaded = true
-  })
-</script>
-
-{#if loaded}
-  <slot />
-{/if}
diff --git a/packages/builder/src/pages/builder/portal/overview/index.svelte b/packages/builder/src/pages/builder/portal/overview/index.svelte
deleted file mode 100644
index 6881a9ca67..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/index.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<script>
-  import { redirect } from "@roxi/routify"
-  $redirect("../")
-</script>
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index f9ecb495d1..8c6c20f258 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -46,6 +46,7 @@
 
   let dataLoaded = false
   let permissionError = false
+  let embedNoScreens = false
 
   // Determine if we should show devtools or not
   $: showDevTools = $devToolsEnabled && !$routeStore.queryParams?.peek
@@ -68,6 +69,8 @@
         // If the user is logged in but has no screens, they don't have
         // permission to use the app
         permissionError = true
+      } else if ($appStore.embedded) {
+        embedNoScreens = true
       } else {
         // If they have no screens and are not logged in, it probably means
         // they should log in to gain access
@@ -86,7 +89,10 @@
     if (get(builderStore).inBuilder) {
       builderStore.actions.notifyLoaded()
     } else {
-      builderStore.actions.analyticsPing({ source: "app" })
+      builderStore.actions.analyticsPing({
+        source: "app",
+        ...{ embedded: $appStore.embedded || undefined },
+      })
     }
   })
 </script>
@@ -158,6 +164,15 @@
                           </Body>
                         </Layout>
                       </div>
+                    {:else if embedNoScreens}
+                      <div class="error">
+                        <Layout justifyItems="center" gap="S">
+                          {@html ErrorSVG}
+                          <Heading size="L">
+                            Your application could not be loaded
+                          </Heading>
+                        </Layout>
+                      </div>
                     {:else}
                       <CustomThemeWrapper>
                         {#key $screenStore.activeLayout._id}
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index ba5bbedd2f..c1dec0b119 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -34,6 +34,8 @@
   export let navWidth
   export let pageWidth
 
+  export let embedded = false
+
   const NavigationClasses = {
     Top: "top",
     Left: "left",
@@ -186,9 +188,11 @@
                   <Heading size="S">{title}</Heading>
                 {/if}
               </div>
-              <div class="portal">
-                <Icon hoverable name="Apps" on:click={navigateToPortal} />
-              </div>
+              {#if !embedded}
+                <div class="portal">
+                  <Icon hoverable name="Apps" on:click={navigateToPortal} />
+                </div>
+              {/if}
             </div>
             <div
               class="mobile-click-handler"
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index ef4e6dcefb..a95ec24746 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -45,6 +45,9 @@ const loadBudibase = async () => {
   // server rendered app HTML
   appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"])
 
+  // Set the flag used to determine if the app is being loaded via an iframe
+  appStore.actions.setAppEmbedded(window["##BUDIBASE_APP_EMBEDDED##"] == "true")
+
   // Fetch environment info
   if (!get(environmentStore)?.loaded) {
     await environmentStore.actions.fetchEnvironment()
diff --git a/packages/client/src/stores/app.js b/packages/client/src/stores/app.js
index f3fd271639..ea20b23131 100644
--- a/packages/client/src/stores/app.js
+++ b/packages/client/src/stores/app.js
@@ -5,6 +5,7 @@ const initialState = {
   appId: null,
   isDevApp: false,
   clientLoadTime: window.INIT_TIME ? Date.now() - window.INIT_TIME : null,
+  embedded: false,
 }
 
 const createAppStore = () => {
@@ -46,9 +47,20 @@ const createAppStore = () => {
     })
   }
 
+  const setAppEmbedded = embeddded => {
+    store.update(state => {
+      if (state) {
+        state.embedded = embeddded
+      } else {
+        state = { embeddded }
+      }
+      return state
+    })
+  }
+
   return {
     subscribe: derivedStore.subscribe,
-    actions: { setAppId, fetchAppDefinition },
+    actions: { setAppId, setAppEmbedded, fetchAppDefinition },
   }
 }
 
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index b82b032617..23d789dc2c 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -53,9 +53,9 @@ const createBuilderStore = () => {
     notifyLoaded: () => {
       eventStore.actions.dispatchEvent("preview-loaded")
     },
-    analyticsPing: async () => {
+    analyticsPing: async ({ embedded }) => {
       try {
-        await API.analyticsPing({ source: "app" })
+        await API.analyticsPing({ source: "app", embedded })
       } catch (error) {
         // Do nothing
       }
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index ba373ad8e0..9cb0d536de 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -33,7 +33,6 @@ const createScreenStore = () => {
     ]) => {
       let activeLayout, activeScreen
       let screens
-
       if ($builderStore.inBuilder) {
         // Use builder defined definitions if inside the builder preview
         activeScreen = Helpers.cloneDeep($builderStore.screen)
@@ -175,10 +174,10 @@ const createScreenStore = () => {
               },
             ],
             ...navigationSettings,
+            embedded: $appStore.embedded,
           },
         }
       }
-
       return { screens, activeLayout, activeScreen }
     }
   )
diff --git a/packages/frontend-core/src/api/analytics.js b/packages/frontend-core/src/api/analytics.js
index 653943c6ab..df56bc938e 100644
--- a/packages/frontend-core/src/api/analytics.js
+++ b/packages/frontend-core/src/api/analytics.js
@@ -7,11 +7,11 @@ export const buildAnalyticsEndpoints = API => ({
       url: "/api/bbtel",
     })
   },
-  analyticsPing: async ({ source }) => {
+  analyticsPing: async ({ source, embedded }) => {
     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
     return await API.post({
       url: "/api/bbtel/ping",
-      body: { source, timezone },
+      body: { source, timezone, embedded },
     })
   },
 })
diff --git a/packages/server/src/api/controllers/analytics.ts b/packages/server/src/api/controllers/analytics.ts
index 6c80593d5d..dc7c4185bb 100644
--- a/packages/server/src/api/controllers/analytics.ts
+++ b/packages/server/src/api/controllers/analytics.ts
@@ -12,6 +12,7 @@ export const isEnabled = async (ctx: any) => {
 
 export const ping = async (ctx: any) => {
   const body = ctx.request.body as AnalyticsPingRequest
+
   switch (body.source) {
     case PingSource.APP: {
       const db = context.getAppDB({ skip_setup: true })
@@ -21,7 +22,7 @@ export const ping = async (ctx: any) => {
       if (isDevAppID(appId)) {
         await events.serve.servedAppPreview(appInfo, body.timezone)
       } else {
-        await events.serve.servedApp(appInfo, body.timezone)
+        await events.serve.servedApp(appInfo, body.timezone, body.embedded)
       }
       break
     }
diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts
index 49d2abfc79..fe3f653051 100644
--- a/packages/server/src/api/controllers/static/index.ts
+++ b/packages/server/src/api/controllers/static/index.ts
@@ -100,6 +100,10 @@ export const deleteObjects = async function (ctx: any) {
 }
 
 export const serveApp = async function (ctx: any) {
+  const bbHeaderEmbed = ctx.request.get("x-budibase-embed")
+    ? ctx.get("x-budibase-embed").toLowerCase() == "true"
+    : false
+
   //Public Settings
   const { config } = await configs.getSettingsConfigDoc()
   const branding = await pro.branding.getBrandingConfig(config)
@@ -140,6 +144,7 @@ export const serveApp = async function (ctx: any) {
         body: html,
         style: css.code,
         appId,
+        embedded: bbHeaderEmbed,
       })
     } else {
       // just return the app info for jest to assert on
diff --git a/packages/server/src/api/controllers/static/templates/app.hbs b/packages/server/src/api/controllers/static/templates/app.hbs
index 1109b76cea..e55ab08e84 100644
--- a/packages/server/src/api/controllers/static/templates/app.hbs
+++ b/packages/server/src/api/controllers/static/templates/app.hbs
@@ -1,4 +1,3 @@
-<!doctype html>
 <html>
 
   <head>
@@ -7,6 +6,7 @@
 
   <script>
     window["##BUDIBASE_APP_ID##"] = "{{appId}}"
+    window["##BUDIBASE_APP_EMBEDDED##"] = "{{embedded}}"
   </script>
 
   {{{body}}}
diff --git a/packages/types/src/api/web/analytics.ts b/packages/types/src/api/web/analytics.ts
index 018c85ded2..172aeb8dd4 100644
--- a/packages/types/src/api/web/analytics.ts
+++ b/packages/types/src/api/web/analytics.ts
@@ -6,4 +6,5 @@ export enum PingSource {
 export interface AnalyticsPingRequest {
   source: PingSource
   timezone: string
+  embedded?: boolean
 }
diff --git a/packages/types/src/sdk/events/serve.ts b/packages/types/src/sdk/events/serve.ts
index cb03c47e05..7b81a0e195 100644
--- a/packages/types/src/sdk/events/serve.ts
+++ b/packages/types/src/sdk/events/serve.ts
@@ -7,6 +7,7 @@ export interface BuilderServedEvent extends BaseEvent {
 export interface AppServedEvent extends BaseEvent {
   appVersion: string
   timezone: string
+  embed?: boolean
 }
 
 export interface AppPreviewServedEvent extends BaseEvent {

From 602ea9bc4ef976bf01e72ba96943db83cfdbbe73 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 20 Jun 2023 12:33:18 +0100
Subject: [PATCH 10/18] General tidying and refactoring. Updated the publish
 button behaviour to also take into account revert and version update
 behaviours.

---
 .../commandPalette/CommandPalette.svelte      |   4 +-
 .../src/components/deploy/AppActions.svelte   | 137 +++++++++++++++++-
 .../src/components/deploy/RevertModal.svelte  |   3 +-
 .../src/components/deploy/VersionModal.svelte |   2 +
 .../builder/app/[application]/_layout.svelte  |  26 +++-
 .../app/[application]/settings/_layout.svelte |   2 +-
 .../app/[application]/settings/index.svelte   |   6 -
 .../settings/name-and-url.svelte              |   3 -
 .../pages/builder/portal/apps/index.svelte    |   1 -
 .../portal/users/groups/[groupId].svelte      |   2 +-
 .../portal/users/users/[userId].svelte        |   2 +-
 packages/builder/src/stores/portal/index.js   |   1 -
 packages/server/src/middleware/builder.ts     |   6 -
 13 files changed, 159 insertions(+), 36 deletions(-)

diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index 3a369446a3..5421e2f123 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/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",
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 84feb4f189..def44646dd 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/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;
diff --git a/packages/builder/src/components/deploy/RevertModal.svelte b/packages/builder/src/components/deploy/RevertModal.svelte
index a36ecb0b79..4b454e57e0 100644
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/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}`)
     }
diff --git a/packages/builder/src/components/deploy/VersionModal.svelte b/packages/builder/src/components/deploy/VersionModal.svelte
index 918587a55c..f56f0e863b 100644
--- a/packages/builder/src/components/deploy/VersionModal.svelte
+++ b/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}`)
     }
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 8c79d0e80b..a0502ef66c 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/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 {
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index 1971d3bc61..3a23319348 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/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;
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
index df88627420..d72183bbc8 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
+++ b/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>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
index 8228739287..56a10553dc 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
+++ b/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)
   }
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index f2ea7b3896..42b664cc45 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/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 => {
diff --git a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
index 4b0c6974e5..3482b9a88f 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
+++ b/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>
diff --git a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
index e2ac6c40b8..ec556abf72 100644
--- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
+++ b/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">
diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js
index 7f5ce980fa..a7c430e621 100644
--- a/packages/builder/src/stores/portal/index.js
+++ b/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"
diff --git a/packages/server/src/middleware/builder.ts b/packages/server/src/middleware/builder.ts
index 31c4da127c..b9481e60e2 100644
--- a/packages/server/src/middleware/builder.ts
+++ b/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

From 3607774d7ebb6d2eac9fcbf5f3f6fa63feb64763 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 20 Jun 2023 14:29:10 +0100
Subject: [PATCH 11/18] Added camera permission to the default embed iframe

---
 .../src/pages/builder/app/[application]/settings/embed.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
index 9b19f03fe9..10d03d78b4 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -18,7 +18,7 @@
   $: appUrl = `${window.origin}/embed${app?.url}`
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
-  $: embed = `<iframe width="800" height="600" frameborder="0" allow="clipboard-write" src="${appUrl}" ></iframe>`
+  $: embed = `<iframe width="800" height="600" frameborder="0" allow="clipboard-write;camera" src="${appUrl}" ></iframe>`
 </script>
 
 <Layout noPadding>

From f178b862666d09a829f30fb078182e35254ff822 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 20 Jun 2023 15:02:53 +0100
Subject: [PATCH 12/18] Linting

---
 .../builder/src/components/deploy/AppActions.svelte    |  8 +++-----
 .../builder/src/components/deploy/DeleteModal.svelte   |  2 +-
 .../builder/src/components/deploy/RevertModal.svelte   |  9 +--------
 .../src/pages/builder/app/[application]/_layout.svelte |  3 ---
 .../builder/app/[application]/settings/_layout.svelte  | 10 ++--------
 .../builder/app/[application]/settings/export.svelte   |  3 ---
 .../builder/app/[application]/settings/index.svelte    |  9 +--------
 7 files changed, 8 insertions(+), 36 deletions(-)

diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index def44646dd..1de5a4a798 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -3,7 +3,6 @@
     notifications,
     Popover,
     Layout,
-    Heading,
     Body,
     Button,
     ActionButton,
@@ -22,7 +21,6 @@
   import { checkIncomingDeploymentStatus } from "components/deploy/utils"
   import { API } from "api"
   import { onMount } from "svelte"
-  import DeployModal from "components/deploy/DeployModal.svelte"
   import { apps } from "stores/portal"
   import {
     store,
@@ -31,7 +29,7 @@
   } 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 { goto } from "@roxi/routify"
   import { isEqual, cloneDeep } from "lodash"
 
   export let application
@@ -79,7 +77,7 @@
   let appMetaUpdated = false
   let appMetaInitialised = false
 
-  const unsub = store.subscribe(state => {
+  store.subscribe(state => {
     let { name, url: appUrl, navigation, theme, customTheme, icon } = state
     const update = {
       name,
@@ -218,7 +216,7 @@
     try {
       publishing = true
 
-      let published = await API.publishAppChanges($store.appId)
+      await API.publishAppChanges($store.appId)
 
       notifications.send("App published", {
         type: "success",
diff --git a/packages/builder/src/components/deploy/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
index 9b22fe5b94..d2c8308971 100644
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Layout, Input, notifications } from "@budibase/bbui"
+  import { Input, notifications } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
diff --git a/packages/builder/src/components/deploy/RevertModal.svelte b/packages/builder/src/components/deploy/RevertModal.svelte
index 4b454e57e0..79b1f5300f 100644
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@@ -1,12 +1,5 @@
 <script>
-  import {
-    Input,
-    Modal,
-    notifications,
-    ModalContent,
-    ActionButton,
-    Link,
-  } from "@budibase/bbui"
+  import { Input, Modal, notifications, ModalContent } from "@budibase/bbui"
   import { store } from "builderStore"
   import { API } from "api"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index a0502ef66c..5a22c8bbef 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -4,15 +4,12 @@
   import { auth } from "stores/portal"
   import { TENANT_FEATURE_FLAGS, isEnabled } from "helpers/featureFlags"
   import {
-    ActionMenu,
-    MenuItem,
     Icon,
     Tabs,
     Tab,
     Heading,
     Modal,
     notifications,
-    Button,
   } from "@budibase/bbui"
   import AppActions from "components/deploy/AppActions.svelte"
   import { API } from "api"
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index 3a23319348..225e3977c3 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -1,13 +1,7 @@
 <script>
   import { Content, SideNav, SideNavItem } from "components/portal/page"
-  import { Page, Layout, Input, notifications } from "@budibase/bbui"
-  import { url, isActive, layout, goto } from "@roxi/routify"
-  import { capitalise } from "helpers"
-
-  import { store } from "builderStore"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { apps } from "stores/portal"
-  import { API } from "api"
+  import { Page, Layout } from "@budibase/bbui"
+  import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
 
   let deleteModal
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/export.svelte b/packages/builder/src/pages/builder/app/[application]/settings/export.svelte
index 30534ece4d..7126ac5e08 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/export.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/export.svelte
@@ -5,9 +5,6 @@
     Heading,
     Divider,
     ActionButton,
-    Helpers,
-    Icon,
-    notifications,
     Modal,
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
index d72183bbc8..501d34b12e 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
@@ -1,12 +1,5 @@
 <script>
-  import {
-    redirect,
-    isChangingPage,
-    page,
-    isActive,
-    layout,
-    route,
-  } from "@roxi/routify"
+  import { redirect } from "@roxi/routify"
 
   $redirect("../settings/automation-history")
 </script>

From ac315938f5d4b154f75e1e4c991d44c29dbd68a8 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 20 Jun 2023 15:08:26 +0100
Subject: [PATCH 13/18] Removed comment

---
 .../src/pages/builder/app/[application]/settings/export.svelte  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/settings/export.svelte b/packages/builder/src/pages/builder/app/[application]/settings/export.svelte
index 7126ac5e08..365f3c1f9e 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/export.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/export.svelte
@@ -23,8 +23,6 @@
     exportPublishedVersion = !!opts?.published
     exportModal.show()
   }
-
-  // $: embed = `<iframe width="560" height="315" frameborder="0" allow="clipboard-write" src="${appUrl}" ></iframe>`
 </script>
 
 <Modal bind:this={exportModal} padding={false}>

From 998f1806aad5ecb9091a8440467411cc0ffb033f Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 20 Jun 2023 16:29:09 +0100
Subject: [PATCH 14/18] Updated analytics tests to account for the embedded

---
 .../backend-core/src/events/publishers/serve.ts |  4 ++--
 .../src/api/routes/tests/analytics.spec.js      | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/backend-core/src/events/publishers/serve.ts b/packages/backend-core/src/events/publishers/serve.ts
index 5fb0883b0b..ac6a23dfdb 100644
--- a/packages/backend-core/src/events/publishers/serve.ts
+++ b/packages/backend-core/src/events/publishers/serve.ts
@@ -17,12 +17,12 @@ async function servedBuilder(timezone: string) {
 async function servedApp(
   app: App,
   timezone: string,
-  embed: boolean | undefined
+  embed?: boolean | undefined
 ) {
   const properties: AppServedEvent = {
     appVersion: app.version,
     timezone,
-    embed,
+    embed: embed === true,
   }
   await publishEvent(Event.SERVED_APP, properties)
 }
diff --git a/packages/server/src/api/routes/tests/analytics.spec.js b/packages/server/src/api/routes/tests/analytics.spec.js
index ac7cd978c8..5dfe2ce3e6 100644
--- a/packages/server/src/api/routes/tests/analytics.spec.js
+++ b/packages/server/src/api/routes/tests/analytics.spec.js
@@ -55,7 +55,22 @@ describe("/static", () => {
         .expect(200)
 
       expect(events.serve.servedApp).toBeCalledTimes(1)
-      expect(events.serve.servedApp).toBeCalledWith(config.getProdApp(), timezone)
+      expect(events.serve.servedApp).toBeCalledWith(config.getProdApp(), timezone, undefined)
+      expect(events.serve.servedAppPreview).not.toBeCalled()
+    })
+
+    it("should ping from an embedded app", async () => {
+      const headers = config.defaultHeaders()
+      headers[constants.Header.APP_ID] = config.prodAppId
+
+      await request
+        .post("/api/bbtel/ping")
+        .send({source: "app", timezone, embedded: true})
+        .set(headers)
+        .expect(200)
+
+      expect(events.serve.servedApp).toBeCalledTimes(1)
+      expect(events.serve.servedApp).toBeCalledWith(config.getProdApp(), timezone, true)
       expect(events.serve.servedAppPreview).not.toBeCalled()
     })
   })

From 2bdf85521705d2224823003b84312abd4d5b9911 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 20 Jun 2023 17:25:20 +0100
Subject: [PATCH 15/18] Removed app publish state tracking

---
 .../src/components/deploy/AppActions.svelte   | 113 +-----------------
 .../app/[application]/settings/embed.svelte   |   2 +-
 2 files changed, 5 insertions(+), 110 deletions(-)

diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 1de5a4a798..0c478b9992 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -22,15 +22,10 @@
   import { API } from "api"
   import { onMount } from "svelte"
   import { apps } from "stores/portal"
-  import {
-    store,
-    screenHistoryStore,
-    automationHistoryStore,
-  } from "builderStore"
+  import { store } from "builderStore"
   import TourWrap from "components/portal/onboarding/TourWrap.svelte"
   import { TOUR_STEP_KEYS } from "components/portal/onboarding/tours.js"
   import { goto } from "@roxi/routify"
-  import { isEqual, cloneDeep } from "lodash"
 
   export let application
   export let loaded
@@ -62,80 +57,7 @@
     $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
-
-  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
+  $: canPublish = !publishing && loaded
 
   const initialiseApp = async () => {
     const applicationPkg = await API.fetchAppPackage($store.devId)
@@ -191,27 +113,6 @@
     }
   }
 
-  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
@@ -224,7 +125,6 @@
       })
 
       await completePublish()
-      resetStateTracking()
     } catch (error) {
       console.error(error)
       analytics.captureException(error)
@@ -255,7 +155,6 @@
         type: "success",
         icon: "GlobeStrike",
       })
-      publishRecord = {}
     } catch (err) {
       notifications.error("Error unpublishing app")
     }
@@ -452,12 +351,8 @@
     />
   </Modal>
 
-  <RevertModal bind:this={revertModal} onComplete={resetStateTracking} />
-  <VersionModal
-    hideIcon
-    bind:this={versionModal}
-    onComplete={resetStateTracking}
-  />
+  <RevertModal bind:this={revertModal} />
+  <VersionModal hideIcon bind:this={versionModal} />
 {:else}
   <div class="app-action-button preview-locked">
     <div class="app-action">
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
index 10d03d78b4..827c298316 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -18,7 +18,7 @@
   $: appUrl = `${window.origin}/embed${app?.url}`
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
-  $: embed = `<iframe width="800" height="600" frameborder="0" allow="clipboard-write;camera" src="${appUrl}" ></iframe>`
+  $: embed = `<iframe width="800" height="600" frameborder="0" allow="clipboard-write;camera" src="${appUrl}"></iframe>`
 </script>
 
 <Layout noPadding>

From fd8400bee58fd23d8b6796d4d48356b32cf4b9b4 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 23 Jun 2023 11:56:59 +0100
Subject: [PATCH 16/18] PR feedback and removed some comments

---
 packages/builder/src/stores/portal/licensing.js     | 3 ---
 packages/client/src/components/ClientApp.svelte     | 5 ++---
 packages/client/src/index.js                        | 4 +++-
 packages/server/src/api/controllers/static/index.ts | 5 ++---
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js
index e94e7d2e21..4a59f29f52 100644
--- a/packages/builder/src/stores/portal/licensing.js
+++ b/packages/builder/src/stores/portal/licensing.js
@@ -76,12 +76,9 @@ export const createLicensingStore = () => {
       await actions.setQuotaUsage()
     },
     setNavigation: () => {
-      //"/builder/portal/account/upgrade"
       const adminStore = get(admin)
       const authStore = get(auth)
 
-      //Add cloud check here too???
-
       const upgradeUrl = authStore?.user?.accountPortalAccess
         ? `${adminStore.accountPortalUrl}/portal/upgrade`
         : "/builder/portal/account/upgrade"
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 8c6c20f258..06c4681b95 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -90,8 +90,7 @@
       builderStore.actions.notifyLoaded()
     } else {
       builderStore.actions.analyticsPing({
-        source: "app",
-        ...{ embedded: $appStore.embedded || undefined },
+        embedded: !!$appStore.embedded,
       })
     }
   })
@@ -169,7 +168,7 @@
                         <Layout justifyItems="center" gap="S">
                           {@html ErrorSVG}
                           <Heading size="L">
-                            Your application could not be loaded
+                            This Budibase app is not publicly accessible
                           </Heading>
                         </Layout>
                       </div>
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index a95ec24746..1550ba4d7b 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -46,7 +46,9 @@ const loadBudibase = async () => {
   appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"])
 
   // Set the flag used to determine if the app is being loaded via an iframe
-  appStore.actions.setAppEmbedded(window["##BUDIBASE_APP_EMBEDDED##"] == "true")
+  appStore.actions.setAppEmbedded(
+    window["##BUDIBASE_APP_EMBEDDED##"] === "true"
+  )
 
   // Fetch environment info
   if (!get(environmentStore)?.loaded) {
diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts
index fe3f653051..fc17cd46e0 100644
--- a/packages/server/src/api/controllers/static/index.ts
+++ b/packages/server/src/api/controllers/static/index.ts
@@ -100,9 +100,8 @@ export const deleteObjects = async function (ctx: any) {
 }
 
 export const serveApp = async function (ctx: any) {
-  const bbHeaderEmbed = ctx.request.get("x-budibase-embed")
-    ? ctx.get("x-budibase-embed").toLowerCase() == "true"
-    : false
+  const bbHeaderEmbed =
+    ctx.request.get("x-budibase-embed")?.toLowerCase() === "true"
 
   //Public Settings
   const { config } = await configs.getSettingsConfigDoc()

From 5d14bb70c6693e6095b15d96e80f3070b8ee9a20 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 26 Jun 2023 08:58:06 +0100
Subject: [PATCH 17/18] Ensure builder websocket is only instantiated once

---
 packages/builder/src/builderStore/store/frontend.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index d0414b5733..8160939df9 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -117,10 +117,13 @@ export const getFrontendStore = () => {
     reset: () => {
       store.set({ ...INITIAL_FRONTEND_STATE })
       websocket?.disconnect()
+      websocket = null
     },
     initialise: async pkg => {
       const { layouts, screens, application, clientLibPath, hasLock } = pkg
-      websocket = createBuilderWebsocket(application.appId)
+      if (!websocket) {
+        websocket = createBuilderWebsocket(application.appId)
+      }
       await store.actions.components.refreshDefinitions(application.appId)
 
       // Reset store state

From 3f0fac43ea30a5582383a42ade1dc2d4e6894f42 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 26 Jun 2023 08:58:25 +0100
Subject: [PATCH 18/18] Add padding to secondary user header to match tab
 spacing

---
 .../builder/src/pages/builder/app/[application]/_layout.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 5a22c8bbef..0d5942c39e 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -295,8 +295,9 @@
     display: flex;
     flex-direction: row;
     gap: 8px;
-    min-width: 0px;
+    min-width: 0;
     overflow: hidden;
+    margin-left: var(--spacing-xl);
   }
 
   .secondary-editor-body {