Page MenuHomePhabricator

[web] Implement a custom dropdown menu component
ClosedPublic

Authored by rohan on Jun 7 2023, 5:01 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Apr 5, 9:03 AM
Unknown Object (File)
Fri, Apr 5, 9:03 AM
Unknown Object (File)
Fri, Apr 5, 9:03 AM
Unknown Object (File)
Fri, Apr 5, 9:03 AM
Unknown Object (File)
Fri, Apr 5, 9:03 AM
Unknown Object (File)
Fri, Apr 5, 9:03 AM
Unknown Object (File)
Fri, Apr 5, 9:03 AM
Unknown Object (File)
Fri, Apr 5, 9:03 AM

Details

Summary

The discussion was held on Linear (https://linear.app/comm/issue/ENG-4038/create-a-modal-that-allows-admins-to-change-a-members-role), but we needed a dropdown menu to match the Figma designs for
displaying potential roles that can be assigned to a member in the modal that will come down the stack. This diff creates a Dropdown component that is general enough to be reused for different use cases
down the line, if needed.

Depends on D8135

Test Plan

The actual dropdown menu will be verified in a later diff

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

rohan requested review of this revision.Jun 7 2023, 5:18 AM
web/components/dropdown.react.js
17 ↗(On Diff #27513)

Always better to be flexible with callers, so eg. a caller could pass an async function as setActiveSelection without causing Flow errors

few suggestions inline

web/components/dropdown.css
1 ↗(On Diff #27513)

We should be consistent in naming dropdown. Here we use dropDown but in the react component we use dropdown. I personally prefer the ladder

web/components/dropdown.react.js
36 ↗(On Diff #27513)

Not sure if this is part of the designs for the dropdown but, wondering if it would be good to have a default text to display if there is no activeOption. For example, in this case we could have the dropdown say "Select role..." or something like that if there is no activeOption

cc @ted

ginsu requested changes to this revision.Jun 7 2023, 3:12 PM

putting this back in your queue

This revision now requires changes to proceed.Jun 7 2023, 3:12 PM
web/components/dropdown.react.js
36 ↗(On Diff #27513)

I don't actually think there should be a case where a user is displayed in the members list without a role - previously, we displayed parent admins in all chats, and they wouldn't have a role.

Now, since we only display parent admins part of chats they are actually a part of, they should have a role assigned to them (the Admins one). Once D8067's stack is landed, that should be addressed

Address feedback

web/components/dropdown.react.js
36 ↗(On Diff #27513)

Should this be converted into an invariant at some point then?

web/components/dropdown.react.js
36 ↗(On Diff #27513)

Yeah most likely, I can update this once the other stack is landed (I'll notice any other, if any, edge cases with roles being undefined once that's landed as well and can address it)

Expect role to be non-null

Requesting changes for clarification on memberIsAdmin import change.

Also adding @ginsu as blocking to take another look

web/modals/threads/members/member.react.js
9 ↗(On Diff #27578)

Hm, what's going on here?

atul requested changes to this revision.Jun 9 2023, 12:52 PM
This revision now requires changes to proceed.Jun 9 2023, 12:52 PM
In D8136#241242, @atul wrote:

Requesting changes for clarification on memberIsAdmin import change.

Also adding @ginsu as blocking to take another look

ESLint seemed to catch it in this diff for some reason, as opposed to the last one.

I removed one instance of memberIsAdmin from D8067. I removed the other instance from D8135. There doesn't seem to be any other use cases of memberIsAdmin in member.react.js. If you'd prefer I can remove the import in the previous diff instead

If you'd prefer I can remove the import in the previous diff instead

Yeah, think it makes sense to address it there

This revision now requires review to proceed.Jun 9 2023, 1:05 PM

Rebase (fixed the import in the previous diff now)

looks good thanks for addressing my feedback!

This revision is now accepted and ready to land.Jun 9 2023, 3:40 PM
web/components/dropdown.react.js
42

This probably could've be implemented as a setter function, to avoid needing to regenerate toggleMenu every time isOpen changes:

setIsOpen(isOpen => !isOpen);
95

It feels like you're circumventing the design system here. Shouldn't we be using colors defined in web/theme.css?

web/components/dropdown.react.js
42

I'll address this in a follow up diff

95