Replace popover menu with scrollable tabs on Reports screen

src/CONST/index.ts

@@ -5945,14 +5945,16 @@ const CONST = {
             NAVIGATE: 'NAVIGATE',
             SET_PARAMS: 'SET_PARAMS',
             PRELOAD: 'PRELOAD',
+            POP: 'POP',
             POP_TO: 'POP_TO',
             GO_BACK: 'GO_BACK',
+            RESET: 'RESET',
 
             /** These action types are custom for RootNavigator */
             DISMISS_MODAL: 'DISMISS_MODAL',
             OPEN_WORKSPACE_SPLIT: 'OPEN_WORKSPACE_SPLIT',
             OPEN_DOMAIN_SPLIT: 'OPEN_DOMAIN_SPLIT',
-            SET_HISTORY_PARAM: 'SET_HISTORY_PARAM',
+            PUSH_PARAMS: 'PUSH_PARAMS',
             REPLACE_PARAMS: 'REPLACE_PARAMS',
             TOGGLE_SIDE_PANEL_WITH_HISTORY: 'TOGGLE_SIDE_PANEL_WITH_HISTORY',
         },

src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

@@ -40,7 +40,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import KeyboardUtils from '@src/utils/keyboard';
-import SearchTypeMenuPopover from './SearchTypeMenuPopover';
 
 // When counting absolute positioning, we need to account for borders
 const BORDER_WIDTH = 1;
@@ -54,7 +53,6 @@ type SearchPageHeaderInputProps = {
 };
 
 function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRouterList, onSearchRouterFocus, handleSearch}: SearchPageHeaderInputProps) {
-    const [showPopupButton, setShowPopupButton] = useState(true);
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -143,17 +141,8 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
         setAutocompleteSubstitutions(substitutionsMap);
     }, [allFeeds, personalAndWorkspaceCards, originalInputQuery, personalDetails, reports, taxRates, policies, currentUserAccountID, translate]);
 
-    useEffect(() => {
-        if (searchRouterListVisible) {
-            return;
-        }
-        setShowPopupButton(true);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [searchRouterListVisible]);
-
     const onFocus = useCallback(() => {
         onSearchRouterFocus?.();
-        setShowPopupButton(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -289,11 +278,6 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
                                 onKeyPress={handleKeyPress}
                             />
                         </Animated.View>
-                        {showPopupButton && (
-                            <View style={[styles.pl3]}>
-                                <SearchTypeMenuPopover queryJSON={queryJSON} />
-                            </View>
-                        )}
                     </View>
                     {!!searchRouterListVisible && (
                         <View style={[styles.flex1]}>

src/components/TabSelector/ScrollableTabSelector/ScrollableTabSelectorBase.tsx

@@ -1,10 +1,11 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import ScrollView from '@components/ScrollView';
 import getBackgroundColor from '@components/TabSelector/getBackground';
 import getOpacity from '@components/TabSelector/getOpacity';
 import type {TabSelectorBaseProps} from '@components/TabSelector/types';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import {ScrollableTabSelectorContext} from './ScrollableTabSelectorContext';
 import ScrollableTabSelectorItem from './ScrollableTabSelectorItem';
 
@@ -30,6 +31,16 @@ function ScrollableTabSelectorBase({tabs, activeTabKey, onTabPress = () => {}, p
 
     const {containerRef, onContainerLayout, onContainerScroll} = useContext(ScrollableTabSelectorContext);
 
+    // After a tab change, reset affectedAnimatedTabs once the transition is done so
+    // tabs settle back into the default animated state.
+    useEffect(() => {
+        const timerID = setTimeout(() => {
+            setAffectedAnimatedTabs(defaultAffectedAnimatedTabs);
+        }, CONST.ANIMATED_TRANSITION);
+
+        return () => clearTimeout(timerID);
+    }, [defaultAffectedAnimatedTabs, activeIndex]);
+
     return (
         <ScrollView
             scrollEventThrottle={MIN_SMOOTH_SCROLL_EVENT_THROTTLE}
@@ -96,6 +107,7 @@ function ScrollableTabSelectorBase({tabs, activeTabKey, onTabPress = () => {}, p
                         sentryLabel={tab.sentryLabel}
                         shouldShowLabelWhenInactive={shouldShowLabelWhenInactive}
                         equalWidth={equalWidth}
+                        badgeText={tab.badgeText}
                     />
                 );
             })}

src/components/TabSelector/ScrollableTabSelector/ScrollableTabSelectorContext.tsx

@@ -1,4 +1,4 @@
-import React, {createContext, useRef} from 'react';
+import React, {createContext, useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView as RNScrollView, View} from 'react-native';
 import scrollToTabUtil from './scrollToTab';
@@ -32,6 +32,7 @@ function ScrollableTabSelectorContextProvider({children, activeTabKey}: Scrollab
     const containerRef = useRef<RNScrollView>(null);
     const containerLayoutRef = useRef<{x: number; width: number}>({x: 0, width: 0});
     const tabsRef = useRef<Record<string, {ref: HTMLDivElement | View | null; width: number; x: number}>>({});
+    const lastPressedTab = useRef('');
 
     const onContainerLayout = (event: LayoutChangeEvent) => {
         const width = event.nativeEvent.layout.width;
@@ -68,11 +69,31 @@ function ScrollableTabSelectorContextProvider({children, activeTabKey}: Scrollab
             return;
         }
 
+        lastPressedTab.current = tabKey;
+
         const {x: tabX, width: tabWidth, ref: tabRef} = tabData;
 
         scrollToTabUtil({tabX, tabWidth, tabRef, containerRef, containerWidth: containerLayoutRef.current.width, containerX: containerLayoutRef.current.x});
     };
 
+    // In case tab is not changed by tapping on a different tab we still
+    // want to scroll to the selected tab to make sure it's in view
+    useEffect(() => {
+        if (!lastPressedTab.current || activeTabKey === lastPressedTab.current) {
+            return;
+        }
+
+        const tabData = tabsRef.current[activeTabKey];
+
+        if (!tabData) {
+            return;
+        }
+
+        const {x: tabX, width: tabWidth, ref: tabRef} = tabData;
+
+        scrollToTabUtil({tabX, tabWidth, tabRef, containerRef, containerWidth: containerLayoutRef.current.width, containerX: containerLayoutRef.current.x});
+    }, [activeTabKey]);
+
     // React Compiler auto-memoization
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     const contextValue = {containerRef, registerTab, onTabLayout, onContainerLayout, onContainerScroll, scrollToTab};

src/components/TabSelector/ScrollableTabSelector/ScrollableTabSelectorItem.tsx

@@ -3,6 +3,7 @@ import React, {useContext, useState} from 'react';
 import type {View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
 import {Animated} from 'react-native';
+import Badge from '@components/Badge';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import TabIcon from '@components/TabSelector/TabIcon';
 import TabLabel from '@components/TabSelector/TabLabel';
@@ -28,6 +29,7 @@ function ScrollableTabSelectorItem({
     testID,
     equalWidth = false,
     sentryLabel,
+    badgeText,
 }: ScrollableTabSelectorItemProps) {
     const styles = useThemeStyles();
     const [isHovered, setIsHovered] = useState(false);
@@ -67,6 +69,12 @@ function ScrollableTabSelectorItem({
                     hasIcon={!!icon}
                 />
             )}
+            {!!badgeText && (
+                <Badge
+                    text={badgeText}
+                    success
+                />
+            )}
         </AnimatedPressableWithFeedback>
     );
 }

src/components/TabSelector/TabSelectorBase.tsx

@@ -134,6 +134,7 @@ function TabSelectorBase({
                         parentWidth={selectorWidth}
                         parentX={selectorX}
                         equalWidth={equalWidth}
+                        badgeText={tab.badgeText}
                     />
                 );
             })}

src/components/TabSelector/TabSelectorItem.tsx

@@ -2,6 +2,7 @@ import React, {useLayoutEffect, useMemo, useRef, useState} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Animated} from 'react-native';
 import type {View} from 'react-native';
+import Badge from '@components/Badge';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
@@ -39,6 +40,7 @@ function TabSelectorItem({
     parentX = 0,
     parentWidth = 0,
     equalWidth = false,
+    badgeText,
 }: TabSelectorItemProps) {
     const styles = useThemeStyles();
     const [isHovered, setIsHovered] = useState(false);
@@ -108,6 +110,12 @@ function TabSelectorItem({
                     hasIcon={!!icon}
                 />
             )}
+            {!!badgeText && (
+                <Badge
+                    text={badgeText}
+                    success
+                />
+            )}
         </AnimatedPressableWithFeedback>
     );
 

src/components/TabSelector/types.ts

@@ -37,6 +37,9 @@ type TabSelectorBaseItem = WithSentryLabel & {
 
     /** Test identifier used to find elements in tests. */
     testID?: string;
+
+    /** Text to display on the badge on the tab. */
+    badgeText?: string;
 };
 
 type TabSelectorBaseProps = {
@@ -101,6 +104,9 @@ type TabSelectorItemProps = WithSentryLabel & {
 
     /** Function to render the content of the product training tooltip. */
     renderProductTrainingTooltip?: () => React.JSX.Element;
+
+    /** Text to display on the badge on the tab. */
+    badgeText?: string;
 };
 
 type AnimationConfigBase = {

src/libs/Navigation/AppNavigator/createRootStackNavigator/index.tsx

@@ -1,6 +1,7 @@
 import type {NavigationProp, NavigatorTypeBagBase, ParamListBase, StaticConfig, TypedNavigator} from '@react-navigation/native';
 import {createNavigatorFactory} from '@react-navigation/native';
 import RootNavigatorExtraContent from '@components/Navigation/RootNavigatorExtraContent';
+import addSidebarRouterExtension from '@libs/Navigation/AppNavigator/routerExtensions/addSidebarRouterExtension';
 import useNavigationResetOnLayoutChange from '@libs/Navigation/AppNavigator/useNavigationResetOnLayoutChange';
 import createPlatformStackNavigatorComponent from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent';
 import defaultPlatformStackScreenOptions from '@libs/Navigation/PlatformStackNavigation/defaultPlatformStackScreenOptions';
@@ -9,7 +10,7 @@ import RootStackRouter from './RootStackRouter';
 import useCustomRootStackNavigatorState from './useCustomRootStackNavigatorState';
 
 const RootStackNavigatorComponent = createPlatformStackNavigatorComponent('RootStackNavigator', {
-    createRouter: RootStackRouter,
+    createRouter: addSidebarRouterExtension(RootStackRouter),
     defaultScreenOptions: defaultPlatformStackScreenOptions,
     useCustomEffects: useNavigationResetOnLayoutChange,
     useCustomState: useCustomRootStackNavigatorState,

src/libs/Navigation/AppNavigator/createSearchFullscreenNavigator/index.tsx

@@ -2,6 +2,7 @@ import type {NavigationProp, NavigatorTypeBagBase, ParamListBase, StaticConfig,
 import {createNavigatorFactory} from '@react-navigation/native';
 import SearchSidebar from '@components/Navigation/SearchSidebar';
 import usePreserveNavigatorState from '@libs/Navigation/AppNavigator/createSplitNavigator/usePreserveNavigatorState';
+import addPushParamsRouterExtension from '@libs/Navigation/AppNavigator/routerExtensions/addPushParamsRouterExtension';
 import useNavigationResetOnLayoutChange from '@libs/Navigation/AppNavigator/useNavigationResetOnLayoutChange';
 import createPlatformStackNavigatorComponent from '@navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent';
 import defaultPlatformStackScreenOptions from '@navigation/PlatformStackNavigation/defaultPlatformStackScreenOptions';
@@ -15,7 +16,7 @@ function useCustomEffects(props: CustomEffectsHookProps) {
 }
 
 const SearchFullscreenNavigatorComponent = createPlatformStackNavigatorComponent('SearchFullscreenNavigator', {
-    createRouter: SearchFullscreenRouter,
+    createRouter: addPushParamsRouterExtension(SearchFullscreenRouter),
     defaultScreenOptions: defaultPlatformStackScreenOptions,
     useCustomEffects,
     useCustomState,

src/libs/Navigation/AppNavigator/createSplitNavigator/SplitRouter.ts

@@ -116,9 +116,19 @@ function shouldPopEntireNavigator(state: StackState, action: CommonActions.Actio
 
 function SplitRouter(options: SplitNavigatorRouterOptions) {
     const stackRouter = StackRouter(options);
+
+    const getRehydratedState = (partialState: StackState, configOptions: RouterConfigOptions): StackNavigationState<ParamListBase> => {
+        const adaptedState = adaptStateIfNecessary({state: partialState, options});
+        return stackRouter.getRehydratedState(adaptedState, configOptions);
+    };
+
     return {
         ...stackRouter,
         getStateForAction(state: StackNavigationState<ParamListBase>, action: CommonActions.Action | StackActionType, configOptions: RouterConfigOptions) {
+            if (action.type === CONST.NAVIGATION.ACTION_TYPE.RESET) {
+                const result = stackRouter.getStateForAction(state, action, configOptions);
+                return result ? getRehydratedState(result, configOptions) : result;
+            }
             if (isPushingSidebarOnCentralPane(state, action, options)) {
                 if (getIsNarrowLayout()) {
                     const newAction = StackActions.popToTop();
@@ -147,10 +157,7 @@ function SplitRouter(options: SplitNavigatorRouterOptions) {
             return maybeAdaptedState as StackNavigationState<ParamListBase>;
         },
 
-        getRehydratedState(partialState: StackState, {routeNames, routeParamList, routeGetIdList}: RouterConfigOptions): StackNavigationState<ParamListBase> {
-            const adaptedState = adaptStateIfNecessary({state: partialState, options});
-            return stackRouter.getRehydratedState(adaptedState, {routeNames, routeParamList, routeGetIdList});
-        },
+        getRehydratedState,
     };
 }