[HOLD for payment 2024-04-05] [$500] Category - Recent and All sections appear when selected category is invalid with <8 categories

[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: 1.4.47-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4381056
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition:

• User is an employee of Collect workspace
• The Collect workspace has 8 categories

1. [Employee] Go to workspace chat
2. [Employee] Create two manual requests, with Merchant A and Merchant B
3. [Admin] On Old Dot. disable Merchant A so that now there is less than 8 categories
4. [Employee] Go to the details page of request that has Merchant A
5. [Employee] Click Category

Expected Result:

Since there is now less than 8 categories, the category list will not show search field, Recent and All sections

Actual Result:

Although there is less than 8 categories, the category list still shows Recent and All sections
When employee selects another category and reopens the list, the sections are gone

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6402931_1709651644885.20240305_180506.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c18a41a21d81a420
• Upwork Job ID: 1767300069769654272
• Last Price Increase: 2024-03-11

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @luacmartins (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

We think that this bug might be related to #wave6
CC @greg-schroeder

[lanitochka17]

@luacmartins FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Proposal

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

Category - Recent and All sections appear when selected category is invalid with <8 categories

What is the root cause of that problem?

We include selectedOptions as enabled option and based on that we check for numberOfVisibleCategories < CONST.CATEGORY_LIST_THRESHOLD.

App/src/libs/OptionsListUtils.ts

Lines 998 to 1009 in 5199604

	const selectedOptionNames = selectedOptions.map((selectedOption) => selectedOption.name);
	const enabledAndSelectedCategories = [...selectedOptions, ...sortedCategories.filter((category) => category.enabled && !selectedOptionNames.includes(category.name))];
	const numberOfVisibleCategories = enabledAndSelectedCategories.length;
	if (numberOfVisibleCategories < CONST.CATEGORY_LIST_THRESHOLD) {
	categorySections.push({
	// "All" section when items amount less than the threshold
	title: '',
	shouldShow: false,
	indexOffset,
	data: getCategoryOptionTree(enabledAndSelectedCategories),
	});

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

We should subtract number of disabled selected option from numberOfVisibleCategories to get the correct value.

    const selectedOptionNames = selectedOptions.map((selectedOption) => selectedOption.name);
    const disabledSelectedOptionLength = selectedOptions.filter((selectedOption) => !selectedOption.enabled).length;
    const enabledAndSelectedCategories = [...selectedOptions, ...sortedCategories.filter((category) => category.enabled && !selectedOptionNames.includes(category.name))];
    const numberOfVisibleCategories = enabledAndSelectedCategories.length - disabledSelectedOptionLength;

    if (numberOfVisibleCategories < CONST.CATEGORY_LIST_THRESHOLD) {
        categorySections.push({
            // "All" section when items amount less than the threshold
            title: '',
            shouldShow: false,
            indexOffset,
            data: getCategoryOptionTree(enabledAndSelectedCategories),
        });

        return categorySections;
    }

We might need to do the same for Tags or other similar fields.

Result

Alternative

We can use numberOfCategories and we can remove numberOfVisibleCategories as it will be redundant.

App/src/libs/OptionsListUtils.ts

Line 963 in 2faffcd

const numberOfCategories = enabledCategories.length;

[luacmartins]

I'm unable to reproduce this issue on staging. See video below:

Screen.Recording.2024-03-05.at.1.58.39.PM.mov

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[johncschuster]

Applying the retest-weekly label so it can be reproduced. If reproduced, please post your reproduction steps and update the OP if they are different. Thank you!

[allgandalf]

@johncschuster , i think you are trying this on new IOU request, can you try this on previous IOU request as stated in the bug description, this should then be visible on your side as well :) Also disable the exact category which is currently selected

[allgandalf]

Proposal

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

Recent and All sections appear when selected category is invalid with <8 categories

What is the root cause of that problem?

This is an edge case, if the options are 8 and we disable the selected option itself then though the available options are 7 but since the disabled option is still selected, it will diplay us the recents and all list:

App/src/libs/OptionsListUtils.ts

Line 999 in 5199604

const enabledAndSelectedCategories = [...selectedOptions, ...sortedCategories.filter((category) => category.enabled && !selectedOptionNames.includes(category.name))];

App/src/libs/OptionsListUtils.ts

Line 1000 in 5199604

const numberOfVisibleCategories = enabledAndSelectedCategories.length;

The following condition will not hold true as even the disabled tag is considered as enabled:

App/src/libs/OptionsListUtils.ts

Line 1002 in 5199604

if (numberOfVisibleCategories < CONST.CATEGORY_LIST_THRESHOLD) {

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

Actually we need to redefine numberOfVisibleCategories, it shouldn't be the length of enabledAndSelectedCategories, instead it should be only the length of enabled categories:

const numberOfVisibleCategories = ([...sortedCategories.filter((category) => category.enabled]).length;

This will give us right results for the below condition:

App/src/libs/OptionsListUtils.ts

Lines 1002 to 1004 in 5199604

	if (numberOfVisibleCategories < CONST.CATEGORY_LIST_THRESHOLD) {
	categorySections.push({
	// "All" section when items amount less than the threshold

Note: In my approach i have still kept enabledAndSelectedCategories because we still pass it to getCategoryOptionTree so we just need to update numberOfVisibleCategories, no need to add new variable along the way and add extra code :):

App/src/libs/OptionsListUtils.ts

Line 1008 in 5199604

data: getCategoryOptionTree(enabledAndSelectedCategories),

What alternative solutions did you explore? (Optional)

As we already have enabledCategories defined, To have clear meaning of the variables used in condition and to follow clean and clear coding practices, we can use the enabledCategories as a check as follows:

if (enabledCategories.length < CONST.CATEGORY_LIST_THRESHOLD) {
        categorySections.push({

[melvin-bot]

@johncschuster, @luacmartins Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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

[melvin-bot]

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

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

• fix: Category - Recent and All sections appear when selected category is invalid with <8 categories. #38601

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

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

• @allroundexperts requires payment through NewDot Manual Requests
• @Krishna2323 requires payment (Needs manual offer from BZ)

[melvin-bot]

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

• [@allroundexperts] The PR that introduced the bug has been identified. Link to the PR:
• [@allroundexperts] 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:
• [@allroundexperts] A discussion in #expensify-bugs 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:
• [@allroundexperts] Determine if we should create a regression test for this bug.
• [@allroundexperts] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@johncschuster] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[Krishna2323]

@johncschuster, friendly bump for payments process :)

[johncschuster]

Payment Summary:

C+ Review: @allroundexperts - $500 via Manual Requests
Contributor: @Krishna2323 - $500 via Upwork

[johncschuster]

(Leaving open until the BZ checklist is complete)

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @allroundexperts owed $500 via NewDot
• Contributor: @Krishna2323 paid $500 via Upwork

BugZero Checklist (@johncschuster)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1767300069769654272/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[johncschuster]

I changed the amount owed to $500, as this issue was created prior to the effective date of the new payment structure (announcement)

[Krishna2323]

@johncschuster, the summary says I have been paid, but I haven't received the payment yet. Just pointing this out in case there is any confusion. I just accepted the new offer.

[Krishna2323]

@johncschuster, bump for payments 🙇🏻

[melvin-bot]

@johncschuster, @luacmartins, @allroundexperts, @Krishna2323 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[johncschuster]

Sorry I missed your ping, @Krishna2323! The note above wasn't meant to say you were already paid – it was meant to mean that the method by which you would be paid is through Upwork. I've just issued payment now! 🎉

[johncschuster]

@allroundexperts can you complete the BZ Checklist above? Thank you!

[allroundexperts]

Checklist

1. Fix/29901: Selected category should be in the list  #32902
2. https://github.com/Expensify/App/pull/32902/files#r1565810749
3. N/A
4. A regression test would be helpful here. The steps given in the OP look good enough to me.

[JmillsExpensify]

$500 approved for @allroundexperts