[HOLD for payment 2024-12-05] [$250] Search - Empty row in "In" field when searching for messages in inaccessible group chat

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.65-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to group chat
3. Click search router icon
4. Click Search in
5. Hit Enter to initiate the search (to keep search history for the next step)
6. Go back to Inbox and leave the group
7. Click search router icon
8. Click on the search history created in Step 5
9. Click Filters button
10. Click "In" field

Expected Result:

There should be no empty row with a green checkmark

Actual Result:

There is an empty row with a green checkmark

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6672129_1732210036497.20241122_012142.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859721962672586674
• Upwork Job ID: 1859721962672586674
• Last Price Increase: 2024-11-21
• Automatic offers:
• ikevin127 | Reviewer | 105026418

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nyomanjyotisa]

Proposal

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

Search - Empty row in "In" field when searching for messages in inaccessible group chat

What is the root cause of that problem?

For deleted report, we still display it since we build the ReportUtils.OptionData with undefined/null/0 values first before assign the actual value. And there is not text and alternate text to display for deleted group chat so the option is empty

App/src/libs/OptionsListUtils.ts

Lines 637 to 668 in 0e9f934

	const result: ReportUtils.OptionData = {
	text: undefined,
	alternateText: undefined,
	pendingAction: undefined,
	allReportErrors: undefined,
	brickRoadIndicator: null,
	icons: undefined,
	tooltipText: null,
	ownerAccountID: undefined,
	subtitle: undefined,
	participantsList: undefined,
	accountID: 0,
	login: undefined,
	reportID: '',
	phoneNumber: undefined,
	hasDraftComment: false,
	keyForList: undefined,
	isDefaultRoom: false,
	isPinned: false,
	isWaitingOnBankAccount: false,
	iouReportID: undefined,
	isIOUReportOwner: null,
	iouReportAmount: 0,
	isChatRoom: false,
	shouldShowSubscript: false,
	isPolicyExpenseChat: false,
	isOwnPolicyExpenseChat: false,
	isExpenseReport: false,
	policyID: undefined,
	isOptimisticPersonalDetail: false,
	lastMessageText: '',
	};

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

Filter out selectedOptions if there is no text to display, so it won't display the empty option

    const selectedOptions = useMemo<OptionData[]>(() => {
        return selectedReportIDs
            .map((id) => {
                const report = getSelectedOptionData(OptionsListUtils.createOptionFromReport({...reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reportID: id}, personalDetails));
                const alternateText = OptionsListUtils.getAlternateText(report, {});
                return {...report, alternateText};
            })
            .filter((option) => option.text)
    }, [personalDetails, reports, selectedReportIDs]);

What alternative solutions did you explore? (Optional)

[joekaufmanexpensify]

Hmm, yeah we should probably just show no selection in the "in" filter in this case. I'm also curious if this only applies to group chats or other room types too?

Maybe it also applies to private rooms, and then also workspace rooms (if you're removed from the workspace)?

cc @luacmartins as I figure you'll have thoughts on this too.

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Proposal

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

Empty selected row is shown in "In" filter page.

What is the root cause of that problem?

When we open the "In" filter page, it will show the initial selected report.

App/src/components/Search/SearchFiltersChatsSelector.tsx

Lines 50 to 60 in 686b8b4

	const [selectedReportIDs, setSelectedReportIDs] = useState<string[]>(initialReportIDs);
	const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
	const cleanSearchTerm = useMemo(() => searchTerm.trim().toLowerCase(), [searchTerm]);
	const selectedOptions = useMemo<OptionData[]>(() => {
	return selectedReportIDs.map((id) => {
	const report = getSelectedOptionData(OptionsListUtils.createOptionFromReport({...reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reportID: id}, personalDetails));
	const alternateText = OptionsListUtils.getAlternateText(report, {});
	return {...report, alternateText};
	});
	}, [personalDetails, reports, selectedReportIDs]);

App/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersInPage.tsx

Line 47 in 686b8b4

initialReportIDs={searchAdvancedFiltersForm?.in ?? []}

The initial selected report is assigned based on the query when we press the filter button.

App/src/components/Search/SearchPageHeader.tsx

Lines 330 to 334 in 686b8b4

	const onPress = () => {
	const filterFormValues = SearchQueryUtils.buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, cardList, reports, taxRates);
	SearchActions.updateAdvancedFilters(filterFormValues);
	Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);

In buildFilterFormValuesFromQuery, we already filter out any report that doesn't exist.

App/src/libs/SearchQueryUtils.ts

Lines 435 to 437 in 686b8b4

	if (filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.IN) {
	filtersForm[filterKey] = filterValues.filter((id) => reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`]);
	}

But the left group chat still exists on the onyx as an empty object.

It makes the filter fail to filter it out. The reason it becomes an empty object is because we set the successData to be an object that has all properties set to null.

App/src/libs/actions/Report.ts

Lines 2918 to 2927 in 686b8b4

	const successData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
	value: Object.keys(report).reduce<Record<string, null>>((acc, key) => {
	acc[key] = null;
	return acc;
	}, {}),
	},
	];

{
reportID: null,
reportName: null,
...
}

So, it becomes an empty object at the end.

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

Change the successData to just null or don't set the successData at all because the BE already returns the onyx update to delete it.

const successData: OnyxUpdate[] = [
    {
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
        value: null,
    },
];

And, to be more precise, we need to filter out any report that doesn't have reportID

App/src/libs/SearchQueryUtils.ts

Lines 435 to 437 in 686b8b4

	if (filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.IN) {
	filtersForm[filterKey] = filterValues.filter((id) => reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`]);
	}

filtersForm[filterKey] = filterValues.filter((id) => reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`]?.reportID);

This is because, if we visit a report that doesn't exist, it will be added to the onyx with an error field and the filter will include it.

[ikevin127]

I second #52924 (comment), for reference this is the difference between the empty selected row and one that has data:

Note

1. Empty row object lines are highlighted in 🔴 and non empty row in 🟢.
2. Keys that don't show up with 🔴 is because they were undefined.

DIFF

{
-   "text": "",
+   "text": "Kevin Bader (you)",
-   "alternateText": "",
+   "alternateText": "[email protected]",
    "allReportErrors": {},
    "brickRoadIndicator": "",
-   "icons": [],
+   "icons": [
+       {
+           "id": 17070261,
+           "source": "https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/default-avatar_22.png",
+           "type": "avatar",
+           "name": "Kevin Bader",
+           "fallbackIcon": ""
+       }
+   ],
"item": {
-       "reportID": "1719280750825503"
+       "chatType": "selfDM",
+       "currency": "USD",
+       "description": "",
+       "errorFields": {},
+       "hasOutstandingChildRequest": false,
+       "hasOutstandingChildTask": false,
+       "isCancelledIOU": false,
+       "isOwnPolicyExpenseChat": false,
+       "isPinned": true,
+       "lastActionType": "CREATED",
+       "lastActorAccountID": "17070261",
+       "lastMessageHtml": "",
+       "lastMessageText": "",
+       "lastReadSequenceNumber": 0,
+       "lastReadTime": "2024-05-11 01:15:14.190",
+       "lastVisibleActionCreated": "2024-05-09 00:59:12.386",
+       "lastVisibleActionLastModified": "2024-05-09 00:59:12.386",
+       "managerID": 0,
+       "nonReimbursableTotal": 0,
+       "oldPolicyName": "",
+       "ownerAccountID": 17070261,
+       "participants": {
+           "17070261": {
+               "notificationPreference": "mute"
+           }
+       },
+       "permissions": [],
+       "policyID": "_FAKE_",
+       "private_isArchived": "",
+       "reportID": "4530749671729272",
+       "reportName": "",
+       "stateNum": 0,
+       "statusNum": 0,
+       "total": 0,
+       "type": "chat",
+       "unheldNonReimbursableTotal": 0,
+       "unheldTotal": 0,
+       "welcomeMessage": "",
+       "writeCapability": "all"
    },
    "tooltipText": "",
+   "tooltipText": "17070261",
-   "subtitle": "",
+   "subtitle": "Your space",
-   "participantsList": [],
+   "participantsList": [
+       {
+           "accountID": 17070261,
+           "avatar": "https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/default-avatar_22.png",
+           "firstName": "Kevin",
+           "lastName": "Bader",
+           "displayName": "Kevin Bader",
+           "login": "[email protected]",
+           "pronouns": "",
+           "timezone": {
+               "automatic": true,
+               "selected": "America/Los_Angeles"
+           },
+           "phoneNumber": "",
+           "validated": true,
+           "localCurrencyCode": "USD"
+       }
+   ],
-   "accountID": NaN,
+   "accountID": 17070261,
    "reportID": "1719280750825503",
+   "reportID": "4530749671729272",
    "hasDraftComment": false,
    "keyForList": "1719280750825503",
    "isDefaultRoom": false,
-   "isPinned": undefined,
+   "isPinned": true,
     "iouReportAmount": 0,
     "iouReportID": undefined,
-   "isIOUReportOwner": false,
+   "isIOUReportOwner": true,
    "isChatRoom": false,
    "shouldShowSubscript": false,
    "isPolicyExpenseChat": false,
    "isOwnPolicyExpenseChat": false,
    "isExpenseReport": false,
    "lastMessageText": "",
    "isInvoiceRoom": false,
    "isMoneyRequestReport": false,
    "isThread": false,
    "isTaskReport": false,
    "isUnread": false,
    "isSelfDM": false,
-   "notificationPreference": "hidden",
+   "notificationPreference": "mute",
    "isSelected": true,
+   "login": "[email protected]",
+   "phoneNumber": "",
+   "hasDraftComment": false,
+   "keyForList": "4530749671729272",
+   "isWaitingOnBankAccount": false,
+   "policyID": "_FAKE_",
+   "lastMessageText": "",
+   "private_isArchived": "",
+   "isInvoiceRoom": false,
+   "isMoneyRequestReport": false,
+   "isThread": false,
+   "isTaskReport": false,
+   "isUnread": false,
+   "isSelfDM": true
}

@luacmartins Could definitely use your take on whether we should simply filter out the empty row based on the text variable as suggested by the first proposal or go with a more in-depth approach like the second one which besides filtering out the empty row based on reportID, it also suggests either setting successData value to null or don't send it at all.

I tend to go with the second proposal as the RCA is more detailed and the solution seems more based. Wdyt ?

[luacmartins]

Yea, I think we should go with the 2nd one and clean up this data at the source. @ikevin127 let me know if you're good with this proposal and I'll get @bernhardoj assigned to the issue

[ikevin127]

Sure, let's go with @bernhardoj's proposal as the RCA is more detailed and the solution fixes our issue from the data source in a more comprehensive way.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @luacmartins is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[bernhardoj]

PR is ready

cc: @ikevin127

[joekaufmanexpensify]

PR in review

[luacmartins]

PR merged

[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.67-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix empty selected row in search "In" filter #52993

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

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

• @bernhardoj requires payment through NewDot Manual Requests
• @ikevin127 requires payment automatic offer (Reviewer)

[melvin-bot]

@ikevin127 @joekaufmanexpensify @ikevin127 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[ikevin127]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/50846/files#r1864559285.

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A.

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

1. Go to a group chat or create a new one.
2. (Optional) Send at least one message so the group chat becomes visible in the LHN.
3. Press the search router icon.
4. Press the suggested "Search in {group name}".
5. Press Enter to initiate the search (and save it to search history for the next step).
6. Go back to the group and leave the group.
7. Press the search router icon again.
8. Press on the search history created in Step 5.
9. Press Filters button.
10. Click on the "In" field.
11. Verify that there is no empty selected row at the top of the list.

Do we agree 👍 or 👎.