[HOLD for payment 2024-10-30] [$250] The selected approver has no background color, and the search input field appears when there are less than 8 members to select

[m-natarajan]

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.39-0
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
Expensify/Expensify Issue URL:
Issue reported by: @dannymcclain
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1726843553984039

Action Performed:

Prerequisite: Control workspace with 3 members added

1. Go to staging.new.expensify.com
2. On a control workspace enable Workflows in more features
3. Click Workflows > Add approval workflow
4. select any member

Expected Result:

The selected approver shows the checkmark, background color and search field only if there are more than 8 members showing.

Actual Result:

The selected approver shows the checkmark correctly but has no background color and search field displayed for less than 8 members

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

CleanShot.2024-09-20.at.08.52.18.mp4

Recording.566.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021839025702753796102
• Upwork Job ID: 1839025702753796102
• Last Price Increase: 2024-10-09
• Automatic offers:
• akinwale | Reviewer | 104344108
• truph01 | Contributor | 104344117

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

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

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-09-22 14:37:11 UTC.

Proposal

Please restate the problem that we are trying to solve in this issue.

• The search input of the approver selector doesn't hide if the policy has fewer than 8 members.

• The selected approver has no background color.

What is the root cause of that problem?

• The first issue occurs because we don’t pass the shouldShowTextInput property to the approval selector component here:
  Approval Selector Component

• The second issue is related to the initiallyFocusedOptionKey in the selection props.

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

We should add shouldShowTextInput and initiallyFocusedOptionKey to the selector props as follows:

const shouldShowTextInput = sections[0].data.length >= CONST.SHOULD_SHOW_MEMBERS_SEARCH_INPUT_BREAKPOINT;

shouldShowTextInput={shouldShowTextInput}
initiallyFocusedOptionKey={selectedApproverEmail}
shouldUpdateFocusedIndex

Additionally, we need to modify the initial value of the selectedApproverEmail state correctly:

const approverIndex = Number(route.params.approverIndex) ?? 0;
const [selectedApproverEmail, setSelectedApproverEmail] = useState<string | undefined>(approvalWorkflow?.approvers[approverIndex]?.email);

The same edits should be made to the category approval selector to maintain consistency.

POC

Screen.Recording.2024-09-22.at.5.00.19.PM.mov

What alternative solutions did you explore? (Optional)

We can make the focus dependent on whether shouldShowTextInput is false by using the following:

shouldShowTextInput={shouldShowTextInput}
shouldUpdateFocusedIndex={!shouldShowTextInput}
initiallyFocusedOptionKey={!shouldShowTextInput ? selectedApprover : undefined}

This will ensure that the selected option is focused when the search input is not displayed.

[truph01]

Proposal

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

• The selected approver shows the checkmark correctly but has no background color and search field displayed for less than 8 members

What is the root cause of that problem?

1. The selected approver shows the checkmark correctly but has no background color.

• Page WorkspaceWorkflowsApprovalsApproverPage uses InviteMemberListItem to display its option. That component does not have pressableStyle={[[item.isSelected && styles.activeComponentBG]]} style:
  

  App/src/components/SelectionList/InviteMemberListItem.tsx

  Line 51 in bbc0919

  <BaseListItem

  
  as we did in TableListItem:

App/src/components/SelectionList/TableListItem.tsx

Line 47 in bbc0919

pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, item.cursorStyle]]}

We can observe the TableListItem behavior in WorkspaceMembersPage, where all the selected options are highlighted.

2. Search field displayed for less than 8 members

• We don't have shouldShowTextInput prop in:

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx

Line 239 in bbc0919

<SelectionList

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

1. The selected approver shows the checkmark correctly but has no background color.

• In this:

App/src/components/SelectionList/InviteMemberListItem.tsx

Line 51 in bbc0919

<BaseListItem

we should add:

            pressableStyle={[[shouldHighlightSelectedItem && item.isSelected && styles.activeComponentBG]]}

The shouldHighlightSelectedItem is new prop to make sure the change does not break other pages. So in case of WorkspaceWorkflowsApprovalsApproverPage, use shouldHighlightSelectedItem as true.

2. Search field displayed for less than 8 members

2.1 Option 1:

• Create new state to store all the available approver:

const [allApprovers, setAllApprovers] = useState()
const shouldShowTextInput = allApprovers?.length >= 8

• In:

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx

Line 116 in bbc0919

approvers.push(...availableApprovers);

call setAllApprover(approvers).

• Then pass shouldShowTextInput={shouldShowTextInput} to:
  

  App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx

  Line 239 in bbc0919

  <SelectionList

What alternative solutions did you explore? (Optional)

2.2 Option 2:

• Note: With this solution, assume we have > 20 available approvers. Now the search input is displayed. Then we search any keyword so that the results 's length is less than 8. The search input is hidden.

• In this:

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx

Line 239 in bbc0919

<SelectionList

add:

    const shouldShowTextInput = flatMap(sections, (section) => section.data)?.length >= 8;

will fix the issue.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[abekkala]

@akinwale we already have a couple proposals for review! 🎉

[melvin-bot]

@akinwale, @abekkala Huh... This is 4 days overdue. Who can take care of this?

[abekkala]

@akinwale have you been able to review the proposals above

[akinwale]

We can move forward with @abzokhattab's proposal here.

🎀👀🎀 C+ reviewed.

[melvin-bot]

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

[truph01]

@akinwale The selected proposal have a few issues:

The search input of the approver selector doesn't hide if the policy has fewer than 8 members.

• With this requirement, the search input is displayed when the field is empty and then hidden when it's not, resulting in a poor user experience.

Screen.Recording.2024-10-02.at.07.52.58.mov

The selected approver has no background color.

• With this requirement, the solution only highlights the selected approver when the page is initially loaded. However, I believe the expectation is for the selected approver to remain highlighted consistently, not just upon initial load. Other screen such as workspace member page, report participant page, workspace category page, workspace tag page, ... the selected members are always highlighted. cc @dannymcclain since you reported the bug.

[dannymcclain]

Right, basically any time a list item like this is in the selected state it should have a background color. Think of the checkmark and background color as being inseparable.

[truph01]

@akinwale I believe you should reassess the proposals in light of the above comment.

[abzokhattab]

I think this is more of an implementation detail, the other flow matches the issue requirement and solves the issue.

in infact we can have a useEffect with empty dependencies that would set the list only once and use a state as the storage method to solve this issue.

lets see what others think.

[melvin-bot]

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

[truph01]

@akinwale What do you think about my thoughts?

[abekkala]

@akinwale are you able to address @truph01 comments?

[akinwale]

@truph01 Could you post a video demo of your proposed solution?

[truph01]

@akinwale Here is my video demo:

Screen.Recording.2024-10-09.at.16.51.02.mov

[melvin-bot]

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

[akinwale]

After a second review, we can move forward with @truph01's proposal here.

cc: @carlosmiceli

[melvin-bot]

📣 @akinwale 🎉 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

[melvin-bot]

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

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[abzokhattab]

I am sorry but i dont get the difference between my POC and this demo, can you please help me understand the difference? @akinwale @truph01

[truph01]

PR is ready

[abekkala]

I'm going ooo until Oct 18. Given that the PR has not deployed to production yet starting the 7 day waiting period I'm going to keep this assign to only me and I can process payment when I return

Payment Summary [date, TBD]:

• Fix: @truph01 [$250, if no regressions] OFFER
• PR Review: @akinwale [$250, if no regressions] OFFER

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

• fix: The selected approver has no background color #50541

If no regressions arise, payment will be issued on 2024-10-30. 🎊

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

• @akinwale requires payment automatic offer (Reviewer)
• @truph01 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:

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

[abekkala]

PAYMENT SUMMARY FOR OCT 30

• Fix: @truph01 [$250, if no regressions] OFFER
• PR Review: @akinwale [$250, if no regressions] OFFER
  please complete checklist above