Fix role updating and add custom role type to grid

packages/builder/src/components/backend/RoleEditor/RoleNode.svelte

@@ -45,12 +45,13 @@
   }
 
   const saveChanges = async () => {
-    flow.updateNodeData(id, {
+    const newData = {
       displayName: tempDisplayName,
       description: tempDescription,
       color: tempColor,
-    })
-    await roles.save(nodeToRole({ id, data }))
+    }
+    flow.updateNodeData(id, newData)
+    await roles.save(nodeToRole({ id, data: newData }))
   }
 
   const doAutoLayout = () => {
@@ -81,7 +82,7 @@
       {/if}
     </div>
     {#if data.description}
-      <div class="description">
+      <div class="description" title={data.description}>
         {data.description}
       </div>
     {/if}
@@ -169,7 +170,8 @@
   .title :global(.spectrum-Icon) {
     color: var(--spectrum-global-color-gray-600);
   }
-  .name {
+  .name,
+  .description {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte

@@ -6,6 +6,7 @@
     integrations,
     appStore,
     rowActions,
+    roles,
   } from "stores/builder"
   import { themeStore, admin } from "stores/portal"
   import { TableNames } from "constants"
@@ -26,16 +27,20 @@
   import GridRowActionsButton from "components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte"
   import { DB_TYPE_EXTERNAL } from "constants/backend"
 
-  const userSchemaOverrides = {
+  let generateButton
+
+  $: userSchemaOverrides = {
     firstName: { displayName: "First name", disabled: true },
     lastName: { displayName: "Last name", disabled: true },
     email: { displayName: "Email", disabled: true },
-    roleId: { displayName: "Role", disabled: true },
     status: { displayName: "Status", disabled: true },
+    roleId: {
+      displayName: "Role",
+      type: "role",
+      disabled: true,
+      roles: $roles,
+    },
   }
-
-  let generateButton
-
   $: autoColumnStatus = verifyAutocolumns($tables?.selected)
   $: duplicates = Object.values(autoColumnStatus).reduce((acc, status) => {
     if (status.length > 1) {

packages/frontend-core/src/components/grid/cells/DataCell.svelte

@@ -66,7 +66,7 @@
     focus: () => api?.focus?.(),
     blur: () => api?.blur?.(),
     isActive: () => api?.isActive?.() ?? false,
-    onKeyDown: (...params) => api?.onKeyDown(...params),
+    onKeyDown: (...params) => api?.onKeyDown?.(...params),
     isReadonly: () => readonly,
     getType: () => column.schema.type,
     getValue: () => row[column.name],

packages/frontend-core/src/components/grid/cells/RoleCell.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { StatusLight } from "@budibase/bbui"
+
+  export let value
+  export let schema
+
+  $: role = schema.roles?.find(x => x._id === value)
+</script>
+
+<div class="role-cell">
+  <div class="light">
+    <StatusLight
+      square
+      size="L"
+      color={role?.color || "var(--spectrum-global-color-magenta-400)"}
+    />
+  </div>
+  <div class="value">
+    {role?.displayName || role?.name || value}
+  </div>
+</div>
+
+<style>
+  .role-cell {
+    flex: 1 1 auto;
+    padding: var(--cell-padding);
+    align-self: stretch;
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+    gap: var(--cell-padding);
+  }
+  .light {
+    height: 20px;
+    display: grid;
+    place-items: center;
+  }
+  .value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 20px;
+  }
+</style>

packages/frontend-core/src/components/grid/lib/renderers.js

@@ -15,6 +15,7 @@ import AttachmentSingleCell from "../cells/AttachmentSingleCell.svelte"
 import BBReferenceCell from "../cells/BBReferenceCell.svelte"
 import SignatureCell from "../cells/SignatureCell.svelte"
 import BBReferenceSingleCell from "../cells/BBReferenceSingleCell.svelte"
+import RoleCell from "../cells/RoleCell.svelte"
 
 const TypeComponentMap = {
   [FieldType.STRING]: TextCell,
@@ -33,6 +34,9 @@ const TypeComponentMap = {
   [FieldType.JSON]: JSONCell,
   [FieldType.BB_REFERENCE]: BBReferenceCell,
   [FieldType.BB_REFERENCE_SINGLE]: BBReferenceSingleCell,
+
+  // Custom types for UI only
+  role: RoleCell,
 }
 export const getCellRenderer = column => {
   return TypeComponentMap[column?.schema?.type] || TextCell

packages/frontend-core/src/components/grid/stores/columns.js

@@ -145,6 +145,7 @@ export const initialise = context => {
             readonly: fieldSchema.readonly,
             order: fieldSchema.order ?? oldColumn?.order,
             conditions: fieldSchema.conditions,
+            enrichValue: fieldSchema.enrichValue,
           }
           // Override a few properties for primary display
           if (field === primaryDisplay) {