Merge pull request #5489 from Budibase/feature/new-app-publish-workflow

Feature/new app publish workflow

packages/backend-core/src/context/index.js

@@ -174,9 +174,11 @@ function getDB(key, opts) {
   if (db && isEqual(opts, storedOpts)) {
     return db
   }
+
   const appId = exports.getAppId()
   const CouchDB = getCouch()
   let toUseAppId
+
   switch (key) {
     case ContextKeys.CURRENT_DB:
       toUseAppId = appId

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -6,6 +6,7 @@
   export let disabled = false
   export let align = "left"
   export let portalTarget
+  export let dataCy
 
   let anchor
   let dropdown
@@ -36,7 +37,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget}>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget} {dataCy}>
   <Menu>
     <slot />
   </Menu>

packages/bbui/src/Icon/Icon.svelte

@@ -3,6 +3,9 @@
 </script>
 
 <script>
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import { fade } from "svelte/transition"
+
   export let direction = "n"
   export let name = "Add"
   export let hidden = false
@@ -10,15 +13,25 @@
   export let hoverable = false
   export let disabled = false
   export let color
+  export let tooltip
 
   $: rotation = getRotation(direction)
 
+  let showTooltip = false
+
   const getRotation = direction => {
     return directions.indexOf(direction) * 45
   }
 </script>
 
-<svg
+<div
+  class="icon"
+  on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:click={() => (showTooltip = false)}
+>
+  <svg
     on:click
     class:hoverable
     class:disabled
@@ -29,11 +42,23 @@
     style={`transform: rotate(${rotation}deg); ${
       color ? `color: ${color};` : ""
     }`}
->
+  >
-  <use xlink:href="#spectrum-icon-18-{name}" />
+    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
-</svg>
+  </svg>
+  {#if tooltip && showTooltip}
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <Tooltip textWrapping direction={"bottom"} text={tooltip} />
+    </div>
+  {/if}
+</div>
 
 <style>
+  .icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+  }
+
   svg.hoverable {
     pointer-events: all;
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
@@ -47,4 +72,15 @@
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
   }
+
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    left: 50%;
+    top: calc(100% + 4px);
+    width: 100vw;
+    max-width: 150px;
+    transform: translateX(-50%);
+    text-align: center;
+  }
 </style>

packages/bbui/src/Modal/ModalContent.svelte

@@ -23,6 +23,7 @@
   export let secondaryButtonText = undefined
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
+  export let dataCy = null
 
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
@@ -63,21 +64,26 @@
   role="dialog"
   tabindex="-1"
   aria-modal="true"
+  data-cy={dataCy}
 >
   <div class="spectrum-Dialog-grid">
-    {#if title}
+    {#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}
     {/if}
+
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">
       <slot />

packages/bbui/src/Popover/Popover.svelte

@@ -10,6 +10,17 @@
   export let anchor
   export let align = "right"
   export let portalTarget
+  export let dataCy
+
+  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")
@@ -37,9 +48,14 @@
       use:positionDropdown={{ anchor, align }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
-      class="spectrum-Popover is-open"
+      class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"
+      data-cy={dataCy}
     >
+      {#if showTip}
+        {@html tipSvg}
+      {/if}
+
       <slot />
     </div>
   </Portal>
@@ -49,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>

packages/builder/cypress/integration/appPublishWorkflow.spec.js

@@ -0,0 +1,112 @@
+import filterTests from "../support/filterTests"
+
+filterTests(['all'], () => {
+  context("Publish Application Workflow", () => {
+    before(() => {
+      cy.login()
+      cy.createTestApp()
+    })
+
+    it("Should reflect the unpublished status correctly", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(1000)
+
+      cy.get(".appTable .app-status").eq(0)
+      .within(() => {
+        cy.contains("Unpublished")
+        cy.get("svg[aria-label='GlobeStrike']").should("exist")
+      })
+
+      cy.get(".appTable .app-row-actions").eq(0)
+      .within(() => {
+        cy.get(".spectrum-Button").contains("Preview")
+        cy.get(".spectrum-Button").contains("Edit").click({ force: true })
+      })
+      
+      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", () => {
+      //Assuming the previous test was run and the unpublished app is open in edit mode.
+      cy.get(".toprightnav button.spectrum-Button").contains("Publish").click({ force : true })
+
+      cy.get(".spectrum-Modal [data-cy='deploy-app-modal']").should("be.visible")
+      .within(() => {
+        cy.get(".spectrum-Button").contains("Publish").click({ force : true })
+        cy.wait(1000)
+      });
+
+      //Verify that the app url is presented correctly to the user
+      cy.get(".spectrum-Modal [data-cy='deploy-app-success-modal']")
+      .should("be.visible")
+      .within(() => {
+        let appUrl = Cypress.config().baseUrl + '/app/cypress-tests'
+        cy.get("[data-cy='deployed-app-url'] input").should('have.value', appUrl)
+        cy.get(".spectrum-Button").contains("Done").click({ force: true })
+      })
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(1000)
+
+      cy.get(".appTable .app-status").eq(0)
+      .within(() => {
+        cy.contains("Published")
+        cy.get("svg[aria-label='Globe']").should("exist")
+      })
+
+      cy.get(".appTable .app-row-actions").eq(0)
+      .within(() => {
+        cy.get(".spectrum-Button").contains("View app")
+        cy.get(".spectrum-Button").contains("Edit").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")
+      })
+    })
+
+    it("Should unpublish an application from the top navigation and reflect the status change", () => {
+      //Assuming the previous test app exists and is published
+      
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+
+      cy.get(".appTable .app-status").eq(0)
+      .within(() => {
+        cy.contains("Published")
+        cy.get("svg[aria-label='Globe']").should("exist")
+      })
+
+      cy.get(".appTable .app-row-actions").eq(0)
+      .within(() => {
+        cy.get(".spectrum-Button").contains("View app")
+        cy.get(".spectrum-Button").contains("Edit").click({ force: true })
+      })
+
+      //The published status 
+      cy.get(".deployment-top-nav svg[aria-label='Globe']").should("exist")
+      .click({ force: true })
+
+      cy.get("[data-cy='publish-popover-menu']").should("be.visible")
+      cy.get("[data-cy='publish-popover-menu'] [data-cy='publish-popover-action']")
+      .click({ force : true })
+
+      cy.get("[data-cy='unpublish-modal']").should("be.visible")
+      .within(() => {
+        cy.get(".confirm-wrap button").click({ force: true }
+      )})
+
+      cy.get(".deployment-top-nav svg[aria-label='GlobeStrike']").should("exist")
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+
+      cy.get(".appTable .app-status").eq(0).contains("Unpublished")
+
+    })
+  })
+})

packages/builder/cypress/integration/changeAppIconAndColour.spec.js

@@ -11,7 +11,7 @@ filterTests(['all'], () => {
           cy.applicationInAppTable("Cypress Tests")
           cy.get(".appTable")
             .within(() => {
-              cy.get(".spectrum-Icon").eq(1).click()
+              cy.get(".app-row-actions-icon").eq(0).click()
             })
           cy.get(".spectrum-Menu").contains("Edit icon").click()
           // Select random icon
@@ -38,6 +38,7 @@ filterTests(['all'], () => {
               cy.get(".title").children().children()
               .should('have.attr', 'style').and('contains', 'color')
             })
+          cy.deleteAllApps()
       })
   })
 })

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 })

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()

packages/builder/cypress/integration/renameAnApplication.spec.js

@@ -99,7 +99,7 @@ filterTests(['all'], () => {
       cy.searchForApplication(originalName)
       cy.get(".appTable")
         .within(() => {
-          cy.get(".spectrum-Icon").eq(1).click()
+          cy.get("[aria-label='More']").eq(0).click()
         })
       // Check for when an app is published
       if (published == true) {
@@ -109,7 +109,9 @@ filterTests(['all'], () => {
         cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click()
         cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click()
       }
-        cy.contains("Edit").click()
+      cy.get("[data-cy='app-row-actions-menu-popover']").eq(0).within(() => {
+        cy.get(".spectrum-Menu-item").contains("Edit").click({ force: true })
+      })
       cy.get(".spectrum-Modal")
         .within(() => {
           if (noName == true) {

packages/builder/cypress/integration/revertApp.spec.js

@@ -10,9 +10,9 @@ filterTests(['smoke', 'all'], () => {
         it("should try to revert an unpublished app", () => {
             // Click revert icon
             cy.get(".toprightnav").within(() => {
-                cy.get(".spectrum-Icon").eq(1).click()
+                cy.get("[aria-label='Revert']").click({ force: true })
             })
-            cy.get(".spectrum-Dialog-grid").within(() => {
+            cy.get(".spectrum-Modal").within(() => {
                 // Enter app name before revert
                 cy.get("input").type("Cypress Tests")
                 cy.intercept('**/revert').as('revertApp')
@@ -33,11 +33,15 @@ filterTests(['smoke', 'all'], () => {
             cy.get(".spectrum-ButtonGroup").within(() => {
                 cy.get(".spectrum-Button").contains("Publish").click({ force: true })
             })
+            cy.wait(1000)
+            cy.get(".spectrum-ButtonGroup").within(() => {
+                cy.get(".spectrum-Button").contains("Done").click({ force: true })
+            })
             // Add second component - Button
             cy.addComponent("Elements", "Button")
             // Click Revert
             cy.get(".toprightnav").within(() => {
-                cy.get(".spectrum-Icon").eq(1).click()
+                cy.get("[aria-label='Revert']").click({ force: true })
             })
             cy.get(".spectrum-Dialog-grid").within(() => {
                 // Click Revert
@@ -54,7 +58,7 @@ filterTests(['smoke', 'all'], () => {
         it("should enter incorrect app name when reverting", () => {
             // Click Revert
             cy.get(".toprightnav").within(() => {
-                cy.get(".spectrum-Icon").eq(1).click({ force: true })
+                cy.get("[aria-label='Revert']").click({ force: true })
             })
             // Enter incorrect app name
             cy.get(".spectrum-Dialog-grid").within(() => {

packages/builder/src/analytics/constants.js

@@ -36,6 +36,7 @@ export const Events = {
     CREATED: "budibase:app_created",
     PUBLISHED: "budibase:app_published",
     UNPUBLISHED: "budibase:app_unpublished",
+    VIEW_PUBLISHED: "budibase:view_published_app",
   },
   ANALYTICS: {
     OPT_IN: "budibase:analytics_opt_in",
@@ -51,3 +52,9 @@ export const Events = {
     SAVED: "budibase:sso_saved",
   },
 }
+
+export const EventSource = {
+  PORTAL: "portal",
+  URL: "url",
+  NOTIFICATION: "notification",
+}

packages/builder/src/analytics/index.js

@@ -2,7 +2,7 @@ import { API } from "api"
 import PosthogClient from "./PosthogClient"
 import IntercomClient from "./IntercomClient"
 import SentryClient from "./SentryClient"
-import { Events } from "./constants"
+import { Events, EventSource } from "./constants"
 
 const posthog = new PosthogClient(
   process.env.POSTHOG_TOKEN,
@@ -57,5 +57,5 @@ class AnalyticsHub {
 
 const analytics = new AnalyticsHub()
 
-export { Events }
+export { Events, EventSource }
 export default analytics

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte

@@ -10,11 +10,11 @@
 <ModalContent
   showCloseIcon={false}
   showConfirmButton={false}
-  title="Test Results"
   cancelText="Close"
 >
-  <div slot="header">
+  <div slot="header" class="result-modal-header">
-    <div style="float: right;">
+    <span>Test Results</span>
+    <div>
       {#if isTrigger || testResult[0].outputs.success}
         <div class="iconSuccess">
           <Icon size="S" name="CheckmarkCircle" />
@@ -100,6 +100,14 @@
 </ModalContent>
 
 <style>
+  .result-modal-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
   .iconSuccess {
     color: var(--spectrum-global-color-green-600);
   }

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>

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>

packages/builder/src/components/common/ConfirmDialog.svelte

@@ -9,6 +9,7 @@
   export let onCancel = undefined
   export let warning = true
   export let disabled
+  export let dataCy = null
 
   let modal
 
@@ -28,6 +29,7 @@
     {cancelText}
     {warning}
     {disabled}
+    {dataCy}
   >
     <Body size="S">
       {body}

packages/builder/src/components/common/inputs/CopyInput.svelte

@@ -4,6 +4,7 @@
   export let label = null
   export let value
   export let copyValue
+  export let dataCy = null
 
   const copyToClipboard = val => {
     const dummy = document.createElement("textarea")
@@ -16,7 +17,7 @@
   }
 </script>
 
-<div>
+<div data-cy={dataCy}>
   <Input readonly {value} {label} />
   <div class="icon" on:click={() => copyToClipboard(value || copyValue)}>
     <Icon size="S" name="Copy" />

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

@@ -1,24 +1,61 @@
 <script>
-  import { Button, Modal, notifications, ModalContent } from "@budibase/bbui"
+  import {
+    Button,
+    Modal,
+    notifications,
+    ModalContent,
+    Layout,
+  } from "@budibase/bbui"
   import { API } from "api"
-  import analytics, { Events } from "analytics"
+  import analytics, { Events, EventSource } from "analytics"
   import { store } from "builderStore"
+  import { ProgressCircle } from "@budibase/bbui"
+  import CopyInput from "components/common/inputs/CopyInput.svelte"
 
   let feedbackModal
   let publishModal
+  let asyncModal
+  let publishCompleteModal
+
+  let published
+
+  $: publishedUrl = published ? `${window.origin}/app${published.appUrl}` : ""
+
+  export let onOk
 
   async function deployApp() {
     try {
-      await API.deployAppChanges()
+      //In Progress
+      asyncModal.show()
+      publishModal.hide()
+
+      published = await API.deployAppChanges()
+
       analytics.captureEvent(Events.APP.PUBLISHED, {
         appId: $store.appId,
       })
-      notifications.success("Application published successfully")
+      if (typeof onOk === "function") {
+        await onOk()
+      }
+
+      //Request completed
+      asyncModal.hide()
+      publishCompleteModal.show()
     } catch (error) {
       analytics.captureException(error)
       notifications.error("Error publishing app")
     }
   }
+
+  const viewApp = () => {
+    if (published) {
+      analytics.captureEvent(Events.APP.VIEW_PUBLISHED, {
+        appId: $store.appId,
+        eventSource: EventSource.PORTAL,
+      })
+      window.open(publishedUrl, "_blank")
+    }
+  }
 </script>
 
 <Button secondary on:click={publishModal.show}>Publish</Button>
@@ -30,11 +67,13 @@
     showCancelButton={false}
   />
 </Modal>
+
 <Modal bind:this={publishModal}>
   <ModalContent
     title="Publish to Production"
     confirmText="Publish"
     onConfirm={deployApp}
+    dataCy={"deploy-app-modal"}
   >
     <span
       >The changes you have made will be published to the production version of
@@ -42,3 +81,57 @@
     >
   </ModalContent>
 </Modal>
+
+<!-- Publish in progress -->
+<Modal bind:this={asyncModal}>
+  <ModalContent
+    showCancelButton={false}
+    showConfirmButton={false}
+    showCloseIcon={false}
+  >
+    <Layout justifyItems="center">
+      <ProgressCircle size="XL" />
+    </Layout>
+  </ModalContent>
+</Modal>
+
+<!-- Publish complete -->
+<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 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .success-icon {
+    color: var(--spectrum-global-color-green-600);
+  }
+  .app-published-header .app-published-header-text {
+    padding-left: var(--spacing-l);
+  }
+</style>

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: selectedApp.appId,
+      eventSource: EventSource.PORTAL,
+    })
+    if (selectedApp.url) {
+      window.open(`/app${selectedApp.url}`)
+    } else {
+      window.open(`/${selectedApp.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: selectedApp.appId,
+      })
+      await API.unpublishApp(selectedApp.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>

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

@@ -7,12 +7,10 @@
   import { notifications } from "@budibase/bbui"
   import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
   import { store } from "builderStore"
-
+  import {
-  const DeploymentStatus = {
+    checkIncomingDeploymentStatus,
-    SUCCESS: "SUCCESS",
+    DeploymentStatus,
-    PENDING: "PENDING",
+  } from "components/deploy/utils"
-    FAILURE: "FAILURE",
-  }
 
   const DATE_OPTIONS = {
     fullDate: {
@@ -42,30 +40,17 @@
   const formatDate = (date, format) =>
     Intl.DateTimeFormat("en-GB", DATE_OPTIONS[format]).format(date)
 
-  // Required to check any updated deployment statuses between polls
-  function checkIncomingDeploymentStatus(current, incoming) {
-    for (let incomingDeployment of incoming) {
-      if (incomingDeployment.status === DeploymentStatus.FAILURE) {
-        const currentDeployment = current.find(
-          deployment => deployment._id === incomingDeployment._id
-        )
-
-        // We have just been notified of an ongoing deployments failure
-        if (
-          !currentDeployment ||
-          currentDeployment.status === DeploymentStatus.PENDING
-        ) {
-          showErrorReasonModal(incomingDeployment.err)
-        }
-      }
-    }
-  }
-
   async function fetchDeployments() {
     try {
       const newDeployments = await API.getAppDeployments()
       if (deployments.length > 0) {
-        checkIncomingDeploymentStatus(deployments, newDeployments)
+        const pendingDeployments = checkIncomingDeploymentStatus(
+          deployments,
+          newDeployments
+        )
+        if (pendingDeployments.length) {
+          showErrorReasonModal(pendingDeployments[0].err)
+        }
       }
       deployments = newDeployments
     } catch (err) {

packages/builder/src/components/deploy/utils.js

@@ -0,0 +1,25 @@
+export const DeploymentStatus = {
+  SUCCESS: "SUCCESS",
+  PENDING: "PENDING",
+  FAILURE: "FAILURE",
+}
+
+// Required to check any updated deployment statuses between polls
+export function checkIncomingDeploymentStatus(current, incoming) {
+  return incoming.reduce((acc, incomingDeployment) => {
+    if (incomingDeployment.status === DeploymentStatus.FAILURE) {
+      const currentDeployment = current.find(
+        deployment => deployment._id === incomingDeployment._id
+      )
+
+      //We have just been notified of an ongoing deployments failure
+      if (
+        !currentDeployment ||
+        currentDeployment.status === DeploymentStatus.PENDING
+      ) {
+        acc.push(incomingDeployment)
+      }
+    }
+    return acc
+  }, [])
+}

packages/builder/src/components/start/AppRow.svelte

@@ -15,6 +15,7 @@
   export let editApp
   export let updateApp
   export let deleteApp
+  export let previewApp
   export let unpublishApp
   export let releaseLock
   export let editIcon
@@ -22,7 +23,7 @@
 
 <div class="title">
   <div style="display: flex;">
-    <div style="color: {app.icon?.color || ''}">
+    <div class="app-icon" style="color: {app.icon?.color || ''}">
       <Icon size="XL" name={app.icon?.name || "Apps"} />
     </div>
     <div class="name" on:click={() => editApp(app)}>
@@ -57,26 +58,40 @@
   </StatusLight>
 </div>
 <div class="desktop">
-  <StatusLight active={app.deployed} neutral={!app.deployed}>
+  <div class="app-status">
-    {#if app.deployed}Published{:else}Unpublished{/if}
+    {#if app.deployed}
-  </StatusLight>
+      <Icon name="Globe" disabled={false} />
+      Published
+    {:else}
+      <Icon name="GlobeStrike" disabled={true} />
+      <span class="disabled"> Unpublished </span>
+    {/if}
+  </div>
 </div>
 <div data-cy={`row_actions_${app.appId}`}>
+  <div class="app-row-actions">
+    {#if app.deployed}
+      <Button size="S" secondary quiet on:click={() => viewApp(app)}
+        >View app
+      </Button>
+    {:else}
+      <Button size="S" secondary quiet on:click={() => previewApp(app)}
+        >Preview
+      </Button>
+    {/if}
     <Button
       size="S"
+      cta
       disabled={app.lockedOther}
       on:click={() => editApp(app)}
-    secondary
     >
-    Open
+      Edit
     </Button>
-  <ActionMenu align="right">
+  </div>
-    <Icon hoverable slot="control" name="More" />
+  <ActionMenu align="right" dataCy="app-row-actions-menu-popover">
-    {#if app.deployed}
+    <span slot="control" class="app-row-actions-icon">
-      <MenuItem on:click={() => viewApp(app)} icon="GlobeOutline">
+      <Icon hoverable name="More" />
-        View published app
+    </span>
-      </MenuItem>
-    {/if}
     {#if app.lockedYou}
       <MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
         Release lock
@@ -97,6 +112,18 @@
 </div>
 
 <style>
+  .app-row-actions {
+    grid-gap: var(--spacing-s);
+    display: grid;
+    grid-template-columns: 75px 75px;
+  }
+  .app-status {
+    display: grid;
+    grid-template-columns: 24px 100px;
+  }
+  .app-status span.disabled {
+    opacity: 0.3;
+  }
   .name {
     text-decoration: none;
     overflow: hidden;

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

@@ -2,9 +2,9 @@
   import { store, automationStore } from "builderStore"
   import { roles, flags } from "stores/backend"
   import { Icon, ActionGroup, Tabs, Tab, notifications } from "@budibase/bbui"
-  import DeployModal from "components/deploy/DeployModal.svelte"
   import RevertModal from "components/deploy/RevertModal.svelte"
   import VersionModal from "components/deploy/VersionModal.svelte"
+  import DeployNavigation from "components/deploy/DeployNavigation.svelte"
   import { API } from "api"
   import { auth, admin } from "stores/portal"
   import { isActive, goto, layout, redirect } from "@roxi/routify"
@@ -24,7 +24,7 @@
     $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
   )
 
-  function previewApp() {
+  const previewApp = () => {
     window.open(`/${application}`)
   }
 
@@ -112,7 +112,7 @@
         <VersionModal />
         <RevertModal />
         <Icon name="Play" hoverable on:click={previewApp} />
-        <DeployModal />
+        <DeployNavigation {application} />
       </div>
     </div>
     <slot />
@@ -128,7 +128,6 @@
     width: 100%;
     background: var(--background);
   }
-
   .root {
     min-height: 100%;
     height: 100%;

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

@@ -28,7 +28,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import AppRow from "components/start/AppRow.svelte"
   import { AppStatus } from "constants"
-  import analytics, { Events } from "analytics"
+  import analytics, { Events, EventSource } from "analytics"
   import Logo from "assets/bb-space-man.svg"
 
   let sortBy = "name"
@@ -167,6 +167,10 @@
   }
 
   const viewApp = app => {
+    analytics.captureEvent(Events.APP.VIEW_PUBLISHED, {
+      appId: app.appId,
+      eventSource: EventSource.PORTAL,
+    })
     if (app.url) {
       window.open(`/app${app.url}`)
     } else {
@@ -174,6 +178,10 @@
     }
   }
 
+  const previewApp = app => {
+    window.open(`/${app.devId}`)
+  }
+
   const editApp = app => {
     if (app.lockedOther) {
       notifications.error(
@@ -205,6 +213,9 @@
       return
     }
     try {
+      analytics.captureEvent(Events.APP.UNPUBLISHED, {
+        appId: selectedApp.appId,
+      })
       await API.unpublishApp(selectedApp.prodId)
       await apps.load()
       notifications.success("App unpublished successfully")
@@ -392,6 +403,7 @@
                 {exportApp}
                 {deleteApp}
                 {updateApp}
+                {previewApp}
               />
             {/each}
           </div>
@@ -444,6 +456,7 @@
   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>

packages/server/src/api/controllers/application.ts

@@ -386,24 +386,32 @@ export const revertClient = async (ctx: any) => {
 }
 
 const destroyApp = async (ctx: any) => {
-  const db = getAppDB()
+  let appId = ctx.params.appId
+  let isUnpublish = ctx.query && ctx.query.unpublish
 
+  if (isUnpublish) {
+    appId = getProdAppID(appId)
+  }
+
+  const db = isUnpublish ? getProdAppDB() : getAppDB()
   const result = await db.destroy()
-  if (ctx.query?.unpublish) {
+
+  if (isUnpublish) {
     await quotas.removePublishedApp()
   } else {
     await quotas.removeApp()
   }
+
   /* istanbul ignore next */
-  if (!env.isTest() && !ctx.query.unpublish) {
+  if (!env.isTest() && !isUnpublish) {
-    await deleteApp(ctx.params.appId)
+    await deleteApp(appId)
   }
-  if (ctx.query && ctx.query.unpublish) {
+  if (isUnpublish) {
-    await cleanupAutomations(ctx.params.appId)
+    await cleanupAutomations(appId)
   }
   // make sure the app/role doesn't stick around after the app has been deleted
-  await removeAppFromUserRoles(ctx, ctx.params.appId)
+  await removeAppFromUserRoles(ctx, appId)
-  await appCache.invalidateAppMetadata(ctx.params.appId)
+  await appCache.invalidateAppMetadata(appId)
   return result
 }
 

packages/server/src/api/controllers/deploy/index.ts

@@ -110,6 +110,9 @@ async function deployApp(deployment: any) {
     console.log("replication complete.. replacing app meta doc")
     const db = getProdAppDB()
     const appDoc = await db.get(DocumentTypes.APP_METADATA)
+
+    deployment.appUrl = appDoc.url
+
     appDoc.appId = productionAppId
     appDoc.instance._id = productionAppId
     await db.put(appDoc)