Supporting changes for Cloud email invites #32439

timothyb89 · 2023-09-23T01:02:43Z

This adds a number of changes to support email user invites for Cloud.

Adds a new public /preset-roles endpoint that just returns the preset roles for the current version of Teleport. It's unauthenticated and intended for use in the new onboarding invitation UI. I don't think this has security implications beyond what we already return in the ping replies, since those include the Teleport version.
Includes role descriptions in the JSON responses sent to the UI
Makes various tweaks to our react-select wrapper, and adds a Creatable variant for email entry.
Adds a new requiresEmailLike validation rule, and adds more typing to the rules
Adds support for providing an invite collaborators element to replace the usual "Create User" UI from teleport.e
Adds support for showing the invite collaborators element during onboard, if a flag is set as a query parameter in the invite URL.

Note that gravitational/teleport.e#2286 is needed to test the changes. This PR must be merged before the teleport.e PR, then another PR here should bump the .e ref.

See also:

https://github.com/gravitational/cloud/issues/5137
.e changes: https://github.com/gravitational/teleport.e/pull/2286
Sales Center RPC: https://github.com/gravitational/cloud/pull/5970

This adds a WIP impl of Teleport email invites. Requires a compatible Enterprise build and Cloud API.

* Add description to UI role resources * Expose various new react-select options * Add new FieldSelectCreatable * Add some typing for validation rules * Tweak invite button for Cloud to use email UI instead of showing both buttons * Partial implementation for onboarding invites

…-invites

This adds various changes to enable showing the invite collaborators form during initial user onboarding. * Adds a `?initial` URL query parameter for the UI to signify the first user; Cloud will append this to invite appropriate invite links. * Added a new ratelimited public endpoint to return a list of preset roles. This just exposes static data available otherwise available in Git and that could be obtained from the public Teleport version shown in ping responses already.

The `kind` field can allow the UI to group errors together if several invalid emails are entered.

kimlisa

first pass, will continue after a few questions:

not sure if i'm doing something wrong (or misunderstanding something), but this these changes should only affect cloud users right? (i'm running enterprise and i'm seeing these changes, i can't add a user through the web ui)
what if a user wants to add a non-email user?
anyway you can spin a cluster with all your changes so i can test it? 🙏

also there is a weird flash when rendering the dialog because of this height:

kimlisa · 2023-10-05T19:33:33Z

web/packages/shared/components/FieldSelect/FieldSelect.tsx

@@ -75,6 +84,72 @@ export default function FieldSelect({
  );
 }

+export function FieldSelectCreatable({


i'd create a new file for this, and add a story for it too

& /packages/shared is "shared" (duplicated) with Cloud. Since we just updated Cloud to have parity with Teleport I would love to see a follow up PR at the end of this work to bring this component to Cloud.

Sure, I'll sync this with Cloud once it's merged.

web/packages/shared/components/Select/types.ts

web/packages/shared/components/Validation/rules.ts

kimlisa · 2023-10-05T19:54:08Z

web/packages/shared/components/Validation/rules.ts

+/**
+ * A function to validate a field value.
+ */
+export type Rule<T, R = ValidationResult> = (value: T) => () => R;


kimlisa · 2023-10-05T20:13:24Z

web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx

@@ -66,6 +66,9 @@ export function NewCredentials(props: NewCredentialsProps) {
    displayOnboardingQuestionnaire = false,
    setDisplayOnboardingQuestionnaire = false,
    Questionnaire = undefined,
+    displayInviteCollaborators = false,
+    setDisplayInviteCollaborators = false,


i'd avoid naming things setXXX unless it's a react hook state setter (that's how it's normally named setXXX), not sure how to give rename suggestions b/c i don't really understand it yet

Right, sorry, I was following the pattern from setDisplayOnboardingQuestionnaire but I think I can just as well set it to null.

web/packages/teleport/src/Welcome/NewCredentials/types.ts

timothyb89 · 2023-10-05T22:02:19Z

first pass, will continue after a few questions:

not sure if i'm doing something wrong (or misunderstanding something), but this these changes should only affect cloud users right? (i'm running enterprise and i'm seeing these changes, i can't add a user through the web ui)

Yes, it should only affect Cloud. I'll look into why you're seeing it on Enterprise.

what if a user wants to add a non-email user?

The decision was that non-email users can no longer be created on Cloud. If someone wants to add one, they'll need to use tctl. I think the plan is to see what sort of customer feedback we get on that change.

anyway you can spin a cluster with all your changes so i can test it? 🙏

Hmm, that's a good idea, I think it'll be possible once the changes in Sales Center are deployed (hopefully soon): https://github.com/gravitational/cloud/pull/5970.

timothyb89 · 2023-10-06T01:00:27Z

Various TODOs needed before this can be merged:

Add unit tests
Remove e ref bump - the changes are interdependent so the supporting changes will need to be merged sans the e bump, then we'll bump it via a separate PR.

web/packages/teleport/src/Users/Users.tsx

michellescripts · 2023-10-09T19:38:20Z

web/packages/shared/components/FieldSelect/FieldSelect.tsx

@@ -75,6 +84,72 @@ export default function FieldSelect({
  );
 }

+export function FieldSelectCreatable({


& /packages/shared is "shared" (duplicated) with Cloud. Since we just updated Cloud to have parity with Teleport I would love to see a follow up PR at the end of this work to bring this component to Cloud.

web/packages/teleport/src/Main/Main.tsx

…-invites

timothyb89 · 2023-10-09T23:34:44Z

A few non-threaded changes:

The flash of content on the dialog is fixed (the loading spinner no longer has a minimum height)
The Enroll Users button (and new feature) is no longer shown for Enterprise
The e ref update is removed, so for testing you'll need to check out https://github.com/gravitational/teleport.e/pull/2286

…-invites

timothyb89 · 2023-10-16T22:29:49Z

More notes: I think we've now got reasonable testing / storybook coverage for this PR (though I have some more work to do in the corresponding .e change).

Also, with the cloud changes merged, I've now got a test cluster running this change, so DM me if you'd like an account.

Additionally, per some feedback I've renamed the ?initial parameter to ?invite to make it what it does a little more explicit.

kimlisa

thanks a lot of the changes and the cluster 👍

most of my comments are pretty minor so i'll approve this.

I think some of the feedback for below is actually being affected in enteprise:

some rule validation is kinda broken, it sometimes allows dups, sometimes it doesn't, and when it doesn't it duplicates error message

this is an error after making an api call (allows dups):

this prevents me, but the error msg's are duplciated:

nit:

probably caused by some kind of initial loading, i suggest trying out this css property: visibility. you'd probably have to lay the loader on top of this block

web/packages/shared/components/FieldSelect/types.tsx

kimlisa · 2023-10-16T23:50:55Z

web/packages/shared/components/FieldSelect/types.tsx

types.tsx -> types.ts

Given defaultRule is also not a type, I've just renamed this file to shared.tsx. It still has LabelTip which needs .tsx.

kimlisa · 2023-10-17T00:07:53Z

web/packages/shared/components/Select/Select.story.tsx

@@ -112,3 +113,45 @@ function SelectDark({ value, onChange, options }) {
    </Flex>
  );
 }
+
+function SelectCreatableDefault() {


did you try testing this out in storybook? perhaps i'm doing something wrong but i couldn't play with it.

unless you have time to refactor this story, lets ignore the other stories in this file (it's old and kinda broken) and create a separate story just for SelectCreatable. Ignore DarkStyledSelect this is no longer used and we forgot to delete upon theme change.

if you intend to put more than one state in a story, i'd label it with a text eg:

I've split it into its own dedicated story and added labels. It definitely works on my machine, though in this mode (without a custom keyDown handler like we use in InviteCollaboratorsForm) input is a bit goofy, just due to react-select's defaults. I added some comments to explain what you might want to do to actually use the component in a real world setting.

web/packages/teleport/src/config.ts

kimlisa · 2023-10-17T01:52:41Z

web/packages/shared/components/Select/types.ts

@@ -45,6 +49,7 @@ export type Props = {
  onInputChange?(value: string, actionMeta: ActionMeta): void;
  // Whether or not the element is on an elevated platform (such as a dialog).
  elevated?: boolean;
+  stylesConfig?: StylesConfig;


was this necessary? i'm guessing the use for stylesConfig was to be able to create circular multi values. is there another use for this (that i'm not aware of).

i think the better way is to use what we have, and create a separate PR that changes this style from the root so then all users of these components renders consistent design (i suggested separate PR because it's probably going to cause mass snapshot breakage, which are easy to fix, but produces a lot of noise)

It does do that, but it also lets us highlight items selectively. That's how specific invalid addresses get highlighted in red:

const recipientStyles = (theme): StylesConfig<Option> => { return { multiValue: (styles, { data }) => { const { valid } = requiredEmailLike(data.label)(); const errorStyle = valid ? null : { borderColor: theme.colors.error.main, borderWidth: '1px', borderStyle: 'solid', }; return { ...styles, ...errorStyle, borderRadius: '1em', }; }, }; };

mcbattirola

LGTM once Lisa's comments are addressed

…-invites

timothyb89 · 2023-10-18T01:36:06Z

some rule validation is kinda broken, it sometimes allows dups, sometimes it doesn't, and when it doesn't it duplicates error message

I've added a new rule to ensure there's no duplicates within the entered field (we only checked against cluster users), and refactored the validation to aggregate all the various error messages so the strings aren't too verbose. I also noticed we didn't error highlight for user exists/duplicates, so added a new validator for that as well.

It now looks like this (hopefully worst case):

(these changes are mostly in the .e PR)

probably caused by some kind of initial loading, i suggest trying out this css property: visibility. you'd probably have to lay the loader on top of this block

I've now set it to use visibility: hidden while loading (also in the .e PR).

lib/web/apiserver.go

lib/web/resources.go

…ions

* Add WIP implementation of Teleport email invites This adds a WIP impl of Teleport email invites. Requires a compatible Enterprise build and Cloud API. * Bump e ref and add new validation rule * Various improvements to enable Cloud email invites * Add description to UI role resources * Expose various new react-select options * Add new FieldSelectCreatable * Add some typing for validation rules * Tweak invite button for Cloud to use email UI instead of showing both buttons * Partial implementation for onboarding invites * Add support for Cloud collaborator invites during onboarding This adds various changes to enable showing the invite collaborators form during initial user onboarding. * Adds a `?initial` URL query parameter for the UI to signify the first user; Cloud will append this to invite appropriate invite links. * Added a new ratelimited public endpoint to return a list of preset roles. This just exposes static data available otherwise available in Git and that could be obtained from the public Teleport version shown in ping responses already. * Update e ref for the invite-collaborators branch * Honor the `inputId` parameter if set * bump e ref * Improve typing for `requiredEmailLike` to add a error category The `kind` field can allow the UI to group errors together if several invalid emails are entered. * bump e ref * Destructure the InviteCollaborators component sanely * Set `setDisplayInviteCollaborators` to `null` instead of `false` * Split `FieldSelectCreatable` into its own file * Fix lint * add story for SelectCreatable * Add tests for `requiredEmailLike` * Rename `initial` flag to `invite` Renaming the flag will hopefully clarify the intent. * Add tests for invite collaborators feedback and users rendering * Add rendering test for the invite collaborators card * Clean up lints * Rename types.tsx -> shared.tsx * Relocate invite constant to `Welcome/const.ts` * Split `SelectCreatable` into its own story * Clarify SelectCreatable story * Simplify story; fix lint * Fix type checker failure * Rename `preset-roles` endpoint to `presetroles` to follow API conventions

Backport of #32439 for branch/v13 --- * Add WIP implementation of Teleport email invites This adds a WIP impl of Teleport email invites. Requires a compatible Enterprise build and Cloud API. * Bump e ref and add new validation rule * Various improvements to enable Cloud email invites * Add description to UI role resources * Expose various new react-select options * Add new FieldSelectCreatable * Add some typing for validation rules * Tweak invite button for Cloud to use email UI instead of showing both buttons * Partial implementation for onboarding invites * Add support for Cloud collaborator invites during onboarding This adds various changes to enable showing the invite collaborators form during initial user onboarding. * Adds a `?initial` URL query parameter for the UI to signify the first user; Cloud will append this to invite appropriate invite links. * Added a new ratelimited public endpoint to return a list of preset roles. This just exposes static data available otherwise available in Git and that could be obtained from the public Teleport version shown in ping responses already. * Update e ref for the invite-collaborators branch * Honor the `inputId` parameter if set * bump e ref * Improve typing for `requiredEmailLike` to add a error category The `kind` field can allow the UI to group errors together if several invalid emails are entered. * bump e ref * Destructure the InviteCollaborators component sanely * Set `setDisplayInviteCollaborators` to `null` instead of `false` * Split `FieldSelectCreatable` into its own file * Fix lint * add story for SelectCreatable * Add tests for `requiredEmailLike` * Rename `initial` flag to `invite` Renaming the flag will hopefully clarify the intent. * Add tests for invite collaborators feedback and users rendering * Add rendering test for the invite collaborators card * Clean up lints * Rename types.tsx -> shared.tsx * Relocate invite constant to `Welcome/const.ts` * Split `SelectCreatable` into its own story * Clarify SelectCreatable story * Simplify story; fix lint * Fix type checker failure * Rename `preset-roles` endpoint to `presetroles` to follow API conventions

* Add WIP implementation of Teleport email invites This adds a WIP impl of Teleport email invites. Requires a compatible Enterprise build and Cloud API. * Bump e ref and add new validation rule * Various improvements to enable Cloud email invites * Add description to UI role resources * Expose various new react-select options * Add new FieldSelectCreatable * Add some typing for validation rules * Tweak invite button for Cloud to use email UI instead of showing both buttons * Partial implementation for onboarding invites * Add support for Cloud collaborator invites during onboarding This adds various changes to enable showing the invite collaborators form during initial user onboarding. * Adds a `?initial` URL query parameter for the UI to signify the first user; Cloud will append this to invite appropriate invite links. * Added a new ratelimited public endpoint to return a list of preset roles. This just exposes static data available otherwise available in Git and that could be obtained from the public Teleport version shown in ping responses already. * Update e ref for the invite-collaborators branch * Honor the `inputId` parameter if set * bump e ref * Improve typing for `requiredEmailLike` to add a error category The `kind` field can allow the UI to group errors together if several invalid emails are entered. * bump e ref * Destructure the InviteCollaborators component sanely * Set `setDisplayInviteCollaborators` to `null` instead of `false` * Split `FieldSelectCreatable` into its own file * Fix lint * add story for SelectCreatable * Add tests for `requiredEmailLike` * Rename `initial` flag to `invite` Renaming the flag will hopefully clarify the intent. * Add tests for invite collaborators feedback and users rendering * Add rendering test for the invite collaborators card * Clean up lints * Rename types.tsx -> shared.tsx * Relocate invite constant to `Welcome/const.ts` * Split `SelectCreatable` into its own story * Clarify SelectCreatable story * Simplify story; fix lint * Fix type checker failure * Rename `preset-roles` endpoint to `presetroles` to follow API conventions

* [13] Supporting changes for Cloud email invites (#32439) Backport of #32439 for branch/v13 --- * Add WIP implementation of Teleport email invites This adds a WIP impl of Teleport email invites. Requires a compatible Enterprise build and Cloud API. * Bump e ref and add new validation rule * Various improvements to enable Cloud email invites * Add description to UI role resources * Expose various new react-select options * Add new FieldSelectCreatable * Add some typing for validation rules * Tweak invite button for Cloud to use email UI instead of showing both buttons * Partial implementation for onboarding invites * Add support for Cloud collaborator invites during onboarding This adds various changes to enable showing the invite collaborators form during initial user onboarding. * Adds a `?initial` URL query parameter for the UI to signify the first user; Cloud will append this to invite appropriate invite links. * Added a new ratelimited public endpoint to return a list of preset roles. This just exposes static data available otherwise available in Git and that could be obtained from the public Teleport version shown in ping responses already. * Update e ref for the invite-collaborators branch * Honor the `inputId` parameter if set * bump e ref * Improve typing for `requiredEmailLike` to add a error category The `kind` field can allow the UI to group errors together if several invalid emails are entered. * bump e ref * Destructure the InviteCollaborators component sanely * Set `setDisplayInviteCollaborators` to `null` instead of `false` * Split `FieldSelectCreatable` into its own file * Fix lint * add story for SelectCreatable * Add tests for `requiredEmailLike` * Rename `initial` flag to `invite` Renaming the flag will hopefully clarify the intent. * Add tests for invite collaborators feedback and users rendering * Add rendering test for the invite collaborators card * Clean up lints * Rename types.tsx -> shared.tsx * Relocate invite constant to `Welcome/const.ts` * Split `SelectCreatable` into its own story * Clarify SelectCreatable story * Simplify story; fix lint * Fix type checker failure * Rename `preset-roles` endpoint to `presetroles` to follow API conventions * Small compat fix for v13 due to lack of `WithUnauthenticatedHighLimiter`

timothyb89 added 8 commits August 17, 2023 18:38

Add WIP implementation of Teleport email invites

fac191d

This adds a WIP impl of Teleport email invites. Requires a compatible Enterprise build and Cloud API.

Bump e ref and add new validation rule

bfa7b05

Merge remote-tracking branch 'origin/master' into timothyb89/teleport…

f92f373

…-invites

Update e ref for the invite-collaborators branch

8cddab0

Honor the inputId parameter if set

59c690d

bump e ref

1f5a8e9

timothyb89 requested review from michellescripts and mcbattirola September 23, 2023 01:02

github-actions bot requested review from gzdunek and kimlisa September 23, 2023 01:03

github-actions bot added size/md ui labels Sep 23, 2023

timothyb89 added 2 commits October 4, 2023 16:58

Improve typing for requiredEmailLike to add a error category

8fa63da

The `kind` field can allow the UI to group errors together if several invalid emails are entered.

bump e ref

6e2c387

kimlisa reviewed Oct 5, 2023

View reviewed changes

mcbattirola reviewed Oct 6, 2023

View reviewed changes

web/packages/teleport/src/Users/Users.tsx Show resolved Hide resolved

web/packages/teleport/src/Users/Users.tsx Outdated Show resolved Hide resolved

michellescripts approved these changes Oct 9, 2023

View reviewed changes

timothyb89 added 4 commits October 9, 2023 16:58

Destructure the InviteCollaborators component sanely

fc6a52b

Set setDisplayInviteCollaborators to null instead of false

41a5c41

Split FieldSelectCreatable into its own file

1606e3b

Merge remote-tracking branch 'origin/master' into timothyb89/teleport…

d277405

…-invites

timothyb89 added 4 commits October 9, 2023 17:35

Fix lint

a9e49a1

Merge remote-tracking branch 'origin/master' into timothyb89/teleport…

36fd61f

…-invites

add story for SelectCreatable

b27873c

Add tests for requiredEmailLike

ea21b51

kimlisa approved these changes Oct 17, 2023

View reviewed changes

mcbattirola approved these changes Oct 17, 2023

View reviewed changes

timothyb89 added 6 commits October 17, 2023 17:27

Rename types.tsx -> shared.tsx

499b0f6

Relocate invite constant to Welcome/const.ts

c5ff2cb

Split SelectCreatable into its own story

20e29c0

Clarify SelectCreatable story

25323a0

Merge remote-tracking branch 'origin/master' into timothyb89/teleport…

497782f

…-invites

Simplify story; fix lint

0df07be

Fix type checker failure

442c3ad

zmb3 reviewed Oct 19, 2023

View reviewed changes

lib/web/apiserver.go Outdated Show resolved Hide resolved

lib/web/resources.go Show resolved Hide resolved

Rename preset-roles endpoint to presetroles to follow API convent…

e7032af

…ions

zmb3 approved these changes Oct 19, 2023

View reviewed changes

public-teleport-github-review-bot bot removed the request for review from gzdunek October 19, 2023 16:21

timothyb89 added this pull request to the merge queue Oct 19, 2023

Merged via the queue into master with commit f90ea42 Oct 19, 2023
34 checks passed

timothyb89 deleted the timothyb89/teleport-invites branch October 19, 2023 19:00

timothyb89 mentioned this pull request Nov 2, 2023

[v14] Supporting changes for Cloud email invites (#32439) #34180

Merged

timothyb89 mentioned this pull request Nov 2, 2023

[v13] Supporting changes for Cloud email invites (#32439) #34181

Merged

This was referenced Nov 15, 2023

Release 14.1.4 #34614

Merged

Release 13.4.8 #34646

Merged

Release 14.1.5 #34688

Merged

Release 13.4.9 #34689

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Supporting changes for Cloud email invites #32439

Supporting changes for Cloud email invites #32439

timothyb89 commented Sep 23, 2023 •

edited

kimlisa left a comment •

edited

kimlisa Oct 5, 2023

michellescripts Oct 9, 2023

timothyb89 Oct 9, 2023

kimlisa Oct 5, 2023

kimlisa Oct 5, 2023

timothyb89 Oct 9, 2023

timothyb89 commented Oct 5, 2023

timothyb89 commented Oct 6, 2023 •

edited

michellescripts Oct 9, 2023

timothyb89 commented Oct 9, 2023

timothyb89 commented Oct 16, 2023

kimlisa left a comment

kimlisa Oct 16, 2023

timothyb89 Oct 17, 2023

kimlisa Oct 17, 2023

timothyb89 Oct 17, 2023

kimlisa Oct 17, 2023 •

edited

timothyb89 Oct 17, 2023 •

edited

mcbattirola left a comment

timothyb89 commented Oct 18, 2023

Supporting changes for Cloud email invites #32439

Supporting changes for Cloud email invites #32439

Conversation

timothyb89 commented Sep 23, 2023 • edited

kimlisa left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timothyb89 commented Oct 5, 2023

timothyb89 commented Oct 6, 2023 • edited

Choose a reason for hiding this comment

timothyb89 commented Oct 9, 2023

timothyb89 commented Oct 16, 2023

kimlisa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kimlisa Oct 17, 2023 • edited

Choose a reason for hiding this comment

timothyb89 Oct 17, 2023 • edited

Choose a reason for hiding this comment

mcbattirola left a comment

Choose a reason for hiding this comment

timothyb89 commented Oct 18, 2023

timothyb89 commented Sep 23, 2023 •

edited

kimlisa left a comment •

edited

timothyb89 commented Oct 6, 2023 •

edited

kimlisa Oct 17, 2023 •

edited

timothyb89 Oct 17, 2023 •

edited