From b3d326c41b080a3816a97c0190c2eb319a4e149f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 10 Jun 2022 11:04:17 +0100
Subject: [PATCH 1/5] Update basic user onboarding modal to be readonly rather
 than disabled and lighten disabled state text

---
 packages/bbui/src/Form/Core/TextField.svelte                  | 4 ++++
 .../manage/users/_components/BasicOnboardingModal.svelte      | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 6a64876a2c..0a723c140a 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -112,4 +112,8 @@
   .spectrum-Textfield {
     width: 100%;
   }
+  input:disabled {
+    color: var(--spectrum-global-color-gray-600) !important;
+    -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
index a4b06f45a2..c9d4798696 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
@@ -51,7 +51,7 @@
     bind:value={$email}
     error={$touched && $error}
   />
-  <Input disabled label="Password" value={password} />
+  <Input readonly label="Password" value={password} />
   <div>
     <div class="toggle">
       <Label size="L">Development access</Label>

From eb2fd47e4425aae7ca6007fc1c4d757b64e7ac70 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 10 Jun 2022 12:15:58 +0100
Subject: [PATCH 2/5] Add new styles setting to button to use update spectrum
 styles

---
 packages/bbui/src/Button/Button.svelte | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index e8f6b4500e..36abcbf4da 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -14,6 +14,7 @@
   export let active = false
   export let tooltip = undefined
   export let dataCy
+  export let newStyles = false
 
   let showTooltip = false
 </script>
@@ -25,6 +26,7 @@
   class:spectrum-Button--warning={warning}
   class:spectrum-Button--overBackground={overBackground}
   class:spectrum-Button--quiet={quiet}
+  class:new-styles={newStyles}
   class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
@@ -93,4 +95,20 @@
     padding-left: var(--spacing-m);
     line-height: 0;
   }
+  .spectrum-Button--primary.new-styles {
+    background: var(--spectrum-global-color-gray-800);
+    border-color: transparent;
+    color: var(--spectrum-global-color-gray-50);
+  }
+  .spectrum-Button--primary.new-styles:hover {
+    background: var(--spectrum-global-color-gray-900);
+  }
+  .spectrum-Button--secondary.new-styles {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: transparent;
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .spectrum-Button--secondary.new-styles:hover {
+    background: var(--spectrum-global-color-gray-300);
+  }
 </style>

From 9d38fa938f82e96cc2cf25cb1c1c5cac4f020e19 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 10 Jun 2022 12:16:28 +0100
Subject: [PATCH 3/5] Update apps list page and app rows to match new styles
 and behaviours

---
 .../src/components/common/AppLockModal.svelte |   6 +-
 .../src/components/start/AppRow.svelte        |  53 ++-----
 .../pages/builder/portal/apps/index.svelte    | 141 +-----------------
 3 files changed, 20 insertions(+), 180 deletions(-)

diff --git a/packages/builder/src/components/common/AppLockModal.svelte b/packages/builder/src/components/common/AppLockModal.svelte
index 75e2b15925..5ca35f05db 100644
--- a/packages/builder/src/components/common/AppLockModal.svelte
+++ b/packages/builder/src/components/common/AppLockModal.svelte
@@ -87,7 +87,7 @@
     {#if lockedByYou && getExpiryDuration(app) > 0}
       <span class="lock-expiry-body">
         {processStringSync(
-          "This lock will expire in {{ duration time 'millisecond' }} from now",
+          "This lock will expire in {{ duration time 'millisecond' }} from now.",
           {
             time: getExpiryDuration(app),
           }
@@ -141,4 +141,8 @@
     gap: var(--spacing-s);
     max-width: 175px;
   }
+  .lock-status-text {
+    font-weight: 400;
+    color: var(--spectrum-global-color-gray-800);
+  }
 </style>
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index d30b8079d7..49f99c9f77 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -1,18 +1,11 @@
 <script>
-  import { Heading, Button, Icon, ActionMenu, MenuItem } from "@budibase/bbui"
+  import { Heading, Button, Icon } from "@budibase/bbui"
   import AppLockModal from "../common/AppLockModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
 
   export let app
-  export let exportApp
   export let editApp
-  export let updateApp
-  export let deleteApp
-  export let unpublishApp
   export let appOverview
-  export let releaseLock
-  export let editIcon
-  export let copyAppId
 </script>
 
 <div class="title" data-cy={`${app.devId}`}>
@@ -20,7 +13,7 @@
     <div class="app-icon" style="color: {app.icon?.color || ''}">
       <Icon size="XL" name={app.icon?.name || "Apps"} />
     </div>
-    <div class="name" data-cy="app-name-link" on:click={() => appOverview(app)}>
+    <div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
       <Heading size="XS">
         {app.name}
       </Heading>
@@ -37,7 +30,7 @@
   {/if}
 </div>
 <div class="desktop">
-  <AppLockModal {app} buttonSize="S" />
+  <AppLockModal {app} buttonSize="M" />
 </div>
 <div class="desktop">
   <div class="app-status">
@@ -52,47 +45,27 @@
 </div>
 <div data-cy={`row_actions_${app.appId}`}>
   <div class="app-row-actions">
+    <Button size="S" secondary newStyles on:click={() => appOverview(app)}>
+      Manage
+    </Button>
     <Button
       size="S"
-      secondary
-      quiet
+      primary
+      newStyles
       disabled={app.lockedOther}
       on:click={() => editApp(app)}
-      >Edit
+    >
+      Edit
     </Button>
-    <Button size="S" cta on:click={() => appOverview(app)}>View</Button>
   </div>
-  <ActionMenu align="right" dataCy="app-row-actions-menu-popover">
-    <span slot="control" class="app-row-actions-icon">
-      <Icon hoverable name="More" />
-    </span>
-    {#if app.lockedYou}
-      <MenuItem on:click={() => releaseLock(app)} icon="LockOpen">
-        Release lock
-      </MenuItem>
-    {/if}
-    <MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem>
-    {#if app.deployed}
-      <MenuItem on:click={() => unpublishApp(app)} icon="GlobeRemove">
-        Unpublish
-      </MenuItem>
-      <MenuItem on:click={() => copyAppId(app)} icon="Copy">
-        Copy App ID
-      </MenuItem>
-    {/if}
-    {#if !app.deployed}
-      <MenuItem on:click={() => updateApp(app)} icon="Edit">Edit</MenuItem>
-      <MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
-    {/if}
-    <MenuItem on:click={() => editIcon(app)} icon="Brush">Edit icon</MenuItem>
-  </ActionMenu>
 </div>
 
 <style>
   .app-row-actions {
     grid-gap: var(--spacing-s);
-    display: grid;
-    grid-template-columns: 75px 75px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
   }
   .app-status {
     display: grid;
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 2892a9b723..ac7bb55f33 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -3,20 +3,17 @@
     Heading,
     Layout,
     Button,
-    Input,
     Select,
     Modal,
     Page,
     notifications,
     Body,
     Search,
-    Helpers,
   } from "@budibase/bbui"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import UpdateAppModal from "components/start/UpdateAppModal.svelte"
-  import ChooseIconModal from "components/start/ChooseIconModal.svelte"
   import ExportAppModal from "components/start/ExportAppModal.svelte"
 
   import { store, automationStore } from "builderStore"
@@ -25,10 +22,9 @@
   import { apps, auth, admin, templates } from "stores/portal"
   import download from "downloadjs"
   import { goto } from "@roxi/routify"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import AppRow from "components/start/AppRow.svelte"
   import { AppStatus } from "constants"
-  import analytics, { Events, EventSource } from "analytics"
+  import analytics, { Events } from "analytics"
   import Logo from "assets/bb-space-man.svg"
 
   let sortBy = "name"
@@ -36,15 +32,11 @@
   let selectedApp
   let creationModal
   let updatingModal
-  let deletionModal
-  let unpublishModal
   let exportModal
-  let iconModal
   let creatingApp = false
   let loaded = $apps?.length || $templates?.length
   let searchTerm = ""
   let cloud = $admin.cloud
-  let appName = ""
   let creatingFromTemplate = false
 
   const resolveWelcomeMessage = (auth, apps) => {
@@ -170,18 +162,6 @@
     creatingApp = false
   }
 
-  const viewApp = app => {
-    analytics.captureEvent(Events.APP.VIEW_PUBLISHED, {
-      appId: app.appId,
-      eventSource: EventSource.PORTAL,
-    })
-    if (app.url) {
-      window.open(`/app${app.url}`)
-    } else {
-      window.open(`/${app.prodId}`)
-    }
-  }
-
   const appOverview = app => {
     $goto(`../overview/${app.devId}`)
   }
@@ -196,79 +176,6 @@
     $goto(`../../app/${app.devId}`)
   }
 
-  const editIcon = app => {
-    selectedApp = app
-    iconModal.show()
-  }
-
-  const exportApp = app => {
-    exportModal.show()
-    selectedApp = app
-  }
-
-  const unpublishApp = app => {
-    selectedApp = app
-    unpublishModal.show()
-  }
-
-  const confirmUnpublishApp = async () => {
-    if (!selectedApp) {
-      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 deleteApp = app => {
-    selectedApp = app
-    deletionModal.show()
-  }
-
-  const confirmDeleteApp = async () => {
-    if (!selectedApp) {
-      return
-    }
-    try {
-      await API.deleteApp(selectedApp?.devId)
-      await apps.load()
-      // Get checklist, just in case that was the last app
-      await admin.init()
-      notifications.success("App deleted successfully")
-    } catch (err) {
-      notifications.error("Error deleting app")
-    }
-    selectedApp = null
-    appName = null
-  }
-
-  const updateApp = async app => {
-    selectedApp = app
-    updatingModal.show()
-  }
-
-  const releaseLock = async app => {
-    try {
-      await API.releaseAppLock(app.devId)
-      await apps.load()
-      notifications.success("Lock released successfully")
-    } catch (err) {
-      notifications.error("Error releasing lock")
-    }
-  }
-
-  const copyAppId = async app => {
-    await Helpers.copyToClipboard(app.prodId)
-    notifications.success("App ID copied to clipboard.")
-  }
-
   function createAppFromTemplateUrl(templateKey) {
     // validate the template key just to make sure
     const templateParts = templateKey.split("/")
@@ -416,19 +323,7 @@
 
           <div class="appTable" class:unlocked>
             {#each filteredApps as app (app.appId)}
-              <AppRow
-                {copyAppId}
-                {releaseLock}
-                {editIcon}
-                {app}
-                {unpublishApp}
-                {viewApp}
-                {editApp}
-                {exportApp}
-                {deleteApp}
-                {updateApp}
-                {appOverview}
-              />
+              <AppRow {app} {editApp} {appOverview} />
             {/each}
           </div>
         </Layout>
@@ -462,35 +357,6 @@
   <ExportAppModal app={selectedApp} />
 </Modal>
 
-<ConfirmDialog
-  bind:this={deletionModal}
-  title="Confirm deletion"
-  okText="Delete app"
-  onOk={confirmDeleteApp}
-  onCancel={() => (appName = null)}
-  disabled={appName !== selectedApp?.name}
->
-  Are you sure you want to delete the app <b>{selectedApp?.name}</b>?
-
-  <p>Please enter the app name below to confirm.</p>
-  <Input
-    bind:value={appName}
-    data-cy="delete-app-confirmation"
-    placeholder={selectedApp?.name}
-  />
-</ConfirmDialog>
-<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>
-
-<ChooseIconModal app={selectedApp} bind:this={iconModal} />
-
 <style>
   .appTable {
     border-top: var(--border-light);
@@ -547,12 +413,9 @@
     height: 70px;
     display: grid;
     align-items: center;
-    grid-gap: var(--spacing-xl);
-    grid-template-columns: auto 1fr;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: 0 var(--spacing-s);
   }
   .appTable :global(> div) {
     border-bottom: var(--border-light);

From d8c37eb0b10497c6567dd53f6b34b1073c55d1ae Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 13 Jun 2022 10:56:50 +0100
Subject: [PATCH 4/5] Fix crash when running automations with an app action
 trigger without parameters

---
 packages/server/src/automations/triggers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/automations/triggers.js b/packages/server/src/automations/triggers.js
index deff9f7503..216f24be02 100644
--- a/packages/server/src/automations/triggers.js
+++ b/packages/server/src/automations/triggers.js
@@ -97,7 +97,7 @@ exports.externalTrigger = async function (
     // values are likely to be submitted as strings, so we shall convert to correct type
     const coercedFields = {}
     const fields = automation.definition.trigger.inputs.fields
-    for (let key of Object.keys(fields)) {
+    for (let key of Object.keys(fields || {})) {
       coercedFields[key] = coerce(params.fields[key], fields[key])
     }
     params.fields = coercedFields

From aeae3b04655709a006e5116816017fbd608ff118 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 15 Jun 2022 15:08:03 +0100
Subject: [PATCH 5/5] Update cypress tests

---
 .../cypress/integration/appOverview.spec.js   | 408 +++++++++++-------
 .../integration/createComponents.spec.js      | 321 +++++---------
 .../integration/renameAnApplication.spec.js   |  71 +--
 packages/builder/cypress/support/commands.js  |  33 +-
 4 files changed, 401 insertions(+), 432 deletions(-)

diff --git a/packages/builder/cypress/integration/appOverview.spec.js b/packages/builder/cypress/integration/appOverview.spec.js
index 090e4e369b..4b9d072338 100644
--- a/packages/builder/cypress/integration/appOverview.spec.js
+++ b/packages/builder/cypress/integration/appOverview.spec.js
@@ -1,7 +1,7 @@
 import filterTests from "../support/filterTests"
 import clientPackage from "@budibase/client/package.json"
 
-filterTests(['all'], () => {
+filterTests(["all"], () => {
   context("Application Overview screen", () => {
     before(() => {
       cy.login()
@@ -10,31 +10,19 @@ filterTests(['all'], () => {
 
     it("Should be accessible from the applications list", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      
-      cy.get(".appTable .title").eq(0)
-      .invoke('attr', 'data-cy')
-      .then(($dataCy) => {
-        const dataCy = $dataCy;
-        cy.get(".appTable .name").eq(0).click()
+      cy.get(".appTable .title")
+        .eq(0)
+        .invoke("attr", "data-cy")
+        .then($dataCy => {
+          const dataCy = $dataCy
+          cy.get(".appTable .app-row-actions button")
+            .contains("Manage")
+            .click({ force: true })
 
-        cy.location().should((loc) => {
-          expect(loc.pathname).to.eq('/builder/portal/overview/' + dataCy)
+          cy.location().should(loc => {
+            expect(loc.pathname).to.eq("/builder/portal/overview/" + dataCy)
+          })
         })
-      })
-
-      cy.visit(`${Cypress.config().baseUrl}/builder`)
-
-      cy.get(".appTable .title").eq(0)
-      .invoke('attr', 'data-cy')
-      .then(($dataCy) => {
-        const dataCy = $dataCy;
-        cy.get(".appTable .app-row-actions button").contains("View").click({force: true})
-
-        cy.location().should((loc) => {
-          expect(loc.pathname).to.eq('/builder/portal/overview/' + dataCy)
-        })
-      })
-
     })
 
     // Find a more suitable place for this.
@@ -43,24 +31,28 @@ filterTests(['all'], () => {
 
       cy.get(".appTable .lock-status").eq(0).contains("Locked by you").click()
 
-      cy.unlockApp({ owned : true })
+      cy.unlockApp({ owned: true })
 
       cy.get(".appTable").should("exist")
-      cy.get(".lock-status").should('not.be.visible')
+      cy.get(".lock-status").should("not.be.visible")
     })
-    
+
     it("Should allow unlocking in the app overview screen", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
 
-      cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true})
+      cy.get(".appTable .app-row-actions button")
+        .contains("Edit")
+        .eq(0)
+        .click({ force: true })
       cy.wait(1000)
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      
-      cy.get(".appTable .name").eq(0).click()
-
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
       cy.get(".lock-status").eq(0).contains("Locked by you").click()
 
-      cy.unlockApp({ owned : true })
+      cy.unlockApp({ owned: true })
 
       cy.get(".lock-status").should("not.be.visible")
     })
@@ -68,107 +60,149 @@ filterTests(['all'], () => {
     it("Should reflect the deploy state of an app that hasn't been published.", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
 
-      cy.get(".appTable .name").eq(0).click()
-      
-      cy.get(".header-right button.spectrum-Button[data-cy='view-app']").should("be.disabled")
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
+      cy.get(".header-right button.spectrum-Button[data-cy='view-app']").should(
+        "be.disabled"
+      )
 
       cy.get(".spectrum-Tabs-item.is-selected").contains("Overview")
       cy.get(".overview-tab").should("be.visible")
 
       cy.get(".overview-tab [data-cy='app-status']").within(() => {
         cy.get(".status-display").contains("Unpublished")
-        cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should("exist")
+        cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should(
+          "exist"
+        )
         cy.get(".status-text").contains("-")
       })
     })
 
     it("Should reflect the app deployment state", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true})
-      
-      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)
-      });
+      cy.get(".appTable .app-row-actions button")
+        .contains("Edit")
+        .eq(0)
+        .click({ force: true })
+
+      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)
+        })
 
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
-
-      cy.get(".header-right button.spectrum-Button[data-cy='view-app']").should("not.be.disabled")
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
+      cy.get(".header-right button.spectrum-Button[data-cy='view-app']").should(
+        "not.be.disabled"
+      )
 
       cy.get(".overview-tab [data-cy='app-status']").within(() => {
         cy.get(".status-display").contains("Published")
-        cy.get(".status-display .icon svg[aria-label='GlobeCheck']").should("exist")
+        cy.get(".status-display .icon svg[aria-label='GlobeCheck']").should(
+          "exist"
+        )
         cy.get(".status-text").contains("Last published a few seconds ago")
       })
     })
 
-    it("Should reflect an application that has been unpublished", () => { 
+    it("Should reflect an application that has been unpublished", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true})
+      cy.get(".appTable .app-row-actions button")
+        .contains("Edit")
+        .eq(0)
+        .click({ force: true })
 
-      cy.get(".deployment-top-nav svg[aria-label='Globe']")
-      .click({ force: true })
+      cy.get(".deployment-top-nav svg[aria-label='Globe']").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(
+        "[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.wait(1000)
 
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
-
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
       cy.get(".overview-tab [data-cy='app-status']").within(() => {
         cy.get(".status-display").contains("Unpublished")
-        cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should("exist")
+        cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should(
+          "exist"
+        )
         cy.get(".status-text").contains("Last published a few seconds ago")
       })
     })
 
-    it("Should allow the editing of the application icon and colour", () => { 
+    it("Should allow the editing of the application icon and colour", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable", { timeout: 2000})
-        .within(() => {
-          cy.get(".app-row-actions-icon").eq(0).click()
-        })
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
+      cy.wait(1000)
+      cy.get(".app-overview-actions-icon").within(() => {
+        cy.get(".spectrum-Icon").click({ force: true })
+      })
       cy.get(".spectrum-Menu").contains("Edit icon").click()
       // Select random icon
       cy.get(".grid").within(() => {
-          cy.get(".icon-item").eq(Math.floor(Math.random() * 23) + 1).click()
+        cy.get(".icon-item")
+          .eq(Math.floor(Math.random() * 23) + 1)
+          .click()
       })
       // Select random colour
       cy.get(".fill").click()
       cy.get(".colors").within(() => {
-          cy.get(".color").eq(Math.floor(Math.random() * 33) + 1).click()
+        cy.get(".color")
+          .eq(Math.floor(Math.random() * 33) + 1)
+          .click()
       })
-      cy.intercept('**/applications/**').as('iconChange')
+      cy.intercept("**/applications/**").as("iconChange")
       cy.get(".spectrum-Button").contains("Save").click({ force: true })
       cy.wait("@iconChange")
-      cy.get("@iconChange").its('response.statusCode')
-      .should('eq', 200)
+      cy.get("@iconChange").its("response.statusCode").should("eq", 200)
       // Confirm icon has changed from default
       // Confirm colour has been applied
-      cy.get(".appTable", { timeout: 2000})
-        .within(() => {
-          cy.get('[aria-label]').eq(0).children()
-          .should('have.attr', 'xlink:href').and('not.contain', '#spectrum-icon-18-Apps')
-          cy.get(".title").children().children()
-          .should('have.attr', 'style').and('contains', 'color')
-        })
+      cy.get(".appTable", { timeout: 2000 }).within(() => {
+        cy.get("[aria-label]")
+          .eq(0)
+          .children()
+          .should("have.attr", "xlink:href")
+          .and("not.contain", "#spectrum-icon-18-Apps")
+        cy.get(".title")
+          .children()
+          .children()
+          .should("have.attr", "style")
+          .and("contains", "color")
+      })
     })
 
     it("Should reflect the last time the application was edited", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
-
-      cy.get(".header-right button").contains("Edit").click({ force: true });
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
+      cy.get(".header-right button").contains("Edit").click({ force: true })
 
       cy.navigateToFrontend()
 
@@ -177,41 +211,51 @@ filterTests(['all'], () => {
       })
 
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
-
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
       cy.get(".overview-tab [data-cy='edited-by']").within(() => {
         cy.get(".editor-name").contains("You")
         cy.get(".last-edit-text").contains("Last edited a few seconds ago")
       })
-    });
+    })
 
     it("Should reflect application version is up-to-date", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
-
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
       cy.get(".overview-tab [data-cy='app-version']").within(() => {
         cy.get(".version-status").contains("You're running the latest!")
       })
-    });
+    })
 
     it("Should navigate to the settings tab when clicking the App Version card header", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
-
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
       cy.get(".spectrum-Tabs-item.is-selected").contains("Overview")
       cy.get(".overview-tab").should("be.visible")
 
-      cy.get(".overview-tab [data-cy='app-version'] .dash-card-header").click({ force : true })
+      cy.get(".overview-tab [data-cy='app-version'] .dash-card-header").click({
+        force: true,
+      })
 
       cy.get(".spectrum-Tabs-item.is-selected").contains("Settings")
       cy.get(".settings-tab").should("be.visible")
       cy.get(".overview-tab").should("not.exist")
-
-    });
+    })
 
     it("Should allow the upgrading of an application, if available.", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
       cy.wait(500)
 
       cy.location().then(loc => {
@@ -219,8 +263,7 @@ filterTests(['all'], () => {
         const appId = params[params.length - 1]
         cy.log(appId)
         //Downgrade the app for the test
-        cy.alterAppVersion(appId, "0.0.1-alpha.0")
-        .then(()=>{
+        cy.alterAppVersion(appId, "0.0.1-alpha.0").then(() => {
           cy.reload()
           cy.wait(1000)
           cy.log("Current deployment version: " + clientPackage.version)
@@ -228,115 +271,163 @@ filterTests(['all'], () => {
           cy.get(".version-status a").contains("Update").click()
           cy.get(".spectrum-Tabs-item.is-selected").contains("Settings")
 
-          cy.get(".version-section .page-action button").contains("Update").click({ force: true })
-          
-          cy.intercept('POST', '**/applications/**/client/update').as('updateVersion')
-          cy.get(".spectrum-Modal.is-open button").contains("Update").click({ force: true })
+          cy.get(".version-section .page-action button")
+            .contains("Update")
+            .click({ force: true })
+
+          cy.intercept("POST", "**/applications/**/client/update").as(
+            "updateVersion"
+          )
+          cy.get(".spectrum-Modal.is-open button")
+            .contains("Update")
+            .click({ force: true })
 
           cy.wait("@updateVersion")
-          .its('response.statusCode').should('eq', 200)
-          .then(() => {
-            cy.visit(`${Cypress.config().baseUrl}/builder`)
-            cy.get(".appTable .name").eq(0).click()
-
-            cy.get(".spectrum-Tabs-item").contains("Overview").click({ force: true })
-            cy.get(".overview-tab [data-cy='app-version']").within(() => {
-              cy.get(".spectrum-Heading").contains(clientPackage.version)
-              cy.get(".version-status").contains("You're running the latest!")
+            .its("response.statusCode")
+            .should("eq", 200)
+            .then(() => {
+              cy.visit(`${Cypress.config().baseUrl}/builder`)
+              cy.get(".appTable .app-row-actions button")
+                .contains("Manage")
+                .eq(0)
+                .click({ force: true })
+              cy.get(".spectrum-Tabs-item")
+                .contains("Overview")
+                .click({ force: true })
+              cy.get(".overview-tab [data-cy='app-version']").within(() => {
+                cy.get(".spectrum-Heading").contains(clientPackage.version)
+                cy.get(".version-status").contains("You're running the latest!")
+              })
             })
-          })
         })
-      });
-      
+      })
     })
 
     it("Should allow editing of the app details.", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
-
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
       cy.get(".spectrum-Tabs-item").contains("Settings").click()
       cy.get(".spectrum-Tabs-item.is-selected").contains("Settings")
       cy.get(".settings-tab").should("be.visible")
 
-      cy.get(".details-section .page-action button").contains("Edit").click({ force: true })
+      cy.get(".details-section .page-action button")
+        .contains("Edit")
+        .click({ force: true })
       cy.updateAppName("sample name")
 
       //publish and check its disabled
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true})
+      cy.get(".appTable .app-row-actions button")
+        .contains("Edit")
+        .eq(0)
+        .click({ force: true })
 
-      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)
-      });
+      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)
+        })
 
       cy.visit(`${Cypress.config().baseUrl}/builder`)
       cy.wait(1000)
-      cy.get(".appTable .name").eq(0).click()
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
       cy.get(".spectrum-Tabs-item").contains("Settings").click()
       cy.get(".spectrum-Tabs-item.is-selected").contains("Settings")
 
       cy.get(".details-section .page-action .spectrum-Button").scrollIntoView()
       cy.wait(1000)
-      cy.get(".details-section .page-action .spectrum-Button").should("be.disabled")
-
+      cy.get(".details-section .page-action .spectrum-Button").should(
+        "be.disabled"
+      )
     })
 
     xit("Should allow copying of the published application Id", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .app-row-actions").eq(0)
-      .within(() => {
-        cy.get(".spectrum-Button").contains("Edit").click({ force: true })
-      })
+      cy.get(".appTable .app-row-actions")
+        .eq(0)
+        .within(() => {
+          cy.get(".spectrum-Button").contains("Edit").click({ force: true })
+        })
 
       cy.publishApp("sample-name")
 
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
+      cy.get(".app-overview-actions-icon > .icon").click({ force: true })
 
-      cy.get(".app-overview-actions-icon > .icon").click({ force : true })
+      cy.get("[data-cy='app-overview-menu-popover']")
+        .eq(0)
+        .within(() => {
+          cy.get(".spectrum-Menu-item")
+            .contains("Copy App ID")
+            .click({ force: true })
+        })
 
-      cy.get("[data-cy='app-overview-menu-popover']").eq(0).within(() => {
-        cy.get(".spectrum-Menu-item").contains("Copy App ID").click({ force: true })
-      })
-
-      cy.get(".spectrum-Toast-content").contains("App ID copied to clipboard.").should("be.visible")
+      cy.get(".spectrum-Toast-content")
+        .contains("App ID copied to clipboard.")
+        .should("be.visible")
     })
 
     it("Should allow unpublishing of the application", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
+      cy.get(".app-overview-actions-icon > .icon").click({ force: true })
 
-      cy.get(".app-overview-actions-icon > .icon").click({ force : true })
+      cy.get("[data-cy='app-overview-menu-popover']")
+        .eq(0)
+        .within(() => {
+          cy.get(".spectrum-Menu-item")
+            .contains("Unpublish")
+            .click({ force: true })
+          cy.wait(500)
+        })
 
-      cy.get("[data-cy='app-overview-menu-popover']").eq(0).within(() => {
-        cy.get(".spectrum-Menu-item").contains("Unpublish").click({ force: true })
-        cy.wait(500)
-      })
-
-      cy.get("[data-cy='unpublish-modal']").should("be.visible")
-      .within(() => {
-        cy.get(".confirm-wrap button").click({ force: true }
-      )})
+      cy.get("[data-cy='unpublish-modal']")
+        .should("be.visible")
+        .within(() => {
+          cy.get(".confirm-wrap button").click({ force: true })
+        })
 
       cy.get(".overview-tab [data-cy='app-status']").within(() => {
         cy.get(".status-display").contains("Unpublished")
-        cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should("exist")
+        cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should(
+          "exist"
+        )
       })
     })
 
     it("Should allow deleting of the application", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.get(".appTable .name").eq(0).click()
+      cy.get(".appTable .app-row-actions button")
+        .contains("Manage")
+        .eq(0)
+        .click({ force: true })
+      cy.get(".app-overview-actions-icon > .icon").click({ force: true })
 
-      cy.get(".app-overview-actions-icon > .icon").click({ force : true })
-
-      cy.get("[data-cy='app-overview-menu-popover']").eq(0).within(() => {
-        cy.get(".spectrum-Menu-item").contains("Delete").click({ force: true })
-        cy.wait(500)
-      })  
+      cy.get("[data-cy='app-overview-menu-popover']")
+        .eq(0)
+        .within(() => {
+          cy.get(".spectrum-Menu-item")
+            .contains("Delete")
+            .click({ force: true })
+          cy.wait(500)
+        })
 
       //The test application was renamed earlier in the spec
       cy.get(".spectrum-Dialog-grid").within(() => {
@@ -344,18 +435,17 @@ filterTests(['all'], () => {
         cy.get(".spectrum-Button--warning").click()
       })
 
-      cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/builder/portal/apps')
+      cy.location().should(loc => {
+        expect(loc.pathname).to.eq("/builder/portal/apps")
       })
 
       cy.get(".appTable").should("not.exist")
-      
+
       cy.get(".welcome .container h1").contains("Let's create your first app!")
     })
 
     after(() => {
       cy.deleteAllApps()
     })
-
   })
 })
diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js
index 47063fb026..eff7fc216f 100644
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@@ -1,7 +1,7 @@
 import filterTests from "../support/filterTests"
-const interact = require('../support/interact')
+const interact = require("../support/interact")
 
-filterTests(['all'], () => {
+filterTests(["all"], () => {
   context("Create Components", () => {
     let headlineId
 
@@ -19,17 +19,15 @@ filterTests(['all'], () => {
 
     //Use the tree to delete a selected component
     const deleteSelectedComponent = () => {
-      cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
+      cy.get(
+        ".nav-items-container .nav-item.selected .actions > div > .icon"
+      ).click({
+        force: true,
+      })
+      cy.get(".spectrum-Popover.is-open li").contains("Delete").click()
+      cy.get(".spectrum-Modal button").contains("Delete Component").click({
         force: true,
       })
-      cy.get(".spectrum-Popover.is-open li")
-        .contains("Delete")
-        .click()
-      cy.get(".spectrum-Modal button")
-        .contains("Delete Component")
-        .click({
-          force: true,
-        })
     }
 
     it("should add a container", () => {
@@ -47,18 +45,18 @@ filterTests(['all'], () => {
 
     it("should change the text of the headline", () => {
       const text = "Lorem ipsum dolor sit amet."
-      cy.get("[data-cy=setting-text] input")
-        .type(text)
-        .blur()
+      cy.get("[data-cy=setting-text] input").type(text).blur()
       cy.getComponent(headlineId).should("have.text", text)
     })
 
     it("should change the size of the headline", () => {
       cy.get("[data-cy=setting-size]").scrollIntoView().click()
       cy.get("[data-cy=setting-size]").within(() => {
-        cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click()
+        cy.get(".spectrum-Form-item li.spectrum-Menu-item")
+          .contains("3XL")
+          .click()
       })
-      
+
       cy.getComponent(headlineId).within(() => {
         cy.get(".spectrum-Heading").should("have.css", "font-size", "60px")
       })
@@ -66,13 +64,9 @@ filterTests(['all'], () => {
 
     it("should create a form and reset to match schema", () => {
       cy.addComponent("Form", "Form").then(() => {
-        cy.get("[data-cy=setting-dataSource]")
-          .contains("Custom")
-          .click()
-        cy.get(interact.DROPDOWN)
-          .contains("dog")
-          .click()
-          cy.wait(500)
+        cy.get("[data-cy=setting-dataSource]").contains("Custom").click()
+        cy.get(interact.DROPDOWN).contains("dog").click()
+        cy.wait(500)
         cy.addComponent("Form", "Field Group").then(fieldGroupId => {
           cy.contains("Update form fields").click()
           cy.get(".spectrum-Modal")
@@ -83,11 +77,9 @@ filterTests(['all'], () => {
             cy.contains("name").should("exist")
             cy.contains("age").should("exist")
             cy.contains("breed").should("exist")
-           // cy.contains("image").should("exist")
+            // cy.contains("image").should("exist")
           })
-          cy.getComponent(fieldGroupId)
-            .find("input")
-            .should("have.length", 2)
+          cy.getComponent(fieldGroupId).find("input").should("have.length", 2)
           cy.getComponent(fieldGroupId)
             .find(interact.SPECTRUM_PICKER)
             .should("have.length", 1)
@@ -97,191 +89,102 @@ filterTests(['all'], () => {
 
     it("deletes a component", () => {
       cy.addComponent("Elements", "Paragraph").then(componentId => {
-        cy.get("[data-cy=setting-_instanceName] input")
-          .type(componentId)
-          .blur()
-        cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
+        cy.get("[data-cy=setting-_instanceName] input").type(componentId).blur()
+        cy.get(
+          ".nav-items-container .nav-item.selected .actions > div > .icon"
+        ).click({
+          force: true,
+        })
+        cy.get(".spectrum-Popover.is-open li").contains("Delete").click()
+        cy.get(".spectrum-Modal button").contains("Delete Component").click({
           force: true,
         })
-        cy.get(".spectrum-Popover.is-open li")
-          .contains("Delete")
-          .click()
-        cy.get(".spectrum-Modal button")
-          .contains("Delete Component")
-          .click({
-            force: true,
-          })
         cy.getComponent(componentId).should("not.exist")
       })
     })
 
-    it("should set focus to the field setting when fields are added to a form", () => {
-      cy.addComponent("Form", "Form").then((formId) => {
-        
-        //For deletion
-        cy.get("[data-cy=setting-_instanceName] input")
-          .clear()
-          .type(formId)
-          .blur()
-
-        const componentTypeLabels = ["Text Field", "Number Field", "Password Field", 
-          "Options Picker", "Checkbox", "Long Form Field", "Date Picker", "Attachment", 
-          "JSON Field", "Multi-select Picker", "Relationship Picker"]
-
-        const refocusTest = (componentId) => {
-          cy.getComponent(componentId)
-          .find(".showMe").should("exist").click({ force: true })
-          
-          cy.get("[data-cy=setting-field] .spectrum-InputGroup")
-          .should("have.class", "is-focused")
-        }
-
-        const testFieldFocusOnCreate = (componentLabel) => {
-          cy.log("Adding: " + componentLabel)
-          return cy.addComponent("Form", componentLabel).then((componentId) => {
-           
-            refocusTest(componentId)
-
-            cy.get("[data-cy=setting-field] .spectrum-InputGroup")
-            .should("have.class", "is-focused")
-          })
-        }
-        
-        cy.wait(1000)
-        cy.wrap(componentTypeLabels).each((label) => {
-          return testFieldFocusOnCreate(label)
-        }).then(()=>{
-          cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true })
-          deleteSelectedComponent()
-        })
-      })
-    })
-
     it("should clear the iframe place holder when a form field has been set", () => {
-      cy.addComponent("Form", "Form").then((formId) => {
-        
+      cy.addComponent("Form", "Form").then(formId => {
         //For deletion
         cy.get("[data-cy=setting-_instanceName] input")
           .clear()
           .type(formId)
           .blur()
-
-        cy.get("[data-cy=setting-dataSource]")
-          .contains("Custom")
-          .click()
-        cy.get(".dropdown")
-          .contains("dog")
-          .click()
+        cy.get("[data-cy=setting-dataSource]").contains("Custom").click()
+        cy.get(".dropdown").contains("dog").click()
 
         const fieldTypeToColumnName = {
-          "Text Field" : "name", 
-          "Number Field": "age", 
-          "Options Picker": "breed"
+          "Text Field": "name",
+          "Number Field": "age",
+          "Options Picker": "breed",
         }
 
         const componentTypeLabels = Object.keys(fieldTypeToColumnName)
 
-        const testFieldFocusOnCreate = (componentLabel) => {
+        const testFieldFocusOnCreate = componentLabel => {
           cy.log("Adding: " + componentLabel)
-          return cy.addComponent("Form", componentLabel).then((componentId) => {
-           
+          return cy.addComponent("Form", componentLabel).then(componentId => {
             cy.getComponent(componentId)
-              .find(".placeholder_wrap").should("exist")
-
-            cy.get("[data-cy=setting-field] .spectrum-InputGroup")
-              .should("have.class", "is-focused")
-
+              .find(".component-placeholder")
+              .should("exist")
             cy.get("[data-cy=setting-field] button.spectrum-Picker").click()
 
             //Click the first appropriate field. They are filtered by type
-            cy.get("[data-cy=setting-field] .spectrum-Popover.is-open li.spectrum-Menu-item")
-              .contains(fieldTypeToColumnName[componentLabel]).click()
+            cy.get(
+              "[data-cy=setting-field] .spectrum-Popover.is-open li.spectrum-Menu-item"
+            )
+              .contains(fieldTypeToColumnName[componentLabel])
+              .click()
             cy.wait(500)
             cy.getComponent(componentId)
-              .find(".placeholder_wrap").should("not.exist")
+              .find(".component-placeholder")
+              .should("not.exist")
           })
         }
-        
+
         cy.wait(500)
-        cy.wrap(componentTypeLabels).each((label) => {
-          return testFieldFocusOnCreate(label)
-        }).then(()=>{
-          cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true })
-          deleteSelectedComponent()
-        })
-      })
-    })
-
-    it("should focus a charts settings on data provider if not nested in provider ", () => {
-      cy.addComponent("Layout", "Container").then((containerId) => {
-
-        //For deletion
-        cy.get("[data-cy=setting-_instanceName] input")
-          .clear()
-          .type(containerId)
-          .blur()
-
-        const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart", 
-          "Donut Chart", "Candlestick Chart"]
-
-        const refocusTest = (componentId) => {
-          cy.getComponent(componentId)
-          .find(".showMe").should("exist").click({ force: true })
-          
-          cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
-          .should("have.class", "is-focused")
-        }
-
-        const testFocusOnCreate = (chartLabel) => {
-          cy.log("Adding: " + chartLabel)
-          cy.addComponent("Chart", chartLabel).then((componentId) => {
-            refocusTest(componentId)
-
-            cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
-            .should("have.class", "is-focused")
+        cy.wrap(componentTypeLabels)
+          .each(label => {
+            return testFieldFocusOnCreate(label)
+          })
+          .then(() => {
+            cy.get(".nav-items-container .nav-item")
+              .contains(formId)
+              .click({ force: true })
+            deleteSelectedComponent()
           })
-        }
-
-        cy.wait(1000)
-        cy.wrap(chartTypeLabels).each((label) => {
-          return testFocusOnCreate(label)
-        })
-        .then(()=>{
-          cy.get(".nav-items-container .nav-item").contains(containerId).click({ force: true })
-          deleteSelectedComponent()
-        })
-
       })
-
     })
 
     it("should populate the provider for charts with a data provider in its path", () => {
-      cy.addComponent("Data", "Data Provider").then((providerId) => {
-
+      cy.addComponent("Data", "Data Provider").then(providerId => {
         //For deletion
         cy.get("[data-cy=setting-_instanceName] input")
           .clear()
           .type(providerId)
           .blur()
-
-          
         cy.get("[data-cy=setting-dataSource]")
           .contains("Choose an option")
           .click()
-
         cy.get(`[data-cy=dataSource-popover-${providerId}] ul li`)
           .contains("dog")
           .click()
 
-        const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart", 
-          "Donut Chart", "Candlestick Chart"]
+        const chartTypeLabels = [
+          "Bar Chart",
+          "Line Chart",
+          "Area Chart",
+          "Pie Chart",
+          "Donut Chart",
+          "Candlestick Chart",
+        ]
 
-        const testFocusOnCreate = (chartLabel) => {
+        const testFocusOnCreate = chartLabel => {
           cy.log("Adding: " + chartLabel)
-          cy.addComponent("Chart", chartLabel).then((componentId) => {
-
-            cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
-              .should("not.have.class", "is-focused")
+          cy.addComponent("Chart", chartLabel).then(componentId => {
+            cy.get(
+              "[data-cy=dataProvider-prop-control] .spectrum-Picker"
+            ).should("not.have.class", "is-focused")
 
             // Pre populated.
             cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker-label")
@@ -289,114 +192,86 @@ filterTests(['all'], () => {
               .should("exist")
           })
         }
-
         cy.wait(1000)
-        cy.wrap(chartTypeLabels).each((label) => {
-          return testFocusOnCreate(label)
-        })
-        .then(()=>{
-          cy.get(".nav-items-container .nav-item").contains(providerId).click({ force: true })
-          deleteSelectedComponent()
-        })
+        cy.wrap(chartTypeLabels)
+          .each(label => {
+            return testFocusOnCreate(label)
+          })
+          .then(() => {
+            cy.get(".nav-items-container .nav-item")
+              .contains(providerId)
+              .click({ force: true })
+            deleteSelectedComponent()
+          })
       })
-
     })
 
     it("should replace the placeholder when a url is set on an image", () => {
-      cy.addComponent("Elements", "Image").then((imageId) => {
-        
-        cy.get("[data-cy=url-prop-control] .spectrum-InputGroup")
-          .should("have.class", "is-focused")
-
+      cy.addComponent("Elements", "Image").then(imageId => {
         cy.get("[data-cy=setting-_instanceName] input")
           .clear()
           .type(imageId)
           .blur()
-        
         //return $("New Data Provider.Rows")[0]["Attachment"][0]["url"]
         //No minio, so just enter something local that will not reslove
         cy.get("[data-cy=url-prop-control] input[type=text]")
           .type("cypress/fixtures/ghost.png")
           .blur()
-
         cy.getComponent(imageId)
-          .find(".placeholder_wrap").should("not.exist")
-
-        cy.getComponent(imageId)
-          .find(`img[alt=${imageId}]`).should("exist")
-        
+          .find(".component-placeholder")
+          .should("not.exist")
+        cy.getComponent(imageId).find(`img[alt=${imageId}]`).should("exist")
         cy.get(".nav-items-container .nav-item")
           .contains(imageId)
           .click({ force: true })
-
         deleteSelectedComponent()
       })
     })
 
     it("should add a markdown component.", () => {
-      cy.addComponent("Elements", "Markdown Viewer").then((markdownId) => {
-        
-        cy.get("[data-cy=value-prop-control] .spectrum-InputGroup")
-          .should("have.class", "is-focused")
-        
+      cy.addComponent("Elements", "Markdown Viewer").then(markdownId => {
         cy.get("[data-cy=setting-_instanceName] input")
           .clear()
           .type(markdownId)
           .blur()
-
-        cy.get("[data-cy=value-prop-control] input[type=text].spectrum-Textfield-input")
-          .type("# Hi").blur()
-
+        cy.get(
+          "[data-cy=value-prop-control] input[type=text].spectrum-Textfield-input"
+        )
+          .type("# Hi")
+          .blur()
         cy.getComponent(markdownId)
-          .find(".placeholder_wrap").should("not.exist")
-        
+          .find(".component-placeholder")
+          .should("not.exist")
         cy.getComponent(markdownId)
-          .find(".editor-preview-full h1").contains("Hi")
-
+          .find(".editor-preview-full h1")
+          .contains("Hi")
         cy.get(".nav-items-container .nav-item")
           .contains(markdownId)
           .click({ force: true })
-
         deleteSelectedComponent()
       })
     })
 
     it("should direct the user when adding an Icon component.", () => {
-      cy.addComponent("Elements", "Icon").then((iconId) => {
-        
-        cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton")
-          .should("have.class", "is-focused")
-
-        cy.getComponent(iconId)
-          .find(".placeholder_wrap").should("exist")
-        
+      cy.addComponent("Elements", "Icon").then(iconId => {
+        cy.getComponent(iconId).find(".component-placeholder").should("exist")
         cy.get("[data-cy=setting-_instanceName] input")
           .clear()
           .type(iconId)
           .blur()
-
         cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton").click()
-
         cy.get("[data-cy=icon-popover].spectrum-Popover.is-open").within(() => {
-          cy.get(".search-input input")
-          .type("save")
-          .blur()
-
+          cy.get(".search-input input").type("save").blur()
           cy.get(".search-input button").click({ force: true })
-
           cy.get(".icon-area .icon-container").eq(0).click({ force: true })
         })
-
         cy.getComponent(iconId)
-          .find(".placeholder_wrap").should("not.exist")
-
-        cy.getComponent(iconId)
-          .find("i.ri-save-fill").should("exist")
-
+          .find(".component-placeholder")
+          .should("not.exist")
+        cy.getComponent(iconId).find("i.ri-save-fill").should("exist")
         cy.get(".nav-items-container .nav-item")
           .contains(iconId)
           .click({ force: true })
-
         deleteSelectedComponent()
       })
     })
diff --git a/packages/builder/cypress/integration/renameAnApplication.spec.js b/packages/builder/cypress/integration/renameAnApplication.spec.js
index 70c9dd4914..703535a507 100644
--- a/packages/builder/cypress/integration/renameAnApplication.spec.js
+++ b/packages/builder/cypress/integration/renameAnApplication.spec.js
@@ -1,7 +1,7 @@
 import filterTests from "../support/filterTests"
-const interact = require('../support/interact')
+const interact = require("../support/interact")
 
-filterTests(['all'], () => {
+filterTests(["all"], () => {
   context("Rename an App", () => {
     beforeEach(() => {
       cy.login()
@@ -32,12 +32,15 @@ filterTests(['all'], () => {
       const appRename = "Cypress Renamed"
       // Publish the app
       cy.get(interact.TOP_RIGHT_NAV)
-      cy.get(interact.SPECTRUM_BUTTON).contains("Publish").click({ force: true })
-      cy.get(interact.SPECTRUM_DIALOG_GRID)
-        .within(() => {
-          // Click publish again within the modal
-          cy.get(interact.SPECTRUM_BUTTON).contains("Publish").click({ force: true })
-        })
+      cy.get(interact.SPECTRUM_BUTTON)
+        .contains("Publish")
+        .click({ force: true })
+      cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
+        // Click publish again within the modal
+        cy.get(interact.SPECTRUM_BUTTON)
+          .contains("Publish")
+          .click({ force: true })
+      })
       // Rename app, Search for app, Confirm name was changed
       cy.visit(`${Cypress.config().baseUrl}/builder`)
       cy.wait(500)
@@ -64,14 +67,20 @@ filterTests(['all'], () => {
       const appName = "Cypress Tests"
       cy.visit(`${Cypress.config().baseUrl}/builder`)
       cy.wait(500)
-      cy.get(interact.SPECTRUM_BUTTON).contains("Create app").click({ force: true })
+      cy.get(interact.SPECTRUM_BUTTON)
+        .contains("Create app")
+        .click({ force: true })
       cy.contains(/Start from scratch/).click()
-      cy.get(interact.SPECTRUM_MODAL)
-        .within(() => {
-          cy.get("input").eq(0).type(appName)
-          cy.get(interact.SPECTRUM_BUTTON_GROUP).contains("Create app").click({ force: true })
-          cy.get(interact.ERROR).should("have.text", "Another app with the same name already exists")
-        })
+      cy.get(interact.SPECTRUM_MODAL).within(() => {
+        cy.get("input").eq(0).type(appName)
+        cy.get(interact.SPECTRUM_BUTTON_GROUP)
+          .contains("Create app")
+          .click({ force: true })
+        cy.get(interact.ERROR).should(
+          "have.text",
+          "Another app with the same name already exists"
+        )
+      })
     })
 
     it("should validate application names", () => {
@@ -89,7 +98,10 @@ filterTests(['all'], () => {
       cy.reload()
       cy.wait(1000)
       renameApp(numberName, specialCharName)
-      cy.get(interact.ERROR).should("have.text", "App name must be letters, numbers and spaces only")
+      cy.get(interact.ERROR).should(
+        "have.text",
+        "App name must be letters, numbers and spaces only"
+      )
       // Set app name back to Cypress Tests
       cy.reload()
       cy.wait(1000)
@@ -98,24 +110,19 @@ filterTests(['all'], () => {
 
     const renameApp = (originalName, changedName, published, noName) => {
       cy.searchForApplication(originalName)
-      cy.get(interact.APP_TABLE)
-        .within(() => {
-          cy.get(interact.AREA_LABEL_MORE).eq(0).click()
-        })
-      // Check for when an app is published
-      if (published == true) {
-        // Should not have Edit as option, will unpublish app
-        cy.should("not.have.value", "Edit")
-        cy.get(interact.SPECTRUM_MENU).contains("Unpublish").click()
-        cy.get(interact.SPECTRUM_DIALOG_GRID).contains("Unpublish app").click()
-        cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click()
-      }
-      cy.get(interact.APP_ROW_ACTION_MENU_POPOVER).eq(0).within(() => {
-        cy.get(interact.SPECTRUM_MENU_ITEMM).contains("Edit").click({ force: true })
+      cy.get(interact.APP_TABLE).within(() => {
+        cy.get(".app-row-actions button")
+          .contains("Manage")
+          .eq(0)
+          .click({ force: true })
       })
-
+      cy.get(".spectrum-Tabs-item").contains("Settings").click()
+      cy.get(".spectrum-Tabs-item.is-selected").contains("Settings")
+      cy.get(".settings-tab").should("be.visible")
+      cy.get(".details-section .page-action button")
+        .contains("Edit")
+        .click({ force: true })
       cy.updateAppName(changedName, noName)
-
     }
   })
 })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index ba820526f0..e638eb6cbb 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -144,20 +144,27 @@ Cypress.Commands.add("deleteApp", name => {
             return
           }
 
+          // Go to app overview
           const appIdParsed = appId.split("_").pop()
           const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
           cy.get(actionEleId).within(() => {
-            cy.get(".spectrum-Icon").eq(0).click({ force: true })
+            cy.contains("Manage").click({ force: true })
           })
-          cy.get(".spectrum-Menu").then($menu => {
-            if ($menu.text().includes("Unpublish")) {
-              cy.get(".spectrum-Menu").contains("Unpublish").click()
-              cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click()
+          cy.wait(1000)
+
+          // Unpublish first if needed
+          cy.get(`[data-cy="app-status"]`).then($status => {
+            if ($status.text().includes("Last published")) {
+              cy.contains("Unpublish").click()
+              cy.get(".spectrum-Modal").within(() => {
+                cy.contains("Unpublish app").click()
+              })
             }
           })
 
-          cy.get(actionEleId).within(() => {
-            cy.get(".spectrum-Icon").eq(0).click({ force: true })
+          // Delete app
+          cy.get(".app-overview-actions-icon").within(() => {
+            cy.get(".spectrum-Icon").click({ force: true })
           })
           cy.get(".spectrum-Menu").contains("Delete").click()
           cy.get(".spectrum-Dialog-grid").within(() => {
@@ -180,17 +187,7 @@ Cypress.Commands.add("deleteAllApps", () => {
     .its("body")
     .then(val => {
       for (let i = 0; i < val.length; i++) {
-        const appIdParsed = val[i].appId.split("_").pop()
-        const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
-        cy.get(actionEleId).within(() => {
-          cy.get(".spectrum-Icon").eq(0).click({ force: true })
-        })
-
-        cy.get(".spectrum-Menu").contains("Delete").click()
-        cy.get(".spectrum-Dialog-grid").within(() => {
-          cy.get("input").type(val[i].name)
-          cy.get(".spectrum-Button--warning").click()
-        })
+        cy.deleteApp(val[i].name)
         cy.reload()
       }
     })