Skip to content

[cp staging] Revert https://github.com/Expensify/App/pull/88296 #89550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blimpich merged 5 commits into from
May 4, 2026
Merged

[cp staging] Revert https://github.com/Expensify/App/pull/88296 #89550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9dc3373
Revert "Merge pull request #88296 from Krishna2323/krishna2323/issue/…
JS00001 May 4, 2026
39ee1c2
add back hook for types
JS00001 May 4, 2026
7686a5b
Merge branch 'main' of github.com:Expensify/App into jsenyitko-revert…
JS00001 May 4, 2026
646a2b8
fix eslint
JS00001 May 4, 2026
68ab49b
fix lint again :(
JS00001 May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 12 additions & 22 deletions src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import React from 'react';
import React, {useCallback, useMemo} from 'react';
import {View} from 'react-native';
import Checkbox from '@components/Checkbox';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import Text from '@components/Text';
import {useCurrencyListActions} from '@hooks/useCurrencyList';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import type {GroupedTransactions} from '@src/types/onyx';
import type {PendingAction} from '@src/types/onyx/OnyxCommon';

const DESKTOP_HEIGHT = 28;

type MoneyRequestReportGroupHeaderProps = {
/** The grouped transaction data */
group: GroupedTransactions;
Expand Down Expand Up @@ -64,7 +65,6 @@ function MoneyRequestReportGroupHeader({
}: MoneyRequestReportGroupHeaderProps) {
const {convertToDisplayString} = useCurrencyListActions();
const styles = useThemeStyles();
const theme = useTheme();
const {translate} = useLocalize();
const {shouldUseNarrowLayout: shouldUseNarrowLayoutHook} = useResponsiveLayoutOnWideRHP();
const shouldUseNarrowLayout = shouldUseNarrowLayoutProp ?? shouldUseNarrowLayoutHook;
Expand All @@ -75,27 +75,18 @@ function MoneyRequestReportGroupHeader({

const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout;

const textStyle = shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : [styles.labelStrong];
const textStyle = useMemo(
() => (shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : {fontSize: variables.fontSizeNormal, lineHeight: DESKTOP_HEIGHT}),
[shouldUseNarrowLayout],
);

const handleToggleSelection = () => {
const handleToggleSelection = useCallback(() => {
onToggleSelection?.(groupKey);
};

const groupHeaderStyle = !shouldUseNarrowLayout
? [
{minHeight: variables.tableGroupRowHeight},
styles.justifyContentCenter,
styles.highlightBG,
styles.pv2,
styles.ph3,
styles.borderBottom,
isSelected && {borderColor: theme.buttonHoveredBG},
]
: [styles.ph4, styles.pv3, styles.borderBottom];
}, [onToggleSelection, groupKey]);

return (
<OfflineWithFeedback pendingAction={pendingAction}>
<View style={groupHeaderStyle}>
<View style={[shouldUseNarrowLayout ? [styles.ph4, styles.pv3, styles.borderBottom] : [styles.reportLayoutGroupHeader, {height: DESKTOP_HEIGHT, minHeight: DESKTOP_HEIGHT}]]}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
{shouldShowCheckbox && (
<Checkbox
Expand All @@ -104,12 +95,11 @@ function MoneyRequestReportGroupHeader({
disabled={isDisabled}
onPress={handleToggleSelection}
accessibilityLabel={translate('reportLayout.selectGroup', {groupName: displayName})}
containerStyle={!shouldUseNarrowLayout && styles.m0}
style={!shouldUseNarrowLayout ? styles.mr3 : styles.mr2}
style={styles.mr2}
/>
)}
<Text
style={[styles.textBold, textStyle, styles.flexShrink1, shouldShowCheckbox && shouldUseNarrowLayout && styles.ml2]}
style={[styles.textBold, textStyle, styles.flexShrink1, shouldShowCheckbox && styles.ml2]}
numberOfLines={1}
>
{displayName}
Expand Down
14 changes: 1 addition & 13 deletions src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,8 @@ type SearchTableHeaderProps = {
taxAmountColumnSize: TableColumnSize;
shouldShowSorting: boolean;
columns: SearchColumnType[];
shouldRemoveTotalColumnFlex?: boolean;
};
function MoneyRequestReportTableHeader({
sortBy,
sortOrder,
onSortPress,
dateColumnSize,
shouldShowSorting,
columns,
amountColumnSize,
taxAmountColumnSize,
shouldRemoveTotalColumnFlex,
}: SearchTableHeaderProps) {
function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColumnSize, shouldShowSorting, columns, amountColumnSize, taxAmountColumnSize}: SearchTableHeaderProps) {
const styles = useThemeStyles();

const columnConfig = useMemo(
Expand Down Expand Up @@ -88,7 +77,6 @@ function MoneyRequestReportTableHeader({
sortBy={sortBy}
sortOrder={sortOrder}
onSortPress={onSortPress}
shouldRemoveTotalColumnFlex={shouldRemoveTotalColumnFlex}
/>
</View>
);
Expand Down
16 changes: 5 additions & 11 deletions src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useTransactionViolations from '@hooks/useTransactionViolations';
Expand Down Expand Up @@ -71,7 +70,7 @@ type MoneyRequestReportTransactionItemProps = {
/** List of cards for the user */
nonPersonalAndWorkspaceCards: CardList;

/** Whether this is the last item in the list */
/** Whether this is the last item in the list (used to skip border-bottom on narrow) */
isLastItem?: boolean;
};

Expand All @@ -96,7 +95,6 @@ function MoneyRequestReportTransactionItem({
}: MoneyRequestReportTransactionItemProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
Expand All @@ -119,18 +117,15 @@ function MoneyRequestReportTransactionItem({
}, [scrollToNewTransaction, shouldBeHighlighted]);

const animatedHighlightStyle = useAnimatedHighlightStyle({
borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0,
borderRadius: shouldUseNarrowLayout ? 0 : variables.componentBorderRadius,
shouldHighlight: shouldBeHighlighted,
highlightColor: theme.messageHighlightBG,
backgroundColor: theme.highlightBG,
shouldApplyOtherStyles: !shouldUseNarrowLayout,
});

return (
<OfflineWithFeedback
pendingAction={pendingAction}
style={!shouldUseNarrowLayout && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]}
>
<OfflineWithFeedback pendingAction={pendingAction}>
<PressableWithFeedback
key={transaction.transactionID}
onPress={() => {
Expand All @@ -141,7 +136,7 @@ function MoneyRequestReportTransactionItem({
role={getButtonRole(true)}
isNested
id={transaction.transactionID}
style={[styles.transactionListItemStyle, !shouldUseNarrowLayout ? StyleUtils.getSearchTableRowPressableStyle(isLastItem, isSelected) : styles.noBorderRadius]}
style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]}
hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
Expand Down Expand Up @@ -169,14 +164,13 @@ function MoneyRequestReportTransactionItem({
onCheckboxPress={toggleTransaction}
columns={columns}
isDisabled={isPendingDelete}
style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]}
style={shouldUseNarrowLayout ? [styles.p4, styles.noBorderRadius] : [styles.p3]}
onButtonPress={() => {
handleOnPress(transaction.transactionID);
}}
onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)}
isHover={hovered}
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
shouldRemoveTotalColumnFlex
/>
)}
</PressableWithFeedback>
Expand Down
121 changes: 62 additions & 59 deletions src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import useHandleSelectionMode from '@hooks/useHandleSelectionMode';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
import useNetwork from '@hooks/useNetwork';
import useOnyx from '@hooks/useOnyx';
import useReportIsArchived from '@hooks/useReportIsArchived';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
Expand Down Expand Up @@ -155,7 +154,6 @@ function MoneyRequestReportTransactionList({
const [isModalVisible, setIsModalVisible] = useState(false);
const [selectedTransactionID, setSelectedTransactionID] = useState<string>('');
const {reportPendingAction} = getReportOfflinePendingActionAndErrors(report);
const {isOffline} = useNetwork();

const isTaxEnabled = isPolicyTaxEnabled(policy);
const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = getMoneyRequestSpendBreakdown(report);
Expand Down Expand Up @@ -565,36 +563,11 @@ function MoneyRequestReportTransactionList({
[groupByOptions, reportLayoutGroupBy, styles, windowHeight, isInLandscapeMode],
);

const isDesktopTableLayout = !shouldUseNarrowLayout;

const lastTransactionID = useMemo(() => {
const allTransactions = shouldShowGroupedTransactions ? groupedTransactions.flatMap((group) => group.transactions) : resolvedTransactions;
const visibleTransactions = allTransactions.filter((t) => isOffline || !isTransactionPendingDelete(t));
return visibleTransactions.at(-1)?.transactionID;
}, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions, isOffline]);

const renderTransactionItem = (transaction: TransactionWithOptionalHighlight) => (
<MoneyRequestReportTransactionItem
key={transaction.transactionID}
transaction={transaction}
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
columns={columnsToShow}
report={report}
policy={policy}
isSelectionModeEnabled={isMobileSelectionModeEnabled}
toggleTransaction={toggleTransaction}
isSelected={isTransactionSelected(transaction.transactionID)}
handleOnPress={handleOnPress}
handleLongPress={handleLongPress}
dateColumnSize={dateColumnSize}
amountColumnSize={amountColumnSize}
taxAmountColumnSize={taxAmountColumnSize}
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
onArrowRightPress={handleArrowRightPress}
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
isLastItem={!showPendingExpensePlaceholder && transaction.transactionID === lastTransactionID}
/>
);
const nonDeletedTransactions = allTransactions.filter((t) => !isTransactionPendingDelete(t));
return nonDeletedTransactions.at(-1)?.transactionID;
}, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions]);

const transactionItems = shouldShowGroupedTransactions
? groupedTransactions.map((group) => {
Expand All @@ -604,8 +577,12 @@ function MoneyRequestReportTransactionList({
isDisabled: false,
pendingAction: undefined,
};

return (
<View key={group.groupKey}>
<View
key={group.groupKey}
style={!shouldUseNarrowLayout && styles.gap2}
>
<MoneyRequestReportGroupHeader
group={group}
groupKey={group.groupKey}
Expand All @@ -619,17 +596,65 @@ function MoneyRequestReportTransactionList({
pendingAction={selectionState.pendingAction}
shouldUseNarrowLayout={shouldUseNarrowLayout}
/>
{group.transactions.map((transaction) => renderTransactionItem(transaction))}
{group.transactions.map((transaction) => {
const isLastItem = transaction.transactionID === lastTransactionID;
return (
<MoneyRequestReportTransactionItem
key={transaction.transactionID}
transaction={transaction}
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
columns={columnsToShow}
report={report}
policy={policy}
isSelectionModeEnabled={isMobileSelectionModeEnabled}
toggleTransaction={toggleTransaction}
isSelected={isTransactionSelected(transaction.transactionID)}
handleOnPress={handleOnPress}
handleLongPress={handleLongPress}
dateColumnSize={dateColumnSize}
amountColumnSize={amountColumnSize}
taxAmountColumnSize={taxAmountColumnSize}
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
onArrowRightPress={handleArrowRightPress}
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
isLastItem={isLastItem}
/>
);
})}
</View>
);
})
: resolvedTransactions.map((transaction) => renderTransactionItem(transaction));
: resolvedTransactions.map((transaction) => {
const isLastItem = transaction.transactionID === lastTransactionID;
return (
<MoneyRequestReportTransactionItem
key={transaction.transactionID}
transaction={transaction}
shouldBeHighlighted={highlightedTransactionIDs.has(transaction.transactionID)}
columns={columnsToShow}
report={report}
policy={policy}
isSelectionModeEnabled={isMobileSelectionModeEnabled}
toggleTransaction={toggleTransaction}
isSelected={isTransactionSelected(transaction.transactionID)}
handleOnPress={handleOnPress}
handleLongPress={handleLongPress}
dateColumnSize={dateColumnSize}
amountColumnSize={amountColumnSize}
taxAmountColumnSize={taxAmountColumnSize}
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
onArrowRightPress={handleArrowRightPress}
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}}
isLastItem={isLastItem}
/>
);
});

const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.searchTableTopRadius, styles.searchTableBottomRadius, styles.overflowHidden] : undefined;

const transactionListContent = (
<View
style={[listHorizontalPadding, shouldUseNarrowLayout ? styles.pb2 : styles.pb4]}
style={[listHorizontalPadding, !shouldUseNarrowLayout && styles.gap2, shouldUseNarrowLayout ? styles.pb2 : styles.pb4, !shouldUseNarrowLayout && styles.mb2]}
onLayout={onLayout}
>
{narrowListWrapper ? <View style={narrowListWrapper}>{transactionItems}</View> : transactionItems}
Expand All @@ -648,27 +673,8 @@ function MoneyRequestReportTransactionList({

const tableHeaderContent = (
<OfflineWithFeedback pendingAction={reportPendingAction}>
<View
style={[
styles.dFlex,
styles.flexRow,
!isDesktopTableLayout && styles.pl5,
isDesktopTableLayout ? styles.pr11 : styles.pr16,
styles.alignItemsCenter,
isDesktopTableLayout && [styles.highlightBG, styles.searchTableTopRadius, styles.mh5, styles.borderBottom],
]}
>
<View
style={[
styles.dFlex,
styles.flexRow,
styles.alignItemsCenter,
styles.pv2,
!isDesktopTableLayout && styles.pr4,
StyleUtils.getPaddingLeft(variables.w12),
isDesktopTableLayout && {minHeight: variables.tableGroupRowHeight},
]}
>
<View style={[styles.dFlex, styles.flexRow, styles.pl5, styles.pr16, styles.alignItemsCenter]}>
<View style={[styles.dFlex, styles.flexRow, styles.pv2, styles.pr4, StyleUtils.getPaddingLeft(variables.w12)]}>
<Checkbox
onPress={() => {
if (selectedTransactionIDs.length !== 0) {
Expand All @@ -680,10 +686,8 @@ function MoneyRequestReportTransactionList({
accessibilityLabel={translate('accessibilityHints.selectAllTransactions')}
isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactionsWithoutPendingDelete.length}
isChecked={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length}
containerStyle={isDesktopTableLayout && styles.m0}
style={isDesktopTableLayout && styles.mr3}
/>
{isMediumScreenWidth && !shouldScrollHorizontally && <Text style={[styles.labelStrong]}>{translate('workspace.people.selectAll')}</Text>}
{isMediumScreenWidth && !shouldScrollHorizontally && <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>}
</View>
{(!isMediumScreenWidth || shouldScrollHorizontally) && (
<MoneyRequestReportTableHeader
Expand All @@ -694,7 +698,6 @@ function MoneyRequestReportTransactionList({
dateColumnSize={dateColumnSize}
amountColumnSize={amountColumnSize}
taxAmountColumnSize={taxAmountColumnSize}
shouldRemoveTotalColumnFlex
onSortPress={(selectedSortBy, selectedSortOrder) => {
if (!isSortableColumnName(selectedSortBy)) {
return;
Expand Down
Loading
Loading