Update personal_access_token form and table

- Add "(Required)" to required labels
- Add "Projects" field which uses project_multi_select component

app/assets/javascripts/pages/profiles/personal_access_tokens/index.js

 import DueDateSelectors from '~/due_date_select';
-document.addEventListener('DOMContentLoaded', () => new DueDateSelectors());
+import projectMultiSelect from '~/project_multi_select';
+document.addEventListener('DOMContentLoaded', () => {
+  new DueDateSelectors(); // eslint-disable-line no-new
+  projectMultiSelect();
+});

app/assets/stylesheets/pages/settings.scss

@@ -315,3 +315,9 @@
     padding-right: 0;
   }
 }
+
+.table.active-tokens {
+  td {
+    vertical-align: top;
+  }
+}

app/views/shared/_personal_access_tokens_form.html.haml

@@ -5,25 +5,31 @@
 %p.profile-settings-content
   Pick a name for the application, and we'll give you a unique #{type} token.
-= form_for token, url: path, method: :post, html: { class: 'js-requires-input' } do |f|
+= form_for token, url: path, method: :post do |f|
   = form_errors(token)
-  .row
-    .form-group.col-md-6
-      = f.label :name, class: 'label-bold'
-      = f.text_field :name, class: "form-control", required: true
-  .row
-    .form-group.col-md-6
-      = f.label :expires_at, class: 'label-bold'
-      .input-icon-wrapper
-        = f.text_field :expires_at, class: "datepicker form-control", placeholder: 'YYYY-MM-DD'
-        = icon('calendar', { class: 'input-icon-right' })
+  .form-group.input-lg
+    = f.label :name, 'Name (Required)', class: 'label-bold'
+    = f.text_field :name, class: 'form-control'
+  .form-group.input-lg
+    = f.label :expires_at, class: 'label-bold'
+    .input-icon-wrapper
+      = f.text_field :expires_at, class: 'datepicker form-control', placeholder: 'YYYY-MM-DD'
+      = sprite_icon('calendar', { css_class: 'input-icon-right s12' })
   .form-group
-    = f.label :scopes, class: 'label-bold'
+    = f.label :scopes, 'Scopes (Required)', class: 'label-bold'
     = render 'shared/tokens/scopes_form', prefix: 'personal_access_token', token: token, scopes: scopes
+  .form-group
+    = f.label 'personal_access_token[project_ids]', 'Projects', class: 'label-bold'
+    %p
+      Limit this token's access to specific projects.
+  .input-icon-wrapper
+    = hidden_field_tag 'personal_access_token[project_ids]', '', { class: 'js-project-multi-select project-multi-select', data: { order_by: 'last_activity_at' } }
+    = sprite_icon('angle-down', css_class: 'input-icon-right caret-down')
+
   .prepend-top-default
     = f.submit "Create #{type} token", class: "btn btn-success"

app/views/shared/_personal_access_tokens_table.html.haml

@@ -15,6 +15,7 @@
           %th Created
           %th Expires
           %th Scopes
+          %th Projects
           - if impersonation
             %th Token
           %th
@@ -22,7 +23,7 @@
         - active_tokens.each do |token|
           %tr
             %td= token.name
-            %td= token.created_at.to_date.to_s(:medium)
+            %td.text-nowrap= token.created_at.to_date.to_s(:medium)
             %td
               - if token.expires?
                 %span{ class: ('text-warning' if token.expires_soon?) }
@@ -30,6 +31,7 @@
               - else
                 %span.token-never-expires-label Never
             %td= token.scopes.present? ? token.scopes.join(", ") : "<no scopes selected>"
+            %td= token.projects.present? ? token.projects.map{|x| x.name}.join(', ') : '<All>'
             - if impersonation
               %td.token-token-container
                 = text_field_tag 'impersonation-token-token', token.token, readonly: true, class: "form-control"

spec/features/profiles/personal_access_tokens_spec.rb

 require 'spec_helper'
 describe 'Profile > Personal Access Tokens', :js do
+  include Select2Helper
+
   let(:user) { create(:user) }
   def active_personal_access_tokens
@@ -28,6 +30,15 @@ describe 'Profile > Personal Access Tokens', :js do
   describe "token creation" do
     it "allows creation of a personal access token" do
+      other_projects = [
+        create(:project, :public, creator_id: user.id, namespace: user.namespace),
+        create(:project, :public, creator_id: user.id, namespace: user.namespace)
+      ]
+      restricted_projects = [
+        create(:project, :public, creator_id: user.id, namespace: user.namespace),
+        create(:project, :public, creator_id: user.id, namespace: user.namespace)
+      ]
+
       name = 'My PAT'
       visit profile_personal_access_tokens_path
@@ -42,11 +53,18 @@ describe 'Profile > Personal Access Tokens', :js do
       check "api"
       check "read_user"
+      # Projects
+      restricted_project_ids = restricted_projects.map { |x| x.id }
+      select2(restricted_project_ids, { from: '#personal_access_token_project_ids', multiple: true })
+
+      wait_for_requests
       click_on "Create personal access token"
       expect(active_personal_access_tokens).to have_text(name)
       expect(active_personal_access_tokens).to have_text('In')
       expect(active_personal_access_tokens).to have_text('api')
       expect(active_personal_access_tokens).to have_text('read_user')
+      restricted_projects.each { |x| expect(active_personal_access_tokens).to have_text(x.name) }
+      other_projects.each { |x| expect(active_personal_access_tokens).not_to have_text(x.name) }
     end
     context "when creation fails" do