Clarify call to action for expired active tokens

Problem to solve

With the option to toggle enforcement of personal access token expiration, we provided the ability for users to view their tokens that have expired yet are active.

They are listed under https://gitlab.com/profile/personal_access_tokens

• Active Personal Access Tokens section

As noted here, there is scope for improving the UX by more clearly indicating to the user that an action is required on the tokens.

The idea was to revisit this section once this feature gets more matured, with user feedback and other aspects built around it.

Intended users

Users that do not have Personal Access Tokens automatically revoked when they expire.

Proposal

Extracting suggestions from the note:

• Add a clarifying description when revoke on expiration is not enforced.

Personal access tokens are not revoked upon expiration.

• When a token has expired, show a dismissable alert, that will reappear when the page is refreshed

# token(s) expired

Until revoked, expired personal access tokens pose a security risk.

• Move the Scopes column to right after the Name column.
• Update the warning text hex color to match Pajamas
• Only use the Primary Danger button for PAT that have expired, and use Secondary Danger button for everything else

Current vs Proposed (Figma)

What does success look like, and how can we measure that?

• Easy identification of tokens that require immediate attention
• Ability to clearly distinguish Personal Access Token states

Links / references

Discussion thread