Skip to content

Commit

Permalink
feat: message menu sections with dividers (#30116)
Browse files Browse the repository at this point in the history
Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
  • Loading branch information
guijun13 and gabriellsh authored Aug 28, 2023
1 parent fde7229 commit 5832be2
Show file tree
Hide file tree
Showing 29 changed files with 126 additions and 108 deletions.
5 changes: 5 additions & 0 deletions .changeset/short-cobras-tell.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/meteor": minor
---

Reorganized the message menu
2 changes: 2 additions & 0 deletions apps/meteor/app/autotranslate/client/lib/actionButton.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ Meteor.startup(() => {
icon: 'language',
label: 'Translate',
context: ['message', 'message-mobile', 'threads'],
type: 'interaction',
action(_, props) {
const { message = messageArgs(this).msg } = props;
const language = AutoTranslate.getLanguage(message.rid);
Expand Down Expand Up @@ -58,6 +59,7 @@ Meteor.startup(() => {
icon: 'language',
label: 'View_original',
context: ['message', 'message-mobile', 'threads'],
type: 'interaction',
action(_, props) {
const { message = messageArgs(this).msg } = props;
const language = AutoTranslate.getLanguage(message.rid);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ Meteor.startup(() => {
id: 'start-discussion',
icon: 'discussion',
label: 'Discussion_start',
type: 'communication',
context: ['message', 'message-mobile', 'videoconf'],
async action(_, props) {
const { message = messageArgs(this).msg, room } = props;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ Meteor.startup(() => {
icon: 'flag',
label: 'Mark_unread',
context: ['message', 'message-mobile', 'threads'],
type: 'interaction',
async action(_, props) {
const { message = messageArgs(this).msg } = props;

Expand Down Expand Up @@ -44,7 +45,7 @@ Meteor.startup(() => {

return message.u._id !== user._id;
},
order: 10,
order: 4,
group: 'menu',
});
});
2 changes: 1 addition & 1 deletion apps/meteor/app/reactions/client/init.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,6 @@ Meteor.startup(() => {
return true;
},
order: -3,
group: ['message', 'menu'],
group: 'message',
});
});
3 changes: 2 additions & 1 deletion apps/meteor/app/threads/client/messageAction/follow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ Meteor.startup(() => {
id: 'follow-message',
icon: 'bell',
label: 'Follow_message',
type: 'interaction',
context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
async action(_, { message }) {
if (!message) {
Expand All @@ -44,7 +45,7 @@ Meteor.startup(() => {
}
return user?._id ? !replies.includes(user._id) : false;
},
order: 2,
order: 1,
group: 'menu',
});
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Meteor.startup(() => {
return Boolean(subscription);
},
order: -1,
group: ['message', 'menu'],
group: 'message',
});
});
});
1 change: 1 addition & 0 deletions apps/meteor/app/threads/client/messageAction/unfollow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ Meteor.startup(() => {
id: 'unfollow-message',
icon: 'bell-off',
label: 'Unfollow_message',
type: 'interaction',
context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
async action(_, { message }) {
if (!message) {
Expand Down
3 changes: 3 additions & 0 deletions apps/meteor/app/ui-utils/client/lib/MessageAction.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ export type MessageActionContext =
| 'search'
| 'videoconf-threads';

type MessageActionType = 'communication' | 'interaction' | 'duplication' | 'apps' | 'management';

type MessageActionConditionProps = {
message: IMessage;
user: IUser | undefined;
Expand Down Expand Up @@ -62,6 +64,7 @@ export type MessageActionConfig = {
},
) => any;
condition?: (props: MessageActionConditionProps) => Promise<boolean> | boolean;
type?: MessageActionType;
};

class MessageAction {
Expand Down
28 changes: 18 additions & 10 deletions apps/meteor/app/ui-utils/client/lib/messageActionDefault.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ Meteor.startup(async () => {
label: 'Reply_in_direct_message',
context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
role: 'link',
type: 'communication',
action(_, props) {
const { message = messageArgs(this).msg } = props;
roomCoordinator.openRouteLink(
Expand Down Expand Up @@ -69,6 +70,7 @@ Meteor.startup(async () => {
icon: 'arrow-forward',
label: 'Share_Message',
context: ['message', 'message-mobile', 'threads'],
type: 'communication',
async action(_, props) {
const { message = messageArgs(this).msg } = props;
const permalink = await getPermaLink(message._id);
Expand All @@ -84,7 +86,7 @@ Meteor.startup(async () => {
});
},
order: 0,
group: ['message', 'menu'],
group: 'message',
});

MessageAction.addButton({
Expand Down Expand Up @@ -112,15 +114,16 @@ Meteor.startup(async () => {
return true;
},
order: -2,
group: ['message', 'menu'],
group: 'message',
});

MessageAction.addButton({
id: 'permalink',
icon: 'permalink',
label: 'Get_link',
label: 'Copy_link',
// classes: 'clipboard',
context: ['message', 'message-mobile', 'threads', 'federated'],
type: 'duplication',
async action(_, props) {
try {
const { message = messageArgs(this).msg } = props;
Expand All @@ -134,16 +137,17 @@ Meteor.startup(async () => {
condition({ subscription }) {
return !!subscription;
},
order: 4,
order: 5,
group: 'menu',
});

MessageAction.addButton({
id: 'copy',
icon: 'copy',
label: 'Copy',
label: 'Copy_text',
// classes: 'clipboard',
context: ['message', 'message-mobile', 'threads', 'federated'],
type: 'duplication',
async action(_, props) {
const { message = messageArgs(this).msg } = props;
const msgText = getMainMessageText(message).msg;
Expand All @@ -153,7 +157,7 @@ Meteor.startup(async () => {
condition({ subscription }) {
return !!subscription;
},
order: 5,
order: 6,
group: 'menu',
});

Expand All @@ -162,6 +166,7 @@ Meteor.startup(async () => {
icon: 'edit',
label: 'Edit',
context: ['message', 'message-mobile', 'threads', 'federated'],
type: 'management',
async action(_, props) {
const { message = messageArgs(this).msg, chat } = props;
await chat?.messageEditing.editMessage(message);
Expand Down Expand Up @@ -195,7 +200,7 @@ Meteor.startup(async () => {
}
return true;
},
order: 6,
order: 8,
group: 'menu',
});

Expand All @@ -205,6 +210,7 @@ Meteor.startup(async () => {
label: 'Delete',
context: ['message', 'message-mobile', 'threads', 'federated'],
color: 'alert',
type: 'management',
async action(this: unknown, _, { message = messageArgs(this).msg, chat }) {
await chat?.flows.requestMessageDeletion(message);
},
Expand All @@ -222,7 +228,7 @@ Meteor.startup(async () => {

return chat?.data.canDeleteMessage(message) ?? false;
},
order: 18,
order: 10,
group: 'menu',
});

Expand All @@ -232,6 +238,7 @@ Meteor.startup(async () => {
label: 'Report',
context: ['message', 'message-mobile', 'threads', 'federated'],
color: 'alert',
type: 'management',
action(this: unknown, _, { message = messageArgs(this).msg }) {
imperativeModal.open({
component: ReportMessageModal,
Expand All @@ -248,7 +255,7 @@ Meteor.startup(async () => {
}
return Boolean(subscription);
},
order: 17,
order: 9,
group: 'menu',
});

Expand All @@ -257,6 +264,7 @@ Meteor.startup(async () => {
icon: 'emoji',
label: 'Reactions',
context: ['message', 'message-mobile', 'threads'],
type: 'interaction',
action(this: unknown, _, { message: { reactions = {} } = messageArgs(this).msg }) {
imperativeModal.open({
component: ReactionList,
Expand All @@ -266,7 +274,7 @@ Meteor.startup(async () => {
condition({ message: { reactions } }) {
return !!reactions;
},
order: 18,
order: 9,
group: 'menu',
});
});
62 changes: 44 additions & 18 deletions apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,66 @@
import { MessageToolboxItem, Option, OptionDivider, Box } from '@rocket.chat/fuselage';
import { Box, MessageToolboxItem, Option, OptionDivider, OptionTitle } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import type { ComponentProps, UIEvent, ReactElement } from 'react';
import React, { useState, Fragment, useRef } from 'react';
import type { ComponentProps, MouseEvent, MouseEventHandler, ReactElement } from 'react';
import React, { Fragment, useRef, useState } from 'react';

import type { MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction';
import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
import ToolboxDropdown from './ToolboxDropdown';

type MessageActionConfigOption = Omit<MessageActionConfig, 'condition' | 'context' | 'order' | 'action'> & {
action: (event: UIEvent) => void;
action: ((event: MouseEvent<HTMLElement, MouseEvent>) => void) & MouseEventHandler<HTMLElement>;
};

type MessageActionMenuProps = {
options: MessageActionConfigOption[];
};

const getSectionOrder = (section: string): number => {
switch (section) {
case 'communication':
return 0;
case 'interaction':
return 1;
case 'duplication':
return 2;
case 'apps':
return 3;
case 'management':
return 4;
default:
return 5;
}
};

const MessageActionMenu = ({ options, ...props }: MessageActionMenuProps): ReactElement => {
const ref = useRef(null);

const t = useTranslation();
const [visible, setVisible] = useState(false);
const isLayoutEmbedded = useEmbeddedLayout();

const groupOptions = options
.map(({ color, ...option }) => ({
...option,
...(color === 'alert' && { variant: 'danger' as const }),
}))
.reduce((acc, option) => {
const group = option.variant ? option.variant : '';
acc[group] = acc[group] || [];
if (!(isLayoutEmbedded && option.id === 'reply-directly')) acc[group].push(option);
const groupOptions = options.reduce((acc, option) => {
const { type = '' } = option;

if (option.color === 'alert') {
option.variant = 'danger' as const;
}

const order = getSectionOrder(type);

const [sectionType, options] = acc[getSectionOrder(type)] ?? [type, []];

if (!(isLayoutEmbedded && option.id === 'reply-directly')) {
options.push(option);
}

if (options.length === 0) {
return acc;
}, {} as { [key: string]: MessageActionConfigOption[] }) as {
[key: string]: MessageActionConfigOption[];
};
}

acc[order] = [sectionType, options];

return acc;
}, [] as unknown as [section: string, options: Array<MessageActionConfigOption>][]);

return (
<>
Expand All @@ -51,8 +76,9 @@ const MessageActionMenu = ({ options, ...props }: MessageActionMenuProps): React
<>
<Box position='fixed' inset={0} onClick={(): void => setVisible(!visible)} />
<ToolboxDropdown reference={ref} {...props}>
{Object.entries(groupOptions).map(([, options], index, arr) => (
{groupOptions.map(([section, options], index, arr) => (
<Fragment key={index}>
{section === 'apps' && <OptionTitle>Apps</OptionTitle>}
{options.map((option) => (
<Option
variant={option.variant}
Expand Down
2 changes: 2 additions & 0 deletions apps/meteor/client/hooks/useAppActionButtons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,8 @@ export const useMessageActionAppsActionButtons = (context?: MessageActionContext
icon: undefined as any,
id: getIdForActionButton(action),
label: Utilities.getI18nKeyForApp(action.labelI18n, action.appId),
order: 7,
type: 'apps',
action: (_, params) => {
void actionManager.triggerActionButtonAction({
rid: params.message.rid,
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/startup/actionButtons/jumpToMessage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ Meteor.startup(() => {
setMessageJumpQueryStringParameter(message._id);
},
order: 100,
group: ['message', 'menu'],
group: 'message',
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@ Meteor.startup(() => {
return !!subscription;
},
order: 100,
group: ['message', 'menu'],
group: 'message',
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ Meteor.startup(() => {
setMessageJumpQueryStringParameter(message._id);
},
order: 100,
group: 'menu',
group: 'message',
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@ Meteor.startup(() => {
return Boolean(message.starred?.find((star) => star._id === user?._id));
},
order: 100,
group: ['message', 'menu'],
group: 'message',
});
});
Loading

0 comments on commit 5832be2

Please sign in to comment.