Design improvements for the personal access tokens page and flow

[gtsiolis]

Problem to solve

Following up from the ongoing efforts to ship the first MVC iteration of the personal access tokens feature in #14280 we had to cut some corners, leading to some UX debt around page layout and flow.

This issue acts as a placeholder follow-up issue for most UX nitpicks that had slipped between the cracks. Please, append any other UX issues or open separate issues if it helps to keep the change scope small or the discussion separate.

See relevant comments in #14934 (comment), #14899 (review), #14936 (review), etc. Cc @easyCZ

• 1. Align tokens more actions menu button to the right, see screenshots below.
• 2. Use proper padding for the created and regenerated labels, see screenshots below.
• 3. Additionally, this could ideally use the PillLabel component.
• 4. On new token creation, submit on enter.
• 5. On new token creation, remove the trailing empty navigation elements, see screenshot below.
• 6. On edit token form, remove the trailing empty navigation elements, see screenshot below.
• 7. On new token creation, limit the error alert width, see screenshot below.
• 8. On created token, replace the dot with the middot HTML character as used in other product areas.
• 9. On created token, update the date font weight so that not everything is using a strong font weight.
• 10. On created token, use the same notation we use for dates as everywhere like Dec 28, 2022 not December 28, 2022.
• 11. On the token list, use the same notation we use for dates as everywhere like Dec 28, 2022 not Mon Dec 28 2022_.
• 12. Add regeneration action for the token in the more actions menu.

The following are deferred into #15100:

• Send email to user when they've successfully created or regenerated a token.
• Send email to user when a token is expiring soon or has expired.

Variables ✔️	Integrations ✔️	Tokens :X:

Label padding ✔️	Label padding ❌

Trailing element on new token	Trailing element on edit token

Error alert on new token form

[mustard-mh]

Is there any way that project or prebuild 's URL did not start with /t/? Ask because PAT token edit will be like /tokens/edit/<pat_id> and it matches regex /(t/)?:segment1/:segment2?/:segment3?

gitpod/components/dashboard/src/Menu.tsx

Line 60 in d4a9e56

"/(t/)?:segment1/:segment2?/:segment3?",

if not, we can change the regex to /t/:segment1/:segment2?/:segment3? to fix issues below

5. On new token creation, remove the trailing empty navigation elements, see screenshot below.
6. On edit token form, remove the trailing empty navigation elements, see screenshot below.

cc @easyCZ @laushinka

[jeanp413]

Is there a template for the email message? Is there an example/library we already use to send emails?

Send email to user when they've successfully created or regenerated a token.
Send email to user when a token is expiring soon or has expired.

[laushinka]

Is there a template for the email message? Is there an example/library we already use to send emails?

Hmm, I'm not sure if we've had any conversation about this, or even about whether we want to do this. Maybe @gtsiolis can shed some light?

[easyCZ]

@jeanp413 Let's keep the email part out of the scope of this issue for now. I'll create a separate ticket for that.

We'll need a bit more work to figure out the infrastructure to actually do this from the public API.

[gtsiolis]

Is there any way ...

@mustard-mh We added the /t/ prefix a while ago to avoid having URL conflicts, however, there are a few more edge cases that could be relevant here like #13988, #11510, #5516, etc. See also relevant discussions[1][2] (internal).

Is there a template for the email message?

@jeanp413 We're using customer.io for sending all emails when signing up, creating a team, etc. but let's continue this in a separate issue as @easyCZ suggested. Cc @laushinka

We could probably also document how we're using this tool so that others can be unblocked in using this for developing a product feature. See also relevant task (internal). Cc @chrifro @MichaelAring

[easyCZ]

I've moved the email notifications into a follow-up epic - Personal Access Tokens v1.1 which will contain improvements, feedback, and follow-up issues as move towards a fully stable version of PATs.

Will cross them out from the list here.

[easyCZ]

The remaining fixes needed for this Issue are:
5. On new token creation, remove the trailing empty navigation elements, see screenshot below.
6. On edit token form, remove the trailing empty navigation elements, see screenshot below.

@jeanp413 @iQQBot @mustard-mh Are you able to look into this one?

[mustard-mh]

#15002 (comment)

cc @easyCZ

[easyCZ]

if not, we can change the regex to /t/:segment1/:segment2?/:segment3? to fix issues below

I think this is the way to go. In a way, the team segment should really only apply with a fixed prefix (which what the updated regex does)