Initial implementation of the Side Pane

patches/@react-navigation+core+6.4.11+004+side-pane.patch

@@ -0,0 +1,92 @@
+diff --git a/node_modules/@react-navigation/core/lib/module/useDescriptors.js b/node_modules/@react-navigation/core/lib/module/useDescriptors.js
+index 76fdab1..75f315c 100644
+--- a/node_modules/@react-navigation/core/lib/module/useDescriptors.js
++++ b/node_modules/@react-navigation/core/lib/module/useDescriptors.js
+@@ -112,6 +112,19 @@ export default function useDescriptors(_ref, convertCustomScreenOptions) {
+       }
+       return o;
+     });
++    const SidePane = customOptions.sidePane;
++    let element = /*#__PURE__*/React.createElement(React.Fragment, {
++      children: [/*#__PURE__*/React.createElement(SceneView, {
++        navigation: navigation,
++        route: route,
++        screen: screen,
++        routeState: state.routes[i].state,
++        getState: getState,
++        setState: setState,
++        options: customOptions,
++        clearOptions: clearOptions
++      }), SidePane && /*#__PURE__*/React.createElement(SidePane, {})]
++    });
+     acc[route.key] = {
+       route,
+       // @ts-expect-error: it's missing action helpers, fix later
+@@ -123,17 +136,10 @@ export default function useDescriptors(_ref, convertCustomScreenOptions) {
+         }, /*#__PURE__*/React.createElement(NavigationContext.Provider, {
+           value: navigation
+         }, /*#__PURE__*/React.createElement(NavigationRouteContext.Provider, {
+-          value: route
+-        }, /*#__PURE__*/React.createElement(SceneView, {
+-          navigation: navigation,
+-          route: route,
+-          screen: screen,
+-          routeState: state.routes[i].state,
+-          getState: getState,
+-          setState: setState,
+-          options: mergedOptions,
+-          clearOptions: clearOptions
+-        }))));
++          value: route,
++          children: element
++        }, 
++      )));
+       },
+       options: mergedOptions
+     };
+diff --git a/node_modules/@react-navigation/core/src/useDescriptors.tsx b/node_modules/@react-navigation/core/src/useDescriptors.tsx
+index 2e4ee0f..11ece43 100644
+--- a/node_modules/@react-navigation/core/src/useDescriptors.tsx
++++ b/node_modules/@react-navigation/core/src/useDescriptors.tsx
+@@ -238,6 +238,23 @@ export default function useDescriptors<
+         return o;
+       });
+
++    const SidePane = (customOptions as any).sidePane;
++    let element = (
++        <>
++            <SceneView
++                navigation={navigation}
++                route={route}
++                screen={screen}
++                routeState={state.routes[i].state}
++                getState={getState}
++                setState={setState}
++                options={customOptions}
++                clearOptions={clearOptions}
++            />
++            {SidePane && <SidePane />}
++        </>
++    );
++
+     acc[route.key] = {
+       route,
+       // @ts-expect-error: it's missing action helpers, fix later
+@@ -247,16 +264,7 @@ export default function useDescriptors<
+           <NavigationBuilderContext.Provider key={route.key} value={context}>
+             <NavigationContext.Provider value={navigation}>
+               <NavigationRouteContext.Provider value={route}>
+-                <SceneView
+-                  navigation={navigation}
+-                  route={route}
+-                  screen={screen}
+-                  routeState={state.routes[i].state}
+-                  getState={getState}
+-                  setState={setState}
+-                  options={mergedOptions}
+-                  clearOptions={clearOptions}
+-                />
++                {element}
+               </NavigationRouteContext.Provider>
+             </NavigationContext.Provider>
+           </NavigationBuilderContext.Provider>

src/ONYXKEYS.ts

@@ -479,6 +479,9 @@ const ONYXKEYS = {
     /** Information about travel provisioning process */
     TRAVEL_PROVISIONING: 'travelProvisioning',
 
+    /** Stores the information about the state of side panel */
+    NVP_SIDE_PANE: 'nvp_sidePaneExpanded',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -1081,6 +1084,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.CORPAY_ONBOARDING_FIELDS]: OnyxTypes.CorpayOnboardingFields;
     [ONYXKEYS.LAST_FULL_RECONNECT_TIME]: string;
     [ONYXKEYS.TRAVEL_PROVISIONING]: OnyxTypes.TravelProvisioning;
+    [ONYXKEYS.NVP_SIDE_PANE]: OnyxTypes.SidePane;
 };
 
 type OnyxDerivedValuesMapping = {

src/components/HeaderWithBackButton/index.tsx

@@ -8,6 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PinButton from '@components/PinButton';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import SearchButton from '@components/Search/SearchRouter/SearchButton';
+import HelpButton from '@components/SidePane/HelpButton';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
@@ -65,6 +66,7 @@ function HeaderWithBackButton({
     shouldOverlayDots = false,
     shouldOverlay = false,
     shouldNavigateToTopMostReport = false,
+    shouldDisplayHelpButton = true,
     shouldDisplaySearchRouter = false,
     progressBarPercentage,
     style,
@@ -275,6 +277,7 @@ function HeaderWithBackButton({
                         </Tooltip>
                     )}
                 </View>
+                {shouldDisplayHelpButton && <HelpButton />}
                 {shouldDisplaySearchRouter && <SearchButton style={styles.mr5} />}
             </View>
         </View>

src/components/HeaderWithBackButton/types.ts

@@ -143,6 +143,9 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** Whether we should overlay the 3 dots menu */
     shouldOverlayDots?: boolean;
 
+    /** Whether we should display the button that opens the help pane */
+    shouldDisplayHelpButton?: boolean;
+
     /** Whether we should display the button that opens new SearchRouter */
     shouldDisplaySearchRouter?: boolean;
 

src/components/Navigation/TopBar.tsx

@@ -5,6 +5,7 @@ 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/SidePane/HelpButton';
 import Text from '@components/Text';
 import WorkspaceSwitcherButton from '@components/WorkspaceSwitcherButton';
 import useLocalize from '@hooks/useLocalize';
@@ -19,10 +20,11 @@ type TopBarProps = {
     breadcrumbLabel: string;
     activeWorkspaceID?: string;
     shouldDisplaySearch?: boolean;
+    shouldDisplaySidePane?: boolean;
     cancelSearch?: () => void;
 };
 
-function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, cancelSearch}: TopBarProps) {
+function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplaySidePane = true, cancelSearch}: TopBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policy = usePolicy(activeWorkspaceID);
@@ -71,6 +73,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
                         <Text style={[styles.textBlue]}>{translate('common.cancel')}</Text>
                     </PressableWithoutFeedback>
                 )}
+                {shouldDisplaySidePane && <HelpButton />}
                 {displaySearch && <SearchButton />}
             </View>
             <LoadingBar shouldShow={isLoadingReportData ?? false} />

src/components/Navigation/TopLevelBottomTabBar/index.tsx

@@ -4,6 +4,7 @@ import {InteractionManager, View} from 'react-native';
 import {FullScreenBlockingViewContext} from '@components/FullScreenBlockingViewContextProvider';
 import BottomTabBar from '@components/Navigation/BottomTabBar';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useSidePane from '@hooks/useSidePane';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -30,11 +31,12 @@ function TopLevelBottomTabBar({state}: TopLevelBottomTabBarProps) {
     const [isAfterClosingTransition, setIsAfterClosingTransition] = useState(false);
     const cancelAfterInteractions = useRef<ReturnType<typeof InteractionManager.runAfterInteractions> | undefined>();
     const {isBlockingViewVisible} = useContext(FullScreenBlockingViewContext);
+    const {shouldHideTopLevelBottomBar} = useSidePane();
 
     // That means it's visible and it's not covered by the overlay.
-    const isBottomTabVisibleDirectly = getIsBottomTabVisibleDirectly(state);
+    const isBottomTabVisibleDirectly = getIsBottomTabVisibleDirectly(state) && !shouldHideTopLevelBottomBar;
+    const isScreenWithBottomTabFocused = getIsScreenWithBottomTabFocused(state) && !shouldHideTopLevelBottomBar;
     const selectedTab = getSelectedTab(state);
-    const isScreenWithBottomTabFocused = getIsScreenWithBottomTabFocused(state);
 
     const shouldDisplayBottomBar = shouldUseNarrowLayout ? isScreenWithBottomTabFocused : isBottomTabVisibleDirectly;
     const isReadyToDisplayBottomBar = isAfterClosingTransition && shouldDisplayBottomBar && !isBlockingViewVisible;

src/components/Search/SearchAutocompleteInput.tsx

@@ -13,6 +13,7 @@ import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {parseFSAttributes} from '@libs/Fullstory';
@@ -104,6 +105,7 @@ function SearchAutocompleteInput(
     const {isOffline} = useNetwork();
     const {activeWorkspaceID} = useActiveWorkspace();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST);
     const currencyAutocompleteList = Object.keys(currencyList ?? {});
@@ -191,7 +193,7 @@ function SearchAutocompleteInput(
         <View style={[outerWrapperStyle]}>
             <Animated.View
                 style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, wrapperAnimatedStyle]}
-                layout={LinearTransition}
+                layout={shouldUseNarrowLayout ? LinearTransition : undefined}
             >
                 <View
                     style={styles.flex1}

src/components/SidePane/HelpButton.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import Tooltip from '@components/Tooltip';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {triggerSidePane} from '@libs/actions/SidePane';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type HelpButtonProps = {
+    style?: StyleProp<ViewStyle>;
+};
+
+function HelpButton({style}: HelpButtonProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const {translate} = useLocalize();
+    const [sidePane] = useOnyx(ONYXKEYS.NVP_SIDE_PANE);
+    const [language] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE);
+    const {isExtraLargeScreenWidth} = useResponsiveLayout();
+
+    if (!sidePane || language !== CONST.LOCALES.EN) {
+        return null;
+    }
+
+    return (
+        <Tooltip text={translate('common.help')}>
+            <PressableWithoutFeedback
+                accessibilityLabel={translate('common.help')}
+                style={[styles.flexRow, styles.touchableButtonImage, styles.pr2, style]}
+                onPress={() => triggerSidePane(isExtraLargeScreenWidth ? !sidePane?.open : !sidePane?.openNarrowScreen, {shouldUpdateNarrowLayout: !isExtraLargeScreenWidth})}
+            >
+                <Icon
+                    src={Expensicons.QuestionMark}
+                    fill={theme.icon}
+                />
+            </PressableWithoutFeedback>
+        </Tooltip>
+    );
+}
+
+HelpButton.displayName = 'HelpButton';
+
+export default HelpButton;

src/components/SidePane/getHelpContent.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import type {ThemeStyles} from '@styles/index';
+
+const getHelpContent = (styles: ThemeStyles, route: string) => {
+    return (
+        <View style={styles.ph5}>
+            <Text style={[styles.textHeadlineH1, styles.mb4]}>Missing page for route</Text>
+            <Text style={styles.textNormal}>{route}</Text>
+        </View>
+    );
+};
+
+export default getHelpContent;

src/components/SidePane/index.tsx

@@ -0,0 +1,91 @@
+import {findFocusedRoute, useNavigationState} from '@react-navigation/native';
+import React, {useCallback, useEffect, useRef} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {Animated, View} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Backdrop from '@components/Modal/BottomDockedModal/Backdrop';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useSidePane from '@hooks/useSidePane';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {triggerSidePane} from '@libs/actions/SidePane';
+import Navigation from '@libs/Navigation/Navigation';
+import {substituteRouteParameters} from '@libs/SidePaneUtils';
+import NAVIGATORS from '@src/NAVIGATORS';
+import getHelpContent from './getHelpContent';
+
+function SidePane({shouldShowOverlay = false}: {shouldShowOverlay?: boolean}) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
+    const {sidePaneTranslateX, shouldHideSidePane, shouldHideSidePaneBackdrop} = useSidePane();
+
+    const {route, isInNarrowPaneModal} = useNavigationState((state) => {
+        const params = (findFocusedRoute(state)?.params as Record<string, string>) ?? {};
+        const activeRoute = Navigation.getActiveRouteWithoutParams();
+        return {route: substituteRouteParameters(activeRoute, params), isInNarrowPaneModal: state.routes.some((r) => r.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR)};
+    });
+
+    const onClose = useCallback(
+        (shouldUpdateNarrow = false) => {
+            triggerSidePane(false, {shouldOnlyUpdateNarrowLayout: !isExtraLargeScreenWidth || shouldUpdateNarrow});
+        },
+        [isExtraLargeScreenWidth],
+    );
+
+    const sizeChangedFromLargeToNarrow = useRef(!isExtraLargeScreenWidth);
+    useEffect(() => {
+        // Close the side pane when the screen size changes from large to small
+        if (!isExtraLargeScreenWidth && !sizeChangedFromLargeToNarrow.current) {
+            onClose(true);
+            sizeChangedFromLargeToNarrow.current = true;
+        }
+
+        // Reset the trigger when the screen size changes back to large
+        if (isExtraLargeScreenWidth) {
+            sizeChangedFromLargeToNarrow.current = false;
+        }
+    }, [isExtraLargeScreenWidth, onClose]);
+
+    if (shouldHideSidePane) {
+        return null;
+    }
+
+    return (
+        <>
+            <View>
+                {shouldShowOverlay && !shouldHideSidePaneBackdrop && !isInNarrowPaneModal && (
+                    <Backdrop
+                        onBackdropPress={onClose}
+                        style={styles.sidePaneOverlay}
+                    />
+                )}
+            </View>
+            <Animated.View style={[styles.sidePaneContainer(shouldUseNarrowLayout, isExtraLargeScreenWidth), {transform: [{translateX: sidePaneTranslateX.current}]}]}>
+                <ScreenWrapper testID={SidePane.displayName}>
+                    <HeaderWithBackButton
+                        title={translate('common.help')}
+                        style={styles.headerBarDesktopHeight}
+                        onBackButtonPress={() => onClose(false)}
+                        onCloseButtonPress={() => onClose(false)}
+                        shouldShowBackButton={!isExtraLargeScreenWidth}
+                        shouldShowCloseButton={isExtraLargeScreenWidth}
+                        shouldDisplayHelpButton={false}
+                    />
+                    {getHelpContent(styles, route)}
+                </ScreenWrapper>
+            </Animated.View>
+        </>
+    );
+}
+
+function SidePaneWithOverlay() {
+    return <SidePane shouldShowOverlay />;
+}
+
+SidePane.displayName = 'SidePane';
+
+export default SidePane;
+export {SidePaneWithOverlay, useSidePane as useAnimatedPaddingRight};

src/hooks/useResponsiveLayout/index.native.ts

@@ -29,6 +29,7 @@ export default function useResponsiveLayout(): ResponsiveLayoutResult {
     const isSmallScreenWidth = true;
     const isMediumScreenWidth = false;
     const isLargeScreenWidth = false;
+    const isExtraLargeScreenWidth = false;
     const isExtraSmallScreenWidth = windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
     const isSmallScreen = true;
 
@@ -74,5 +75,6 @@ export default function useResponsiveLayout(): ResponsiveLayoutResult {
         onboardingIsMediumOrLargerScreenWidth,
         isLargeScreenWidth,
         isSmallScreen,
+        isExtraLargeScreenWidth,
     };
 }