[MM-66923] Fix scroll and private channel icon on invite user (#9363) (#9391)

* [MM-66923] Fix scroll and private channel icon on invite user

* Address feedback

* Fix test

(cherry picked from commit 2111c8fb2c)

Co-authored-by: Daniel Espino García <larkox@gmail.com>

app/screens/integration_selector/channel_list_row/index.tsx

@@ -26,7 +26,7 @@ const getIconForChannel = (selectedChannel: Channel): string => {
     let icon = 'globe';
 
     if (selectedChannel.type === 'P') {
-        icon = 'padlock';
+        icon = 'lock-outline';
     }
 
     if (selectedChannel.delete_at) {

app/screens/integration_selector/custom_list/index.tsx

@@ -1,10 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useCallback} from 'react';
+import React, {useCallback, useRef} from 'react';
 import {
-    Platform, FlatList, RefreshControl, View,
+    Platform, RefreshControl, View,
 } from 'react-native';
+import {KeyboardAwareFlatList} from 'react-native-keyboard-aware-scroll-view';
 
+import {useAvoidKeyboard} from '@hooks/device';
 import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
 import {typography} from '@utils/typography';
 
@@ -52,9 +54,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
                 },
             }),
         },
-        container: {
-            flexGrow: 1,
-        },
         separator: {
             height: 1,
             flex: 1,
@@ -109,6 +108,8 @@ function CustomList({
     canRefresh = true, testID, refreshing = false, onRefresh,
 }: Props) {
     const style = getStyleFromTheme(theme);
+    const keyboardAwareFlatListRef = useRef<KeyboardAwareFlatList>(null);
+    useAvoidKeyboard(keyboardAwareFlatListRef);
 
     // Renders
     const renderEmptyList = useCallback(() => {
@@ -159,8 +160,8 @@ function CustomList({
     }
 
     return (
-        <FlatList
-            contentContainerStyle={style.container}
+        <KeyboardAwareFlatList
+            ref={keyboardAwareFlatListRef}
             data={data}
             keyboardShouldPersistTaps='always'
             keyExtractor={keyExtractor}

app/screens/invite/selection.test.tsx

@@ -266,7 +266,8 @@ describe('Selection', () => {
         const {getByTestId} = renderWithIntl(<Selection {...props}/>);
 
         const optionItem = getByTestId('invite.guest_magic_link');
-        expect(optionItem).toHaveProp('label', 'Allow newly created guests to login without password');
+        expect(optionItem).toHaveProp('label', 'Use magic link');
+        expect(optionItem).toHaveProp('description', 'Newly created guests will join and log in without a password, using a magic link sent to their email address');
         expect(optionItem).toHaveProp('type', 'toggle');
         expect(optionItem).toHaveProp('selected', false);
 

app/screens/invite/selection.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useState, useMemo} from 'react';
+import React, {useCallback, useState, useMemo, useRef} from 'react';
 import {useIntl} from 'react-intl';
 import {
     Keyboard,
@@ -13,6 +13,7 @@ import {
     type ListRenderItemInfo,
     ScrollView,
 } from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import Animated, {useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
 
 import SelectedChip from '@components/chips/selected_chip';
@@ -25,7 +26,7 @@ import {Screens} from '@constants';
 import {MAX_LIST_HEIGHT, MAX_LIST_TABLET_DIFF} from '@constants/autocomplete';
 import {useTheme} from '@context/theme';
 import {useAutocompleteDefaultAnimatedValues} from '@hooks/autocomplete';
-import {useIsTablet} from '@hooks/device';
+import {useAvoidKeyboard, useIsTablet} from '@hooks/device';
 import {goToScreen} from '@screens/navigation';
 import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
 
@@ -178,6 +179,9 @@ export default function Selection({
 
     const hasChannelsSelected = selectedChannels.length > 0;
 
+    const keyboardAwareRef = useRef<KeyboardAwareScrollView>(null);
+    useAvoidKeyboard(keyboardAwareRef);
+
     const onLayoutSelectionTeamBar = useCallback((e: LayoutChangeEvent) => {
         setTeamBarHeight(e.nativeEvent.layout.height);
     }, []);
@@ -372,7 +376,10 @@ export default function Selection({
                 onLayoutContainer={onLayoutSelectionTeamBar}
                 onClose={onClose}
             />
-            <View style={styles.contentContainer}>
+            <KeyboardAwareScrollView
+                ref={keyboardAwareRef}
+                style={styles.contentContainer}
+            >
                 <SelectionSearchBar
                     term={term}
                     onSearchChange={onSearchChange}
@@ -428,7 +435,8 @@ export default function Selection({
                             )}
                             {allowGuestMagicLink && (
                                 <OptionItem
-                                    label={intl.formatMessage({id: 'invite.guest_magic_link', defaultMessage: 'Allow newly created guests to login without password'})}
+                                    label={intl.formatMessage({id: 'invite.guest_magic_link', defaultMessage: 'Use magic link'})}
+                                    description={intl.formatMessage({id: 'invite.guest_magic_link_description', defaultMessage: 'Newly created guests will join and log in without a password, using a magic link sent to their email address'})}
                                     type='toggle'
                                     selected={guestMagicLink}
                                     action={handlePasswordlessInvitesChange}
@@ -438,7 +446,7 @@ export default function Selection({
                         </>
                     )}
                 </View>
-            </View>
+            </KeyboardAwareScrollView>
             <Animated.View style={searchListContainerStyle}>
                 <FlatList
                     data={searchResults}

assets/base/i18n/en.json

@@ -441,7 +441,8 @@
   "invite_people_to_team.message": "Here’s a link to collaborate and communicate with us on Mattermost.",
   "invite_people_to_team.title": "Join the {team} team",
   "invite.custom_message": "Enter a custom message",
-  "invite.guest_magic_link": "Allow newly created guests to login without password",
+  "invite.guest_magic_link": "Use magic link",
+  "invite.guest_magic_link_description": "Newly created guests will join and log in without a password, using a magic link sent to their email address",
   "invite.invite_as_guest": "Invite as guest",
   "invite.invite_as_guest_description": "Guests are limited to selected channels",
   "invite.members.already_member": "This person is already a team member",