[$0] Report fields - No checkbox next to list value on web layout

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.30-10
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
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Report fields
3. Click Add field
4. Select List from Type field
5. Click List values
6. Click Add value
7. Add some list values

Expected Result:

There will be checkbox next to each list value (production behavior)

Actual Result:

There is no checkbox next to each list value
The checkbox only appears when long clicking on the list value, which brings up the stretched pop-up

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

Bug6595436_1725635028785.20240906_230023.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021832081817508149579
• Upwork Job ID: 1832081817508149579
• Last Price Increase: 2024-09-06
• Automatic offers:
• ahmedGaber93 | Reviewer | 103848370
• rayane-djouah | Contributor | 103848373

Issue Owner

Current Issue Owner: @ahmedGaber93

[melvin-bot]

Triggered auto assignment to @Beamanator (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/~021832081817508149579

[melvin-bot]

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

[hoangzinh]

Proposal

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

Report fields - No checkbox next to list value on web layout

What is the root cause of that problem?

Offending PR #46788

In the above PR, we changed to use shouldUseNarrowLayout in ReportFieldsListValuesPage component, which always returns true because the component is displayed in RHP.

App/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx

Line 62 in cadd5a8

const {shouldUseNarrowLayout} = useResponsiveLayout();

Therefore, the list value is displayed as in small-screen devices, although it's on a large-screen device

App/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx

Line 70 in cadd5a8

const canSelectMultiple = !hasAccountingConnections && (shouldUseNarrowLayout ? selectionMode?.isEnabled : true);

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

I think we should revert to using isSmallScreen in ReportFieldsListValuesPage, the same as previously. Because, I think we intended to display the list in either small-screen or large-screen devices here, not related to the narrow layout.

Result:

[daledah]

Proposal

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

There is no checkbox next to each list value
The checkbox only appears when long clicking on the list value, which brings up the stretched pop-up

What is the root cause of that problem?

Currently, in here the value of the shouldUseNarrowLayout variable is true even though we are on a large screen because it is being used in the modal.

It causes the value of the canSelectMultiple variable to be false here, leading to a UI issue.

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

We should use isSmallScreenWidth for this case like we did here and here

    // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type
    const {isSmallScreenWidth} = useResponsiveLayout();

What alternative solutions did you explore? (Optional)

Screen.Recording.2024-09-06.at.23.28.15.mov

[rayane-djouah]

Will be fixed in #48723

[melvin-bot]

📣 @ahmedGaber93 🎉 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]

📣 @rayane-djouah 🎉 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 📖

[Beamanator]

@rayane-djouah assigning you since you're the author of #46788 which caused this blocker & you're working on the fix in #48723

[haris-aqeel]

Hi, Is this task already completed? I recently saw a job post regarding this task on upwork but from here, it seems the matter is already resolved.

Here, is the job post link: https://www.upwork.com/jobs/~021832081817508149579

[melvin-bot]

📣 @haris-aqeel! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Beamanator]

Hi @haris-aqeel - yes sorry this job is already assigned out and being worked on in #48723

Most available jobs in our Github repository will have the Help Wanted label assigned right now

[haris-aqeel]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/harisaqeel34

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[rayane-djouah]

The fix was CPed to staging

[Beamanator]

closing since fix was CP'd and was fixed as regression so no payment needed