Adding group badges to users.

packages/bbui/src/Badge/Badge.svelte

@@ -11,6 +11,7 @@
   export let active = false
   export let inactive = false
   export let hoverable = false
+  export let customColor = null
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -29,6 +30,7 @@
   class:spectrum-Label--seafoam={seafoam}
   class:spectrum-Label--active={active}
   class:spectrum-Label--inactive={inactive}
+  style={customColor ? `background-color: ${customColor};` : ""}
 >
   <slot />
 </span>

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -13,6 +13,7 @@
     FancyInput,
     Button,
     FancySelect,
+    Badge,
   } from "@budibase/bbui"
   import { builderStore, appStore, roles, appPublished } from "@/stores/builder"
   import {
@@ -741,11 +742,15 @@
                 <div class="auth-entity-access-title">Access</div>
               </div>
               {#each allUsers as user}
+                {@const userGroups = sdk.users.getUserGroups(user, $groups)}
                 <div class="auth-entity">
                   <div class="details">
                     <div class="user-email" title={user.email}>
                       {user.email}
                     </div>
+                    {#each userGroups as group}
+                      <Badge size="S" customColor={group.color}>{group.name}</Badge>
+                    {/each}
                   </div>
                   <div class="auth-entity-access" class:muted={user.group}>
                     <RoleSelect

packages/shared-core/src/sdk/documents/users.ts

@@ -131,9 +131,14 @@ export function containsUserID(value: string | undefined): boolean {
   return value.includes(`${DocumentType.USER}${SEPARATOR}`)
 }
 
-export function userAppAccessList(user: User, groups?: UserGroup[]) {
-  const userGroups =
+export function getUserGroups(user: User, groups?: UserGroup[]) {
+  return (
     groups?.filter(group => group.users?.find(u => u._id === user._id)) || []
+  )
+}
+
+export function userAppAccessList(user: User, groups?: UserGroup[]) {
+  const userGroups = getUserGroups(user, groups)
   const userGroupApps = userGroups.flatMap(userGroup =>
     Object.keys(userGroup.roles || {})
   )