[HOLD for payment 2024-07-24] [$250] New search - Words are simply cut off in new search page without showing continuation dots

[izarutskaya]

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

---

Version Number: v9.0.3-1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

PreCondition user has workspace with a long name

1. Access www.staging.new.expensify.com
2. Sign into a valid account
3. Go to New search page at the bottom and observe the header (Make sure you have switched to the WS with longer name in WS dropdown)

Expected Result:

User expects that if wording is cut off, then the continuous dots will be shown, for example: "......."

Actual Result:

Word is simply cut off and the user can not read it

The same with Inbox and Search.

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

Bug6526990_1719551201764.No_continuos_dots_shown_in_new_search_page.mp4

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c0c5682e2c9e9d31
• Upwork Job ID: 1808995110537691379
• Last Price Increase: 2024-07-04

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

[izarutskaya]

We think this issue might be related to the #collect project.

[bernhardoj]

Proposal

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

The topbar header text just overflows the container without any ellipsis.

What is the root cause of that problem?

This happens after #43429. Previously, we just have flexShrink0 without flex1 style.

App/src/components/Breadcrumbs.tsx

Lines 69 to 74 in 3622deb

	<Text
	numberOfLines={1}
	style={[styles.mw75, styles.flexShrink0, styles.breadcrumb, styles.flex1]}
	>
	{secondaryBreadcrumb.text}
	</Text>

flexShrink0 will make the topbar title (Inbox/Search) not shrink and instead, the workspace name will shrink. But it causes this issue where the title text is overflown when there is no workspace selected, thus the Expensify logo is shown. So, the solution is to add flex1 style which overrides the flexShrink0 style.

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

To solve this issue and doesn't reintroduce #43426, we can conditionally apply the style based on whether we want to show the Expensify logo or the selected workspace.

const isRootBreadcrumb = primaryBreadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT;

<Text ... style={[..., isRootBreadcrumb ? styles.flex1 : styles.flexShrink0]}>

Result:

we can adjust the max width of the header title if we want

[melvin-bot]

@RachCHopkins Whoops! This issue is 2 days overdue. Let's get this updated quick!

[RachCHopkins]

I can't replicate this, my admins room is playing up, but what I see here seems pretty clear as to what the issue is.

[melvin-bot]

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

[melvin-bot]

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

[RachCHopkins]

Sorry, I'm still learning!

[sandipanghos]

is this issue still open for proposal? - @mollfpr

[mollfpr]

The issue reproduces differently on my end, but the secondary breadcrumbs still have not appeared.

The proposal from @bernhardoj looks good to me and it does fix the issue.

🎀 👀 🎀 C+ reviewed!

[melvin-bot]

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

[mollfpr]

@sandipanghos You can still send a proposal as long no contributors are hired and the Help Wanted label still applies.

[melvin-bot]

@pecanoro, @mollfpr, @RachCHopkins Whoops! This issue is 2 days overdue. Let's get this updated quick!

[pecanoro]

Assigning @bernhardoj to the issue!

[bernhardoj]

PR is ready

cc: @mollfpr

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

• Fix breadcrumb title text is cut off #45134

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

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

• @mollfpr requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests

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

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

[mollfpr]

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

#43429

[@mollfpr] 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/43429/files#r1689333048

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

I don't think we need a new checklist, the regression step should be enough.

[@mollfpr] Determine if we should create a regression test for this bug.
[@mollfpr] 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.

1. Open workspace switcher page
2. Switch to a workspace with a long name
3. Go to the Search page
4. Verify the Search title text isn't cut off
5. Go to Settings > Preferences
6. Change the language to Spanish
7. Go back to Inbox
8. Open workspace switcher page again
9. Change back to Expensify
10. Verify the Inbox title in Spanish (Bandeja de entrada) isn't cut off
11. 👍 or 👎

[bernhardoj]

Requested in ND.

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @mollfpr owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@RachCHopkins)

• 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/1808995110537691379/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[JmillsExpensify]

$250 approved for @bernhardoj

[JmillsExpensify]

$250 approved for @mollfpr

[RachCHopkins]

Contributors have been paid, the contract has been completed, and the Upwork post has been closed.