fix sorting of users and groups

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -12,7 +12,12 @@
   } from "@budibase/bbui"
   import { store } from "builderStore"
   import { groups, licensing, apps, users, auth, admin } from "stores/portal"
-  import { fetchData, Constants, Utils } from "@budibase/frontend-core"
+  import {
+    fetchData,
+    Constants,
+    Utils,
+    RoleUtils,
+  } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
   import { API } from "api"
   import GroupIcon from "../../../portal/users/groups/_components/GroupIcon.svelte"
@@ -132,16 +137,29 @@
           isAppBuilder,
         }
       })
-      .sort((a, b) => {
-        const roleA = a.role
-        const roleB = b.role
-        if (roleA === undefined && roleB !== undefined) {
-          return 1
-        } else if (roleA !== undefined && roleB === undefined) {
-          return -1
-        }
-        return 0
-      })
+      .sort(sortRoles)
+  }
+
+  const sortRoles = (a, b) => {
+    const roleA = a.role
+    const roleB = b.role
+
+    const priorityA = RoleUtils.getRolePriority(roleA)
+    const priorityB = RoleUtils.getRolePriority(roleB)
+
+    if (roleA === undefined && roleB !== undefined) {
+      return 1
+    } else if (roleA !== undefined && roleB === undefined) {
+      return -1
+    }
+
+    if (priorityA < priorityB) {
+      return 1
+    } else if (priorityA > priorityB) {
+      return -1
+    }
+
+    return 0
   }
 
   const debouncedUpdateFetch = Utils.debounce(searchUsers, 250)
@@ -251,6 +269,7 @@
         return nameMatch
       })
       .map(enrichGroupRole)
+      .sort(sortRoles)
   }
 
   const enrichGroupRole = group => {

packages/frontend-core/src/utils/roles.js

@@ -1,7 +1,8 @@
 import { Roles } from "../constants"
 
 const RolePriorities = {
-  [Roles.ADMIN]: 4,
+  [Roles.ADMIN]: 5,
+  [Roles.CREATOR]: 4,
   [Roles.POWER]: 3,
   [Roles.BASIC]: 2,
   [Roles.PUBLIC]: 1,
@@ -13,8 +14,8 @@ const RoleColours = {
   [Roles.PUBLIC]: "var(--spectrum-global-color-static-blue-400)",
 }
 
-export const getRolePriority = roleId => {
-  return RolePriorities[roleId] ?? 0
+export const getRolePriority = role => {
+  return RolePriorities[role] ?? 0
 }
 
 export const getRoleColour = roleId => {