General fixes to app list group filtering

packages/bbui/src/Form/Core/PickerDropdown.svelte

@@ -61,6 +61,7 @@
   const onPickPrimary = newValue => {
     dispatch("pickprimary", newValue)
     primaryOpen = false
+    dispatch("closed")
   }
 
   const onClearPrimary = () => {
@@ -92,6 +93,7 @@
     if (primaryOpen) {
       event.stopPropagation()
       primaryOpen = false
+      dispatch("closed")
     }
   }
 

packages/bbui/src/Form/PickerDropdown.svelte

@@ -128,5 +128,6 @@
     on:blur
     on:focus
     on:keyup
+    on:closed
   />
 </Field>

packages/builder/src/pages/builder/portal/apps/_components/AcessFilter.svelte

@@ -5,9 +5,16 @@
 
   const dispatch = createEventDispatcher()
 
+  let filter = null
+  $: filteredGroups = !filter
+    ? $groups
+    : $groups.filter(group =>
+        group.name?.toLowerCase().includes(filter.toLowerCase())
+      )
+
   $: optionSections = {
     groups: {
-      data: $groups,
+      data: filteredGroups,
       getLabel: group => group.name,
       getValue: group => group._id,
       getIcon: group => group.icon,
@@ -15,21 +22,28 @@
     },
   }
 
-  $: appData = [{ id: "", role: "" }]
-
   $: onChange = selected => {
     const { detail } = selected
-    if (!detail) return
+    if (!detail || Object.keys(detail).length == 0) {
+      dispatch("change", null)
+      return
+    }
 
     const groupSelected = $groups.find(x => x._id === detail)
-    const appIds = groupSelected?.apps || null
-    dispatch("change", appIds)
+    const appRoleIds = groupSelected?.roles
+      ? Object.keys(groupSelected?.roles)
+      : []
+    dispatch("change", appRoleIds)
   }
 </script>
 
 <PickerDropdown
   autocomplete
+  bind:searchTerm={filter}
   primaryOptions={optionSections}
   placeholder={"Filter by access"}
   on:pickprimary={onChange}
+  on:closed={() => {
+    filter = null
+  }}
 />

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

@@ -20,7 +20,14 @@
   import { store, automationStore } from "builderStore"
   import { API } from "api"
   import { onMount } from "svelte"
-  import { apps, auth, admin, templates, licensing } from "stores/portal"
+  import {
+    apps,
+    auth,
+    admin,
+    templates,
+    licensing,
+    groups,
+  } from "stores/portal"
   import { goto } from "@roxi/routify"
   import AppRow from "components/start/AppRow.svelte"
   import { AppStatus } from "constants"
@@ -59,10 +66,15 @@
   $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
   $: filteredApps = enrichedApps.filter(
     app =>
-      app?.name?.toLowerCase().includes(searchTerm.toLowerCase()) &&
-      (accessFilterList !== null ? accessFilterList.includes(app?.appId) : true)
+      (searchTerm
+        ? app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
+        : true) &&
+      (accessFilterList !== null
+        ? accessFilterList?.includes(
+            `${app?.type}_${app?.tenantId}_${app?.appId}`
+          )
+        : true)
   )
-
   $: lockedApps = filteredApps.filter(app => app?.lockedYou || app?.lockedOther)
   $: unlocked = lockedApps?.length === 0
   $: automationErrors = getAutomationErrors(enrichedApps)
@@ -231,6 +243,10 @@
       // always load latest
       await licensing.init()
 
+      if ($licensing.groupsEnabled) {
+        await groups.actions.init()
+      }
+
       if ($templates?.length === 0) {
         notifications.error(
           "There was a problem loading quick start templates."