adds a custom renderer to the users page

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

@@ -17,6 +17,7 @@
   import { fetchData } from "helpers"
   import { users } from "stores/portal"
 
+  import TagsRenderer from "./_components/TagsTableRenderer.svelte"
   import UpdateRolesModal from "./_components/UpdateRolesModal.svelte"
 
   export let userId
@@ -25,14 +26,14 @@
 
   const roleSchema = {
     name: { displayName: "App" },
-    role: { type: "options" },
+    role: {},
   }
 
   // Merge the Apps list and the roles response to get something that makes sense for the table
   $: appList = Object.keys($apps?.data).map(id => ({
     ...$apps?.data?.[id],
     _id: id,
-    role: $roleFetch?.data?.roles?.[id],
+    role: [$roleFetch?.data?.roles?.[id]],
   }))
   let selectedApp
 
@@ -97,6 +98,7 @@
       allowEditColumns={false}
       allowEditRows={false}
       allowSelectRows={false}
+      customRenderers={[{ column: "role", component: TagsRenderer }]}
     />
   </div>
   <Divider size="S" />

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

@@ -0,0 +1,20 @@
+<script>
+  import { Tag, Tags } from "@budibase/bbui"
+  export let value
+
+  const displayLimit = 5
+
+  $: tags = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - tags.length
+</script>
+
+<Tags>
+  {#each tags as tag}
+    <Tag>
+      {tag}
+    </Tag>
+  {/each}
+  {#if leftover}
+    <Tag>+{leftover} more</Tag>
+  {/if}
+</Tags>

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

@@ -12,6 +12,7 @@
     Layout,
     Modal,
   } from "@budibase/bbui"
+  import TagsRenderer from "./_components/TagsTableRenderer.svelte"
   import AddUserModal from "./_components/AddUserModal.svelte"
   import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
   import { users } from "stores/portal"
@@ -20,14 +21,18 @@
 
   const schema = {
     email: {},
-    status: {},
+    status: { displayName: "Development Access", type: "boolean" },
+    // role: { type: "options" },
+    group: {},
     // access: {},
     // group: {}
   }
 
   let search
   let email
-  $: filteredUsers = $users.filter(user => user.email.includes(search || ""))
+  $: filteredUsers = $users
+    .filter(user => user.email.includes(search || ""))
+    .map(user => ({ ...user, group: ["All"] }))
 
   let createUserModal
   let basicOnboardingModal
@@ -68,6 +73,7 @@
       allowEditColumns={false}
       allowEditRows={false}
       allowSelectRows={false}
+      customRenderers={[{ column: "group", component: TagsRenderer }]}
     />
   </div>
 </Layout>