rilldata
Autocomplete and invite in Share Project Popover
Fixes ENG-732
This pull request introduces the functionality to search for and invite both emails and groups within the Share Project Popover.
https://github.com/user-attachments/assets/e772ad55-8997-49cd-ab5d-3abf6880360a
Checklist:
- [ ] Covered by tests
- [x] Ran it and it works as intended
- [x] Reviewed the diff before requesting a review
- [x] Checked for unhandled edge cases
- [x] Linked the issues it closes
- [ ] Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
- [ ] Intend to cherry-pick into the release branch
- [x] I'm proud of this work!
Looks good!
Some feedback:
-
[x] When typing an email or group, can we maintain the
tabto create email pill? -
[x] Highlight the search box when it's active. See what's in production today:
-
[x] Maintain the same font size as what's in production:
vs
-
[x] In the dropdown, display avatar for each item (also, if a member is a
guest, display theguestpil) -
[x] Make sure that the dropdown box width matches the width of the search box
Looks good!
Some feedback:
- When typing an email or group, can we maintain the
tabto create email pill?- Highlight the search box when it's active. See what's in production today:
3. Maintain the same font size as what's in production:
vs
4. In the dropdown, display avatar for each item (also, if a member is a
guest, display theguestpil) 5. Make sure that the dropdown box width matches the width of the search box
fyi: This PR is still in draft.
Latest demo:
https://github.com/user-attachments/assets/e772ad55-8997-49cd-ab5d-3abf6880360a
Looks great!
Some feedback:
-
[x] Make sure that guest users have a separate section in the dropdown:
-
[x] The placeholder text is way too small. I believe they should be the same font size as user names
-
[x] Update placeholder text to say: "Search users, groups, or add emails, separated by commas"
-
[x] When there are more than 1 row of pills, the dropdown doesn't move along with the bottom edge of the search field
Ah dang…I guess the placeholder text is now too long with the font size change. Sorry to do this but let's revert back to what you had before
otherwise LGTM! @jkhwu?
- [x] I guess another thing I noticed is the search field height up larger than the invite button.
Here's what it looked like before:
- [x] And another thing I noticed is when the search field is blank, the role selector shouldn't be there:
NIT: https://www.loom.com/share/9d4fa8d95bd841b3bf304c092e56bbcd?sid=2039f359-7555-448b-b3f9-fa07d13592b5
my-rill-project overview - Rill - 4 June 2025
- [x] Actually, General Access area should be fixed and everything scrolls underneath it. That might solve this
@jkhwu UXQA:
- [x] There should be hover states for the following:
- [x] Link to docs
- [x] Dropdown selector for the general access (invite only or everyone at) selector
NIT: Admin role isn't right-aligned with the other roles
How do I replicate that? Here's what I'm seeing:
- Dropdown selector for the general access (invite only or everyone at) selector
~~What is the hover state for this? Can you link it or provide a screenshot?~~
Update: Found it
From @jkhwu, the last item is that the "invite" button should be enabled once a user starts typing something into the search:
in Prod:
in this PR:
Otherwise, LGTM!!
From @jkhwu, the last item is that the "invite" button should be enabled once a user starts typing something into the search:in Prod:
in this PR:
We shouldn't do that. The invite button should only be available when a chip/pill is created from the users' input. We want to avoid submitting users' jibberish texts.
While that's true, you could enter an actual email: [email protected] but if you didn't press the tab, comma, or space key, the invite button remains disabled. So it looks like it's broken
While that's true, you could enter an actual email: [email protected] but if you didn't press the tab, comma, or space key, the invite button remains disabled. So it looks like it's broken
Ok, resolved!
hmmm, the UX is not quite right. Could you reference what you've already built in production?
- Hitting invite triggers a loading state in the invite button
- Hitting invite doesn't first convert the string into pill
- Interestingly, there's some complex logic you built previously with regards to non-pill strings and the enablement/disablement of the invite button
- My avatar isn't rendering correctly
I believe this is a known CORS issue in local dev.
- Typing one letter in the input element causes the height to expand. I'd expect the height to remain constant.
Nice catch, addressed!
I believe this is a known CORS issue in local dev.
Are you sure? My avatar renders correctly in the top-right.
I believe this is a known CORS issue in local dev.
Are you sure? My avatar renders correctly in the top-right.
I have to say I'm very uneasy with how large the
SearchAndInviteInputandShareProjectPopovercomponents are. Both of them could be decomposed into smaller-scoped, more approachable components. Are you sure you want to proceed as is?
I took another look at the files. I'd prefer to only turn them into reusable components, such as the table components (BasicTable, InfiniteScrollTable) in incremental efforts. I had previously created the ProjectUsergroupItem and OrgUsergroupItem list items prematurely. When we dropped the project user group and only focused on org user group in the latest user management designs, they became too tangled up, and it wasn't a straightforward effort. I'd rather the waves subside before we turn them into reusable components in the follow-ups.
Update: one component that I can decompose into smaller-scoped in the ShareProjectPopover is General access's dropdown.
Update: refactored some parts of ShareProjectPopover!