Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2023-08-07] [$1000] Workspace - Workspace icons are aligned to the left #22632

Closed
6 tasks done
kbecciv opened this issue Jul 11, 2023 · 55 comments
Closed
6 tasks done
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@kbecciv
Copy link

kbecciv commented Jul 11, 2023

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!


Action Performed:

  1. Open settings
  2. See the Workspace menu item ( you need to have +7 WS)

Expected Result:

The workspace icons should be aligned to the right

Actual Result:

Workspace icons are aligned to the left

Workaround:

Unknown

Platforms:

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

  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop

Version Number: 1.3.39-5
Reproducible in staging?: y
Reproducible in production?: y
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
Notes/Photos/Videos: Any additional supporting documentation

image (20)

Screen_Recording_20230711_065833_Chrome.1.mp4

Expensify/Expensify Issue URL:
Issue reported by: @bernhardoj
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689050547642229

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~01979666a980f0a661
  • Upwork Job ID: 1678891266817916928
  • 2023-07-11
  • Automatic offers:
    • | | 0
    • DrLoopFall | Contributor | 25744412
    • | | 0
@kbecciv kbecciv added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jul 11, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jul 11, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Jul 11, 2023

Bug0 Triage Checklist (Main S/O)

  • This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
  • This bug is not a duplicate report (check E/App issues and #expensify-bugs)
    • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
  • This bug is reproducible using the reproduction steps in the OP. S/O
    • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
    • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
  • This issue is filled out as thoroughly and clearly as possible
    • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
  • I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

@situchan
Copy link
Contributor

I already commented on the offending PR with suggested changes.
@puneetlath if you agree, I can raise PR to fix this.

@DrLoopFall
Copy link
Contributor

DrLoopFall commented Jul 11, 2023

Proposal

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

Workspace icons are not aligned properly

What is the root cause of that problem?

We are using left for positioning/shifting avatars, which causes it to use more space than required.

left: -(overlapSize * index),

left: -(oneAvatarSize.width * 2 + oneAvatarBorderWidth * 2),

Also, currently, we are calculating the width, as a workaround, which is also a part of the problem in this issue.

@stitesExpensify I think the width was set as a workaround for the issue described in my proposal (the 2nd issue)

We are using left for positioning/shifting avatars but the PressableWithoutFeedback itself is not shifted, which causes it to be clickable in both the original and shifted positions.

If we use margin-left instead, we can remove the width, which may prevent any future issues.

if (props.icons.length > 4) {
const length = avatarRows.length > 1 ? Math.max(avatarRows[0].length, avatarRows[1].length) : avatarRows[0].length;
width = oneAvatarSize.width + overlapSize * 2 * (length - 1) + oneAvatarBorderWidth * (length * 2);
} else {
// one avatar width + overlaping avatar sizes + border space
width = oneAvatarSize.width + overlapSize * 2 * (props.icons.length - 1) + oneAvatarBorderWidth * (props.icons.length * 2);
}

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

Use margin-left instead of left for positioning the avatar.

// in getHorizontalStackedAvatarStyle
- left: -(overlapSize * index)
+ marginLeft: index > 0 ? -overlapSize : 0

// in getHorizontalStackedOverlayAvatarStyle
- left: -(oneAvatarSize.width * 2 + oneAvatarBorderWidth * 2)
+ marginLeft: -(oneAvatarSize.width + oneAvatarBorderWidth * 2)

We should also need to remove the width, as we don't need it anymore, because this proposal also removes the need for the workaround as it fixes the issue in the root, and removing it may prevent future issues like this.

if (props.icons.length > 4) {
const length = avatarRows.length > 1 ? Math.max(avatarRows[0].length, avatarRows[1].length) : avatarRows[0].length;
width = oneAvatarSize.width + overlapSize * 2 * (length - 1) + oneAvatarBorderWidth * (length * 2);
} else {
// one avatar width + overlaping avatar sizes + border space
width = oneAvatarSize.width + overlapSize * 2 * (props.icons.length - 1) + oneAvatarBorderWidth * (props.icons.length * 2);
}

Screenshots

image
image
image

@slafortune slafortune added the External Added to denote the issue can be worked on by a contributor label Jul 11, 2023
@melvin-bot melvin-bot bot changed the title Workspace - Workspace icons are aligned to the left [$1000] Workspace - Workspace icons are aligned to the left Jul 11, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jul 11, 2023

Job added to Upwork: https://www.upwork.com/jobs/~01979666a980f0a661

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jul 11, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jul 11, 2023

Current assignee @slafortune is eligible for the External assigner, not assigning anyone new.

@melvin-bot
Copy link

melvin-bot bot commented Jul 11, 2023

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

@StevenKKC
Copy link
Contributor

StevenKKC commented Jul 12, 2023

Proposal

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

Avatars group on final screen moves to the left if admin invites more 8 users.

What is the root cause of that problem?

If invited more than 8 users, they will be displayed in two rows, and each row's size is calculated as below.

// Calculate the size of each row
const rowSize = Math.min(Math.ceil(props.icons.length / 2), props.maxAvatarsInRow);
// Slice the icons array into two rows
const firstRow = props.icons.slice(rowSize);
const secondRow = props.icons.slice(0, rowSize);
// Update the state with the two rows as an array
setAvatarRows([firstRow, secondRow]);

The width of the avatar row is calculated as follows.

// Height of one avatar + border space
const height = oneAvatarSize.height + 2 * oneAvatarBorderWidth;
if (props.icons.length > 4) {
const length = avatarRows.length > 1 ? Math.max(avatarRows[0].length, avatarRows[1].length) : avatarRows[0].length;
width = oneAvatarSize.width + overlapSize * 2 * (length - 1) + oneAvatarBorderWidth * (length * 2);
} else {
// one avatar width + overlaping avatar sizes + border space
width = oneAvatarSize.width + overlapSize * 2 * (props.icons.length - 1) + oneAvatarBorderWidth * (props.icons.length * 2);
}
avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height), StyleUtils.getWidthStyle(width)]);

If an avatar row has more than the number of avatars in props.maxAvatarsInRow, then only the number of avatars in props.maxAvatarsInRow will be shown, and the rest will be shown as tooltips.

{_.map([...avatars].splice(0, props.maxAvatarsInRow), (icon, index) => (
<UserDetailsTooltip
key={`stackedAvatars-${index}`}
accountID={icon.id}
icon={icon}
>

{avatars.length > props.maxAvatarsInRow && (
<Tooltip
// We only want to cap tooltips to only the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
text={tooltipTexts.slice(3, 10).join(', ')}
>

When there are more than 8 avatars invited, length will exceed props.maxAvatarsInRow (i.e. 4), because it has more than four avatars in the first row.
As a result, avatar row width will exceed props.maxAvatarsInRow, and thus exceed the desired width.
The avatar row is aligned center, but the width is greater than the desired width, so the avatar group moves to the left.

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

Avatar row's width should be equal to or less than props.maxAvatarsInRow.
We can change code as below.

-   const length = avatarRows.length > 1 ? Math.max(avatarRows[0].length, avatarRows[1].length) : avatarRows[0].length;
+   const length = Math.min(avatarRows.length > 1 ? Math.max(avatarRows[0].length, avatarRows[1].length) : avatarRows[0].length, props.maxAvatarsInRow);

What alternative solutions did you explore? (Optional)

None.

@sobitneupane
Copy link
Contributor

sobitneupane commented Jul 13, 2023

Thanks for the proposal everyone.

@StevenKKC Your proposal looks good to me. But can you please add more explanation in your proposal. You have added two code blocks in the Root Cause Analysis. Can you please explain what are the things being calculated? What is the cause of issue? And how your solution solves the issue.

Please update your proposal and let me know.

@situchan
Copy link
Contributor

situchan commented Jul 13, 2023

@sobitneupane I had already proposed solution directly in offending PR, with improvement - https://github.com/Expensify/App/pull/22595/files#r1259273320.

Re-posting formal proposal here:

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

Workspace icons have wrong container width when count is more than 4

What is the root cause of that problem?

The root cause is that while my original proposed solution to fix #22445 was being implemented in PR, missed the case of maxAvatarsInRow set.

Let me explain with example:
Let's say shouldDisplayAvatarsInRows = false, maxAvatarsInRow = 4, total 6 avatars!

  1. Number of avatars in a row is calculated here:

    if (!props.shouldDisplayAvatarsInRows || props.icons.length <= props.maxAvatarsInRow) {
    setAvatarRows([props.icons]);
    return;

    As it meets first condition, returns early and 6 avatars are set in a row. (2nd condition is ignored)

  2. Regardless, on view side, avatars in a row are limited to maxAvatarsInRow which was 2nd condition above.

    {_.map([...avatars].splice(0, props.maxAvatarsInRow), (icon, index) => (

    So only 4 avatars show

  3. Container width calculation:

    const length = avatarRows.length > 1 ? Math.max(avatarRows[0].length, avatarRows[1].length) : avatarRows[0].length;

    This only depends on rows length set in step1, so width is sum of 6 avatars. And not considered maxAvatarsInRow (ignoring the slice in step 2).

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

update avatar rows max length logic here to not exceed maxAvatarsInRow

@StevenKKC
Copy link
Contributor

@sobitneupane I have updated my proposal. Thanks.

@huzaifa-99
Copy link
Contributor

huzaifa-99 commented Jul 17, 2023

Proposal

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

We want workspace icons to be aligned to right.

What is the root cause of that problem?

We do a different kind of width calculation when there are more than 4 icons, but at a single time we only display 4 icons. The extra width moves the icons to left.

if (props.icons.length > 4) {
const length = avatarRows.length > 1 ? Math.max(avatarRows[0].length, avatarRows[1].length) : avatarRows[0].length;
width = oneAvatarSize.width + overlapSize * 2 * (length - 1) + oneAvatarBorderWidth * (length * 2);
} else {

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

We should update the width calculation here. Since we only display a max of 4 icons, we can remove the length calculation and use 4 directly (which comes from props.maxAvatarsInRow), and simplify this whole block with this condition

const length = Math.min(props.maxAvatarsInRow, props.icons.length)
width = oneAvatarSize.width + overlapSize * 2 * (length - 1) + oneAvatarBorderWidth * (length * 2);
image
image

What alternative solutions did you explore? (Optional)

N/A

@sobitneupane
Copy link
Contributor

Proposal from @situchan looks good to me. @situchan Please make sure to propose the solution in the issue as well moving forward.

🎀 👀 🎀 C+ reviewed

@melvin-bot melvin-bot bot removed the Overdue label Jul 18, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jul 18, 2023

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

@DrLoopFall
Copy link
Contributor

Hi @sobitneupane, please check my proposal also.
This issue is a regression caused by an earlier PR #22595 implemented from @situchan's proposal itself in issue #22445, again here instead of solving the root cause, it's just patching an earlier workaround which is the root of the problem, whereas my proposal actually solves the root cause, please check it once.

@puneetlath and @abdulrahuman5196 please have a look here.

@huzaifa-99
Copy link
Contributor

huzaifa-99 commented Jul 18, 2023

@sobitneupane did you had a chance to review my proposal here? We actually don't have to calculate the length for different cases (i.e avatar > 4 or < 4)

@melvin-bot
Copy link

melvin-bot bot commented Jul 25, 2023

📣 @sobitneupane Please request via NewDot manual requests for the Reviewer role ($1000)

@melvin-bot
Copy link

melvin-bot bot commented Jul 25, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Jul 25, 2023

📣 @bernhardoj We're missing your Upwork ID to automatically send you an offer for the Reporter role.
Once you apply to the Upwork job, your Upwork ID will be stored and you will be automatically hired for future jobs!

@melvin-bot melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Jul 25, 2023
@DrLoopFall
Copy link
Contributor

DrLoopFall commented Jul 25, 2023

@sobitneupane @Li357
Thank you,
The PR #23580 is ready for review now.

@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Jul 31, 2023
@melvin-bot melvin-bot bot changed the title [$1000] Workspace - Workspace icons are aligned to the left [HOLD for payment 2023-08-07] [$1000] Workspace - Workspace icons are aligned to the left Jul 31, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jul 31, 2023

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

@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Jul 31, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jul 31, 2023

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

If no regressions arise, payment will be issued on 2023-08-07. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

  • External issue reporter
  • Contributor that fixed the issue
  • Contributor+ that helped on the issue and/or PR

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

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

  • Merged PR within 3 business days of assignment - 50% bonus
  • Merged PR more than 9 business days after assignment - 50% penalty

@melvin-bot
Copy link

melvin-bot bot commented Jul 31, 2023

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:

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

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Aug 6, 2023
@slafortune
Copy link
Contributor

slafortune commented Aug 8, 2023

Merged PR within 3 business days of assignment - 50% bonus

  • External issue reporter - @bernhardoj/$250 - Offer sent - PD
  • Contributor that fixed the issue - @DrLoopFall$1500 - PD
  • Contributor+ that helped on the issue and/or PR - @sobitneupane does not require payment (Eligable for Manual Requests)/$1500

@slafortune
Copy link
Contributor

@DrLoopFall what is your Upworks profile? I am unable to find you or a name associated with your GH profile. Thanks!

@sobitneupane
Copy link
Contributor

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:

  • [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:

#22595

  • [@sobitneupane] 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:

#22595 (comment)

  • [@sobitneupane] 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:

This should have been caught in PR test.

  • [@sobitneupane] Determine if we should create a regression test for this bug.

Yes.

  • [@sobitneupane] 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.

@sobitneupane
Copy link
Contributor

Regression test Proposal:

  1. Open settings.
  2. Create 5 or more Workspaces if needed.
  3. Verify that avatars are aligned just to the left of arrow(>) in the Workspaces menu item in Settings page.

Do we agree 👍 or 👎

@sobitneupane
Copy link
Contributor

Requested payment on newDot.

#22632 (comment)

@JmillsExpensify
Copy link

Reviewed the details for @sobitneupane. $1,500 approved for payment in NewDot.

@melvin-bot melvin-bot bot added the Overdue label Aug 11, 2023
@slafortune
Copy link
Contributor

@melvin-bot melvin-bot bot removed the Overdue label Aug 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests