Add custom renderer for user roles to show pretty names

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -75,18 +75,29 @@
       ]
     }
 
+    const canEditColumn = key => {
+      if (!allowEditing) {
+        return false
+      }
+      return !(isUsersTable && ["email", "roleId"].indexOf(key) !== -1)
+    }
+
     Object.entries(schema || {}).forEach(([key, value]) => {
       result.push({
         headerCheckboxSelection: false,
         headerComponent: TableHeader,
         headerComponentParams: {
           field: schema[key],
-          editable: allowEditing,
+          editable: canEditColumn(key),
         },
         headerName: value.displayFieldName || key,
         field: key,
         sortable: true,
-        cellRenderer: getRenderer(schema[key], true),
+        cellRenderer: getRenderer({
+          schema: schema[key],
+          editable: true,
+          isUsersTable,
+        }),
         cellRendererParams: {
           selectRelationship,
         },

packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte

@@ -0,0 +1,43 @@
+<!-- Module scoped cache of saved role options -->
+<script context="module">
+  import builderApi from "builderStore/api"
+
+  let cachedRoles
+
+  async function getRoles(force = false) {
+    if (cachedRoles && !force) {
+      return await cachedRoles
+    }
+    cachedRoles = new Promise(resolve => {
+      console.log("HIT API")
+      builderApi
+        .get("/api/roles")
+        .then(response => response.json())
+        .then(resolve)
+    })
+    return await cachedRoles
+  }
+</script>
+
+<script>
+  export let roleId
+
+  let roleName
+  $: getRole()
+
+  async function getRole() {
+    // Try to find a matching role
+    let roles = await getRoles()
+    let role = roles.find(role => role._id === roleId)
+
+    // If we didn't find a matching role, try updating the cached results
+    if (!role) {
+      let roles = await getRoles(true)
+      let role = roles.find(role => role._id === roleId)
+    }
+    role = roles.find(role => role._id === roleId)
+    roleName = role?.name ?? "Unknown role"
+  }
+</script>
+
+<div>{roleName}</div>

packages/builder/src/components/backend/DataTable/cells/cellRenderers.js

@@ -3,15 +3,23 @@ import EditRow from "../modals/EditRow.svelte"
 import CreateEditUser from "../modals/CreateEditUser.svelte"
 import DeleteRow from "../modals/DeleteRow.svelte"
 import RelationshipDisplay from "./RelationshipCell.svelte"
+import RoleCell from "./RoleCell.svelte"
 
 const renderers = {
   attachment: attachmentRenderer,
   link: linkedRowRenderer,
 }
 
-export function getRenderer(schema, editable) {
+export function getRenderer({ schema, editable, isUsersTable }) {
+  const rendererParams = {
+    options: schema.options,
+    constraints: schema.constraints,
+    editable,
+  }
   if (renderers[schema.type]) {
-    return renderers[schema.type](schema.options, schema.constraints, editable)
+    return renderers[schema.type](rendererParams)
+  } else if (isUsersTable && schema.name === "roleId") {
+    return roleRenderer(rendererParams)
   } else {
     return false
   }
@@ -63,15 +71,14 @@ export function userRowRenderer(params) {
   return container
 }
 
-/* eslint-disable no-unused-vars */
-function attachmentRenderer(options, constraints, editable) {
+function attachmentRenderer() {
   return params => {
     const container = document.createElement("div")
     container.style.height = "100%"
     container.style.display = "flex"
     container.style.alignItems = "center"
 
-    const attachmentInstance = new AttachmentList({
+    new AttachmentList({
       target: container,
       props: {
         files: params.value || [],
@@ -82,7 +89,6 @@ function attachmentRenderer(options, constraints, editable) {
   }
 }
 
-/* eslint-disable no-unused-vars */
 function linkedRowRenderer() {
   return params => {
     let container = document.createElement("div")
@@ -102,3 +108,21 @@ function linkedRowRenderer() {
     return container
   }
 }
+
+function roleRenderer() {
+  return params => {
+    let container = document.createElement("div")
+    container.style.display = "grid"
+    container.style.height = "100%"
+    container.style.alignItems = "center"
+
+    new RoleCell({
+      target: container,
+      props: {
+        roleId: params.value,
+      },
+    })
+
+    return container
+  }
+}

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -2,7 +2,6 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { TableNames } from "constants"
-  import ListItem from "./ListItem.svelte"
   import CreateTableModal from "./modals/CreateTableModal.svelte"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
@@ -47,7 +46,9 @@
         text={table.name}
         selected={selectedView === `all_${table._id}`}
         on:click={() => selectTable(table)}>
-        <EditTablePopover {table} />
+        {#if table._id !== TableNames.USERS}
+          <EditTablePopover {table} />
+        {/if}
       </NavItem>
       {#each Object.keys(table.views || {}) as viewName}
         <NavItem