Add toast when attachment download is still in progress + pluralize F…

…ileSaved toast + fix linter errors

_locales/de/messages.json

@@ -789,11 +789,14 @@
     "messageformat": "Es gab einen Fehler bei der Sprachaufzeichnung."
   },
   "icu:attachmentSaved": {
-    "messageformat": "Anhang gespeichert."
+    "messageformat": "{count, plural, one {Anhang} other {# Anhänge}} gespeichert."
   },
   "icu:attachmentSavedShow": {
     "messageformat": "Im Ordner anzeigen"
   },
+  "icu:attachmentStillDownloading": {
+    "messageformat": "{count, plural, one {Anhang kann} other {Anhänge können}} nicht gespeichert werden, da {count, plural, one {er} other {#}} noch nicht fertig heruntergeladen {count, plural, one {wurde} other {wurden}}."
+  },
   "icu:you": {
     "messageformat": "Du"
   },

_locales/en/messages.json

@@ -1063,13 +1063,17 @@
     "description": "Shown in a dialog to inform user that we experienced an unrecoverable error"
   },
   "icu:attachmentSaved": {
-    "messageformat": "Attachment saved.",
+    "messageformat": "{count, plural, one {Attachment} other {# attachments}} saved",
     "description": "Shown after user selects to save to downloads"
   },
   "icu:attachmentSavedShow": {
     "messageformat": "Show in folder",
     "description": "Button label for showing the attachment in your file system"
   },
+  "icu:attachmentStillDownloading": {
+    "messageformat": "Can't save {count, plural, one {attachment} other {attachments}}, since {count, plural, one {it hasn't} other {# haven't}} finished downloading yet",
+    "description": "Shown when the user tries to save an attachment to the filesystem, but it's impossible since the download from servers hasn't finished yet"
+  },
   "icu:you": {
     "messageformat": "You",
     "description": "Shown when the user represented is the current user."

app/main.ts

@@ -3039,7 +3039,7 @@ ipc.handle('show-save-multi-dialog', async _event => {
       properties: ['openDirectory', 'createDirectory'],
     }
   );
-  if (canceled || selectedDirPaths.length == 0) {
+  if (canceled || selectedDirPaths.length === 0) {
     return { canceled: true };
   }
 

ts/components/EditHistoryMessagesModal.tsx

@@ -63,6 +63,7 @@ const MESSAGE_DEFAULT_PROPS = {
   showContactModal: shouldNeverBeCalled,
   showConversation: noop,
   showEditHistoryModal: noop,
+  showAttachmentDownloadStillInProgressToast: shouldNeverBeCalled,
   showExpiredIncomingTapToViewToast: shouldNeverBeCalled,
   showExpiredOutgoingTapToViewToast: shouldNeverBeCalled,
   showLightboxForViewOnceMedia: shouldNeverBeCalled,

ts/components/StoryViewsNRepliesModal.tsx

@@ -67,6 +67,7 @@ const MESSAGE_DEFAULT_PROPS = {
   saveAttachments: shouldNeverBeCalled,
   scrollToQuotedMessage: shouldNeverBeCalled,
   showConversation: noop,
+  showAttachmentDownloadStillInProgressToast: shouldNeverBeCalled,
   showExpiredIncomingTapToViewToast: shouldNeverBeCalled,
   showExpiredOutgoingTapToViewToast: shouldNeverBeCalled,
   showLightbox: shouldNeverBeCalled,

ts/components/ToastManager.stories.tsx

@@ -27,6 +27,14 @@ function getToast(toastType: ToastType): AnyToast {
       return { toastType: ToastType.AlreadyGroupMember };
     case ToastType.AlreadyRequestedToJoin:
       return { toastType: ToastType.AlreadyRequestedToJoin };
+    case ToastType.AttachmentDownloadStillInProgress:
+      // TODO I have no idea what parameters to return here
+      return {
+        toastType: ToastType.AttachmentDownloadStillInProgress,
+        parameters: {
+          count: 1,
+        },
+      };
     case ToastType.Blocked:
       return { toastType: ToastType.Blocked };
     case ToastType.BlockedGroup:

ts/components/ToastManager.tsx

@@ -88,6 +88,16 @@ export function renderToast({
     );
   }
 
+  if (toastType === ToastType.AttachmentDownloadStillInProgress) {
+    return (
+      <Toast onClose={hideToast}>
+        {i18n('icu:attachmentStillDownloading', {
+          count: toast.parameters.count,
+        })}
+      </Toast>
+    );
+  }
+
   if (toastType === ToastType.Blocked) {
     return <Toast onClose={hideToast}>{i18n('icu:unblockToSend')}</Toast>;
   }
@@ -310,7 +320,9 @@ export function renderToast({
           },
         }}
       >
-        {i18n('icu:attachmentSaved')}
+        {i18n('icu:attachmentSaved', {
+          count: toast.parameters.countOfFiles ?? 1,
+        })}
       </Toast>
     );
   }

ts/components/conversation/Message.tsx

@@ -368,6 +368,8 @@ export type PropsActions = {
   targetMessage?: (messageId: string, conversationId: string) => unknown;
 
   showEditHistoryModal?: (id: string) => unknown;
+  // TODO is unknown the right type to return here?
+  showAttachmentDownloadStillInProgressToast: (count: number) => unknown;
   showExpiredIncomingTapToViewToast: () => unknown;
   showExpiredOutgoingTapToViewToast: () => unknown;
   viewStory: ViewStoryActionCreatorType;

ts/components/conversation/MessageDetail.tsx

@@ -99,6 +99,7 @@ export type PropsReduxActions = Pick<
   | 'showContactModal'
   | 'showConversation'
   | 'showEditHistoryModal'
+  | 'showAttachmentDownloadStillInProgressToast'
   | 'showExpiredIncomingTapToViewToast'
   | 'showExpiredOutgoingTapToViewToast'
   | 'showLightbox'
@@ -144,6 +145,7 @@ export function MessageDetail({
   showContactModal,
   showConversation,
   showEditHistoryModal,
+  showAttachmentDownloadStillInProgressToast,
   showExpiredIncomingTapToViewToast,
   showExpiredOutgoingTapToViewToast,
   showLightbox,
@@ -360,6 +362,9 @@ export function MessageDetail({
               log.warn('MessageDetail: scrollToQuotedMessage called!');
             }}
             showContactModal={showContactModal}
+            showAttachmentDownloadStillInProgressToast={
+              showAttachmentDownloadStillInProgressToast
+            }
             showExpiredIncomingTapToViewToast={
               showExpiredIncomingTapToViewToast
             }

ts/components/conversation/Quote.stories.tsx

@@ -134,6 +134,9 @@ const defaultMessageProps: TimelineMessagesProps = {
   showSpoiler: action('showSpoiler'),
   pushPanelForConversation: action('default--pushPanelForConversation'),
   showContactModal: action('default--showContactModal'),
+  showAttachmentDownloadStillInProgressToast: action(
+    'showAttachmentDownloadStillInProgressToast'
+  ),
   showExpiredIncomingTapToViewToast: action(
     'showExpiredIncomingTapToViewToast'
   ),

ts/components/conversation/Timeline.stories.tsx

@@ -306,6 +306,9 @@ const actions = () => ({
 
   openGiftBadge: action('openGiftBadge'),
   scrollToQuotedMessage: action('scrollToQuotedMessage'),
+  showAttachmentDownloadStillInProgressToast: action(
+    'showAttachmentDownloadStillInProgressToast'
+  ),
   showExpiredIncomingTapToViewToast: action(
     'showExpiredIncomingTapToViewToast'
   ),

ts/components/conversation/TimelineItem.stories.tsx

@@ -97,6 +97,9 @@ const getDefaultProps = () => ({
   toggleForwardMessagesModal: action('toggleForwardMessagesModal'),
   showLightboxForViewOnceMedia: action('showLightboxForViewOnceMedia'),
   doubleCheckMissingQuoteReference: action('doubleCheckMissingQuoteReference'),
+  showAttachmentDownloadStillInProgressToast: action(
+    'showAttachmentDownloadStillInProgressToast'
+  ),
   showExpiredIncomingTapToViewToast: action(
     'showExpiredIncomingTapToViewToast'
   ),

ts/components/conversation/TimelineMessage.stories.tsx

@@ -341,6 +341,9 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   showSpoiler: action('showSpoiler'),
   pushPanelForConversation: action('pushPanelForConversation'),
   showContactModal: action('showContactModal'),
+  showAttachmentDownloadStillInProgressToast: action(
+    'showAttachmentDownloadStillInProgressToast'
+  ),
   showExpiredIncomingTapToViewToast: action(
     'showExpiredIncomingTapToViewToast'
   ),

ts/components/conversation/TimelineMessage.tsx

@@ -23,7 +23,7 @@ import type {
   PropsData as MessagePropsData,
   PropsHousekeeping,
 } from './Message';
-import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
+import { type PushPanelForConversationActionType } from '../../state/ducks/conversations';
 import { doesMessageBodyOverflow } from './MessageBodyReadMore';
 import type { Props as ReactionPickerProps } from './ReactionPicker';
 import {
@@ -122,6 +122,7 @@ export function TimelineMessage(props: Props): JSX.Element {
     retryMessageSend,
     saveAttachment,
     saveAttachments,
+    showAttachmentDownloadStillInProgressToast,
     selectedReaction,
     setQuoteByMessageId,
     setMessageToEdit,
@@ -217,6 +218,7 @@ export function TimelineMessage(props: Props): JSX.Element {
         return;
       }
 
+      let attachmentsInProgress = 0;
       // check if any attachment needs to be downloaded from servers
       for (const attachment of attachments) {
         if (!isDownloaded(attachment)) {
@@ -225,11 +227,14 @@ export function TimelineMessage(props: Props): JSX.Element {
             messageId: id,
           });
 
-          // TODO show toast here telling the user that the download is still in progress and the attachment cant be saved atm
-          return;
+          attachmentsInProgress += 1;
         }
       }
 
+      if (attachmentsInProgress !== 0) {
+        showAttachmentDownloadStillInProgressToast(attachmentsInProgress);
+      }
+
       if (attachments.length !== 1) {
         saveAttachments(attachments, timestamp);
       } else {
@@ -240,6 +245,7 @@ export function TimelineMessage(props: Props): JSX.Element {
       kickOffAttachmentDownload,
       saveAttachments,
       saveAttachment,
+      showAttachmentDownloadStillInProgressToast,
       attachments,
       id,
       timestamp,
@@ -253,17 +259,13 @@ export function TimelineMessage(props: Props): JSX.Element {
   const shouldShowAdditional =
     doesMessageBodyOverflow(text || '') || !isWindowWidthNotNarrow;
 
-
   const hasPendingAttachments =
-    attachments?.length && 
-    attachments.some(attachment => attachment.pending);
-
-  // If any of the conditions is not given -> undefined is returned --> download menu icon is not rendered
+    attachments?.length && attachments.some(attachment => attachment.pending);
+
+  // If any of the conditions is not given -> undefined is returned
+  // --> download menu icon is not rendered
   const handleDownload =
-    canDownload &&
-    !isSticker &&
-    !isTapToView &&
-    !hasPendingAttachments
+    canDownload && !isSticker && !isTapToView && !hasPendingAttachments
       ? openGenericAttachment
       : undefined;
 
@@ -522,7 +524,8 @@ function MessageMenu({
             </Reference>
           )}
 
-          {/* If download handler is undefined (e.g. multiple attachments), no button is rendered */}
+          {/* If download handler is undefined (e.g. multiple attachments), 
+          no button is rendered */}
           {onDownload && (
             // This a menu meant for mouse use only
             // eslint-disable-next-line max-len

ts/state/ducks/conversations.ts

@@ -1189,6 +1189,7 @@ export const actions = {
   setPreJoinConversation,
   setVoiceNotePlaybackRate,
   showArchivedConversations,
+  showAttachmentDownloadStillInProgressToast,
   showChooseGroupMembers,
   showConversation,
   showExpiredIncomingTapToViewToast,
@@ -3857,14 +3858,14 @@ const showSaveMultiDialog = (): Promise<{
 
 export type SaveAttachmentsActionCreatorType = ReadonlyDeep<
   (
-    attachments: readonly AttachmentType[],
+    attachments: ReadonlyArray<AttachmentType>,
     timestamp?: number,
     index?: number
   ) => unknown
 >;
 
 function saveAttachments(
-  attachments: readonly AttachmentType[],
+  attachments: ReadonlyArray<AttachmentType>,
   timestamp = Date.now(),
   index = 0
 ): ThunkAction<void, RootStateType, unknown, ShowToastActionType> {
@@ -3895,6 +3896,7 @@ function saveAttachments(
 
     let fullPath;
     for (const attachment of attachments) {
+      // eslint-disable-next-line no-await-in-loop
       const result = await Attachment.save({
         attachment,
         index: index + 1,
@@ -3909,29 +3911,46 @@ function saveAttachments(
       }
     }
 
-    // TODO shouldn't we throw some kind of error here? Original code also doesn't do anything, but...
-    if (fullPath == null)
+    if (fullPath == null) {
       throw new Error('saveAttachments: Returned path to attachment is null!');
+    }
 
     dispatch({
       type: SHOW_TOAST,
       payload: {
-        toastType: ToastType.FileSaved, // TODO we need a new toast here
+        toastType: ToastType.FileSaved,
         parameters: {
-          fullPath: fullPath,
+          countOfFiles: attachments.length,
+          fullPath,
         },
       },
     });
   };
 }
 
+function showAttachmentDownloadStillInProgressToast(
+  count: number
+): ShowToastActionType {
+  log.info(
+    "showAttachmentDownloadStillInProgressToast download still in progress toast for an attachment that the user want's to save"
+  );
+  return {
+    type: SHOW_TOAST,
+    payload: {
+      toastType: ToastType.AttachmentDownloadStillInProgress,
+      parameters: {
+        count,
+      },
+    },
+  };
+}
+
 // is only used by lightbox/ gallery
 export function saveAttachmentFromMessage(
   messageId: string,
   providedAttachment?: AttachmentType
 ): ThunkAction<void, RootStateType, unknown, ShowToastActionType> {
   return async (dispatch, getState) => {
-    console.log('saveAttachmentFromMessage()');
     const message = await __DEPRECATED$getMessageById(messageId);
     if (!message) {
       throw new Error(

ts/state/smart/MessageDetail.tsx

@@ -51,6 +51,7 @@ export const SmartMessageDetail = memo(
       saveAttachment,
       saveAttachments,
       showConversation,
+      showAttachmentDownloadStillInProgressToast,
       showExpiredIncomingTapToViewToast,
       showExpiredOutgoingTapToViewToast,
       showSpoiler,
@@ -105,6 +106,9 @@ export const SmartMessageDetail = memo(
         showContactModal={showContactModal}
         showConversation={showConversation}
         showEditHistoryModal={showEditHistoryModal}
+        showAttachmentDownloadStillInProgressToast={
+          showAttachmentDownloadStillInProgressToast
+        }
         showExpiredIncomingTapToViewToast={showExpiredIncomingTapToViewToast}
         showExpiredOutgoingTapToViewToast={showExpiredOutgoingTapToViewToast}
         showLightbox={showLightbox}

ts/state/smart/TimelineItem.tsx

@@ -131,6 +131,7 @@ export const SmartTimelineItem = memo(function SmartTimelineItem(
     toggleSelectMessage,
     setMessageToEdit,
     showConversation,
+    showAttachmentDownloadStillInProgressToast,
     showExpiredIncomingTapToViewToast,
     showExpiredOutgoingTapToViewToast,
     showSpoiler,
@@ -226,6 +227,9 @@ export const SmartTimelineItem = memo(function SmartTimelineItem(
       setMessageToEdit={setMessageToEdit}
       showContactModal={showContactModal}
       showConversation={showConversation}
+      showAttachmentDownloadStillInProgressToast={
+        showAttachmentDownloadStillInProgressToast
+      }
       showExpiredIncomingTapToViewToast={showExpiredIncomingTapToViewToast}
       showExpiredOutgoingTapToViewToast={showExpiredOutgoingTapToViewToast}
       showLightbox={showLightbox}