Adds message forwarding

ts/components/conversation/AttachmentList.tsx

@@ -18,10 +18,10 @@ import {
 export type Props = {
   attachments: Array<AttachmentType>;
   i18n: LocalizerType;
-  onClickAttachment: (attachment: AttachmentType) => void;
+  onAddAttachment?: () => void;
+  onClickAttachment?: (attachment: AttachmentType) => void;
+  onClose?: () => void;
   onCloseAttachment: (attachment: AttachmentType) => void;
-  onAddAttachment: () => void;
-  onClose: () => void;
 };
 
 const IMAGE_WIDTH = 120;
@@ -47,7 +47,7 @@ export const AttachmentList = ({
 
   return (
     <div className="module-attachments">
-      {attachments.length > 1 ? (
+      {onClose && attachments.length > 1 ? (
         <div className="module-attachments__header">
           <button
             type="button"
@@ -105,7 +105,7 @@ export const AttachmentList = ({
             />
           );
         })}
-        {allVisualAttachments ? (
+        {allVisualAttachments && onAddAttachment ? (
           <StagedPlaceholderAttachment onClick={onAddAttachment} i18n={i18n} />
         ) : null}
       </div>

ts/components/conversation/Message.stories.tsx

@@ -130,6 +130,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   showExpiredOutgoingTapToViewToast: action(
     'showExpiredOutgoingTapToViewToast'
   ),
+  showForwardMessageModal: action('showForwardMessageModal'),
   showMessageDetail: action('showMessageDetail'),
   showVisualAttachment: action('showVisualAttachment'),
   status: overrideProps.status || 'sent',

ts/components/conversation/Message.tsx

@@ -170,6 +170,7 @@ export type PropsActions = {
   ) => void;
   replyToMessage: (id: string) => void;
   retrySend: (id: string) => void;
+  showForwardMessageModal: (id: string) => void;
   deleteMessage: (id: string) => void;
   deleteMessageForEveryone: (id: string) => void;
   showMessageDetail: (id: string) => void;
@@ -1401,6 +1402,7 @@ export class Message extends React.PureComponent<Props, State> {
       canReply,
       deleteMessage,
       deleteMessageForEveryone,
+      deletedForEveryone,
       direction,
       i18n,
       id,
@@ -1408,10 +1410,13 @@ export class Message extends React.PureComponent<Props, State> {
       isTapToView,
       replyToMessage,
       retrySend,
+      showForwardMessageModal,
       showMessageDetail,
       status,
     } = this.props;
 
+    const canForward = !isTapToView && !deletedForEveryone;
+
     const { canDeleteForEveryone } = this.state;
 
     const showRetry =
@@ -1499,6 +1504,22 @@ export class Message extends React.PureComponent<Props, State> {
             {i18n('retrySend')}
           </MenuItem>
         ) : null}
+        {canForward ? (
+          <MenuItem
+            attributes={{
+              className:
+                'module-message__context--icon module-message__context__forward-message',
+            }}
+            onClick={(event: React.MouseEvent) => {
+              event.stopPropagation();
+              event.preventDefault();
+
+              showForwardMessageModal(id);
+            }}
+          >
+            {i18n('forwardMessage')}
+          </MenuItem>
+        ) : null}
         <MenuItem
           attributes={{
             className:

ts/components/conversation/MessageDetail.stories.tsx

@@ -72,6 +72,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   showContactModal: () => null,
   showExpiredIncomingTapToViewToast: () => null,
   showExpiredOutgoingTapToViewToast: () => null,
+  showForwardMessageModal: () => null,
   showVisualAttachment: () => null,
 });
 

ts/components/conversation/MessageDetail.tsx

@@ -65,6 +65,7 @@ export type Props = {
   | 'showContactModal'
   | 'showExpiredIncomingTapToViewToast'
   | 'showExpiredOutgoingTapToViewToast'
+  | 'showForwardMessageModal'
   | 'showVisualAttachment'
 >;
 
@@ -235,6 +236,7 @@ export class MessageDetail extends React.Component<Props> {
       showContactModal,
       showExpiredIncomingTapToViewToast,
       showExpiredOutgoingTapToViewToast,
+      showForwardMessageModal,
       showVisualAttachment,
     } = this.props;
 
@@ -263,6 +265,7 @@ export class MessageDetail extends React.Component<Props> {
               renderEmojiPicker={renderEmojiPicker}
               replyToMessage={replyToMessage}
               retrySend={retrySend}
+              showForwardMessageModal={showForwardMessageModal}
               scrollToQuotedMessage={() => {
                 assert(
                   false,

ts/components/conversation/Quote.stories.tsx

@@ -61,6 +61,7 @@ const defaultMessageProps: MessagesProps = {
   showContactModal: () => null,
   showExpiredIncomingTapToViewToast: () => null,
   showExpiredOutgoingTapToViewToast: () => null,
+  showForwardMessageModal: () => null,
   showMessageDetail: () => null,
   showVisualAttachment: () => null,
   status: 'sent',

ts/components/conversation/Timeline.stories.tsx

@@ -249,6 +249,7 @@ const actions = () => ({
   showExpiredOutgoingTapToViewToast: action(
     'showExpiredOutgoingTapToViewToast'
   ),
+  showForwardMessageModal: action('showForwardMessageModal'),
 
   showIdentity: action('showIdentity'),
 

ts/components/conversation/TimelineItem.stories.tsx

@@ -53,6 +53,7 @@ const getDefaultProps = () => ({
   openConversation: action('openConversation'),
   showContactDetail: action('showContactDetail'),
   showContactModal: action('showContactModal'),
+  showForwardMessageModal: action('showForwardMessageModal'),
   showVisualAttachment: action('showVisualAttachment'),
   downloadAttachment: action('downloadAttachment'),
   displayTapToViewMessage: action('displayTapToViewMessage'),