[HOLD for payment 2024-06-28] [$250] Web - Categorizing - Folder icon in empty state screen is not centered #43064

lanitochka17 · 2024-06-04T19:43:16Z

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-79-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #41344

Action Performed:

Go to staging.new.expensify.com
Create a new workspace
Delete all the categories
Go to FAB > Track expense > Manual
Track an expense
Click Categorize it from actionable whisper
Select the workspace from Step 2

Expected Result:

The folder icon in empty state screen should be centered

Actual Result:

The folder icon in empty state screen is not centered.
It is aligned a bit to the left

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6501950_1717527248050.bandicam_2024-06-05_02-50-57-513.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~010e432e93c8345898
Upwork Job ID: 1798238220399464448
Last Price Increase: 2024-06-05
Automatic offers:

jjcoffee | Reviewer | 102614841
tienifr | Contributor | 102614843

Issue Owner

Current Issue Owner: @abekkala

melvin-bot · 2024-06-04T19:43:25Z

Triggered auto assignment to @hayata-suenaga (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

github-actions · 2024-06-04T19:43:29Z

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

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

lanitochka17 · 2024-06-04T19:44:25Z

@hayata-suenaga 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

hayata-suenaga · 2024-06-05T06:18:10Z

missed this. working on it right now

hayata-suenaga · 2024-06-05T06:19:17Z

I don't think we have to block deploy for this. removing the deploy blocker label

melvin-bot · 2024-06-05T06:19:37Z

Job added to Upwork: https://www.upwork.com/jobs/~010e432e93c8345898

melvin-bot · 2024-06-05T06:19:42Z

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

melvin-bot · 2024-06-05T06:19:44Z

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

dragnoir · 2024-06-05T06:26:43Z

Proposal

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

Web - Categorizing - Folder icon in empty state screen is not centered

What is the root cause of that problem?

SVG icon has space on the right here

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

Adjust or edit the SVG icon to remove the space on the right.

<BlockingView
    icon={Illustrations.EmptyStateExpenses}
-  iconWidth={variables.modalTopIconWidth}
+ iconWidth={184}
-  iconHeight={variables.modalTopIconHeight}
+ iconHeight={116}
  title={translate('workspace.categories.emptyCategories.title')}
  subtitle={translate('workspace.categories.emptyCategories.subtitle')}
  contentFitImage="contain"
                    />

What alternative solutions did you explore?

Using an SVG tool, we can adjust the original SCG file, not the width/height to fit the size we need 200/164

because the SVG icon has a size of 184/116 so the contentFitImage="contain" can't make an SVG bigger than the original size

Tony-MK · 2024-06-05T06:32:48Z

Proposal

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

Web - Categorizing - Folder icon in empty state screen is not centered

What is the root cause of that problem?

Unlike the workspace page, the IOURequestStepCaterogy page has a block view with the contentFitImage attribute.

App/src/pages/iou/request/step/IOURequestStepCategory.tsx

Lines 172 to 176 in 4e4715f

    
           <BlockingView 
        
               icon={Illustrations.EmptyStateExpenses} 
        
               iconWidth={variables.modalTopIconWidth} 
        
               iconHeight={variables.modalTopIconHeight} 
        
               title={translate('workspace.categories.emptyCategories.title')}

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

Lines 321 to 326 in 4e4715f

    
               <WorkspaceEmptyStateSection 
        
                   title={translate('workspace.categories.emptyCategories.title')} 
        
                   icon={Illustrations.EmptyStateExpenses} 
        
                   subtitle={translate('workspace.categories.emptyCategories.subtitle')} 
        
               /> 
        
           )}

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

We should use the or remove the contentFitImage="contain"

<BlockingView
    icon={Illustrations.EmptyStateExpenses}
    title={translate('workspace.categories.emptyCategories.title')}
    subtitle={translate('workspace.categories.emptyCategories.subtitle')}
/>

ZhenjaHorbach · 2024-06-05T06:33:02Z

Proposal

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

Web - Categorizing - Folder icon in empty state screen is not centered

What is the root cause of that problem?

The main problem with issue is that we use incorrect width and height

App/src/pages/iou/request/step/IOURequestStepCategory.tsx

Lines 172 to 179 in 4e4715f

    
           <BlockingView 
        
               icon={Illustrations.EmptyStateExpenses} 
        
               iconWidth={variables.modalTopIconWidth} 
        
               iconHeight={variables.modalTopIconHeight} 
        
               title={translate('workspace.categories.emptyCategories.title')} 
        
               subtitle={translate('workspace.categories.emptyCategories.subtitle')} 
        
               contentFitImage="contain" 
        
           />

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

To fix this issue we can use width and height from WorkspaceEmptyStateSection (In this component we always pass the same image Illustrations.EmptyStateExpenses )

                width={184}
                height={116}

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

Lines 321 to 325 in 4e4715f

    
           <WorkspaceEmptyStateSection 
        
               title={translate('workspace.categories.emptyCategories.title')} 
        
               icon={Illustrations.EmptyStateExpenses} 
        
               subtitle={translate('workspace.categories.emptyCategories.subtitle')} 
        
           />

App/src/components/WorkspaceEmptyStateSection.tsx

Lines 26 to 30 in 4e4715f

    
           <Icon 
        
               src={icon} 
        
               width={184} 
        
               height={116} 
        
           />

What alternative solutions did you explore? (Optional)

NA

tienifr · 2024-06-05T06:55:36Z

Proposal

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

What is the root cause of that problem?

In IOURequestStepCategory, we render the empty category component by using BlockingView with the wrong width and height attribute

App/src/pages/iou/request/step/IOURequestStepCategory.tsx

Lines 172 to 179 in 4e4715f

    
           <BlockingView 
        
               icon={Illustrations.EmptyStateExpenses} 
        
               iconWidth={variables.modalTopIconWidth} 
        
               iconHeight={variables.modalTopIconHeight} 
        
               title={translate('workspace.categories.emptyCategories.title')} 
        
               subtitle={translate('workspace.categories.emptyCategories.subtitle')} 
        
               contentFitImage="contain" 
        
           />

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

We implemented the WorkspaceEmptyStateSection component to render the empty category component. Thus, we should use WorkspaceEmptyStateSection instead of BlockingView in IOURequestStepCategory page

With this approach, we need to adjust some CSS attributes in WorkspaceEmptyStateSection to use some styles from the parent component like backgroundColor, textColor,...

What alternative solutions did you explore? (Optional)

NA

ZhenjaHorbach · 2024-06-05T10:54:39Z

Proposal

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

Web - Categorizing - Folder icon in empty state screen is not centered

What is the root cause of that problem?

SVG icon has space on the right here

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

Adjust or edit the SVG icon to remove the space on the right.
<BlockingView
    icon={Illustrations.EmptyStateExpenses}
-  iconWidth={variables.modalTopIconWidth}
+ iconWidth={184}
-  iconHeight={variables.modalTopIconHeight}
+ iconHeight={116}
  title={translate('workspace.categories.emptyCategories.title')}
  subtitle={translate('workspace.categories.emptyCategories.subtitle')}
  contentFitImage="contain"
                    />
What alternative solutions did you explore?

Using an SVG tool, we can adjust the original SCG file, not the width/height to fit the size we need 200/164

because the SVG icon has a size of 184/116 so the contentFitImage="contain" can't make an SVG bigger than the original size

@dragnoir
If you update your proposition and decide to use someone else's solution
Please, leave a comment

dragnoir · 2024-06-05T10:56:58Z

@ZhenjaHorbach I added the alternative solutions. Did anyone posted using an SVG tools before me?

dragnoir · 2024-06-06T08:57:12Z

@jjcoffee pls check again

App/src/components/WorkspaceEmptyStateSection.tsx

Lines 28 to 29 in 90dee7a

    
           width={184} 
        
           height={116}

The WorkspaceEmptyStateSection uses a hard coded width and height. Only icons with those sizes will fit, all the other icons will not be centered. Small icons will be on the left and bigger icons will be cutted.

So for this new proposal we will need to:

add a new prop containerStyle to adjust the position to be centered
add a new prop for if we need to use containerStyle
add a new prop shouldStyleAsCard for if it should use a background or not
we may also need to add props for width and height.

Do you think this is better that just assigning the right width and hight for BlockingView? We already use BlockingView in many UIs and we assign the width/height.

The problem is the main SVG icon is small, if the design design can update to bigger one, we don't need to change any code!!

Anyway, thanks again for your review. I just think it's not worthy all those changes.

jjcoffee · 2024-06-06T09:17:11Z

@dragnoir WorkspaceEmptyStateSection is only used with the Illustrations.EmptyStateExpenses icon, so it will always have that specific size that is hardcoded in the component. I'm not sure the reason why the icon isn't also hardcoded in the component given the component's name, but this isn't really a generic component for inserting any old icon.

Again it's not much of a trade-off to have to add a few more props to allow the component and thus the empty state icon to be generic enough to be used in other parts of the app. The benefit is clear - if we ever change the icon we only have one place to update the sizing.

jjcoffee · 2024-06-10T08:00:10Z

Nearly there with the PR, just waiting for an additional screenshot and we should be good to go!

jjcoffee · 2024-06-11T12:51:50Z

PR approved from my side.

hayata-suenaga · 2024-06-14T06:02:37Z

I've been OOO. I approved and merged the PR!

melvin-bot · 2024-06-17T23:41:43Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2024-06-17T23:41:48Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.84-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

fix: empty category illustration is not center aligned #43161

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

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

@jjcoffee requires payment automatic offer (Reviewer)
@tienifr requires payment automatic offer (Contributor)

melvin-bot · 2024-06-17T23:41:49Z

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:

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

melvin-bot · 2024-06-21T16:39:53Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.85-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

fix: empty category illustration is not center aligned #43161

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

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

@jjcoffee requires payment automatic offer (Reviewer)
@tienifr requires payment automatic offer (Contributor)

melvin-bot · 2024-06-21T16:39:54Z

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:

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

abekkala · 2024-06-25T14:47:01Z

PAYMENT SUMMARY FOR JUN 28

Fix: @tienifr [$250, if no regressions] Offer Link
PR Review: @jjcoffee [$250, if no regressions] Offer Link
please complete checklist

jjcoffee · 2024-06-26T09:35:19Z

The PR that introduced the bug has been identified. Link to the PR: Update RequestStepCategory to add Empty and Loading states for category list #41344
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/41344/files#r1654468598
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

Create a new workspace
Delete all the categories
Go to FAB > Track expense > Manual
Track an expense
Click Categorize it from the actionable whisper
Select the workspace from Step 2
Verify that the folder icon is centered

Do we agree 👍 or 👎

abekkala · 2024-06-28T16:48:43Z

@tienifr @jjcoffee - payments sent and contracts ended - thank you! 🎉

lanitochka17 added DeployBlockerCash This issue or pull request should block deployment DeployBlocker Indicates it should block deploying the API labels Jun 4, 2024

melvin-bot bot assigned hayata-suenaga Jun 4, 2024

github-actions bot added Engineering Hourly KSv2 labels Jun 4, 2024

github-actions bot mentioned this issue Jun 4, 2024

Deploy Checklist: New Expensify 2024-06-04 #43037

Closed

melvin-bot bot changed the title ~~Web - Categorizing - Folder icon in empty state screen is not centered~~ [$250] Web - Categorizing - Folder icon in empty state screen is not centered Jun 5, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jun 5, 2024

melvin-bot bot assigned jjcoffee Jun 5, 2024

melvin-bot bot assigned abekkala Jun 5, 2024

melvin-bot bot added Weekly KSv2 and removed Daily KSv2 labels Jun 6, 2024

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Jun 17, 2024

melvin-bot bot changed the title ~~[$250] Web - Categorizing - Folder icon in empty state screen is not centered~~ [HOLD for payment 2024-06-24] [$250] Web - Categorizing - Folder icon in empty state screen is not centered Jun 17, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Jun 17, 2024

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Jun 21, 2024

melvin-bot bot changed the title ~~[HOLD for payment 2024-06-24] [$250] Web - Categorizing - Folder icon in empty state screen is not centered~~ [HOLD for payment 2024-06-28] [HOLD for payment 2024-06-24] [$250] Web - Categorizing - Folder icon in empty state screen is not centered Jun 21, 2024

abekkala changed the title ~~[HOLD for payment 2024-06-28] [HOLD for payment 2024-06-24] [$250] Web - Categorizing - Folder icon in empty state screen is not centered~~ [HOLD for payment 2024-06-28] [$250] Web - Categorizing - Folder icon in empty state screen is not centered Jun 24, 2024

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Jun 24, 2024

jjcoffee mentioned this issue Jun 26, 2024

Update RequestStepCategory to add Empty and Loading states for category list #41344

Merged

50 tasks

melvin-bot bot added the Overdue label Jun 27, 2024

abekkala closed this as completed Jun 28, 2024

melvin-bot bot removed the Overdue label Jun 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2024-06-28] [$250] Web - Categorizing - Folder icon in empty state screen is not centered #43064

[HOLD for payment 2024-06-28] [$250] Web - Categorizing - Folder icon in empty state screen is not centered #43064

lanitochka17 commented Jun 4, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jun 4, 2024

github-actions bot commented Jun 4, 2024

lanitochka17 commented Jun 4, 2024

hayata-suenaga commented Jun 5, 2024

hayata-suenaga commented Jun 5, 2024

melvin-bot bot commented Jun 5, 2024

melvin-bot bot commented Jun 5, 2024

melvin-bot bot commented Jun 5, 2024

dragnoir commented Jun 5, 2024 •

edited

Loading

Tony-MK commented Jun 5, 2024

ZhenjaHorbach commented Jun 5, 2024 •

edited

Loading

tienifr commented Jun 5, 2024

ZhenjaHorbach commented Jun 5, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore?

dragnoir commented Jun 5, 2024

dragnoir commented Jun 6, 2024

jjcoffee commented Jun 6, 2024

jjcoffee commented Jun 10, 2024

jjcoffee commented Jun 11, 2024

hayata-suenaga commented Jun 14, 2024

melvin-bot bot commented Jun 17, 2024

melvin-bot bot commented Jun 17, 2024

melvin-bot bot commented Jun 17, 2024

melvin-bot bot commented Jun 21, 2024

melvin-bot bot commented Jun 21, 2024

abekkala commented Jun 25, 2024

jjcoffee commented Jun 26, 2024

abekkala commented Jun 28, 2024

[HOLD for payment 2024-06-28] [$250] Web - Categorizing - Folder icon in empty state screen is not centered #43064

[HOLD for payment 2024-06-28] [$250] Web - Categorizing - Folder icon in empty state screen is not centered #43064

Comments

lanitochka17 commented Jun 4, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Jun 4, 2024

github-actions bot commented Jun 4, 2024

lanitochka17 commented Jun 4, 2024

hayata-suenaga commented Jun 5, 2024

hayata-suenaga commented Jun 5, 2024

melvin-bot bot commented Jun 5, 2024

melvin-bot bot commented Jun 5, 2024

melvin-bot bot commented Jun 5, 2024

dragnoir commented Jun 5, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore?

Tony-MK commented Jun 5, 2024

Proposal

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

What is the root cause of that problem?

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

ZhenjaHorbach commented Jun 5, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

tienifr commented Jun 5, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

ZhenjaHorbach commented Jun 5, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore?

dragnoir commented Jun 5, 2024

dragnoir commented Jun 6, 2024

jjcoffee commented Jun 6, 2024

jjcoffee commented Jun 10, 2024

jjcoffee commented Jun 11, 2024

hayata-suenaga commented Jun 14, 2024

melvin-bot bot commented Jun 17, 2024

melvin-bot bot commented Jun 17, 2024

melvin-bot bot commented Jun 17, 2024

melvin-bot bot commented Jun 21, 2024

melvin-bot bot commented Jun 21, 2024

abekkala commented Jun 25, 2024

PAYMENT SUMMARY FOR JUN 28

jjcoffee commented Jun 26, 2024

abekkala commented Jun 28, 2024

lanitochka17 commented Jun 4, 2024 •

edited by melvin-bot bot

Loading

dragnoir commented Jun 5, 2024 •

edited

Loading

ZhenjaHorbach commented Jun 5, 2024 •

edited

Loading