fix: extended reactions button visibility adjustments in MessageReactionsDetail (#3186)

### 🎯 Goal

Ref: #3172
Ref:
https://getstream.slack.com/archives/C0A4UPTFNJU/p1778568564498769?thread_ts=1778176423.200169&cid=C0A4UPTFNJU

Author: arnautov-anton

src/components/Reactions/MessageReactionsDetail.tsx

@@ -12,7 +12,7 @@ import {
   useTranslationContext,
 } from '../../context';
 import type { ReactionSort } from 'stream-chat';
-import { defaultReactionOptions } from './reactionOptions';
+import { defaultReactionOptions, getHasExtendedReactions } from './reactionOptions';
 import type { useProcessReactions } from './hooks/useProcessReactions';
 import { IconEmojiAdd } from '../Icons';
 import { ReactionSelector, type ReactionSelectorProps } from './ReactionSelector';
@@ -81,6 +81,8 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
   const reactionDetailsSort =
     propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
 
+  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
+
   const {
     isLoading: areReactionsLoading,
     reactions: reactionDetails,
@@ -137,19 +139,21 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
           className='str-chat__message-reactions-detail__reaction-type-list'
           data-testid='reaction-type-list'
         >
-          <li className='str-chat__message-reactions-detail__reaction-type-list-item'>
-            <button
-              aria-label={t('Add reaction')}
-              className='str-chat__message-reactions-detail__reaction-type-list-item-button'
-              data-testid='add-reaction-button'
-              onClick={() => setExtendedReactionListOpen(true)}
-              type='button'
-            >
-              <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>
-                <IconEmojiAdd />
-              </span>
-            </button>
-          </li>
+          {hasExtendedReactions && (
+            <li className='str-chat__message-reactions-detail__reaction-type-list-item'>
+              <button
+                aria-label={t('Add reaction')}
+                className='str-chat__message-reactions-detail__reaction-type-list-item-button'
+                data-testid='add-reaction-button'
+                onClick={() => setExtendedReactionListOpen(true)}
+                type='button'
+              >
+                <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>
+                  <IconEmojiAdd />
+                </span>
+              </button>
+            </li>
+          )}
 
           {reactions.map(
             ({ EmojiComponent, reactionCount, reactionType }) =>

src/components/Reactions/ReactionSelector.tsx

@@ -2,7 +2,7 @@ import React, { type ReactNode, useMemo, useState } from 'react';
 import clsx from 'clsx';
 
 import { useDialogOnNearestManager } from '../Dialog';
-import { defaultReactionOptions } from './reactionOptions';
+import { defaultReactionOptions, getHasExtendedReactions } from './reactionOptions';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
@@ -86,10 +86,7 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => {
     );
   }, [reactionOptions]);
 
-  const hasExtendedReactions =
-    !Array.isArray(reactionOptions) &&
-    reactionOptions.extended &&
-    Object.keys(reactionOptions.extended).length > 0;
+  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
 
   return (
     <div

src/components/Reactions/__tests__/MessageReactionsDetail.test.tsx

@@ -315,20 +315,55 @@ describe('MessageReactionsDetail', () => {
     expect(counts[1]).toHaveTextContent('3');
   });
 
-  it('should render add emoji button in the reaction type list', () => {
+  it('should render add emoji button when extended reactions are available', () => {
     const reactionGroups = {
       love: { count: 2 },
     };
     const reactions = generateReactionsFromReactionGroups(reactionGroups);
     const fetchReactions = vi.fn(() => Promise.resolve([]));
 
-    const { getByTestId } = renderComponent({
+    const extendedReactionOptions: ReactionOptions = {
+      extended: {
+        rocket: { Component: () => <>🚀</>, name: 'Rocket' },
+      },
+      quick: {
+        love: { Component: () => <>❤️</>, name: 'Heart' },
+      },
+    };
+
+    const { getByTestId } = render(
+      <ChatProvider value={mockChatContext({ client: chatClient })}>
+        <DialogManagerProvider>
+          <WithComponents overrides={{ reactionOptions: extendedReactionOptions }}>
+            <MessageProvider value={mockMessageContext()}>
+              <MessageReactionsDetailWrapper
+                handleFetchReactions={fetchReactions}
+                reaction_groups={reactionGroups}
+                reactions={reactions}
+              />
+            </MessageProvider>
+          </WithComponents>
+        </DialogManagerProvider>
+      </ChatProvider>,
+    );
+
+    expect(getByTestId('add-reaction-button')).toBeInTheDocument();
+  });
+
+  it('should not render add emoji button when no extended reactions are available', () => {
+    const reactionGroups = {
+      love: { count: 2 },
+    };
+    const reactions = generateReactionsFromReactionGroups(reactionGroups);
+    const fetchReactions = vi.fn(() => Promise.resolve([]));
+
+    const { queryByTestId } = renderComponent({
       handleFetchReactions: fetchReactions,
       reaction_groups: reactionGroups,
       reactions,
     });
 
-    expect(getByTestId('add-reaction-button')).toBeInTheDocument();
+    expect(queryByTestId('add-reaction-button')).not.toBeInTheDocument();
   });
 
   it('should show extended reaction list when add emoji button is clicked', () => {

src/components/Reactions/reactionOptions.tsx

@@ -106,3 +106,8 @@ export const defaultReactionOptions: ReactionOptions = {
     },
   },
 };
+
+export const getHasExtendedReactions = (reactionOptions: ReactionOptions) =>
+  !Array.isArray(reactionOptions) &&
+  typeof reactionOptions.extended !== 'undefined' &&
+  Object.keys(reactionOptions.extended).length > 0;