Show username in user role dropdown

The options in the dropdown for selecting a user in the
access policy tab would show the user role
(aka the thing actually being selected) instead of
the user information like in the input field.
This fixes that.

Also adds some sensible fallbacks in case someone
decides to have users without names.

src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx

@@ -408,18 +408,6 @@ export const AccessPolicyTable = <T extends AccessPolicyTabFormikProps>({
 
 	const user = useAppSelector(state => getUserInformation(state));
 
-	const createPolicyLabel = (policy: TransformedAcl) => {
-		console.log(policy.user)
-		if (policy.user) {
-			if (policy.user.email !== undefined && policy.user.email !== "") {
-				return policy.user.name + " <" + policy.user.email + ">"
-			}
-			return policy.user.name
-		} else {
-			return policy.role
-		}
-	}
-
 	const createPolicy = (role: string, withUser: boolean): TransformedAcl => {
 		let user = withUser ? {username: "", name: "", email: ""} : undefined
 
@@ -769,4 +757,21 @@ export const TemplateSelector = <T extends TemplateSelectorProps>({
 			</div>
 		</div>
 	)
-}
+}
+
+export const createPolicyLabel = (policy: TransformedAcl) => {
+	if (policy.user) {
+		if (policy.user.email !== undefined && policy.user.email !== "") {
+			return policy.user.name + " <" + policy.user.email + ">"
+		}
+		if (policy.user.name) {
+			return policy.user.name
+		}
+		if (policy.user.username) {
+			return policy.user.username
+		}
+		return policy.role
+	} else {
+		return policy.role
+	}
+}

src/utils/dropDownUtils.ts

@@ -1,6 +1,7 @@
 import { TFunction } from "i18next";
 import { DropDownType } from './../components/shared/DropDown';
 import { isJson } from "./utils";
+import { createPolicyLabel } from "../components/shared/modals/ResourceDetailsAccessPolicyTab";
 /*
  * this file contains functions, which are needed for the searchable drop-down selections
  */
@@ -85,13 +86,20 @@ export const formatDropDownOptions = (
 				label: item.name,
 			});
 		}
-	} else if (type === "captureAgent" || type === "aclRole") {
+	} else if (type === "captureAgent") {
 		for (const item of unformattedOptions) {
 			formattedOptions.push({
 				value: item.name,
 				label: item.name,
 			});
 		}
+	} else if (type === "aclRole") {
+		for (const item of unformattedOptions) {
+			formattedOptions.push({
+				value: item.name,
+				label: createPolicyLabel(item) ? createPolicyLabel(item) : item.name,
+			});
+		}
 	} else if (type === "workflow") {
 		for (const item of unformattedOptions) {
 			formattedOptions.push({