fix: disable reply count button when missing send-reply permission (#2871)

Author: MartinCupela

package.json

@@ -181,7 +181,7 @@
     "@playwright/test": "^1.42.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@stream-io/stream-chat-css": "^5.15.0",
+    "@stream-io/stream-chat-css": "^5.16.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",

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,

yarn.lock

@@ -2601,10 +2601,10 @@
   resolved "https://registry.yarnpkg.com/@stream-io/escape-string-regexp/-/escape-string-regexp-5.0.1.tgz#362505c92799fea6afe4e369993fbbda8690cc37"
   integrity sha512-qIaSrzJXieZqo2fZSYTdzwSbZgHHsT3tkd646vvZhh4fr+9nO4NlvqGmPF43Y+OfZiWf+zYDFgNiPGG5+iZulQ==
 
-"@stream-io/stream-chat-css@^5.15.0":
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-5.15.0.tgz#3e9ef12eb3f6390c16dfeff3e5192691bc3cc7e6"
-  integrity sha512-FlbEfT4S+gV/k4kivVL/7hHw0O5buqlN7FREL/NCv9tyYfaULKh9dYlzuuNR40bcq3cZVqg7fogY2zOrYbirzg==
+"@stream-io/stream-chat-css@^5.16.0":
+  version "5.16.0"
+  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-5.16.0.tgz#e7e7af18ea072f686123880ed70b4497eb13f16c"
+  integrity sha512-Jpp94Nfxey9fcpFrhozGs09dAWMAUkZWdiORlByl76KDdgDZzZAyapdym9e7D/U3ZwQsR+/1P1W/P73UPrvkng==
 
 "@stream-io/transliterate@^1.5.5":
   version "1.5.5"