@planningcenter/chat-react-native 4.4.1-qa-staging.17 → 4.4.1-qa-staging.18

package/src/screens/conversation_filters_screen.tsx

@@ -1,11 +1,12 @@
-import { useHeaderHeight } from '@react-navigation/elements'
+import { HeaderBackButton, useHeaderHeight } from '@react-navigation/elements'
 import * as ReactNavigationNative from '@react-navigation/native'
-import { RouteProp, useRoute } from '@react-navigation/native'
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React, { useCallback } from 'react'
 import { LayoutChangeEvent, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { useTheme } from '../hooks'
 import { useFilterDropdownEnabled } from '../hooks/use_filter_dropdown_enabled'
 import { ConversationFilters } from './conversation_filters/components/conversation_filters'
 import {
@@ -87,17 +88,19 @@ export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps
   return (
     <FilterProvider>
       <FormSheet.Root contentStyle={styles.contentContainer} showAndroidSheetGrabber={false}>
-        <FormSheetHeaderWithContext />
+        <ConversationFiltersHeader />
         <Filters />
       </FormSheet.Root>
     </FilterProvider>
   )
 }
 
-const FormSheetHeaderWithContext = () => {
+export const ConversationFiltersHeader = () => {
   const { resetFilter, applyFilters, setFormSheetHeaderHeight } = useFilterContext()
+  const navigation = useNavigation()
   const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
   const filterDropdownEnabled = useFilterDropdownEnabled()
+  const { colors } = useTheme()
   const styles = useStyles()
 
   const handleFormSheetHeaderLayout = useCallback(
@@ -110,6 +113,15 @@ const FormSheetHeaderWithContext = () => {
   return (
     <View onLayout={handleFormSheetHeaderLayout}>
       <FormSheet.Header style={styles.header}>
+        {Platform.OS === 'android' && (
+          <HeaderBackButton
+            displayMode="minimal"
+            accessibilityLabel="Back"
+            tintColor={colors.iconColorDefaultPrimary}
+            onPress={navigation.goBack}
+            style={styles.backButton}
+          />
+        )}
         <FormSheet.HeaderTitle>
           {filterDropdownEnabled ? 'More filters' : 'Filters'}
         </FormSheet.HeaderTitle>
@@ -145,5 +157,9 @@ const useStyles = () => {
       // separator the way the non-scrolling reaction sheet does.
       borderBottomWidth: 0,
     },
+    backButton: {
+      marginLeft: -3,
+      marginRight: 8,
+    },
   })
 }

package/src/screens/conversations/__tests__/conversations_screen.test.tsx

@@ -2,6 +2,14 @@ import { QueryClientProvider } from '@tanstack/react-query'
 import { render } from '@testing-library/react-native'
 import React, { Suspense } from 'react'
 import { buildTestQueryClient } from '../../../__utils__/query_client'
+import {
+  AudioAdapter,
+  ChatAdapters,
+  ClipboardAdapter,
+  ImagePickerAdapter,
+  MenuAdapter,
+  VideoAdapter,
+} from '../../../utils/native_adapters'
 import { ConversationsScreen } from '../conversations_screen'
 
 const mockGet = jest.fn()
@@ -28,6 +36,26 @@ jest.mock('../components/search_list_header_component', () => {
   const { Text } = require('react-native')
   return { SearchListHeaderComponent: () => <Text>Search header</Text> }
 })
+jest.mock('../components/filter_dropdown_list_header_component', () => {
+  const { Text } = require('react-native')
+  return { FilterDropdownListHeaderComponent: () => <Text>Filter dropdown header</Text> }
+})
+
+const configureAdapters = ({ menu }: { menu: boolean }) => {
+  ChatAdapters.configure({
+    clipboard: new ClipboardAdapter({
+      getStringAsync: async () => '',
+      setStringAsync: async () => {},
+    }),
+    audio: new AudioAdapter({ useAudio: () => ({}) as any }),
+    video: new VideoAdapter({ Player: (() => null) as any }),
+    imagePicker: new ImagePickerAdapter({
+      openCameraAsync: async () => ({ canceled: true, assets: null }),
+      openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
+    }),
+    ...(menu ? { menu: new MenuAdapter({ View: () => null }) } : {}),
+  })
+}
 
 const renderWithFeatures = (enabledFeatures: string[]) => {
   mockGet.mockResolvedValue({
@@ -51,6 +79,10 @@ const renderWithFeatures = (enabledFeatures: string[]) => {
 }
 
 describe('ConversationsScreen header gating', () => {
+  beforeEach(() => {
+    configureAdapters({ menu: true })
+  })
+
   it('shows the search header with only the QA flag on', async () => {
     const view = renderWithFeatures(['QA_MOBILE_search'])
 
@@ -63,6 +95,26 @@ describe('ConversationsScreen header gating', () => {
     expect(await view.findByText('Search header')).toBeTruthy()
   })
 
+  it('shows the filter dropdown header over the search header when its flag is on', async () => {
+    const view = renderWithFeatures(['QA_MOBILE_filter_dropdown', 'ROLLOUT_MOBILE_search'])
+
+    expect(await view.findByText('Filter dropdown header')).toBeTruthy()
+  })
+
+  it('shows the filter dropdown header with only its rollout flag on', async () => {
+    const view = renderWithFeatures(['ROLLOUT_MOBILE_filter_dropdown'])
+
+    expect(await view.findByText('Filter dropdown header')).toBeTruthy()
+  })
+
+  it('falls back to the search header when the host has no menu adapter', async () => {
+    configureAdapters({ menu: false })
+
+    const view = renderWithFeatures(['QA_MOBILE_filter_dropdown', 'ROLLOUT_MOBILE_search'])
+
+    expect(await view.findByText('Search header')).toBeTruthy()
+  })
+
   it('shows the default header with neither flag on', async () => {
     const view = renderWithFeatures(['ROLLOUT_WEB_search'])
 

package/src/screens/conversations/components/__tests__/filter_dropdown_list_header_component.test.tsx

@@ -0,0 +1,248 @@
+import { fireEvent, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { Pressable, Text } from 'react-native'
+import {
+  AudioAdapter,
+  ChatAdapters,
+  ClipboardAdapter,
+  ImagePickerAdapter,
+  MenuAction,
+  MenuAdapter,
+  MenuViewProps,
+  VideoAdapter,
+} from '../../../../utils/native_adapters'
+import { FilterDropdownListHeaderComponent } from '../filter_dropdown_list_header_component'
+
+const mockNavigate = jest.fn()
+const mockSetParams = jest.fn()
+const mockRouteParams: Record<string, unknown> = {}
+const mockCanDisplayGroups = jest.fn()
+const mockSearchEnabled = jest.fn()
+const mockCanBrowseArchived = jest.fn()
+const mockGroupsByGraphId: Record<string, { name: string }> = {}
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: mockSetParams, navigate: mockNavigate }),
+  useRoute: () => ({ params: mockRouteParams }),
+}))
+
+jest.mock('../../../../hooks/use_api', () => ({
+  useApiGet: ({ url }: { url: string }, { enabled }: { enabled: boolean }) => ({
+    data: enabled ? mockGroupsByGraphId[url.replace('/me/groups/', '')] : undefined,
+  }),
+}))
+jest.mock('../../../../hooks/use_groups', () => ({
+  useCanDisplayGroups: (args: { source_type: string }) => mockCanDisplayGroups(args),
+}))
+jest.mock('../../../../hooks/use_direct_messages_eligible', () => ({
+  useDirectMessagesEligible: () => true,
+}))
+jest.mock('../../../../hooks/use_has_direct_messages', () => ({
+  useHasDirectMessages: () => true,
+}))
+jest.mock('../../../../hooks/use_can_browse_archived_conversations', () => ({
+  useCanBrowseArchivedConversations: () => mockCanBrowseArchived(),
+}))
+jest.mock('../../../../hooks/use_chat_permissions', () => ({
+  useCanCreateConversations: () => true,
+}))
+jest.mock('../../../../hooks/use_new_conversation_entry', () => ({
+  useNewConversationEntry: () => 'select_type',
+}))
+jest.mock('../../../../hooks/use_current_person', () => ({
+  useCurrentPersonCache: () => ({ update: jest.fn() }),
+}))
+jest.mock('../../../../hooks/use_conversations_actions', () => ({
+  useMarkAllRead: () => ({ markAllRead: jest.fn(), isPending: false }),
+}))
+jest.mock('../../../../hooks/use_new_conversation_from_filter', () => ({
+  useNewConversationFromFilter: () => undefined,
+}))
+jest.mock('../../../../hooks/use_search_enabled', () => ({
+  useSearchEnabled: () => mockSearchEnabled(),
+}))
+
+const FakeMenuView = ({ actions, onPressAction, children }: MenuViewProps) => {
+  const flatten = (items: MenuAction[]): MenuAction[] =>
+    items.flatMap(item => (item.displayInline && item.subactions ? item.subactions : [item]))
+
+  return (
+    <>
+      {children}
+      {flatten(actions).map(action => (
+        <Pressable
+          key={action.id}
+          accessibilityRole="menuitem"
+          accessibilityLabel={action.title}
+          accessibilityState={{ selected: action.state === 'on' }}
+          onPress={() => onPressAction?.({ nativeEvent: { event: action.id ?? action.title } })}
+        >
+          <Text>{action.title}</Text>
+        </Pressable>
+      ))}
+    </>
+  )
+}
+
+beforeAll(() => {
+  ChatAdapters.configure({
+    clipboard: new ClipboardAdapter({
+      getStringAsync: async () => '',
+      setStringAsync: async () => {},
+    }),
+    audio: new AudioAdapter({ useAudio: () => ({}) as any }),
+    video: new VideoAdapter({ Player: (() => null) as any }),
+    imagePicker: new ImagePickerAdapter({
+      openCameraAsync: async () => ({ canceled: true, assets: null }),
+      openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
+    }),
+    menu: new MenuAdapter({ View: FakeMenuView }),
+  })
+})
+
+const setCapabilities = ({ groups, teams }: { groups: boolean; teams: boolean }) => {
+  mockCanDisplayGroups.mockImplementation(({ source_type }: { source_type: string }) =>
+    source_type === 'Group' ? groups : teams
+  )
+}
+
+const setRouteParams = (params: Record<string, unknown>) => {
+  Object.keys(mockRouteParams).forEach(key => delete mockRouteParams[key])
+  Object.assign(mockRouteParams, params)
+}
+
+const menuItemNames = () =>
+  screen.getAllByRole('menuitem').map(item => item.props.accessibilityLabel)
+
+describe('FilterDropdownListHeaderComponent', () => {
+  beforeEach(() => {
+    mockNavigate.mockClear()
+    mockSetParams.mockClear()
+    mockSearchEnabled.mockReturnValue(true)
+    mockCanBrowseArchived.mockReturnValue(false)
+    setCapabilities({ groups: true, teams: true })
+    setRouteParams({})
+  })
+
+  it('offers every filter the person can use, then More filters', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(menuItemNames()).toEqual(['All', 'Groups', 'Teams', 'DMs', 'More filters'])
+    expect(screen.getByRole('button', { name: 'All conversations' })).toBeTruthy()
+  })
+
+  it('leaves out Teams and More filters when only DMs are filterable', () => {
+    setCapabilities({ groups: false, teams: false })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(menuItemNames()).toEqual(['All', 'DMs'])
+  })
+
+  it('selecting Groups filters to group conversations', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Groups' }))
+
+    expect(mockSetParams).toHaveBeenCalledWith(
+      expect.objectContaining({ group_source_app_name: 'Groups', show_direct_messages: undefined })
+    )
+  })
+
+  it('labels the trigger with the active filter and checks it', () => {
+    setRouteParams({ group_source_app_name: 'Services' })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByRole('button', { name: 'Teams' })).toBeTruthy()
+    expect(screen.getByRole('menuitem', { name: 'Teams' }).props.accessibilityState.selected).toBe(
+      true
+    )
+  })
+
+  it("labels the trigger with the group's name when filtered to one group from More filters", () => {
+    mockGroupsByGraphId['Group/1'] = { name: 'Youth Group' }
+    setRouteParams({ chat_group_graph_id: 'Group/1' })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByRole('button', { name: 'Youth Group' })).toBeTruthy()
+  })
+
+  it('falls back to the route title while the group is still loading', () => {
+    delete mockGroupsByGraphId['Group/2']
+    setRouteParams({ chat_group_graph_id: 'Group/2', title: 'Youth Group' })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByRole('button', { name: 'Youth Group' })).toBeTruthy()
+  })
+
+  it('offers More filters when archived conversations are the only extra filter', () => {
+    setCapabilities({ groups: false, teams: false })
+    mockCanBrowseArchived.mockReturnValue(true)
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(menuItemNames()).toEqual(['All', 'DMs', 'More filters'])
+  })
+
+  it('labels the archived list and carries it into More filters', () => {
+    setRouteParams({ show_archived: true })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByRole('button', { name: 'Archived' })).toBeTruthy()
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'More filters' }))
+
+    expect(mockNavigate).toHaveBeenCalledWith(
+      'ConversationFilters',
+      expect.objectContaining({ show_archived: true })
+    )
+  })
+
+  it('leaves the archived list when another filter is picked', () => {
+    setRouteParams({ show_archived: true })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Groups' }))
+
+    expect(mockSetParams).toHaveBeenCalledWith(
+      expect.objectContaining({ group_source_app_name: 'Groups', show_archived: undefined })
+    )
+  })
+
+  it('More filters opens the filters sheet', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'More filters' }))
+
+    expect(mockNavigate).toHaveBeenCalledWith('ConversationFilters', expect.any(Object))
+  })
+
+  it('shows the search button only when search is enabled', () => {
+    mockSearchEnabled.mockReturnValue(false)
+    const view = render(<FilterDropdownListHeaderComponent />)
+
+    expect(view.queryByTestId('conversations-search-button')).toBeNull()
+
+    mockSearchEnabled.mockReturnValue(true)
+    view.rerender(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(view.getByTestId('conversations-search-button'))
+
+    expect(mockNavigate).toHaveBeenCalledWith('Search')
+  })
+
+  it('renders the search button after the other actions', () => {
+    const view = render(<FilterDropdownListHeaderComponent />)
+
+    const buttons = view.getAllByRole('button').map(button => button.props.accessibilityLabel)
+
+    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('Chat settings'))
+    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('New conversation'))
+  })
+})

package/src/screens/conversations/components/__tests__/list_header_component.test.tsx

@@ -3,13 +3,12 @@ import React from 'react'
 import { ListHeaderComponent } from '../list_header_component'
 
 const mockSetParams = jest.fn()
+let mockParams: Record<string, unknown> = {}
 
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ setParams: mockSetParams, navigate: jest.fn() }),
-  useRoute: () => ({
-    params: { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' },
-  }),
+  useRoute: () => ({ params: mockParams }),
 }))
 
 jest.mock('../../../../hooks/use_groups', () => ({
@@ -45,10 +44,14 @@ const clearedFilter = {
   chat_group_graph_id: undefined,
   group_source_app_name: undefined,
   show_direct_messages: undefined,
+  show_archived: undefined,
 }
 
 describe('ListHeaderComponent filter toggles', () => {
-  beforeEach(() => mockSetParams.mockClear())
+  beforeEach(() => {
+    mockSetParams.mockClear()
+    mockParams = { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' }
+  })
 
   it.each([
     ['Show all conversations', clearedFilter],
@@ -64,3 +67,17 @@ describe('ListHeaderComponent filter toggles', () => {
     expect(mockSetParams.mock.calls[0][0]).toStrictEqual(expected)
   })
 })
+
+describe('ListHeaderComponent mark all read', () => {
+  it('shows Mark all read on the active list', () => {
+    mockParams = {}
+
+    expect(render(<ListHeaderComponent />).queryByText('Mark all read')).not.toBeNull()
+  })
+
+  it('hides Mark all read on the archived list', () => {
+    mockParams = { show_archived: true }
+
+    expect(render(<ListHeaderComponent />).queryByText('Mark all read')).toBeNull()
+  })
+})