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 2024-12-12] [$2000] Android - Title is not rendered fully in the available space. #21219

Open
1 of 6 tasks
kbecciv opened this issue Jun 21, 2023 · 217 comments
Open
1 of 6 tasks
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 Engineering External Added to denote the issue can be worked on by a contributor

Comments

@kbecciv
Copy link

kbecciv commented Jun 21, 2023

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


Action Performed:

  1. Open the app on Android.
  2. See the chats in the LHN.
  3. Notice a few reports will longer title.

Expected Result:

Title is clipped when reached the right edge of the screen.

Actual Result:

Title is clipped with ellipsis in the middle of screen and there is more available room.

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.27-2

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

Screenshot 2023-06-14 at 6 54 44 PM (1)

Screenshot_20230620_203809_New Expensify

Expensify/Expensify Issue URL:

Issue reported by: @parasharrajat

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686749244980549

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~01ef0ae782c96792ac
  • Upwork Job ID: 1671576465794899968
  • Last Price Increase: 2023-11-06
  • Automatic offers:
    • aimane-chnaif | Reviewer | 27596163
    • fabriziobertoglio1987 | Contributor | 27981486
Issue OwnerCurrent Issue Owner: @adelekennedy
@kbecciv kbecciv added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jun 21, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jun 21, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Jun 21, 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

@ahmedGaber93
Copy link
Contributor

ahmedGaber93 commented Jun 21, 2023

Proposal

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

Android - Title is not rendered fully in the available space.

What is the root cause of that problem?

The root cause is android use different way to break words, see here and textbreakstrategy explanation here
I don't think any textbreakstrategy value will make the text stretch to end of the line, because there is no flex 1 style for text which make Text break instead of stretch in the parent view.

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

remove style optionDisplayNameCompact and add styles.flex1

const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.pre, styles.flex1, ...textUnreadStyle], props.style);
old proposal

we need change flexGrow: 0, here to be flexGrow: 1, or remove it and use flex: 1

App/src/styles/styles.js

Lines 1401 to 1406 in 797298e

optionDisplayNameCompact: {
minWidth: 'auto',
flexBasis: 'auto',
flexGrow: 0,
flexShrink: 1,
},

before and after.

Screenshot 2023-07-12 at 5 07 24 PM

What alternative solutions did you explore? (Optional)

@adelekennedy
Copy link

adelekennedy commented Jun 21, 2023

yeah - longer chat names are being cut off in the center of the screen with ellipses rather than reaching the border of the screen like we see in IOS

@adelekennedy adelekennedy added the External Added to denote the issue can be worked on by a contributor label Jun 21, 2023
@melvin-bot melvin-bot bot changed the title Android - Title is not rendered fully in the available space. [$1000] Android - Title is not rendered fully in the available space. Jun 21, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jun 21, 2023

Job added to Upwork: https://www.upwork.com/jobs/~01ef0ae782c96792ac

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

melvin-bot bot commented Jun 21, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Jun 21, 2023

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

@Pujan92
Copy link
Contributor

Pujan92 commented Jun 21, 2023

Proposal

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

Android - Title is not rendered fully in the available space.

What is the root cause of that problem?

Default Text render startegy for android is highQuality which is causing the issue where it breaks unwantedly the string but we are only showing a single line.

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

We need to provide the prop textBreakStrategy here with textBreakStrategy="simple" which solves the issue.
Same we are providing for ResendValidationForm here.

<Text
accessibilityLabel={props.accessibilityLabel}
style={props.textStyles}
numberOfLines={props.numberOfLines}
>

@manjesh-yadav
Copy link
Contributor

manjesh-yadav commented Jun 22, 2023

Proposal

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

Android - Title is not rendered fully in the available space.

What is the root cause of that problem?

It is Android style word breaking IOS work differently that is why we found two diffrent design in the screenshot.

textBreakStrategy="simple" is not the right solution for the following reasons.

  1. textBreakStrategy="simple" use for, not break words when break line
  2. textBreakStrategy="simple" lose the layout quality in Android Read here
  3. it's not working on all devices Read here
  4. In other devices textBreakStrategy="simple" is just removing - at the end and works the same as before

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

I suggest use text.replace(/\s/g, '\xa0') for replacing whitespace by non-breaking unicode space in the variable and it will work fine and it does not lose any layout quality.

We are using different files for web and native so it will not affect our web

function DisplayNames(props) {
return (
<Text
accessibilityLabel={props.accessibilityLabel}
style={props.textStyles}
numberOfLines={props.numberOfLines}
>
{props.fullTitle}
</Text>
);

function DisplayNames(props) {
    return (
        <Text
            accessibilityLabel={props.accessibilityLabel}
            style={props.textStyles}
            numberOfLines={props.numberOfLines}
        >
-           {props.fullTitle}
+            {props.fullTitle.replace(/\s/g, '\xa0')}
        </Text>
    );
}
Result

Screenshot_1687443917

IMG_D674EEB790B1-1

What alternative solutions did you explore? (Optional)

@melvin-bot melvin-bot bot added the Overdue label Jun 23, 2023
@adelekennedy
Copy link

@aimane-chnaif thoughts on the proposal above?

@melvin-bot melvin-bot bot removed the Overdue label Jun 26, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jun 28, 2023

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

@melvin-bot melvin-bot bot added the Overdue label Jun 28, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jun 29, 2023

@adelekennedy, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

@adelekennedy
Copy link

I don't think we need to adjust the bounty just yet - we have proposals above to review

@melvin-bot melvin-bot bot added Overdue and removed Overdue labels Jun 29, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jul 3, 2023

@adelekennedy, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

@adelekennedy
Copy link

pending proposal review @aimane-chnaif

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

melvin-bot bot commented Jul 5, 2023

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

@melvin-bot
Copy link

melvin-bot bot commented Jul 5, 2023

@adelekennedy @aimane-chnaif this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Dec 5, 2024
@melvin-bot melvin-bot bot changed the title [$2000] Android - Title is not rendered fully in the available space. [HOLD for payment 2024-12-12] [$2000] Android - Title is not rendered fully in the available space. Dec 5, 2024
@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Dec 5, 2024
Copy link

melvin-bot bot commented Dec 5, 2024

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

Copy link

melvin-bot bot commented Dec 5, 2024

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.71-2 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 2024-12-12. 🎊

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

  • @ospfranco requires payment (Needs manual offer from BZ)
  • @s77rt requires payment through NewDot Manual Requests
  • @fabOnReact requires payment (Needs manual offer from BZ)
  • @abdulrahuman5196 requires payment through NewDot Manual Requests
  • @parasharrajat requires payment through NewDot Manual Requests

Copy link

melvin-bot bot commented Dec 5, 2024

@s77rt / @abdulrahuman5196 @adelekennedy @s77rt / @abdulrahuman5196 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

@s77rt
Copy link
Contributor

s77rt commented Dec 8, 2024

BugZero Checklist:

  • [Contributor] Classify the bug:
Bug classification

Source of bug:

  • 1a. Result of the original design (eg. a case wasn't considered)
  • 1b. Mistake during implementation
  • 1c. Backend bug
  • 1z. Other: Upstream bug

Where bug was reported:

  • 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
  • 2b. Reported on staging (eg. found during regression or PR testing)
  • 2d. Reported on a PR
  • 2z. Other:

Who reported the bug:

  • 3a. Expensify user
  • 3b. Expensify employee
  • 3c. Contributor
  • 3d. QA
  • 3z. Other:
  • [Contributor] 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: n/a (upstream bug)

  • [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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

  • [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

    Bug requires regression test: No (upstream bug)

Regression Test Proposal Template
  • [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

    Link to issue:

Regression Test Proposal

Precondition:

Test:

Do we agree 👍 or 👎

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Dec 12, 2024
Copy link

melvin-bot bot commented Dec 12, 2024

Payment Summary

Upwork Job

BugZero Checklist (@adelekennedy)

  • I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
  • I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1671576465794899968/hired)
  • I have paid out the Upwork contracts or cancelled the ones that are incorrect
  • I have verified the payment summary above is correct

@adelekennedy
Copy link

Oof this issue is a long one - I need to tease out exactly what payment is due for everyone here, @rlinoz I will start a chat with you so we can discuss!

@adelekennedy
Copy link

adelekennedy commented Dec 13, 2024

Sorry for the delay here - here's what we think makes most sense:

@aimane-chnaif C+ $250 for reviewing the initial proposals (many many of them) - Upwork
@abdulrahuman5196 C+ $250 for the PR review - NewDot

@fabOnReact C ultimately it wasn't your PR but thank you so much for sticking with this, we think 25% of the total bounty is fair $500 - Upwork
@s77rt C 75% of the bounty at $1,500 - NewDot
@parasharrajat $250 reporting bonus (holdover) - NewDot

@adelekennedy
Copy link

Going to give this about 24 hours before I move forward with Upwork payments

@parasharrajat
Copy link
Member

@adelekennedy I am also eligible for a reporting bonus $250. Give that the reporting bonus was that at that time.

@melvin-bot melvin-bot bot added the Overdue label Dec 16, 2024
@adelekennedy
Copy link

ah thank you @parasharrajat - adding to the payment summary above

@melvin-bot melvin-bot bot removed the Overdue label Dec 16, 2024
@JmillsExpensify
Copy link

$250 approved for @abdulrahuman5196

@JmillsExpensify
Copy link

$1,500 approved for @s77rt

@melvin-bot melvin-bot bot added the Overdue label Dec 19, 2024
Copy link

melvin-bot bot commented Dec 20, 2024

@ospfranco, @rlinoz, @s77rt, @fabOnReact, @abdulrahuman5196, @adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

@s77rt
Copy link
Contributor

s77rt commented Dec 20, 2024

Not overdue. Waiting for Upwork payments to be handled cc @adelekennedy

@adelekennedy
Copy link

Upwork offers sent!

@melvin-bot melvin-bot bot added Overdue and removed Overdue labels Dec 20, 2024
Copy link

melvin-bot bot commented Dec 24, 2024

@ospfranco, @rlinoz, @s77rt, @fabOnReact, @abdulrahuman5196, @adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

@adelekennedy
Copy link

@aimane-chnaif once you accept on Upwork I will pay you out!

@melvin-bot melvin-bot bot removed the Overdue label Dec 24, 2024
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 Engineering External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests