[HOLD for payment 2024-06-13] [$250] Tags - When deleting all tags, blank UI is shown

[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.4.74-0
Reproducible in staging?: Y
Reproducible in production?: 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): applausetester+emilio@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the New Expensify App
2. Sign into a valid account
3. Click on WS > More features > Enable Tags (Notice that there will be an UI there since you have no tags yet)
4. Create any tag then delete this tag

Expected Result:

User expects the initial "No Tag" UI to show up again and immediately

Actual Result:

No UI is shown, just a blank space. Even after exiting and returning or refreshing

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

Bug6482021_1715805828702.Tag_UI_is_not_shown_after_deleting_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015255d5c42b2d8ce7
• Upwork Job ID: 1793173724031148032
• Last Price Increase: 2024-05-22
• Automatic offers:
• tienifr | Contributor | 102491218

Issue Owner

Current Issue Owner: @JmillsExpensify

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (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.

[allgandalf]

Proposal

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

Empty state UI is not shown when we delete tags and the action is still in optimistic state

What is the root cause of that problem?

We check for the length of the tagList and if it is zero then we display the empty UI component

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 325 to 331 in ac2b3a0

	{tagList.length === 0 && !isLoading && (
	<WorkspaceEmptyStateSection
	title={translate('workspace.tags.emptyTags.title')}
	icon={Illustrations.EmptyStateExpenses}
	subtitle={translate('workspace.tags.emptyTags.subtitle')}
	/>
	)}

When we delete the tags, the tags are still present in the tagList array with having a pending action delete. This causes the empty UI component to not show.

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

We need to update the condition of showing the Empty UI to consider the case if all the element in the tagList have pendingAction as delete, if true then we need to show the empty UI component.
We can reuse the same logic from categories:

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 244 in ac2b3a0

const shouldShowEmptyState = !categoryList.some((category) => category.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) && !isLoading;

So we can introduce a new variable similar to categories which is shouldShowEmptyState:

const shouldShowEmptyState = !tagList.some((tag) => tag.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) && !isLoading;

Then update the condition at 1) empty UI state:

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 325 to 326 in ac2b3a0

	{tagList.length === 0 && !isLoading && (
	<WorkspaceEmptyStateSection

To:

{shouldShowEmptyState && (
                    <WorkspaceEmptyStateSection

And 2) Tag list component:

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 332 to 333 in ac2b3a0

	{tagList.length > 0 && !isLoading && (
	<SelectionList

To:

 {!shouldShowEmptyState && (
                    <SelectionList

Result Video

Screen.Recording.2024-05-16.at.2.40.55.AM.mov

[Krishna2323]

Proposal

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

Tags - When deleting all tags, blank UI is shown

What is the root cause of that problem?

The condition for showing empty WorkspaceEmptyStateSection isn't correct, we need to check for pending action also.

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 325 to 326 in e35ab02

	{tagList.length === 0 && !isLoading && (
	<WorkspaceEmptyStateSection

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 332 to 333 in e35ab02

	{tagList.length > 0 && !isLoading && (
	<SelectionList

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

We need to first check for !tagList.some((tag) => tag.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE), this will check if we have any tag list item with pending action not equal to DELETE and then we also need to check !(tagList.every((tag) => tag.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) && isOffline), this will check if all the list options has pending action of DELETE and isOffline is true, we need to add this check because in offline mode we want to show the deleted options instead of WorkspaceEmptyStateSection. We also need to check other policy pages and update that. Categories page condition also needs to be updated.

    const shouldShowEmptyState =
        !(tagList.every((tag) => tag.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) && isOffline) &&
        !tagList.some((tag) => tag.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) &&
        !isLoading;

What alternative solutions did you explore? (Optional)

[melvin-bot]

@JmillsExpensify Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[JmillsExpensify]

Opening this up to the community.

[melvin-bot]

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

[tienifr]

Proposal

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

No UI is shown, just a blank space. Even after exiting and returning or refreshing

What is the root cause of that problem?

The logic of checking tagList.length here is not correct, in the case where the user is online and there's only pending-delete tags, the tagList will have element but we should not show any tag and should show empty state.

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

In here, we need to add

const hasVisibleTag = tagList.some((tag) => tag.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline);

This will make sure it works both when online and offline:

• When the user is offline, as long as there's any tag in tagList, the list will be visible. Because even the pending-delete tag will still show in offline mode. (The || isOffline condition)
• When the user is online, we'll show the tagList as long as there's any tag that is not pending delete in the list. If the list is empty or contains only pending delete tag, there's no visible tag

Then in here, update to

{!hasVisibleTag && !isLoading && (

and here, update to

{hasVisibleTag && !isLoading && (

We need to fix similarly in other pages like categories list page.

FYI the proposal that suggests the every and isOffline check will not work since when the user is offline, if the list is empty, then every item in the list will have pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE and in this case the empty state will not show. The empty state should show since there's no item in the tagList.

Additionally, checking !isLoading in shouldShowEmptyState will not work because in here, even if shouldShowEmptyState is false, we still need to wait for the isLoading to become false before showing the tags list, otherwise the loading indicator and the list will show at the same time.

What alternative solutions did you explore? (Optional)

NA

[wkarim86]

Proposal

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

The problem is when there are no tags initially the page shows No tags UI. but once you add a new tag and delete all tags, it shows empty tags list screen instead of 'No tags UI'. I re-tested the problem and found something.

What is the root cause of that problem?

The root cause is the tags object taking time to update the state. Which cause a slight delay to re-render the component ui.

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

The common problem of this issue is not handled the state properly. It may be state hook dependency or lifecycle.

What alternative solutions did you explore? (Optional)

[melvin-bot]

📣 @wkarim86! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

@JmillsExpensify, @allroundexperts Eep! 4 days overdue now. Issues have feelings too...

[allroundexperts]

Reviewing today!

[allroundexperts]

Thanks for the proposals everyone. @tienifr's proposal handles all the cases correctly and as such, we should go with them.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[allgandalf]

@allroundexperts , Can you please rereview my proposal?

The offline case is already covered by the isLoading variable:

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 242 in ac2b3a0

const isLoading = !isOffline && policyCategories === undefined;

if possible can you please point out any regression which my proposal would have? I didn't get why my proposal was not selected here, if @tienifr has a possible case i would love to hear from them too!

c.c. @Beamanator

[tienifr]

The offline case is already covered by the isLoading variable:

@GandalfGwaihir That's not right unfortunately.

After applying your proposal, when we have 1 tag, then go offline, then delete that tag, we'll see empty state, which is incorrect.

We should see a striked-through tag in this case to indicate that it's pending deleted.

Feel free to try 👍

[wkarim86]

Contributor details
Your Expensify account email: wkarim86@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01a5e7655ce154e085

[wkarim86]

@wkarim86 Please read the contributing guides here to understand how contribution works in this project.
@tienifr
I have read the contribution document as well as the code of conduct. Could you tell me what the next step will be? Would you like me to start working on the issue or first I have to accept the offer from Upwork? If this is the case, I can create PR within 3 days, because setting up the application may take more time than usual. I hope you can understand.

[Beamanator]

@wkarim86 sorry but you were not hired for this job. As you can see in this comment, our assigned Contributor-plus team member recommended hiring tienifr , and I agreed so I hired them.

As you probably read in the contributor guidelines, once the Help Wanted label is removed from an issue, the job is no longer open b/c someone else was already hired. If you have any questions about that process, please ask in slack - in the #expensify-open-source channel

[wkarim86]

@Beamanator Ok no problem. I missed that comment.

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

• fix: empty ui does not show when deleting all tags #42810

If no regressions arise, payment will be issued on 2024-06-13. 🎊

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

• @allroundexperts requires payment through NewDot Manual Requests
• @tienifr requires payment automatic offer (Contributor)

[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.
• [@JmillsExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

@JmillsExpensify, @Beamanator, @allroundexperts, @tienifr Eep! 4 days overdue now. Issues have feelings too...

[Beamanator]

@JmillsExpensify looks like we're ready for payment here 🙏

[JmillsExpensify]

Payment summary:

• Contributor: $250 @tienifr
• Contributor+: $250 @allroundexperts

[JmillsExpensify]

Contributor paid out. C+ needs to fill out the checklist and is paid via New Expensify, so I'll circle back on this issue for payment approval.

[allroundexperts]

Checklist

1. Create WorkspaceTagsSettingsPage #37755
2. https://github.com/Expensify/App/pull/37755/files#r1650184022
3. N/A
4. A regression test would be helpful. The steps given in the OP look good enough to me.

[JmillsExpensify]

@mallenexpensify can you confirm the payment summary above?

[mallenexpensify]

Contributor: @tienifr due $250 via NewDot
Contributor+: @allroundexperts due $250 via NewDot

TestRail Gh https://github.com/Expensify/Expensify/issues/414355

[JmillsExpensify]

$250 approved for @allroundexperts. @tienifr don't forget to submit via New Expensify.

[melvin-bot]

@JmillsExpensify, @Beamanator, @allroundexperts, @tienifr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!