[Desktop Navigation] Remove leftHandBar beta

src/CONST.ts

@@ -11,6 +11,7 @@ import BankAccount from './libs/models/BankAccount';
 import {addTrailingForwardSlash} from './libs/Url';
 import ONYXKEYS from './ONYXKEYS';
 import SCREENS from './SCREENS';
+import variables from './styles/variables';
 import type PlaidBankAccount from './types/onyx/PlaidBankAccount';
 
 // Creating a default array and object this way because objects ({}) and arrays ([]) are not stable types.
@@ -399,8 +400,8 @@ const CONST = {
         TEXTAREA: 'TEXTAREA',
     },
     POPOVER_ACCOUNT_SWITCHER_POSITION: {
-        horizontal: 12,
-        vertical: 80,
+        horizontal: 12 + variables.navigationTabBarSize,
+        vertical: 72,
     },
     POPOVER_DATE_WIDTH: 338,
     POPOVER_DATE_MAX_HEIGHT: 366,
@@ -809,7 +810,6 @@ const CONST = {
         CUSTOM_RULES: 'customRules',
         TABLE_REPORT_VIEW: 'tableReportView',
         RECEIPT_LINE_ITEMS: 'receiptLineItems',
-        LEFT_HAND_BAR: 'leftHandBar',
         WALLET: 'newdotWallet',
         GLOBAL_REIMBURSEMENTS_ON_ND: 'globalReimbursementsOnND',
         PRIVATE_DOMAIN_ONBOARDING: 'privateDomainOnboarding',

src/components/AccountSwitcher.tsx

@@ -5,7 +5,6 @@ import {useOnyx} from 'react-native-onyx';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -47,15 +46,13 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
     const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
     const buttonRef = useRef<HTMLDivElement>(null);
     const {windowHeight} = useWindowDimensions();
-    const {canUseLeftHandBar} = usePermissions();
 
     const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false);
     const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false);
     const delegators = account?.delegatedAccess?.delegators ?? [];
 
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
     const canSwitchAccounts = delegators.length > 0 || isActingAsDelegate;
-    const accountSwitcherPopoverStyle = canUseLeftHandBar ? styles.accountSwitcherPopoverWithLHB : styles.accountSwitcherPopover;
 
     const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.ACCOUNT_SWITCHER,
@@ -101,7 +98,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
             avatarID: personalDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID,
             icon: personalDetails?.avatar ?? '',
             iconType: CONST.ICON_TYPE_AVATAR,
-            outerWrapperStyle: shouldUseNarrowLayout ? {} : accountSwitcherPopoverStyle,
+            outerWrapperStyle: shouldUseNarrowLayout ? {} : styles.accountSwitcherPopover,
             numberOfLinesDescription: 1,
             errorText: error ?? '',
             shouldShowRedDotIndicator: !!error,

src/components/FloatingActionButton.tsx

@@ -5,7 +5,6 @@ import type {GestureResponderEvent, Role, Text, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Animated, {Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import Svg, {Path} from 'react-native-svg';
-import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -50,24 +49,22 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTo
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const platform = getPlatform();
     const isNarrowScreenOnWeb = shouldUseNarrowLayout && platform === CONST.PLATFORM.WEB;
-    const [isSidebarLoaded] = useOnyx(ONYXKEYS.IS_SIDEBAR_LOADED, {initialValue: false});
+    const [isSidebarLoaded] = useOnyx(ONYXKEYS.IS_SIDEBAR_LOADED, {initialValue: false, canBeMissing: true});
     const isHomeRouteActive = useIsHomeRouteActive(shouldUseNarrowLayout);
     const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.GLOBAL_CREATE_TOOLTIP,
         // On Home screen, We need to wait for the sidebar to load before showing the tooltip because there is the Concierge tooltip which is higher priority
         isTooltipAllowed && (!isHomeRouteActive || isSidebarLoaded),
     );
-    const {canUseLeftHandBar} = usePermissions();
+    const isLHBVisible = !shouldUseNarrowLayout;
 
-    const shouldDisplaySmallFAB = canUseLeftHandBar && !shouldUseNarrowLayout;
-    const fabSize = shouldDisplaySmallFAB ? variables.iconSizeSmall : variables.iconSizeNormal;
+    const fabSize = isLHBVisible ? variables.iconSizeSmall : variables.iconSizeNormal;
 
     const sharedValue = useSharedValue(isActive ? 1 : 0);
     const buttonRef = ref;
 
-    const isLhbVisible = canUseLeftHandBar && !shouldUseNarrowLayout;
-    const tooltipHorizontalAnchorAlignment = isLhbVisible ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT;
-    const tooltipShiftHorizontal = isLhbVisible ? variables.lhbFabTooltipShiftHorizontal : variables.fabTooltipShiftHorizontal;
+    const tooltipHorizontalAnchorAlignment = isLHBVisible ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT;
+    const tooltipShiftHorizontal = isLHBVisible ? variables.lhbFabTooltipShiftHorizontal : variables.fabTooltipShiftHorizontal;
 
     useEffect(() => {
         sharedValue.set(
@@ -122,13 +119,13 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTo
                 shouldUseHapticsOnLongPress={false}
                 testID="floating-action-button"
             >
-                <Animated.View style={[styles.floatingActionButton, {borderRadius}, shouldDisplaySmallFAB && styles.floatingActionButtonSmall, animatedStyle]}>
+                <Animated.View style={[styles.floatingActionButton, {borderRadius}, isLHBVisible && styles.floatingActionButtonSmall, animatedStyle]}>
                     <Svg
                         width={fabSize}
                         height={fabSize}
                     >
                         <AnimatedPath
-                            d={shouldDisplaySmallFAB ? SMALL_FAB_PATH : FAB_PATH}
+                            d={isLHBVisible ? SMALL_FAB_PATH : FAB_PATH}
                             fill={textLight}
                         />
                     </Svg>

src/components/HeaderWithBackButton/index.tsx

@@ -12,7 +12,6 @@ import HelpButton from '@components/SidePanel/HelpComponents/HelpButton';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
-import usePermissions from '@hooks/usePermissions';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -79,7 +78,6 @@ function HeaderWithBackButton({
     const StyleUtils = useStyleUtils();
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
-    const {canUseLeftHandBar} = usePermissions();
 
     const middleContent = useMemo(() => {
         if (progressBarPercentage) {
@@ -145,7 +143,7 @@ function HeaderWithBackButton({
             dataSet={{dragArea: false}}
             style={[
                 styles.headerBar,
-                shouldUseHeadlineHeader && styles.headerBarDesktopHeight(canUseLeftHandBar),
+                shouldUseHeadlineHeader && styles.headerBarHeight,
                 shouldShowBorderBottom && styles.borderBottom,
                 // progressBarPercentage can be 0 which would
                 // be falsy, hence using !== undefined explicitly

src/components/Navigation/NavigationTabBar/index.tsx

@@ -13,7 +13,6 @@ import Text from '@components/Text';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useLocalize from '@hooks/useLocalize';
-import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import {useSidebarOrderedReportIDs} from '@hooks/useSidebarOrderedReportIDs';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -68,7 +67,6 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
         isTooltipAllowed && selectedTab !== NAVIGATION_TABS.HOME,
     );
     const StyleUtils = useStyleUtils();
-    const {canUseLeftHandBar} = usePermissions();
 
     // On a wide layout DebugTabView should be rendered only within the navigation tab bar displayed directly on screens.
     const shouldRenderDebugTabViewOnWideLayout = !!account?.isDebugModeEnabled && !isTopLevelBar;
@@ -88,16 +86,12 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
         Navigation.navigate(ROUTES.HOME);
     }, [hideProductTrainingTooltip, selectedTab]);
 
-    // When users do not have access to the leftHandBar beta, then we should take into account the activeWorkspaceID.
-    // Since the introduction of LHB, the workspace switcher is no longer available.
     const navigateToSearch = useCallback(() => {
         if (selectedTab === NAVIGATION_TABS.SEARCH) {
             return;
         }
         clearSelectedText();
         interceptAnonymousUser(() => {
-            const defaultCannedQuery = buildCannedSearchQuery();
-
             const rootState = navigationRef.getRootState() as State<RootNavigatorParamList>;
             const lastSearchNavigator = rootState.routes.findLast((route) => route.name === NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR);
             const lastSearchNavigatorState = lastSearchNavigator && lastSearchNavigator.key ? getPreservedNavigatorState(lastSearchNavigator?.key) : undefined;
@@ -107,9 +101,6 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
                 const {q, ...rest} = lastSearchRoute.params as SearchFullscreenNavigatorParamList[typeof SCREENS.SEARCH.ROOT];
                 const queryJSON = buildSearchQueryJSON(q);
                 if (queryJSON) {
-                    if (!canUseLeftHandBar) {
-                        queryJSON.policyID = activeWorkspaceID;
-                    }
                     const query = buildSearchQueryString(queryJSON);
                     Navigation.navigate(
                         ROUTES.SEARCH_ROOT.getRoute({
@@ -120,11 +111,10 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
                     return;
                 }
             }
-            // when navigating to search we might have an activePolicyID set from workspace switcher
-            const query = activeWorkspaceID && !canUseLeftHandBar ? `${defaultCannedQuery} ${CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID}:${activeWorkspaceID}` : defaultCannedQuery;
-            Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query}));
+
+            Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: buildCannedSearchQuery()}));
         });
-    }, [activeWorkspaceID, canUseLeftHandBar, selectedTab]);
+    }, [selectedTab]);
 
     /**
      * The settings tab is related to SettingsSplitNavigator and WorkspaceSplitNavigator.
@@ -203,7 +193,7 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
         });
     }, [shouldUseNarrowLayout]);
 
-    if (!shouldUseNarrowLayout && canUseLeftHandBar) {
+    if (!shouldUseNarrowLayout) {
         return (
             <>
                 {shouldRenderDebugTabViewOnWideLayout && (
@@ -213,7 +203,7 @@ function NavigationTabBar({selectedTab, isTooltipAllowed = false, isTopLevelBar
                         activeWorkspaceID={activeWorkspaceID}
                     />
                 )}
-                <View style={styles.leftNavigationTabBar}>
+                <View style={styles.leftNavigationTabBarContainer}>
                     <HeaderGap />
                     <View style={styles.flex1}>
                         <PressableWithFeedback

src/components/Navigation/TopBar.tsx

@@ -1,93 +1,56 @@
 import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Breadcrumbs from '@components/Breadcrumbs';
 import LoadingBar from '@components/LoadingBar';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import SearchButton from '@components/Search/SearchRouter/SearchButton';
 import HelpButton from '@components/SidePanel/HelpComponents/HelpButton';
 import Text from '@components/Text';
-import WorkspaceSwitcherButton from '@components/WorkspaceSwitcherButton';
 import useLocalize from '@hooks/useLocalize';
-import usePermissions from '@hooks/usePermissions';
-import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
 import SignInButton from '@pages/home/sidebar/SignInButton';
 import {isAnonymousUser as isAnonymousUserUtil} from '@userActions/Session';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 type TopBarProps = {
     breadcrumbLabel: string;
-    activeWorkspaceID?: string;
     shouldDisplaySearch?: boolean;
     shouldDisplayHelpButton?: boolean;
     shouldShowLoadingBar?: boolean;
     cancelSearch?: () => void;
 };
 
-function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayHelpButton = true, cancelSearch, shouldShowLoadingBar = false}: TopBarProps) {
+function TopBar({breadcrumbLabel, shouldDisplaySearch = true, shouldDisplayHelpButton = true, cancelSearch, shouldShowLoadingBar = false}: TopBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const policy = usePolicy(activeWorkspaceID);
     const [session] = useOnyx(ONYXKEYS.SESSION, {selector: (sessionValue) => sessionValue && {authTokenType: sessionValue.authTokenType}, canBeMissing: true});
     const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {canBeMissing: true});
     const isAnonymousUser = isAnonymousUserUtil(session);
-    const {canUseLeftHandBar} = usePermissions();
-
-    const headerBreadcrumb = policy?.name
-        ? {type: CONST.BREADCRUMB_TYPE.STRONG, text: policy.name}
-        : {
-              type: CONST.BREADCRUMB_TYPE.ROOT,
-          };
 
     const displaySignIn = isAnonymousUser;
     const displaySearch = !isAnonymousUser && shouldDisplaySearch;
 
     return (
         <View style={[styles.w100, styles.zIndex10]}>
             <View
-                style={[
-                    styles.flexRow,
-                    styles.alignItemsCenter,
-                    styles.justifyContentBetween,
-                    styles.ml5,
-                    styles.mr3,
-                    canUseLeftHandBar ? [styles.headerBarDesktopHeight(true)] : [styles.mv5],
-                ]}
+                style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.ml5, styles.mr3, styles.headerBarHeight]}
                 dataSet={{dragArea: true}}
             >
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.pr2]}>
-                    {canUseLeftHandBar ? (
-                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                            <Text
-                                numberOfLines={1}
-                                style={[styles.flexShrink1, styles.topBarLabel]}
-                            >
-                                {breadcrumbLabel}
-                            </Text>
-                        </View>
-                    ) : (
-                        <>
-                            <WorkspaceSwitcherButton policy={policy} />
-                            <View style={[styles.ml3, styles.flex1]}>
-                                <Breadcrumbs
-                                    breadcrumbs={[
-                                        headerBreadcrumb,
-                                        {
-                                            text: breadcrumbLabel,
-                                        },
-                                    ]}
-                                />
-                            </View>
-                        </>
-                    )}
+                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.flexShrink1, styles.topBarLabel]}
+                        >
+                            {breadcrumbLabel}
+                        </Text>
+                    </View>
                 </View>
                 {displaySignIn && <SignInButton />}
                 {!!cancelSearch && (
                     <PressableWithoutFeedback
                         accessibilityLabel={translate('common.cancel')}
-                        style={[styles.textBlue, !canUseLeftHandBar && styles.ph2]}
+                        style={styles.textBlue}
                         onPress={() => {
                             cancelSearch();
                         }}

src/components/Navigation/TopLevelNavigationTabBar/index.tsx

@@ -3,13 +3,11 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import {FullScreenBlockingViewContext} from '@components/FullScreenBlockingViewContextProvider';
 import NavigationTabBar from '@components/Navigation/NavigationTabBar';
-import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types';
-import variables from '@styles/variables';
 import getIsNavigationTabBarVisibleDirectly from './getIsNavigationTabBarVisibleDirectly';
 import getIsScreenWithNavigationTabBarFocused from './getIsScreenWithNavigationTabBarFocused';
 import getSelectedTab from './getSelectedTab';
@@ -33,7 +31,6 @@ function TopLevelNavigationTabBar({state}: TopLevelNavigationTabBarProps) {
     const [isAfterClosingTransition, setIsAfterClosingTransition] = useState(false);
     const cancelAfterInteractions = useRef<ReturnType<typeof InteractionManager.runAfterInteractions> | undefined>(undefined);
     const {isBlockingViewVisible} = useContext(FullScreenBlockingViewContext);
-    const {canUseLeftHandBar} = usePermissions();
     const StyleUtils = useStyleUtils();
 
     // That means it's visible and it's not covered by the overlay.
@@ -43,8 +40,7 @@ function TopLevelNavigationTabBar({state}: TopLevelNavigationTabBarProps) {
 
     const shouldDisplayBottomBar = shouldUseNarrowLayout ? isScreenWithNavigationTabFocused : isNavigationTabVisibleDirectly;
     const isReadyToDisplayBottomBar = isAfterClosingTransition && shouldDisplayBottomBar && !isBlockingViewVisible;
-    const shouldDisplayLHB = canUseLeftHandBar && !shouldUseNarrowLayout;
-    const sidebarWidth = canUseLeftHandBar ? variables.sideBarWithLHBWidth : variables.sideBarWidth;
+    const shouldDisplayLHB = !shouldUseNarrowLayout;
 
     useEffect(() => {
         if (!shouldDisplayBottomBar) {
@@ -63,7 +59,7 @@ function TopLevelNavigationTabBar({state}: TopLevelNavigationTabBarProps) {
     return (
         <View
             style={[
-                styles.topLevelNavigationTabBar(isReadyToDisplayBottomBar, shouldUseNarrowLayout, paddingBottom, sidebarWidth),
+                styles.topLevelNavigationTabBar(isReadyToDisplayBottomBar, shouldUseNarrowLayout, paddingBottom),
                 shouldDisplayLHB ? StyleUtils.positioning.l0 : StyleUtils.positioning.b0,
             ]}
         >