From 24a9656cbc7a0ca2e9882329560e865e5ae4b196 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 26 Apr 2022 12:04:07 +0100
Subject: [PATCH] Test fixes and code review refactoring

---
 packages/bbui/src/Modal/ModalContent.svelte   |  26 +--
 packages/bbui/src/Popover/Popover.svelte      |  26 ++-
 packages/bbui/src/Popover/PopoverMenu.svelte  |  82 --------
 packages/bbui/src/index.js                    |   1 -
 .../integration/appPublishWorkflow.spec.js    |  14 +-
 .../cypress/integration/autoScreensUI.spec.js |  92 ++++-----
 .../integration/createAutomation.spec.js      |   2 +-
 .../cypress/integration/createView.spec.js    |   4 +-
 .../integration/renameAnApplication.spec.js   |   2 +-
 .../cypress/integration/revertApp.spec.js     |   6 +-
 .../AutomationPanel/AutomationPanel.svelte    |   2 +-
 .../popovers/EditViewPopover.svelte           |   2 +-
 .../src/components/deploy/DeployModal.svelte  |  52 +++--
 .../components/deploy/DeployNavigation.svelte | 189 ++++++++++++++++++
 .../src/components/deploy/RevertModal.svelte  |   7 +-
 .../src/components/start/AppRow.svelte        |   2 +-
 .../builder/app/[application]/_layout.svelte  | 187 +----------------
 17 files changed, 319 insertions(+), 377 deletions(-)
 delete mode 100644 packages/bbui/src/Popover/PopoverMenu.svelte
 create mode 100644 packages/builder/src/components/deploy/DeployNavigation.svelte

diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 830f2004ef..10cd4b10ba 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -67,19 +67,21 @@
   data-cy={dataCy}
 >
   <div class="spectrum-Dialog-grid">
-    <h1
-      class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
-      class:noDivider={!showDivider}
-      class:header-spacing={$$slots.header}
-    >
-      {#if title}
-        {title}
-      {:else if $$slots.header}
-        <slot name="header" />
+    {#if title || $$slots.header}
+      <h1
+        class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
+        class:noDivider={!showDivider}
+        class:header-spacing={$$slots.header}
+      >
+        {#if title}
+          {title}
+        {:else if $$slots.header}
+          <slot name="header" />
+        {/if}
+      </h1>
+      {#if showDivider}
+        <Divider size="M" />
       {/if}
-    </h1>
-    {#if showDivider && (title || $$slots.header)}
-      <Divider size="M" />
     {/if}
 
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index ff59d41eff..1017ef71fc 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -12,8 +12,15 @@
   export let portalTarget
   export let dataCy
 
-  let clazz
-  export { clazz as class }
+  export let direction = "bottom"
+  export let showTip = false
+
+  let tipSvg =
+    '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
+
+  $: tooltipClasses = showTip
+    ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
+    : ""
 
   export const show = () => {
     dispatch("open")
@@ -41,10 +48,14 @@
       use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
-      class={"spectrum-Popover is-open " + (clazz || "")}
+      class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"
       data-cy={dataCy}
     >
+      {#if showTip}
+        {@html tipSvg}
+      {/if}
+
       <slot />
     </div>
   </Portal>
@@ -54,4 +65,13 @@
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000) !important;
   }
+  .spectrum-Popover.is-open.spectrum-Popover--withTip {
+    margin-top: var(--spacing-xs);
+    margin-left: var(--spacing-xl);
+  }
+  :global(.spectrum-Popover--bottom .spectrum-Popover-tip),
+  :global(.spectrum-Popover--top .spectrum-Popover-tip) {
+    left: 90%;
+    margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
+  }
 </style>
diff --git a/packages/bbui/src/Popover/PopoverMenu.svelte b/packages/bbui/src/Popover/PopoverMenu.svelte
deleted file mode 100644
index 11a3f4893f..0000000000
--- a/packages/bbui/src/Popover/PopoverMenu.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-  import { setContext } from "svelte"
-  import Popover from "../Popover/Popover.svelte"
-
-  export let disabled = false
-  export let align = "left"
-
-  export let anchor
-  export let showTip = true
-  export let direction = "bottom"
-  export let dataCy = null
-
-  let dropdown
-  let tipSvg =
-    '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
-
-  // This is needed because display: contents is considered "invisible".
-  // It should only ever be an action button, so should be fine.
-  function getAnchor(node) {
-    if (!anchor) {
-      anchor = node.firstChild
-    }
-  }
-
-  //need this for the publish/view behaviours
-  export const hide = () => {
-    dropdown.hide()
-  }
-  export const show = () => {
-    dropdown.show()
-  }
-
-  const openMenu = event => {
-    if (!disabled) {
-      event.stopPropagation()
-      show()
-    }
-  }
-
-  setContext("popoverMenu", { show, hide })
-</script>
-
-<div class="popover-menu">
-  <div use:getAnchor on:click={openMenu}>
-    <slot name="control" />
-  </div>
-  <Popover
-    bind:this={dropdown}
-    {anchor}
-    {align}
-    class={showTip
-      ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
-      : ""}
-  >
-    {#if showTip}
-      {@html tipSvg}
-    {/if}
-
-    <div class="popover-container" data-cy={dataCy}>
-      <div class="popover-menu-wrap">
-        <slot />
-      </div>
-    </div>
-  </Popover>
-</div>
-
-<style>
-  :global(.spectrum-Popover.is-open.spectrum-Popover--withTip) {
-    margin-top: var(--spacing-xs);
-    margin-left: var(--spacing-xl);
-  }
-  .popover-menu-wrap {
-    padding: 10px;
-  }
-  .popover-menu :global(.icon) {
-    display: flex;
-  }
-  :global(.spectrum-Popover--bottom .spectrum-Popover-tip) {
-    left: 90%;
-    margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
-  }
-</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 6a2d3824f0..2b16f32b84 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -25,7 +25,6 @@ export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
-export { default as PopoverMenu } from "./Popover/PopoverMenu.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Label/Label.svelte"
diff --git a/packages/builder/cypress/integration/appPublishWorkflow.spec.js b/packages/builder/cypress/integration/appPublishWorkflow.spec.js
index efcd6c0a53..d18233e0e7 100644
--- a/packages/builder/cypress/integration/appPublishWorkflow.spec.js
+++ b/packages/builder/cypress/integration/appPublishWorkflow.spec.js
@@ -23,8 +23,8 @@ filterTests(['all'], () => {
         cy.get(".spectrum-Button").contains("Edit").click({ force: true })
       })
       
-      cy.get(".app-status-icon svg[aria-label='GlobeStrike']").should("exist")
-      cy.get(".app-status-icon svg[aria-label='Globe']").should("not.exist")
+      cy.get(".deployment-top-nav svg[aria-label='GlobeStrike']").should("exist")
+      cy.get(".deployment-top-nav svg[aria-label='Globe']").should("not.exist")
     })
 
     it("Should publish an application and correctly reflect that", () => {
@@ -61,13 +61,13 @@ filterTests(['all'], () => {
         cy.get(".spectrum-Button").contains("Edit").click({ force: true })
       })
 
-      cy.get(".app-status-icon svg[aria-label='Globe']").should("exist").click({ force: true })
+      cy.get(".deployment-top-nav svg[aria-label='Globe']").should("exist").click({ force: true })
       
       cy.get("[data-cy='publish-popover-menu']").should("be.visible")
       .within(() => {
         cy.get("[data-cy='publish-popover-action']").should("exist")
-        cy.get("button").contains("View App").should("exist")
-        cy.get(".publish-popover-message").should("have.text", "Last Published: a few seconds ago")
+        cy.get("button").contains("View app").should("exist")
+        cy.get(".publish-popover-message").should("have.text", "Last published a few seconds ago")
       })
     })
 
@@ -89,7 +89,7 @@ filterTests(['all'], () => {
       })
 
       //The published status 
-      cy.get(".app-status-icon svg[aria-label='Globe']").should("exist")
+      cy.get(".deployment-top-nav svg[aria-label='Globe']").should("exist")
       .click({ force: true })
 
       cy.get("[data-cy='publish-popover-menu']").should("be.visible")
@@ -101,7 +101,7 @@ filterTests(['all'], () => {
         cy.get(".confirm-wrap button").click({ force: true }
       )})
 
-      cy.get(".app-status-icon svg[aria-label='GlobeStrike']").should("exist")
+      cy.get(".deployment-top-nav svg[aria-label='GlobeStrike']").should("exist")
 
       cy.visit(`${Cypress.config().baseUrl}/builder`)
 
diff --git a/packages/builder/cypress/integration/autoScreensUI.spec.js b/packages/builder/cypress/integration/autoScreensUI.spec.js
index ab65e6561f..2997bd052a 100644
--- a/packages/builder/cypress/integration/autoScreensUI.spec.js
+++ b/packages/builder/cypress/integration/autoScreensUI.spec.js
@@ -1,51 +1,51 @@
 import filterTests from "../support/filterTests"
 
 filterTests(['smoke', 'all'], () => {
-    context("Auto Screens UI", () => {
-        before(() => {
-        cy.login()
-        cy.createTestApp()
-        })
-        
-        it("should generate internal table screens", () => {
-            // Create autogenerated screens from the internal table
-            cy.createAutogeneratedScreens(["Cypress Tests"])
-            // Confirm screens have been auto generated
-            cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
-            cy.get(".nav-items-container").should('contain', 'cypress-tests/:id')
-            .and('contain', 'cypress-tests/new/row')
-        })
-        
-        it("should generate multiple internal table screens at once", () => {
-            // Create a second internal table
-            const initialTable = "Cypress Tests"
-            const secondTable = "Table Two"
-            cy.createTable(secondTable)
-            // Create autogenerated screens from the internal tables
-            cy.createAutogeneratedScreens([initialTable, secondTable])
-            // Confirm screens have been auto generated
-            cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
-            // Previously generated tables are suffixed with numbers - as expected
-            cy.get(".nav-items-container").should('contain', 'cypress-tests-2/:id')
-            .and('contain', 'cypress-tests-2/new/row')
-            cy.get(".nav-items-container").contains("table-two").click()
-            cy.get(".nav-items-container").should('contain', 'table-two/:id')
-            .and('contain', 'table-two/new/row')
-        })
-        
-        if (Cypress.env("TEST_ENV")) {
-            it("should generate data source screens", () => {
-                // Using MySQL data source for testing this
-                const datasource = "MySQL"
-                // Select & configure MySQL data source
-                cy.selectExternalDatasource(datasource)
-                cy.addDatasourceConfig(datasource)
-                // Create autogenerated screens from a MySQL table - MySQL contains books table
-                cy.createAutogeneratedScreens(["books"])
-                cy.get(".nav-items-container").contains("books").click()
-                cy.get(".nav-items-container").should('contain', 'books/:id')
-                .and('contain', 'books/new/row')
-            })
-        }
+  context("Auto Screens UI", () => {
+    before(() => {
+      cy.login()
+      cy.createTestApp()
     })
+    
+    it("should generate internal table screens", () => {
+      // Create autogenerated screens from the internal table
+      cy.createAutogeneratedScreens(["Cypress Tests"])
+      // Confirm screens have been auto generated
+      cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
+      cy.get(".nav-items-container").should('contain', 'cypress-tests/:id')
+      .and('contain', 'cypress-tests/new/row')
+    })
+    
+    it("should generate multiple internal table screens at once", () => {
+      // Create a second internal table
+      const initialTable = "Cypress Tests"
+      const secondTable = "Table Two"
+      cy.createTable(secondTable)
+      // Create autogenerated screens from the internal tables
+      cy.createAutogeneratedScreens([initialTable, secondTable])
+      // Confirm screens have been auto generated
+      cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
+      // Previously generated tables are suffixed with numbers - as expected
+      cy.get(".nav-items-container").should('contain', 'cypress-tests-2/:id')
+      .and('contain', 'cypress-tests-2/new/row')
+      cy.get(".nav-items-container").contains("table-two").click()
+      cy.get(".nav-items-container").should('contain', 'table-two/:id')
+      .and('contain', 'table-two/new/row')
+    })
+    
+    if (Cypress.env("TEST_ENV")) {
+      it("should generate data source screens", () => {
+        // Using MySQL data source for testing this
+        const datasource = "MySQL"
+        // Select & configure MySQL data source
+        cy.selectExternalDatasource(datasource)
+        cy.addDatasourceConfig(datasource)
+        // Create autogenerated screens from a MySQL table - MySQL contains books table
+        cy.createAutogeneratedScreens(["books"])
+        cy.get(".nav-items-container").contains("books").click()
+        cy.get(".nav-items-container").should('contain', 'books/:id')
+        .and('contain', 'books/new/row')
+      })
+    }
+  })
 })
diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js
index ff8065f544..69ef3f98a3 100644
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/packages/builder/cypress/integration/createAutomation.spec.js
@@ -11,7 +11,7 @@ filterTests(['smoke', 'all'], () => {
       cy.createTestTableWithData()
       cy.wait(2000)
       cy.contains("Automate").click()
-      cy.get("[data-cy='new-screen'] > .spectrum-Icon").click()
+      cy.get(".add-button .spectrum-Icon").click()
       cy.get(".modal-inner-wrapper").within(() => {
         cy.get("input").type("Add Row")
         cy.contains("Row Created").click({ force: true })
diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js
index a8c3b03cee..feaf1c3b5f 100644
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@@ -125,7 +125,7 @@ filterTests(['smoke', 'all'], () => {
 
     it("renames a view", () => {
       cy.contains(".nav-item", "Test View")
-        .find(".actions .icon")
+        .find(".actions .icon.open-popover")
         .click({ force: true })
       cy.get(".spectrum-Menu-itemLabel").contains("Edit").click()
       cy.get(".modal-inner-wrapper").within(() => {
@@ -138,7 +138,7 @@ filterTests(['smoke', 'all'], () => {
 
     it("deletes a view", () => {
       cy.contains(".nav-item", "Test View Updated")
-        .find(".actions .icon")
+        .find(".actions .icon.open-popover")
         .click({ force: true })
       cy.contains("Delete").click()
       cy.contains("Delete View").click()
diff --git a/packages/builder/cypress/integration/renameAnApplication.spec.js b/packages/builder/cypress/integration/renameAnApplication.spec.js
index 73e682cce0..120c0d54d7 100644
--- a/packages/builder/cypress/integration/renameAnApplication.spec.js
+++ b/packages/builder/cypress/integration/renameAnApplication.spec.js
@@ -99,7 +99,7 @@ filterTests(['all'], () => {
       cy.searchForApplication(originalName)
       cy.get(".appTable")
         .within(() => {
-          cy.get("[data-cy='app-row-actions-menu']").eq(0).click()
+          cy.get("[aria-label='More']").eq(0).click()
         })
       // Check for when an app is published
       if (published == true) {
diff --git a/packages/builder/cypress/integration/revertApp.spec.js b/packages/builder/cypress/integration/revertApp.spec.js
index aeb1847b46..71dd93a4cf 100644
--- a/packages/builder/cypress/integration/revertApp.spec.js
+++ b/packages/builder/cypress/integration/revertApp.spec.js
@@ -10,7 +10,7 @@ filterTests(['smoke', 'all'], () => {
         it("should try to revert an unpublished app", () => {
             // Click revert icon
             cy.get(".toprightnav").within(() => {
-                cy.get("[data-cy='revert-application-topnav']").click({ force: true })
+                cy.get("[aria-label='Revert']").click({ force: true })
             })
             cy.get(".spectrum-Dialog-grid").within(() => {
                 // Enter app name before revert
@@ -41,7 +41,7 @@ filterTests(['smoke', 'all'], () => {
             cy.addComponent("Elements", "Button")
             // Click Revert
             cy.get(".toprightnav").within(() => {
-                cy.get("[data-cy='revert-application-topnav']").click({ force: true })
+                cy.get("[aria-label='Revert']").click({ force: true })
             })
             cy.get(".spectrum-Dialog-grid").within(() => {
                 // Click Revert
@@ -58,7 +58,7 @@ filterTests(['smoke', 'all'], () => {
         it("should enter incorrect app name when reverting", () => {
             // Click Revert
             cy.get(".toprightnav").within(() => {
-                cy.get("[data-cy='revert-application-topnav']").click({ force: true })
+                cy.get("[aria-label='Revert']").click({ force: true })
             })
             // Enter incorrect app name
             cy.get(".spectrum-Dialog-grid").within(() => {
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 2c67a3966c..2f57767863 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -16,7 +16,7 @@
       </Modal>
     </Tab>
   </Tabs>
-  <div class="add-button" data-cy="new-screen">
+  <div class="add-button">
     <Icon hoverable name="AddCircle" on:click={modal.show} />
   </div>
 </div>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 0ab5d4326f..6eba5070fc 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <ActionMenu>
-  <div slot="control" class="icon">
+  <div slot="control" class="icon open-popover">
     <Icon s hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
diff --git a/packages/builder/src/components/deploy/DeployModal.svelte b/packages/builder/src/components/deploy/DeployModal.svelte
index ffda399440..0d9bfb7539 100644
--- a/packages/builder/src/components/deploy/DeployModal.svelte
+++ b/packages/builder/src/components/deploy/DeployModal.svelte
@@ -96,33 +96,31 @@
 </Modal>
 
 <!-- Publish complete -->
-<span class="publish-modal-wrap">
-  <Modal bind:this={publishCompleteModal}>
-    <ModalContent
-      confirmText="Done"
-      cancelText="View App"
-      onCancel={viewApp}
-      dataCy={"deploy-app-success-modal"}
-    >
-      <div slot="header" class="app-published-header">
-        <svg
-          width="26px"
-          height="26px"
-          class="spectrum-Icon success-icon"
-          focusable="false"
-        >
-          <use xlink:href="#spectrum-icon-18-GlobeCheck" />
-        </svg>
-        <span class="app-published-header-text">App Published!</span>
-      </div>
-      <CopyInput
-        value={publishedUrl}
-        label="You can view your app at:"
-        dataCy="deployed-app-url"
-      />
-    </ModalContent>
-  </Modal>
-</span>
+<Modal bind:this={publishCompleteModal}>
+  <ModalContent
+    confirmText="Done"
+    cancelText="View App"
+    onCancel={viewApp}
+    dataCy={"deploy-app-success-modal"}
+  >
+    <div slot="header" class="app-published-header">
+      <svg
+        width="26px"
+        height="26px"
+        class="spectrum-Icon success-icon"
+        focusable="false"
+      >
+        <use xlink:href="#spectrum-icon-18-GlobeCheck" />
+      </svg>
+      <span class="app-published-header-text">App Published!</span>
+    </div>
+    <CopyInput
+      value={publishedUrl}
+      label="You can view your app at:"
+      dataCy="deployed-app-url"
+    />
+  </ModalContent>
+</Modal>
 
 <style>
   .app-published-header {
diff --git a/packages/builder/src/components/deploy/DeployNavigation.svelte b/packages/builder/src/components/deploy/DeployNavigation.svelte
new file mode 100644
index 0000000000..448acb34dc
--- /dev/null
+++ b/packages/builder/src/components/deploy/DeployNavigation.svelte
@@ -0,0 +1,189 @@
+<script>
+  import {
+    notifications,
+    Popover,
+    Layout,
+    Heading,
+    Body,
+    Button,
+    Icon,
+  } from "@budibase/bbui"
+  import { processStringSync } from "@budibase/string-templates"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import analytics, { Events, EventSource } from "analytics"
+  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"
+
+  export let application
+
+  let publishPopover
+  let publishPopoverAnchor
+  let unpublishModal
+
+  $: filteredApps = $apps.filter(
+    app => app.devId === application && app.status === "published"
+  )
+  $: selectedApp = filteredApps?.length ? filteredApps[0] : null
+
+  $: deployments = []
+  $: latestDeployments = deployments
+    .filter(deployment => deployment.status === "SUCCESS")
+    .sort((a, b) => a.updatedAt > b.updatedAt)
+
+  $: isPublished = selectedApp && latestDeployments?.length > 0
+
+  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) {
+      notifications.error("Error fetching deployment history")
+    }
+  }
+
+  const viewApp = () => {
+    analytics.captureEvent(Events.APP.VIEW_PUBLISHED, {
+      appId: application.appId,
+      eventSource: EventSource.PORTAL,
+    })
+    if (application.url) {
+      window.open(`/app${application.url}`)
+    } else {
+      window.open(`/${application.prodId}`)
+    }
+  }
+
+  const unpublishApp = () => {
+    publishPopover.hide()
+    unpublishModal.show()
+  }
+
+  const confirmUnpublishApp = async () => {
+    if (!application || !isPublished) {
+      //confirm the app has loaded.
+      return
+    }
+    try {
+      analytics.captureEvent(Events.APP.UNPUBLISHED, {
+        appId: application.appId,
+      })
+      await API.unpublishApp(application.prodId)
+      await apps.load()
+      notifications.success("App unpublished successfully")
+    } catch (err) {
+      notifications.error("Error unpublishing app")
+    }
+  }
+
+  const completePublish = async () => {
+    try {
+      await apps.load()
+      deployments = await fetchDeployments()
+    } catch (err) {
+      notifications.error("Error refreshing app")
+    }
+  }
+
+  onMount(async () => {
+    if (!$apps.length) {
+      await apps.load()
+    }
+    deployments = await fetchDeployments()
+  })
+</script>
+
+<div class="deployment-top-nav">
+  {#if isPublished}
+    <div class="publish-popover">
+      <div bind:this={publishPopoverAnchor}>
+        <Icon
+          size="M"
+          hoverable
+          name="Globe"
+          tooltip="Your published app"
+          on:click={publishPopover.show()}
+        />
+      </div>
+      <Popover
+        bind:this={publishPopover}
+        align="right"
+        disabled={!isPublished}
+        dataCy="publish-popover-menu"
+        showTip={true}
+        anchor={publishPopoverAnchor}
+      >
+        <Layout 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="publish-popover-actions">
+            <Button
+              warning={true}
+              icon="GlobeStrike"
+              disabled={!isPublished}
+              on:click={unpublishApp}
+              dataCy="publish-popover-action"
+            >
+              Unpublish
+            </Button>
+            <Button cta on:click={viewApp}>View app</Button>
+          </div>
+        </Layout>
+      </Popover>
+    </div>
+  {/if}
+
+  {#if !isPublished}
+    <Icon
+      size="M"
+      name="GlobeStrike"
+      disabled
+      tooltip="Your app has not been published yet"
+    />
+  {/if}
+</div>
+<ConfirmDialog
+  bind:this={unpublishModal}
+  title="Confirm unpublish"
+  okText="Unpublish app"
+  onOk={confirmUnpublishApp}
+  dataCy={"unpublish-modal"}
+>
+  Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
+</ConfirmDialog>
+
+<DeployModal onOk={completePublish} />
+
+<style>
+  .publish-popover-actions :global([data-cy="publish-popover-action"]) {
+    margin-right: var(--spacing-s);
+  }
+  :global([data-cy="publish-popover-menu"]) {
+    padding: 10px;
+  }
+</style>
diff --git a/packages/builder/src/components/deploy/RevertModal.svelte b/packages/builder/src/components/deploy/RevertModal.svelte
index fabd97fbca..717c55f05e 100644
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@@ -28,12 +28,7 @@
   }
 </script>
 
-<Icon
-  name="Revert"
-  hoverable
-  on:click={revertModal.show}
-  dataCy="revert-application-topnav"
-/>
+<Icon name="Revert" hoverable on:click={revertModal.show} />
 <Modal bind:this={revertModal}>
   <ModalContent
     title="Revert Changes"
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 26c863c389..cf2121b8a8 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -89,7 +89,7 @@
     </Button>
   </div>
   <ActionMenu align="right" dataCy="app-row-actions-menu-popover">
-    <Icon hoverable slot="control" name="More" dataCy="app-row-actions-menu" />
+    <Icon hoverable slot="control" name="More" />
     {#if app.lockedYou}
       <MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
         Release lock
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index ee15226978..ebe5e32653 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -1,67 +1,22 @@
 <script>
   import { store, automationStore } from "builderStore"
   import { roles, flags } from "stores/backend"
-  import {
-    Icon,
-    ActionGroup,
-    Tabs,
-    Tab,
-    notifications,
-    PopoverMenu,
-    Layout,
-    Button,
-    Heading,
-    Body,
-  } from "@budibase/bbui"
-  import DeployModal from "components/deploy/DeployModal.svelte"
+  import { Icon, ActionGroup, Tabs, Tab, notifications } from "@budibase/bbui"
   import RevertModal from "components/deploy/RevertModal.svelte"
   import VersionModal from "components/deploy/VersionModal.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import DeployNavigation from "components/deploy/DeployNavigation.svelte"
   import { API } from "api"
-  import { auth, admin, apps } from "stores/portal"
+  import { auth, admin } from "stores/portal"
   import { isActive, goto, layout, redirect } from "@roxi/routify"
   import Logo from "assets/bb-emblem.svg"
   import { capitalise } from "helpers"
   import UpgradeModal from "components/upgrade/UpgradeModal.svelte"
   import { onMount, onDestroy } from "svelte"
-  import { processStringSync } from "@budibase/string-templates"
-  import { checkIncomingDeploymentStatus } from "components/deploy/utils"
-  import analytics, { Events, EventSource } from "analytics"
 
   export let application
 
   // Get Package and set store
   let promise = getPackage()
-  let unpublishModal
-  let publishPopover
-
-  $: enrichedApps = enrichApps($apps, $auth.user)
-  const enrichApps = (apps, user) => {
-    const enrichedApps = apps
-      .map(app => ({
-        ...app,
-        deployed: app.status === "published",
-        lockedYou: app.lockedBy && app.lockedBy.email === user?.email,
-        lockedOther: app.lockedBy && app.lockedBy.email !== user?.email,
-      }))
-      .filter(app => {
-        return app.devId === application
-      })
-
-    return enrichedApps
-  }
-
-  $: selectedApp = enrichedApps.length > 0 ? enrichedApps[0] : {}
-
-  $: deployments = []
-  $: latestDeployments = deployments
-    .filter(deployment => deployment.status === "SUCCESS")
-    .sort((a, b) => a.updatedAt > b.updatedAt)
-
-  $: isPublished =
-    selectedApp.deployed && latestDeployments && latestDeployments?.length
-      ? true
-      : false
 
   // Sync once when you load the app
   let hasSynced = false
@@ -73,18 +28,6 @@
     window.open(`/${application}`)
   }
 
-  const viewApp = () => {
-    analytics.captureEvent(Events.APP.VIEW_PUBLISHED, {
-      appId: selectedApp.appId,
-      eventSource: EventSource.PORTAL,
-    })
-    if (selectedApp.url) {
-      window.open(`/app${selectedApp.url}`)
-    } else {
-      window.open(`/${selectedApp.prodId}`)
-    }
-  }
-
   async function getPackage() {
     try {
       const pkg = await API.fetchAppPackage(application)
@@ -115,74 +58,20 @@
     })
   }
 
-  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) {
-      notifications.error("Error fetching deployment history")
-    }
-  }
-
   onMount(async () => {
     if (!hasSynced && application) {
       try {
         await API.syncApp(application)
-        await apps.load()
       } catch (error) {
         notifications.error("Failed to sync with production database")
       }
       hasSynced = true
     }
-    deployments = await fetchDeployments()
   })
 
   onDestroy(() => {
     store.actions.reset()
   })
-
-  const unpublishApp = () => {
-    publishPopover.hide()
-    unpublishModal.show()
-  }
-
-  const completePublish = async () => {
-    try {
-      await apps.load()
-      deployments = await fetchDeployments()
-    } catch (err) {
-      notifications.error("Error refreshing app")
-    }
-  }
-
-  const confirmUnpublishApp = async () => {
-    if (!application || !isPublished) {
-      //confirm the app has loaded.
-      return
-    }
-    try {
-      analytics.captureEvent(Events.APP.UNPUBLISHED, {
-        appId: selectedApp.appId,
-      })
-      await API.unpublishApp(selectedApp.prodId)
-      await apps.load()
-      notifications.success("App unpublished successfully")
-    } catch (err) {
-      notifications.error("Error unpublishing app")
-    }
-  }
 </script>
 
 {#await promise}
@@ -223,84 +112,16 @@
         <VersionModal />
         <RevertModal />
         <Icon name="Play" hoverable on:click={previewApp} />
-
-        {#if isPublished}
-          <PopoverMenu
-            bind:this={publishPopover}
-            align="right"
-            disabled={!isPublished}
-            dataCy="publish-popover-menu"
-          >
-            <div slot="control" class="icon app-status-icon">
-              <Icon
-                size="M"
-                hoverable
-                name="Globe"
-                disabled={!isPublished}
-                tooltip="Your published app"
-              />
-            </div>
-            <Layout gap="M">
-              <Heading size="XS">Your published app</Heading>
-              <Body size="S">
-                {#if isPublished}
-                  {processStringSync(
-                    "Last published {{ duration time 'millisecond' }} ago",
-                    {
-                      time:
-                        new Date().getTime() -
-                        new Date(latestDeployments[0].updatedAt).getTime(),
-                    }
-                  )}
-                {/if}
-              </Body>
-              <div class="publish-popover-actions">
-                <Button
-                  warning={true}
-                  icon="GlobeStrike"
-                  disabled={!isPublished}
-                  on:click={unpublishApp}
-                  dataCy="publish-popover-action"
-                >
-                  Unpublish
-                </Button>
-                <Button cta on:click={viewApp}>View app</Button>
-              </div>
-            </Layout>
-          </PopoverMenu>
-        {/if}
-
-        {#if !isPublished}
-          <Icon
-            size="M"
-            name="GlobeStrike"
-            disabled
-            tooltip="Your app has not been published yet"
-          />
-        {/if}
-
-        <DeployModal onOk={completePublish} />
+        <DeployNavigation {application} />
       </div>
     </div>
     <slot />
-    <ConfirmDialog
-      bind:this={unpublishModal}
-      title="Confirm unpublish"
-      okText="Unpublish app"
-      onOk={confirmUnpublishApp}
-      dataCy={"unpublish-modal"}
-    >
-      Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
-    </ConfirmDialog>
   </div>
 {:catch error}
   <p>Something went wrong: {error.message}</p>
 {/await}
 
 <style>
-  .publish-popover-actions :global([data-cy="publish-popover-action"]) {
-    margin-right: var(--spacing-s);
-  }
   .loading {
     min-height: 100%;
     height: 100%;