fix: suppress upload cancelled notification for async uploads (#3693)

## 🎯 Goal

This PR fixes a small UI glitch which would trigger an upload failure
snackbar notification if we eagerly remove an attachment from the
composer while it hasn't finished uploading (basically the entire
usecase of `allowSendBeforeAttachmentsUpload`).

We simply suppress these notifications as they make no sense and look
weird on the UI. We however still trigger actual upload failures even if
it's in the premature phase (composer) as they'll update the attachment
regardless so that the user can retry.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

package/src/components/MessageList/MessageFlashList.tsx

@@ -60,6 +60,7 @@ import { MessageInputHeightState } from '../../state-store/message-input-height-
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { excludeCanceledUploadNotifications } from '../Notifications/notificationFilters';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
@@ -139,7 +140,10 @@ type MessageFlashListPropsWithContext = Pick<
     | 'maximumMessageLimit'
   > &
   Pick<ChatContextValue, 'client'> &
-  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
+  Pick<
+    MessageInputContextValue,
+    'allowSendBeforeAttachmentsUpload' | 'messageInputFloating' | 'messageInputHeightStore'
+  > &
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
   Pick<
     MessagesContextValue,
@@ -259,6 +263,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     ? InlineLoadingMoreRecentThreadIndicator
     : InlineLoadingMoreRecentIndicator;
   const {
+    allowSendBeforeAttachmentsUpload,
     attachmentPickerStore,
     additionalFlashListProps,
     channel,
@@ -1153,7 +1158,10 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           <AutoCompleteSuggestionList />
         </PortalWhileClosingView>
       </Animated.View>
-      <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
+      <NotificationList
+        bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined}
+        filter={allowSendBeforeAttachmentsUpload ? excludeCanceledUploadNotifications : undefined}
+      />
     </View>
   );
 };
@@ -1238,11 +1246,13 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
   const { readEvents } = useOwnCapabilitiesContext();
-  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
+  const { allowSendBeforeAttachmentsUpload, messageInputFloating, messageInputHeightStore } =
+    useMessageInputContext();
 
   return (
     <MessageFlashListWithContext
       {...{
+        allowSendBeforeAttachmentsUpload,
         attachmentPickerStore,
         channel,
         channelUnreadStateStore,

package/src/components/MessageList/MessageList.tsx

@@ -74,6 +74,7 @@ import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { excludeCanceledUploadNotifications } from '../Notifications/notificationFilters';
 import { PortalWhileClosingView } from '../UIComponents';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -229,7 +230,10 @@ type MessageListPropsWithContext = Pick<
     MessagesContextValue,
     'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'
   > &
-  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
+  Pick<
+    MessageInputContextValue,
+    'allowSendBeforeAttachmentsUpload' | 'messageInputFloating' | 'messageInputHeightStore'
+  > &
   Pick<
     ThreadContextValue,
     'loadMoreRecentThread' | 'loadMoreThread' | 'threadHasMore' | 'thread' | 'threadInstance'
@@ -320,6 +324,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     ? InlineLoadingMoreRecentThreadIndicator
     : InlineLoadingMoreRecentIndicator;
   const {
+    allowSendBeforeAttachmentsUpload,
     animateLayout = true,
     attachmentPickerStore,
     additionalFlatListProps,
@@ -1391,7 +1396,10 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           <AutoCompleteSuggestionList />
         </PortalWhileClosingView>
       </Animated.View>
-      <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
+      <NotificationList
+        bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined}
+        filter={allowSendBeforeAttachmentsUpload ? excludeCanceledUploadNotifications : undefined}
+      />
     </View>
   );
 };
@@ -1423,14 +1431,16 @@ export const MessageList = (props: MessageListProps) => {
   const { readEvents } = useOwnCapabilitiesContext();
   const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
     useMessagesContext();
-  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
+  const { allowSendBeforeAttachmentsUpload, messageInputFloating, messageInputHeightStore } =
+    useMessageInputContext();
   const { loadMore, loadMoreRecent, hasMore } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, threadHasMore, thread, threadInstance } =
     useThreadContext();
 
   return (
     <MessageListWithContext
       {...{
+        allowSendBeforeAttachmentsUpload,
         attachmentPickerStore,
         channel,
         channelUnreadStateStore,

package/src/components/Notifications/__tests__/notificationFilters.test.ts

@@ -0,0 +1,50 @@
+import type { Notification } from 'stream-chat';
+
+import { excludeCanceledUploadNotifications } from '../notificationFilters';
+
+const buildNotification = (overrides: Partial<Notification> = {}): Notification =>
+  ({
+    createdAt: 0,
+    id: 'n1',
+    message: 'Error uploading attachment',
+    origin: { emitter: 'AttachmentManager' },
+    type: 'api:attachment:upload:failed',
+    ...overrides,
+  }) as Notification;
+
+const canceledError = (name: 'AbortError' | 'CanceledError') => {
+  const error = new Error('canceled');
+  error.name = name;
+  return error;
+};
+
+// A filter returns `true` to KEEP a notification, `false` to hide it.
+describe('excludeCanceledUploadNotifications', () => {
+  it.each(['AbortError', 'CanceledError'] as const)(
+    'hides an upload-failed notification aborted with %s',
+    (name) => {
+      const notification = buildNotification({ originalError: canceledError(name) });
+
+      expect(excludeCanceledUploadNotifications(notification)).toBe(false);
+    },
+  );
+
+  it('keeps a genuine upload failure', () => {
+    const notification = buildNotification({ originalError: new Error('Network Error') });
+
+    expect(excludeCanceledUploadNotifications(notification)).toBe(true);
+  });
+
+  it('keeps an upload-failed notification with no original error', () => {
+    expect(excludeCanceledUploadNotifications(buildNotification())).toBe(true);
+  });
+
+  it('keeps a cancellation error reported on a different notification type', () => {
+    const notification = buildNotification({
+      originalError: canceledError('CanceledError'),
+      type: 'api:message:send:failed',
+    });
+
+    expect(excludeCanceledUploadNotifications(notification)).toBe(true);
+  });
+});

package/src/components/Notifications/index.ts

@@ -2,4 +2,5 @@ export * from './Notification';
 export * from './NotificationList';
 export * from './NotificationTargetContext';
 export * from './hooks';
+export * from './notificationFilters';
 export * from './notificationTarget';

package/src/components/Notifications/notificationFilters.ts

@@ -0,0 +1,26 @@
+import type { Notification } from 'stream-chat';
+
+import type { NotificationListFilter } from './NotificationList';
+
+const ATTACHMENT_UPLOAD_FAILED_TYPE = 'api:attachment:upload:failed';
+
+/**
+ * A cancelled upload surfaces as an `api:attachment:upload:failed` notification
+ * whose original error is an `AbortError` (fetch) or `CanceledError` (axios).
+ * This is what happens when the user removes an attachment before its upload
+ * has finished - the inflight request is aborted, not genuinely failed.
+ */
+const isCanceledAttachmentUpload = (notification: Notification) =>
+  notification.type === ATTACHMENT_UPLOAD_FAILED_TYPE &&
+  (notification.originalError?.name === 'CanceledError' ||
+    notification.originalError?.name === 'AbortError');
+
+/**
+ * Notification list filter that keeps every notification except the spurious
+ * "upload failed" one produced when a user removes an attachment mid-upload
+ * (a filter returns `true` to keep a notification). Genuine upload failures
+ * (network, server) are kept because their error is neither aborted nor
+ * cancelled.
+ */
+export const excludeCanceledUploadNotifications: NotificationListFilter = (notification) =>
+  !isCanceledAttachmentUpload(notification);