Merge pull request #30946 from zukilover/feat/remove-global-sub-nav

Remove Global Nav and Sub Nav

src/App.js

@@ -24,7 +24,6 @@ import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
-import {SidebarNavigationContextProvider} from './pages/home/sidebar/SidebarNavigationContext';
 import ThemeProvider from './styles/themes/ThemeProvider';
 import ThemeStylesProvider from './styles/ThemeStylesProvider';
 
@@ -65,7 +64,6 @@ function App() {
                     EnvironmentProvider,
                     ThemeProvider,
                     ThemeStylesProvider,
-                    SidebarNavigationContextProvider,
                 ]}
             >
                 <CustomStatusBar />

src/CONST.ts

@@ -2782,12 +2782,10 @@ const CONST = {
         DEFAULT_COORDINATE: [-122.4021, 37.7911],
         STYLE_URL: 'mapbox://styles/expensify/cllcoiqds00cs01r80kp34tmq',
     },
-
     ONYX_UPDATE_TYPES: {
         HTTPS: 'https',
         PUSHER: 'pusher',
     },
-
     EVENTS: {
         SCROLLING: 'scrolling',
     },
@@ -2806,13 +2804,6 @@ const CONST = {
         FOOTER: 'footer',
     },
 
-    GLOBAL_NAVIGATION_OPTION: {
-        HOME: 'home',
-        CHATS: 'chats',
-        SPEND: 'spend',
-        WORKSPACES: 'workspaces',
-    },
-
     MISSING_TRANSLATION: 'MISSING TRANSLATION',
     SEARCH_MAX_LENGTH: 500,
 

src/ROUTES.ts

@@ -363,17 +363,4 @@ export default {
     SAASTR: 'saastr',
     SBE: 'sbe',
     MONEY2020: 'money2020',
-
-    // Iframe screens from olddot
-    HOME_OLDDOT: 'home',
-
-    // Spend tab
-    EXPENSES_OLDDOT: 'expenses',
-    REPORTS_OLDDOT: 'reports',
-    INSIGHTS_OLDDOT: 'insights',
-
-    // Workspaces tab
-    INDIVIDUALS_OLDDOT: 'individual_workspaces',
-    GROUPS_OLDDOT: 'group_workspaces',
-    CARDS_AND_DOMAINS_OLDDOT: 'cards-and-domains',
 } as const;

src/SCREENS.ts

@@ -27,17 +27,4 @@ export default {
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
     DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect',
     SAML_SIGN_IN: 'SAMLSignIn',
-
-    // Iframe screens from olddot
-    HOME_OLDDOT: 'Home_OLDDOT',
-
-    // Spend tab
-    EXPENSES_OLDDOT: 'Expenses_OLDDOT',
-    REPORTS_OLDDOT: 'Reports_OLDDOT',
-    INSIGHTS_OLDDOT: 'Insights_OLDDOT',
-
-    // Workspaces tab
-    INDIVIDUAL_WORKSPACES_OLDDOT: 'IndividualWorkspaces_OLDDOT',
-    GROUPS_WORKSPACES_OLDDOT: 'GroupWorkspaces_OLDDOT',
-    CARDS_AND_DOMAINS_OLDDOT: 'CardsAndDomains_OLDDOT',
 } as const;

src/components/EnvironmentBadge.js

@@ -28,7 +28,7 @@ function EnvironmentBadge() {
             success={environment === CONST.ENVIRONMENT.STAGING || environment === CONST.ENVIRONMENT.ADHOC}
             error={environment !== CONST.ENVIRONMENT.STAGING && environment !== CONST.ENVIRONMENT.ADHOC}
             text={text}
-            badgeStyles={[styles.alignSelfEnd, styles.headerEnvBadge, styles.ml1]}
+            badgeStyles={[styles.alignSelfEnd, styles.headerEnvBadge]}
             textStyles={[styles.headerEnvBadgeText]}
             environment={environment}
         />

src/components/FloatingActionButton.js

@@ -4,7 +4,6 @@ import {Animated, Easing, View} from 'react-native';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
-import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
@@ -101,8 +100,6 @@ class FloatingActionButton extends PureComponent {
                         style={[styles.floatingActionButton, StyleUtils.getAnimatedFABStyle(rotate, backgroundColor)]}
                     >
                         <AnimatedIcon
-                            width={variables.iconSizeSmall}
-                            height={variables.iconSizeSmall}
                             src={Expensicons.Plus}
                             fill={fill}
                         />

src/components/LHNOptionsList/OptionRowLHN.js

@@ -58,7 +58,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    hoverStyle: styles.sidebarLinkHoverLHN,
+    hoverStyle: styles.sidebarLinkHover,
     viewMode: 'default',
     onSelectRow: () => {},
     style: null,
@@ -112,7 +112,7 @@ function OptionRowLHN(props) {
             : [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter],
     );
     const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor ? props.hoverStyle.backgroundColor : themeColors.sidebar;
-    const focusedBackgroundColor = styles.sidebarLinkActiveLHN.backgroundColor;
+    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
 
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
     const defaultSubscriptSize = optionItem.isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
@@ -199,8 +199,8 @@ function OptionRowLHN(props) {
                             styles.flexRow,
                             styles.alignItemsCenter,
                             styles.justifyContentBetween,
-                            styles.sidebarLinkLHN,
-                            styles.sidebarLinkInnerLHN,
+                            styles.sidebarLink,
+                            styles.sidebarLinkInner,
                             StyleUtils.getBackgroundColorStyle(themeColors.sidebar),
                             props.isFocused ? styles.sidebarLinkActive : null,
                             (hovered || isContextMenuActive) && !props.isFocused ? props.hoverStyle : null,

src/languages/en.ts

@@ -1907,7 +1907,4 @@ export default {
         guaranteed: 'Guaranteed eReceipt',
         transactionDate: 'Transaction date',
     },
-    globalNavigationOptions: {
-        chats: 'Chats',
-    },
 } satisfies TranslationBase;

src/languages/es.ts

@@ -2391,7 +2391,4 @@ export default {
         guaranteed: 'eRecibo garantizado',
         transactionDate: 'Fecha de transacción',
     },
-    globalNavigationOptions: {
-        chats: 'Chats', // "Chats" is the accepted term colloqially in Spanish, this is not a bug!!
-    },
 } satisfies EnglishTranslation;

src/libs/Navigation/Navigation.js

@@ -8,7 +8,6 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 import getStateFromPath from './getStateFromPath';
-import originalGetTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName';
 import originalGetTopmostReportActionId from './getTopmostReportActionID';
 import originalGetTopmostReportId from './getTopmostReportId';
 import linkingConfig from './linkingConfig';
@@ -47,9 +46,6 @@ function canNavigate(methodName, params = {}) {
 // Re-exporting the getTopmostReportId here to fill in default value for state. The getTopmostReportId isn't defined in this file to avoid cyclic dependencies.
 const getTopmostReportId = (state = navigationRef.getState()) => originalGetTopmostReportId(state);
 
-// Re-exporting the getTopMostCentralPaneRouteName here to fill in default value for state. The getTopMostCentralPaneRouteName isn't defined in this file to avoid cyclic dependencies.
-const getTopMostCentralPaneRouteName = (state = navigationRef.getState()) => originalGetTopMostCentralPaneRouteName(state);
-
 // Re-exporting the getTopmostReportActionID here to fill in default value for state. The getTopmostReportActionID isn't defined in this file to avoid cyclic dependencies.
 const getTopmostReportActionId = (state = navigationRef.getState()) => originalGetTopmostReportActionId(state);
 
@@ -284,7 +280,6 @@ export default {
     setIsNavigationReady,
     getTopmostReportId,
     getRouteNameFromStateEvent,
-    getTopMostCentralPaneRouteName,
     getTopmostReportActionId,
 };
 

src/libs/Navigation/NavigationRoot.js

@@ -1,13 +1,12 @@
 import {DefaultTheme, getPathFromState, NavigationContainer} from '@react-navigation/native';
 import PropTypes from 'prop-types';
-import React, {useContext, useEffect, useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {Easing, interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Log from '@libs/Log';
 import StatusBar from '@libs/StatusBar';
-import {SidebarNavigationContext} from '@pages/home/sidebar/SidebarNavigationContext';
 import themeColors from '@styles/themes/default';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
@@ -54,7 +53,6 @@ function parseAndLogRoute(state) {
 function NavigationRoot(props) {
     useFlipper(navigationRef);
     const firstRenderRef = useRef(true);
-    const globalNavigation = useContext(SidebarNavigationContext);
 
     const {updateCurrentReportID} = useCurrentReportID();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -130,9 +128,6 @@ function NavigationRoot(props) {
         }, 0);
         parseAndLogRoute(state);
         animateStatusBarBackgroundColor();
-
-        // Update the global navigation to show the correct selected menu items.
-        globalNavigation.updateFromNavigationState(state);
     };
 
     return (

src/libs/Navigation/linkTo.js

@@ -3,7 +3,6 @@ import _ from 'lodash';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import getStateFromPath from './getStateFromPath';
-import getTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName';
 import getTopmostReportId from './getTopmostReportId';
 import linkingConfig from './linkingConfig';
 
@@ -62,15 +61,12 @@ export default function linkTo(navigation, path, type) {
 
     // If action type is different than NAVIGATE we can't change it to the PUSH safely
     if (action.type === CONST.NAVIGATION.ACTION_TYPE.NAVIGATE) {
-        // Make sure that we are pushing a screen that is not currently on top of the stack.
-        const shouldPushIfCentralPane =
-            action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR &&
-            (getTopMostCentralPaneRouteName(root.getState()) !== getTopMostCentralPaneRouteName(state) || getTopmostReportId(root.getState()) !== getTopmostReportId(state));
-
         // In case if type is 'FORCED_UP' we replace current screen with the provided. This means the current screen no longer exists in the stack
         if (type === CONST.NAVIGATION.TYPE.FORCED_UP) {
             action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE;
-        } else if (shouldPushIfCentralPane) {
+
+            // If this action is navigating to the report screen and the top most navigator is different from the one we want to navigate - PUSH the new screen to the top of the stack
+        } else if (action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && getTopmostReportId(root.getState()) !== getTopmostReportId(state)) {
             action.type = CONST.NAVIGATION.ACTION_TYPE.PUSH;
 
             // If the type is UP, we deeplinked into one of the RHP flows and we want to replace the current screen with the previous one in the flow