stream-chat-react-native-core 9.4.0-beta.9 → 9.4.1-beta.1

package/src/components/ChannelDetails/components/__tests__/navigation-section/PinnedMessageList.test.tsx

@@ -0,0 +1,324 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { StateStore } from 'stream-chat';
+import type { MessageResponse, SearchSourceState } from 'stream-chat';
+
+import {
+  ChannelDetailsContextProvider,
+  type ChannelDetailsContextValue,
+} from '../../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ThemeProvider } from '../../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../../../contexts/translationContext/TranslationContext';
+import { generateMessage } from '../../../../../mock-builders/generator/message';
+import type { PinnedMessageItemProps } from '../../navigation-section/PinnedMessageItem';
+import { PinnedMessageList } from '../../navigation-section/PinnedMessageList';
+
+const mockRowProbe: PinnedMessageItemProps[] = [];
+
+type FakeSearchSource = {
+  search: jest.Mock;
+  state: StateStore<
+    Pick<
+      SearchSourceState<MessageResponse>,
+      'hasNext' | 'isLoading' | 'items' | 'lastQueryError' | 'searchQuery'
+    >
+  >;
+};
+
+const mockChannel = { cid: 'messaging:1' };
+let mockCurrentSearchSource: FakeSearchSource;
+const mockProviderProbe: { channel: unknown }[] = [];
+const mockNotificationTargetProbe: { hostId?: string; panel?: string }[] = [];
+const mockAddNotification = jest.fn();
+
+jest.mock('../../../../Notifications/hooks/useNotificationApi', () => ({
+  useNotificationApi: () => ({ addNotification: mockAddNotification }),
+}));
+
+jest.mock('../../../../Notifications/NotificationTargetContext', () => ({
+  NotificationTargetProvider: ({
+    children,
+    hostId,
+    panel,
+  }: {
+    children: React.ReactNode;
+    hostId?: string;
+    panel?: string;
+  }) => {
+    mockNotificationTargetProbe.push({ hostId, panel });
+    return children;
+  },
+}));
+
+jest.mock('../../../../Notifications/NotificationList', () => {
+  const ReactLib = require('react');
+  const { View } = require('react-native');
+  return {
+    NotificationList: () => ReactLib.createElement(View, { testID: 'notification-list' }),
+  };
+});
+
+jest.mock(
+  '../../../../../contexts/channelPinnedMessageListContext/ChannelPinnedMessageListContext',
+  () => ({
+    ChannelPinnedMessageListProvider: ({
+      channel: providedChannel,
+      children,
+    }: {
+      channel: unknown;
+      children: React.ReactNode;
+    }) => {
+      mockProviderProbe.push({ channel: providedChannel });
+      return children;
+    },
+    useChannelPinnedMessageListContext: () => ({
+      channel: mockChannel,
+      searchSource: mockCurrentSearchSource,
+    }),
+  }),
+);
+
+jest.mock('../../navigation-section/PinnedMessageItem', () => {
+  const ReactLib = require('react');
+  const { Text } = require('react-native');
+  return {
+    PinnedMessageItem: (props: PinnedMessageItemProps) => {
+      mockRowProbe.push(props);
+      return ReactLib.createElement(
+        Text,
+        { testID: `pinned-row-${props.message.id}` },
+        props.message.id,
+      );
+    },
+  };
+});
+
+jest.mock('../../../../UIComponents/SearchInput', () => {
+  const ReactLib = require('react');
+  const { Text } = require('react-native');
+  return {
+    SearchInput: ({ onChangeText }: { onChangeText: (t: string) => void }) =>
+      ReactLib.createElement(
+        ReactLib.Fragment,
+        null,
+        ReactLib.createElement(
+          Text,
+          { onPress: () => onChangeText('query'), testID: 'search-change' },
+          'change',
+        ),
+        ReactLib.createElement(
+          Text,
+          { onPress: () => onChangeText(''), testID: 'search-clear' },
+          'clear',
+        ),
+      ),
+  };
+});
+
+const makeSearchSource = (
+  overrides: Partial<{
+    hasNext: boolean;
+    isLoading: boolean;
+    items: MessageResponse[];
+    lastQueryError: Error;
+    searchQuery: string;
+  }> = {},
+): FakeSearchSource => ({
+  search: jest.fn(),
+  state: new StateStore({
+    hasNext: overrides.hasNext ?? false,
+    isLoading: overrides.isLoading ?? false,
+    items: overrides.items,
+    searchQuery: overrides.searchQuery ?? '',
+    ...(overrides.lastQueryError ? { lastQueryError: overrides.lastQueryError } : {}),
+  }),
+});
+
+const tree = (searchSource: FakeSearchSource, props: { additionalFlatListProps?: object } = {}) => {
+  mockCurrentSearchSource = searchSource;
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider
+        value={{
+          t: ((key: string) => key) as never,
+          tDateTimeParser: ((input: unknown) => input) as never,
+          userLanguage: 'en',
+        }}
+      >
+        <ChannelDetailsContextProvider
+          value={{ channel: mockChannel } as unknown as ChannelDetailsContextValue}
+        >
+          <PinnedMessageList additionalFlatListProps={props.additionalFlatListProps as never} />
+        </ChannelDetailsContextProvider>
+      </TranslationProvider>
+    </ThemeProvider>
+  );
+};
+
+describe('PinnedMessageList', () => {
+  beforeEach(() => {
+    mockRowProbe.length = 0;
+    mockProviderProbe.length = 0;
+    mockNotificationTargetProbe.length = 0;
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('wraps its content in the pinned message list provider for the channel', () => {
+    render(tree(makeSearchSource()));
+
+    expect(mockProviderProbe).toHaveLength(1);
+    expect(mockProviderProbe[0].channel).toBe(mockChannel);
+  });
+
+  it('calls search when the component is created', () => {
+    const searchSource = makeSearchSource();
+    render(tree(searchSource));
+
+    expect(searchSource.search).toHaveBeenCalledTimes(1);
+    expect(searchSource.search).toHaveBeenCalledWith();
+  });
+
+  it('wires the search input to the search source callbacks', () => {
+    const searchSource = makeSearchSource({
+      items: [generateMessage({ id: 'm-1' }) as unknown as MessageResponse],
+    });
+    render(tree(searchSource));
+    searchSource.search.mockClear();
+
+    fireEvent.press(screen.getByTestId('search-change'));
+    expect(searchSource.search).toHaveBeenCalledWith('query');
+
+    fireEvent.press(screen.getByTestId('search-clear'));
+    expect(searchSource.search).toHaveBeenCalledWith('');
+  });
+
+  it('renders a row per pinned message and forwards the channel', () => {
+    const messageA = generateMessage({ id: 'm-1' }) as unknown as MessageResponse;
+    const messageB = generateMessage({ id: 'm-2' }) as unknown as MessageResponse;
+
+    render(tree(makeSearchSource({ items: [messageA, messageB] })));
+
+    expect(mockRowProbe).toHaveLength(2);
+    expect(mockRowProbe.map((p) => p.message.id)).toEqual(['m-1', 'm-2']);
+    expect(mockRowProbe[0].channel).toBe(mockChannel);
+    expect(screen.getByTestId('pinned-row-m-1')).toBeTruthy();
+  });
+
+  it('shows the loading skeleton and keeps the search bar on the initial load', () => {
+    render(tree(makeSearchSource({ isLoading: true })));
+    expect(screen.getByTestId('pinned-message-list-loading-skeleton')).toBeTruthy();
+    expect(screen.getByTestId('search-change')).toBeTruthy();
+  });
+
+  it('shows the empty list and hides the search bar when there are no pins and no query', () => {
+    render(tree(makeSearchSource({ isLoading: false, items: [], searchQuery: '' })));
+
+    expect(screen.getByTestId('empty-list')).toBeTruthy();
+    expect(screen.getByText('No pinned messages')).toBeTruthy();
+    expect(screen.getByText('Long-press a message to pin it to the chat')).toBeTruthy();
+    expect(screen.queryByTestId('search-change')).toBeNull();
+  });
+
+  it('shows the empty search result and keeps the search bar when a query returns no results', () => {
+    render(tree(makeSearchSource({ isLoading: false, items: [], searchQuery: 'query' })));
+
+    expect(screen.getByTestId('empty-search-result')).toBeTruthy();
+    expect(screen.getByText('No pinned messages')).toBeTruthy();
+    expect(screen.queryByTestId('empty-list')).toBeNull();
+    expect(screen.getByTestId('search-change')).toBeTruthy();
+  });
+
+  it('renders the loading-more indicator only while loading with existing results', () => {
+    render(
+      tree(
+        makeSearchSource({
+          isLoading: true,
+          items: [generateMessage({ id: 'm-1' }) as unknown as MessageResponse],
+        }),
+      ),
+    );
+    expect(screen.UNSAFE_getByType(require('react-native').ActivityIndicator)).toBeTruthy();
+  });
+
+  it('loads more via the search source when the list end is reached and there is a next page', () => {
+    const searchSource = makeSearchSource({
+      hasNext: true,
+      items: [generateMessage({ id: 'm-1' }) as unknown as MessageResponse],
+    });
+    render(tree(searchSource));
+    searchSource.search.mockClear();
+
+    const list = screen.getByTestId('pinned-message-list');
+    expect(list.props.onEndReachedThreshold).toBe(0.2);
+    list.props.onEndReached();
+    expect(searchSource.search).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not load more when there is no next page', () => {
+    const searchSource = makeSearchSource({
+      hasNext: false,
+      items: [generateMessage({ id: 'm-1' }) as unknown as MessageResponse],
+    });
+    render(tree(searchSource));
+    searchSource.search.mockClear();
+
+    screen.getByTestId('pinned-message-list').props.onEndReached();
+    expect(searchSource.search).not.toHaveBeenCalled();
+  });
+
+  it('forwards additionalFlatListProps to the underlying list', () => {
+    render(
+      tree(
+        makeSearchSource({ items: [generateMessage({ id: 'm-1' }) as unknown as MessageResponse] }),
+        {
+          additionalFlatListProps: { bounces: false, testID: 'custom-list' },
+        },
+      ),
+    );
+
+    const list = screen.getByTestId('custom-list');
+    expect(list.props.bounces).toBe(false);
+    expect(screen.queryByTestId('pinned-message-list')).toBeNull();
+  });
+
+  it('targets the channel-details panel with a channel-scoped notification host', () => {
+    render(tree(makeSearchSource()));
+
+    expect(mockNotificationTargetProbe).toHaveLength(1);
+    expect(mockNotificationTargetProbe[0]).toEqual({
+      hostId: 'pinned-message-list:messaging:1',
+      panel: 'channel-details',
+    });
+  });
+
+  it('renders the notification list host', () => {
+    render(tree(makeSearchSource()));
+
+    expect(screen.getByTestId('notification-list')).toBeTruthy();
+  });
+
+  it('adds an error notification when the search source reports a query error', () => {
+    const lastQueryError = new Error('boom');
+    render(tree(makeSearchSource({ lastQueryError })));
+
+    expect(mockAddNotification).toHaveBeenCalledTimes(1);
+    expect(mockAddNotification).toHaveBeenCalledWith({
+      message: 'Failed to load pinned messages',
+      options: {
+        originalError: lastQueryError,
+        severity: 'error',
+        type: 'api:channel:query-pinned-messages:failed',
+      },
+      origin: { context: { channel: mockChannel }, emitter: 'ChannelPinnedMessageList' },
+    });
+  });
+
+  it('does not add a notification when there is no query error', () => {
+    render(tree(makeSearchSource()));
+
+    expect(mockAddNotification).not.toHaveBeenCalled();
+  });
+});

package/src/components/ChannelDetails/components/index.ts

@@ -3,9 +3,12 @@ export * from './ChannelDetailsActionItem';
 export * from './ChannelDetailsMemberSection';
 export * from './ChannelDetailsNavigationSection';
 export * from './ChannelDetailsProfile';
+export * from './ChannelDetailsEditButton';
 export * from './ChannelDetailsNavHeader';
 export * from './ChannelEditDetails';
 export * from './ChannelEditDetailsModal';
 export * from './ChannelEditImageSheet';
 export * from './ChannelEditName';
+export * from './ChannelDetailsEditButton';
 export * from './members';
+export * from './navigation-section';

package/src/components/ChannelDetails/components/members/ChannelMemberItem.tsx

@@ -129,7 +129,12 @@ export const ChannelMemberItem = ({
         onPress={() => onPress(member)}
         style={({ pressed }) => [
           isLarge ? styles.containerLarge : styles.container,
-          pressed ? { backgroundColor: semantics.backgroundUtilityPressed } : null,
+          pressed
+            ? {
+                backgroundColor: semantics.backgroundUtilityPressed,
+                borderRadius: primitives.radiusLg,
+              }
+            : null,
           containerOverride,
         ]}
         testID={testID}

package/src/components/ChannelDetails/components/modal/Modal.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
-import { Modal, StyleSheet, View } from 'react-native';
+import { Modal } from 'react-native';
+
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 
@@ -8,49 +10,60 @@ type ChannelDetailsModalProps = {
   children: React.ReactNode;
   onClose: () => void;
   visible: boolean;
+  presentationStyle?: 'pageSheet' | 'formSheet' | 'fullScreen';
 };
 
 /**
  * @experimental This component is experimental and is subject to change.
  */
-export const ChannelDetailsModal = ({ children, onClose, visible }: ChannelDetailsModalProps) => {
+export const ChannelDetailsModal = ({
+  children,
+  onClose,
+  visible,
+  presentationStyle = 'pageSheet',
+}: ChannelDetailsModalProps) => {
   const {
     theme: {
       channelDetails: {
-        modal: { body: bodyOverride, root: rootOverride },
+        modal: { body: bodyOverride },
       },
-      semantics,
     },
   } = useTheme();
-  const rootStyle = useMemo(
-    () =>
-      StyleSheet.flatten([
-        styles.root,
-        { backgroundColor: semantics.backgroundCoreElevation1 },
-        rootOverride,
-      ]),
-    [rootOverride, semantics.backgroundCoreElevation1],
-  );
+  const styles = useStyles();
+  const { top } = useSafeAreaInsets();
 
   return (
     <Modal
       animationType='slide'
       onRequestClose={onClose}
-      presentationStyle='pageSheet'
+      presentationStyle={presentationStyle}
       visible={visible}
     >
-      <GestureHandlerRootView style={rootStyle}>
-        <View style={[styles.body, bodyOverride]}>{children}</View>
+      <GestureHandlerRootView
+        style={[
+          styles.body,
+          presentationStyle === 'fullScreen' ? { paddingTop: top } : {},
+          bodyOverride,
+        ]}
+      >
+        {children}
       </GestureHandlerRootView>
     </Modal>
   );
 };
 
-const styles = StyleSheet.create({
-  body: {
-    flex: 1,
-  },
-  root: {
-    flex: 1,
-  },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () => ({
+      body: {
+        flex: 1,
+        backgroundColor: semantics.backgroundCoreElevation1,
+      },
+    }),
+    [semantics],
+  );
+};

package/src/components/ChannelDetails/components/modal/ModalHeader.tsx

@@ -2,11 +2,12 @@ import React, { useMemo } from 'react';
 import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { NewClose } from '../../../../icons/xmark';
+import { Cross } from '../../../../icons/xmark-1';
 import { primitives } from '../../../../theme';
-import { Button } from '../../../ui/Button/Button';
+import { Button, ButtonProps } from '../../../ui/Button/Button';
 
 type ModalHeaderProps = {
+  additionalCloseButtonProps?: Partial<ButtonProps>;
   onClose: () => void;
   title: string;
   rightAction?: React.ReactNode;
@@ -15,7 +16,12 @@ type ModalHeaderProps = {
 /**
  * @experimental This component is experimental and is subject to change.
  */
-export const ModalHeader = ({ onClose, rightAction, title }: ModalHeaderProps) => {
+export const ModalHeader = ({
+  onClose,
+  rightAction,
+  title,
+  additionalCloseButtonProps,
+}: ModalHeaderProps) => {
   const {
     theme: {
       channelDetails: {
@@ -32,11 +38,12 @@ export const ModalHeader = ({ onClose, rightAction, title }: ModalHeaderProps) =
         <Button
           accessibilityLabelKey='a11y/Close'
           iconOnly
-          LeadingIcon={NewClose}
+          LeadingIcon={Cross}
           onPress={onClose}
           size='md'
           type='outline'
           variant='secondary'
+          {...additionalCloseButtonProps}
         />
       </View>
       <View style={styles.center}>

package/src/components/ChannelDetails/components/navigation-section/FileAttachmentItem.tsx

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { type Attachment, type MessageResponse } from 'stream-chat';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../../theme';
+import { FilePreview } from '../../../Attachment/FilePreview';
+import { openUrlSafely } from '../../../Attachment/utils/openUrlSafely';
+
+/**
+ * The shape passed to `FileAttachmentItem`'s `onPress` callback, identifying the rendered
+ * attachment and the message it belongs to.
+ *
+ * @experimental This type is experimental and is subject to change.
+ */
+export type FileAttachmentItemPressParams = {
+  attachment: Attachment;
+  message: MessageResponse;
+};
+
+export type FileAttachmentItemProps = {
+  /** The file/audio attachment to render. */
+  attachment: Attachment;
+  /** The message the attachment belongs to. */
+  message: MessageResponse;
+  /**
+   * Fired with the pressed attachment and its message. When provided, this overrides the default
+   * behavior of opening the attachment's `asset_url`.
+   */
+  onPress?: (params: FileAttachmentItemPressParams) => void;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const FileAttachmentItem = (props: FileAttachmentItemProps) => {
+  const { attachment, message, onPress } = props;
+  const {
+    theme: {
+      channelDetails: { fileAttachmentItem },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <View
+      style={[styles.container, fileAttachmentItem.container]}
+      testID={`file-attachment-item-${message.id}`}
+    >
+      <Pressable
+        accessibilityRole='button'
+        onPress={() =>
+          onPress ? onPress({ attachment, message }) : openUrlSafely(attachment.asset_url)
+        }
+        testID={`file-attachment-row-${message.id}`}
+      >
+        <FilePreview attachment={attachment} styles={styles.filePreview} />
+      </Pressable>
+    </View>
+  );
+};
+
+FileAttachmentItem.displayName = 'FileAttachmentItem{fileAttachmentItem}';
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () => ({
+      ...StyleSheet.create({
+        container: {
+          gap: primitives.spacingXxs,
+          paddingHorizontal: primitives.spacingSm,
+          paddingVertical: primitives.spacingXs,
+        },
+      }),
+      // FilePreview's default container has a hardcoded width; stretch it to the row width.
+      filePreview: StyleSheet.create({
+        container: { width: '100%' },
+        title: {
+          fontWeight: primitives.typographyFontWeightRegular,
+          fontSize: primitives.typographyFontSizeMd,
+        },
+        size: { color: semantics.textTertiary },
+      }),
+    }),
+    [semantics],
+  );
+};