[HOLD for payment 2024-03-14] [$500] Category - No spacing between long category name and category status

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Found when validating PR : #36324

Version Number: v1.4.44-7
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation:

Action Performed:

Precondition:

• Collect workspace has a long category name.

1. Log in to New Dot as admin.
2. Go to workspace settings > Collect workspace.
3. Go to Categories.

Expected Result:

There will be spacing between the long category name and category status.

Actual Result:

There is no spacing between the long category name and category status.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014c7dcc9cd5ddc2d3
• Upwork Job ID: 1762812215508320256
• Last Price Increase: 2024-02-28
• Automatic offers:
• Ollyws | Reviewer | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014c7dcc9cd5ddc2d3

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Current assignee @puneetlath is eligible for the Engineering assigner, not assigning anyone new.

[izarutskaya]

We think that this bug might be related to #wave6-collect-submitters
CC @greg-schroeder

[Krishna2323]

Proposal

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

Category - No spacing between long category name and category status

What is the root cause of that problem?

We don't have any margins/padding between text and alternateText

App/src/components/SelectionList/TableListItem.tsx

Lines 61 to 79 in bee752a

	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={item.text}
	textStyles={[
	styles.optionDisplayName,
	isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
	styles.sidebarLinkTextBold,
	styles.pre,
	item.alternateText ? styles.mb1 : null,
	styles.justifyContentCenter,
	]}
	/>
	{!!item.alternateText && (
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={item.alternateText}
	textStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
	/>
	)}

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

Add margins/padding between text and alternateText. Spacing can be discussed with the design team or can be same as other similar component.

Need to apply margin here:

App/src/components/SelectionList/TableListItem.tsx

Line 60 in bee752a

<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>

Result

[dragnoir]

Proposal

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

Missing padding left

What is the root cause of that problem?

On WorkspaceCategoriesPage, the rightElement is missing a margin left.

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

Lines 58 to 65 in 3389b90

	rightElement: (
	<View style={styles.flexRow}>
	<Text style={[styles.disabledText, styles.alignSelfCenter]}>{value.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')}</Text>
	<View style={[styles.p1, styles.pl2]}>
	<Icon
	src={Expensicons.ArrowRight}
	fill={theme.icon}
	/>

We can see that ther's a styles.pl2 for a marginLeft between the icon and the "Enabled". But we are missing another margin on the left between this rightElemen and what ever will be on the left side.

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

When dealing with a block containing two elements positioned on the left and right sides, it's preferable to apply margin-left to the element on the right. This ensures that if the right element is not displayed, the margin is automatically removed. Conversely, if we apply margin-right to the left element and the right element is subsequently removed, the margin persists, potentially leading to UI issues.

Here we need to add margin left to rightElement:

rightElement: (
  <View  style={styles.flexRow}>
-  <Text  style={[styles.disabledText, styles.alignSelfCenter]}>
+  <Text  style={[styles.disabledText, styles.alignSelfCenter, styles.pl2]}>
    {value.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')}
  </Text>
 

What alternative solutions did you explore? (Optional)

POC;

[wustwg]

Maybe this question is stupid. How can I "Log in to New Dot as admin"?
I find every where on Expensify App and web Ui, but find nothing.
I find the source code of categories , but I don't know how can I show it for me.

[brandonhenry]

@wustwg no question is stupid :)

you can login to new dot as an admin by simply being the owner of the workspace. To see categories, you're going to need to go to Old Dot and login to your account (this one will be the "admin" account). Then go to settings -> workspaces -> new workspace. Create a Collect workspace. Open the console and enter:

p = Policy.getCurrent();
p.policy.isPolicyExpenseChatEnabled = "true";
p.save();

And you're done. Now you should start seeing the collect workspace in ND and the categories

[askavyblr]

@wustwg no question is stupid :)

you can login to new dot as an admin by simply being the owner of the workspace. To see categories, you're going to need to go to Old Dot and login to your account (this one will be the "admin" account). Then go to settings -> workspaces -> new workspace. Create a Collect workspace. Open the console and enter:

p = Policy.getCurrent();
p.policy.isPolicyExpenseChatEnabled = "true";
p.save();

And you're done. Now you should start seeing the collect workspace in ND and the categories

@brandonhenry please tell me more about Old Dot and login, i did not understand

[brandonhenry]

@wustwg @askavyblr please read the Contributor Guidelines. It has all the information you need

[Ollyws]

Couldn't get to this one today but will do tomorrow.

[Ollyws]

@Krishna2323 The problem with adding margin to this view is that it will add unwanted margin even when the rightElement isn't being displayed.

@dragnoir's proposal LGTM.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @Ollyws 🎉 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]

📣 @dragnoir You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[dragnoir]

PR will be ready in just few hours :)

[dragnoir]

PR ready #37668

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

• Fix: add spacing between long category name and category status #37668

If no regressions arise, payment will be issued on 2024-03-14. 🎊

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

• @Ollyws requires payment automatic offer (Reviewer)
• @dragnoir requires payment (Needs manual offer from BZ)

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

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

[puneetlath]

@Ollyws friendly reminder about the checklist so we can pay in a couple days.

[Ollyws]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR:

#36324

• 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:

#36324 (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:

N/A

• Determine if we should create a regression test for this bug.

Yes

• 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

Precondition: Collect workspace has a long category name.

1. Log in to New Dot as admin.
2. Go to workspace settings > Collect workspace.
3. Go to Categories.
4. Verify that there is padding between the category name and category status

Do we agree 👍 or 👎

[puneetlath]

Thanks. @Ollyws @dragnoir offers to both of you are pending. Please ping on this issue once you've accepted.

[dragnoir]

Thank you @puneetlath offer accepted, also pls check here #37668 (comment)

[puneetlath]

@dragnoir has been paid.

@Ollyws ping me here when you've accepted the offer.

[Ollyws]

@puneetlath accepted, thanks!

[puneetlath]

All paid. Thanks y'all!