Add uiMetdata prefix to roles everywhere

packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte

@@ -29,7 +29,7 @@
   $: roleMismatch = checkRoleMismatch(permissions)
   $: selectedRole = roleMismatch ? null : permissions?.[0]?.value
   $: readableRole = selectedRole
-    ? $roles.find(x => x._id === selectedRole)?.displayName
+    ? $roles.find(x => x._id === selectedRole)?.uiMetadata.displayName
     : null
   $: buttonLabel = readableRole ? `Access: ${readableRole}` : "Access"
   $: highlight = roleMismatch || selectedRole === Roles.PUBLIC
@@ -39,8 +39,8 @@
     .filter(x => !builtins.includes(x._id))
     .slice()
     .toSorted((a, b) => {
-      const aName = a.displayName || a.name
+      const aName = a.uiMetadata.displayName || a.name
-      const bName = b.displayName || b.name
+      const bName = b.uiMetadata.displayName || b.name
       return aName < bName ? -1 : 1
     })
 
@@ -159,23 +159,23 @@
   <List>
     {#each builtInRoles as role}
       <ListItem
-        title={role.displayName}
+        title={role.uiMetadata.displayName}
-        subtitle={role.description}
+        subtitle={role.uiMetadata.description}
         hoverable
         selected={selectedRole === role._id}
         icon="StatusLight"
-        iconColor={role.color}
+        iconColor={role.uiMetadata.color}
         on:click={() => changePermission(role._id)}
       />
     {/each}
     {#each customRoles as role}
       <ListItem
-        title={role.displayName}
+        title={role.uiMetadata.displayName}
-        subtitle={role.description}
+        subtitle={role.uiMetadata.description}
         hoverable
         selected={selectedRole === role._id}
         icon="StatusLight"
-        iconColor={role.color}
+        iconColor={role.uiMetadata.color}
         on:click={() => changePermission(role._id)}
       />
     {/each}

packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte

@@ -125,7 +125,7 @@
     label="Role"
     bind:value={row.roleId}
     options={$roles}
-    getOptionLabel={role => role.displayName}
+    getOptionLabel={role => role.uiMetadata.displayName}
     getOptionValue={role => role._id}
     disabled={!creating}
   />

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

@@ -14,11 +14,13 @@
   const addRole = async () => {
     const role = {
       name: Helpers.uuid(),
-      displayName: getSequentialName($nodes, "New role ", {
+      uiMetadata: {
-        getName: x => x.data.displayName,
+        displayName: getSequentialName($roles, "New role ", {
+          getName: x => x.uiMetadata.displayName,
         }),
         color: "var(--spectrum-global-color-gray-700)",
         description: "Custom role",
+      },
       permissionId: "write",
       inherits: Roles.BASIC,
     }

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

@@ -38,7 +38,7 @@
   $: targetRole = $roles.find(x => x._id === target)
   $: tooltip =
     sourceRole && targetRole
-      ? `Stop ${targetRole.displayName} from inheriting ${sourceRole.displayName}`
+      ? `Stop ${targetRole.uiMetadata.displayName} from inheriting ${sourceRole.uiMetadata.displayName}`
       : null
 
   const getEdgeClasses = (hovered, labelHovered) => {

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

@@ -36,7 +36,7 @@
     if (!name?.length) {
       return "Please enter a name"
     }
-    if (roles.some(x => x.displayName === name && x._id !== id)) {
+    if (roles.some(x => x.uiMetadata.displayName === name && x._id !== id)) {
       return "That name is already used by another role"
     }
     return null
@@ -171,6 +171,7 @@
     background: var(--color);
   }
   .content {
+    width: 0;
     flex: 1 1 auto;
     padding: 0 12px;
     display: flex;
@@ -201,7 +202,8 @@
   .title :global(.spectrum-Icon) {
     color: var(--spectrum-global-color-gray-600);
   }
-  .name {
+  .name,
+  .description {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -209,12 +211,6 @@
   .description {
     color: var(--spectrum-global-color-gray-600);
     font-size: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-    -webkit-box-orient: vertical;
   }
   .node:hover .buttons {
     display: flex;

packages/builder/src/components/backend/RoleEditor/layout.js

@@ -14,9 +14,7 @@ export const roleToNode = role => ({
   type: "role",
   position: { x: 0, y: 0 },
   data: {
-    displayName: role.displayName,
+    ...role.uiMetadata,
-    description: role.description,
-    color: role.color,
     custom: !role._id.match(/[A-Z]+/),
   },
 })
@@ -26,9 +24,11 @@ export const nodeToRole = node => {
   const role = get(roles).find(x => x._id === node.id)
   return {
     ...role,
+    uiMetadata: {
       displayName: node.data.displayName,
       color: node.data.color,
       description: node.data.description,
+    },
   }
 }
 

packages/builder/src/components/common/RoleSelect.svelte

@@ -49,8 +49,8 @@
       let options = roles
         .filter(role => allowedRoles.includes(role._id))
         .map(role => ({
-          color: role.color,
+          color: role.uiMetadata.color,
-          name: enrichLabel(role.displayName),
+          name: enrichLabel(role.uiMetadata.displayName),
           _id: role._id,
         }))
       if (allowedRoles.includes(Constants.Roles.CREATOR)) {
@@ -65,8 +65,8 @@
 
     // Allow all core roles
     let options = roles.map(role => ({
-      color: role.color,
+      color: role.uiMetadata.color,
-      name: enrichLabel(role.displayName),
+      name: enrichLabel(role.uiMetadata.displayName),
       _id: role._id,
     }))
 

packages/builder/src/components/design/settings/controls/RoleSelect.svelte

@@ -11,9 +11,9 @@
   bind:value
   on:change
   options={$roles}
-  getOptionLabel={role => role.displayName}
+  getOptionLabel={role => role.uiMetadata.displayName}
   getOptionValue={role => role._id}
-  getOptionColour={role => role.color}
+  getOptionColour={role => role.uiMetadata.color}
   {placeholder}
   {error}
 />

packages/builder/src/dataBinding.js

@@ -725,10 +725,10 @@ const getRoleBindings = () => {
     return {
       type: "context",
       runtimeBinding: `'${role._id}'`,
-      readableBinding: `Role.${role.displayName}`,
+      readableBinding: `Role.${role.uiMetadata.displayName}`,
       category: "Role",
       icon: "UserGroup",
-      display: { type: "string", name: role.displayName },
+      display: { type: "string", name: role.uiMetadata.displayName },
     }
   })
 }

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte

@@ -7,12 +7,13 @@
 
   let showTooltip = false
 
-  $: color = role.color || "var(--spectrum-global-color-static-magenta-400)"
   $: role = $roles.find(role => role._id === roleId)
+  $: color =
+    role?.uiMetadata.color || "var(--spectrum-global-color-static-magenta-400)"
   $: tooltip =
     roleId === Roles.PUBLIC
       ? "Open to the public"
-      : `Requires ${role?.displayName} access`
+      : `Requires ${role?.uiMetadata.displayName || "Unknown role"} access`
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte

@@ -11,7 +11,7 @@
   const getRoleLabel = roleId => {
     return roleId === Constants.Roles.CREATOR
       ? capitalise(Constants.Roles.CREATOR.toLowerCase())
-      : role?.displayName || role?.name || "Custom role"
+      : role?.uiMetadata.displayName || role?.name || "Custom role"
   }
 </script>
 

packages/builder/src/stores/builder/roles.js

@@ -9,9 +9,12 @@ export function createRolesStore() {
       ...role,
 
       // Ensure we have new metadata for all roles
-      displayName: role.displayName || role.name,
+      uiMetadata: {
-      color: role.color || "var(--spectrum-global-color-magenta-400)",
+        displayName: role.uiMetadata?.displayName || role.name,
-      description: role.description || "Custom role",
+        color:
+          role.uiMetadata?.color || "var(--spectrum-global-color-magenta-400)",
+        description: role.uiMetadata?.description || "Custom role",
+      },
     }))
   })
 

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

@@ -12,11 +12,12 @@
     <StatusLight
       square
       size="L"
-      color={role?.color || "var(--spectrum-global-color-magenta-400)"}
+      color={role?.uiMetadata?.color ||
+        "var(--spectrum-global-color-static-magenta-400)"}
     />
   </div>
   <div class="value">
-    {role?.displayName || role?.name || value}
+    {role?.uiMetadata?.displayName || role?.name || "Unknown role"}
   </div>
 </div>