[HOLD for payment 2024-01-24] [$500] Category - Selected category is not in the list when it is disabled and there is <8 categories

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.3.86-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
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: There must be less than 8 categories in the workspace.

1. [Employee] Create a manual receipt with a category
2. [Admin] Go to OldDot and disable the category that is used in Step 1
3. [Employee] Go to the expense details page and click Category

Expected Result:

The selected category will appear in the list with a green tick mark

Actual Result:

The selected category is not present in the category list

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Bug6242102_1697653864127.20231018_201159.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0118e9d838643f7221
• Upwork Job ID: 1714715542878093312
• Last Price Increase: 2023-12-06
• Automatic offers:
• aimane-chnaif | Reviewer | 28037671
• DylanDylann | Contributor | 28037673

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[cooldev900]

@lanitochka17
could you please upload videos for this issue?

[abdel-h66]

Proposal

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

A disable category will never show up in the categories when it's selected and the category count is less than 8.

What is the root cause of that problem?

• The user expects to see the selected category within the categories list even if it's disabled, because hiding while it's actually selected is misleading.
• The first, that getCategoryListSections does, is to filter out any disabled options via. →

    const categoriesValues = _.chain(categories)
        .values()
        .filter((category) => category.enabled)
        .value();

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

→ We should find the selected, but disabled categories using the following =>

    const selectedDisabledOptions = _.filter(categories, (category) => !category.enabled && selectedOptions.find((option) => option.name === category.name));

→ In the case of numberOfCategories < CATEGORY_LIST_THRESHOLD
We add the follwing

        if(selectedDisabledOptions.length > 0) { 
            categorySections.push({
                // "Selected" section
                title: '',
                shouldShow: false,
                indexOffset: 0,
                data: getCategoryOptionTree(selectedOptions, true),
            });
        } 

And keep the rest the same.

What alternative solutions did you explore? (Optional)

N/A

[DylanDylann]

Proposal

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

Selected category is not in the list when it is disabled and there is <8 categories

What is the root cause of that problem?

Let's see the logic to get categories

App/src/libs/OptionsListUtils.js

Line 765 in 69119aa

if (numberOfCategories < CONST.CATEGORY_LIST_THRESHOLD) {

If numberOfCategories < 8, we return all enable categories

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

we should move this code

App/src/libs/OptionsListUtils.js

Lines 787 to 797 in 69119aa

	if (!_.isEmpty(selectedOptions)) {
	categorySections.push({
	// "Selected" section
	title: '',
	shouldShow: false,
	indexOffset,
	data: getCategoryOptionTree(selectedOptions, true),
	});
	indexOffset += selectedOptions.length;
	}

to before

App/src/libs/OptionsListUtils.js

Line 765 in 69119aa

if (numberOfCategories < CONST.CATEGORY_LIST_THRESHOLD) {

and in here

App/src/libs/OptionsListUtils.js

Line 771 in 69119aa

data: getCategoryOptionTree(categoriesValues),

update to

data: getCategoryOptionTree(lodashDifferenceBy(categoriesValues, selectedOptions, 'name')),

One more thing, when there is a selected category we also need to decrease the threshold to ensure we only display 7 categories
in here

App/src/libs/OptionsListUtils.js

Line 765 in 69119aa

if (numberOfCategories < CONST.CATEGORY_LIST_THRESHOLD) {

update like that

const categoryListThreshold = !_.isEmpty(selectedOptions) ? CONST.CATEGORY_LIST_THRESHOLD - 1 : CONST.CATEGORY_LIST_THRESHOLD;

    if (numberOfCategories < categoryListThreshold) {

What alternative solutions did you explore? (Optional)

[lanitochka17]

@cooldev900 Hello
The video has been added to the Screenshot tab.

[cooldev900]

Thank you

[melvin-bot]

@bfitzexpensify, @aimane-chnaif Eep! 4 days overdue now. Issues have feelings too...

[bfitzexpensify]

Couple of proposals ready for review @aimane-chnaif

[melvin-bot]

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

[bfitzexpensify]

Bump on proposal review @aimane-chnaif - thank you!

[aimane-chnaif]

reviewing

[melvin-bot]

@bfitzexpensify, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[aimane-chnaif]

@abdel-h66 @DylanDylann how were you able to remove category in oldDot?

[DylanDylann]

1. Create control or collect workspace on old dot

After creating It looks like

2. CLick on created workspace in step 1. Copy the workspace ID of above workspace

3. Hard-code this ID in the codebase of new dot
   Ex:
   

   App/src/components/CategoryPicker/index.js

   Line 88 in a0b2197

   key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,

   
   Update this line to

key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${'27F77FC4AB5B21A4'}`, // hard code policyID in step 2

4. Update the category of that ws in old dot

[melvin-bot]

Triggered auto assignment to @yuwenmemon, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @aimane-chnaif 🎉 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

[melvin-bot]

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

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[DylanDylann]

@aimane-chnaif The PR is ready for review

[melvin-bot]

This issue has not been updated in over 15 days. @yuwenmemon, @bfitzexpensify, @aimane-chnaif, @DylanDylann eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[aimane-chnaif]

Seems like automation was broken here

[DylanDylann]

@bfitzexpensify Could you help to move forward this issue?

[bfitzexpensify]

Payments complete.

Adding a manual BZ checklist here - please complete when you get a moment @aimane-chnaif

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:

• The PR that introduced the bug has been identified. Link to the PR:
• 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:
• 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:
• Determine if we should create a regression test for this bug.
• 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.
• Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[aimane-chnaif]

The bug always existed always after implementing category.
This is unusual case and caught by QA team so no need regression test.