Replace popover menu with scrollable tabs on Reports screen

src/CONST/index.ts

@@ -6033,14 +6033,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/TabLabel.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Animated, StyleSheet, View} from 'react-native';
+import type {StyleProp, TextStyle} from 'react-native';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
 
 type TabLabelProps = {
     /** Title of the tab */
@@ -16,17 +18,30 @@ type TabLabelProps = {
 
     /** Whether an icon is present - used to conditionally apply margin */
     hasIcon?: boolean;
+
+    /** Text style */
+    textStyle?: StyleProp<TextStyle>;
 };
 
-function TabLabel({title = '', activeOpacity = 0, inactiveOpacity = 1, hasIcon = false}: TabLabelProps) {
+function TabLabel({title = '', activeOpacity = 0, inactiveOpacity = 1, hasIcon = false, textStyle = false}: TabLabelProps) {
     const styles = useThemeStyles();
     return (
-        <View>
+        <View style={{maxWidth: variables.tabSelectorMaxTabLabelWidth}}>
             <Animated.View style={[{opacity: activeOpacity}]}>
-                <Text style={styles.tabText(true, hasIcon)}>{title}</Text>
+                <Text
+                    numberOfLines={1}
+                    style={[styles.tabText(true, hasIcon), textStyle]}
+                >
+                    {title}
+                </Text>
             </Animated.View>
             <Animated.View style={[StyleSheet.absoluteFill, {opacity: inactiveOpacity}]}>
-                <Text style={styles.tabText(false, hasIcon)}>{title}</Text>
+                <Text
+                    numberOfLines={1}
+                    style={[styles.tabText(false, hasIcon), textStyle]}
+                >
+                    {title}
+                </Text>
             </Animated.View>
         </View>
     );

src/components/TabSelector/TabSelector.tsx

@@ -12,6 +12,7 @@ function TabSelector({
     state,
     navigation,
     onTabPress = () => {},
+    onLongTabPress,
     position,
     onFocusTrapContainerElementChanged,
     shouldShowLabelWhenInactive = true,
@@ -66,6 +67,7 @@ function TabSelector({
                     tabs={tabs}
                     activeTabKey={activeRouteName}
                     onTabPress={handleTabPress}
+                    onLongTabPress={onLongTabPress}
                     position={position}
                     shouldShowLabelWhenInactive={shouldShowLabelWhenInactive}
                     shouldShowProductTrainingTooltip={shouldShowProductTrainingTooltip}

src/components/TabSelector/TabSelectorBase.tsx

@@ -22,6 +22,8 @@ function TabSelectorBase({
     tabs,
     activeTabKey,
     onTabPress = () => {},
+    onLongTabPress,
+    onActiveTabPress = () => {},
     position,
     shouldShowLabelWhenInactive = true,
     equalWidth = false,
@@ -64,6 +66,7 @@ function TabSelectorBase({
             contentContainerStyle={styles.tabSelectorContentContainer}
             horizontal
             showsHorizontalScrollIndicator={false}
+            keyboardShouldPersistTaps="handled"
         >
             {tabs.map((tab, index) => {
                 const isActive = index === activeIndex;
@@ -94,9 +97,9 @@ function TabSelectorBase({
 
                 const handlePress = () => {
                     if (isActive) {
+                        onActiveTabPress(tab.key);
                         return;
                     }
-
                     setAffectedAnimatedTabs([activeIndex, index]);
                     onTabPress(tab.key);
                 };
@@ -108,6 +111,7 @@ function TabSelectorBase({
                         icon={tab.icon}
                         title={tab.title}
                         onPress={handlePress}
+                        onLongPress={onLongTabPress ? () => onLongTabPress(tab.key) : undefined}
                         activeOpacity={activeOpacity}
                         inactiveOpacity={inactiveOpacity}
                         backgroundColor={backgroundColor}
@@ -118,6 +122,9 @@ function TabSelectorBase({
                         shouldShowProductTrainingTooltip={shouldShowProductTrainingTooltip}
                         renderProductTrainingTooltip={renderProductTrainingTooltip}
                         equalWidth={equalWidth}
+                        badgeText={tab.badgeText}
+                        pendingAction={tab.pendingAction}
+                        disabled={tab.disabled}
                     />
                 );
             })}

src/components/TabSelector/TabSelectorContext.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 TabSelectorContextProvider({children, activeTabKey}: TabSelectorContext
     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 lastScrolledToTab = useRef('');
 
     const onContainerLayout = (event: LayoutChangeEvent) => {
         const width = event.nativeEvent.layout.width;
@@ -68,11 +69,33 @@ function TabSelectorContextProvider({children, activeTabKey}: TabSelectorContext
             return;
         }
 
+        lastScrolledToTab.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 (!lastScrolledToTab.current || activeTabKey === lastScrolledToTab.current) {
+            return;
+        }
+
+        lastScrolledToTab.current = activeTabKey;
+
+        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 = {

src/components/TabSelector/TabSelectorItem.tsx

@@ -2,9 +2,11 @@ import React, {useContext, 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';
+import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -22,6 +24,7 @@ function TabSelectorItem({
     icon,
     title = '',
     onPress = () => {},
+    onLongPress,
     backgroundColor = '',
     activeOpacity = 0,
     inactiveOpacity = 1,
@@ -32,7 +35,12 @@ function TabSelectorItem({
     shouldShowProductTrainingTooltip = false,
     renderProductTrainingTooltip,
     equalWidth = false,
+    badgeText,
+    disabled = false,
+    pendingAction,
 }: TabSelectorItemProps) {
+    const {isOffline} = useNetwork();
+
     const styles = useThemeStyles();
     const [isHovered, setIsHovered] = useState(false);
     const shouldShowEducationalTooltip = shouldShowProductTrainingTooltip && isActive;
@@ -41,14 +49,23 @@ function TabSelectorItem({
 
     const accessibilityState = {selected: isActive};
 
+    const isOfflinePendingAction = !!isOffline && !!pendingAction;
+    const needsStrikeThrough = isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+
     const children = (
         <AnimatedPressableWithFeedback
             ref={(ref: HTMLDivElement | View | null) => registerTab(tabKey, ref)}
             accessibilityLabel={title}
             accessibilityState={accessibilityState}
             accessibilityRole={CONST.ROLE.TAB}
-            style={[styles.tabSelectorButton, styles.tabBackground(isHovered, isActive, backgroundColor), styles.userSelectNone]}
-            wrapperStyle={[equalWidth ? styles.flex1 : styles.flexGrow1]}
+            style={[
+                styles.tabSelectorButton,
+                styles.tabBackground(isHovered, isActive, disabled, backgroundColor),
+                styles.userSelectNone,
+                isOfflinePendingAction && styles.offlineFeedbackPending,
+            ]}
+            wrapperStyle={equalWidth ? styles.flex1 : styles.flexGrow1}
+            onLongPress={onLongPress}
             onPress={() => {
                 scrollToTab(tabKey);
                 onPress();
@@ -60,20 +77,28 @@ function TabSelectorItem({
             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             testID={testID}
             sentryLabel={sentryLabel}
+            disabled={disabled}
         >
             <TabIcon
                 icon={icon}
-                activeOpacity={styles.tabOpacity(isHovered, isActive, activeOpacity, inactiveOpacity).opacity}
-                inactiveOpacity={styles.tabOpacity(isHovered, isActive, inactiveOpacity, activeOpacity).opacity}
+                activeOpacity={styles.tabOpacity(disabled, isHovered, isActive, activeOpacity, inactiveOpacity).opacity}
+                inactiveOpacity={styles.tabOpacity(disabled, isHovered, isActive, inactiveOpacity, activeOpacity).opacity}
             />
             {(shouldShowLabelWhenInactive || isActive) && (
                 <TabLabel
+                    textStyle={needsStrikeThrough && styles.offlineFeedbackDeleted}
                     title={title}
-                    activeOpacity={styles.tabOpacity(isHovered, isActive, activeOpacity, inactiveOpacity).opacity}
-                    inactiveOpacity={styles.tabOpacity(isHovered, isActive, inactiveOpacity, activeOpacity).opacity}
+                    activeOpacity={styles.tabOpacity(disabled, isHovered, isActive, activeOpacity, inactiveOpacity).opacity}
+                    inactiveOpacity={styles.tabOpacity(disabled, isHovered, isActive, inactiveOpacity, activeOpacity).opacity}
                     hasIcon={!!icon}
                 />
             )}
+            {!!badgeText && (
+                <Badge
+                    text={badgeText}
+                    success
+                />
+            )}
         </AnimatedPressableWithFeedback>
     );