-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mobile Selection Mode #46096
Mobile Selection Mode #46096
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🎉
@ikevin127 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
@ikevin127 it's all yours! |
Reviewer Checklist
Screenshots/VideosAndroid: Native *android.mp4Android: mWeb Chrome *android-mweb.webmiOS: Native *ios.MP4iOS: mWeb Safari *ios-mweb.mp4MacOS: Chrome / SafariMacOS: Desktop |
@filip-solecki Completed the checklist, overall functionality looks great - good job on this one!
Based on the #45451 issue, I think these 3 issues should be addressed here as they seem to be part of the scope. Once the issues are addressed and conflicts are solved I'll re-test to confirm they are fixed then will Approve if everything looks good. |
@filip-solecki Regarding issue number 3 with the modal backdrop on mWeb, I just checked on staging and it does not happen. But it does happen on latest main local dev, so I'm assuming it has something to do with StrictMode. Just to check it off the list as NAB I would go to CONFIG and set Possible to have a similar thing with issue number 2 - so I'd check out the StrictMode thing first with that one as well. |
@jasperhuangg - resolved |
…ithModal component
@ikevin127 Please check my latest commit - I decided to move turning on selection mode logic to |
LGTM - Ready to Merge 🚀 |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
@filip-solecki I decided to do a double-check again and I noticed an issue on the Search page:
This happens with StrictMode off as well, so it's not because of StrictMode. It also happens on all platforms (mWeb and Native). Note: It's possible that this happened after the push of commit 7a0e5a6. @jasperhuangg Maybe there's still time to push a follow-up fix before this gets deployed and the regression is reported.
|
Hmm, for sure it is fixed in this PR and imo it's better to focus on that PR and merge it quickly as fixing it in this PR might be a little bit tricky, WDYT? |
@filip-solecki
Nevermind, I got it now - the issue mentioned above will be fixed in PR #46406. That would be it - thank you! |
Sorry, pasted wrong link - I mean this PR |
I've asked @rushatgabhane for prioritizing review on mentioned PR to avoid regression here |
🚀 Deployed to staging by https://github.com/jasperhuangg in version: 9.0.15-0 🚀
|
🚀 Deployed to production by https://github.com/roryabraham in version: 9.0.15-9 🚀
|
Hey!
The correct one is: if ((isSmallScreenWidth ? selectionMode?.isEnabled : true) && selectedValuesArray.length > 0) { VideoBug.mp4 |
@rezkiy37 Thanks for investigating! Looks like we're aware of that and will address that in the the fix PR: #46698 (comment) |
Coming from this Issue #46619, we missed to disabling the dropdown button on mobile devices when no data is selected we fixed it in this PR , more context for the solution on this Proposal #46619 (comment) |
Coming from #46620, we missed disabling a selection on disabled selection items on mobile devices. |
Details
This PR add new Selection Mode on small devices on a few pages listed in the main issue. It is already implemented on the Search page but has to be refactored to add possibility to use it in tho whole app.
Fixed Issues
$ #45451
PROPOSAL:
Tests
Workspace Members
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Members (as an admin) 4. Add a few members if you are alone 5. Long press on some item 6. Chose "Select" 7. Select and unselect options and test some bulk actionWorkspace Distance Rates
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Distance Rates (as an admin) 4. Turn it on in `More features` if not enabled 5. Add a few distance rates if there is only one rate 6. Long press on some item 7. Chose "Select" 8. Select and unselect options and test some bulk actionWorkspace Categories
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Categories (as an admin) 4. Turn it on in `More features` if not enabled 5. Long press on some item 6. Chose "Select" 7. Select and unselect options and test some bulk actionWorkspace multi level Tags
1. Log in to OD 2. Go to Workspace settings 3. Go to Tags and enable it if not enabled 4. Enable `People must tag expenses` and `Use multiple level of tags` 5. Import some multi level Tags (eh. [this](https://github.com/Expensify/App/files/15195760/Independent%2Bwithout%2BGL%2Bcodes%2Bformat.csv) ) 6. Go to ND 7. Go to the same Workspace and Tags page 8. You should not be able to select any Tag on main page 9. Go to Tag details 10. You'll see Tags inside 11. Long press on some item 12. Chose "Select" 13. Select and unselect options and test some bulk actionWorkspace single level Tags
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Tags (as an admin) 4. Turn it on in `More features` if not enabled 5. Add a few Tags 6. Long press on some item 7. Chose "Select" 8. Select and unselect options and test some bulk actionWorkspace Taxes
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Taxes (as an admin) 4. Turn it on in `More features` if not enabled 5. Add a few tax rates 6. Long press on some item 7. Chose "Select" 8. Select and unselect options and test some bulk actionWorkspace Report Fields
1. Change `canUseReportFieldsFeature` in `permissions.ts` to return true 2. Log in to the app 3. Go to existing Workspace or create new 4. Go to Report Fields (as an admin) 5. Turn it on in `More features` if not enabled 6. Add a few items 7. Long press on some item 8. Chose "Select" 9. Select and unselect options and test some bulk actionWorkspace Report Fields - Add list type report
1. Change `canUseReportFieldsFeature` in `permissions.ts` to return true 2. Log in to the app 3. Go to existing Workspace or create new 4. Go to Report Fields (as an admin) 5. Turn it on in `More features` if not enabled 6. Click "Add field" 7. Fill required fields 8. Chose "List" type 9. Chose "List values" 10. Add a few items 11. Long press on some item 12. Chose "Select" 13. Select and unselect options and test some bulk actionGroup chat -> Members
1. Log in to the app 2. Go to existing group chat (if you don't have any go to point 3 otherwise go to point 6) 3. Click `+` button 4. Chose `Start chat` 5. Add a few people to the chat 6. Go to chat details 7. Go to members 8. Long press on some item 9. Chose "Select" 11. Select and unselect options and test some bulk actionSearch
1. Log in to the app (use account with existing transactions or create a few new) 2. Go to Search Tab (from bottom tab) 3. Use small screen width or mobile device 4. Long press some item 5. Chose "Select" option 6. Select and unselect options and do some bulk actionOffline tests
QA Steps
Workspace Members
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Members (as an admin) 4. Add a few members if you are alone 5. Long press on some item 6. Chose "Select" 7. Select and unselect options and test some bulk actionWorkspace Distance Rates
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Distance Rates (as an admin) 4. Turn it on in `More features` if not enabled 5. Add a few distance rates if there is only one rate 6. Long press on some item 7. Chose "Select" 8. Select and unselect options and test some bulk actionWorkspace Categories
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Categories (as an admin) 4. Turn it on in `More features` if not enabled 5. Long press on some item 6. Chose "Select" 7. Select and unselect options and test some bulk actionWorkspace multi level Tags
1. Log in to OD 2. Go to Workspace settings 3. Go to Tags and enable it if not enabled 4. Enable `People must tag expenses` and `Use multiple level of tags` 5. Import some multi level Tags (eh. [this](https://github.com/Expensify/App/files/15195760/Independent%2Bwithout%2BGL%2Bcodes%2Bformat.csv) ) 6. Go to ND 7. Go to the same Workspace and Tags page 8. You should not be able to select any Tag on main page 9. Go to Tag details 10. You'll see Tags inside 12. Long press on some item 13. Chose "Select" 14. Select and unselect options and test some bulk actionWorkspace single level Tags
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Tags (as an admin) 4. Turn it on in `More features` if not enabled 5. Add a few Tags 6. Long press on some item 7. Chose "Select" 8. Select and unselect options and test some bulk actionWorkspace Taxes
1. Log in to the app 2. Go to existing Workspace or create new 3. Go to Taxes (as an admin) 4. Turn it on in `More features` if not enabled 5. Add a few tax rates 6. Long press on some item 7. Chose "Select" 8. Select and unselect options and test some bulk actionWorkspace Report Fields
1. Log in to the app with an account that has Report Fields beta enabled 2. Go to existing Workspace or create new 3. Go to Report Fields (as an admin) 4. Turn it on in `More features` if not enabled 5. Add a few items 6. Long press on some item 7. Chose "Select" 8. Select and unselect options and test some bulk actionWorkspace Report Fields - Add list type report
1. Use an account that has Report Fields beta enabled 2. Log in to the app 3. Go to existing Workspace or create new 4. Go to Report Fields (as an admin) 5. Turn it on in `More features` if not enabled 6. Click "Add field" 7. Fill required fields 8. Chose "List" type 9. Chose "List values" 10. Add a few items 11. Long press on some item 12. Chose "Select" 13. Select and unselect options and test some bulk actionGroup chat -> Members
1. Log in to the app 2. Go to existing group chat (if you don't have any go to point 3 otherwise go to point 6) 3. Click `+` button 4. Chose `Start chat` 5. Add a few people to the chat 6. Go to chat details 7. Go to members 8. Long press on some item 9. Chose "Select" 10. Select and unselect options and test some bulk actionSearch
1. Log in to the app (use account with existing transactions or create a few new) 2. Go to Search Tab (from bottom tab) 3. Use small screen width or mobile device 4. Long press some item 5. Chose "Select" option 6. Select and unselect options and do some bulk actionPR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label and/or tagged@Expensify/design
so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Workspace Members
Desktop_Workspace-Members.mov
Workspace Distance Rates
Web_Distance-rates.mov
Workspace Categories
iOS_Categories.mp4
Workspace multi level Tags
Web_Multi_Tags.mov
Workspace single level Tags
Web_Tags.mov
Workspace Taxes
Desktop_Taxes.mov
Workspace Report Fields
Web_ReportFields.mov
Group chat -> Members
[Android_Group-members.webm](https://github.com/user-attachments/assets/cf3aafbf-baf2-4f5a-973e-17de9ff96ab4)Search
[Android_Web_Search.webm](https://github.com/user-attachments/assets/a709d5e7-2cfb-4796-b724-231c2d5eb644)