Ensure roles always have new metadta and update access popover

packages/bbui/src/List/ListItem.svelte

@@ -1,5 +1,6 @@
 <script>
   import Icon from "../Icon/Icon.svelte"
+  import StatusLight from "../StatusLight/StatusLight.svelte"
 
   export let icon = null
   export let iconColor = null
@@ -19,7 +20,9 @@
   class:selected
 >
   <div class="left">
-    {#if icon}
+    {#if icon === "StatusLight"}
+      <StatusLight square size="L" color={iconColor} />
+    {:else if icon}
       <Icon name={icon} color={iconColor} />
     {/if}
     <div class="list-item__text">

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

@@ -30,12 +30,21 @@
   $: roleMismatch = checkRoleMismatch(permissions)
   $: selectedRole = roleMismatch ? null : permissions?.[0]?.value
   $: readableRole = selectedRole
-    ? $roles.find(x => x._id === selectedRole)?.name
+    ? $roles.find(x => x._id === selectedRole)?.displayName
     : null
   $: buttonLabel = readableRole ? `Access: ${readableRole}` : "Access"
-  $: customRoles = $roles.filter(x => !builtins.includes(x._id))
   $: highlight = roleMismatch || selectedRole === Roles.PUBLIC
 
+  $: builtInRoles = builtins.map(roleId => $roles.find(x => x._id === roleId))
+  $: customRoles = $roles
+    .filter(x => !builtins.includes(x._id))
+    .slice()
+    .toSorted((a, b) => {
+      const aName = a.displayName || a.name
+      const bName = b.displayName || b.name
+      return aName < bName ? -1 : 1
+    })
+
   const fetchPermissions = async id => {
     const res = await permissionsStore.forResourceDetailed(id)
     permissions = Object.entries(res?.permissions || {}).map(([perm, info]) => {
@@ -149,39 +158,25 @@
   {/if}
 
   <List>
-    <ListItem
-      title="App admin"
-      subtitle="Only app admins can access this data"
-      hoverable
-      selected={selectedRole === Roles.ADMIN}
-      on:click={() => changePermission(Roles.ADMIN)}
-    />
-    <ListItem
-      title="App power user"
-      subtitle="Only app power users can access this data"
-      hoverable
-      selected={selectedRole === Roles.POWER}
-      on:click={() => changePermission(Roles.POWER)}
-    />
-    <ListItem
-      title="App user"
-      subtitle="Only logged in users can access this data"
-      hoverable
-      selected={selectedRole === Roles.BASIC}
-      on:click={() => changePermission(Roles.BASIC)}
-    />
-    <ListItem
-      title="Public user"
-      subtitle="Users are not required to log in to access this data"
-      hoverable
-      selected={selectedRole === Roles.PUBLIC}
-      on:click={() => changePermission(Roles.PUBLIC)}
-    />
-    {#each customRoles as role}
+    {#each builtInRoles as role}
       <ListItem
-        title={role.name}
+        title={role.displayName}
+        subtitle={role.description}
         hoverable
         selected={selectedRole === role._id}
+        icon="StatusLight"
+        iconColor={role.color}
+        on:click={() => changePermission(role._id)}
+      />
+    {/each}
+    {#each customRoles as role}
+      <ListItem
+        title={role.displayName}
+        subtitle={role.description}
+        hoverable
+        selected={selectedRole === role._id}
+        icon="StatusLight"
+        iconColor={role.color}
         on:click={() => changePermission(role._id)}
       />
     {/each}

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

@@ -14,9 +14,9 @@ export const roleToNode = role => ({
   type: "role",
   position: { x: 0, y: 0 },
   data: {
-    displayName: role.displayName || role.name,
-    description: role.description || "Custom role",
-    color: role.color || "var(--spectrum-global-color-static-magenta-400)",
+    displayName: role.displayName,
+    description: role.description,
+    color: role.color,
     custom: !role._id.match(/[A-Z]+/),
   },
 })

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

@@ -1,12 +1,22 @@
-import { writable } from "svelte/store"
+import { derived, writable } from "svelte/store"
 import { API } from "api"
 import { RoleUtils } from "@budibase/frontend-core"
 
 export function createRolesStore() {
-  const { subscribe, update, set } = writable([])
+  const store = writable([])
+  const enriched = derived(store, $store => {
+    return $store.map(role => ({
+      ...role,
+
+      // Ensure we have new metadata for all roles
+      displayName: role.displayName || role.name,
+      color: role.color || "var(--spectrum-global-color-magenta-400)",
+      description: role.description || "Custom role",
+    }))
+  })
 
   function setRoles(roles) {
-    set(
+    store.set(
       roles.sort((a, b) => {
         const priorityA = RoleUtils.getRolePriority(a._id)
         const priorityB = RoleUtils.getRolePriority(b._id)
@@ -45,7 +55,7 @@ export function createRolesStore() {
   }
 
   return {
-    subscribe,
+    subscribe: enriched.subscribe,
     ...actions,
   }
 }