fix: update grouped expense on search page

src/components/Button/index.tsx

@@ -1,6 +1,6 @@
 import {useIsFocused} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {ActivityIndicator, View} from 'react-native';
 import Icon from '@components/Icon';
@@ -89,6 +89,9 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Whether we should use the danger theme color */
     danger?: boolean;
 
+    /** Whether we should display the button as a link */
+    link?: boolean;
+
     /** Should we remove the right border radius top + bottom? */
     shouldRemoveRightBorderRadius?: boolean;
 
@@ -205,6 +208,7 @@ function Button(
         id = '',
         accessibilityLabel = '',
         isSplitButton = false,
+        link = false,
         isContentCentered = false,
         ...rest
     }: ButtonProps,
@@ -213,6 +217,7 @@ function Button(
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const [isHovered, setIsHovered] = useState(false);
 
     const renderContent = () => {
         if ('children' in rest) {
@@ -233,6 +238,10 @@ function Button(
                     danger && styles.buttonDangerText,
                     !!icon && styles.textAlignLeft,
                     textStyles,
+                    link && styles.link,
+                    link && isHovered && StyleUtils.getColorStyle(theme.linkHover),
+                    link && styles.fontWeightNormal,
+                    link && styles.fontSizeLabel,
                 ]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
@@ -343,6 +352,7 @@ function Button(
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                     text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
                     innerStyles,
+                    link && styles.bgTransparent,
                 ]}
                 hoverStyle={[
                     shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
@@ -353,6 +363,8 @@ function Button(
                 accessibilityLabel={accessibilityLabel}
                 role={CONST.ROLE.BUTTON}
                 hoverDimmingValue={1}
+                onHoverIn={() => setIsHovered(true)}
+                onHoverOut={() => setIsHovered(false)}
             >
                 {renderContent()}
                 {isLoading && (

src/components/SelectionList/Search/ActionCell.tsx

@@ -31,9 +31,19 @@ type ActionCellProps = {
     isLargeScreenWidth?: boolean;
     isSelected?: boolean;
     goToItem: () => void;
+    isChildListItem?: boolean;
+    parentAction?: string;
 };
 
-function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isLargeScreenWidth = true, isSelected = false, goToItem}: ActionCellProps) {
+function ActionCell({
+    action = CONST.SEARCH.ACTION_TYPES.VIEW,
+    transactionID,
+    isLargeScreenWidth = true,
+    isSelected = false,
+    goToItem,
+    isChildListItem = false,
+    parentAction = '',
+}: ActionCellProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -53,13 +63,11 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL
         }
     }, [action, currentSearchHash, transactionID]);
 
-    if (!isLargeScreenWidth) {
-        return null;
-    }
-
     const text = translate(actionTranslationsMap[action]);
 
-    if (action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE) {
+    const shouldUseViewAction = action === CONST.SEARCH.ACTION_TYPES.VIEW || (parentAction === CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID);
+
+    if ((parentAction !== CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE) {
         return (
             <View style={[StyleUtils.getHeight(variables.h28), styles.justifyContentCenter]}>
                 <Badge
@@ -84,7 +92,22 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL
 
     const buttonInnerStyles = isSelected ? styles.buttonDefaultHovered : {};
 
-    if (action === CONST.SEARCH.ACTION_TYPES.VIEW || action === CONST.SEARCH.ACTION_TYPES.REVIEW) {
+    if (action === CONST.SEARCH.ACTION_TYPES.VIEW || shouldUseViewAction) {
+        return isLargeScreenWidth ? (
+            <Button
+                text={translate(actionTranslationsMap[CONST.SEARCH.ACTION_TYPES.VIEW])}
+                onPress={goToItem}
+                small
+                pressOnEnter
+                style={[styles.w100]}
+                innerStyles={buttonInnerStyles}
+                link={isChildListItem}
+                shouldUseDefaultHover={!isChildListItem}
+            />
+        ) : null;
+    }
+
+    if (action === CONST.SEARCH.ACTION_TYPES.REVIEW) {
         return (
             <Button
                 text={text}
@@ -96,7 +119,6 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL
             />
         );
     }
-
     return (
         <Button
             text={text}

src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx

@@ -94,6 +94,7 @@ function ExpenseItemHeaderNarrow({
                     action={action}
                     transactionID={transactionID}
                     goToItem={onButtonPress}
+                    isLargeScreenWidth={false}
                 />
             </View>
         </View>

src/components/SelectionList/Search/ReportListItem.tsx

@@ -5,7 +5,6 @@ import BaseListItem from '@components/SelectionList/BaseListItem';
 import type {ListItem, ReportListItemProps, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
-import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -65,15 +64,14 @@ function ReportListItem<TItem extends ListItem>({
     const reportItem = item as unknown as ReportListItemType;
 
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
     const {isLargeScreenWidth} = useWindowDimensions();
     const StyleUtils = useStyleUtils();
 
     if (reportItem.transactions.length === 0) {
         return;
     }
 
-    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive];
+    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, styles.ph3];
 
     const handleOnButtonPress = () => {
         onSelectRow(item);
@@ -148,7 +146,7 @@ function ReportListItem<TItem extends ListItem>({
                         onButtonPress={handleOnButtonPress}
                     />
                 )}
-                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
+                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.mnh40]}>
                     <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
                             {canSelectMultiple && (
@@ -163,7 +161,6 @@ function ReportListItem<TItem extends ListItem>({
                             )}
                             <View style={[styles.flexShrink1, isLargeScreenWidth && styles.ph4]}>
                                 <Text style={[styles.reportListItemTitle]}>{reportItem?.reportName}</Text>
-                                <Text style={[styles.textMicroSupporting]}>{`${reportItem.transactions.length} ${translate('search.groupedExpenses')}`}</Text>
                             </View>
                         </View>
                         <View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>
@@ -175,22 +172,18 @@ function ReportListItem<TItem extends ListItem>({
                         </View>
                     </View>
                     {isLargeScreenWidth && (
-                        <>
-                            {/** We add an empty view with type style to align the total with the table header */}
-                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)} />
-                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
-                                <ActionCell
-                                    action={reportItem.action}
-                                    goToItem={handleOnButtonPress}
-                                    isSelected={item.isSelected}
-                                />
-                            </View>
-                        </>
+                        <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
+                            <ActionCell
+                                action={reportItem.action}
+                                goToItem={handleOnButtonPress}
+                                isSelected={item.isSelected}
+                            />
+                        </View>
                     )}
                 </View>
-                <View style={[styles.mt3, styles.reportListItemSeparator]} />
                 {reportItem.transactions.map((transaction) => (
                     <TransactionListItemRow
+                        parentAction={reportItem.action}
                         item={transaction}
                         showTooltip={showTooltip}
                         onButtonPress={() => {

src/components/SelectionList/Search/TransactionListItemRow.tsx

@@ -53,6 +53,7 @@ type TransactionListItemRowProps = {
     isDisabled: boolean;
     canSelectMultiple: boolean;
     isButtonSelected?: boolean;
+    parentAction?: string;
     shouldShowTransactionCheckbox?: boolean;
 };
 
@@ -242,6 +243,7 @@ function TransactionListItemRow({
     containerStyle,
     isChildListItem = false,
     isButtonSelected = false,
+    parentAction = '',
     shouldShowTransactionCheckbox,
 }: TransactionListItemRowProps) {
     const styles = useThemeStyles();
@@ -356,6 +358,13 @@ function TransactionListItemRow({
                         showTooltip={false}
                     />
                 </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)]}>
+                    <TypeCell
+                        transactionItem={item}
+                        isLargeScreenWidth={isLargeScreenWidth}
+                        showTooltip={false}
+                    />
+                </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, item.shouldShowYear)]}>
                     <DateCell
                         transactionItem={item}
@@ -418,18 +427,13 @@ function TransactionListItemRow({
                         isChildListItem={isChildListItem}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)]}>
-                    <TypeCell
-                        transactionItem={item}
-                        isLargeScreenWidth
-                        showTooltip={false}
-                    />
-                </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
                         action={item.action}
                         transactionID={item.transactionID}
                         isSelected={isButtonSelected}
+                        isChildListItem={isChildListItem}
+                        parentAction={parentAction}
                         goToItem={onButtonPress}
                     />
                 </View>

src/components/SelectionList/SearchTableHeader.tsx

@@ -25,6 +25,12 @@ const SearchColumns: SearchColumnConfig[] = [
         shouldShow: () => true,
         isColumnSortable: false,
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TYPE,
+        translationKey: 'common.type',
+        shouldShow: () => true,
+        isColumnSortable: false,
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.DATE,
         translationKey: 'common.date',
@@ -71,12 +77,6 @@ const SearchColumns: SearchColumnConfig[] = [
         translationKey: 'common.total',
         shouldShow: () => true,
     },
-    {
-        columnName: CONST.SEARCH.TABLE_COLUMNS.TYPE,
-        translationKey: 'common.type',
-        shouldShow: () => true,
-        isColumnSortable: false,
-    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION,
         translationKey: 'common.action',

src/styles/index.ts

@@ -340,6 +340,9 @@ const styles = (theme: ThemeColors) =>
         appBG: {
             backgroundColor: theme.appBG,
         },
+        fontSizeLabel: {
+            fontSize: variables.fontSizeLabel,
+        },
 
         h4: {
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
@@ -5078,15 +5081,9 @@ const styles = (theme: ThemeColors) =>
             height: 172,
         },
 
-        reportListItemSeparator: {
-            borderBottomWidth: 1,
-            borderBottomColor: theme.activeComponentBG,
-        },
-
         reportListItemTitle: {
             color: theme.text,
             fontSize: variables.fontSizeNormal,
-            fontWeight: FontUtils.fontWeight.bold,
         },
 
         skeletonBackground: {

src/styles/utils/sizing.ts

@@ -44,6 +44,9 @@ export default {
     mnh20: {
         minHeight: 80,
     },
+    mnh40: {
+        minHeight: 40,
+    },
 
     mnh0: {
         minHeight: 0,