Merge pull request #7019 from Budibase/cheeks-fixes

User groups fixes

packages/bbui/src/Form/Core/PickerDropdown.svelte

@@ -233,7 +233,10 @@
                   </div>
                 {:else if getPrimaryOptionColour(option, idx)}
                   <span class="option-left">
-                    <StatusLight color={getPrimaryOptionColour(option, idx)} />
+                    <StatusLight
+                      square
+                      color={getPrimaryOptionColour(option, idx)}
+                    />
                   </span>
                 {/if}
                 <span class="spectrum-Menu-itemLabel">
@@ -253,6 +256,7 @@
                   {#if getPrimaryOptionIcon(option, idx) && getPrimaryOptionColour(option, idx)}
                     <span class="option-right">
                       <StatusLight
+                        square
                         color={getPrimaryOptionColour(option, idx)}
                       />
                     </span>
@@ -281,7 +285,7 @@
           </span>
         {:else if secondaryFieldColour}
           <span class="option-left">
-            <StatusLight color={secondaryFieldColour} />
+            <StatusLight square color={secondaryFieldColour} />
           </span>
         {/if}
 
@@ -319,6 +323,7 @@
                 {#if getSecondaryOptionColour(option, idx)}
                   <span class="option-left">
                     <StatusLight
+                      square
                       color={getSecondaryOptionColour(option, idx)}
                     />
                   </span>
@@ -351,6 +356,13 @@
     min-width: 0;
     width: 100%;
   }
+  .spectrum-InputGroup :global(.spectrum-Search-input) {
+    border: none;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   .override-borders {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;

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

@@ -72,7 +72,7 @@
           href: "/builder/portal/manage/groups",
         }
 
-        menu.splice(1, 0, item)
+        menu.splice(2, 0, item)
       }
 
       if (!$adminStore.cloud) {

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

@@ -18,23 +18,44 @@
   import { users, apps, groups } from "stores/portal"
   import { onMount } from "svelte"
   import { RoleUtils } from "@budibase/frontend-core"
+  import { roles } from "stores/backend"
 
   export let groupId
+
   let popoverAnchor
   let popover
   let searchTerm = ""
   let selectedUsers = []
-  let prevSearch = undefined,
-    search = undefined
+  let prevSearch = undefined
   let pageInfo = createPaginationStore()
+  let loaded = false
 
   $: page = $pageInfo.page
-  $: fetchUsers(page, search)
+  $: fetchUsers(page, searchTerm)
   $: group = $groups.find(x => x._id === groupId)
 
   async function addAll() {
-    group.users = selectedUsers
+    selectedUsers = [...selectedUsers, ...filtered.map(u => u._id)]
+
+    let reducedUserObjects = filtered.map(u => {
+      return {
+        _id: u._id,
+        email: u.email,
+      }
+    })
+    group.users = [...reducedUserObjects, ...group.users]
+
     await groups.actions.save(group)
+
+    $users.data.forEach(async user => {
+      let userToEdit = await users.get(user._id)
+      let userGroups = userToEdit.userGroups || []
+      userGroups.push(groupId)
+      await users.save({
+        ...userToEdit,
+        userGroups,
+      })
+    })
   }
 
   async function selectUser(id) {
@@ -97,106 +118,119 @@
     prevSearch = search
     try {
       pageInfo.loading()
-      await users.search({ page, search })
+      await users.search({ page, email: search })
       pageInfo.fetched($users.hasNextPage, $users.nextPage)
     } catch (error) {
       notifications.error("Error getting user list")
     }
   }
 
+  const getRoleLabel = appId => {
+    const roleId = group?.roles?.[`app_${appId}`]
+    const role = $roles.find(x => x._id === roleId)
+    return role?.name || "Custom role"
+  }
+
   onMount(async () => {
     try {
-      await groups.actions.init()
-      await apps.load()
+      await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
+      loaded = true
     } catch (error) {
-      notifications.error("Error fetching User Group data")
+      notifications.error("Error fetching user group data")
     }
   })
 </script>
 
-<Layout noPadding>
-  <div>
-    <ActionButton on:click={() => $goto("../groups")} size="S" icon="ArrowLeft">
-      Back
-    </ActionButton>
-  </div>
-  <div class="header">
-    <div class="title">
-      <div style="background: {group?.color};" class="circle">
-        <div>
-          <Icon size="M" name={group?.icon} />
+{#if loaded}
+  <Layout noPadding>
+    <div>
+      <ActionButton
+        on:click={() => $goto("../groups")}
+        size="S"
+        icon="ArrowLeft"
+      >
+        Back
+      </ActionButton>
+    </div>
+    <div class="header">
+      <div class="title">
+        <div style="background: {group?.color};" class="circle">
+          <div>
+            <Icon size="M" name={group?.icon} />
+          </div>
+        </div>
+        <div class="text-padding">
+          <Heading>{group?.name}</Heading>
         </div>
       </div>
-      <div class="text-padding">
-        <Heading>{group?.name}</Heading>
+      <div bind:this={popoverAnchor}>
+        <Button on:click={popover.show()} icon="UserAdd" cta>Add user</Button>
+      </div>
+      <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
+        <UserGroupPicker
+          key={"email"}
+          title={"User"}
+          bind:searchTerm
+          bind:selected={selectedUsers}
+          bind:filtered
+          {addAll}
+          select={selectUser}
+        />
+      </Popover>
+    </div>
+
+    <List>
+      {#if group?.users.length}
+        {#each group.users as user}
+          <ListItem title={user?.email} avatar
+            ><Icon
+              on:click={() => removeUser(user?._id)}
+              hoverable
+              size="L"
+              name="Close"
+            /></ListItem
+          >
+        {/each}
+      {:else}
+        <ListItem icon="UserGroup" title="You have no users in this team" />
+      {/if}
+    </List>
+    <div
+      style="flex-direction: column; margin-top: var(--spacing-m)"
+      class="title"
+    >
+      <Heading weight="light" size="XS">Apps</Heading>
+      <div style="margin-top: var(--spacing-xs)">
+        <Body size="S"
+          >Manage apps that this User group has been assigned to</Body
+        >
       </div>
     </div>
-    <div bind:this={popoverAnchor}>
-      <Button on:click={popover.show()} icon="UserAdd" cta>Add User</Button>
-    </div>
-    <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
-      <UserGroupPicker
-        key={"email"}
-        title={"User"}
-        bind:searchTerm
-        bind:selected={selectedUsers}
-        bind:filtered
-        {addAll}
-        select={selectUser}
-      />
-    </Popover>
-  </div>
 
-  <List>
-    {#if group?.users.length}
-      {#each group.users as user}
-        <ListItem title={user?.email} avatar
-          ><Icon
-            on:click={() => removeUser(user?._id)}
-            hoverable
-            size="L"
-            name="Close"
-          /></ListItem
-        >
-      {/each}
-    {:else}
-      <ListItem icon="UserGroup" title="You have no users in this team" />
-    {/if}
-  </List>
-  <div
-    style="flex-direction: column; margin-top: var(--spacing-m)"
-    class="title"
-  >
-    <Heading weight="light" size="XS">Apps</Heading>
-    <div style="margin-top: var(--spacing-xs)">
-      <Body size="S">Manage apps that this User group has been assigned to</Body
-      >
-    </div>
-  </div>
-
-  <List>
-    {#if groupApps.length}
-      {#each groupApps as app}
-        <ListItem
-          title={app.name}
-          icon={app?.icon?.name || "Apps"}
-          iconBackground={app?.icon?.color || ""}
-        >
-          <div class="title ">
-            <StatusLight
-              color={RoleUtils.getRoleColour(group.roles[app.appId])}
-            />
-            <div style="margin-left: var(--spacing-s);">
-              <Body size="XS">{group.roles[app.appId]}</Body>
+    <List>
+      {#if groupApps.length}
+        {#each groupApps as app}
+          <ListItem
+            title={app.name}
+            icon={app?.icon?.name || "Apps"}
+            iconBackground={app?.icon?.color || ""}
+          >
+            <div class="title ">
+              <StatusLight
+                square
+                color={RoleUtils.getRoleColour(group.roles[`app_${app.appId}`])}
+              >
+                {getRoleLabel(app.appId)}
+              </StatusLight>
             </div>
-          </div>
-        </ListItem>
-      {/each}
-    {:else}
-      <ListItem icon="UserGroup" title="No apps" />
-    {/if}
-  </List>
-</Layout>
+          </ListItem>
+        {/each}
+      {:else}
+        <ListItem icon="UserGroup" title="No apps" />
+      {/if}
+    </List>
+  </Layout>
+{/if}
 
 <style>
   .text-padding {

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

@@ -14,13 +14,9 @@
   import { Constants } from "@budibase/frontend-core"
   import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
   import UserGroupsRow from "./_components/UserGroupsRow.svelte"
+  import { cloneDeep } from "lodash/fp"
 
-  $: hasGroupsLicense = $auth.user?.license.features.includes(
-    Constants.Features.USER_GROUPS
-  )
-
-  let modal
-  let group = {
+  const DefaultGroup = {
     name: "",
     icon: "UserGroup",
     color: "var(--spectrum-global-color-blue-600)",
@@ -28,6 +24,12 @@
     apps: [],
     roles: {},
   }
+  let modal
+  let group = cloneDeep(DefaultGroup)
+
+  $: hasGroupsLicense = $auth.user?.license.features.includes(
+    Constants.Features.USER_GROUPS
+  )
 
   async function deleteGroup(group) {
     try {
@@ -45,6 +47,11 @@
     }
   }
 
+  const showCreateGroupModal = () => {
+    group = cloneDeep(DefaultGroup)
+    modal?.show()
+  }
+
   onMount(async () => {
     try {
       if (hasGroupsLicense) {
@@ -78,10 +85,11 @@
       icon={hasGroupsLicense ? "UserGroup" : ""}
       cta={hasGroupsLicense}
       on:click={hasGroupsLicense
-        ? () => modal.show()
+        ? showCreateGroupModal
         : window.open("https://budibase.com/pricing/", "_blank")}
-      >{hasGroupsLicense ? "Create user group" : "Upgrade Account"}</Button
     >
+      {hasGroupsLicense ? "Create user group" : "Upgrade Account"}
+    </Button>
     {#if !hasGroupsLicense}
       <Button
         newStyles
@@ -130,7 +138,7 @@
   .groupTable :global(> div) {
     background: var(--bg-color);
 
-    height: 70px;
+    height: 55px;
     display: grid;
     align-items: center;
     grid-gap: var(--spacing-xl);

packages/builder/src/pages/builder/portal/manage/users/[userId].svelte

@@ -21,9 +21,9 @@
     StatusLight,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-
   import { fetchData } from "helpers"
   import { users, auth, groups, apps } from "stores/portal"
+  import { roles } from "stores/backend"
   import { Constants } from "@budibase/frontend-core"
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
   import { RoleUtils } from "@budibase/frontend-core"
@@ -40,6 +40,7 @@
   let selectedGroups = []
   let allAppList = []
   let user
+  let loaded = false
   $: fetchUser(userId)
 
   $: fullName = $userFetch?.data?.firstName
@@ -49,6 +50,8 @@
   $: hasGroupsLicense = $auth.user?.license.features.includes(
     Constants.Features.USER_GROUPS
   )
+  $: nameLabel = getNameLabel($userFetch)
+  $: initials = getInitials(nameLabel)
 
   $: allAppList = $apps
     .filter(x => {
@@ -91,6 +94,39 @@
 
   const userFetch = fetchData(`/api/global/users/${userId}`)
 
+  const getNameLabel = userFetch => {
+    const { firstName, lastName, email } = userFetch?.data || {}
+    if (!firstName && !lastName) {
+      return email || ""
+    }
+    let label
+    if (firstName) {
+      label = firstName
+      if (lastName) {
+        label += ` ${lastName}`
+      }
+    } else {
+      label = lastName
+    }
+    return label
+  }
+
+  const getInitials = nameLabel => {
+    if (!nameLabel) {
+      return "?"
+    }
+    return nameLabel
+      .split(" ")
+      .slice(0, 2)
+      .map(x => x[0])
+      .join("")
+  }
+
+  const getRoleLabel = roleId => {
+    const role = $roles.find(x => x._id === roleId)
+    return role?.name || "Custom role"
+  }
+
   function getHighestRole(roles) {
     let highestRole
     let highestRoleNumber = 0
@@ -171,176 +207,168 @@
   function addAll() {}
   onMount(async () => {
     try {
-      await groups.actions.init()
-      await apps.load()
+      await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
+      loaded = true
     } catch (error) {
-      notifications.error("Error getting User groups")
+      notifications.error("Error getting user groups")
     }
   })
 </script>
 
-<Layout gap="L" noPadding>
-  <Layout gap="XS" noPadding>
-    <div>
-      <ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
-        Back
-      </ActionButton>
-    </div>
-  </Layout>
-  <Layout gap="XS" noPadding>
-    <div class="title">
-      <div>
-        <div style="display: flex;">
-          <Avatar
-            size="XXL"
-            initials={user?.email
-              .split(" ")
-              .map(x => x[0])
-              .join("")}
-          />
-
-          {#if fullName}
-            <div class="subtitle">
-              <Heading size="S">{fullName}</Heading>
-
-              <Body size="XS">{$userFetch?.data?.email}</Body>
-            </div>
-          {:else}
-            <div class="alignEmail">
-              <Heading size="S">{$userFetch?.data?.email}</Heading>
-            </div>
-          {/if}
-        </div>
-      </div>
-      <div>
-        <ActionMenu align="right">
-          <span slot="control">
-            <Icon hoverable name="More" />
-          </span>
-          <MenuItem on:click={resetPasswordModal.show} icon="Refresh"
-            >Force Password Reset</MenuItem
-          >
-          <MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem>
-        </ActionMenu>
-      </div>
-    </div>
-  </Layout>
-  <Layout gap="S" noPadding>
-    <div class="fields">
-      <div class="field">
-        <Label size="L">First name</Label>
-        <Input
-          thin
-          value={$userFetch?.data?.firstName}
-          on:blur={updateUserFirstName}
-        />
-      </div>
-      <div class="field">
-        <Label size="L">Last name</Label>
-        <Input
-          thin
-          value={$userFetch?.data?.lastName}
-          on:blur={updateUserLastName}
-        />
-      </div>
-      <!-- don't let a user remove the privileges that let them be here -->
-      {#if userId !== $auth.user._id}
-        <div class="field">
-          <Label size="L">Role</Label>
-          <Select
-            value={globalRole}
-            options={Constants.BbRoles}
-            on:change={updateUserRole}
-          />
-        </div>
-      {/if}
-    </div>
-  </Layout>
-
-  {#if hasGroupsLicense}
-    <!-- User groups -->
+{#if loaded}
+  <Layout gap="L" noPadding>
     <Layout gap="XS" noPadding>
-      <div class="tableTitle">
+      <div>
+        <ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
+          Back
+        </ActionButton>
+      </div>
+    </Layout>
+    <Layout gap="XS" noPadding>
+      <div class="title">
         <div>
-          <Heading size="XS">User groups</Heading>
-          <Body size="S">Add or remove this user from user groups</Body>
+          <div style="display: flex;">
+            <Avatar size="XXL" {initials} />
+            <div class="subtitle">
+              <Heading size="S">{nameLabel}</Heading>
+              {#if nameLabel !== $userFetch?.data?.email}
+                <Body size="XS">{$userFetch?.data?.email}</Body>
+              {/if}
+            </div>
+          </div>
         </div>
-        <div bind:this={popoverAnchor}>
-          <Button on:click={popover.show()} icon="UserGroup" cta
-            >Add User Group</Button
-          >
+        <div>
+          <ActionMenu align="right">
+            <span slot="control">
+              <Icon hoverable name="More" />
+            </span>
+            <MenuItem on:click={resetPasswordModal.show} icon="Refresh"
+              >Force Password Reset</MenuItem
+            >
+            <MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem
+            >
+          </ActionMenu>
         </div>
-        <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
-          <UserGroupPicker
-            key={"name"}
-            title={"Group"}
-            bind:searchTerm
-            bind:selected={selectedGroups}
-            bind:filtered={filteredGroups}
-            {addAll}
-            select={addGroup}
+      </div>
+    </Layout>
+    <Layout gap="S" noPadding>
+      <div class="fields">
+        <div class="field">
+          <Label size="L">First name</Label>
+          <Input
+            thin
+            value={$userFetch?.data?.firstName}
+            on:blur={updateUserFirstName}
           />
-        </Popover>
+        </div>
+        <div class="field">
+          <Label size="L">Last name</Label>
+          <Input
+            thin
+            value={$userFetch?.data?.lastName}
+            on:blur={updateUserLastName}
+          />
+        </div>
+        <!-- don't let a user remove the privileges that let them be here -->
+        {#if userId !== $auth.user._id}
+          <div class="field">
+            <Label size="L">Role</Label>
+            <Select
+              value={globalRole}
+              options={Constants.BbRoles}
+              on:change={updateUserRole}
+            />
+          </div>
+        {/if}
+      </div>
+    </Layout>
+
+    {#if hasGroupsLicense}
+      <!-- User groups -->
+      <Layout gap="XS" noPadding>
+        <div class="tableTitle">
+          <div>
+            <Heading size="XS">User groups</Heading>
+            <Body size="S">Add or remove this user from user groups</Body>
+          </div>
+          <div bind:this={popoverAnchor}>
+            <Button on:click={popover.show()} icon="UserGroup" cta>
+              Add user group
+            </Button>
+          </div>
+          <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
+            <UserGroupPicker
+              key={"name"}
+              title={"Group"}
+              bind:searchTerm
+              bind:selected={selectedGroups}
+              bind:filtered={filteredGroups}
+              {addAll}
+              select={addGroup}
+            />
+          </Popover>
+        </div>
+
+        <List>
+          {#if userGroups.length}
+            {#each userGroups as group}
+              <ListItem
+                title={group.name}
+                icon={group.icon}
+                iconBackground={group.color}
+                ><Icon
+                  on:click={removeGroup(group._id)}
+                  hoverable
+                  size="L"
+                  name="Close"
+                /></ListItem
+              >
+            {/each}
+          {:else}
+            <ListItem icon="UserGroup" title="No groups" />
+          {/if}
+        </List>
+      </Layout>
+    {/if}
+    <!-- User Apps -->
+    <Layout gap="S" noPadding>
+      <div class="appsTitle">
+        <Heading weight="light" size="XS">Apps</Heading>
+        <div style="margin-top: var(--spacing-xs)">
+          <Body size="S">Manage apps that this user has been assigned to</Body>
+        </div>
       </div>
 
       <List>
-        {#if userGroups.length}
-          {#each userGroups as group}
-            <ListItem
-              title={group.name}
-              icon={group.icon}
-              iconBackground={group.color}
-              ><Icon
-                on:click={removeGroup(group._id)}
-                hoverable
-                size="L"
-                name="Close"
-              /></ListItem
+        {#if allAppList.length}
+          {#each allAppList as app}
+            <div
+              class="pointer"
+              on:click={$goto(`../../overview/${app.devId}`)}
             >
+              <ListItem
+                title={app.name}
+                iconBackground={app?.icon?.color || ""}
+                icon={app?.icon?.name || "Apps"}
+              >
+                <div class="title ">
+                  <StatusLight
+                    square
+                    color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
+                  >
+                    {getRoleLabel(getHighestRole(app.roles))}
+                  </StatusLight>
+                </div>
+              </ListItem>
+            </div>
           {/each}
         {:else}
-          <ListItem icon="UserGroup" title="No groups" />
+          <ListItem icon="Apps" title="No apps" />
         {/if}
       </List>
     </Layout>
-  {/if}
-  <!-- User Apps -->
-  <Layout gap="S" noPadding>
-    <div class="appsTitle">
-      <Heading weight="light" size="XS">Apps</Heading>
-      <div style="margin-top: var(--spacing-xs)">
-        <Body size="S">Manage apps that this user has been assigned to</Body>
-      </div>
-    </div>
-
-    <List>
-      {#if allAppList.length}
-        {#each allAppList as app}
-          <div class="pointer" on:click={$goto(`../../overview/${app.devId}`)}>
-            <ListItem
-              title={app.name}
-              iconBackground={app?.icon?.color || ""}
-              icon={app?.icon?.name || "Apps"}
-            >
-              <div class="title ">
-                <StatusLight
-                  color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
-                />
-                <div style="margin-left: var(--spacing-s);">
-                  <Body size="XS"
-                    >{Constants.Roles[getHighestRole(app.roles)]}</Body
-                  >
-                </div>
-              </div>
-            </ListItem>
-          </div>
-        {/each}
-      {:else}
-        <ListItem icon="Apps" title="No apps" />
-      {/if}
-    </List>
   </Layout>
-</Layout>
+{/if}
 
 <Modal bind:this={deleteModal}>
   <DeleteUserModal user={$userFetch.data} />
@@ -380,17 +408,14 @@
 
   .subtitle {
     padding: 0 0 0 var(--spacing-m);
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
   }
 
   .appsTitle {
     display: flex;
     flex-direction: column;
   }
-
-  .alignEmail {
-    display: flex;
-    align-items: center;
-    margin-left: var(--spacing-m);
-  }
 </style>

packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte

@@ -123,12 +123,7 @@
   .fix-height {
     margin-bottom: 5%;
   }
-
   .normal-height {
     margin-bottom: 0%;
   }
-
-  :global(.spectrum-Picker) {
-    border-top-left-radius: 0px;
-  }
 </style>

packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte

@@ -108,10 +108,6 @@
 </ModalContent>
 
 <style>
-  :global(.spectrum-Picker) {
-    border-top-left-radius: 0px;
-  }
-
   .dropzone {
     text-align: center;
     display: flex;

packages/builder/src/pages/builder/portal/manage/users/_components/PasswordModal.svelte

@@ -79,10 +79,6 @@
     display: flex;
   }
 
-  :global(.spectrum-Picker) {
-    border-top-left-radius: 0px;
-  }
-
   .container {
     width: 100%;
     height: var(--spectrum-alias-item-height-l);

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

@@ -249,10 +249,10 @@
         dataCy="add-user"
         on:click={createUserModal.show}
         icon="UserAdd"
-        cta>Add Users</Button
+        cta>Add users</Button
       >
       <Button on:click={importUsersModal.show} icon="Import" primary
-        >Import Users</Button
+        >Import users</Button
       >
 
       <div class="field">

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

@@ -3,6 +3,7 @@
     ModalContent,
     PickerDropdown,
     ActionButton,
+    Layout,
     notifications,
   } from "@budibase/bbui"
   import { roles } from "stores/backend"
@@ -38,9 +39,9 @@
     }
   }
 
-  $: filteredGroups = $groups.filter(element => {
-    return !element.apps.find(y => {
-      return y.appId === app.appId
+  $: filteredGroups = $groups.filter(group => {
+    return !group.apps.find(appId => {
+      return appId === app.appId
     })
   })
 
@@ -78,24 +79,26 @@
   onConfirm={() => addData(appData)}
   showCloseIcon={false}
 >
-  {#each appData as input, index}
-    <PickerDropdown
-      autocomplete
-      primaryOptions={optionSections}
-      secondaryOptions={$roles}
-      bind:primaryValue={input.id}
-      bind:secondaryValue={input.role}
-      bind:searchTerm={search}
-      getPrimaryOptionLabel={group => group.name}
-      getPrimaryOptionValue={group => group.name}
-      getPrimaryOptionIcon={group => group.icon}
-      getPrimaryOptionColour={group => group.colour}
-      getSecondaryOptionLabel={role => role.name}
-      getSecondaryOptionValue={role => role._id}
-      getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
-    />
-  {/each}
-
+  <Layout noPadding gap="XS">
+    {#each appData as input, index}
+      <PickerDropdown
+        autocomplete
+        primaryOptions={optionSections}
+        secondaryOptions={$roles}
+        secondaryPlaceholder="Access"
+        bind:primaryValue={input.id}
+        bind:secondaryValue={input.role}
+        bind:searchTerm={search}
+        getPrimaryOptionLabel={group => group.name}
+        getPrimaryOptionValue={group => group.name}
+        getPrimaryOptionIcon={group => group.icon}
+        getPrimaryOptionColour={group => group.colour}
+        getSecondaryOptionLabel={role => role.name}
+        getSecondaryOptionValue={role => role._id}
+        getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
+      />
+    {/each}
+  </Layout>
   <div>
     <ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton>
   </div>

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

@@ -5,7 +5,7 @@
   import { store } from "builderStore"
   import clientPackage from "@budibase/client/package.json"
   import { processStringSync } from "@budibase/string-templates"
-  import { users, auth } from "stores/portal"
+  import { users, auth, apps } from "stores/portal"
   import { createEventDispatcher, onMount } from "svelte"
 
   export let app
@@ -40,9 +40,11 @@
   }
 
   onMount(async () => {
-    let resp = await users.getUserCountByApp({ appId: "app_" + app.appId })
+    let resp = await users.getUserCountByApp({
+      appId: apps.getProdAppID(app.devId),
+    })
     userCount = resp.userCount
-    await users.search({ appId: "app_" + app.appId, limit: 4 })
+    await users.search({ appId: apps.getProdAppID(app.devId), limit: 4 })
   })
 </script>