fix(editor): UX Improvements to RBAC feature set (#9683)

packages/design-system/src/components/N8nAvatar/Avatar.vue

@@ -15,6 +15,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import Avatar from 'vue-boring-avatars';
+import { getInitials } from '../../utils/labelUtil';
 
 interface AvatarProps {
 	firstName: string;
@@ -37,11 +38,7 @@ const props = withDefaults(defineProps<AvatarProps>(), {
 	],
 });
 
-const initials = computed(
-	() =>
-		(props.firstName ? props.firstName.charAt(0) : '') +
-		(props.lastName ? props.lastName.charAt(0) : ''),
-);
+const initials = computed(() => getInitials(`${props.firstName} ${props.lastName}`));
 
 const getColors = (colors: string[]): string[] => {
 	const style = getComputedStyle(document.body);

packages/design-system/src/components/N8nMenuItem/MenuItem.vue

@@ -97,7 +97,7 @@ import N8nIcon from '../N8nIcon';
 import ConditionalRouterLink from '../ConditionalRouterLink';
 import type { IMenuItem } from '../../types';
 import { doesMenuItemMatchCurrentRoute } from './routerUtil';
-import { getInitials } from './labelUtil';
+import { getInitials } from '../../utils/labelUtil';
 
 interface MenuItemProps {
 	item: IMenuItem;

packages/design-system/src/utils/labelUtil.spec.ts

@@ -1,4 +1,4 @@
-import { getInitials } from '../labelUtil';
+import { getInitials } from './labelUtil';
 
 describe('labelUtil.getInitials', () => {
 	it.each([