fix home screen automation commands

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

@@ -10,7 +10,7 @@ it("should rename an unpublished application", () => {
     cy.get(".home-logo").click()
     renameApp(appRename)
     cy.searchForApplication(appRename)
-    cy.get(".appGrid").find(".wrapper").should("have.length", 1)
+    cy.get(".appTable").find(".title").should("have.length", 1)
     cy.deleteApp(appRename)
 })
     
@@ -29,7 +29,7 @@ xit("Should rename a published application", () => {
     cy.get(".home-logo").click()
     renameApp(appRename, true)
     cy.searchForApplication(appRename)
-    cy.get(".appGrid").find(".wrapper").should("have.length", 1)
+    cy.get(".appTable").find(".title").should("have.length", 1)
 })
 
 it("Should try to rename an application to have no name", () => {
@@ -38,7 +38,7 @@ it("Should try to rename an application to have no name", () => {
     // Close modal and confirm name has not been changed
     cy.get(".spectrum-Dialog-grid").contains("Cancel").click()
     cy.searchForApplication("Cypress Tests")
-    cy.get(".appGrid").find(".wrapper").should("have.length", 1)
+    cy.get(".appTable").find(".title").should("have.length", 1)
 })
 
 xit("Should create two applications with the same name", () => {
@@ -64,7 +64,7 @@ it("should validate application names", () => {
     cy.get(".home-logo").click()
     renameApp(numberName)
     cy.searchForApplication(numberName)
-    cy.get(".appGrid").find(".wrapper").should("have.length", 1)
+    cy.get(".appTable").find(".title").should("have.length", 1)
     renameApp(specialCharName)
     cy.get(".error").should("have.text", "App name must be letters, numbers and spaces only")
 })
@@ -74,14 +74,14 @@ it("should validate application names", () => {
     .its("body")
     .then(val => {
         if (val.length > 0) {
-            cy.get(".title > :nth-child(3) > .spectrum-Icon").click()
+            cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").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(".spectrum-Menu").contains("Unpublish").click()
                 cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click()
-                cy.get(".title > :nth-child(3) > .spectrum-Icon").click()
+                cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click()
             }
             cy.contains("Edit").click()
             cy.get(".spectrum-Modal")

packages/builder/cypress/support/commands.js

@@ -50,7 +50,9 @@ Cypress.Commands.add("deleteApp", appName => {
     .its("body")
     .then(val => {
       if (val.length > 0) {
-        cy.get(".title > :nth-child(3) > .spectrum-Icon").click()
+        cy.get(
+          ".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon"
+        ).click()
         cy.contains("Delete").click()
         cy.get(".spectrum-Modal").within(() => {
           cy.get("input").type(appName)

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

@@ -9,6 +9,7 @@
   } from "@budibase/bbui"
   import { apps } from "stores/portal"
   import { processStringSync } from "@budibase/string-templates"
+
   export let app
   export let exportApp
   export let viewApp
@@ -18,16 +19,19 @@
   export let unpublishApp
   export let releaseLock
   export let editIcon
-  $: color = $apps.filter(filtered_app => app?.appId === filtered_app.appId)[0]
+  $: console.log($apps)
-    .icon?.color
+  $: color =
-  $: name = $apps.filter(filtered_app => app?.appId === filtered_app.appId)[0]
+    $apps.find(filtered_app => app?.appId === filtered_app.appId)?.icon
-    .icon?.name
+      ?.color || ""
+  $: name =
+    $apps.find(filtered_app => app?.appId === filtered_app.appId)?.icon?.name ||
+    "Apps"
 </script>
 
 <div class="title">
   <div style="display: flex;">
-    <div style="color: {color || ''}">
+    <div style="color: {color}">
-      <Icon size="XL" name={name || "Apps"} />
+      <Icon size="XL" {name} />
     </div>
     <div class="name" on:click={() => editApp(app)}>
       <Heading size="XS">

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

@@ -3,9 +3,10 @@
   import { apps } from "stores/portal"
 
   export let app
+  console.log(app)
   let modal
-  let selectedIcon
+  $: selectedIcon = app?.icon?.name
-  let selectedColor
+  $: selectedColor = app?.icon?.color
 
   let iconsList = [
     "Actions",
@@ -22,7 +23,6 @@
     "Organisations",
     "Magnify",
     "Launch",
-    "Actions",
     "Car",
     "Camera",
     "Bug",
@@ -32,6 +32,7 @@
     "GraphDonut",
     "GraphBarHorizontal",
     "Demographic",
+    "Apps",
   ]
   export const show = () => {
     modal.show()
@@ -41,6 +42,8 @@
   }
 
   const onCancel = () => {
+    selectedIcon = ""
+    selectedColor = ""
     hide()
   }
 
@@ -84,7 +87,7 @@
       </div>
       <div class="color-selection-item">
         <ColorPicker
-          value={selectedColor}
+          bind:value={selectedColor}
           on:change={e => changeColor(e.detail)}
         />
       </div>