refactor: SelectionList multiple selection by thiagobrez · Pull Request #22622 · Expensify/App

thiagobrez · 2023-07-11T09:26:17Z

Details

Phase 2 of 3, regarding selection lists refactor. Tracker issue: #11795

This PR iterates on Phase 1 by extending SelectionListRadio to also be able to handle multiple selection lists, since both would share all the basics such as keyboard listeners, safe area, layout calculation, focus and scrolling.

Following pages were changed:

WorkspaceMembersPage
WorkspaceInvitePage

The tracker issue also outlined pages to create a new group and split money, but it was decided that it's best if we don't touch those for now, as things are still getting figured out.

SelectionListRadio and all related files were renamed to SelectionList
SelectionList now accepts the following new props:
- canSelectMultiple: changes the rendered item to be the newly created CheckboxListItem
- onSelectAll: callback to fire when the "Select All" checkbox is pressed
- onDismissError: callback to fire when an error is dismissed
SelectionList now renders a section header if provided in section.title
Created a formatMemberForList in OptionsListUtils to format a personalDetails or userToInvite to the correct format accepted by SelectionList. Previously, those gigantic objects were being passed down to the list and only a few properties were being used, this way it's clear what properties an item needs to have
- Note: did not change the existing OptionsListUtils.getMemberInviteOptions directly because it's a big logic and still being used by the lists that are not refactored yet
Added new Storybook stories for the new list variations
Added new Reassure performance tests for the new list variations, and also a case for scrolling the list

Fixed Issues

$ #20353

Tests

Verify that no errors appear in the JS console
Verify that no regressions appeared in the Timezone, Pronouns, Year Picker, Language and Priority Mode lists
Verify that the Workspace Members and Workspace Invite Members pages are working as expected

Offline tests

QA Steps

Verify that no errors appear in the JS console
Verify that no regressions appeared in the Timezone, Pronouns, Year Picker, Language and Priority Mode lists
Verify that the Workspace Members and Workspace Invite Members pages are working as expected

PR Author Checklist

Screenshots/Videos

Web - Chrome

web.chrome.mov

Web - Safari

web.safari.mov

Mobile Web - Chrome

android.web.mov

Mobile Web - Safari

ios.web.mp4

Desktop

desktop.mov

iOS

ios.native.mp4

Android

android.native.mov

src/components/SelectionList/BaseSelectionList.js

src/components/SelectionList/CheckboxListItem.js

src/components/SelectionList/BaseSelectionList.js

src/components/SelectionList/index.android.js

src/components/SelectionList/index.ios.js

src/components/SelectionList/index.js

src/components/SelectionList/BaseSelectionList.js

src/components/SelectionList/selectionListPropTypes.js

rezkiy37

Looks good, left a couple comments.

src/components/SelectionList/CheckboxListItem.js

src/components/SelectionList/RadioListItem.js

roryabraham · 2023-08-24T23:12:53Z

Bit of feedback here – to merge a PR of this size and scope without any test or QA steps listed in the PR description is frankly unacceptable. Can we please add a thorough list of QA steps for Applause to follow to QA this on staging?

roryabraham · 2023-08-24T23:13:14Z

Also, this PR is associated with a regression on staging

cristipaval · 2023-08-25T09:48:53Z

Bit of feedback here – to merge a PR of this size and scope without any test or QA steps listed in the PR description is frankly unacceptable. Can we please add a thorough list of QA steps for Applause to follow to QA this on staging?

Thanks for the feedback @roryabraham! There are tests added to the PR description

I do agree that those tests could be improved, but I also think we should first figure out how we could know the product specs better, what is that single source of truth based on which we know the expectations and lay them down thoroughly in a list of tests. In this specific case, the tests mentioned the features that were impacted by the PR and we expected the QA team to run all test cases that they have for those features.

roryabraham · 2023-08-25T22:12:42Z

Great response @cristipaval! To answer your questions/concerns:

the single source of truth for our regression test suite is TestRail. Regression tests are organized by feature / component. Expensify employees have access to that and can pull the regression tests from there
If you're doing a big refactor, you can run an AdHoc test build and then ask Applause to run a full or partial regression test run on your feature branch before it's merged to main. This is a bit time-consuming and expensive so in general we should limit how often we do this, but there are some times where it's a great choice. For example, we've done it several times for the PR to enable the new React Native architecture. We also did this when we were refactoring our whole navigation stack. In both those cases, the changes were very global and breaking up the PR into smaller PRs wasn't necessarily a viable option
(bit of good news) Applause is going to start investing a good amount of time into automating parts of the regression suite with E2E tests. I think these tests may end up taking too long to run on every PR (we'll see...), but those will definitely help to give us more confidence to ship features with better stability.
Last thing I'll hold out is that we can opt to use betas. A deploy blocker behind a beta is not a deploy blocker. Not sure I would've done that for this particular project but in general it's very helpful and allows your feature to go through its own set of growing pains without disrupting other features from being shipped.

OSBotify · 2023-08-28T18:53:08Z

🚀 Deployed to staging by https://github.com/cristipaval in version: 1.3.58-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-08-29T00:07:39Z

🚀 Deployed to production by https://github.com/luacmartins in version: 1.3.57-6 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

OSBotify · 2023-08-30T01:22:11Z

🚀 Deployed to production by https://github.com/luacmartins in version: 1.3.58-5 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

aldo-expensify · 2023-09-05T20:22:42Z

Bug zero: This PR caused this regression: #25859

Taken from: #25859 (comment)

s77rt · 2023-09-18T12:20:23Z

src/components/SelectionList/BaseSelectionList.js

+    const selectRow = (item, index) => {
+        // In single-selection lists we don't care about updating the focused index, because the list is closed after selecting an item
+        if (canSelectMultiple) {
+            if (sections.length === 1) {
+                // If the list has only 1 section (e.g. Workspace Members list), we always focus the next available item
+                const nextAvailableIndex = _.findIndex(flattenedSections.allOptions, (option, i) => i > index && !option.isDisabled);
+                setFocusedIndex(nextAvailableIndex);
+            } else {
+                // If the list has multiple sections (e.g. Workspace Invite list), we focus the first one after all the selected (selected items are always at the top)
+                const selectedOptionsCount = item.isSelected ? flattenedSections.selectedOptions.length - 1 : flattenedSections.selectedOptions.length + 1;
+                setFocusedIndex(selectedOptionsCount);
+            }
+        }
+
+        onSelectRow(item);
+    };
+
+    const selectFocusedOption = () => {
+        const focusedOption = flattenedSections.allOptions[focusedIndex];
+
+        if (!focusedOption || focusedOption.isDisabled) {
+            return;
+        }
+
+        selectRow(focusedOption, focusedIndex);
+    };


The auto highlight feature is only meant for keyboard navigation right? On click/press we shouldn't highlight any element as this is causing a regression #27377.

We are going to limit that feature to keyboard navigation only on #27646. Let us know if you think we shouldn't.

cc @thiagobrez @Santhosh-Sellavel

Hey @s77rt ! This was already fixed here, waiting for a final approval: #27246

situchan · 2023-10-06T13:51:09Z

src/components/SelectionList/BaseSelectionList.js

+                                        </View>
+                                    </PressableWithFeedback>
+                                )}
+                                <SectionList


Coming from #26243:
This refactor caused minor inconsistency with OptionsList.
stickySectionHeadersEnabled prop is enabled by default in SectionList.
OptionsList disabled it but SelectionList from this PR didn't.

0xmiroslav · 2023-10-19T05:28:54Z

src/components/SelectionList/BaseSelectionList.js

+                                    keyboardType={keyboardType}
+                                    selectTextOnFocus
+                                    spellCheck={false}
+                                    onSubmitEditing={selectFocusedOption}


blurOnSubmit prop could be passed here to be consistent with BaseOptionsSelector behavior.
Issue: #28072

parasharrajat · 2023-10-24T07:19:11Z

src/pages/workspace/WorkspaceMembersPage.js

+            result.push({
+                keyForList: accountID,
+                isSelected: _.contains(selectedEmployees, Number(accountID)),
+                isDisabled: accountID === props.session.accountID || details.login === props.policy.owner || policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,


accountID should have been converted to a Number before matching. This caused #28539

shubham1206agra · 2024-02-01T08:59:13Z

This PR caused conflicting listeners with ConfirmModal, which caused #33201.

ikevin127 · 2024-07-12T20:35:09Z

src/pages/workspace/WorkspaceMembersPage.js

+            result.push({
+                keyForList: accountID,
+                isSelected: _.contains(selectedEmployees, Number(accountID)),
+                isDisabled: accountID === props.session.accountID || details.login === props.policy.owner || policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,


I think the isDisabled check contributed to creating the following issue:

[PAID] [$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite #38925

but since the transition from optimistic local data to real BE returned data wasn't tested when this PR was merged -> it wasn't reported as an issue until recently.

thiagobrez added 14 commits July 10, 2023 14:15

chore: wip

717e22b

chore: fix conflicts

ae15864

chore: add avatar to checkbox item

3cc3c93

chore: add errors to checkbox item

647441f

chore: wip

4cf5918

chore: workspace invite page working

06b650c

chore: money request split page working

af2e1b9

chore: new group page working

4a076cb

chore: fix conflicts

2059d9d

chore: fix conflicts

b2e57ad

chore: fix invite page

128477f

chore: cleanup

5404d2b

chore: fix conflicts

0ae6181

refactor: rename SelectionListRadio to SelectionList

fba18bf

thiagobrez changed the title ~~Refactor/selection list/checkbox list~~ refactor: SelectionList multiple selection Jul 11, 2023

thiagobrez added 4 commits July 11, 2023 14:54

chore: add stories for multiple selection

246d6e0

chore: add stories for multiple selection

39c8c74

test: add more perf test cases

4cdc5da

chore: fix srolling issues

46f4328

fabioh8010 reviewed Jul 13, 2023

View reviewed changes

rezkiy37 reviewed Jul 13, 2023

View reviewed changes

src/components/SelectionList/BaseSelectionList.js Show resolved Hide resolved

rezkiy37 reviewed Jul 13, 2023

View reviewed changes

src/components/SelectionList/selectionListPropTypes.js Outdated Show resolved Hide resolved

rezkiy37 reviewed Jul 13, 2023

View reviewed changes

thiagobrez added 3 commits July 13, 2023 11:25

chore: address pr comments

254d5d2

chore: fix conflicts

b02b04a

chore: fix lint issues

2f8118a

Swor71 reviewed Jul 13, 2023

View reviewed changes

src/components/SelectionList/CheckboxListItem.js Outdated Show resolved Hide resolved

Swor71 reviewed Jul 13, 2023

View reviewed changes

src/components/SelectionList/CheckboxListItem.js Outdated Show resolved Hide resolved

Swor71 reviewed Jul 13, 2023

View reviewed changes

src/components/SelectionList/RadioListItem.js Outdated Show resolved Hide resolved

thiagobrez mentioned this pull request Jul 13, 2023

[$1000] Web – Announce Room - Inconsistency in highlighting the selected option. #22553

Closed

6 tasks

thienlnam mentioned this pull request Aug 24, 2023

[HOLD for payment 2023-09-06] [HOLD for payment 2023-09-04] Invite member - Incorrect selection of member using Tab key #25883

Closed

6 tasks

roryabraham mentioned this pull request Aug 24, 2023

[HOLD for payment 2023-09-06] [HOLD for payment 2023-09-04] [$1000] Workspace - CMD+ENTER does not work when inviting new members to WS #25878

Closed

6 tasks

rushatgabhane mentioned this pull request Aug 25, 2023

Workspace - Tooltip is miising on hover in invite members page #25895

Closed

6 tasks

aldo-expensify mentioned this pull request Aug 25, 2023

[HOLD for payment 2023-09-06] [HOLD for payment 2023-09-04] Web - Workspaces - Name highlights on select member on invite page #25896

Closed

6 tasks

cristipaval mentioned this pull request Aug 28, 2023

Workspace - There is no separating line for members #25966

Closed

6 tasks

OSBotify mentioned this pull request Aug 28, 2023

Deploy Checklist: New Expensify 2023-08-28 #26113

Closed

Santhosh-Sellavel mentioned this pull request Aug 28, 2023

feat(selection-list): add tooltip #26091

Merged

67 tasks

situchan mentioned this pull request Aug 29, 2023

[HOLD for payment 2023-10-02] [$500] Workspace - In Invite new members the "Contacts" caption does not disappear when scrolling #26243

Closed

6 tasks

aimane-chnaif mentioned this pull request Sep 11, 2023

[HOLD for payment 2023-09-06] [$1000] skeleton ui does not show when contact are loading #25888

Closed

6 tasks

s77rt reviewed Sep 18, 2023

View reviewed changes

bernhardoj mentioned this pull request Sep 25, 2023

[$500] MacOS/Chrome - Background color is stuck on right click/long press on year in year search #27832

Closed

6 tasks

situchan reviewed Oct 6, 2023

View reviewed changes

0xmiroslav reviewed Oct 19, 2023

View reviewed changes

0xmiroslav mentioned this pull request Oct 19, 2023

[HOLD for payment 2023-10-13] [$500] Web - The input is lost focus on pressing enter key after no result found #28072

Closed

6 tasks

parasharrajat reviewed Oct 24, 2023

View reviewed changes

parasharrajat mentioned this pull request Oct 24, 2023

[HOLD for payment 2023-10-24] [$500] Workspace - Admin Checkbox in Members Section Ticked When Changing Contact Method #28539

Closed

6 tasks

shubham1206agra mentioned this pull request Feb 1, 2024

[HOLD for payment 2024-01-25] [$500] Workspace - Enter click does not trigger workspace remove members button #33201

Closed

6 tasks

rushatgabhane mentioned this pull request Mar 26, 2024

[HOLD for payment 2024-03-26] [$500] Members - After removing the error of adding a member to WS, the red dot remains in the RHN #34852

Closed

6 tasks

ikevin127 reviewed Jul 12, 2024

View reviewed changes

ikevin127 mentioned this pull request Jul 12, 2024

[PAID] [$250] [Collect] Workspace - User name and avatar disappears when opening profile immediately after invite #38925

Closed

6 tasks

Conversation

thiagobrez commented Jul 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rezkiy37 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

roryabraham commented Aug 24, 2023

Uh oh!

roryabraham commented Aug 24, 2023

Uh oh!

cristipaval commented Aug 25, 2023

Uh oh!

roryabraham commented Aug 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

OSBotify commented Aug 28, 2023

Uh oh!

OSBotify commented Aug 29, 2023

Uh oh!

OSBotify commented Aug 30, 2023

Uh oh!

aldo-expensify commented Sep 5, 2023

Uh oh!

s77rt Sep 18, 2023

Choose a reason for hiding this comment

Uh oh!

thiagobrez Sep 18, 2023

Choose a reason for hiding this comment

Uh oh!

situchan Oct 6, 2023

Choose a reason for hiding this comment

Uh oh!

0xmiroslav Oct 19, 2023

Choose a reason for hiding this comment

Uh oh!

parasharrajat Oct 24, 2023

Choose a reason for hiding this comment

Uh oh!

shubham1206agra commented Feb 1, 2024

Uh oh!

ikevin127 Jul 12, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

18 participants

thiagobrez commented Jul 11, 2023 •

edited

Loading

roryabraham commented Aug 25, 2023 •

edited

Loading