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,
+  let prevSearch = undefined
-    search = 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,26 +118,37 @@
     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 Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
-      await apps.load()
+      loaded = true
     } catch (error) {
-      notifications.error("Error fetching User Group data")
+      notifications.error("Error fetching user group data")
     }
   })
 </script>
 
+{#if loaded}
   <Layout noPadding>
     <div>
-    <ActionButton on:click={() => $goto("../groups")} size="S" icon="ArrowLeft">
+      <ActionButton
+        on:click={() => $goto("../groups")}
+        size="S"
+        icon="ArrowLeft"
+      >
         Back
       </ActionButton>
     </div>
@@ -132,7 +164,7 @@
         </div>
       </div>
       <div bind:this={popoverAnchor}>
-      <Button on:click={popover.show()} icon="UserAdd" cta>Add User</Button>
+        <Button on:click={popover.show()} icon="UserAdd" cta>Add user</Button>
       </div>
       <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
         <UserGroupPicker
@@ -169,7 +201,8 @@
     >
       <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
+        <Body size="S"
+          >Manage apps that this User group has been assigned to</Body
         >
       </div>
     </div>
@@ -184,11 +217,11 @@
           >
             <div class="title ">
               <StatusLight
-              color={RoleUtils.getRoleColour(group.roles[app.appId])}
+                square
-            />
+                color={RoleUtils.getRoleColour(group.roles[`app_${app.appId}`])}
-            <div style="margin-left: var(--spacing-s);">
+              >
-              <Body size="XS">{group.roles[app.appId]}</Body>
+                {getRoleLabel(app.appId)}
-            </div>
+              </StatusLight>
             </div>
           </ListItem>
         {/each}
@@ -197,6 +230,7 @@
       {/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(
+  const DefaultGroup = {
-    Constants.Features.USER_GROUPS
-  )
-
-  let modal
-  let group = {
     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,14 +207,15 @@
   function addAll() {}
   onMount(async () => {
     try {
-      await groups.actions.init()
+      await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
-      await apps.load()
+      loaded = true
     } catch (error) {
-      notifications.error("Error getting User groups")
+      notifications.error("Error getting user groups")
     }
   })
 </script>
 
+{#if loaded}
   <Layout gap="L" noPadding>
     <Layout gap="XS" noPadding>
       <div>
@@ -191,27 +228,15 @@
       <div class="title">
         <div>
           <div style="display: flex;">
-          <Avatar
+            <Avatar size="XXL" {initials} />
-            size="XXL"
-            initials={user?.email
-              .split(" ")
-              .map(x => x[0])
-              .join("")}
-          />
-
-          {#if fullName}
             <div class="subtitle">
-              <Heading size="S">{fullName}</Heading>
+              <Heading size="S">{nameLabel}</Heading>
-
+              {#if nameLabel !== $userFetch?.data?.email}
                 <Body size="XS">{$userFetch?.data?.email}</Body>
-            </div>
-          {:else}
-            <div class="alignEmail">
-              <Heading size="S">{$userFetch?.data?.email}</Heading>
-            </div>
               {/if}
             </div>
           </div>
+        </div>
         <div>
           <ActionMenu align="right">
             <span slot="control">
@@ -220,7 +245,8 @@
             <MenuItem on:click={resetPasswordModal.show} icon="Refresh"
               >Force Password Reset</MenuItem
             >
-          <MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem>
+            <MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem
+            >
           </ActionMenu>
         </div>
       </div>
@@ -266,9 +292,9 @@
             <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
+            <Button on:click={popover.show()} icon="UserGroup" cta>
-            >Add User Group</Button
+              Add user group
-          >
+            </Button>
           </div>
           <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
             <UserGroupPicker
@@ -316,7 +342,10 @@
       <List>
         {#if allAppList.length}
           {#each allAppList as app}
-          <div class="pointer" on:click={$goto(`../../overview/${app.devId}`)}>
+            <div
+              class="pointer"
+              on:click={$goto(`../../overview/${app.devId}`)}
+            >
               <ListItem
                 title={app.name}
                 iconBackground={app?.icon?.color || ""}
@@ -324,13 +353,11 @@
               >
                 <div class="title ">
                   <StatusLight
+                    square
                     color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
-                />
-                <div style="margin-left: var(--spacing-s);">
-                  <Body size="XS"
-                    >{Constants.Roles[getHighestRole(app.roles)]}</Body
                   >
-                </div>
+                    {getRoleLabel(getHighestRole(app.roles))}
+                  </StatusLight>
                 </div>
               </ListItem>
             </div>
@@ -341,6 +368,7 @@
       </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 => {
+  $: filteredGroups = $groups.filter(group => {
-    return !element.apps.find(y => {
+    return !group.apps.find(appId => {
-      return y.appId === app.appId
+      return appId === app.appId
     })
   })
 
@@ -78,11 +79,13 @@
   onConfirm={() => addData(appData)}
   showCloseIcon={false}
 >
+  <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}
@@ -95,7 +98,7 @@
         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>