feat: add sections to room header and user infos menus with menuV2

.changeset/chilled-flies-fold.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+feat: add sections to room header and user infos menus with menuV2

apps/meteor/client/hooks/roomActions/useAutotranslateRoomAction.ts

@@ -22,6 +22,7 @@ export const useAutotranslateRoomAction = () => {
  tabComponent: AutoTranslate,
  order: 20,
  full: true,
+ type: 'customization',
  };
  }, [enabled, permitted]);
 };

apps/meteor/client/hooks/roomActions/useCleanHistoryRoomAction.ts

@@ -31,6 +31,7 @@ export const useCleanHistoryRoomAction = () => {
  }),
  tabComponent: PruneMessages,
  order: 250,
+ type: 'customization',
  };
  }, [federated, permitted, t]);
 };

apps/meteor/client/hooks/roomActions/useE2EERoomAction.ts

@@ -39,6 +39,7 @@ export const useE2EERoomAction = () => {
  icon: 'key',
  order: 13,
  action,
+ type: 'organization',
  ...(federated && {
  tooltip: t('core.E2E_unavailable_for_federation'),
  disabled: true,

apps/meteor/client/hooks/roomActions/useExportMessagesRoomAction.ts

@@ -24,6 +24,7 @@ export const useExportMessagesRoomAction = () => {
  tabComponent: ExportMessages,
  full: true,
  order: 12,
+ type: 'communication',
  };
  }, [permitted]);
 };

apps/meteor/client/hooks/roomActions/useKeyboardShortcutListRoomAction.ts

@@ -13,6 +13,7 @@ export const useKeyboardShortcutListRoomAction = () => {
  icon: 'keyboard',
  tabComponent: KeyboardShortcuts,
  order: 99,
+ type: 'customization',
  }),
  [],
  );

apps/meteor/client/hooks/roomActions/useMembersListRoomAction.ts

@@ -22,7 +22,7 @@ export const useMembersListRoomAction = () => {
  title: team ? 'Teams_members' : 'Members',
  icon: 'members',
  tabComponent: MemberListRouter,
- order: 5,
+ order: 7,
  };
  }, [broadcast, permittedToViewBroadcastMemberList, team]);
 };

apps/meteor/client/hooks/roomActions/useMentionsRoomAction.ts

@@ -12,7 +12,8 @@ export const useMentionsRoomAction = () => {
  title: 'Mentions',
  icon: 'at',
  tabComponent: MentionsTab,
- order: 9,
+ order: 6,
+ type: 'organization',
  }),
  [],
  );

apps/meteor/client/hooks/roomActions/useOTRRoomAction.ts

@@ -33,6 +33,7 @@ export const useOTRRoomAction = () => {
  tabComponent: OTR,
  order: 13,
  full: true,
+ type: 'communication',
  ...(federated && {
  tooltip: t('core.OTR_unavailable_for_federation'),
  disabled: true,

apps/meteor/client/hooks/roomActions/usePinnedMessagesRoomAction.ts

@@ -29,7 +29,8 @@ export const usePinnedMessagesRoomAction = () => {
  tooltip: t('core.Pinned_messages_unavailable_for_federation'),
  disabled: true,
  }),
- order: 11,
+ order: 9,
+ type: 'organization',
  };
  }, [enabled, federated, t]);
 };

apps/meteor/client/hooks/roomActions/usePushNotificationsRoomAction.ts

@@ -20,7 +20,8 @@ export const usePushNotificationsRoomAction = () => {
  title: 'Notifications_Preferences',
  icon: 'bell',
  tabComponent: NotificationPreferences,
- order: 8,
+ order: 11,
+ type: 'customization',
  };
  }, [capable]);
 };

apps/meteor/client/hooks/roomActions/useRocketSearchRoomAction.ts

@@ -12,7 +12,7 @@ export const useRocketSearchRoomAction = () => {
  title: 'Search_Messages',
  icon: 'magnifier',
  tabComponent: MessageSearchTab,
- order: 6,
+ order: 5,
  }),
  [],
  );

apps/meteor/client/hooks/roomActions/useStarredMessagesRoomAction.ts

@@ -13,6 +13,7 @@ export const useStarredMessagesRoomAction = () => {
  icon: 'star',
  tabComponent: StarredMessagesTab,
  order: 10,
+ type: 'organization',
  }),
  [],
  );

apps/meteor/client/hooks/roomActions/useUploadedFilesListRoomAction.ts

@@ -12,7 +12,8 @@ export const useUploadedFilesListRoomAction = () => {
  title: 'Files',
  icon: 'clip',
  tabComponent: RoomFiles,
- order: 7,
+ order: 8,
+ type: 'organization',
  };
  }, []);
 };

apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx

@@ -1,18 +1,24 @@
 import type { Box } from '@rocket.chat/fuselage';
-import { Menu, Option } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { HeaderToolboxAction, HeaderToolboxDivider } from '@rocket.chat/ui-client';
 import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps } from 'react';
 import React, { memo } from 'react';
 
+import GenericMenu from '../../../../components/GenericMenu/GenericMenu';
+import type { GenericMenuItemProps } from '../../../../components/GenericMenu/GenericMenuItem';
 import { useRoomToolbox } from '../../contexts/RoomToolboxContext';
 import type { RoomToolboxActionConfig } from '../../contexts/RoomToolboxContext';
 
 type RoomToolboxProps = {
  className?: ComponentProps<typeof Box>['className'];
 };
 
+type MenuActionsProps = {
+ id: string;
+ items: GenericMenuItemProps[];
+}[];
+
 const RoomToolbox = ({ className }: RoomToolboxProps) => {
  const t = useTranslation();
  const { roomToolboxExpanded } = useLayout();
@@ -23,22 +29,33 @@ const RoomToolbox = ({ className }: RoomToolboxProps) => {
  const featuredActions = actions.filter((action) => action.featured);
  const normalActions = actions.filter((action) => !action.featured);
  const visibleActions = !roomToolboxExpanded ? [] : normalActions.slice(0, 6);
- const hiddenActions: Record<string, RoomToolboxActionConfig> = Object.fromEntries(
- (!roomToolboxExpanded ? actions : normalActions.slice(6))
- .filter((item) => !item.disabled)
- .map((item) => {
- return [
- item.id,
- {
- label: { title: t(item.title), icon: item.icon },
- action: (): void => {
- openTab(item.id);
- },
- ...item,
- },
- ];
- }),
- );
+
+ const hiddenActions = (!roomToolboxExpanded ? actions : normalActions.slice(6))
+ .filter((item) => !item.disabled && !item.featured)
+ .map((item) => ({
+ 'key': item.id,
+ 'content': t(item.title),
+ 'onClick':
+ item.action ??
+ ((): void => {
+ openTab(item.id);
+ }),
+ 'data-qa-id': `ToolBoxAction-${item.icon}`,
+ ...item,
+ }))
+ .reduce((acc, item) => {
+ const group = item.type ? item.type : '';
+ const section = acc.find((section: { id: string }) => section.id === group);
+ if (section) {
+ section.items.push(item);
+ return acc;
+ }
+
+ const newSection = { id: group, key: item.key, title: group === 'apps' ? t('Apps') : '', items: [item] };
+ acc.push(newSection);
+
+ return acc;
+ }, [] as MenuActionsProps);
 
  const renderDefaultToolboxItem: RoomToolboxActionConfig['renderToolboxItem'] = useMutableCallback(
  ({ id, className, index, icon, title, toolbox: { tab }, action, disabled, tooltip }) => {
@@ -74,20 +91,8 @@ const RoomToolbox = ({ className }: RoomToolboxProps) => {
  {featuredActions.map(mapToToolboxItem)}
  {featuredActions.length > 0 && <HeaderToolboxDivider />}
  {visibleActions.map(mapToToolboxItem)}
- {(normalActions.length > 6 || !roomToolboxExpanded) && (
- <Menu
- data-qa-id='ToolBox-Menu'
- tiny={roomToolboxExpanded}
- title={t('Options')}
- maxHeight='initial'
- className={className}
- aria-keyshortcuts='alt'
- tabIndex={-1}
- options={hiddenActions}
- renderItem={({ label: { title, icon }, ...props }) => (
- <Option label={title} icon={icon} data-qa-id={`ToolBoxAction-${icon}`} gap={!icon} {...props} />
- )}
- />
+ {(normalActions.length > 6 || roomToolboxExpanded) && (
+ <GenericMenu title={t('Options')} data-qa-id='ToolBox-Menu' sections={hiddenActions} placement='bottom-end' />
  )}
  </>
  );

apps/meteor/client/views/room/UserCard/UserCardWithData.tsx

@@ -1,17 +1,17 @@
 import type { IRoom } from '@rocket.chat/core-typings';
-import { PositionAnimated, AnimatedVisibility, Menu, Option } from '@rocket.chat/fuselage';
+import { PositionAnimated, AnimatedVisibility } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useSetting, useRolesDescription } from '@rocket.chat/ui-contexts';
+import { useSetting, useRolesDescription, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, UIEvent } from 'react';
 import React, { useMemo, useRef } from 'react';
 
 import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
 import { Backdrop } from '../../../components/Backdrop';
+import GenericMenu from '../../../components/GenericMenu/GenericMenu';
 import LocalTime from '../../../components/LocalTime';
 import UserCard from '../../../components/UserCard';
 import { ReactiveUserStatus } from '../../../components/UserStatus';
 import { useUserInfoQuery } from '../../../hooks/useUserInfoQuery';
-import { useActionSpread } from '../../hooks/useActionSpread';
 import { useUserInfoActions } from '../hooks/useUserInfoActions';
 
 type UserCardWithDataProps = {
@@ -23,6 +23,7 @@ type UserCardWithDataProps = {
 };
 
 const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWithDataProps): ReactElement => {
+ const t = useTranslation();
  const ref = useRef(target);
  const getRoles = useRolesDescription();
  const showRealNames = Boolean(useSetting('UI_Use_Real_Name'));
@@ -64,29 +65,22 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
  onClose?.();
  });
 
- const userActions = useUserInfoActions({ _id: user._id ?? '', username: user.username }, rid);
- const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(userActions);
+ const { actions: actionsDefinition, menuActions: menuOptions } = useUserInfoActions(
+ { _id: user._id ?? '', username: user.username },
+ rid,
+ );
 
  const menu = useMemo(() => {
  if (!menuOptions) {
  return null;
  }
 
- return (
- <Menu
- flexShrink={0}
- maxHeight='initial'
- mi={2}
- key='menu'
- renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
- options={menuOptions}
- />
- );
- }, [menuOptions]);
+ return <GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuOptions} placement='bottom-start' />;
+ }, [menuOptions, t]);
 
  const actions = useMemo(() => {
- const mapAction = ([key, { label, icon, action }]: any): ReactElement => (
- <UserCard.Action key={key} label={label} aria-label={label} onClick={action} icon={icon} />
+ const mapAction = ([key, { content, icon, onClick }]: any): ReactElement => (
+ <UserCard.Action key={key} label={content} aria-label={content} onClick={onClick} icon={icon} />
  );
 
  return [...actionsDefinition.map(mapAction), menu].filter(Boolean);

apps/meteor/client/views/room/contexts/RoomToolboxContext.ts

@@ -27,6 +27,7 @@ export type RoomToolboxActionConfig = {
  tabComponent?: ComponentType<{
  onClickBack?: () => void;
  }>;
+ type?: 'organization' | 'communication' | 'customization' | 'apps';
 };
 
 export type RoomToolboxContextValue = {

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx

@@ -1,9 +1,9 @@
 import type { IUser, IRoom } from '@rocket.chat/core-typings';
-import { Option, Menu } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import { useActionSpread } from '../../../hooks/useActionSpread';
+import GenericMenu from '../../../../components/GenericMenu/GenericMenu';
 import { useUserInfoActions } from '../../hooks/useUserInfoActions';
 
 type RoomMembersActionsProps = {
@@ -14,21 +14,12 @@ type RoomMembersActionsProps = {
 };
 
 const RoomMembersActions = ({ username, _id, rid, reload }: RoomMembersActionsProps): ReactElement | null => {
- const { menu: menuOptions } = useActionSpread(useUserInfoActions({ _id, username }, rid, reload), 0);
+ const t = useTranslation();
+ const { menuActions: menuOptions } = useUserInfoActions({ _id, username }, rid, reload, 0);
  if (!menuOptions) {
  return null;
  }
-
- return (
- <Menu
- flexShrink={0}
- maxHeight='initial'
- key='menu'
- tiny
- renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
- options={menuOptions}
- />
- );
+ return <GenericMenu title={t('More')} key='menu' data-qa-id='UserUserInfo-menu' sections={menuOptions} placement='bottom-end' />;
 };
 
 export default RoomMembersActions;

apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx

@@ -1,10 +1,12 @@
+/* eslint-disable react/display-name, react/no-multi-comp */
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
-import { ButtonGroup, Menu, Option } from '@rocket.chat/fuselage';
+import { ButtonGroup, IconButton } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
 
+import GenericMenu from '../../../../components/GenericMenu/GenericMenu';
 import UserInfo from '../../../../components/UserInfo';
-import { useActionSpread } from '../../../hooks/useActionSpread';
 import { useUserInfoActions } from '../../hooks/useUserInfoActions';
 
 type UserInfoActionsProps = {
@@ -14,8 +16,11 @@ type UserInfoActionsProps = {
 };
 
 const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): ReactElement => {
- const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(
- useUserInfoActions({ _id: user._id, username: user.username }, rid, backToList),
+ const t = useTranslation();
+ const { actions: actionsDefinition, menuActions: menuOptions } = useUserInfoActions(
+ { _id: user._id, username: user.username },
+ rid,
+ backToList,
  );
 
  const menu = useMemo(() => {
@@ -24,24 +29,23 @@ const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): React
  }
 
  return (
- <Menu
+ <GenericMenu
+ button={<IconButton icon='kebab' secondary />}
+ title={t('More')}
  key='menu'
- mi={4}
- secondary
+ data-qa-id='UserUserInfo-menu'
+ sections={menuOptions}
+ placement='bottom-end'
  small={false}
- maxHeight='initial'
- renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
- flexShrink={0}
- options={menuOptions}
  data-qa='UserUserInfo-menu'
  />
  );
- }, [menuOptions]);
+ }, [menuOptions, t]);
 
  // TODO: sanitize Action type to avoid any
  const actions = useMemo(() => {
- const mapAction = ([key, { label, icon, action }]: any): ReactElement => (
- <UserInfo.Action key={key} title={label} label={label} onClick={action} icon={icon} />
+ const mapAction = ([key, { content, icon, onClick }]: any): ReactElement => (
+ <UserInfo.Action key={key} title={content} label={content} onClick={onClick} icon={icon} />
  );
 
  return [...actionsDefinition.map(mapAction), menu].filter(Boolean);