From e4b0c55aa6175b493b9dcc97921275baf53fe5b4 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 5 May 2023 20:10:54 +0100
Subject: [PATCH] Split group users component

---
 .../portal/users/groups/[groupId].svelte      | 159 ++---------------
 .../groups/_components/GroupUsers.svelte      | 166 ++++++++++++++++++
 2 files changed, 179 insertions(+), 146 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte

diff --git a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
index 589df5c599..08c32bfeb9 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
@@ -1,62 +1,28 @@
 <script>
-  import { url, goto } from "@roxi/routify"
   import {
-    Button,
-    Layout,
+    ActionMenu,
     Heading,
     Icon,
-    Popover,
-    notifications,
-    Table,
-    ActionMenu,
+    Layout,
     MenuItem,
     Modal,
-    Pagination,
+    Table,
+    notifications,
   } from "@budibase/bbui"
-  import { fetchData } from "@budibase/frontend-core"
-  import { API } from "api"
-  import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
-  import { createPaginationStore } from "helpers/pagination"
-  import { users, apps, groups, auth, features } from "stores/portal"
-  import { onMount, setContext } from "svelte"
-  import { roles } from "stores/backend"
+  import { goto, url } from "@roxi/routify"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { Breadcrumb, Breadcrumbs } from "components/portal/page"
+  import { roles } from "stores/backend"
+  import { apps, auth, features, groups } from "stores/portal"
+  import { onMount, setContext } from "svelte"
+  import AppNameTableRenderer from "../users/_components/AppNameTableRenderer.svelte"
+  import AppRoleTableRenderer from "../users/_components/AppRoleTableRenderer.svelte"
   import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
   import GroupIcon from "./_components/GroupIcon.svelte"
-  import { Breadcrumbs, Breadcrumb } from "components/portal/page"
-  import AppNameTableRenderer from "../users/_components/AppNameTableRenderer.svelte"
-  import RemoveUserTableRenderer from "./_components/RemoveUserTableRenderer.svelte"
-  import AppRoleTableRenderer from "../users/_components/AppRoleTableRenderer.svelte"
-  import ScimBanner from "../_components/SCIMBanner.svelte"
+  import GroupUsers from "./_components/GroupUsers.svelte"
 
   export let groupId
 
-  const fetchGroupUsers = fetchData({
-    API,
-    datasource: {
-      type: "groupUser",
-    },
-    options: {
-      query: {
-        groupId,
-      },
-    },
-  })
-
-  $: userSchema = {
-    email: {
-      width: "1fr",
-    },
-    ...(readonly
-      ? {}
-      : {
-          _id: {
-            displayName: "",
-            width: "auto",
-            borderLeft: true,
-          },
-        }),
-  }
   const appSchema = {
     name: {
       width: "2fr",
@@ -65,12 +31,6 @@
       width: "1fr",
     },
   }
-  const customUserTableRenderers = [
-    {
-      column: "_id",
-      component: RemoveUserTableRenderer,
-    },
-  ]
   const customAppTableRenderers = [
     {
       column: "name",
@@ -82,18 +42,11 @@
     },
   ]
 
-  let popoverAnchor
-  let popover
-  let searchTerm = ""
-  let prevSearch = undefined
-  let searchUsersPageInfo = createPaginationStore()
   let loaded = false
   let editModal, deleteModal
 
   $: scimEnabled = $features.isScimEnabled
   $: readonly = !$auth.isAdmin || scimEnabled
-  $: page = $searchUsersPageInfo.page
-  $: searchUsers(page, searchTerm)
   $: group = $groups.find(x => x._id === groupId)
   $: groupApps = $apps
     .filter(app =>
@@ -111,25 +64,6 @@
     }
   }
 
-  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")
-    }
-  }
-
   async function deleteGroup() {
     try {
       await groups.actions.delete(group)
@@ -148,18 +82,9 @@
     }
   }
 
-  const removeUser = async id => {
-    await groups.actions.removeUser(groupId, id)
-    fetchGroupUsers.refresh()
-  }
-
   const removeApp = async app => {
     await groups.actions.removeApp(groupId, apps.getProdAppID(app.devId))
   }
-
-  setContext("users", {
-    removeUser,
-  })
   setContext("roles", {
     updateRole: () => {},
     removeRole: removeApp,
@@ -201,65 +126,7 @@
     </div>
 
     <Layout noPadding gap="S">
-      <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>
-        {: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
-        schema={userSchema}
-        data={$fetchGroupUsers?.rows}
-        allowEditRows={false}
-        customPlaceholder
-        customRenderers={customUserTableRenderers}
-        on:click={e => $goto(`../users/${e.detail._id}`)}
-      >
-        <div class="placeholder" slot="placeholder">
-          <Heading size="S">This user group doesn't have any users</Heading>
-        </div>
-      </Table>
-
-      <div class="pagination">
-        <Pagination
-          page={$fetchGroupUsers.pageNumber + 1}
-          hasPrevPage={$fetchGroupUsers.loading
-            ? false
-            : $fetchGroupUsers.hasPrevPage}
-          hasNextPage={$fetchGroupUsers.loading
-            ? false
-            : $fetchGroupUsers.hasNextPage}
-          goToPrevPage={$fetchGroupUsers.loading
-            ? null
-            : fetchGroupUsers.prevPage}
-          goToNextPage={$fetchGroupUsers.loading
-            ? null
-            : fetchGroupUsers.nextPage}
-        />
-      </div>
+      <GroupUsers {groupId} />
     </Layout>
 
     <Layout noPadding gap="S">
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
new file mode 100644
index 0000000000..ecc896989a
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte
@@ -0,0 +1,166 @@
+<script>
+  import {
+    Button,
+    Heading,
+    Pagination,
+    Popover,
+    Table,
+    notifications,
+  } 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 { setContext } from "svelte"
+  import ScimBanner from "../../_components/SCIMBanner.svelte"
+  import RemoveUserTableRenderer from "../_components/RemoveUserTableRenderer.svelte"
+
+  export let groupId
+
+  const fetchGroupUsers = fetchData({
+    API,
+    datasource: {
+      type: "groupUser",
+    },
+    options: {
+      query: {
+        groupId,
+      },
+    },
+  })
+
+  $: userSchema = {
+    email: {
+      width: "1fr",
+    },
+    ...(readonly
+      ? {}
+      : {
+          _id: {
+            displayName: "",
+            width: "auto",
+            borderLeft: true,
+          },
+        }),
+  }
+  const customUserTableRenderers = [
+    {
+      column: "_id",
+      component: RemoveUserTableRenderer,
+    },
+  ]
+
+  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)
+    fetchGroupUsers.refresh()
+  }
+
+  setContext("users", {
+    removeUser,
+  })
+</script>
+
+<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>
+  {: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
+  schema={userSchema}
+  data={$fetchGroupUsers?.rows}
+  allowEditRows={false}
+  customPlaceholder
+  customRenderers={customUserTableRenderers}
+  on:click={e => $goto(`../users/${e.detail._id}`)}
+>
+  <div class="placeholder" slot="placeholder">
+    <Heading size="S">This user group doesn't have any users</Heading>
+  </div>
+</Table>
+
+<div class="pagination">
+  <Pagination
+    page={$fetchGroupUsers.pageNumber + 1}
+    hasPrevPage={$fetchGroupUsers.loading
+      ? false
+      : $fetchGroupUsers.hasPrevPage}
+    hasNextPage={$fetchGroupUsers.loading
+      ? false
+      : $fetchGroupUsers.hasNextPage}
+    goToPrevPage={$fetchGroupUsers.loading ? null : fetchGroupUsers.prevPage}
+    goToNextPage={$fetchGroupUsers.loading ? null : fetchGroupUsers.nextPage}
+  />
+</div>
+
+<style>
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+  .header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
+  }
+  .placeholder {
+    width: 100%;
+    text-align: center;
+  }
+</style>