[HOLD for payment 2024-07-26] [Workspace Feeds] No message "No results found" under search field in "Who needs a card?" step

[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: 9.0.6-1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Workspace has at least 9 members
• User is workspace admin

1. Go to staging.new.expensify.com
2. Go to workspace settings > Expensify Card (enable in More features)
3. Click Issue new card
4. In Step 1 - Who needs a card?, enter invalid term that will not return any result

Expected Result:

There will be message "No results found" under search field

Actual Result:

There is no message "No results found" under search field

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

Add any screenshot/video evidence

Bug6538923_1720701329565.20240711_203129.mp4

View all open jobs on GitHub

[melvin-bot]

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

[lanitochka17]

@puneetlath FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[nkdengineer]

Proposal

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

There is no message "No results found" under search field

What is the root cause of that problem?

We don't pass the headerMessage prop accordingly here and then no message when no result found

App/src/pages/workspace/card/issueNew/AssigneeStep.tsx

Line 140 in 105dce5

<SelectionList

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

We can use OptionsListUtils.getHeaderMessage as we do in other pages to get the header message

const [sections, headerMessage] = useMemo(() => {
    if (!debouncedSearchTerm) {
        return [[
            {
                data: membersDetails,
                shouldShow: true,
            },
        ], ''];
    }

    const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm).toLowerCase();
    const filteredOptions = membersDetails.filter((option) => !!option.text?.toLowerCase().includes(searchValue) || !!option.alternateText?.toLowerCase().includes(searchValue));


    return [[
        {

            title: undefined,
            data: filteredOptions,
            shouldShow: true,
        },
    ], OptionsListUtils.getHeaderMessage(filteredOptions.length > 0, false, searchValue)];
}, [membersDetails, debouncedSearchTerm]);

and then pass it as headerMessage into SelectionList

headerMessage={headerMessage}

App/src/pages/workspace/card/issueNew/AssigneeStep.tsx

Line 140 in 105dce5

<SelectionList

What alternative solutions did you explore? (Optional)

Or we don't want to show other message like email is invalid or phonenumber invalid message, we can simply only show not found message when filteredOptions is empty array, otherwise show nothing.

const [sections, headerMessage] = useMemo(() => {
    if (!debouncedSearchTerm) {
        return [[
            {
                data: membersDetails,
                shouldShow: true,
            },
        ], ''];
    }

    const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm).toLowerCase();
    const filteredOptions = membersDetails.filter((option) => !!option.text?.toLowerCase().includes(searchValue) || !!option.alternateText?.toLowerCase().includes(searchValue));


    return [[
        {

            title: undefined,
            data: filteredOptions,
            shouldShow: true,
        },
    ], filteredOptions.length === 0 ? translate('common.noResultsFound') : ''];
}, [membersDetails, debouncedSearchTerm, translate]);

Result

Screen.Recording.2024-07-11.at.20.12.45.mov

[Julesssss]

Not a blocker.