[$250] When creating a new workspace Categories section is animated

[m-natarajan]

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-3
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: @puneetlath
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1714499534625949

Action Performed:

1. Sign in to NewDot
2. Create a workspace

Expected Result:

Categories section should not animate since it's a default

Actual Result:

Categories section is animating

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

Screen.Recording.2024-04-30.at.1.51.33.PM.mov

animate.adding.category.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01228067b48163c60a
• Upwork Job ID: 1786436695444275200
• Last Price Increase: 2024-05-03
• Automatic offers:
• ikevin127 | Reviewer | 0
• Krishna2323 | Contributor | 0

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

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

[Krishna2323]

Proposal

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

When creating a new workspace Categories section is animated

What is the root cause of that problem?

The draft policy doesn't have areCategoriesEnabled set to true, but the finalized policy does. Therefore, when we visit the WorkspaceInitialPage, initially areCategoriesEnabled isn't present in the draft. However, when we obtain the original policy, areCategoriesEnabled is available and is true.

App/src/libs/actions/Policy.ts

Lines 2054 to 2063 in 54d971a

	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.SET,
	key: `${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`,
	value: {
	id: policyID,
	type: CONST.POLICY.TYPE.TEAM,
	name: workspaceName,
	role: CONST.POLICY.ROLE.ADMIN,
	owner: sessionEmail,

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

We should add areCategoriesEnabled: true in the optimisticData.

What alternative solutions did you explore? (Optional)

Also check for other properties that are default and not present in optimisticData.

[Krishna2323]

Proposal Updated

• Added optional

[allgandalf]

Proposal

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

Categories is animated even though it is default

What is the root cause of that problem?

Currently, we check the feature state for categories before pushing it to the options:

App/src/pages/workspace/WorkspaceInitialPage.tsx

Lines 225 to 233 in 54d971a

	if (featureStates?.[CONST.POLICY.MORE_FEATURES.ARE_CATEGORIES_ENABLED]) {
	protectedCollectPolicyMenuItems.push({
	translationKey: 'workspace.common.categories',
	icon: Expensicons.Folder,
	action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_CATEGORIES.getRoute(policyID)))),
	brickRoadIndicator: hasPolicyCategoryError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
	routeName: SCREENS.WORKSPACE.CATEGORIES,
	});
	}

This causes the animation effect, but for a collect/control policy, categories are set to default hence this check isn't required.

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

We should remove the if condition wrapped for categories.

Result

Screen.Recording.2024-05-01.at.4.21.05.PM.mov

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01228067b48163c60a

[melvin-bot]

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

[zanyrenney]

categories appears by default so yup this is a bug.

[zanyrenney]

@ikevin127 we already have a fair amount of proposals, so please review these above.

[ikevin127]

@zanyrenney Sure, will review today!

[ShridharGoel]

@ikevin127 Kindly wait for 1 hour, I'm also planning a proposal.

[ShridharGoel]

@ikevin127 Actually the first proposal seems to be the correct solution, so you can ignore my previous comment.

[ikevin127]

@Krishna2323's proposal looks good to me! The RCA is correct and the main solution fixes the issue from the root cause as setting areCategoriesEnabled: true within createDraftInitialWorkspace's optimisticData is also done in the createWorkspace's optimisticData -> meaning it's a valid pattern.

🎀👀🎀 C+ reviewed

[ikevin127]

@GandalfGwaihir Thanks for your proposal!

Your RCA is not complete as it only points to how the animation occurs but not why. Additionally, the proposed solution, while it seems to work at first sight, removing the if featureStates?.[CONST.POLICY.MORE_FEATURES.ARE_CATEGORIES_ENABLED] check would cause regressions (which we want to avoid) such as:

• Categories section would always show-up regardless of the workspace type (non-collect too)
• Categories toggle (enable / disable) wouldn't work anymore since there's no check

[melvin-bot]

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

[marcaaron]

woo! let's go!

[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]

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

[Krishna2323]

@ikevin127, PR ready for review.

[ikevin127]

⚠️ Automation failed -> this should be on [HOLD for Payment [2024-05-15]] according to today's production deploy from #41646 (comment).

cc @marcaaron @zanyrenney

[ikevin127]

@zanyrenney Is anything else needed from my side in order for the payment to be issued today ?

[zanyrenney]

payment summary

$250 for @ikevin127 paid via upwork
$250 for @Krishna2323 paid via upwork