From 48dd301b868fc7e38ede1007ebc568b286c64e8c Mon Sep 17 00:00:00 2001
From: Jason Frerich <jason.frerich@mattermost.com>
Date: Mon, 9 Jan 2023 17:04:34 -0600
Subject: [PATCH] Account for different locations to open this screen so that
 we know which screen / bottom sheet to pop back to.

---
 .../add_people_box/add_people_box.tsx         | 16 +++++++++--
 .../channel_add_people/channel_add_people.tsx | 28 ++++++++++++++-----
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/app/components/channel_actions/add_people_box/add_people_box.tsx b/app/components/channel_actions/add_people_box/add_people_box.tsx
index f460b8469e..b3d3548ff0 100644
--- a/app/components/channel_actions/add_people_box/add_people_box.tsx
+++ b/app/components/channel_actions/add_people_box/add_people_box.tsx
@@ -5,11 +5,12 @@ import React, {useCallback} from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 import {StyleProp, ViewStyle} from 'react-native';
 
+import CompassIcon from '@components/compass_icon';
 import OptionBox from '@components/option_box';
 import {Screens} from '@constants';
 import {useTheme} from '@context/theme';
 import {t} from '@i18n';
-import {dismissBottomSheet, goToScreen, showModal} from '@screens/navigation';
+import {goToScreen, showModal} from '@screens/navigation';
 import {changeOpacity} from '@utils/theme';
 
 type Props = {
@@ -32,27 +33,36 @@ const messages = defineMessages({
 });
 
 const {CHANNEL_ADD_PEOPLE} = Screens;
+const closeButtonId = 'close-add-people';
 
 const AddPeopleBox = ({channelId, containerStyle, displayName, inModal, testID}: Props) => {
     const {formatMessage} = useIntl();
     const theme = useTheme();
 
     const onAddPeople = useCallback(async () => {
+        const closeButton = await CompassIcon.getImageSourceSync('close', 24, theme.sidebarHeaderTextColor);
         const title = formatMessage(messages.title);
+
         const options = {
             topBar: {
                 subtitle: {
                     color: changeOpacity(theme.sidebarHeaderTextColor, 0.72),
                     text: displayName,
                 },
+                leftButtons: inModal ? [] : [{
+                    id: closeButtonId,
+                    icon: closeButton,
+                    testID: 'close.channel_info.button',
+                }],
             },
         };
+
         if (inModal) {
             goToScreen(CHANNEL_ADD_PEOPLE, title, {channelId}, options);
             return;
         }
-        await dismissBottomSheet();
-        showModal(CHANNEL_ADD_PEOPLE, title, {channelId});
+
+        showModal(CHANNEL_ADD_PEOPLE, title, {channelId, closeButtonId}, options);
     }, [formatMessage, channelId, inModal]);
 
     return (
diff --git a/app/screens/channel_add_people/channel_add_people.tsx b/app/screens/channel_add_people/channel_add_people.tsx
index 042d2ff498..c0bb3fe254 100644
--- a/app/screens/channel_add_people/channel_add_people.tsx
+++ b/app/screens/channel_add_people/channel_add_people.tsx
@@ -8,6 +8,7 @@ import {Edge, SafeAreaView} from 'react-native-safe-area-context';
 
 import {addMembersToChannel} from '@actions/remote/channel';
 import {fetchProfilesNotInChannel, searchProfiles} from '@actions/remote/user';
+import useNavButtonPressed from '@app/hooks/navigation_button_pressed';
 import Loading from '@components/loading';
 import Search from '@components/search';
 import SelectedUsers from '@components/selected_users';
@@ -18,17 +19,13 @@ import {useTheme} from '@context/theme';
 import {debounce} from '@helpers/api/general';
 import {useModalPosition} from '@hooks/device';
 import {t} from '@i18n';
-import {popTopScreen} from '@screens/navigation';
+import {dismissModal, popTopScreen} from '@screens/navigation';
+import NavigationStore from '@store/navigation_store';
 import {alertErrorWithFallback} from '@utils/draft';
 import {showAddChannelMembersSnackbar} from '@utils/snack_bar';
 import {changeOpacity, getKeyboardAppearanceFromTheme} from '@utils/theme';
 import {filterProfilesMatchingTerm} from '@utils/user';
 
-const close = () => {
-    Keyboard.dismiss();
-    popTopScreen();
-};
-
 const styles = StyleSheet.create({
     container: {
         flex: 1,
@@ -65,6 +62,7 @@ const messages = defineMessages({
 
 type Props = {
     channelId: string;
+    closeButtonId: string;
     componentId: string;
     currentTeamId: string;
     currentUserId: string;
@@ -85,8 +83,8 @@ function removeProfileFromList(list: {[id: string]: UserProfile}, id: string) {
 }
 
 export default function ChannelAddPeople({
-    // componentId,
     channelId,
+    closeButtonId,
     componentId,
     currentTeamId,
     currentUserId,
@@ -120,6 +118,22 @@ export default function ChannelAddPeople({
     const isSearch = Boolean(term);
     const hasProfiles = useMemo(() => Boolean(profiles.length), [profiles]);
 
+    const close = () => {
+        const screens = NavigationStore.getScreensInStack();
+
+        if (screens.includes('BottomSheet')) {
+            // from ...
+            dismissModal({componentId});
+        } else {
+            // from Channel Info Screen
+            popTopScreen();
+        }
+
+        Keyboard.dismiss();
+    };
+
+    useNavButtonPressed(closeButtonId, componentId, close, [close]);
+
     const loadedProfiles = ({users}: {users: UserProfile[]}) => {
         if (mounted.current) {
             if (users && !users.length) {