From 309b02c6f663e54c780faac77a1ca53e2731740b Mon Sep 17 00:00:00 2001
From: Kata <git@kat.cafe>
Date: Thu, 21 Mar 2019 09:39:28 -0500
Subject: [PATCH] sort roles and fix empty name styling

---
 ui/components/role/index.js | 4 +++-
 ui/stores/roles.js          | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/components/role/index.js b/ui/components/role/index.js
index 8ba78c5..fa297aa 100644
--- a/ui/components/role/index.js
+++ b/ui/components/role/index.js
@@ -64,6 +64,8 @@ export default class Role extends React.Component<RoleProps, RoleState> {
       base: Color(color).hsl().string()
     }
 
+    const name = (this.props.role.name !== '') ? this.props.role.name : <>&nbsp;</>
+
     return <RoleStyled
       active={this.props.active}
       disabled={this.props.disabled}
@@ -73,7 +75,7 @@ export default class Role extends React.Component<RoleProps, RoleState> {
       colors={roleColors}
       title={(this.props.disabled) ? 'This role has unsafe permissions.' : null}
     >
-      {this.props.role.name}
+      {name}
       { (this.props.disabled && this.state.hovering) && <Tooltip>This role has unsafe permissions.</Tooltip> }
     </RoleStyled>
   }
diff --git a/ui/stores/roles.js b/ui/stores/roles.js
index 7e8eb82..095e94e 100644
--- a/ui/stores/roles.js
+++ b/ui/stores/roles.js
@@ -65,7 +65,7 @@ const getUncategorized = (roleMap: OrderedMap<RenderedRole>, allCategories: Set)
     name: 'Uncategorized',
     position: -1,
     roles: rolesLeft,
-    _roles: rolesLeft.map(v => roleMap.get(v)).filter(v => v != null),
+    _roles: rolesLeft.map(v => roleMap.get(v)).filter(v => v != null).sortBy(v => -v.position),
     hidden: true,
     type: 'multi'
   }