Allow reactions in announcement only groups

Author: josh-signal

ts/components/conversation/Message.stories.tsx

@@ -99,6 +99,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   author: overrideProps.author || getDefaultConversation(),
   reducedMotion: boolean('reducedMotion', false),
   bodyRanges: overrideProps.bodyRanges,
+  canReact: true,
   canReply: true,
   canDownload: true,
   canDeleteForEveryone: overrideProps.canDeleteForEveryone || false,

ts/components/conversation/Message.tsx

@@ -195,6 +195,7 @@ export type PropsData = {
 
   deletedForEveryone?: boolean;
 
+  canReact: boolean;
   canReply: boolean;
   canDownload: boolean;
   canDeleteForEveryone: boolean;
@@ -1325,6 +1326,7 @@ export class Message extends React.PureComponent<Props, State> {
     const {
       attachments,
       canDownload,
+      canReact,
       canReply,
       direction,
       disableMenu,
@@ -1467,7 +1469,7 @@ export class Message extends React.PureComponent<Props, State> {
         >
           {this.isWindowWidthNotNarrow() && (
             <>
-              {canReply ? reactButton : null}
+              {canReact ? reactButton : null}
               {canDownload ? downloadButton : null}
               {canReply ? replyButton : null}
             </>
@@ -1512,6 +1514,7 @@ export class Message extends React.PureComponent<Props, State> {
     const {
       attachments,
       canDownload,
+      canReact,
       canReply,
       deleteMessage,
       deleteMessageForEveryone,
@@ -1560,36 +1563,40 @@ export class Message extends React.PureComponent<Props, State> {
             {i18n('downloadAttachment')}
           </MenuItem>
         ) : null}
-        {canReply && shouldShowAdditional ? (
+        {shouldShowAdditional ? (
           <>
-            <MenuItem
-              attributes={{
-                className:
-                  'module-message__context--icon module-message__context__reply',
-              }}
-              onClick={(event: React.MouseEvent) => {
-                event.stopPropagation();
-                event.preventDefault();
-
-                replyToMessage(id);
-              }}
-            >
-              {i18n('replyToMessage')}
-            </MenuItem>
-            <MenuItem
-              attributes={{
-                className:
-                  'module-message__context--icon module-message__context__react',
-              }}
-              onClick={(event: React.MouseEvent) => {
-                event.stopPropagation();
-                event.preventDefault();
-
-                this.toggleReactionPicker();
-              }}
-            >
-              {i18n('reactToMessage')}
-            </MenuItem>
+            {canReply && (
+              <MenuItem
+                attributes={{
+                  className:
+                    'module-message__context--icon module-message__context__reply',
+                }}
+                onClick={(event: React.MouseEvent) => {
+                  event.stopPropagation();
+                  event.preventDefault();
+
+                  replyToMessage(id);
+                }}
+              >
+                {i18n('replyToMessage')}
+              </MenuItem>
+            )}
+            {canReact && (
+              <MenuItem
+                attributes={{
+                  className:
+                    'module-message__context--icon module-message__context__react',
+                }}
+                onClick={(event: React.MouseEvent) => {
+                  event.stopPropagation();
+                  event.preventDefault();
+
+                  this.toggleReactionPicker();
+                }}
+              >
+                {i18n('reactToMessage')}
+              </MenuItem>
+            )}
           </>
         ) : null}
         <MenuItem
@@ -2323,15 +2330,15 @@ export class Message extends React.PureComponent<Props, State> {
 
   public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
     // Do not allow reactions to error messages
-    const { canReply } = this.props;
+    const { canReact } = this.props;
 
     const key = KeyboardLayout.lookup(event.nativeEvent);
 
     if (
       (key === 'E' || key === 'e') &&
       (event.metaKey || event.ctrlKey) &&
       event.shiftKey &&
-      canReply
+      canReact
     ) {
       this.toggleReactionPicker();
     }

ts/components/conversation/MessageDetail.stories.tsx

@@ -27,6 +27,7 @@ const defaultMessage: MessageDataPropsType = {
     id: 'some-id',
     title: 'Max',
   }),
+  canReact: true,
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,

ts/components/conversation/Quote.stories.tsx

@@ -37,6 +37,7 @@ const defaultMessageProps: MessagesProps = {
     id: 'some-id',
     title: 'Person X',
   }),
+  canReact: true,
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,

ts/components/conversation/Timeline.stories.tsx

@@ -48,6 +48,7 @@ const items: Record<string, TimelineItemType> = {
       }),
       canDeleteForEveryone: false,
       canDownload: true,
+      canReact: true,
       canReply: true,
       conversationColor: 'forest',
       conversationId: 'conversation-id',
@@ -69,6 +70,7 @@ const items: Record<string, TimelineItemType> = {
       author: getDefaultConversation({}),
       canDeleteForEveryone: false,
       canDownload: true,
+      canReact: true,
       canReply: true,
       conversationColor: 'forest',
       conversationId: 'conversation-id',
@@ -104,6 +106,7 @@ const items: Record<string, TimelineItemType> = {
       author: getDefaultConversation({}),
       canDeleteForEveryone: false,
       canDownload: true,
+      canReact: true,
       canReply: true,
       conversationColor: 'crimson',
       conversationId: 'conversation-id',
@@ -200,6 +203,7 @@ const items: Record<string, TimelineItemType> = {
       author: getDefaultConversation({}),
       canDeleteForEveryone: false,
       canDownload: true,
+      canReact: true,
       canReply: true,
       conversationColor: 'plum',
       conversationId: 'conversation-id',
@@ -222,6 +226,7 @@ const items: Record<string, TimelineItemType> = {
       author: getDefaultConversation({}),
       canDeleteForEveryone: false,
       canDownload: true,
+      canReact: true,
       canReply: true,
       conversationColor: 'crimson',
       conversationId: 'conversation-id',
@@ -244,6 +249,7 @@ const items: Record<string, TimelineItemType> = {
       author: getDefaultConversation({}),
       canDeleteForEveryone: false,
       canDownload: true,
+      canReact: true,
       canReply: true,
       conversationColor: 'crimson',
       conversationId: 'conversation-id',
@@ -266,6 +272,7 @@ const items: Record<string, TimelineItemType> = {
       author: getDefaultConversation({}),
       canDeleteForEveryone: false,
       canDownload: true,
+      canReact: true,
       canReply: true,
       conversationColor: 'crimson',
       conversationId: 'conversation-id',
@@ -288,6 +295,7 @@ const items: Record<string, TimelineItemType> = {
       author: getDefaultConversation({}),
       canDeleteForEveryone: false,
       canDownload: true,
+      canReact: true,
       canReply: true,
       conversationColor: 'crimson',
       conversationId: 'conversation-id',

ts/state/selectors/message.ts

@@ -508,6 +508,7 @@ type ShallowPropsType = Pick<
   PropsForMessage,
   | 'canDeleteForEveryone'
   | 'canDownload'
+  | 'canReact'
   | 'canReply'
   | 'contact'
   | 'contactNameColor'
@@ -589,6 +590,7 @@ const getShallowPropsForMessage = createSelectorCreator(memoizeByRoot, isEqual)(
     return {
       canDeleteForEveryone: canDeleteForEveryone(message),
       canDownload: canDownload(message, conversationSelector),
+      canReact: canReact(message, ourConversationId, conversationSelector),
       canReply: canReply(message, ourConversationId, conversationSelector),
       contact: getPropsForEmbeddedContact(message, regionCode, accountSelector),
       contactNameColor,