Expensify
[$125] Categorize - Checkbox does not appear next to the categories in Categories RHP
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.58-1 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A 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:
- Go to staging.new.expensify.com
- Go to workspace settings > Categories
- Disable all the categories
- Go to self DM
- Track a manual expense
- Click Categorize it from the actionable whisper
- Select the workspace with all the categories disabled
Expected Result:
Checkbox will appear next to the categories in Categories RHP so that user can bulk select all the categories
Actual Result:
Checkbox does not appear next to the categories in Categories RHP
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
- [ ] Android: Standalone
- [ ] Android: HybridApp
- [ ] Android: mWeb Chrome
- [ ] iOS: Standalone
- [ ] iOS: HybridApp
- [ ] iOS: mWeb Safari
- [x] MacOS: Chrome / Safari
- [x] MacOS: Desktop
Screenshots/Videos
Add any screenshot/video evidence
https://github.com/user-attachments/assets/5c22d5dc-2802-4ac3-b6b2-4da7c468de75
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~021854581870980912212
- Upwork Job ID: 1854581870980912212
- Last Price Increase: 2024-11-18
- Automatic offers:
- neonbhai | Contributor | 105008672
Issue Owner
Current Issue Owner: @mananjadhav
Triggered auto assignment to @isabelastisser (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[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
Edited by proposal-police: This proposal was edited at 2024-11-06 18:38:37 UTC.
Proposal
Please re-state the problem that we are trying to solve in this issue.
Checkbox does not appear next to the categories in Categories RHP
What is the root cause of that problem?
We are not allowing multiple selection as it is a small screen and selectionMode is not enabled here
https://github.com/Expensify/App/blob/b3a2bccde35a8d8c68f078407a2b831eb268819b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L87
What changes do you think we should make in order to solve the problem?
We should set canSelectMultiple= true for all case here
https://github.com/Expensify/App/blob/b3a2bccde35a8d8c68f078407a2b831eb268819b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L87
And we can apply this logic for all pages in workspace
What alternative solutions did you explore? (Optional)
Proposal
Please re-state the problem that we are trying to solve in this issue.
Checkbox does not appear next to the categories in Categories RHP
What is the root cause of that problem?
We don't allow selection mode to turn on when categories page is in the RHP as the check here is only for isSmallScreenWidth.
Hence selection is not possible.
What changes do you think we should make in order to solve the problem?
We will use isInNarrowPaneModal from useResponsiveLayout to check if we are rendering in the RHP.
https://github.com/Expensify/App/blob/580bf69714fcb90fbf96026b3e2fc12f4b556eeb/src/components/SelectionListWithModal/index.tsx#L32
Then add a prop allowSelectionModeInRHP to SelectionListWithModal here, to allow selectionMode in RHP.
https://github.com/Expensify/App/blob/580bf69714fcb90fbf96026b3e2fc12f4b556eeb/src/components/SelectionListWithModal/index.tsx#L82
We will do other adjustments to logic as needed.
Alternatively
We can replace the isSmallScreenWidth with shouldUseNarrowLayout here if we want to allow selection Mode for all editable lists like these RHP. We will then not need to control this behavior with a prop.
Job added to Upwork: https://www.upwork.com/jobs/~021854581870980912212
Triggered auto assignment to Contributor-plus team member for initial proposal review - @mananjadhav (External)
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Proposal
Please re-state the problem that we are trying to solve in this issue.
Categorize - Checkbox does not appear next to the categories in Categories RHP
What is the root cause of that problem?
In this scenario, the shouldUseNarrowLayout condition is used to control the display of the checkbox. However, this can lead to issues in layout consistency, as the checkbox visibility is entirely dependent on this condition.
What changes do you think we should make in order to solve the problem?
Update shouldUseNarrowLayout to isSmallScreenWidth
What alternative solutions did you explore? (Optional)
@mananjadhav, can you please review the proposals and provide an update? Thanks!
@mananjadhav, @isabelastisser Whoops! This issue is 2 days overdue. Let's get this updated quick!
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@mananjadhav, @isabelastisser Whoops! This issue is 2 days overdue. Let's get this updated quick!
I think it makes sense to use shouldUseNarrowLayout for all selection lists. But would confirm with the internal engineer.
🎀 👀 🎀 C+ reviewed.
Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.
Okay pretty straightforward, but would be good to look into why we disallowed selection list initially for RHP. May be on purpose?
Given it's straightforward, one liner change, I am thinking to update bounty to $125. cc/ @isabelastisser
@mananjadhav @isabelastisser @MonilBhavsar 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!
@mananjadhav, @isabelastisser, @MonilBhavsar Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
📣 @neonbhai 🎉 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 📖
Looks like this will be the first time selection mode and long press UX will appear on web. Long pressing on an item is not a standard UX behavior for Web and maybe we should not introduce it 🤔
A similar list like Report Fields Values page shows checkbox instead of long press behavior in the RHP on web:
https://github.com/user-attachments/assets/088931b9-9343-4e01-8d3f-60245ea3220e
I think we should modify the categories page to mirror this behavior and also have checkboxes:
https://github.com/user-attachments/assets/a32d068d-b734-413b-9cd1-77e4e6809fb6
Code changes
turnOnSelectionModeOnLongPress={isSmallScreenWidth}
cc: @mananjadhav @MonilBhavsar @shawnborton @dannymcclain
@mananjadhav, @isabelastisser, @MonilBhavsar, @neonbhai Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!