@planningcenter/chat-react-native 4.4.1-qa-1036.2 → 4.4.1-qa-staging.41

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -1,11 +1,10 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StackActions, useNavigation } from '@react-navigation/native'
-import { RefObject, useRef, useState } from 'react'
+import { ReactElement, RefObject, useRef, useState } from 'react'
 import { FlatList, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { Avatar, Badge, Banner, Icon, KeyboardView, Spinner, Text } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
 import { AutoFocusAwareTextInput } from '../../components/display/text_input'
-import { ComponentErrorBoundary } from '../../components/page/component_error_boundary'
 import { useTheme } from '../../hooks'
 import { useDirectMessageAffiliations } from '../../hooks/direct_messages/use_direct_message_affiliations'
 import { useDirectMessageCandidates } from '../../hooks/direct_messages/use_direct_message_candidates'
@@ -92,38 +91,31 @@ export function ConversationSelectDirectMessageRecipientsScreen({
 
   return (
     <KeyboardView>
-      {isError && (
-        <Banner
-          appearance="error"
-          description="There was an issue starting the conversation. Please try again."
-          style={styles.errorBanner}
-        />
-      )}
-      <ToField
-        selectedPeople={selectedPeople}
-        searchTerm={searchTerm}
-        onSearchChange={setSearchTerm}
-        onRemove={removePerson}
-        onClear={() => setSelectedPeople(new Map())}
-        searchInputRef={searchInputRef}
-      />
       <View style={styles.candidateResultsContainer}>
-        <ComponentErrorBoundary
-          key={debouncedTerm}
-          fallback={
-            <Banner
-              appearance="error"
-              description="Couldn't load people right now. Try again."
-              style={styles.errorBanner}
-            />
+        <CandidateResults
+          term={debouncedTerm}
+          selectedPeople={selectedPeople}
+          onSelect={selectPerson}
+          header={
+            <>
+              {isError && (
+                <Banner
+                  appearance="error"
+                  description="There was an issue starting the conversation. Please try again."
+                  style={styles.errorBanner}
+                />
+              )}
+              <ToField
+                selectedPeople={selectedPeople}
+                searchTerm={searchTerm}
+                onSearchChange={setSearchTerm}
+                onRemove={removePerson}
+                onClear={() => setSelectedPeople(new Map())}
+                searchInputRef={searchInputRef}
+              />
+            </>
           }
-        >
-          <CandidateResults
-            term={debouncedTerm}
-            selectedPeople={selectedPeople}
-            onSelect={selectPerson}
-          />
-        </ComponentErrorBoundary>
+        />
       </View>
       <ActionButton
         title={buttonText}
@@ -214,53 +206,57 @@ function CandidateResults({
   term,
   selectedPeople,
   onSelect,
+  header,
 }: {
   term: string
   selectedPeople: Map<string, DirectMessageCandidateResource>
   onSelect: (candidate: DirectMessageCandidateResource) => void
+  header: ReactElement
 }) {
   const styles = useStyles()
   const { data, isFetching } = useDirectMessageCandidates(term)
   const { groups, teams, resultsDescription } = useDirectMessageAffiliations()
 
-  if (term.length < 1) {
-    if (selectedPeople.size > 0) return null
+  const unselectedCandidates = (data?.data ?? []).filter(c => !selectedPeople.has(c.id))
+  const hasTruncated = (data?.meta.totalCount ?? 0) > (data?.data.length ?? 0)
+  const isAtLimit = selectedPeople.size >= MAX_RECIPIENTS
+  const showsResults = term.length >= 1 && !isAtLimit && unselectedCandidates.length > 0
 
-    return (
-      <View style={styles.emptyState}>
-        <Icon name="churchCenter.people" size={40} style={styles.emptyStateIcon} />
-        <Text style={styles.emptyStateTitle}>Search for people to direct message</Text>
-        <Text variant="secondary" style={styles.emptyStateSubtitle}>
-          Start a conversation with people in your groups and teams.
-        </Text>
-      </View>
-    )
-  }
+  const emptyState = (() => {
+    if (showsResults) return null
 
-  const isAtLimit = selectedPeople.size >= MAX_RECIPIENTS
+    if (term.length < 1) {
+      if (selectedPeople.size > 0) return null
 
-  if (isAtLimit) {
-    return (
-      <View style={styles.emptyState}>
-        <Text variant="secondary" style={styles.emptyStateSubtitle}>
-          You can add up to {MAX_RECIPIENTS} people to a direct message.
-        </Text>
-      </View>
-    )
-  }
+      return (
+        <View style={styles.emptyState}>
+          <Icon name="churchCenter.people" size={40} style={styles.emptyStateIcon} />
+          <Text style={styles.emptyStateTitle}>Search for people to direct message</Text>
+          <Text variant="secondary" style={styles.emptyStateSubtitle}>
+            Start a conversation with people in your groups and teams.
+          </Text>
+        </View>
+      )
+    }
 
-  const unselectedCandidates = (data?.data ?? []).filter(c => !selectedPeople.has(c.id))
-  const hasTruncated = (data?.meta.totalCount ?? 0) > (data?.data.length ?? 0)
+    if (isAtLimit) {
+      return (
+        <View style={styles.emptyState}>
+          <Text variant="secondary" style={styles.emptyStateSubtitle}>
+            You can add up to {MAX_RECIPIENTS} people to a direct message.
+          </Text>
+        </View>
+      )
+    }
 
-  if (isFetching && unselectedCandidates.length === 0) {
-    return (
-      <View style={styles.emptyState}>
-        <Spinner />
-      </View>
-    )
-  }
+    if (isFetching) {
+      return (
+        <View style={styles.emptyState}>
+          <Spinner />
+        </View>
+      )
+    }
 
-  if (!isFetching && unselectedCandidates.length === 0) {
     return (
       <View style={styles.emptyState}>
         <Icon name="general.search" size={32} style={styles.emptyStateIcon} />
@@ -270,13 +266,15 @@ function CandidateResults({
         </Text>
       </View>
     )
-  }
+  })()
 
   return (
     <CandidateList
-      candidates={unselectedCandidates}
+      header={header}
+      candidates={showsResults ? unselectedCandidates : []}
       hasTruncated={hasTruncated}
       description={resultsDescription}
+      emptyState={emptyState}
       groups={groups}
       teams={teams}
       onSelect={onSelect}
@@ -309,27 +307,33 @@ function candidateAffiliationNames(
 }
 
 function CandidateList({
+  header,
   candidates,
   hasTruncated,
   description,
+  emptyState,
   groups,
   teams,
   onSelect,
 }: {
+  header: ReactElement
   candidates: DirectMessageCandidateResource[]
   hasTruncated: boolean
   description: string | null
+  emptyState: ReactElement | null
   groups: Map<number, string>
   teams: Map<number, string>
   onSelect: (candidate: DirectMessageCandidateResource) => void
 }) {
   const styles = useStyles()
+  const hasCandidates = candidates.length > 0
   const available = candidates.filter(c => !c.directMessagesDisabled)
   const dmDisabled = candidates.filter(c => c.directMessagesDisabled)
 
   return (
     <FlatList<DirectMessageCandidateResource>
       data={available}
+      contentInsetAdjustmentBehavior="automatic"
       keyboardShouldPersistTaps="handled"
       keyExtractor={item => item.id}
       renderItem={({ item }) => (
@@ -340,7 +344,13 @@ function CandidateList({
           onSelect={() => onSelect(item)}
         />
       )}
-      ListHeaderComponent={<ResultsHeading description={description} />}
+      ListHeaderComponent={
+        <>
+          {header}
+          {hasCandidates && <ResultsHeading description={description} />}
+        </>
+      }
+      ListEmptyComponent={emptyState}
       ListFooterComponent={
         <>
           {dmDisabled.length > 0 && (
@@ -361,7 +371,7 @@ function CandidateList({
               ))}
             </>
           )}
-          {hasTruncated && (
+          {hasCandidates && hasTruncated && (
             <View style={styles.truncatedFooter}>
               <Text variant="secondary" style={styles.truncatedText}>
                 Keep typing to narrow your results.

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -60,6 +60,7 @@ export const ConversationSelectGroupRecipientsScreen = ({
 
   return (
     <SectionList<GroupsGroupResource, GroupsSection>
+      contentInsetAdjustmentBehavior="automatic"
       sections={sections}
       keyExtractor={item => item.id.toString()}
       stickySectionHeadersEnabled={false}

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -32,6 +32,7 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
 
   return (
     <FlatList
+      contentInsetAdjustmentBehavior="automatic"
       data={serviceTypes}
       keyExtractor={item => item.id.toString()}
       contentContainerStyle={styles.contentContainer}

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

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react-native'
 import React from 'react'
-import { Pressable, Text } from 'react-native'
+import { Pressable, StyleSheet, Text } from 'react-native'
 import {
   AudioAdapter,
   ChatAdapters,
@@ -115,6 +115,25 @@ const setRouteParams = (params: Record<string, unknown>) => {
 const menuItemNames = () =>
   screen.getAllByRole('menuitem').map(item => item.props.accessibilityLabel)
 
+const ROW_WIDTH = 360
+const ROW_CONTENT_WIDTH = ROW_WIDTH - 16 * 2
+const HEADING_ROW_GAP = 12
+const WIDEST_LABEL_WIDTH = 150
+
+const layOut = (testID: string, width: number) =>
+  fireEvent(screen.getByTestId(testID, { includeHiddenElements: true }), 'layout', {
+    nativeEvent: { layout: { width } },
+  })
+
+const layOutHeader = ({ actionsWidth }: { actionsWidth: number }) => {
+  layOut('conversations-filter-heading-row', ROW_WIDTH)
+  layOut('conversations-filter-widest-label', WIDEST_LABEL_WIDTH)
+  layOut('conversations-filter-heading-actions', actionsWidth)
+}
+
+const triggerMaxWidth = (): number =>
+  StyleSheet.flatten(screen.getByRole('button', { name: 'All conversations' }).props.style).maxWidth
+
 describe('FilterDropdownListHeaderComponent', () => {
   beforeEach(() => {
     mockNavigate.mockClear()
@@ -286,6 +305,45 @@ describe('FilterDropdownListHeaderComponent', () => {
     )
   })
 
+  it('caps the trigger short of the room beside the actions so a full label never wraps them', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    layOutHeader({ actionsWidth: 120.4 })
+
+    expect(triggerMaxWidth()).toBeGreaterThanOrEqual(WIDEST_LABEL_WIDTH)
+    expect(triggerMaxWidth() + HEADING_ROW_GAP + 120.4).toBeLessThan(ROW_CONTENT_WIDTH)
+  })
+
+  it('holds the cap when the actions remeasure by less than a point', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    layOutHeader({ actionsWidth: 120.4 })
+    const capBefore = triggerMaxWidth()
+
+    layOut('conversations-filter-heading-actions', 120.9)
+
+    expect(triggerMaxWidth()).toBe(capBefore)
+  })
+
+  it('recomputes the cap when the actions grow by a button', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    layOutHeader({ actionsWidth: 120.4 })
+    const capBefore = triggerMaxWidth()
+
+    layOut('conversations-filter-heading-actions', 160)
+
+    expect(triggerMaxWidth()).toBeLessThan(capBefore)
+  })
+
+  it('caps the trigger to the row once All conversations no longer fits beside the actions', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    layOutHeader({ actionsWidth: 200 })
+
+    expect(triggerMaxWidth()).toBe(ROW_CONTENT_WIDTH)
+  })
+
   it('shows the search button only when search is enabled', () => {
     mockSearchEnabled.mockReturnValue(false)
     const view = render(<FilterDropdownListHeaderComponent />)

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

@@ -30,6 +30,8 @@ import { ListHeaderActionButton } from './list_header_action_button'
 
 const ROW_PADDING_HORIZONTAL = 16
 const HEADING_ROW_GAP = 12
+const TRIGGER_CAP_SLACK = 2
+const LAYOUT_JITTER = 1
 const ALL_CONVERSATIONS_LABEL = 'All conversations'
 const ARCHIVED_LABEL = 'Archived'
 
@@ -42,6 +44,9 @@ enum FilterTypes {
   More = 'More',
 }
 
+const holdSubPointJitter = (previous: number | undefined, next: number) =>
+  previous !== undefined && Math.abs(next - previous) < LAYOUT_JITTER ? previous : next
+
 const FILTER_PARAMS: Record<Exclude<FilterTypes, FilterTypes.More>, ConversationFiltersParams> = {
   [FilterTypes.All]: {},
   [FilterTypes.Groups]: { group_source_app_name: 'Groups' },
@@ -217,14 +222,14 @@ export const FilterDropdownListHeaderComponent = () => {
   const [rowWidth, setRowWidth] = useState<number>()
   const [actionsWidth, setActionsWidth] = useState<number>()
   const [widestFixedLabelWidth, setWidestFixedLabelWidth] = useState<number>()
-  const handleRowLayout = useCallback((event: LayoutChangeEvent) => {
-    setRowWidth(event.nativeEvent.layout.width)
+  const handleRowLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+    setRowWidth(previous => holdSubPointJitter(previous, nativeEvent.layout.width))
   }, [])
-  const handleActionsLayout = useCallback((event: LayoutChangeEvent) => {
-    setActionsWidth(event.nativeEvent.layout.width)
+  const handleActionsLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+    setActionsWidth(previous => holdSubPointJitter(previous, nativeEvent.layout.width))
   }, [])
-  const handleWidestFixedLabelLayout = useCallback((event: LayoutChangeEvent) => {
-    setWidestFixedLabelWidth(event.nativeEvent.layout.width)
+  const handleWidestFixedLabelLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+    setWidestFixedLabelWidth(previous => holdSubPointJitter(previous, nativeEvent.layout.width))
   }, [])
   const triggerMaxWidth = useMemo(() => {
     if (rowWidth === undefined) return undefined
@@ -232,7 +237,8 @@ export const FilterDropdownListHeaderComponent = () => {
     const rowContentWidth = rowWidth - ROW_PADDING_HORIZONTAL * 2
     if (actionsWidth === undefined || widestFixedLabelWidth === undefined) return rowContentWidth
 
-    const roomBesideActions = rowContentWidth - actionsWidth - HEADING_ROW_GAP
+    const roomBesideActions =
+      Math.floor(rowContentWidth - actionsWidth - HEADING_ROW_GAP) - TRIGGER_CAP_SLACK
     return roomBesideActions >= widestFixedLabelWidth ? roomBesideActions : rowContentWidth
   }, [rowWidth, actionsWidth, widestFixedLabelWidth])
 
@@ -242,11 +248,16 @@ export const FilterDropdownListHeaderComponent = () => {
         <FilterDropdownTrigger
           label={ALL_CONVERSATIONS_LABEL}
           onLayout={handleWidestFixedLabelLayout}
+          testID="conversations-filter-widest-label"
           accessibilityElementsHidden
           importantForAccessibility="no-hide-descendants"
         />
       </View>
-      <View style={styles.headingRow} onLayout={handleRowLayout}>
+      <View
+        style={styles.headingRow}
+        onLayout={handleRowLayout}
+        testID="conversations-filter-heading-row"
+      >
         <View style={styles.titleContainer}>
           <FilterDropdown
             options={options}
@@ -258,7 +269,11 @@ export const FilterDropdownListHeaderComponent = () => {
             maxWidth={triggerMaxWidth}
           />
         </View>
-        <View style={styles.actionsContainer} onLayout={handleActionsLayout}>
+        <View
+          style={styles.actionsContainer}
+          onLayout={handleActionsLayout}
+          testID="conversations-filter-heading-actions"
+        >
           <ListHeaderActionButton
             name="general.cog"
             onPress={handleChatSettings}

package/src/screens/get_help_screen.tsx

@@ -1,6 +1,6 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { useCallback, useMemo } from 'react'
-import { Alert, Linking, StyleSheet, View } from 'react-native'
+import { Alert, Linking, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, PressableRow, Text, TextInlineButton } from '../components'
 import { useApiGet, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
@@ -56,7 +56,7 @@ export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
   }, [navigation])
 
   return (
-    <View style={[styles.container]}>
+    <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container}>
       {appSpecificHelpUrls.length > 0 && (
         <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
           How-to articles
@@ -90,7 +90,7 @@ export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
           to the development team.
         </Text>
       </View>
-    </View>
+    </ScrollView>
   )
 }
 
@@ -145,7 +145,7 @@ const useStyles = () => {
 
   return StyleSheet.create({
     container: {
-      flex: 1,
+      flexGrow: 1,
     },
     text: {
       paddingVertical: 4,

package/src/screens/group_notification_settings_screen.tsx

@@ -2,7 +2,7 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useEffect } from 'react'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { useTheme } from '../hooks'
 import { platformFontWeightBold } from '../utils/styles'
@@ -38,7 +38,7 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
   }
 
   return (
-    <View style={styles.container}>
+    <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.container}>
       <View style={styles.sectionOuter}>
         <View style={styles.sectionInner}>
           <Heading variant="h2" style={styles.sectionHeading}>
@@ -76,7 +76,7 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
           )}
         </View>
       </PlatformPressable>
-    </View>
+    </ScrollView>
   )
 }
 

package/src/screens/notification_settings_screen.tsx

@@ -123,6 +123,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
   return (
     <View style={styles.listContainer}>
       <FlatList
+        contentInsetAdjustmentBehavior="automatic"
         data={listData as SectionListData}
         contentContainerStyle={styles.contentContainer}
         renderItem={({ item, index }) => {

package/src/screens/preferred_app_selection_screen.tsx

@@ -2,7 +2,7 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps } from '@react-navigation/native'
 import { useMutation } from '@tanstack/react-query'
 import React, { type PropsWithChildren } from 'react'
-import { Image, StyleSheet, View, type ViewStyle } from 'react-native'
+import { Image, ScrollView, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { useApiClient, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
@@ -45,7 +45,7 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
   const sectionTitle = chatType ? chatTypeLabel(chatType.title) : undefined
 
   return (
-    <View style={styles.container}>
+    <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container}>
       <View style={styles.section}>
         <Heading variant="h2" style={styles.sectionHeading}>
           {sectionTitle}
@@ -64,7 +64,7 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
           </PressableRow>
         ))}
       </View>
-    </View>
+    </ScrollView>
   )
 }
 
@@ -118,7 +118,7 @@ const PressableRow = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flexGrow: 1,
   },
   section: {
     paddingTop: 24,

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -106,12 +106,13 @@ describe('SearchScreen', () => {
     fireEvent.changeText(input, ' budget ')
 
     expect(view.getByText('Search chat')).toBeTruthy()
-    expect(mockUseSearchResults).not.toHaveBeenCalled()
+    const searchedTerms = () =>
+      new Set(mockUseSearchResults.mock.calls.map(([term]) => term).filter(term => term.trim()))
+    expect([...searchedTerms()]).toEqual([])
 
     act(() => jest.advanceTimersByTime(200))
 
-    const searchedTerms = new Set(mockUseSearchResults.mock.calls.map(([term]) => term))
-    expect([...searchedTerms]).toEqual(['budget'])
+    expect([...searchedTerms()]).toEqual(['budget'])
     expect(view.queryByText('Search chat')).toBeNull()
     expect(view.getByLabelText('Loading results')).toBeTruthy()
   })
@@ -121,10 +122,7 @@ describe('SearchScreen', () => {
 
     const scrollView = view.UNSAFE_getByType(ScrollView)
     expect(scrollView.props.keyboardShouldPersistTaps).toBe('handled')
-    expect(scrollView.props.contentContainerStyle).toMatchObject({
-      flexGrow: 1,
-      justifyContent: 'center',
-    })
+    expect(scrollView.props.contentContainerStyle).toMatchObject({ flexGrow: 1 })
     expect(view.getByText('Search chat')).toBeTruthy()
   })
 

package/src/screens/search/components/__tests__/search_results_list.test.tsx

@@ -49,9 +49,13 @@ const messageResult = (id: string): MessageSearchResultResource => ({
   },
 })
 
+const slots = { header: <></>, prompt: <></> }
+
 const renderList = (state: Partial<SearchState>, onSettled = jest.fn()) => {
   mockUseSearchResults.mockReturnValue(searchState(state))
-  const list = () => <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} />
+  const list = () => (
+    <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} {...slots} />
+  )
   const view = render(list())
   const rerenderWith = (next: Partial<SearchState>) => {
     mockUseSearchResults.mockReturnValue(searchState(next))
@@ -130,7 +134,7 @@ describe('SearchResultsList', () => {
     const results = [conversationResult('1'), messageResult('1'), messageResult('2')]
     mockUseSearchResults.mockReturnValue(searchState({ results }))
     const view = render(
-      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} />
+      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} {...slots} />
     )
 
     fireEvent.press(view.getByLabelText(/^Message 2/))