From b1f1095c89d41722268b6a78a1ee33fb9786a381 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 5 May 2023 20:21:06 +0100
Subject: [PATCH] Split components

---
 .../groups/_components/EditUserPicker.svelte  | 59 +++++++++++++++++
 .../groups/_components/GroupUsers.svelte      | 64 ++-----------------
 2 files changed, 64 insertions(+), 59 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/portal/users/groups/_components/EditUserPicker.svelte

diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/EditUserPicker.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/EditUserPicker.svelte
new file mode 100644
index 0000000000..a71634b262
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte
index ecc896989a..9c18008e44 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte
+++ b/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