fix: handle blank AppNav user names (HDX-3732)

Author: wrn14897

packages/app/src/components/AppNav/AppNav.components.tsx

@@ -65,20 +65,28 @@ type AppNavUserMenuProps = {
   onClickUserPreferences?: () => void;
 };
 
+const getUserInitials = (userName: string) => {
+  const nameParts = userName.trim().split(/\s+/).filter(Boolean);
+
+  if (nameParts.length === 0) {
+    return 'U';
+  }
+
+  return nameParts.map(name => name.charAt(0).toUpperCase()).join('');
+};
+
 export const AppNavUserMenu = ({
   userName = 'User',
   teamName,
   logoutUrl,
   onClickUserPreferences,
 }: AppNavUserMenuProps) => {
   const { isCollapsed } = React.useContext(AppNavContext);
+  const resolvedUserName = userName.trim() || 'User';
 
-  const initials = userName
-    .split(' ')
-    .map(name => name[0].toUpperCase())
-    .join('');
+  const initials = getUserInitials(resolvedUserName);
 
-  const displayName = IS_LOCAL_MODE ? 'Local mode' : userName;
+  const displayName = IS_LOCAL_MODE ? 'Local mode' : resolvedUserName;
 
   return (
     <Menu position="top-start" transitionProps={{ transition: 'fade-up' }}>

packages/app/src/components/__tests__/AppNavUserMenu.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import { AppNavContext, AppNavUserMenu } from '../AppNav/AppNav.components';
+
+const renderAppNavUserMenu = (userName?: string) => {
+  return renderWithMantine(
+    <AppNavContext.Provider value={{ isCollapsed: false, pathname: '/' }}>
+      <AppNavUserMenu userName={userName} teamName="HyperDX" />
+    </AppNavContext.Provider>,
+  );
+};
+
+describe('AppNavUserMenu', () => {
+  it('renders initials for multi-word names with extra whitespace', () => {
+    renderAppNavUserMenu('  Ernest   Iliiasov  ');
+
+    expect(screen.getByText('EI')).toBeInTheDocument();
+    expect(screen.getByText(/Ernest\s+Iliiasov/)).toBeInTheDocument();
+  });
+
+  it('falls back to the default user label for blank names', () => {
+    renderAppNavUserMenu('   ');
+
+    expect(screen.getByText('U')).toBeInTheDocument();
+    expect(screen.getByText('User')).toBeInTheDocument();
+  });
+});