[HOLD for payment 2024-12-30] [$500] [Search v2.2] Add support for all reportAction types in ChatListItem

[luacmartins]

Problem

Right now, the search results for chats only shows ADDCOMMENT actions. However, we want to support all reportAction types in search.

Solution

Refactor ReportActionItem.tsx to be a pure component and receive all props it needs instead of connecting directly to Onyx, then use ReportActionItem in ChatListItem to render other reportAction types.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021848820450401382223
• Upwork Job ID: 1848820450401382223
• Last Price Increase: 2024-11-18
• Automatic offers:
• allgandalf | Contributor | 105010037
• wildan-m | Contributor | 105010064

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

Triggered auto assignment to @stephanieelliott (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021848820450401382223

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @abdulrahuman5196 (External)

[abdulrahuman5196]

No volunteer yet.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@luacmartins, @stephanieelliott, @abdulrahuman5196 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[luacmartins]

Still no proposals. Gonna bump the payout on this one.

[melvin-bot]

Upwork job price has been updated to $500

[melvin-bot]

@luacmartins, @stephanieelliott, @abdulrahuman5196 Still overdue 6 days?! Let's take care of this!

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2024-11-05 07:23:42 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add support for all reportAction types in ChatListItem

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

• Replace this code
  

  App/src/components/SelectionList/ChatListItem.tsx

  Lines 80 to 86 in 10454f0

  	{(hovered) => (
  	<MentionReportContext.Provider value={mentionReportContextValue}>
  	<ShowContextMenuContext.Provider value={contextValue}>
  	<AttachmentContext.Provider value={attachmentContextValue}>
  	<MultipleAvatars
  	icons={icons}
  	shouldShowTooltip={showTooltip}

  
  until here
  

  App/src/components/SelectionList/ChatListItem.tsx

  Lines 124 to 126 in 10454f0

  	</ShowContextMenuContext.Provider>
  	</MentionReportContext.Provider>
  	)}

  with the ReportActionItem component
• Inside BaseListItem we use styles.selectionListPressableItemWrapper for the pressableStyle
  

  App/src/components/SelectionList/ChatListItem.tsx

  Line 63 in 10454f0

  pressableStyle={[[styles.selectionListPressableItemWrapper, styles.textAlignLeft, item.isSelected && styles.activeComponentBG, item.cursorStyle]]}

  
  but inside the selectionListPressableItemWrapper style we have alignItems center and flex direction row which causing the ReportActionItem content to overlap
  

  App/src/styles/index.ts

  Lines 4719 to 4721 in 10454f0

  	selectionListPressableItemWrapper: {
  	alignItems: 'center',
  	flexDirection: 'row',

  
  and to fix that we can simply create new style i.e chatSelectionListPressableItemWrapper and remove the align items center and flex direction style

chatSelectionListPressableItemWrapper: {
    paddingHorizontal: 16,
    paddingVertical: 16,
    marginHorizontal: 20,
    backgroundColor: theme.highlightBG,
    borderRadius: 8,
    minHeight: variables.optionRowHeight,
},

• Inside ReportActionItem, we can make the reportActions param to optional because we don't use inside the ReportActionItem
  

  App/src/pages/home/report/ReportActionItem.tsx

  Lines 94 to 96 in 10454f0

  	/** Array of report actions for the report for this action */
  	// eslint-disable-next-line react/no-unused-prop-types
  	reportActions: OnyxTypes.ReportAction[];

• Inside the item type here
  

  App/src/components/SelectionList/ChatListItem.tsx

  Lines 17 to 18 in 10454f0

  	function ChatListItem<TItem extends ListItem>({
  	item,

we need to add reportActionID which we will use later to get the reportAction from Onyx

Here's the code:

const styles = useThemeStyles();
const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${item.reportID}`);
const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${item.reportID}`);
const reportAction = Object.values(reportActions ?? {})?.find((reportAction) => {
    return reportAction.reportActionID === item.reportActionID;
});
const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID || -1}`, {
    canEvict: false,
    selector: (parentReportActions) => getParentReportAction(parentReportActions, report?.parentReportActionID ?? ''),
});

if (!reportAction) {
    return null;
}

<BaseListItem
    item={item}
    pressableStyle={[[styles.chatSelectionListPressableItemWrapper, styles.ph0, styles.pv2, styles.textAlignLeft, item.isSelected && styles.activeComponentBG, item.cursorStyle]]}
    wrapperStyle={[styles.userSelectNone]}
    containerStyle={styles.mb2}
    isFocused={isFocused}
    isDisabled={isDisabled}
    showTooltip={showTooltip}
    canSelectMultiple={canSelectMultiple}
    onLongPressRow={onLongPressRow}
    onSelectRow={onSelectRow}
    onDismissError={onDismissError}
    errors={item.errors}
    pendingAction={item.pendingAction}
    keyForList={item.keyForList}
    onFocus={onFocus}
    shouldSyncFocus={shouldSyncFocus}
    hoverStyle={item.isSelected && styles.activeComponentBG}
>
    {() => (
        <ReportActionItem
            action={reportAction}
            report={report}
            onPress={() => onSelectRow(item)}
            parentReportAction={parentReportAction}
            displayAsGroup={false}
            wrapperStyle={[styles.pl4, styles.pr4]}
            isMostRecentIOUReportAction={false}
            shouldDisplayNewMarker={false}
            shouldShowSubscriptAvatar={false}
            isFirstVisibleReportAction={false}
            index={index}
            hideThreadReplies={true}
            shouldDisplayContextMenu={false}
            preventDefaultContextMenu={false}
        />
    )}
</BaseListItem>

The rest of the changes can be found in this test branch
We can improve the changes later in the PR

Result

Screen.Recording.2024-11-04.at.23.59.38.mov

What alternative solutions did you explore? (Optional)

[luacmartins]

@NJ-2020 thanks for the proposal. I think we need to adjust it a bit, since search data is only available within ONYXKEYS.COLLECTION.SNAPSHOT. We can't connect directly to any other key.

[luacmartins]

Still looking for proposals

[wildan-m]

@luacmartins @allgandalf Thanks

The first part of the PRs has been created. No specific test required, just ensure that the report action item functions correctly as usual.

#52948

[stephanieelliott]

PR is still under review, conversation is going on there: #52948

[allgandalf]

Part 1 was merged, @wildan-m when should we expect the part 2 ?

[wildan-m]

@allgandalf yes. working on it

[wildan-m]

@luacmartins In case you've missed my questions in this PR draft.

[luacmartins]

Sorry @wildan-m I was pretty busy with a HybridApp fire for the past couple of days. Replied.

[luacmartins]

@wildan-m BE PR that adds actorAccountID to the response is deployed

[allgandalf]

@wildan-m when can the PR be ready for a review ?

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.77-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• (1/2) Add support for all reportAction types in ChatListItem - create PureReportActionItem #52948

If no regressions arise, payment will be issued on 2024-12-30. 🎊

For reference, here are some details about the assignees on this issue:

• @wildan-m requires payment automatic offer (Contributor)
• @allgandalf requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@allgandalf] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@stephanieelliott] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[wildan-m]

when can the PR be ready for a review ?

@allgandalf sorry, the new es lint rules will change so many files for our case. need more time to create other two PRs

If that new rule not need to be applied, I thinks this PR draft already completed

[allgandalf]

I feel we should ignore the changed files eslint rule for this issue, and deal with it in a new PR, this issue is already critical

[allgandalf]

Please fix other failing tests and we should be ready to go here

[wildan-m]

@allgandalf @luacmartins have you encountered this kind of error before?

https://github.com/Expensify/App/actions/runs/12478857357/job/34827066582?pr=54228

● Test suite failed to run

    @rnmapbox/maps native code not available. Make sure you have linked the library and rebuild your app. See https://rnmapbox.github.io/docs/install?rebuild=expo#rebuild

      1 | import {useFocusEffect, useNavigation} from '@react-navigation/native';
      2 | import type {MapState} from '@rnmapbox/maps';
    > 3 | import Mapbox, {MarkerView, setAccessToken} from '@rnmapbox/maps';
        | ^
      4 | import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
      5 | import {View} from 'react-native';
      6 | import {useOnyx} from 'react-native-onyx';

The error comes after putting PureReportActionItem inside ChatListItem, please take a look at ChatListItem change here https://github.com/Expensify/App/pull/54228/files

[wildan-m]

@allgandalf @luacmartins if we don't need to handle the lint rule related to default id, then the second PR is ready for review #54228

[wildan-m]

jest.mock('@src/components/ConfirmedRoute.tsx');

The above mock is to resolve jest map error mentioned here #51296 (comment)