Import/export additional message flags

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>

ts/components/StoryViewsNRepliesModal.tsx

@@ -51,6 +51,7 @@ const MESSAGE_DEFAULT_PROPS = {
   isMessageRequestAccepted: true,
   isSelected: false,
   isSelectMode: false,
+  isSMS: false,
   onToggleSelect: shouldNeverBeCalled,
   onReplyToMessage: shouldNeverBeCalled,
   kickOffAttachmentDownload: shouldNeverBeCalled,

ts/components/conversation/Message.tsx

@@ -99,6 +99,7 @@ import { UserText } from '../UserText';
 
 const GUESS_METADATA_WIDTH_TIMESTAMP_SIZE = 16;
 const GUESS_METADATA_WIDTH_EXPIRE_TIMER_SIZE = 18;
+const GUESS_METADATA_WIDTH_SMS_SIZE = 18;
 const GUESS_METADATA_WIDTH_EDITED_SIZE = 40;
 const GUESS_METADATA_WIDTH_OUTGOING_SIZE: Record<MessageStatusType, number> = {
   delivered: 24,
@@ -218,6 +219,7 @@ export type PropsData = {
   isTargetedCounter?: number;
   isSelected: boolean;
   isSelectMode: boolean;
+  isSMS: boolean;
   isSpoilerExpanded?: Record<number, boolean>;
   direction: DirectionType;
   timestamp: number;
@@ -628,7 +630,8 @@ export class Message extends React.PureComponent<Props, State> {
    * because it can reduce layout jumpiness.
    */
   private guessMetadataWidth(): number {
-    const { direction, expirationLength, status, isEditedMessage } = this.props;
+    const { direction, expirationLength, isSMS, status, isEditedMessage } =
+      this.props;
 
     let result = GUESS_METADATA_WIDTH_TIMESTAMP_SIZE;
 
@@ -641,6 +644,10 @@ export class Message extends React.PureComponent<Props, State> {
       result += GUESS_METADATA_WIDTH_EXPIRE_TIMER_SIZE;
     }
 
+    if (isSMS) {
+      result += GUESS_METADATA_WIDTH_SMS_SIZE;
+    }
+
     if (direction === 'outgoing' && status) {
       result += GUESS_METADATA_WIDTH_OUTGOING_SIZE[status];
     }
@@ -811,6 +818,7 @@ export class Message extends React.PureComponent<Props, State> {
       i18n,
       id,
       isEditedMessage,
+      isSMS,
       isSticker,
       isTapToViewExpired,
       retryMessageSend,
@@ -834,6 +842,7 @@ export class Message extends React.PureComponent<Props, State> {
         i18n={i18n}
         id={id}
         isEditedMessage={isEditedMessage}
+        isSMS={isSMS}
         isInline={isInline}
         isOutlineOnlyBubble={
           deletedForEveryone || (attachmentDroppedDueToSize && !text)

ts/components/conversation/MessageDetail.stories.tsx

@@ -36,6 +36,7 @@ const defaultMessage: MessageDataPropsType = {
   isMessageRequestAccepted: true,
   isSelected: false,
   isSelectMode: false,
+  isSMS: false,
   isSpoilerExpanded: {},
   previews: [],
   readStatus: ReadStatus.Read,

ts/components/conversation/MessageMetadata.tsx

@@ -27,6 +27,7 @@ type PropsType = {
   i18n: LocalizerType;
   id: string;
   isEditedMessage?: boolean;
+  isSMS?: boolean;
   isInline?: boolean;
   isOutlineOnlyBubble?: boolean;
   isShowingImage: boolean;
@@ -56,6 +57,7 @@ export const MessageMetadata = forwardRef<HTMLDivElement, Readonly<PropsType>>(
       i18n,
       id,
       isEditedMessage,
+      isSMS,
       isOutlineOnlyBubble,
       isInline,
       isShowingImage,
@@ -211,6 +213,11 @@ export const MessageMetadata = forwardRef<HTMLDivElement, Readonly<PropsType>>(
           </button>
         )}
         {timestampNode}
+        {isSMS ? (
+          <div
+            className={`module-message__metadata__sms module-message__metadata__sms--${direction}`}
+          />
+        ) : null}
         {expirationLength ? (
           <ExpireTimer
             direction={metadataDirection}

ts/components/conversation/Quote.stories.tsx

@@ -105,6 +105,7 @@ const defaultMessageProps: TimelineMessagesProps = {
   isMessageRequestAccepted: true,
   isSelected: false,
   isSelectMode: false,
+  isSMS: false,
   isSpoilerExpanded: {},
   toggleSelectMessage: action('toggleSelectMessage'),
   kickOffAttachmentDownload: action('default--kickOffAttachmentDownload'),

ts/components/conversation/Timeline.stories.tsx

@@ -67,6 +67,7 @@ function mockMessageTimelineItem(
       isMessageRequestAccepted: true,
       isSelected: false,
       isSelectMode: false,
+      isSMS: false,
       isSpoilerExpanded: {},
       previews: [],
       readStatus: ReadStatus.Read,

ts/components/conversation/TimelineMessage.stories.tsx

@@ -295,6 +295,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   isSelectMode: isBoolean(overrideProps.isSelectMode)
     ? overrideProps.isSelectMode
     : false,
+  isSMS: isBoolean(overrideProps.isSMS) ? overrideProps.isSMS : false,
   isSpoilerExpanded: overrideProps.isSpoilerExpanded || {},
   isTapToView: overrideProps.isTapToView,
   isTapToViewError: overrideProps.isTapToViewError,
@@ -2060,6 +2061,12 @@ PaymentNotification.args = {
   },
 };
 
+export const SMS = Template.bind({});
+SMS.args = {
+  isSMS: true,
+  text: 'hello',
+};
+
 function MultiSelectMessage() {
   const [selected, setSelected] = React.useState(false);