On focus search behaviour renders to 100 invites, all groups and the first page of current users

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -28,9 +28,9 @@
   let inviting = false
   let searchFocus = false
 
-  //Or searching = true?
-  let filtered = true
-  $: console.log("filtering enabled ", filtered)
+  // Initially filter entities without app access
+  // Show all when false
+  let filterByAppAccess = true
 
   let appInvites = []
   let filteredInvites = []
@@ -38,7 +38,6 @@
   let filteredGroups = []
   let selectedGroup
   let userOnboardResponse = null
-
   let userLimitReachedModal
 
   $: queryIsEmail = emailValidator(query) === true
@@ -63,8 +62,9 @@
     appInvites = await getInvites()
 
     //On Focus behaviour
-    if (!filtered && (!query || query == "")) {
-      filteredInvites = [...appInvites]
+    if (!filterByAppAccess && (!query || query == "")) {
+      filteredInvites =
+        appInvites.length > 100 ? appInvites.slice(0, 100) : [...appInvites]
       return
     }
 
@@ -77,9 +77,9 @@
     })
   }
 
-  $: filtered, prodAppId, filterInvites(query)
+  $: filterByAppAccess, prodAppId, filterInvites(query)
   $: if (searchFocus === true) {
-    filtered = false
+    filterByAppAccess = false
   }
 
   const usersFetch = fetchData({
@@ -99,9 +99,9 @@
     }
     await usersFetch.update({
       query: {
-        appId: query ? null : prodAppId,
+        appId: query || !filterByAppAccess ? null : prodAppId,
         email: query,
-        paginated: query ? null : false,
+        paginated: query || !filterByAppAccess ? null : false,
       },
     })
     await usersFetch.refresh()
@@ -127,7 +127,12 @@
   }
 
   const debouncedUpdateFetch = Utils.debounce(searchUsers, 250)
-  $: debouncedUpdateFetch(query, $store.builderSidePanel, loaded)
+  $: debouncedUpdateFetch(
+    query,
+    $store.builderSidePanel,
+    loaded,
+    filterByAppAccess
+  )
 
   const updateAppUser = async (user, role) => {
     if (!prodAppId) {
@@ -202,9 +207,10 @@
   }
 
   const searchGroups = (userGroups, query) => {
-    let filterGroups = query?.length
-      ? userGroups
-      : getAppGroups(userGroups, prodAppId)
+    let filterGroups =
+      query?.length || !filterByAppAccess
+        ? userGroups
+        : getAppGroups(userGroups, prodAppId)
     return filterGroups
       .filter(group => {
         if (!query?.length) {
@@ -234,7 +240,7 @@
   }
 
   // Adds the 'role' attribute and sets it to the current app.
-  $: enrichedGroups = getEnrichedGroups($groups)
+  $: enrichedGroups = getEnrichedGroups($groups, filterByAppAccess)
   $: filteredGroups = searchGroups(enrichedGroups, query)
   $: groupUsers = buildGroupUsers(filteredGroups, filteredUsers)
   $: allUsers = [...filteredUsers, ...groupUsers]
@@ -246,7 +252,7 @@
     specific roles for the app.
   */
   const buildGroupUsers = (userGroups, filteredUsers) => {
-    if (query) {
+    if (query || !filterByAppAccess) {
       return []
     }
     // Must exclude users who have explicit privileges
@@ -371,7 +377,6 @@
 
   onMount(() => {
     rendered = true
-    // searchFocus = true
   })
 
   function handleKeyDown(evt) {
@@ -447,20 +452,20 @@
 
     <span
       class="search-input-icon"
-      class:searching={query || !filtered}
+      class:searching={query || !filterByAppAccess}
       on:click={() => {
-        if (!filtered) {
-          filtered = true
+        if (!filterByAppAccess) {
+          filterByAppAccess = true
         }
         if (!query) {
           return
         }
         query = null
         userOnboardResponse = null
-        filtered = true
+        filterByAppAccess = true
       }}
     >
-      <Icon name={!filtered || query ? "Close" : "Search"} />
+      <Icon name={!filterByAppAccess || query ? "Close" : "Search"} />
     </span>
   </div>
 
@@ -581,7 +586,7 @@
 
         {#if filteredUsers?.length}
           <div class="auth-entity-section">
-            <div class="auth-entity-header ">
+            <div class="auth-entity-header">
               <div class="auth-entity-title">Users</div>
               <div class="auth-entity-access-title">Access</div>
             </div>