fix: disable reply count button when missing send-reply permission

Author: MartinCupela

src/components/Message/MessageRepliesCountButton.tsx

@@ -1,6 +1,7 @@
 import type { MouseEventHandler } from 'react';
 import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { useChannelStateContext } from '../../context';
 
 export type MessageRepliesCountButtonProps = {
   /* If supplied, adds custom text to the end of a multiple replies message */
@@ -15,6 +16,7 @@ export type MessageRepliesCountButtonProps = {
 
 const UnMemoizedMessageRepliesCountButton = (props: MessageRepliesCountButtonProps) => {
   const { labelPlural, labelSingle, onClick, reply_count = 0 } = props;
+  const { channelCapabilities } = useChannelStateContext();
 
   const { t } = useTranslationContext('MessageRepliesCountButton');
 
@@ -33,6 +35,7 @@ const UnMemoizedMessageRepliesCountButton = (props: MessageRepliesCountButtonPro
       <button
         className='str-chat__message-replies-count-button'
         data-testid='replies-count-button'
+        disabled={!channelCapabilities['send-reply']}
         onClick={onClick}
       >
         {replyCountText}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { MessageRepliesCountButton } from '../MessageRepliesCountButton';
-import { TranslationProvider } from '../../../context';
+import { ChannelStateProvider, TranslationProvider } from '../../../context';
 
 const onClickMock = jest.fn();
 const defaultSingularText = '1 reply';
@@ -11,10 +11,14 @@ const defaultPluralText = '2 replies';
 const i18nMock = (key, { count }) =>
   count > 1 ? defaultPluralText : defaultSingularText;
 
-const renderComponent = (props) =>
+const renderComponent = (props, channelStateCtx) =>
   render(
     <TranslationProvider value={{ t: i18nMock }}>
-      <MessageRepliesCountButton {...props} onClick={onClickMock} />
+      <ChannelStateProvider
+        value={{ channelCapabilities: { 'send-reply': true }, ...channelStateCtx }}
+      >
+        <MessageRepliesCountButton {...props} onClick={onClickMock} />
+      </ChannelStateProvider>
     </TranslationProvider>,
   );
 
@@ -26,8 +30,8 @@ describe('MessageRepliesCountButton', () => {
 
   it('should render the right text when there is one reply, and labelSingle is not defined', () => {
     const { getByText } = renderComponent({ reply_count: 1 });
-
-    expect(getByText(defaultSingularText)).toBeInTheDocument();
+    const button = getByText(defaultSingularText);
+    expect(button).not.toBeDisabled();
   });
 
   it('should render the right text when there is one reply, and labelSingle is defined', () => {
@@ -79,4 +83,13 @@ describe('MessageRepliesCountButton', () => {
     });
     expect(queryByTestId('reply-icon')).not.toBeInTheDocument();
   });
+
+  it('should be disabled on missing "send-reply" permission', () => {
+    const { getByText } = renderComponent(
+      { reply_count: 1 },
+      { channelCapabilities: { 'send-reply': false } },
+    );
+
+    expect(getByText(defaultSingularText)).toBeDisabled();
+  });
 });

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

@@ -81,7 +81,7 @@ describe('<MessageSimple />', () => {
   let client;
 
   async function renderMessageSimple({
-    channelCapabilities = { 'send-reaction': true },
+    channelCapabilities = { 'send-reaction': true, 'send-reply': true },
     channelConfigOverrides = { replies: true },
     components = {},
     message,