fix: enable sending reactions to frozen channel with UseFrozenChannel permission (#2097)

* fix: enable sending reactions to frozen channel with UseFrozenChannel permission

The prop isReactionEnabled should be used to determine permission to send not view reactions only.

* fix: do not use channelConfig.reactions to infer on permission to send reactions

Author: MartinCupela

docusaurus/docs/React/components/contexts/message-context.mdx

@@ -231,9 +231,9 @@ Function that returns whether or not a message belongs to the current user.
 | ------------- |
 | () => boolean |
 
-### isReactionEnabled
+### isReactionEnabled (deprecated)
 
-If true, reactions are enabled in the currently active channel.
+If true, sending reactions is enabled in the currently active channel.
 
 | Type    | Default |
 | ------- | ------- |

docusaurus/docs/React/components/message-components/message-ui.mdx

@@ -351,9 +351,8 @@ Function that returns whether a message belongs to the current user (overrides t
 | ------------- |
 | () => boolean |
 
-### isReactionEnabled
-
-If true, reactions are enabled in the currently active channel (overrides the value stored in `MessageContext`).
+### isReactionEnabled (deprecated)
+If true, sending reactions is enabled in the currently active channel (overrides the value stored in `MessageContext`).
 
 | Type    | Default |
 | ------- | ------- |

docusaurus/docs/React/guides/theming/message-ui.mdx

@@ -91,6 +91,7 @@ export const CustomMessage = () => {
 
   const messageWrapperRef = useRef(null);
 
+  const canReact = isReactionEnabled;
   const hasReactions = messageHasReactions(message);
   const hasAttachments = message.attachments && message.attachments.length > 0;
 
@@ -105,13 +106,13 @@ export const CustomMessage = () => {
             <MessageTimestamp />
           </div>
         </div>
-        {showDetailedReactions && isReactionEnabled && (
+        {showDetailedReactions && canReact && (
           <ReactionSelector ref={reactionSelectorRef} />
         )}
         <MessageText />
         <MessageStatus />
         {hasAttachments && <Attachment attachments={message.attachments} />}
-        {hasReactions && !showDetailedReactions && isReactionEnabled && <SimpleReactionsList />}
+        {hasReactions && <SimpleReactionsList />}
         <MessageRepliesCountButton reply_count={message.reply_count} />
       </div>
     </div>

docusaurus/docs/React/guides/theming/reactions.mdx

@@ -166,6 +166,7 @@ export const CustomMessage = () => {
 
   const messageWrapperRef = useRef(null);
 
+  const canReact = isReactionEnabled;
   const hasReactions = messageHasReactions(message);
 
   return (
@@ -179,13 +180,13 @@ export const CustomMessage = () => {
             <MessageTimestamp />
           </div>
         </div>
-        {showDetailedReactions && isReactionEnabled && (
+        {showDetailedReactions && canReact && (
           <ReactionSelector reactionOptions={customReactions} ref={reactionSelectorRef} />
         )}
         <MessageText />
         <MessageStatus />
         {message.attachments && <Attachment attachments={message.attachments} />}
-        {hasReactions && !showDetailedReactions && isReactionEnabled && (
+        {hasReactions && (
           <SimpleReactionsList reactionOptions={customReactions} />
         )}
         <MessageRepliesCountButton reply_count={message.reply_count} />

src/components/Message/MessageSimple.tsx

@@ -84,6 +84,14 @@ const MessageSimpleWithContext = <
     return <MessageDeleted message={message} />;
   }
 
+  /** FIXME: isReactionEnabled should be removed with next major version and a proper centralized permissions logic should be put in place
+   * With the current permissions implementation it would be sth like:
+   * const messageActions = getMessageActions();
+   * const canReact = messageActions.includes(MESSAGE_ACTIONS.react);
+   */
+  const canReact = isReactionEnabled;
+  const canShowReactions = hasReactions;
+
   const showMetadata = !groupedByUser || endOfGroup;
   const showReplyCountButton = !threadList && !!message.reply_count;
   const allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
@@ -100,8 +108,7 @@ const MessageSimpleWithContext = <
       'pinned-message': message.pinned,
       'str-chat__message--has-attachment': hasAttachment,
       'str-chat__message--highlighted': highlighted,
-      'str-chat__message--with-reactions str-chat__message-with-thread-link':
-        hasReactions && isReactionEnabled,
+      'str-chat__message--with-reactions str-chat__message-with-thread-link': canShowReactions,
       'str-chat__message-send-can-be-retried':
         message?.status === 'failed' && message?.errorStatusCode !== 403,
       'str-chat__virtual-message__wrapper--end': endOfGroup,
@@ -145,10 +152,8 @@ const MessageSimpleWithContext = <
           >
             <MessageOptions />
             <div className='str-chat__message-reactions-host'>
-              {hasReactions && isReactionEnabled && <ReactionsList reverse />}
-              {showDetailedReactions && isReactionEnabled && (
-                <ReactionSelector ref={reactionSelectorRef} />
-              )}
+              {canShowReactions && <ReactionsList reverse />}
+              {showDetailedReactions && canReact && <ReactionSelector ref={reactionSelectorRef} />}
             </div>
             <div className='str-chat__message-bubble'>
               {message.attachments?.length && !message.quoted_message ? (

src/components/Message/__tests__/Message.test.js

@@ -58,7 +58,9 @@ async function renderComponent({
 
   return renderer(
     <ChatProvider value={{ client, ...clientOpts }}>
-      <ChannelStateProvider value={{ channel, ...channelStateOpts }}>
+      <ChannelStateProvider
+        value={{ channel, channelCapabilities: { 'send-reaction': true }, ...channelStateOpts }}
+      >
         <ChannelActionProvider
           value={{
             openThread: jest.fn(),
@@ -174,6 +176,23 @@ describe('<Message /> component', () => {
     expect(sendReaction).toHaveBeenCalledWith(message.id, { type: reaction.type });
   });
 
+  it('should not send reaction without permission', async () => {
+    const reaction = generateReaction({ user: bob });
+    const message = generateMessage({ own_reactions: [] });
+    let context;
+
+    await renderComponent({
+      channelStateOpts: { channelCapabilities: { 'send-reaction': false } },
+      contextCallback: (ctx) => {
+        context = ctx;
+      },
+      message,
+    });
+
+    await context.handleReaction(reaction.type);
+    expect(sendReaction).not.toHaveBeenCalled();
+  });
+
   it('should rollback reaction if channel update fails', async () => {
     const reaction = generateReaction({ user: bob });
     const message = generateMessage({ own_reactions: [] });

src/components/Message/__tests__/MessageOptions.test.js

@@ -169,14 +169,17 @@ describe('<MessageOptions />', () => {
     const { getByTestId } = await renderMessageOptions({
       channelStateOpts: {
         channelCapabilities: { 'send-reaction': true },
-        channelConfig: { reactions: true },
       },
     });
     expect(getByTestId(reactionActionTestId)).toBeInTheDocument();
   });
 
   it('should not display reactions action when channel has reactions disabled', async () => {
-    const { queryByTestId } = await renderMessageOptions({ channelConfig: { reactions: false } });
+    const { queryByTestId } = await renderMessageOptions({
+      channelStateOpts: {
+        channelCapabilities: { 'send-reaction': false },
+      },
+    });
     expect(queryByTestId(reactionActionTestId)).not.toBeInTheDocument();
   });
 

src/components/Message/__tests__/MessageSimple.test.js

@@ -25,9 +25,11 @@ import {
   ChannelStateProvider,
   ChatProvider,
   ComponentProvider,
+  EmojiProvider,
   TranslationProvider,
 } from '../../../context';
 import {
+  emojiComponentMock,
   emojiDataMock,
   generateChannel,
   generateMessage,
@@ -58,15 +60,16 @@ const retrySendMessageMock = jest.fn();
 async function renderMessageSimple({
   message,
   props = {},
-  channelConfigOverrides = { reactions: true, replies: true },
+  channelConfigOverrides = { replies: true },
+  channelCapabilities = { 'send-reaction': true },
   components = {},
   renderer = render,
 }) {
   const channel = generateChannel({
     getConfig: () => channelConfigOverrides,
     state: { membership: {} },
   });
-  const channelCapabilities = { 'send-reaction': true };
+
   const channelConfig = channel.getConfig();
   const client = await getTestClientWithUser(alice);
 
@@ -87,13 +90,22 @@ async function renderMessageSimple({
                 ...components,
               }}
             >
-              <Message
-                getMessageActions={() => Object.keys(MESSAGE_ACTIONS)}
-                isMyMessage={() => true}
-                message={message}
-                threadList={false}
-                {...props}
-              />
+              <EmojiProvider
+                value={{
+                  Emoji: emojiComponentMock.Emoji,
+                  emojiConfig: emojiDataMock,
+                  EmojiIndex: emojiComponentMock.EmojiIndex,
+                  EmojiPicker: emojiComponentMock.EmojiPicker,
+                }}
+              >
+                <Message
+                  getMessageActions={() => Object.keys(MESSAGE_ACTIONS)}
+                  isMyMessage={() => true}
+                  message={message}
+                  threadList={false}
+                  {...props}
+                />
+              </EmojiProvider>
             </ComponentProvider>
           </TranslationProvider>
         </ChannelActionProvider>
@@ -222,18 +234,19 @@ describe('<MessageSimple />', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('should not render reaction list if reaction is disabled in channel config', async () => {
+  // FIXME: test relying on deprecated channel config parameter
+  it('should render reaction list even though sending reactions is disabled in channel config', async () => {
     const bobReaction = generateReaction({ user: bob });
     const message = generateAliceMessage({
       latest_reactions: [bobReaction],
       text: undefined,
     });
 
     const { container, queryByTestId } = await renderMessageSimple({
-      channelConfigOverrides: { reactions: false },
+      channelCapabilities: { 'send-reaction': false },
       message,
     });
-    expect(queryByTestId('reaction-list')).not.toBeInTheDocument();
+    expect(queryByTestId('reaction-list')).toBeInTheDocument();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });