Add notification for channel delete, add onSucess for channel actions

Author: szuperaz

package/src/components/ChannelDetailsScreen/ChannelDetailsScreen.tsx

@@ -12,6 +12,8 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useIsDirectChat } from '../../hooks/useIsDirectChat';
 import { primitives } from '../../theme';
+import { NotificationList } from '../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
 export type ChannelDetailsScreenProps = {
   channel: Channel;
@@ -64,6 +66,7 @@ export const ChannelDetailsScreenContent = () => {
         {isDirect ? null : <ChannelDetailsMemberSection />}
         <ChannelDetailsActionsSection />
       </ScrollView>
+      <NotificationList />
     </View>
   );
 };
@@ -82,10 +85,17 @@ export const ChannelDetailsScreen = ({
     [channel, onAddMembersPress, onBack, onChannelDismiss, onViewAllMembersPress],
   );
   const Content = ChannelDetailsScreenContentOverride ?? ChannelDetailsScreenContent;
+  const notificationHostId = channel?.cid ? `channel-details:${channel.cid}` : undefined;
 
   return (
     <ChannelDetailsContextProvider value={value}>
-      <Content />
+      {notificationHostId ? (
+        <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+          <Content />
+        </NotificationTargetProvider>
+      ) : (
+        <Content />
+      )}
     </ChannelDetailsContextProvider>
   );
 };

package/src/components/ChannelDetailsScreen/__tests__/ChannelDetailsMemberSection.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Pressable, Text } from 'react-native';
 
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import { NotificationManager } from 'stream-chat';
 import type { Channel, ChannelMemberResponse, UserResponse } from 'stream-chat';
 
 import { AccessibilityProvider } from '../../../contexts/accessibilityContext/AccessibilityContext';
@@ -95,7 +96,9 @@ const renderSection = ({
             userLanguage: 'en',
           }}
         >
-          <ChatContext.Provider value={{ client: { userID: 'me' } } as never}>
+          <ChatContext.Provider
+            value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+          >
             <ChannelDetailsContextProvider
               value={{
                 channel: applyCapabilities(channel, capabilities),

package/src/components/ChannelDetailsScreen/__tests__/ChannelDetailsScreen.test.tsx

@@ -1,18 +1,39 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Text } from 'react-native';
 
 import { render, screen } from '@testing-library/react-native';
+import { NotificationManager } from 'stream-chat';
 import type { Channel } from 'stream-chat';
 
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChatContext } from '../../../contexts/chatContext/ChatContext';
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useOwnCapabilitiesContext } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import * as useIsDirectChatModule from '../../../hooks/useIsDirectChat';
 import { ChannelDetailsScreen } from '../ChannelDetailsScreen';
 
+const Providers = ({ children }: PropsWithChildren) => (
+  <ThemeProvider theme={defaultTheme}>
+    <TranslationProvider
+      value={{
+        t: ((key: string) => key) as never,
+        tDateTimeParser: ((input: unknown) => input) as never,
+        userLanguage: 'en',
+      }}
+    >
+      <ChatContext.Provider
+        value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+      >
+        {children}
+      </ChatContext.Provider>
+    </TranslationProvider>
+  </ThemeProvider>
+);
+
 const HeaderProbe = () => <Text testID='probe-header'>HEADER</Text>;
 const ProfileProbe = () => <Text testID='probe-profile'>PROFILE</Text>;
 const NavigationProbe = () => <Text testID='probe-navigation'>NAVIGATION</Text>;
@@ -35,11 +56,11 @@ const channel = {
 
 const renderContent = () =>
   render(
-    <ThemeProvider theme={defaultTheme}>
+    <Providers>
       <WithComponents overrides={SECTION_OVERRIDES}>
         <ChannelDetailsScreen channel={channel} />
       </WithComponents>
-    </ThemeProvider>,
+    </Providers>,
   );
 
 describe('ChannelDetailsScreenContent', () => {
@@ -94,7 +115,7 @@ describe('ChannelDetailsScreen', () => {
       };
 
       render(
-        <ThemeProvider theme={defaultTheme}>
+        <Providers>
           <WithComponents
             overrides={{
               ...SECTION_OVERRIDES,
@@ -107,7 +128,7 @@ describe('ChannelDetailsScreen', () => {
               onChannelDismiss={onChannelDismiss}
             />
           </WithComponents>
-        </ThemeProvider>,
+        </Providers>,
       );
 
       expect(captured).toBeDefined();
@@ -132,7 +153,7 @@ describe('ChannelDetailsScreen', () => {
       };
 
       render(
-        <ThemeProvider theme={defaultTheme}>
+        <Providers>
           <WithComponents
             overrides={{
               ...SECTION_OVERRIDES,
@@ -141,7 +162,7 @@ describe('ChannelDetailsScreen', () => {
           >
             <ChannelDetailsScreen channel={channelWithCapabilities} />
           </WithComponents>
-        </ThemeProvider>,
+        </Providers>,
       );
 
       expect(captured).toBeDefined();
@@ -159,7 +180,7 @@ describe('ChannelDetailsScreen', () => {
     it('renders the override instead of the default content', () => {
       const Override = () => <Text testID='custom-content'>CUSTOM</Text>;
       render(
-        <ThemeProvider theme={defaultTheme}>
+        <Providers>
           <WithComponents
             overrides={{
               ...SECTION_OVERRIDES,
@@ -168,7 +189,7 @@ describe('ChannelDetailsScreen', () => {
           >
             <ChannelDetailsScreen channel={channel} />
           </WithComponents>
-        </ThemeProvider>,
+        </Providers>,
       );
 
       expect(screen.getByTestId('custom-content')).toBeTruthy();
@@ -184,11 +205,11 @@ describe('ChannelDetailsScreen', () => {
       // Note: re-export the default Content via the override map so we can prove it
       // wasn't swapped out — the section probes from SECTION_OVERRIDES should appear.
       render(
-        <ThemeProvider theme={defaultTheme}>
+        <Providers>
           <WithComponents overrides={SECTION_OVERRIDES}>
             <ChannelDetailsScreen channel={channel} />
           </WithComponents>
-        </ThemeProvider>,
+        </Providers>,
       );
       expect(screen.getByTestId('probe-header')).toBeTruthy();
       expect(screen.getByTestId('probe-actions')).toBeTruthy();

package/src/components/ChannelDetailsScreen/components/ChannelDetailsMemberSection.tsx

@@ -9,11 +9,15 @@ import { useComponentsContext } from '../../../contexts/componentsContext/Compon
 import { useOwnCapabilitiesContext } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { getNotificationErrorOptions } from '../../../hooks/useChannelActions';
 import { useStableCallback } from '../../../hooks/useStableCallback';
 import { Checkmark } from '../../../icons/checkmark-1';
 import { UserAdd } from '../../../icons/user-add';
 import { NewClose } from '../../../icons/xmark';
 import { primitives } from '../../../theme';
+import { useNotificationApi } from '../../Notifications/hooks';
+import { NotificationList } from '../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../Notifications/NotificationTargetContext';
 import { Button } from '../../ui/Button/Button';
 import { BottomSheetModal } from '../../UIComponents/BottomSheetModal';
 import { useChannelDetailsMembersPreview } from '../hooks/useChannelDetailsMembersPreview';
@@ -22,8 +26,12 @@ export const ChannelDetailsMemberSection = () => {
   const { channel, onAddMembersPress, onViewAllMembersPress } = useChannelDetailsContext();
   const { client } = useChatContext();
   const { t } = useTranslationContext();
+  const { addNotification } = useNotificationApi();
   const { updateChannelMembers } = useOwnCapabilitiesContext();
   const { height: windowHeight } = useWindowDimensions();
+  const addMembersNotificationHostId = channel?.cid
+    ? `channel-add-members:${channel.cid}`
+    : undefined;
   const {
     theme: {
       channelDetailsScreen: {
@@ -72,12 +80,26 @@ export const ChannelDetailsMemberSection = () => {
   const handleAddMembersConfirm = useStableCallback(async () => {
     if (!addMembersSelection.length || addingMembers) return;
     setAddingMembers(true);
+    const addedCount = addMembersSelection.length;
     try {
       await channel.addMembers(addMembersSelection.map((u) => u.id));
+      addNotification({
+        message: t('{{count}} members added', { count: addedCount }),
+        options: { severity: 'success', type: 'api:channel:add-members:success' },
+        origin: { context: { channel }, emitter: 'ChannelDetailsMemberSection' },
+      });
       setAddMembersVisible(false);
       setAddMembersSelection([]);
-    } catch (err) {
-      console.warn('[ChannelDetailsMemberSection] failed to add members', err);
+    } catch (error) {
+      addNotification({
+        message: t('Failed to add members'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:channel:add-members:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelDetailsMemberSection' },
+      });
     } finally {
       setAddingMembers(false);
     }
@@ -205,59 +227,66 @@ export const ChannelDetailsMemberSection = () => {
         onClose={handleAddMembersClose}
         visible={isAddMembersVisible}
       >
-        <View style={[styles.modalHeader, modalHeaderOverride]}>
-          <View style={styles.modalHeaderSide}>
-            <Button
-              accessibilityLabelKey='a11y/Close'
-              iconOnly
-              LeadingIcon={NewClose}
-              onPress={handleAddMembersClose}
-              size='md'
-              type='outline'
-              variant='secondary'
-            />
-          </View>
-          <View style={styles.modalHeaderCenter}>
-            <Text
-              accessibilityRole='header'
-              numberOfLines={1}
-              style={[
-                styles.modalHeaderTitle,
-                { color: semantics.textPrimary },
-                modalHeaderTitleOverride,
-              ]}
-            >
-              {t('Add Members')}
-            </Text>
-          </View>
-          <View style={[styles.modalHeaderSide, styles.modalHeaderSideRight]}>
-            <Pressable
-              accessibilityLabel={t('a11y/Confirm add members')}
-              accessibilityRole='button'
-              accessibilityState={{ disabled: !confirmEnabled }}
-              disabled={!confirmEnabled}
-              onPress={handleAddMembersConfirm}
-              style={[
-                styles.confirmButton,
-                confirmEnabled
-                  ? { backgroundColor: semantics.accentPrimary }
-                  : {
-                      borderColor: semantics.borderCoreDefault,
-                      borderWidth: 1,
-                    },
-                confirmButtonOverride,
-              ]}
-              testID='channel-details-add-members-confirm-button'
-            >
-              <Checkmark
-                height={20}
-                pathFill={confirmEnabled ? semantics.textOnInverse : semantics.textSecondary}
-                width={20}
-              />
-            </Pressable>
-          </View>
-        </View>
-        <ChannelAddMembers onSelectionChange={handleAddMembersSelectionChange} />
+        {addMembersNotificationHostId ? (
+          <NotificationTargetProvider hostId={addMembersNotificationHostId} panel='channel-details'>
+            <View style={styles.modalBody}>
+              <View style={[styles.modalHeader, modalHeaderOverride]}>
+                <View style={styles.modalHeaderSide}>
+                  <Button
+                    accessibilityLabelKey='a11y/Close'
+                    iconOnly
+                    LeadingIcon={NewClose}
+                    onPress={handleAddMembersClose}
+                    size='md'
+                    type='outline'
+                    variant='secondary'
+                  />
+                </View>
+                <View style={styles.modalHeaderCenter}>
+                  <Text
+                    accessibilityRole='header'
+                    numberOfLines={1}
+                    style={[
+                      styles.modalHeaderTitle,
+                      { color: semantics.textPrimary },
+                      modalHeaderTitleOverride,
+                    ]}
+                  >
+                    {t('Add Members')}
+                  </Text>
+                </View>
+                <View style={[styles.modalHeaderSide, styles.modalHeaderSideRight]}>
+                  <Pressable
+                    accessibilityLabel={t('a11y/Confirm add members')}
+                    accessibilityRole='button'
+                    accessibilityState={{ disabled: !confirmEnabled }}
+                    disabled={!confirmEnabled}
+                    onPress={handleAddMembersConfirm}
+                    style={[
+                      styles.confirmButton,
+                      confirmEnabled
+                        ? { backgroundColor: semantics.accentPrimary }
+                        : {
+                            borderColor: semantics.borderCoreDefault,
+                            borderWidth: 1,
+                          },
+                      confirmButtonOverride,
+                    ]}
+                    testID='channel-details-add-members-confirm-button'
+                  >
+                    <Checkmark
+                      height={20}
+                      pathFill={confirmEnabled ? semantics.textOnInverse : semantics.textSecondary}
+                      width={20}
+                    />
+                  </Pressable>
+                </View>
+              </View>
+              <ChannelAddMembers onSelectionChange={handleAddMembersSelectionChange} />
+              <NotificationList />
+            </View>
+          </NotificationTargetProvider>
+        ) : null}
       </BottomSheetModal>
     </View>
   );
@@ -296,6 +325,9 @@ const useStyles = () => {
         list: {
           paddingBottom: primitives.spacingSm,
         },
+        modalBody: {
+          flex: 1,
+        },
         modalHeader: {
           alignItems: 'center',
           flexDirection: 'row',

package/src/components/ChannelDetailsScreen/hooks/useChannelDetailsActionItems.ts

@@ -16,10 +16,7 @@ export const useChannelDetailsActionItems = (): ChannelActionItem[] => {
         if (item.id === 'leave' || item.id === 'deleteChannel') {
           return {
             ...item,
-            action: async () => {
-              await item.action();
-              onChannelDismiss?.();
-            },
+            action: (options) => item.action({ ...options, onSuccess: onChannelDismiss }),
           };
         }
         return item;

package/src/components/Notifications/notificationTarget.ts

@@ -1,6 +1,12 @@
 import type { Notification } from 'stream-chat';
 
-const NOTIFICATION_TARGET_PANELS = ['channel', 'thread', 'channel-list', 'thread-list'] as const;
+const NOTIFICATION_TARGET_PANELS = [
+  'channel',
+  'thread',
+  'channel-list',
+  'thread-list',
+  'channel-details',
+] as const;
 const NOTIFICATION_TARGET_TAG_PREFIX = 'target:' as const;
 
 /** Built-in SDK surfaces that can host snackbar notifications. */

package/src/contexts/themeContext/utils/theme.ts

@@ -1233,6 +1233,7 @@ export const defaultTheme: Theme = {
       selectionCircleSelected: {},
       userName: {},
       userRow: {},
+      clearSearch: {},
     },
   },
   channelListSkeleton: {