[HOLD for payment 2024-05-22] [$250] Categories - Unable to go to other tabs after enabling " must categorize all spend" offline

[kbecciv]

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.68-0
Reproducible in staging?: y
Reproducible in production?: y
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go offline.
3. Go to Account settings > Workspaces.
4. Create a new workspace.
5. Go to Categories.
6. Click Settings.
7. Toggle on "Members must categorize all spend".
8. Close the RHP.
9. Navigate to other tabs.

Expected Result:

User should be able to navigate to other tabs after toggling on "Members must categorize all spend" offline.

Actual Result:

User is blocked from clicking on other tabs after toggling on "Members must categorize all spend" offline.

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

Bug6466535_1714480419141.20240430_202756.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014991e62b8f3dcfbf
• Upwork Job ID: 1785348526516846592
• Last Price Increase: 2024-04-30
• Automatic offers:
• ikevin127 | Reviewer | 0
• Nodebrute | Contributor | 0

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.

[kbecciv]

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

[kbecciv]

@joekaufmanexpensify 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.

[joekaufmanexpensify]

It doesn't only happen when you're offline. If you create a new workspace while online and enable this feature, it precludes accessing tabs in the workspace editor. Definitely a bug.

2024-04-30_12-39-00.mp4

[melvin-bot]

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

[melvin-bot]

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

[Nodebrute]

Proposal

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

Categories - Unable to go to other tabs after enabling " must categorize all spend" offline

What is the root cause of that problem?

Policy.errors will always be true instead we should check if it's an empty object

App/src/pages/workspace/WorkspaceInitialPage.tsx

Line 87 in 421581d

const hasPolicyCreationError = !!(policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && policy.errors);

Enabling categories will make both of the above conditions true, which will result in all options being disabled.

App/src/pages/workspace/WorkspaceInitialPage.tsx

Line 357 in 421581d

disabled={hasPolicyCreationError || isExecuting}

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

Instead of policy.error we should check for !isEmptyObject(policy.errors)
const hasPolicyCreationError = !!(policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && !isEmptyObject(policy.errors));

App/src/pages/workspace/WorkspaceInitialPage.tsx

Line 87 in 421581d

const hasPolicyCreationError = !!(policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && policy.errors);

Warning

I don't think we should use errors: null. If the policy had previous errors, enabling categories will reset all errors to null.

What alternative solutions did you explore? (Optional)

[ShridharGoel]

Proposal

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

What is the root cause of that problem?

Optimistic data and success data is setting errors to an object with requiresCategory.

App/src/libs/actions/Policy.ts

Lines 3571 to 3599 in 942c851

	optimisticData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	requiresCategory,
	errors: {
	requiresCategory: null,
	},
	pendingFields: {
	requiresCategory: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	},
	},
	},
	],
	successData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	errors: {
	requiresCategory: null,
	},
	pendingFields: {
	requiresCategory: null,
	},
	},
	},
	],

For tags, same issue is there using requiresTag.

App/src/libs/actions/Policy.ts

Lines 4355 to 4381 in 942c851

	optimisticData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	requiresTag,
	errors: {requiresTag: null},
	pendingFields: {
	requiresTag: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	},
	},
	},
	],
	successData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	errors: {
	requiresTag: null,
	},
	pendingFields: {
	requiresTag: null,
	},
	},
	},
	],

This leads to hasPolicyCreationError becoming true in WorkspaceInitialPage.

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

In the optimistic data, errors should be set to null for categories and tags.

function setWorkspaceRequiresCategory(policyID: string, requiresCategory: boolean) {
    const onyxData: OnyxData = {
        optimisticData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
                value: {
                    requiresCategory,
-                  errors: {
-                      requiresCategory: null,
-                  },
+                  errors: null,
                    pendingFields: {
                        requiresCategory: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
                    },
                },
            },
        ],
        successData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
                value: {
-                  errors: {
-                      requiresCategory: null,
-                  },
+                  errors: null,
                    pendingFields: {
                        requiresCategory: null,
                    },
                },
            },
        ],
        failureData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
                value: {
                    requiresCategory: !requiresCategory,
                    errors: ErrorUtils.getMicroSecondOnyxError('workspace.categories.updateFailureMessage'),
                    pendingFields: {
                        requiresCategory: null,
                    },
                },
            },
        ],
    };

    const parameters = {
        policyID,
        requiresCategory,
    };

    API.write(WRITE_COMMANDS.SET_WORKSPACE_REQUIRES_CATEGORY, parameters, onyxData);
}

The method for tags setPolicyRequiresTag also needs to be updated.

Same change is needed for tags.

We should also update the check in hasPolicyCreationError to !isEmptyObject(policy.errors) instead of policy.errors.

[ntdiary]

Hi, @joekaufmanexpensify, I'll be OOO for the next two weeks. Could you please reassign another c+? :)

[joekaufmanexpensify]

Will do!

[melvin-bot]

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

[ikevin127]

♻️ Reviewing proposals.

[ikevin127]

@Nodebrute's proposal looks good to me! They were first to identify the root cause and propose the isEmptyObject solution which fixes the issue accordingly.

I agree with the note that we shouldn't set errors: null because if the policy previously had errors, these will be cleared when toggling Categories > "Members must categorize all spend" or Tags > "Members must tag all spend", which would create a regression.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[ikevin127]

@ShridharGoel Given that the first proposal identified the RCA and proposed the isEmptyObject solution first, please let me know if you think there's something I'm missing from your solution which would require the errors: null part your solution suggests.

If I'm missing anything please let me know and if the argument for your version of the solution is solid then I'll reconsider assignment.

[Nodebrute]

@chiragsalian Waiting to be assigned.

[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

[melvin-bot]

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

[joekaufmanexpensify]

PR on staging

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

• Fix disabled Tabs #41637

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

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

• @ikevin127 requires payment automatic offer (Reviewer)
• @Nodebrute 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:

• [@ikevin127] The PR that introduced the bug has been identified. Link to the PR: Show errors after workspace creation failure #12117
• [@ikevin127] 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/12117/files#r1607170228
• [@ikevin127] 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: No need to start a discussion as the logic that introduced this issue was written in 2022 back when we were using React class components and plain javascript. Since then we migrated to React functional components and typescript which means that this kind of faulty logic is less likely to be written.
• [@ikevin127] Determine if we should create a regression test for this bug.
• [@ikevin127] 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.
• [@joekaufmanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/398237

[joekaufmanexpensify]

@ikevin127 please handle BZ checklist so we can issue payment this week

[ikevin127]

• [@ikevin127] The PR that introduced the bug has been identified. Link to the PR: Show errors after workspace creation failure #12117
• [@ikevin127] 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: #12117 (comment).
• [@ikevin127] 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:

No need to start a discussion as the logic that introduced this issue was written in 2022 back when we were using React class components and plain javascript. Since then we migrated to React functional components and typescript which means that this kind of faulty logic is less likely to be written.

• [@ikevin127] Determine if we should create a regression test for this bug.
• [@ikevin127] 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.

Regression Test Proposal

1. Go offline.
2. Go to Account settings > Workspaces.
3. Create a new workspace.
4. Go to Categories.
5. Click Settings.
6. Toggle on "Members must categorize all spend".
7. Close the RHP.
8. Verify that you can navigate to other tabs of the workspace settings (left sidebar).

Do we agree 👍 or 👎.

cc @joekaufmanexpensify

[joekaufmanexpensify]

Checklist all set.

[joekaufmanexpensify]

All set to issue payment! We need to pay:

• @Nodebrute - $250 for PR via upwork
• @ikevin127 - $250 for C+ via Upwork

[joekaufmanexpensify]

@Nodebrute $250 sent and contract ended!

[joekaufmanexpensify]

@ikevin127 $250 sent and contract ended!

[joekaufmanexpensify]

Upwork job closed.

[joekaufmanexpensify]

All set, thanks everyone!