[HOLD for Payment 2024-10-08][$250] [Search v2.2] - Report name is bold when report is unread or select, and unbold when not unselected

[IuliiaHerets]

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: 9.0.33-2
Reproducible in staging?: Y
Reproducible in production?: N/A - new feature, doesn't exist in prod
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Search > Chats.
3. Click Filters.
4. Click In.
5. Select some reports.

Expected Result:

There should be consistency whether the report name should be bold.

Actual Result:

The report name is bold when the report is unread or selected, and unbold when not selected.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6601202_1726156396378.bandicam_2024-09-12_23-50-21-440.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834272973003292308
• Upwork Job ID: 1834272973003292308
• Last Price Increase: 2024-09-12
• Automatic offers:
• ikevin127 | Reviewer | 104115265

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @carlosmiceli (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

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

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

[melvin-bot]

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

[Nodebrute]

@carlosmiceli Could you please confirm the expected behavior here?

[luacmartins]

I can take this one since it's part of Search. cc @Kicu @289Adam289

[dominictb]

Edited by proposal-police: This proposal was edited at 2024-09-12 18:01:30 UTC.

Proposal

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

The report name is bold when the report is unread or selected, and unbold when not selected.

What is the root cause of that problem?

• In the function to get the selected option, isBold value is always undefined:
  

  App/src/components/Search/SearchFiltersChatsSelector.tsx

  Lines 32 to 34 in 7748eff

  	function getSelectedOptionData(option: Option): OptionData {
  	return {...option, isSelected: true, reportID: option.reportID ?? '-1'};
  	}

so the option title is always bold because of:

App/src/components/SelectionList/InviteMemberListItem.tsx

Line 101 in 7748eff

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

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

• We should update:
  

  App/src/components/Search/SearchFiltersChatsSelector.tsx

  Line 33 in 7748eff

  return {...option, isSelected: true, reportID: option.reportID ?? '-1'};

    return {...option, isSelected: true, reportID: option.reportID ?? '-1', isBold: OptionsListUtils.shouldUseBoldText(option)};

What alternative solutions did you explore? (Optional)

Solution 1:

• We also can update it:

        result.isBold = shouldUseBoldText(result);

Solution 2:

• In case we don't want to display bold style in this filter page, just need to introduce a new prop shouldUseBoldStyle in InviteMemberListItem component with the default value is true and update:
  

  App/src/components/SelectionList/InviteMemberListItem.tsx

  Line 101 in 7748eff

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

  
  to:

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

• Then, pass shouldUseBoldStyle={false} in:
  

  App/src/components/Search/SearchFiltersChatsSelector.tsx

  Line 166 in 7748eff

  <SelectionList

[dominictb]

Proposal updated

[ikevin127]

@luacmartins Are we accepting proposals for this one or will somebody from agencies work on it ?

[ikevin127]

Given there was no response to my #49100 (comment) from above, I'm getting the sense that prople are leaning towards all bold instead of depending on read / unread status -> then my review from #49100 (comment) is not valid anymore and we should assign @bernhardoj based on their proposal and explanation from #49100 (comment).

cc @luacmartins

[luacmartins]

I'm getting the sense that prople are leaning towards all bold instead of depending on read / unread status

Yes, I think this is where we landed.

[melvin-bot]

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[trjExpensify]

Hm, you sure? From Shawn:

I think if we're displaying these rows the same way that we display the finder page, where we have the report title above and a preview of the latest message below, then it should follow the same behavior as the chat finder where unreads are bold and reads are not.

If this follows the same behavior as the participant selector page, then they all should be bold.

What's the "In" filter using? The chat-finder list or the participant selector list?

Looks like the former to me, and thus would be bold/unbold if that's the case:

[dominictb]

Looks like the former to me, and thus would be bold/unbold if that's the case:

@luacmartins Could you check the above comment? Looks like he wants to bold/unblod in this case.

[luacmartins]

What's the "In" filter using? The chat-finder list or the participant selector list?

It's closer to the chat finder, but not quite since the data rendered is still different. If that's the case, isn't the current behavior what we want then and we can close this issue, i.e. unread chats are bold and read chats are regular?

[dominictb]

If that's the case, isn't the current behavior what we want then and we can close this issue, i.e. unread chats are bold and read chats are regular

As mentioned in this bug: "The report name is bold when the report is unread or selected, and unbold when not selected.", the current behavior has an issue where the report name appears bold when the report is selected. We need to fix this.

[trjExpensify]

It's closer to the chat finder, but not quite since the data rendered is still different.

Different in what way? (Mainly for my understanding).

If that's the case, isn't the current behavior what we want then and we can close this issue, i.e. unread chats are bold and read chats are regular?

Yes, unless we think aligning with the participant selector is better for the In filter list? Personally, I think it is probably better for what you want to look up here. In which case, we should be rendering the In list more like we do the participant selector format which does not use the lastMessage previews or the bold/unbold unread indicator.

[luacmartins]

Different in what way? (Mainly for my understanding).

The main differences are that the In filter:

• Allows multi-select
• Renders InviteMemberListItem row component instead of UserListItem row, which allows the multi-select above. This component is used in other lists with multi-select e.g. Workspace member invite, Room invite page, New chat confirm page, etc
• We only show reports vs reports + users (since you can create chats from the ChatFinder page)

[luacmartins]

Yes, unless we think aligning with the participant selector is better for the In filter list? Personally, I think it is probably better for what you want to look up here. In which case, we should be rendering the In list more like we do the participant selector format which does not use the lastMessage previews or the bold/unbold unread indicator.

Right, that's my preference too since I don't think we need to add the read/unread context to the user when selecting these.

[bernhardoj]

Right, that's my preference too since I don't think we need to add the read/unread context to the user when selecting these.

So, is the final decision is to bold all?

[trjExpensify]

Right, that's my preference too since I don't think we need to add the read/unread context to the user when selecting these.

Cool, so then we need to stop showing the lastMessage as the preview line and bold all to bring it in-line.

[dylanexpensify]

So, is the final decision is to bold all?

@bernhardoj correct!

[dannymcclain]

Totally agree with where you all landed! Bold 'em 🚀

[bernhardoj]

so then we need to stop showing the lastMessage as the preview line

Hmm, what should we show then? On pages like money request participants, there is only DM and policy expense chat report, but in the "In" filter page, there are all kinds of reports, thread, money request/report, etc.

For a bit of context, we have this logic to decide what to show for each type of report. We can prevent showing the last message of the report by setting showChatPreviewLine as false.

App/src/libs/OptionsListUtils.ts

Lines 536 to 554 in da37289

	if (!!option.isThread || !!option.isMoneyRequestReport) {
	return option.lastMessageText ? option.lastMessageText : Localize.translate(preferredLocale, 'report.noActivityYet');
	}
	if (option.isChatRoom && !isAdminRoom && !isAnnounceRoom) {
	return showChatPreviewLine && option.lastMessageText ? option.lastMessageText : option.subtitle;
	}
	if ((option.isPolicyExpenseChat ?? false) || isAdminRoom || isAnnounceRoom) {
	return showChatPreviewLine && !forcePolicyNamePreview && option.lastMessageText ? option.lastMessageText : option.subtitle;
	}
	if (option.isTaskReport) {
	return showChatPreviewLine && option.lastMessageText ? option.lastMessageText : Localize.translate(preferredLocale, 'report.noActivityYet');
	}
	return showChatPreviewLine && option.lastMessageText
	? option.lastMessageText
	: LocalePhoneNumber.formatPhoneNumber(option.participantsList && option.participantsList.length > 0 ? option.participantsList[0].login ?? '' : '');

If we set showChatPreviewLine as false:

1. If it's a chat room or policy expense chat, it will show the report subtitle, which is the workspace name
2. If it's a task report, it will show "No activity yet" even if there is a message in the report
3. If it's a thread or IOU/expense report, it will still show the last message
4. Other types will show the first participants login

I believe 2 and 3 is not expected, in that case, what should we show?

[melvin-bot]

@OfstadC @luacmartins @bernhardoj @ikevin127 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!

[trjExpensify]

Right, we need to consider an appropriate sub-line for each report type returned in the results of the `In: filter, but I think that's fine, and suggest something that communicates the data type a bit. So for the missing ones, that would be the below I think:

taskName
Task

expense report/IOU report/transaction thread report name
Expense

threadName (for "normal" message threads)
Thread

groupName
Group

CC: @JmillsExpensify

[bernhardoj]

Thanks! PR is ready

cc: @ikevin127

[ikevin127]

♻️ Status update: The PR was deployed to staging (#49835 (comment)).

[ikevin127]

⚠️ Automation failed here -> this should be on [HOLD for Payment 2024-10-08] according to yesterday’s production deploy from #49835 (comment).

cc @OfstadC