access tab refreshing correctly

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -127,7 +127,10 @@
       } else {
         try {
           await organisation.init()
+          await roles.fetch()
         } catch (error) {
+          console.log(error)
+
           notifications.error("Error getting org config")
         }
         loaded = true

packages/builder/src/pages/builder/portal/manage/auth/index.svelte

@@ -219,6 +219,7 @@
     try {
       await organisation.init()
     } catch (error) {
+      console.log("hello1")
       notifications.error("Error getting org config")
     }
 

packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte

@@ -26,10 +26,11 @@
   let selectedUsers = []
   let prevSearch = undefined,
     search = undefined
+  let pageInfo = createPaginationStore()
+
   $: page = $pageInfo.page
   $: fetchUsers(page, search)
   $: group = $groups.find(x => x._id === groupId)
-  let pageInfo = createPaginationStore()
 
   async function addAll() {
     group.users = selectedUsers

packages/builder/src/pages/builder/portal/manage/users/index.svelte

@@ -76,8 +76,7 @@
   $: fetchUsers(page, search)
 
   $: {
-    if ($users.data) {
+    enrichedUsers = $users.data?.map(user => {
-      enrichedUsers = $users.data.map(user => {
       let userGroups = []
       let userApps = []
       $groups.forEach(group => {
@@ -99,11 +98,7 @@
         apps: [...new Set(Object.keys(user.roles))],
       }
     })
-    } else {
-      enrichedUsers = []
   }
-  }
-  $: console.log(enrichedUsers)
   function showOnboardingTypeModal() {
     onboardingTypeModal.show()
   }

packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte

@@ -14,18 +14,27 @@
   import RoleSelect from "components/common/RoleSelect.svelte"
   import { users, groups, apps } from "stores/portal"
   import AssignmentModal from "./AssignmentModal.svelte"
+  import { createPaginationStore } from "helpers/pagination"
 
   export let app
 
   let assignmentModal
   let appGroups = []
   let appUsers = []
+  let pageInfo = createPaginationStore()
+  let prevSearch = undefined,
+    search = undefined
 
-  $: appUsers = $users.filter(x => {
+  $: page = $pageInfo.page
+  $: fetchUsers(page, search)
+
+  $: appUsers =
+    $users.data?.filter(x => {
       return Object.keys(x.roles).find(y => {
         return extractAppId(y) === extractAppId(app.appId)
       })
-  })
+    }) || []
+
   $: appGroups = $groups.filter(x => {
     return x.apps.find(y => {
       return y.appId === app.appId
@@ -48,7 +57,7 @@
 
         groups.actions.save(matchedGroup)
       } else if (data.id.startsWith(us_prefix)) {
-        let matchedUser = $users.find(user => {
+        let matchedUser = $users.data.find(user => {
           return user._id === data.id
         })
 
@@ -60,10 +69,30 @@
         await users.save(newUser)
       }
     })
+    await pageInfo.reset()
   }
+
+  async function fetchUsers(page, search) {
+    if ($pageInfo.loading) {
+      return
+    }
+    // need to remove the page if they've started searching
+    if (search && !prevSearch) {
+      pageInfo.reset()
+      page = undefined
+    }
+    prevSearch = search
+    try {
+      pageInfo.loading()
+      await users.search({ page, search })
+      pageInfo.fetched($users.hasNextPage, $users.nextPage)
+    } catch (error) {
+      notifications.error("Error getting user list")
+    }
+  }
+
   onMount(async () => {
     try {
-      await users.init()
       await groups.actions.init()
       await apps.load()
     } catch (error) {
@@ -115,7 +144,7 @@
 </div>
 
 <Modal bind:this={assignmentModal}>
-  <AssignmentModal {addData} />
+  <AssignmentModal userData={$users.data} {addData} />
 </Modal>
 
 <style>

packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte

@@ -5,6 +5,7 @@
   import { RoleUtils } from "@budibase/frontend-core"
 
   export let addData
+  export let userData = []
   $: optionSections = {
     groups: {
       data: $groups,
@@ -14,7 +15,7 @@
       getColour: group => group.color,
     },
     users: {
-      data: $users,
+      data: userData,
       getLabel: user => user.email,
       getValue: user => user._id,
       getIcon: user => user.icon,
@@ -27,8 +28,6 @@
   function addNewInput() {
     appData = [...appData, { id: "", role: "" }]
   }
-
-  $: console.log(appData)
 </script>
 
 <ModalContent

packages/builder/src/stores/backend/roles.js

@@ -7,6 +7,7 @@ export function createRolesStore() {
   const actions = {
     fetch: async () => {
       const roles = await API.getRoles()
+      console.log(roles)
       set(roles)
     },
     delete: async role => {