[$500] [Wave 6: Tags] - Unable to unselect tag from created expense when the tag is disabled

[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.91-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:

1. Go to staging.new.expensify.com
2. As employee, create a workspace expense with a tag
3. As admin, go to OD and disable the tag created in Step 1
4. As employee, go to the workspace expense details page and refresh the page
5. Click on Tag

Expected Result:

User is able to unselect the tag

Actual Result:

User is unable to unselect the tag. It is disabled

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

Windows: Chrome

Bug6250597_1698253971783.bandicam_2023-10-25_19-21-42-699.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dfd87fd1cc34a215
• Upwork Job ID: 1717255074756784128
• Last Price Increase: 2023-10-25
• Automatic offers:
• tienifr | Contributor | 27458232

[melvin-bot]

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

[melvin-bot]

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

[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 - @robertKozik (External)

[GItGudRatio]

Weirdly enough, while trying to re create this issue, the tag itself disappears completely for me. It's not present in the list at all

[Samueljh1]

Proposal

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

Unable to unselect a previously set tag after it has been disabled by an admin.

What is the root cause of that problem?

The OptionsSelector disables interaction for all tags that have been switched off by a workspace admin. Although this is appropriate behaviour for a tag that is not selected, we should still let the user remove the tag.

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

We need to make an exception in the TagPicker component to allow an already selected tag to be removed regardless of its state. This way, the user can deselect it (while preventing it from being selected again).

We can read the value of the selectedOptions array in TagPicker to do this. For these tags, we ensure that they are enabled in the OptionsSelector.

What alternative solutions did you explore? (Optional)

N/A

[tienifr]

Proposal

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

Tag - Unable to unselect tag from created expense when the tag is disabled

What is the root cause of that problem?

When the tag is disabled, we don't show it in option list

App/src/libs/OptionsListUtils.js

Line 937 in 05ae4c4

const enabledTags = _.filter(tags, (tag) => tag.enabled);

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

Because we use TagPicker in many places, so we should define the new props for TagPicker like shouldShowDisabledAndSelectedOption and just enable it in EditRequestTagPage

In TagPicker, if shouldShowDisabledAndSelectedOption is true, we can get the enabledTags by merging 2 arrays: selectedOptions and policyTagList (remove the duplicate option)

Here's the sample code:

    const selectedNames = selectedOptions.map(s=>s.name)
    const enabledTags = [...selectedOptions,..._.filter(policyTagList, (tag) => (tag.enabled && !selectedNames.includes(tag.name)))]

then pass enabledTags to getFilteredOptions function

What alternative solutions did you explore? (Optional)

In the case we're creating the new request and select the enabled tag. But at that time, admin disable this tag, we should clear the tag in the in-processing request

Result

Screen.Recording.2023-10-26.at.11.39.13.mov

[DylanDylann]

Proposal

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

If we disable selected tag, this tag will hide in Tag list

What is the root cause of that problem?

Let's see the logic to get tags

App/src/libs/OptionsListUtils.js

Line 893 in 69119aa

if (numberOfTags < CONST.TAG_LIST_THRESHOLD) {

If numberOfTag < 8, we return all enable tags (only enable tags)

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 915 to 933 in 69119aa

	if (!_.isEmpty(selectedOptions)) {
	const selectedTagOptions = _.map(selectedOptions, (option) => {
	const tagObject = _.find(tags, (tag) => tag.name === option.name);
	return {
	name: option.name,
	enabled: Boolean(tagObject && tagObject.enabled),
	};
	});
	tagSections.push({
	// "Selected" section
	title: '',
	shouldShow: false,
	indexOffset,
	data: getTagsOptions(selectedTagOptions),
	});
	indexOffset += selectedOptions.length;
	}

to before

App/src/libs/OptionsListUtils.js

Line 893 in 69119aa

if (numberOfTags < CONST.TAG_LIST_THRESHOLD) {

and in here

App/src/libs/OptionsListUtils.js

Line 899 in 69119aa

data: getTagsOptions(enabledTags),

update to

            data: getTagsOptions(lodashDifferenceBy(enabledTags, selectedOptions, 'name')),

to avoid dupe the selected tag.

With this approach we also need to update

App/src/components/TagPicker/index.js

Line 39 in cd851f5

const initialFocusedIndex = useMemo(() => {

like we did in CategoryPicker

What alternative solutions did you explore? (Optional)

[johncschuster]

@robertKozik it looks like we've got a few proposals above. Can you take a look?

[robertKozik]

Sure, I'm on it.
Thank you all for your proposals. After carefully looking into all proposals I believe we should go with the @tienifr proposal. It was the first to correctly state the root cause of the problem and the solution was detailed enough in my opinion.

I believe we should go with the @tienifr proposal

[melvin-bot]

@johncschuster, @robertKozik Whoops! This issue is 2 days overdue. Let's get this updated quick!

[robertKozik]

eh... forgot the precious line:
🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @tienifr 🎉 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 📖

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[mountiny]

@tienifr @robertKozik Whats the status of this issue? has there been any regressions?

[melvin-bot]

This issue has not been updated in over 15 days. @johnmlee101, @johncschuster, @robertKozik, @tienifr 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!

[melvin-bot]

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

[johncschuster]

I will be OOO starting Monday, December 18, and will return Tuesday, January 2.

Current status:
We're waiting on an overall status from @tienifr / @robertKozik
Payment has not been issued
Regression steps have not been proposed (if applicable)

If this issue is open when I'm back from OOO, I'll take it back over. Thank you!

[robertKozik]

Hey! PR for this issue caused one regression which was handled as different task by the time of merge (here but overally the issue should be resolved already.

As for the regression steps, I think we can propose them here:

1. As employee, create a workspace expense with a tag
2. As admin, go to OD and disable the tag created in Step 1
3. As employee, go to the workspace expense details page and refresh the page
4. Click on Tag
5. Verify that user is able to unselect the tag

[slafortune]

Thanks for the update!
Test GH created - https://github.com/Expensify/Expensify/issues/351737
Paid @tienifr
@robertKozik part of Software Mansion