Add dedicateed renderer for roles tags

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

@@ -19,7 +19,8 @@
   import { fetchData } from "helpers"
   import { users, auth } from "stores/portal"
 
-  import TagsRenderer from "./_components/TagsTableRenderer.svelte"
+  import TagsRenderer from "./_components/RolesTagsTableRenderer.svelte"
+
   import UpdateRolesModal from "./_components/UpdateRolesModal.svelte"
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
 

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

@@ -0,0 +1,8 @@
+<script>
+  import TagsTableRenderer from "./TagsTableRenderer.svelte"
+  export let value
+
+  $: roles = value?.filter(role => role != null).map(role => role.name) ?? []
+</script>
+
+<TagsTableRenderer value={roles} />

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

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