Merge pull request #2839 from Budibase/mobile-app-search-compat

Add mobile compatibility for app search bar

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

@@ -24,9 +24,7 @@ context("Create a Table", () => {
   it("updates a column on the table", () => {
     cy.get(".title").click()
     cy.get(".spectrum-Table-editIcon > use").click()
-    cy.get("input")
-      .eq(1)
-      .type("updated", { force: true })
+    cy.get("input").eq(1).type("updated", { force: true })
     // Unset table display column
     cy.get(".spectrum-Switch-input").eq(1).click()
     cy.contains("Save Column").click()
@@ -45,9 +43,7 @@ context("Create a Table", () => {
   it("deletes a row", () => {
     cy.get(".spectrum-Checkbox-input").check({ force: true })
     cy.contains("Delete 1 row(s)").click()
-    cy.get(".spectrum-Modal")
-      .contains("Delete")
-      .click()
+    cy.get(".spectrum-Modal").contains("Delete").click()
     cy.contains("RoverUpdated").should("not.exist")
   })
 
@@ -56,15 +52,18 @@ context("Create a Table", () => {
     cy.get(".spectrum-Table-editIcon > use").click()
     cy.contains("Delete").click()
     cy.wait(50)
-    cy.contains("Delete Column")
-      .click()
+    cy.contains("Delete Column").click()
     cy.contains("nameupdated").should("not.exist")
   })
 
   it("deletes a table", () => {
-    cy.get(".actions > :nth-child(1) > .icon > .spectrum-Icon > use")
-      .eq(1)
-      .click({ force: true })
+    cy.get(".nav-item")
+      .contains("dog")
+      .parents(".nav-item")
+      .first()
+      .within(() => {
+        cy.get(".actions .spectrum-Icon").click({ force: true })
+      })
     cy.get(".spectrum-Menu > :nth-child(2)").click()
     cy.contains("Delete Table").click()
     cy.contains("dog").should("not.exist")

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

@@ -28,11 +28,7 @@ context("Create a View", () => {
       const headers = Array.from($headers).map(header =>
         header.textContent.trim()
       )
-      expect(removeSpacing(headers)).to.deep.eq([
-        "group",
-        "age",
-        "rating",
-      ])
+      expect(removeSpacing(headers)).to.deep.eq(["group", "age", "rating"])
     })
   })
 
@@ -57,6 +53,7 @@ context("Create a View", () => {
   })
 
   it("creates a stats calculation view based on age", () => {
+    cy.wait(1000)
     cy.contains("Calculate").click()
     cy.get(".modal-inner-wrapper").within(() => {
       cy.get(".spectrum-Picker-label").eq(0).click()
@@ -104,20 +101,20 @@ context("Create a View", () => {
     cy.get(".spectrum-Table-cell").then($values => {
       let values = Array.from($values).map(header => header.textContent.trim())
       expect(values).to.deep.eq([
-            "Students",
-            "70",
-            "20",
-            "25",
-            "3",
-            "1650",
-            "23.333333333333332",
-            "Teachers",
-            "85",
-            "36",
-            "49",
-            "2",
-            "3697",
-            "42.5",
+        "Students",
+        "70",
+        "20",
+        "25",
+        "3",
+        "1650",
+        "23.333333333333332",
+        "Teachers",
+        "85",
+        "36",
+        "49",
+        "2",
+        "3697",
+        "42.5",
       ])
     })
   })

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

@@ -216,6 +216,7 @@
       <div class="filter">
         <div class="select">
           <Select
+            autoWidth
             bind:value={sortBy}
             placeholder={null}
             options={[
@@ -224,7 +225,9 @@
               { label: "Sort by status", value: "status" },
             ]}
           />
-          <Search placeholder="Search" bind:value={searchTerm} />
+          <div class="desktop-search">
+            <Search placeholder="Search" bind:value={searchTerm} />
+          </div>
         </div>
         <ActionGroup>
           <ActionButton
@@ -241,6 +244,9 @@
           />
         </ActionGroup>
       </div>
+      <div class="mobile-search">
+        <Search placeholder="Search" bind:value={searchTerm} />
+      </div>
       <div
         class:appGrid={layout === "grid"}
         class:appTable={layout === "table"}
@@ -318,6 +324,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    gap: 10px;
   }
 
   .select {
@@ -325,6 +332,12 @@
     grid-template-columns: 1fr 1fr;
     grid-gap: 10px;
   }
+  .filter :global(.spectrum-ActionGroup) {
+    flex-wrap: nowrap;
+  }
+  .mobile-search {
+    display: none;
+  }
 
   .appGrid {
     display: grid;
@@ -364,5 +377,11 @@
     .appTable {
       grid-template-columns: 1fr auto;
     }
+    .desktop-search {
+      display: none;
+    }
+    .mobile-search {
+      display: block;
+    }
   }
 </style>