Stop storing personal access tokens in Redis - 2

What does this MR do and why?

This is part 2 of a rollout to display the newly created personal access token without the need of reloading the page. This prevents the need of storing the new access token in Redis (gitlab-org/gitlab#325157). In addition, it makes the page more dynamic and responsive. See part 1.

The table of active access tokens has been replaced by a Vue component that listened to AJAX events.

Currently, this change only affects the personal access token page.

Other type of tokens are not affected by this change:

• Group access tokens
• Project access tokens
• Impersonation tokens

Screenshots or screen recordings

A few differences/enhancements:

• The revoke button has been replaced by an icon (which is larger) (before, bottom part of image; after, top part of the image):

• The tables columns are sortable:

Personal-Access-Tokens--User-Settings--GitLab

• Empty state shows the table headers (before, bottom part of image; after, top part of the image):

• The Token valid until revoked tooltip is now shown for tokens that doesn't have expiration date. See Slack conversation about this change

How to set up and validate locally

1. The new feature is behind a ⛳️. Run bin/rails console and set up the flag: Feature.enable(:access_token_ajax)
2. Create a new token by entering a name and one or or more scopes. Click on Create personal access tokens

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.