Improve quoted attachment typings

ts/components/conversation/Message.tsx

@@ -37,7 +37,7 @@ import { ImageGrid } from './ImageGrid';
 import { GIF } from './GIF';
 import { CurveType, Image } from './Image';
 import { ContactName } from './ContactName';
-import type { QuotedAttachmentType } from './Quote';
+import type { QuotedAttachmentForUIType } from './Quote';
 import { Quote } from './Quote';
 import { EmbeddedContact } from './EmbeddedContact';
 import type { OwnProps as ReactionViewerProps } from './ReactionViewer';
@@ -247,7 +247,7 @@ export type PropsData = {
     conversationTitle: string;
     customColor?: CustomColorType;
     text: string;
-    rawAttachment?: QuotedAttachmentType;
+    rawAttachment?: QuotedAttachmentForUIType;
     payment?: AnyPaymentEvent;
     isFromMe: boolean;
     sentAt: number;
@@ -267,7 +267,7 @@ export type PropsData = {
     customColor?: CustomColorType;
     emoji?: string;
     isFromMe: boolean;
-    rawAttachment?: QuotedAttachmentType;
+    rawAttachment?: QuotedAttachmentForUIType;
     storyId?: string;
     text: string;
   };

ts/components/conversation/Quote.stories.tsx

@@ -235,6 +235,7 @@ ImageOnly.args = {
       contentType: IMAGE_PNG,
       height: 100,
       width: 100,
+      size: 100,
       path: pngUrl,
       objectUrl: pngUrl,
     },
@@ -251,6 +252,7 @@ ImageAttachment.args = {
       contentType: IMAGE_PNG,
       height: 100,
       width: 100,
+      size: 100,
       path: pngUrl,
       objectUrl: pngUrl,
     },
@@ -287,6 +289,7 @@ VideoOnly.args = {
       contentType: IMAGE_PNG,
       height: 100,
       width: 100,
+      size: 100,
       path: pngUrl,
       objectUrl: pngUrl,
     },
@@ -304,6 +307,7 @@ VideoAttachment.args = {
       contentType: IMAGE_PNG,
       height: 100,
       width: 100,
+      size: 100,
       path: pngUrl,
       objectUrl: pngUrl,
     },
@@ -509,6 +513,7 @@ IsStoryReplyEmoji.args = {
       contentType: IMAGE_PNG,
       height: 100,
       width: 100,
+      size: 100,
       path: pngUrl,
       objectUrl: pngUrl,
     },

ts/components/conversation/Quote.tsx

@@ -26,9 +26,13 @@ import type { AnyPaymentEvent } from '../../types/Payment';
 import { PaymentEventKind } from '../../types/Payment';
 import { getPaymentEventNotificationText } from '../../messages/helpers';
 import { RenderLocation } from './MessageTextRenderer';
+import type { QuotedAttachmentType } from '../../model-types';
 
 const EMPTY_OBJECT = Object.freeze(Object.create(null));
 
+export type QuotedAttachmentForUIType = QuotedAttachmentType &
+  Pick<AttachmentType, 'isVoiceMessage' | 'fileName' | 'textAttachment'>;
+
 export type Props = {
   authorTitle: string;
   conversationColor: ConversationColorType;
@@ -44,7 +48,7 @@ export type Props = {
   onClick?: () => void;
   onClose?: () => void;
   text: string;
-  rawAttachment?: QuotedAttachmentType;
+  rawAttachment?: QuotedAttachmentForUIType;
   payment?: AnyPaymentEvent;
   isGiftBadge: boolean;
   isViewOnce: boolean;
@@ -53,11 +57,6 @@ export type Props = {
   doubleCheckMissingQuoteReference?: () => unknown;
 };
 
-export type QuotedAttachmentType = Pick<
-  AttachmentType,
-  'contentType' | 'fileName' | 'isVoiceMessage' | 'thumbnail' | 'textAttachment'
->;
-
 function validateQuote(quote: Props): boolean {
   if (
     quote.isStoryReply &&
@@ -86,9 +85,9 @@ function validateQuote(quote: Props): boolean {
 }
 
 // Long message attachments should not be shown.
-function getAttachment(
-  rawAttachment: undefined | QuotedAttachmentType
-): undefined | QuotedAttachmentType {
+function getAttachment<T extends Pick<QuotedAttachmentType, 'contentType'>>(
+  rawAttachment: T | undefined
+): T | undefined {
   return rawAttachment && !MIME.isLongMessage(rawAttachment.contentType)
     ? rawAttachment
     : undefined;