search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.45k stars 2.8k forks source link

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

Closed izarutskaya closed 2 months ago

izarutskaya commented 3 months ago

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: v9.0.3-1 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): emilio.utest@gmail.com 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?

Screenshots/Videos

Bug6526990_1719551092457!Wording_is_cut_off_in_new_search_page_

View all open jobs on GitHub

https://github.com/Expensify/App/assets/115492554/c126d473-127d-4ab5-801a-069c2f9bf27a

Screenshot 2024-06-28 at 13 25 48

Screenshot 2024-06-28 at 13 27 59

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 OwnerCurrent Issue Owner: @RachCHopkins
melvin-bot[bot] commented 3 months ago

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 commented 3 months ago

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

bernhardoj commented 3 months ago

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 https://github.com/Expensify/App/pull/43429. Previously, we just have flexShrink0 without flex1 style. https://github.com/Expensify/App/blob/3622deb409a4cf91a47cc9196e2414ffe75f0f16/src/components/Breadcrumbs.tsx#L69-L74

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 https://github.com/Expensify/App/issues/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:

image image

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

melvin-bot[bot] commented 3 months ago

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

RachCHopkins commented 3 months ago

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[bot] commented 3 months ago

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

melvin-bot[bot] commented 3 months ago

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

RachCHopkins commented 3 months ago

Sorry, I'm still learning!

sandipanghos commented 3 months ago

is this issue still open for proposal? - @mollfpr

mollfpr commented 3 months ago

Screenshot 2024-07-06 at 22 53 39

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[bot] commented 3 months ago

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

mollfpr commented 3 months ago

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

melvin-bot[bot] commented 3 months ago

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

pecanoro commented 3 months ago

Assigning @bernhardoj to the issue!

bernhardoj commented 3 months ago

PR is ready

cc: @mollfpr

melvin-bot[bot] commented 2 months ago

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

melvin-bot[bot] commented 2 months ago

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

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

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

melvin-bot[bot] commented 2 months ago

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 commented 2 months ago

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

https://github.com/Expensify/App/pull/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 commented 2 months ago

Requested in ND.

melvin-bot[bot] commented 2 months ago

Payment Summary

Upwork Job

BugZero Checklist (@RachCHopkins)

JmillsExpensify commented 2 months ago

$250 approved for @bernhardoj

JmillsExpensify commented 2 months ago

$250 approved for @mollfpr

RachCHopkins commented 1 month ago

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