Skip to content

Add several UI fixes to MoneyRequestTransaction list #61677

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
merged 4 commits into from
May 12, 2025
+28 −21
Merged

Add several UI fixes to MoneyRequestTransaction list #61677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
78ce478
Fix bad spacing in selection mode on MoneyRequestReportActionsList
Kicu May 7, 2025
320152e
Fix spacing in TransactionItemRow
Kicu May 8, 2025
eeabde3
Stop displaying help button on desktop SearchMoneyRequestReportPage
Kicu May 8, 2025
7e1e0e7
Fix useOnyx in ChatBubbleCell
Kicu May 8, 2025
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
6 changes: 3 additions & 3 deletions src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
useLayoutEffect(parseFSAttributes, []);

return (
<View style={[styles.flex1, styles.pv4]}>
<View style={[styles.flex1]}>
{shouldUseNarrowLayout && !!selectionMode?.isEnabled && (
<>
<ButtonWithDropdownMenu
Expand All @@ -448,7 +448,7 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
shouldAlwaysShowDropdownMenu
wrapperStyle={[styles.w100, styles.ph5]}
/>
<View style={[styles.searchListHeaderContainerStyle, styles.pt6, styles.ph8, styles.pb3]}>
<View style={[styles.alignItemsCenter, styles.userSelectNone, styles.flexRow, styles.pt6, styles.ph8]}>
<Checkbox
accessibilityLabel={translate('workspace.people.selectAll')}
isChecked={selectedTransactionsID.length === transactions.length}
Expand Down Expand Up @@ -491,7 +491,7 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
/>
</>
)}
<View style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden, styles.pb4]}>
<View style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden, styles.pv4]}>
<FloatingMessageCounter
isActive={isFloatingMessageCounterVisible}
onClick={scrollToBottomAndMarkReportAsRead}
Expand Down
1 change: 0 additions & 1 deletion src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,6 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
shouldShowTooltip
shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
shouldShowCheckbox={!!selectionMode?.isEnabled || isMediumScreenWidth}
shouldShowChatBubbleComponent
onCheckboxPress={toggleTransaction}
/>
</PressableWithFeedback>
Expand Down
16 changes: 10 additions & 6 deletions src/components/TransactionItemRow/DataCells/ChatBubbleCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {useMemo} from 'react';
import {View} from 'react-native';
import type {ViewStyle} from 'react-native';
import {useOnyx} from 'react-native-onyx';
import Icon from '@components/Icon';
import {ChatBubbleCounter} from '@components/Icon/Expensicons';
Expand All @@ -18,15 +19,18 @@ import type Transaction from '@src/types/onyx/Transaction';
const isReportUnread = ({lastReadTime = '', lastVisibleActionCreated = '', lastMentionedTime = ''}: Report): boolean =>
lastReadTime < lastVisibleActionCreated || lastReadTime < (lastMentionedTime ?? '');

function ChatBubbleCell({transaction}: {transaction: Transaction}) {
function ChatBubbleCell({transaction, containerStyles}: {transaction: Transaction; containerStyles?: ViewStyle[]}) {
const theme = useTheme();
const styles = useThemeStyles();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const [iouReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transaction.reportID}`, {
selector: (reportActions) => getIOUActionForTransactionID(Object.values(reportActions ?? {}), transaction.transactionID),
canBeMissing: false,
});

const [transactionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportAction?.childReportID}`);
const [transactionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportAction?.childReportID}`, {
canBeMissing: false,
});

const threadMessages = useMemo(
() => ({
Expand All @@ -38,18 +42,18 @@ function ChatBubbleCell({transaction}: {transaction: Transaction}) {

const StyleUtils = useStyleUtils();

const elementSize = shouldUseNarrowLayout ? variables.iconSizeSmall : variables.iconSizeNormal;
const iconSize = shouldUseNarrowLayout ? variables.iconSizeSmall : variables.iconSizeNormal;
const fontSize = shouldUseNarrowLayout ? variables.fontSizeXXSmall : variables.fontSizeExtraSmall;

return (
threadMessages.count > 0 && (
<View style={[styles.dFlex, styles.alignItemsCenter, styles.justifyContentCenter, styles.textAlignCenter, StyleUtils.getWidthAndHeightStyle(elementSize)]}>
<View style={[styles.dFlex, styles.alignItemsCenter, styles.justifyContentCenter, styles.textAlignCenter, StyleUtils.getWidthAndHeightStyle(iconSize), containerStyles]}>
<Icon
src={ChatBubbleCounter}
additionalStyles={[styles.pAbsolute]}
fill={threadMessages.isUnread ? theme.iconMenu : theme.icon}
width={elementSize}
height={elementSize}
width={iconSize}
height={iconSize}
/>
<Text
style={[
Expand Down
24 changes: 14 additions & 10 deletions src/components/TransactionItemRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ function TransactionItemRow({
isSelected,
shouldShowTooltip,
dateColumnSize,
shouldShowChatBubbleComponent = false,
onCheckboxPress,
shouldShowCheckbox = false,
}: {
Expand All @@ -38,7 +37,6 @@ function TransactionItemRow({
isSelected: boolean;
shouldShowTooltip: boolean;
dateColumnSize: TableColumnSize;
shouldShowChatBubbleComponent?: boolean;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was only used twice in the app, and always true so I removed it

onCheckboxPress: (transactionID: string) => void;
shouldShowCheckbox: boolean;
}) {
Expand Down Expand Up @@ -80,8 +78,8 @@ function TransactionItemRow({
>
{shouldUseNarrowLayout ? (
<Animated.View style={[animatedHighlightStyle]}>
<View style={[styles.expenseWidgetRadius, styles.justifyContentEvenly, styles.gap3, bgActiveStyles]}>
<View style={[styles.flexRow, styles.mt3, styles.mr3, styles.ml3]}>
<View style={[styles.expenseWidgetRadius, styles.justifyContentEvenly, styles.p3, bgActiveStyles]}>
<View style={[styles.flexRow]}>
{shouldShowCheckbox && (
<View style={[styles.mr3, styles.justifyContentCenter]}>
<Checkbox
Expand Down Expand Up @@ -138,10 +136,10 @@ function TransactionItemRow({
)}
</View>
</View>
<View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.mb3]}>
<View style={[styles.flexColumn, styles.gap2]}>
<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
<View style={[styles.flexColumn]}>
{hasCategoryOrTag && (
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.mt3]}>
<CategoryCell
transactionItem={transactionItem}
shouldShowTooltip={shouldShowTooltip}
Expand All @@ -154,9 +152,15 @@ function TransactionItemRow({
/>
</View>
)}
<TransactionItemRowRBR transaction={transactionItem} />
<TransactionItemRowRBR
transaction={transactionItem}
containerStyles={[styles.mt3]}
/>
</View>
{shouldShowChatBubbleComponent && <ChatBubbleCell transaction={transactionItem} />}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't remove this check. We should prevent ChatBubbleCell from rendering if shouldShowChatBubbleComponent is false

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DylanDylann can you tell me when it could be false?

<ChatBubbleCell
transaction={transactionItem}
containerStyles={[styles.mt3]}
/>
</View>
</View>
</Animated.View>
Expand Down Expand Up @@ -215,7 +219,7 @@ function TransactionItemRow({
/>
</View>
<View style={[StyleUtils.getReportTableColumnStyles(CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS)]}>
{shouldShowChatBubbleComponent && <ChatBubbleCell transaction={transactionItem} />}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same above

<ChatBubbleCell transaction={transactionItem} />
</View>
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT)]}>
<TotalCell
Expand Down
1 change: 1 addition & 0 deletions src/pages/Search/SearchMoneyRequestReportPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ function SearchMoneyRequestReportPage({route}: SearchMoneyRequestPageProps) {
breadcrumbLabel={translate('common.reports')}
shouldDisplaySearch={false}
shouldShowLoadingBar={false}
shouldDisplayHelpButton={false}
/>
<SearchTypeMenu queryJSON={undefined} />
</View>
Expand Down
1 change: 0 additions & 1 deletion src/stories/TransactionItemRow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ function Template(
shouldUseNarrowLayout={shouldUseNarrowLayout}
isSelected={isSelected}
shouldShowTooltip={shouldShowTooltip}
shouldShowChatBubbleComponent
dateColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
onCheckboxPress={() => {}}
shouldShowCheckbox={shouldShowCheckbox}
Expand Down
Loading