Merge pull request #6179 from mslourens/move_unpublish_action

6161 - move the unpublish link

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

@@ -1,4 +1,5 @@
 import filterTests from "../support/filterTests"
+import { APP_TABLE_APP_NAME, DEPLOY_SUCCESS_MODAL } from "../support/interact";
 const interact = require('../support/interact')
 
 filterTests(['all'], () => {
@@ -20,7 +21,6 @@ filterTests(['all'], () => {
 
       cy.get(interact.APP_TABLE_ROW_ACTION).eq(0)
       .within(() => {
-        cy.get(interact.SPECTRUM_BUTTON_TEMPLATE).contains("Preview")
         cy.get(interact.SPECTRUM_BUTTON_TEMPLATE).contains("Edit").click({ force: true })
       })
 
@@ -39,7 +39,7 @@ filterTests(['all'], () => {
       });
 
       //Verify that the app url is presented correctly to the user
-      cy.get(interact.DEPLOY_APP_MODAL)
+      cy.get(interact.DEPLOY_SUCCESS_MODAL)
       .should("be.visible")
       .within(() => {
         let appUrl = Cypress.config().baseUrl + '/app/cypress-tests'
@@ -72,7 +72,7 @@ filterTests(['all'], () => {
       })
     })
 
-    it("Should unpublish an application from the top navigation and reflect the status change", () => {
+    it("Should unpublish an application using the link and reflect the status change", () => {
       //Assuming the previous test app exists and is published
 
       cy.visit(`${Cypress.config().baseUrl}/builder`)
@@ -85,17 +85,11 @@ filterTests(['all'], () => {
 
       cy.get(interact.APP_TABLE_ROW_ACTION).eq(0)
       .within(() => {
-        cy.get(interact.SPECTRUM_BUTTON).contains("View app")
-        cy.get(interact.SPECTRUM_BUTTON).contains("Edit").click({ force: true })
+        cy.get(interact.SPECTRUM_BUTTON).contains("View")
+        cy.get(interact.APP_TABLE_APP_NAME).click({ force: true })
       })
 
-      //The published status 
-      cy.get(interact.DEPLOYMENT_TOP_GLOBE).should("exist")
-      .click({ force: true })
-
-      cy.get(interact.PUBLISH_POPOVER_MENU).should("be.visible")
-      cy.get("[data-cy='publish-popover-menu'] [data-cy='publish-popover-action']")
-      .click({ force : true })
+      cy.get(interact.SPECTRUM_LINK).contains('Unpublish').click();
 
       cy.get(interact.UNPUBLISH_MODAL).should("be.visible")
       .within(() => {

packages/builder/cypress/support/interact.js

@@ -26,6 +26,7 @@ export const SPECTRUM_POPOVER = ".spectrum-Popover"
 export const OPTION_SOURCE_PROP_CONROL = '[data-cy="optionsSource-prop-control'
 export const APP_TABLE_STATUS = ".appTable .app-status"
 export const APP_TABLE_ROW_ACTION = ".appTable .app-row-actions"
+export const APP_TABLE_APP_NAME = '[data-cy="app-name-link"]'
 export const DEPLOYMENT_TOP_NAV_GLOBESTRIKE =
   ".deployment-top-nav svg[aria-label=GlobeStrike]"
 export const DEPLOYMENT_TOP_GLOBE = ".deployment-top-nav svg[aria-label=Globe]"
@@ -33,13 +34,14 @@ export const PUBLISH_POPOVER_MENU = '[data-cy="publish-popover-menu"]'
 export const PUBLISH_POPOVER_ACTION = '[data-cy="publish-popover-action"]'
 export const PUBLISH_POPOVER_MESSAGE = ".publish-popover-message"
 export const SPECTRUM_BUTTON = ".spectrum-Button"
+export const SPECTRUM_LINK = ".spectrum-Link"
 export const TOPRIGHTNAV_BUTTON_SPECTRUM = ".toprightnav button.spectrum-Button"
 
 //createComponents
 export const SETTINGS = "[data-cy=Settings]"
 export const SETTINGS_INPUT = "[data-cy=setting-text] input"
 export const DESIGN = "[data-cy=Design]"
-export const FONT_SIZE_PROP_CONTRO = "[data-cy=font-size-prop-control]"
+export const FONT_SIZE_PROP_CONTROL = "[data-cy=font-size-prop-control]"
 export const DATA_CY_DATASOURCE = "[data-cy=setting-dataSource]"
 export const DROPDOWN_CONTAINER = ".dropdown-container"
 export const SPECTRUM_PICKER = ".spectrum-Picker"
@@ -53,6 +55,8 @@ export const NAV_ITEMS_CONTAINER = ".nav-items-container"
 
 //publishWorkFlow
 export const DEPLOY_APP_MODAL = ".spectrum-Modal [data-cy=deploy-app-modal]"
+export const DEPLOY_SUCCESS_MODAL =
+  ".spectrum-Modal [data-cy=deploy-app-success-modal]"
 export const DEPLOY_APP_URL_INPUT = "[data-cy=deployed-app-url] input"
 export const GLOBESTRIKE = "svg[aria-label=GlobeStrike]"
 export const GLOBE = "svg[aria-label=Globe]"

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

@@ -101,7 +101,7 @@
     confirmText="Done"
     cancelText="View App"
     onCancel={viewApp}
-    dataCy={"deploy-app-success-modal"}
+    dataCy="deploy-app-success-modal"
   >
     <div slot="header" class="app-published-header">
       <svg

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

@@ -20,7 +20,7 @@
     <div class="app-icon" style="color: {app.icon?.color || ''}">
       <Icon size="XL" name={app.icon?.name || "Apps"} />
     </div>
-    <div class="name" on:click={() => appOverview(app)}>
+    <div class="name" data-cy="app-name-link" on:click={() => appOverview(app)}>
       <Heading size="XS">
         {app.name}
       </Heading>

packages/builder/src/pages/builder/portal/overview/[application]/index.svelte

@@ -273,12 +273,6 @@
                 Export
               </MenuItem>
               {#if isPublished}
-                <MenuItem
-                  on:click={() => unpublishApp(selectedApp)}
-                  icon="GlobeRemove"
-                >
-                  Unpublish
-                </MenuItem>
                 <MenuItem on:click={() => copyAppId(selectedApp)} icon="Copy">
                   Copy App ID
                 </MenuItem>
@@ -305,6 +299,7 @@
               app={selectedApp}
               deployments={latestDeployments}
               navigateTab={handleTabChange}
+              on:unpublish={e => unpublishApp(e.detail)}
             />
           </Tab>
           {#if false}

packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte

@@ -13,10 +13,12 @@
   import clientPackage from "@budibase/client/package.json"
   import { processStringSync } from "@budibase/string-templates"
   import { users, auth } from "stores/portal"
+  import { createEventDispatcher } from "svelte"
 
   export let app
   export let deployments
   export let navigateTab
+  const dispatch = createEventDispatcher()
 
   const userInit = async () => {
     try {
@@ -26,6 +28,10 @@
     }
   }
 
+  const unpublishApp = () => {
+    dispatch("unpublish", app)
+  }
+
   let userPromise = userInit()
 
   $: updateAvailable = clientPackage.version !== $store.version
@@ -72,6 +78,9 @@
                     new Date(deployments[0].updatedAt).getTime(),
                 }
               )}
+              {#if isPublished}
+                - <Link on:click={unpublishApp}>Unpublish</Link>
+              {/if}
             {/if}
             {#if !deployments?.length}
               -