feat(deploy): UI based user invite

[AdityaHegde]

closes #5045

This PR adds a popup for adding users.
Also adds basic code for invite after a deploy. The actual implementation might change when integrating with deploy flow.

Note that this doesnt support identifying public/private domains of the user.
This also doesnt add the Request Access flow or the sharable link flow through copy link

[ericokuma]

This popover is appearing on the wrong page :)
Needs to appear as a popover from the Project Page e.g. https://ui.rilldata.com/demo/my-rill-project

It's currently appearing on the Dashboard Share page

here's the design mock:

• The popover should be right-aligned vertically with the right edge of the share button

• @jkhwu, the "Share this project" font is much larger than any other font on the page. Should we consider shrinking?

• @AdityaHegde, we haven't implemented Pills yet right?

• The role should not be visible in empty state.

• There's also missing "helper text" in the form. See mock:

• Also, the role selector should have a dropdown icon indicator in projects that have been Connected to Github and for project_admins

Here's the mock:

• The dropdown box should be right-aligned vertically as well

• We should probably update the options in the dropdown to: 'viewer' and 'admin'

[AdityaHegde]

@ericokuma Thanks for the UX pass. I will update the location of the share button and the popover.

Regarding the dropdown for role, where are the designs for it? I am referring to https://www.figma.com/design/Qt6EyotCBS3V6O31jVhMQ7/RILL?node-id=6801-232076&t=Dp2SPeOU2RW3lVMh-0 and they dont have the dropdown icon and they say can view (I extrapolated can edit)

Also not sure what Pill you are referring to.

[ericokuma]

Ah @jkhwu, would you kindly update the mocks to include a version where there is a dropdown selector for role in the invite by email feature? This feature is only available for project_admins on accounts that have Connected to Github

By Pills, I mean this:

Also, please refer to the PRD: https://www.notion.so/rilldata/RD-RC-1-5-UI-Based-User-Project-Invitation-Dashboard-Sharing-826f1d3615f14941935c1d57cf7d8df3?pvs=4 for the details

[jkhwu]

@AdityaHegde cc @ericokuma here I've shown the dropdown next to "can view". See the last variant and click into the component to see the hover and active states: https://www.figma.com/design/Qt6EyotCBS3V6O31jVhMQ7/RILL?node-id=13326-670655&t=jQKpt7XXDqz0oS2K-11

[ericokuma]

1. The role should appear once user enters at least 1 character

2. Looks like there's some spacing issue from the pill the role dropdown selector

3. Copy link will be integrated later?

[AdityaHegde]

Yes copy link needs this #5198 for it to fully work

[ericpgreen2]

UXQA –

1. Nothing happens when I submit an invalid email address. I'd expect to see an input validation warning.
   

2. The input box should not need to expand vertically after adding 1 character.

3. The input box should not be taller than the "Invite" button
   

4. @jkhwu, the "Share this project" font is much larger than any other font on the page. Should we consider shrinking?

Agree.

5. This page does not match the Figma mocks.
   

[AdityaHegde]

Addressed 1, 2 & 3. For 4, the mocks still have this not sure if intended. For 5, the page is just placeholder. Will update once i integrate with deploy flow.

[ericokuma]

The only feedback here is that when a user clicks on "Invite", toast notification is missing.

Here's the requirement: https://www.notion.so/rilldata/RD-RC-1-5-UI-Based-User-Project-Invitation-Dashboard-Sharing-826f1d3615f14941935c1d57cf7d8df3?pvs=4#d442dd5e5c8e472081f075311338cf53

[ericpgreen2]

UXQA –

1. When the form submission errors, we should show it in the dialog
   

2. Emails are not included in the payload unless they've been submitted & converted to a pill. CC @ericokuma and @jkhwu for desired behavior. One solution (which we should do regardless) would be to disable the "Invite" button until at least 1 email has been officially added.

   These work:
   
   

   These don't work: