Restrict personal access tokens to specific projects [FE]

Overview

Currently, personal access api tokens do not have scoping at the project/group or functional level. This is problematic; this approach gives individual tokens too much power. A single api token applies to all projects on the instance, and we should limit the blast radius for individual tokens by allowing them to be scoped.

In this issue, we'll limit PATs to specific projects. PATs will still be attached to a particular user. This'll allow for use cases like a large organization with hundreds of projects designating a single bot user, and creating individual PATs for each of their projects. This increases security considerably, and allows us to limit misuse of an api-scoped token to a specific project.

After this issue is complete, we'll continue to iterate with improvements like limiting PATs to groups and limiting the functional scope of the api token.

Proposal

Add the ability to limit API access by personal access tokens to specific projects when creating a token.

• In /profile/personal_access_tokens, allow a user to optionally specify which project should be accessible when creating a PAT. A user should still be able to create a PAT scoped for all projects/groups.
  • A user should be able to specify a single project or multiple projects.
• The list of active Personal Access Tokens presented on this page should reflect the scope of the token (e.g. if applicable, the projects the PAT is scoped to).
  • A user should be able to revoke from the list, as they're currently able.
• Project-specific tokens should not be able to create, delete, or list SSH keys for the current user.

Default	Single project selected

Changes introduced:

• changed the width of niput fields to better match the expected content (240px)
• added a placeholder for the 'Expires at' input field to make it clear in what format the date is expected (YYYY-MM-DD)
• added a calendar icon to the 'Expires at' input field to make it clear it's a datepicker
• changed the font weight for checkbox labels to regular in 'Scopes'
• explanatory text for 'Scopes' checkboxes needs to be in a new line and styled as help text
• removed duplications of explanations in the last two checkboxes in 'Scopes'
• added a new dropdown that defaults to 'All projects' but a single project can be selected (Project avatar, project name and project namespace are listed in the project selection dropdown)
• added a new column 'Project(s)' to the 'Active personal access tokens' table. All existing tokens should have value 'All'

Implementation Plan

• Create app/assets/javascripts/access_tokens/components/project_selector.vue
  • Use gl-token-selector to display the projects
  • Use the GraphQL projects query with the membership and search_namespaces parameters to populate the token selector
• Add a Vue application mount point (.js-project-selector) to app/views/shared/access_tokens/_form.html.haml#L31
• Export a function that initializes the Vue app in app/assets/javascripts/access_tokens/index.js
• Use that exported function in app/assets/javascripts/pages/profiles/personal_access_tokens/index.js
• Add a new td for Project(s) in app/views/shared/access_tokens/_table.html.haml#L45

Note to engineer

Please check out this old MR https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/20332. It's quite outdated, but some of the code here could be reused. Good luck! 💪