regression: disabled voip leaves empty section in the user menu (#33521)

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx

@@ -7,14 +7,14 @@ import React from 'react';
 import UserMenuHeader from '../UserMenuHeader';
 import { useAccountItems } from './useAccountItems';
 import { useStatusItems } from './useStatusItems';
-import { useVoipItems } from './useVoipItems';
+import { useVoipItemsSection } from './useVoipItemsSection';
 
 export const useUserMenu = (user: IUser) => {
 	const t = useTranslation();
 
 	const statusItems = useStatusItems();
 	const accountItems = useAccountItems();
-	const voipItems = useVoipItems();
+	const voipSection = useVoipItemsSection();
 
 	const logout = useLogout();
 	const handleLogout = useEffectEvent(() => {
@@ -37,9 +37,7 @@ export const useUserMenu = (user: IUser) => {
 			title: t('Status'),
 			items: statusItems,
 		},
-		{
-			items: voipItems,
-		},
+		voipSection,
 		{
 			title: t('Account'),
 			items: accountItems,
@@ -47,5 +45,5 @@ export const useUserMenu = (user: IUser) => {
 		{
 			items: [logoutItem],
 		},
-	];
+	].filter((section) => section !== undefined);
 };

apps/meteor/client/sidebar/header/hooks/useVoipItems.tsx → apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx

@@ -6,7 +6,7 @@ import { useMutation } from '@tanstack/react-query';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const useVoipItems = (): GenericMenuItemProps[] => {
+export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undefined => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -45,23 +45,25 @@ const useVoipItems = (): GenericMenuItemProps[] => {
 
 	return useMemo(() => {
 		if (!isEnabled) {
-			return [];
+			return;
 		}
 
-		return [
-			{
-				id: 'toggle-voip',
-				icon: isRegistered ? 'phone-disabled' : 'phone',
-				disabled: !isReady || toggleVoip.isLoading,
-				onClick: () => toggleVoip.mutate(),
-				content: (
-					<Box is='span' title={tooltip}>
-						{isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')}
-					</Box>
-				),
-			},
-		];
+		return {
+			items: [
+				{
+					id: 'toggle-voip',
+					icon: isRegistered ? 'phone-disabled' : 'phone',
+					disabled: !isReady || toggleVoip.isLoading,
+					onClick: () => toggleVoip.mutate(),
+					content: (
+						<Box is='span' title={tooltip}>
+							{isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')}
+						</Box>
+					),
+				},
+			],
+		};
 	}, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip]);
 };
 
-export default useVoipItems;
+export default useVoipItemsSection;

apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx

@@ -7,14 +7,14 @@ import React from 'react';
 import UserMenuHeader from '../UserMenuHeader';
 import { useAccountItems } from './useAccountItems';
 import { useStatusItems } from './useStatusItems';
-import useVoipItems from './useVoipItems';
+import { useVoipItemsSection } from './useVoipItemsSection';
 
 export const useUserMenu = (user: IUser) => {
 	const t = useTranslation();
 
 	const statusItems = useStatusItems();
 	const accountItems = useAccountItems();
-	const voipItems = useVoipItems();
+	const voipItemsSection = useVoipItemsSection();
 
 	const logout = useLogout();
 	const handleLogout = useMutableCallback(() => {
@@ -37,9 +37,7 @@ export const useUserMenu = (user: IUser) => {
 			title: t('Status'),
 			items: statusItems,
 		},
-		{
-			items: voipItems,
-		},
+		voipItemsSection,
 		{
 			title: t('Account'),
 			items: accountItems,
@@ -47,5 +45,5 @@ export const useUserMenu = (user: IUser) => {
 		{
 			items: [logoutItem],
 		},
-	];
+	].filter((section) => section !== undefined);
 };

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItems.tsx → apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx

@@ -6,7 +6,7 @@ import { useMutation } from '@tanstack/react-query';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const useVoipItems = (): GenericMenuItemProps[] => {
+export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undefined => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -45,23 +45,23 @@ export const useVoipItems = (): GenericMenuItemProps[] => {
 
 	return useMemo(() => {
 		if (!isEnabled) {
-			return [];
+			return;
 		}
 
-		return [
-			{
-				id: 'toggle-voip',
-				icon: isRegistered ? 'phone-disabled' : 'phone',
-				disabled: !isReady || toggleVoip.isLoading,
-				onClick: () => toggleVoip.mutate(),
-				content: (
-					<Box is='span' title={tooltip}>
-						{isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')}
-					</Box>
-				),
-			},
-		];
+		return {
+			items: [
+				{
+					id: 'toggle-voip',
+					icon: isRegistered ? 'phone-disabled' : 'phone',
+					disabled: !isReady || toggleVoip.isLoading,
+					onClick: () => toggleVoip.mutate(),
+					content: (
+						<Box is='span' title={tooltip}>
+							{isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')}
+						</Box>
+					),
+				},
+			],
+		};
 	}, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip]);
 };
-
-export default useVoipItems;