Split components

packages/builder/src/pages/builder/portal/users/groups/_components/EditUserPicker.svelte

@@ -0,0 +1,59 @@
+<script>
+  import { Button, Popover, notifications } from "@budibase/bbui"
+  import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
+  import { createPaginationStore } from "helpers/pagination"
+  import { auth, groups, users } from "stores/portal"
+
+  export let groupId
+  export let onUsersUpdated
+
+  let popoverAnchor
+  let popover
+  let searchTerm = ""
+  let prevSearch = undefined
+  let pageInfo = createPaginationStore()
+
+  $: readonly = !$auth.isAdmin
+  $: page = $pageInfo.page
+  $: searchUsers(page, searchTerm)
+  $: group = $groups.find(x => x._id === groupId)
+
+  async function searchUsers(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, email: search })
+      pageInfo.fetched($users.hasNextPage, $users.nextPage)
+    } catch (error) {
+      notifications.error("Error getting user list")
+    }
+  }
+</script>
+
+<div bind:this={popoverAnchor}>
+  <Button disabled={readonly} on:click={popover.show()} cta>Add user</Button>
+</div>
+<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
+  <UserGroupPicker
+    bind:searchTerm
+    labelKey="email"
+    selected={group.users?.map(user => user._id)}
+    list={$users.data}
+    on:select={async e => {
+      await groups.actions.addUser(groupId, e.detail)
+      onUsersUpdated()
+    }}
+    on:deselect={async e => {
+      await groups.actions.removeUser(groupId, e.detail)
+      onUsersUpdated()
+    }}
+  />
+</Popover>

packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte

@@ -1,18 +1,11 @@
 <script>
-  import {
-    Button,
-    Heading,
-    Pagination,
-    Popover,
-    Table,
-    notifications,
-  } from "@budibase/bbui"
+  import EditUserPicker from "./EditUserPicker.svelte"
+
+  import { Heading, Pagination, Table } from "@budibase/bbui"
   import { fetchData } from "@budibase/frontend-core"
   import { goto } from "@roxi/routify"
   import { API } from "api"
-  import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
-  import { createPaginationStore } from "helpers/pagination"
-  import { auth, features, groups, users } from "stores/portal"
+  import { auth, features, groups } from "stores/portal"
   import { setContext } from "svelte"
   import ScimBanner from "../../_components/SCIMBanner.svelte"
   import RemoveUserTableRenderer from "../_components/RemoveUserTableRenderer.svelte"
@@ -52,36 +45,8 @@
     },
   ]
 
-  let popoverAnchor
-  let popover
-  let searchTerm = ""
-  let prevSearch = undefined
-  let searchUsersPageInfo = createPaginationStore()
-
   $: scimEnabled = $features.isScimEnabled
   $: readonly = !$auth.isAdmin || scimEnabled
-  $: page = $searchUsersPageInfo.page
-  $: searchUsers(page, searchTerm)
-  $: group = $groups.find(x => x._id === groupId)
-
-  async function searchUsers(page, search) {
-    if ($searchUsersPageInfo.loading) {
-      return
-    }
-    // need to remove the page if they've started searching
-    if (search && !prevSearch) {
-      searchUsersPageInfo.reset()
-      page = undefined
-    }
-    prevSearch = search
-    try {
-      searchUsersPageInfo.loading()
-      await users.search({ page, email: search })
-      searchUsersPageInfo.fetched($users.hasNextPage, $users.nextPage)
-    } catch (error) {
-      notifications.error("Error getting user list")
-    }
-  }
 
   const removeUser = async id => {
     await groups.actions.removeUser(groupId, id)
@@ -96,29 +61,10 @@
 <div class="header">
   <Heading size="S">Users</Heading>
   {#if !scimEnabled}
-    <div bind:this={popoverAnchor}>
-      <Button disabled={readonly} on:click={popover.show()} cta>Add user</Button
-      >
-    </div>
+    <EditUserPicker {groupId} onUsersUpdated={fetchGroupUsers.getInitialData} />
   {:else}
     <ScimBanner />
   {/if}
-  <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
-    <UserGroupPicker
-      bind:searchTerm
-      labelKey="email"
-      selected={group.users?.map(user => user._id)}
-      list={$users.data}
-      on:select={async e => {
-        await groups.actions.addUser(groupId, e.detail)
-        fetchGroupUsers.getInitialData()
-      }}
-      on:deselect={async e => {
-        await groups.actions.removeUser(groupId, e.detail)
-        fetchGroupUsers.getInitialData()
-      }}
-    />
-  </Popover>
 </div>
 
 <Table