Merge pull request #49 from software-mansion-labs/@kosmydel/ideal-nav…

…-issues-v7

ideal nav issues v7

src/components/AttachmentModal.tsx

@@ -281,7 +281,7 @@ function AttachmentModal({
     const deleteAndCloseModal = useCallback(() => {
         IOU.detachReceipt(transaction?.transactionID);
         setIsDeleteReceiptConfirmModalVisible(false);
-        Navigation.dismissModalWithReportID(report?.reportID ?? '');
+        Navigation.dismissModal(report?.reportID);
     }, [transaction, report]);
 
     const isValidFile = useCallback((fileObject: FileObject) => {

src/components/ReportHeaderSkeletonView.tsx

@@ -25,7 +25,7 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
 
     return (
         <View style={[styles.appContentHeader]}>
-            <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
+            <View style={[styles.appContentHeaderTitle]}>
                 {isSmallScreenWidth && (
                     <PressableWithFeedback
                         onPress={onBackButtonPress}
@@ -48,18 +48,18 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
                 >
                     <Circle
                         cx="20"
-                        cy="33"
+                        cy="40"
                         r="20"
                     />
                     <Rect
                         x="55"
-                        y="20"
+                        y="28"
                         width="30%"
                         height="8"
                     />
                     <Rect
                         x="55"
-                        y="40"
+                        y="48"
                         width="40%"
                         height="8"
                     />

src/libs/Navigation/Navigation.ts

@@ -18,7 +18,7 @@ import linkingConfig from './linkingConfig';
 import linkTo from './linkTo';
 import navigationRef from './navigationRef';
 import switchPolicyID from './switchPolicyID';
-import type {State, StateOrRoute, switchPolicyIDParams} from './types';
+import type {State, StateOrRoute, SwitchPolicyIDParams} from './types';
 
 let resolveNavigationIsReadyPromise: () => void;
 const navigationIsReadyPromise = new Promise<void>((resolve) => {
@@ -51,17 +51,20 @@ const getTopmostReportId = (state = navigationRef.getState()) => originalGetTopm
 const getTopmostReportActionId = (state = navigationRef.getState()) => originalGetTopmostReportActionId(state);
 
 // Re-exporting the dismissModal here to fill in default value for navigationRef. The dismissModal isn't defined in this file to avoid cyclic dependencies.
-const dismissModal = (ref = navigationRef) => originalDismissModal(ref);
+const dismissModal = (reportID?: string, ref = navigationRef) => {
+    if (!reportID) {
+        originalDismissModal(ref);
+        return;
+    }
+    const report = getReport(reportID);
+    originalDismissModalWithReport({reportID, ...report}, ref);
+};
 
 // Re-exporting the dismissModalWithReport here to fill in default value for navigationRef. The dismissModalWithReport isn't defined in this file to avoid cyclic dependencies.
 // This method is needed because it allows to dismiss the modal and then open the report. Within this method is checked whether the report belongs to a specific workspace. Sometimes the report we want to check, hasn't been added to the Onyx yet.
 // Then we can pass the report as a param without getting it from the Onyx.
 const dismissModalWithReport = (report: Report | EmptyObject, ref = navigationRef) => originalDismissModalWithReport(report, ref);
 
-const dismissModalWithReportID = (reportID: string, ref = navigationRef) => {
-    const report = getReport(reportID);
-    originalDismissModalWithReport({reportID, ...report}, ref);
-};
 /** Method for finding on which index in stack we are. */
 function getActiveRouteIndex(stateOrRoute: StateOrRoute, index?: number): number | undefined {
     if ('routes' in stateOrRoute && stateOrRoute.routes) {
@@ -323,7 +326,7 @@ function waitForProtectedRoutes() {
     });
 }
 
-function navigateWithSwitchPolicyID(params: switchPolicyIDParams) {
+function navigateWithSwitchPolicyID(params: SwitchPolicyIDParams) {
     if (!canNavigate('navigateWithSwitchPolicyID')) {
         return;
     }
@@ -337,7 +340,6 @@ export default {
     setParams,
     dismissModal,
     dismissModalWithReport,
-    dismissModalWithReportID,
     isActiveRoute,
     getActiveRoute,
     getActiveRouteWithoutParams,

src/libs/Navigation/switchPolicyID.ts

@@ -1,7 +1,7 @@
 import {getActionFromState} from '@react-navigation/core';
 import type {NavigationAction, NavigationContainerRef, NavigationState, PartialState} from '@react-navigation/native';
 import {getPathFromState} from '@react-navigation/native';
-import type {Writable} from 'type-fest';
+import type {ValueOf, Writable} from 'type-fest';
 import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
@@ -11,7 +11,7 @@ import getStateFromPath from './getStateFromPath';
 import getTopmostCentralPaneRoute from './getTopmostCentralPaneRoute';
 import linkingConfig from './linkingConfig';
 import TAB_TO_CENTRAL_PANE_MAPPING from './linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING';
-import type {NavigationRoot, RootStackParamList, StackNavigationAction, State, switchPolicyIDParams} from './types';
+import type {NavigationRoot, RootStackParamList, StackNavigationAction, State, SwitchPolicyIDParams} from './types';
 
 type ActionPayloadParams = {
     screen?: string;
@@ -60,7 +60,7 @@ function getActionForBottomTabNavigator(action: StackNavigationAction, state: Na
     };
 }
 
-export default function switchPolicyID(navigation: NavigationContainerRef<RootStackParamList> | null, {policyID, route}: switchPolicyIDParams) {
+export default function switchPolicyID(navigation: NavigationContainerRef<RootStackParamList> | null, {policyID, route, isPolicyAdmin = false}: SwitchPolicyIDParams) {
     if (!navigation) {
         throw new Error("Couldn't find a navigation object. Is your component inside a screen in a navigator?");
     }
@@ -110,15 +110,21 @@ export default function switchPolicyID(navigation: NavigationContainerRef<RootSt
             const topmostCentralPaneRoute = getTopmostCentralPaneRoute(rootState);
             let screen = topmostCentralPaneRoute?.name;
             const params: CentralPaneRouteParams = {...topmostCentralPaneRoute?.params};
+            const isWorkspaceScreen = screen && Object.values(SCREENS.WORKSPACE).includes(screen as ValueOf<typeof SCREENS.WORKSPACE>);
 
             // Only workspace settings screens have to store the policyID in the params.
             // In other case, the policyID is read from the BottomTab params.
-            if (!screen?.startsWith('Workspace_')) {
+            if (!isWorkspaceScreen) {
                 delete params.policyID;
             } else {
                 params.policyID = policyID;
             }
 
+            // We need to redirect non admin users to overview screen, when switching workspace.
+            if (!isPolicyAdmin && isWorkspaceScreen && screen !== SCREENS.WORKSPACE.OVERVIEW) {
+                screen = SCREENS.WORKSPACE.OVERVIEW;
+            }
+
             // If the user is on the home page and changes the current workspace, then should be displayed a report from the selected workspace.
             // To achieve that, it's necessary to navigate without the reportID param.
             if (checkIfActionPayloadNameIsEqual(actionForBottomTabNavigator, SCREENS.HOME)) {

src/libs/Navigation/types.ts

@@ -470,9 +470,10 @@ type CentralPaneName = keyof CentralPaneNavigatorParamList;
 
 type FullScreenName = keyof SettingsCentralPaneNavigatorParamList;
 
-type switchPolicyIDParams = {
+type SwitchPolicyIDParams = {
     policyID?: string;
     route?: Routes;
+    isPolicyAdmin?: boolean;
 };
 
 export type {
@@ -519,5 +520,5 @@ export type {
     ReimbursementAccountNavigatorParamList,
     State,
     WorkspaceSwitcherNavigatorParamList,
-    switchPolicyIDParams,
+    SwitchPolicyIDParams,
 };

src/libs/actions/IOU.js

@@ -936,7 +936,7 @@ function createDistanceRequest(report, participant, comment, created, category,
         },
         onyxData,
     );
-    Navigation.dismissModalWithReportID(isMoneyRequestReport ? report.reportID : chatReport.reportID);
+    Navigation.dismissModal(isMoneyRequestReport ? report.reportID : chatReport.reportID);
     Report.notifyNewAction(chatReport.reportID, userAccountID);
 }
 
@@ -1364,7 +1364,7 @@ function requestMoney(
         onyxData,
     );
     resetMoneyRequestInfo();
-    Navigation.dismissModalWithReportID(activeReportID);
+    Navigation.dismissModal(activeReportID);
     Report.notifyNewAction(activeReportID, payeeAccountID);
 }
 
@@ -1806,7 +1806,7 @@ function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccou
     );
 
     resetMoneyRequestInfo();
-    Navigation.dismissModalWithReportID(splitData.chatReportID);
+    Navigation.dismissModal(splitData.chatReportID);
     Report.notifyNewAction(splitData.chatReportID, currentUserAccountID);
 }
 
@@ -2288,7 +2288,7 @@ function completeSplitBill(chatReportID, reportAction, updatedTransaction, sessi
         },
         {optimisticData, successData, failureData},
     );
-    Navigation.dismissModalWithReportID(chatReportID);
+    Navigation.dismissModal(chatReportID);
     Report.notifyNewAction(chatReportID, sessionAccountID);
 }
 
@@ -3244,7 +3244,7 @@ function sendMoneyElsewhere(report, amount, currency, comment, managerID, recipi
     API.write('SendMoneyElsewhere', params, {optimisticData, successData, failureData});
 
     resetMoneyRequestInfo();
-    Navigation.dismissModalWithReportID(params.chatReportID);
+    Navigation.dismissModal(params.chatReportID);
     Report.notifyNewAction(params.chatReportID, managerID);
 }
 
@@ -3262,7 +3262,7 @@ function sendMoneyWithWallet(report, amount, currency, comment, managerID, recip
     API.write('SendMoneyWithWallet', params, {optimisticData, successData, failureData});
 
     resetMoneyRequestInfo();
-    Navigation.dismissModalWithReportID(params.chatReportID);
+    Navigation.dismissModal(params.chatReportID);
     Report.notifyNewAction(params.chatReportID, managerID);
 }
 

src/libs/actions/Report.ts

@@ -1641,7 +1641,7 @@ function addPolicyReport(policyReport: ReportUtils.OptimisticChatReport) {
     };
 
     API.write(WRITE_COMMANDS.ADD_WORKSPACE_ROOM, parameters, {optimisticData, successData, failureData});
-    Navigation.dismissModalWithReportID(policyReport.reportID);
+    Navigation.dismissModal(policyReport.reportID);
 }
 
 /** Deletes a report, along with its reportActions, any linked reports, and any linked IOU report. */

src/libs/actions/Task.ts

@@ -244,7 +244,7 @@ function createTaskAndNavigate(
 
     API.write(WRITE_COMMANDS.CREATE_TASK, parameters, {optimisticData, successData, failureData});
 
-    Navigation.dismissModalWithReportID(parentReportID);
+    Navigation.dismissModal(parentReportID);
 }
 
 /**

src/libs/actions/TeachersUnite.ts

@@ -61,7 +61,7 @@ function referTeachersUniteVolunteer(partnerUserID: string, firstName: string, l
     };
 
     API.write(WRITE_COMMANDS.REFER_TEACHERS_UNITE_VOLUNTEER, parameters, {optimisticData});
-    Navigation.dismissModalWithReportID(publicRoomReportID);
+    Navigation.dismissModal(publicRoomReportID);
 }
 
 /**
@@ -181,7 +181,7 @@ function addSchoolPrincipal(firstName: string, partnerUserID: string, lastName:
     };
 
     API.write(WRITE_COMMANDS.ADD_SCHOOL_PRINCIPAL, parameters, {optimisticData, successData, failureData});
-    Navigation.dismissModalWithReportID(expenseChatReportID);
+    Navigation.dismissModal(expenseChatReportID);
 }
 
 export default {referTeachersUniteVolunteer, addSchoolPrincipal};

src/pages/AddPersonalBankAccountPage.tsx

@@ -47,7 +47,7 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}: AddPersona
             const onSuccessFallbackRoute = personalBankAccount?.onSuccessFallbackRoute ?? '';
 
             if (exitReportID) {
-                Navigation.dismissModalWithReportID(exitReportID);
+                Navigation.dismissModal(exitReportID);
             } else if (shouldContinue && onSuccessFallbackRoute) {
                 PaymentMethods.continueSetup(onSuccessFallbackRoute);
             } else {

src/pages/EditRequestDistancePage.js

@@ -60,7 +60,7 @@ function EditRequestDistancePage({report, route, transaction, transactionBackup}
         // When the loading goes from true to false, then we know the transaction has just been
         // saved to the server. Check for errors. If there are no errors, then the modal can be closed.
         if (prevIsLoading && !transaction.isLoading && !hasWaypointError.current) {
-            Navigation.dismissModalWithReportID(report.reportID);
+            Navigation.dismissModal(report.reportID);
         }
     }, [transaction, prevIsLoading, report]);
 
@@ -75,7 +75,7 @@ function EditRequestDistancePage({report, route, transaction, transactionBackup}
         const oldAddresses = _.mapObject(oldWaypoints, (waypoint) => _.pick(waypoint, 'address'));
         const addresses = _.mapObject(waypoints, (waypoint) => _.pick(waypoint, 'address'));
         if (_.isEqual(oldAddresses, addresses)) {
-            Navigation.dismissModalWithReportID(report.reportID);
+            Navigation.dismissModal(report.reportID);
             return;
         }
 
@@ -84,7 +84,7 @@ function EditRequestDistancePage({report, route, transaction, transactionBackup}
         // If the client is offline, then the modal can be closed as well (because there are no errors or other feedback to show them
         // until they come online again and sync with the server).
         if (isOffline) {
-            Navigation.dismissModalWithReportID(report.reportID);
+            Navigation.dismissModal(report.reportID);
         }
     };
 

src/pages/SearchPage.js

@@ -155,7 +155,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports, nav
             return;
         }
         if (option.reportID) {
-            Navigation.dismissModalWithReportID(option.reportID);
+            Navigation.dismissModal(option.reportID);
         } else {
             Report.navigateToAndOpenReport([option.login]);
         }

src/pages/SearchPage/index.js

@@ -123,7 +123,7 @@ function SearchPage({betas, reports}) {
 
         if (option.reportID) {
             setSearchValue('');
-            Navigation.dismissModalWithReportID(option.reportID);
+            Navigation.dismissModal(option.reportID);
         } else {
             Report.navigateToAndOpenReport([option.login]);
         }

src/pages/ShareCodePage.js

@@ -90,13 +90,8 @@ class ShareCodePage extends React.Component {
                     shouldShowBackButton={isReport || this.props.isSmallScreenWidth}
                 />
 
-                <ScrollView style={[this.props.themeStyles.flex1, this.props.themeStyles.mt3]}>
-                    <View
-                        style={[
-                            this.props.themeStyles.shareCodePage,
-                            this.props.isSmallScreenWidth ? this.props.themeStyles.workspaceSectionMobile : this.props.themeStyles.workspaceSection,
-                        ]}
-                    >
+                <ScrollView style={[this.props.themeStyles.flex1]}>
+                    <View style={[this.props.isSmallScreenWidth ? this.props.themeStyles.workspaceSectionMobile : this.props.themeStyles.workspaceSection, this.props.themeStyles.ph4]}>
                         <QRShareWithDownload
                             ref={this.qrCodeRef}
                             url={url}

src/pages/WorkspaceSwitcherPage.js

@@ -110,8 +110,8 @@ function WorkspaceSwitcherPage({policies}) {
         [unreadStatusesForPolicies],
     );
 
-    const selectPolicy = useCallback((option) => {
-        const policyID = option.policyID;
+    const selectPolicy = (option) => {
+        const {policyID, isPolicyAdmin} = option;
 
         if (policyID) {
             setSelectedOption(option);
@@ -121,13 +121,9 @@ function WorkspaceSwitcherPage({policies}) {
         setActiveWorkspaceID(policyID);
         Navigation.goBack();
         if (policyID !== activeWorkspaceID) {
-            Navigation.navigateWithSwitchPolicyID({policyID});
+            Navigation.navigateWithSwitchPolicyID({policyID, isPolicyAdmin});
         }
-    }, []);
-
-    const onChangeText = useCallback((newSearchTerm) => {
-        setSearchTerm(newSearchTerm);
-    }, []);
+    };
 
     const usersWorkspaces = useMemo(
         () =>
@@ -147,6 +143,7 @@ function WorkspaceSwitcherPage({policies}) {
                     ],
                     boldStyle: hasUnreadData(policy.id),
                     keyForList: policy.id,
+                    isPolicyAdmin: PolicyUtils.isPolicyAdmin(policy),
                 }))
                 .value(),
         [policies, getIndicatorTypeForPolicy, hasUnreadData],
@@ -247,7 +244,7 @@ function WorkspaceSwitcherPage({policies}) {
                         sections={[usersWorkspacesSectionData]}
                         value={searchTerm}
                         shouldShowTextInput={usersWorkspaces.length >= CONST.WORKSPACE_SWITCHER.MINIMUM_WORKSPACES_TO_SHOW_SEARCH}
-                        onChangeText={onChangeText}
+                        onChangeText={(newSearchTerm) => setSearchTerm(newSearchTerm)}
                         selectedOptions={selectedOption ? [selectedOption] : []}
                         onSelectRow={selectPolicy}
                         shouldPreventDefaultFocusOnSelectRow
@@ -269,7 +266,7 @@ function WorkspaceSwitcherPage({policies}) {
                 )}
             </>
         ),
-        [inputCallbackRef, onChangeText, searchTerm, selectPolicy, selectedOption, styles, theme.textSupporting, translate, usersWorkspaces.length, usersWorkspacesSectionData],
+        [inputCallbackRef, setSearchTerm, searchTerm, selectPolicy, selectedOption, styles, theme.textSupporting, translate, usersWorkspaces.length, usersWorkspacesSectionData],
     );
 
     useEffect(() => {

src/pages/home/HeaderView.js

@@ -227,7 +227,7 @@ function HeaderView(props) {
             dataSet={{dragArea: true}}
         >
             <View style={[styles.appContentHeader]}>
-                <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && !isLoading && styles.pl5]}>
+                <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
                     {isLoading ? (
                         <ReportHeaderSkeletonView onBackButtonPress={props.onNavigationMenuButtonClicked} />
                     ) : (

src/pages/settings/Preferences/ThemePage.js

@@ -41,7 +41,7 @@ function ThemePage(props) {
                 title={translate('themePage.theme')}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onCloseButtonPress={() => Navigation.dismissModal()}
             />
 
             <Text style={[styles.mh5, styles.mv4]}>{translate('themePage.chooseThemeBelowOrSync')}</Text>