From a0f4043e1369e64bab05b835392ce22c15ce09f1 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 30 Sep 2021 14:08:18 +0100
Subject: [PATCH] app list search bar

---
 .../src/pages/builder/portal/apps/index.svelte      | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index d84b327e90..661f43d464 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -12,6 +12,7 @@
     Page,
     notifications,
     Body,
+    Search,
   } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import UpdateAppModal from "components/start/UpdateAppModal.svelte"
@@ -35,8 +36,12 @@
   let unpublishModal
   let creatingApp = false
   let loaded = false
+  let searchTerm = ""
 
   $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
+  $: filteredApps = enrichedApps.filter(app =>
+    new RegExp(searchTerm, "ig").test(app?.name)
+  )
 
   const enrichApps = (apps, user, sortBy) => {
     const enrichedApps = apps.map(app => ({
@@ -45,6 +50,7 @@
       lockedYou: app.lockedBy && app.lockedBy.email === user?.email,
       lockedOther: app.lockedBy && app.lockedBy.email !== user?.email,
     }))
+
     if (sortBy === "status") {
       return enrichedApps.sort((a, b) => {
         if (a.status === b.status) {
@@ -205,6 +211,7 @@
               { label: "Sort by status", value: "status" },
             ]}
           />
+          <Search placeholder="Search" bind:value={searchTerm} />
         </div>
         <ActionGroup>
           <ActionButton
@@ -225,7 +232,7 @@
         class:appGrid={layout === "grid"}
         class:appTable={layout === "table"}
       >
-        {#each enrichedApps as app (app.appId)}
+        {#each filteredApps as app (app.appId)}
           <svelte:component
             this={layout === "grid" ? AppCard : AppRow}
             {releaseLock}
@@ -301,7 +308,9 @@
   }
 
   .select {
-    width: 190px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
   }
 
   .appGrid {