[HOLD for payment 2024-03-13] [$500] Search - Display names are bold regardless of unread state

[lanitochka17]

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.38-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): applausetester+0507gm@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Click on the search bar

Expected Result:

• Chats on the search page should display with their name bold when unread, and not bold otherwise, to match the chat list in the LHN
• Searching for a new chat should display the name in bold
• For the flow to start a new chat, or looking at a list of members, etc, use bold for the names

Actual Result:

The display name of the chats is always bold, regardless of the unread state

Workaround:

Ignore it

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

Add any screenshot/video evidence

Staging

Bug6370903_1707338329044.Recording__2129.mp4

Production

Screen.Recording.2024-02-07.at.2.18.15.PM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e593cf467037a99c
• Upwork Job ID: 1757132725429215232
• Last Price Increase: 2024-02-12
• Automatic offers:
• abdulrahuman5196 | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @dylanexpensify

[github-actions]

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

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

[melvin-bot]

Triggered auto assignment to @neil-marcellini (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[shawnborton]

Interesting, I wouldn't think this would be a blocker, it's been like this since we first created NewDot

[neil-marcellini]

The display name is bold in search regardless of the unread status of that chat, so I don't understand why that's part of the test steps.

I think there is a small regression here, but it's very different than what's described in the current issue.

Here's the current behavior on prod

Screen.Recording.2024-02-07.at.2.18.15.PM.mov

I will update the issue from what's currently described to something that's more clear.

Currently:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Click on any unread message
3. Click on other chat so the chat from step 2 is not bold anymore
4. Navigate to Search

Expected Result:

Since the chat is open once the Display name of the sender should not be bold anymore

Actual Result:

Display name remains bold in search when user open the conversation

New bug description:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Click on the search bar

Expected Result:

The display name of the chats should not be bold

Actual Result:

The display name of the chats is bold

Furthermore, this is a very minor regression, so I won't consider it a blocker.

[neil-marcellini]

It would make more sense if the style of the chats on the search page matched the LHN. That's not the case on staging or prod. What do you think @shawnborton?

[bernhardoj]

Proposal

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

The display name on the search page is bold.

What is the root cause of that problem?

This happened after the search page used SelectionList (in #35058). The selection list item has a bold style by default.

App/src/components/SelectionList/BaseListItem.tsx

Line 108 in 9f37d3e

styles.sidebarLinkTextBold,

This can be seen on some page that already uses a selection list, such as the room member page.

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

If we want to bold it only when the chat is unread, we can add a new attribute to the list item called isBold and only apply the bold style if isBold is not false.

item.isBold !== false && styles.sidebarLinkTextBold,

Then, we need to map the report array here to include isBold attribute

App/src/pages/SearchPage/index.js

Line 95 in 9f37d3e

data: recentReports,

data: recentReports.map(report => ({...report, isBold: report.isUnread})),

What alternative solutions did you explore? (Optional)

If we want to disable the bold for all items, we can add a new props to the SelectionList itself to disable the bold style.

Or if we don't want to bold a list item that is a user list item, then we can apply the bold style only if it's not a user list item.
!isUserItem ? styles.sidebarLinkTextBold : null,

[shawnborton]

@trjExpensify or @JmillsExpensify or @Expensify/design do you have any context on this one?

As far as I know, results in the chat search list were always bold. And this is because that's our standard pattern for displaying this kind of information in a list.

Then at some point, we made the workspace switcher use this bold or non-bold pattern depending on if there was unread messages or not.

I think for the chat switcher, it does make sense that the chat matches how it would look in the LHN. So if the chat is unread, keep it bold. If the chat is read, make it not-bold.

But for things like the flow to start a new chat, or looking at a list of members, etc - I think we should keep our current pattern and use bold for the names.

Let me know if all of that makes sense!

[dannymcclain]

☝️ I agree with everything you said.

I also thought they were always bold and was surprised to find out that's not the case!

I'm actually torn on whether or not we should make the chats match the LHN or just have them all bold all the time. Reason being is that it's kinda weird that a new chat with someone you've never chatted with would be bold (denoting it has unread messages). So I wonder if by trying to include that we're actually just doing too much and making it more complicated than it needs to be. And to be clear, I think the workspace switcher is a totally different type of searching/switching and the pattern we have there still makes sense.

[shawnborton]

Reason being is that it's kinda weird that a new chat with someone you've never chatted with would be bold (denoting it has unread messages).

Totally fair, but I think of that as something that actually doesn't exist in your LHN, and thus would just follow the standard list option patterns we have?

[dannymcclain]

Yeah that's a good point. Totally down for what you're proposing!

[neil-marcellini]

I think for the chat switcher, it does make sense that the chat matches how it would look in the LHN. So if the chat is unread, keep it bold. If the chat is read, make it not-bold.

But for things like the flow to start a new chat, or looking at a list of members, etc - I think we should keep our current pattern and use bold for the names.

@shawnborton I totally agree with these statements ^

a new chat with someone you've never chatted with would be bold (denoting it has unread messages).

@dannymcclain I agree that if you search for a user that you have never chatted with, it's odd to show that new entry as bold. I think we should make this not bold so it appears that you don't have any unread messages from them, which is true given that it's a new chat. I see Shawn's point too, but if we're going to make this list of chats match the LHN state, then I think we have to stay consistent there for it to make sense.

[shawnborton]

Hmm but it wouldn't appear in your LHN like that. So I still think for the create case, we should mimic what we do for our generic list/option views where the title is bold. Because in your LHN, it actually looks something more like this (it has the preview line):

[dubielzyk-expensify]

I think because they're different contexts they don't have to follow the same pattern. I kinda lean towards bold for the reasons @shawnborton mentioned.

[melvin-bot]

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

[neil-marcellini]

Ok so it sounds like this is the desired behavior. I'm going to update the issue description and send it to be implemented externally.

• Chats on the search page should display with their name bold when unread, and not bold otherwise, to match the chat list in the LHN
• Searching for a new chat should display the name in bold
• For the flow to start a new chat, or looking at a list of members, etc, use bold for the names

[bernhardoj]

PR is ready

cc: @abdulrahuman5196

[dylanexpensify]

wooot!

[dylanexpensify]

PR merged, pending payout after regression period

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

• Only bold user display name when it's unread in search page #37306

If no regressions arise, payment will be issued on 2024-03-13. 🎊

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

• @abdulrahuman5196 requires payment automatic offer (Reviewer)
• @bernhardoj requires payment automatic offer (Contributor)

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

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

[youssef-lr]

This PR has caused a regression where local personal details show up in bold, due to this condition as they don't have the property isBold, so isBold !== false evaluates to true. @bernhardoj can you take a look please?

[bernhardoj]

@youssef-lr before the PR, all items on the search page are in bold. Then, we agree to bold it only when the chat is unread. Personal details don't have an unread state, so they stay bold.

[youssef-lr]

Ah okay, thanks for clarifying!

[dylanexpensify]

payment today! @abdulrahuman5196 mind completing checklist

[melvin-bot]

@neil-marcellini, @abdulrahuman5196, @bernhardoj, @dylanexpensify Huh... This is 4 days overdue. Who can take care of this?

[dylanexpensify]

bump @abdulrahuman5196 on checklist. Paying out now

[dylanexpensify]

payments done! Will close after Abdul does checklist

[abdulrahuman5196]

The PR that introduced the bug has been identified. Link to the PR:
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:
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:

Not a regression. Seems to be the case for sometime.

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.

1. Open search page
2. Verify the user display name is bold when you have unread chats
3. Search for a new user
4. Verify the user display name is bold

@dylanexpensify

[trjExpensify]

👋 Is this bug report from @iwiznia related to whatever we did to fix this issue?

[bernhardoj]

What we do here is to bold the search page item when there are unread items. In #38704, looks like it works correctly in search page, but not on the LHN (can't reproduce though).