diff --git a/public/app/core/components/RolePicker/utils.ts b/public/app/core/components/RolePicker/utils.ts
index d6c74750d51..ed1021f2d8c 100644
--- a/public/app/core/components/RolePicker/utils.ts
+++ b/public/app/core/components/RolePicker/utils.ts
@@ -7,21 +7,25 @@ export const isNotDelegatable = (role: Role) => {
 // addDisplayNameForFixedRole provides a fallback name for fixed roles
 // this is "incase" a fixed role is introduced but without a displayname set
 // example: currently this would give:
-// fixed:datasources:name -> datasources name
+// fixed:datasources:name       -> datasources name
 // fixed:datasources:admin      -> datasources admin
+// fixed:support.bundles:writer -> support bundles writer
 export const addDisplayNameForFixedRole = (role: Role) => {
   const fixedRolePrefix = 'fixed:';
   if (!role.displayName && role.name.startsWith(fixedRolePrefix)) {
     let newRoleName = '';
     let rNameWithoutFixedPrefix = role.name.replace(fixedRolePrefix, '');
-    newRoleName = rNameWithoutFixedPrefix.replace(/:/g, ' ');
+    newRoleName = rNameWithoutFixedPrefix.replace(/[:\\.]/g, ' ');
     role.displayName = newRoleName;
   }
   return role;
 };
 
 // Adds a display name for use when the list of roles is filtered
+// If either group or displayName are undefined, we fall back (see RoleMenuOption.tsx)
 export const addFilteredDisplayName = (role: Role) => {
-  role.filteredDisplayName = role.group + ':' + role.displayName;
+  if (role.group && role.displayName) {
+    role.filteredDisplayName = role.group + ':' + role.displayName;
+  }
   return role;
 };