From 3320a33b9b169f88640aafd156284f84c7dfc5f5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 8 Aug 2022 13:20:59 +0100
Subject: [PATCH] Fix assignment modal, use userFetch for searching users, fix
 data mutations

---
 .../overview/_components/AccessTab.svelte     | 168 ++++++------------
 .../_components/AssignmentModal.svelte        | 141 ++++++++++-----
 2 files changed, 154 insertions(+), 155 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
index 258ef08f06..2329a796bc 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
@@ -16,54 +16,34 @@
   import RoleSelect from "components/common/RoleSelect.svelte"
   import { users, groups, apps, auth } from "stores/portal"
   import AssignmentModal from "./AssignmentModal.svelte"
-  import { createPaginationStore } from "helpers/pagination"
   import { roles } from "stores/backend"
+  import { API } from "api"
+  import { fetchData } from "@budibase/frontend-core"
 
   export let app
 
+  const usersFetch = fetchData({
+    API,
+    datasource: {
+      type: "user",
+    },
+    options: {
+      query: {
+        appId: apps.getProdAppID(app.devId),
+      },
+    },
+  })
+
   let assignmentModal
   let appGroups = []
   let appUsers = []
-  let prevSearch = undefined,
-    search = undefined
-  let pageInfo = createPaginationStore()
-  let fixedAppId
 
-  $: page = $pageInfo.page
   $: fixedAppId = apps.getProdAppID(app.devId)
+  $: appUsers = $usersFetch.rows
   $: appGroups = $groups.filter(x => {
     return x.apps.includes(app.appId)
   })
 
-  async function addData(appData) {
-    let gr_prefix = "gr"
-    let us_prefix = "us"
-    appData.forEach(async data => {
-      if (data.id.startsWith(gr_prefix)) {
-        let matchedGroup = $groups.find(group => {
-          return group._id === data.id
-        })
-        matchedGroup.apps.push(app.appId)
-        matchedGroup.roles[fixedAppId] = data.role
-
-        groups.actions.save(matchedGroup)
-      } else if (data.id.startsWith(us_prefix)) {
-        let matchedUser = $users.data.find(user => {
-          return user._id === data.id
-        })
-
-        let newUser = {
-          ...matchedUser,
-          roles: { [fixedAppId]: data.role, ...matchedUser.roles },
-        }
-
-        await users.save(newUser, { opts: { appId: fixedAppId } })
-        await fetchUsers(page, search)
-      }
-    })
-    await groups.actions.init()
-  }
-
   async function removeUser(user) {
     // Remove the user role
     const filteredRoles = { ...user.roles }
@@ -74,65 +54,35 @@
         ...filteredRoles,
       },
     })
-    await fetchUsers(page, search)
+    await usersFetch.refresh()
   }
 
   async function removeGroup(group) {
-    // Remove the user role
-    let filteredApps = group.apps.filter(
+    const filteredApps = group.apps.filter(
       x => apps.extractAppId(x) !== app.appId
     )
     const filteredRoles = { ...group.roles }
     delete filteredRoles[fixedAppId]
-
     await groups.actions.save({
       ...group,
       apps: filteredApps,
       roles: { ...filteredRoles },
     })
-
-    await fetchUsers(page, search)
+    await usersFetch.refresh()
   }
 
   async function updateUserRole(role, user) {
     user.roles[fixedAppId] = role
-    users.save(user)
+    await users.save(user)
   }
 
   async function updateGroupRole(role, group) {
     group.roles[fixedAppId] = role
-    groups.actions.save(group)
-  }
-
-  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, appId: fixedAppId })
-      pageInfo.fetched($users.hasNextPage, $users.nextPage)
-      appUsers =
-        $users.data?.filter(x => {
-          return Object.keys(x.roles).find(y => {
-            return y === fixedAppId
-          })
-        }) || []
-    } catch (error) {
-      notifications.error("Error getting user list")
-    }
+    await groups.actions.save(group)
   }
 
   onMount(async () => {
     try {
-      await fetchUsers(page, search)
-
       await groups.actions.init()
       await apps.load()
       await roles.fetch()
@@ -149,11 +99,11 @@
         <Heading>Access</Heading>
         <div class="subtitle">
           <Body size="S">
-            Assign users to your app and define their access here</Body
-          >
-          <Button on:click={assignmentModal.show} icon="User" cta
-            >Assign users</Button
-          >
+            Assign users to your app and define their access here
+          </Body>
+          <Button on:click={assignmentModal.show} icon="User" cta>
+            Assign users
+          </Button>
         </div>
       </div>
       {#if $auth.groupsEnabled && appGroups.length}
@@ -184,41 +134,37 @@
         </List>
       {/if}
       {#if appUsers.length}
-        <List title="Users">
-          {#each appUsers as user}
-            <ListItem title={user.email} avatar>
-              <RoleSelect
-                on:change={e => updateUserRole(e.detail, user)}
-                autoWidth
-                quiet
-                value={user.roles[
-                  Object.keys(user.roles).find(x => x === fixedAppId)
-                ]}
-                allowPublic={false}
-              />
-              <Icon
-                on:click={() => removeUser(user)}
-                hoverable
-                size="S"
-                name="Close"
-              />
-            </ListItem>
-          {/each}
-        </List>
-        <div class="pagination">
-          <Pagination
-            page={$pageInfo.pageNumber}
-            hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
-            hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
-            goToPrevPage={async () => {
-              await pageInfo.prevPage()
-              fetchUsers(page, search)
-            }}
-            goToNextPage={async () => {
-              await pageInfo.nextPage()
-              fetchUsers(page, search)
-            }}
-          />
+        <div>
+          <List title="Users">
+            {#each appUsers as user}
+              <ListItem title={user.email} avatar>
+                <RoleSelect
+                  on:change={e => updateUserRole(e.detail, user)}
+                  autoWidth
+                  quiet
+                  value={user.roles[
+                    Object.keys(user.roles).find(x => x === fixedAppId)
+                  ]}
+                  allowPublic={false}
+                />
+                <Icon
+                  on:click={() => removeUser(user)}
+                  hoverable
+                  size="S"
+                  name="Close"
+                />
+              </ListItem>
+            {/each}
+          </List>
+          <div class="pagination">
+            <Pagination
+              page={$usersFetch.pageNumber + 1}
+              hasPrevPage={$usersFetch.hasPrevPage}
+              hasNextPage={$usersFetch.hasNextPage}
+              goToPrevPage={$usersFetch.loading ? null : fetch.prevPage}
+              goToNextPage={$usersFetch.loading ? null : fetch.nextPage}
+            />
+          </div>
         </div>
       {/if}
     {:else}
@@ -246,7 +192,7 @@
 </div>
 
 <Modal bind:this={assignmentModal}>
-  <AssignmentModal {app} {appUsers} {addData} />
+  <AssignmentModal {app} {appUsers} on:update={usersFetch.refresh} />
 </Modal>
 
 <style>
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte b/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
index 4ddfd8115e..bffb9317e1 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
@@ -5,37 +5,46 @@
     ActionButton,
     Layout,
     Icon,
-    notifications,
   } from "@budibase/bbui"
   import { roles } from "stores/backend"
-  import { groups, users, auth } from "stores/portal"
-  import { Constants, RoleUtils } from "@budibase/frontend-core"
-  import { createPaginationStore } from "helpers/pagination"
+  import { groups, users, auth, apps } from "stores/portal"
+  import { Constants, RoleUtils, fetchData } from "@budibase/frontend-core"
+  import { API } from "api"
+  import { createEventDispatcher } from "svelte"
 
   export let app
-  export let addData
   export let appUsers = []
 
-  let prevSearch = undefined,
-    search = undefined
-  let pageInfo = createPaginationStore()
-  let appData = [{ id: "", role: "" }]
-
-  $: page = $pageInfo.page
-  $: fetchUsers(page, search)
-  $: availableUsers = getAvailableUsers($users, appUsers, appData)
-  $: filteredGroups = $groups.filter(group => {
-    return !group.apps.find(appId => {
-      return appId === app.appId
-    })
+  const dispatch = createEventDispatcher()
+  const usersFetch = fetchData({
+    API,
+    datasource: {
+      type: "user",
+    },
+    options: {
+      query: {
+        email: "",
+      },
+    },
   })
-  $: valid =
-    appData?.length && !appData?.some(x => !x.id?.length || !x.role?.length)
+
+  let search = ""
+  let data = [{ id: "", role: "" }]
+
+  $: usersFetch.update({
+    query: {
+      email: search,
+    },
+  })
+  $: fixedAppId = apps.getProdAppID(app.devId)
+  $: availableUsers = getAvailableUsers($usersFetch.rows, appUsers, data)
+  $: availableGroups = getAvailableGroups($groups, app.appId, search, data)
+  $: valid = data?.length && !data?.some(x => !x.id?.length || !x.role?.length)
   $: optionSections = {
     ...($auth.groupsEnabled &&
-      filteredGroups.length && {
+      availableGroups.length && {
         ["User groups"]: {
-          data: filteredGroups,
+          data: availableGroups,
           getLabel: group => group.name,
           getValue: group => group._id,
           getIcon: group => group.icon,
@@ -51,8 +60,53 @@
     },
   }
 
+  const addData = async appData => {
+    const gr_prefix = "gr"
+    const us_prefix = "us"
+    for (let data of appData) {
+      // Assign group
+      if (data.id.startsWith(gr_prefix)) {
+        const group = $groups.find(group => {
+          return group._id === data.id
+        })
+        if (!group) {
+          continue
+        }
+        await groups.actions.save({
+          ...group,
+          apps: [...group.apps, app.appId],
+          roles: {
+            ...group.roles,
+            [fixedAppId]: data.role,
+          },
+        })
+      }
+      // Assign user
+      else if (data.id.startsWith(us_prefix)) {
+        const user = await users.get(data.id)
+        await users.save({
+          ...user,
+          roles: {
+            ...user.roles,
+            [fixedAppId]: data.role,
+          },
+        })
+      }
+    }
+
+    // Refresh data when completed
+    await usersFetch.refresh()
+    await groups.actions.init()
+    dispatch("update")
+  }
+
   const getAvailableUsers = (allUsers, appUsers, newUsers) => {
-    return (allUsers.data || []).filter(user => {
+    return (allUsers || []).filter(user => {
+      // Filter out admin users
+      if (user?.admin?.global || user?.builder?.global) {
+        return false
+      }
+
       // Filter out assigned users
       if (appUsers.find(x => x._id === user._id)) {
         return false
@@ -63,31 +117,30 @@
     })
   }
 
-  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, email: search })
-      pageInfo.fetched($users.hasNextPage, $users.nextPage)
-    } catch (error) {
-      notifications.error("Error getting user list")
-    }
+  const getAvailableGroups = (allGroups, appId, search, newGroups) => {
+    search = search?.toLowerCase()
+    return (allGroups || []).filter(group => {
+      // Filter out assigned groups
+      if (group.apps.includes(appId)) {
+        return false
+      }
+
+      // Filter out new groups which are going to be assigned
+      if (newGroups.find(x => x.id === group._id)) {
+        return false
+      }
+
+      // Match search string
+      return !search || group.name.toLowerCase().includes(search)
+    })
   }
 
   function addNewInput() {
-    appData = [...appData, { id: "", role: "" }]
+    data = [...data, { id: "", role: "" }]
   }
 
   const removeItem = index => {
-    appData = appData.filter((x, idx) => idx !== index)
+    data = data.filter((x, idx) => idx !== index)
   }
 </script>
 
@@ -96,13 +149,13 @@
   title="Assign users to your app"
   confirmText="Done"
   cancelText="Cancel"
-  onConfirm={() => addData(appData)}
+  onConfirm={() => addData(data)}
   showCloseIcon={false}
   disabled={!valid}
 >
-  {#if appData?.length}
+  {#if data.length}
     <Layout noPadding gap="XS">
-      {#each appData as input, index}
+      {#each data as input, index}
         <div class="item">
           <div class="picker">
             <PickerDropdown