Page MenuHomePhabricator

[web] Add cancel and confirm buttons
ClosedPublic

Authored by tomek on Jun 21 2022, 5:55 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Nov 9, 7:49 AM
Unknown Object (File)
Oct 16 2024, 4:01 AM
Unknown Object (File)
Oct 14 2024, 12:24 AM
Unknown Object (File)
Oct 14 2024, 12:24 AM
Unknown Object (File)
Oct 14 2024, 12:24 AM
Unknown Object (File)
Oct 14 2024, 12:24 AM
Unknown Object (File)
Oct 14 2024, 12:24 AM
Unknown Object (File)
Oct 14 2024, 12:22 AM

Details

Summary

The cancel button closes the modal. The confirm button adds either friends or blocks the users.

user_buttons.png (218×1 px, 21 KB)

Depends on D4309, D4353

Test Plan

Render the component and check if the buttons look ok.
Confirm button should be disabled while there are no users selected.
Cancel and confirm button should call appropriate functions.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

web/settings/relationship/add-users-list.react.js
189–196 ↗(On Diff #13625)

Haven't tested the error scenario - it will be handled later

tomek requested review of this revision.Jun 21 2022, 6:04 AM
web/settings/relationship/add-users-list.react.js
189–196 ↗(On Diff #13625)

Created a diff D4315 where the error scenario is handled

atul added inline comments.
web/settings/relationship/add-users-list.react.js
189–196 ↗(On Diff #13625)

Thanks for noting that here!

193 ↗(On Diff #13625)

Wonder if Array.from(...) would make it clearer that we're converting pendingUserIDs: Set<> to userIDs: Array<> here?

This might be a common pattern, but I personally haven't really seen spreads used to convert between types?

204 ↗(On Diff #13625)

Wonder if we should include a LoadingIndicator to visually indicate the status? Probably in a separate diff sequenced later in the stack.

Something like what @yayabosh did here: https://github.com/CommE2E/comm/commit/98cd7aeceb61fd354701125d70fb896ee506c080

This revision is now accepted and ready to land.Jun 21 2022, 12:29 PM
web/settings/relationship/add-users-list.react.js
193 ↗(On Diff #13625)

It's used in a lot of places in our codebase, but sure, I can change that if you find it more readable.

204 ↗(On Diff #13625)

Good idea!

Display loading indicator

web/settings/relationship/add-users-list.css
52–53 ↗(On Diff #13765)

We want the button to keep its width - that's why we need to still render the text. The difference between visibility: hidden and display: none is that with visibility the element still takes space.

Add option to specify button variant and more general content

This revision was automatically updated to reflect the committed changes.