Merge pull request #816 from GetStream/actions-box-functionality

updates actions box to not show up if user has no available actions

Author: DanC5

src/components/Message/MessageLivestream.tsx

@@ -20,7 +20,7 @@ import {
   ReactionIcon,
   ThreadIcon,
 } from './icons';
-import { areMessageUIPropsEqual } from './utils';
+import { areMessageUIPropsEqual, showMessageActionsBox } from './utils';
 
 import { Attachment as DefaultAttachment } from '../Attachment';
 import { Avatar as DefaultAvatar } from '../Avatar';
@@ -356,6 +356,8 @@ const MessageLivestreamActions = <
   const messageDeletedAt = !!message.deleted_at;
   const messageWrapper = messageWrapperRef?.current;
 
+  const showActionsBox = showMessageActionsBox(getMessageActions());
+
   useEffect(() => {
     if (messageWrapper) {
       messageWrapper.addEventListener('mouseleave', hideOptions);
@@ -425,12 +427,14 @@ const MessageLivestreamActions = <
           <ThreadIcon />
         </span>
       )}
-      <MessageActions
-        {...props}
-        customWrapperClass={''}
-        getMessageActions={getMessageActions}
-        inline
-      />
+      {showActionsBox && (
+        <MessageActions
+          {...props}
+          customWrapperClass={''}
+          getMessageActions={getMessageActions}
+          inline
+        />
+      )}
     </div>
   );
 };

src/components/Message/MessageSimple.tsx

@@ -12,6 +12,7 @@ import {
   getReadByTooltipText,
   messageHasAttachments,
   messageHasReactions,
+  showMessageActionsBox,
 } from './utils';
 
 import { Attachment as DefaultAttachment } from '../Attachment';
@@ -82,6 +83,7 @@ const MessageSimpleWithContext = <
     editing,
     EditMessageInput = DefaultEditMessageForm,
     formatDate,
+    getMessageActions,
     handleAction,
     handleOpenThread,
     handleReaction,
@@ -109,6 +111,8 @@ const MessageSimpleWithContext = <
     ? 'str-chat__message str-chat__message--me str-chat__message-simple str-chat__message-simple--me'
     : 'str-chat__message str-chat__message-simple';
 
+  const showActionsBox = showMessageActionsBox(getMessageActions());
+
   if (message.type === 'message.read' || message.type === 'message.date') {
     return null;
   }
@@ -208,6 +212,7 @@ const MessageSimpleWithContext = <
               <MessageText
                 {...props}
                 customOptionProps={{
+                  displayActions: showActionsBox,
                   handleOpenThread,
                   messageWrapperRef,
                 }}

src/components/Message/MessageTeam.tsx

@@ -11,7 +11,11 @@ import {
   ReactionIcon,
   ThreadIcon,
 } from './icons';
-import { areMessageUIPropsEqual, getReadByTooltipText } from './utils';
+import {
+  areMessageUIPropsEqual,
+  getReadByTooltipText,
+  showMessageActionsBox,
+} from './utils';
 
 import { Attachment as DefaultAttachment } from '../Attachment';
 import { Avatar as DefaultAvatar } from '../Avatar';
@@ -128,6 +132,8 @@ const MessageTeamWithContext = <
 
   const channelConfig = propChannelConfig || channel?.getConfig();
 
+  const showActionsBox = showMessageActionsBox(getMessageActions());
+
   const messageTextToRender =
     message.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] ||
     message.text;
@@ -278,7 +284,7 @@ const MessageTeamWithContext = <
                       <ThreadIcon />
                     </span>
                   )}
-                  {getMessageActions().length > 0 && (
+                  {showActionsBox && (
                     <MessageActions
                       addNotification={addNotification}
                       customWrapperClass={''}

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

@@ -53,7 +53,12 @@ async function renderMessageLivestream(
           userLanguage: 'en',
         }}
       >
-        <MessageLivestream message={message} typing={false} {...props} />
+        <MessageLivestream
+          getMessageActions={() => []}
+          message={message}
+          typing={false}
+          {...props}
+        />
       </TranslationContext.Provider>
     </ChannelContext.Provider>,
   );

src/components/Message/utils.tsx

@@ -205,6 +205,29 @@ export const getMessageActions = (
   return messageActionsAfterPermission;
 };
 
+export const showMessageActionsBox = (actions: MessageActionsArray) => {
+  if (actions.length === 0) {
+    return false;
+  }
+
+  if (
+    actions.length === 1 &&
+    (actions.includes('react') || actions.includes('reply'))
+  ) {
+    return false;
+  }
+
+  if (
+    actions.length === 2 &&
+    actions.includes('react') &&
+    actions.includes('reply')
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
 export const areMessagePropsEqual = <
   At extends DefaultAttachmentType = DefaultAttachmentType,
   Ch extends DefaultChannelType = DefaultChannelType,