display role names instead of _id

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

@@ -36,7 +36,8 @@
   $: defaultRoleId = $userFetch?.data?.builder?.global ? "ADMIN" : "BASIC"
   // Merge the Apps list and the roles response to get something that makes sense for the table
   $: appList = Object.keys($apps?.data).map(id => {
-    const role = $userFetch?.data?.roles?.[id] || defaultRoleId
+    const roleId = $userFetch?.data?.roles?.[id] || defaultRoleId
+    const role = $apps?.data?.[id].roles.find(role => role._id === roleId)
     return {
       ...$apps?.data?.[id],
       _id: id,

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

@@ -4,7 +4,7 @@
 
   const displayLimit = 5
 
-  $: roles = value?.filter(role => role != null) ?? []
+  $: roles = value?.filter(role => role != null).map(role => role.name) ?? []
   $: tags = roles.slice(0, displayLimit)
   $: leftover = roles.length - tags.length
 </script>

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

@@ -8,8 +8,7 @@
 
   const dispatch = createEventDispatcher()
 
-  const roles = app.roles
-  let options = roles.map(role => role._id).filter(id => id !== "PUBLIC")
+  let options = app.roles.filter(role => role._id !== "PUBLIC")
   let selectedRole = user?.roles?.[app?._id]
 
   async function updateUserRoles() {
@@ -46,5 +45,7 @@
     on:change
     {options}
     label="Role"
+    getOptionLabel={role => role.name}
+    getOptionValue={role => role._id}
   />
 </ModalContent>