Merge branch 'ssh-key-settings' into 'master'

SSH keys settings

Closes #13860

See merge request !3034

18 files changed, 112 insertions, 78 deletions

diff --git a/app/assets/javascripts/profile.js.coffee b/app/assets/javascripts/profile.js.coffee
index 15fd9e99ce9..9110b732adc 100644
--- a/app/assets/javascripts/profile.js.coffee
+++ b/app/assets/javascripts/profile.js.coffee
@@ -62,3 +62,12 @@ class @Profile
         $modalCropImg.attr('src', event.target.result)
 
       fileData = reader.readAsDataURL(this.files[0])
+
+$ ->
+  # Extract the SSH Key title from its comment
+  $(document).on 'focusout.ssh_key', '#key_key', ->
+    $title  = $('#key_title')
+    comment = $(@).val().match(/^\S+ \S+ (.+)\n?$/)
+
+    if comment && comment.length > 1 && $title.val() == ''
+      $title.val(comment[1]).change()
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 50aa170d24c..8d475137b03 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -143,6 +143,19 @@
   }
 }
 
+.btn-transparent {
+  color: $btn-transparent-color;
+  background-color: transparent;
+  border: 0;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
 .btn-block {
   width: 100%;
   margin: 0;
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index b6a781f79de..bfec0911b3c 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -3,6 +3,7 @@
  *
  */
 .well-list {
+  position: relative;
   margin: 0;
   padding: 0;
   list-style: none;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 0586bab68ec..6fc62f7f201 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -36,6 +36,11 @@ $list-title-color: #333333;
 $list-text-color: #555555;
 $profile-settings-link-color: $md-link-color;
 
+$btn-transparent-color: #8F8F8F;
+
+$ssh-key-icon-color: #8F8F8F;
+$ssh-key-icon-size: 18px;
+
 /*
  * Color schema
  */
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index a635e49a7bc..4826b994e37 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -145,3 +145,33 @@
     width: auto;
   }
 }
+
+.key-list-item {
+  .key-list-item-info {
+    @media (min-width: $screen-sm-min) {
+      float: left;
+    }
+  }
+
+  .description {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+.key-icon {
+  color: $ssh-key-icon-color;
+  font-size: $ssh-key-icon-size;
+  line-height: 42px;
+}
+
+.key-created-at {
+  line-height: 42px;
+}
+
+.profile-settings-content {
+  a {
+    color: $profile-settings-link-color;
+  }
+}
diff --git a/app/controllers/profiles/keys_controller.rb b/app/controllers/profiles/keys_controller.rb
index f3224148fda..b88c080352b 100644
--- a/app/controllers/profiles/keys_controller.rb
+++ b/app/controllers/profiles/keys_controller.rb
@@ -3,23 +3,21 @@ class Profiles::KeysController < Profiles::ApplicationController
 
   def index
     @keys = current_user.keys
+    @key = Key.new
   end
 
   def show
     @key = current_user.keys.find(params[:id])
   end
 
-  def new
-    @key = current_user.keys.new
-  end
-
   def create
     @key = current_user.keys.new(key_params)
 
     if @key.save
       redirect_to profile_key_path(@key)
     else
-      render 'new'
+      @keys = current_user.keys.select(&:persisted?)
+      render :index
     end
   end
 
diff --git a/app/views/admin/users/keys.html.haml b/app/views/admin/users/keys.html.haml
index 07110717082..0f644121e62 100644
--- a/app/views/admin/users/keys.html.haml
+++ b/app/views/admin/users/keys.html.haml
@@ -1,3 +1,3 @@
-- page_title "Keys", @user.name, "Users"
+- page_title "SSH Keys", @user.name, "Users"
 = render 'admin/users/head'
 = render 'profiles/keys/key_table', admin: true
diff --git a/app/views/profiles/keys/_form.html.haml b/app/views/profiles/keys/_form.html.haml
index 2a8800de60e..4d78215ed3c 100644
--- a/app/views/profiles/keys/_form.html.haml
+++ b/app/views/profiles/keys/_form.html.haml
@@ -1,5 +1,5 @@
 %div
-  = form_for [:profile, @key], html: { class: 'form-horizontal js-requires-input' } do |f|
+  = form_for [:profile, @key], html: { class: 'js-requires-input' } do |f|
     - if @key.errors.any?
       .alert.alert-danger
         %ul
@@ -7,13 +7,11 @@
             %li= msg
 
     .form-group
-      = f.label :key, class: 'control-label'
-      .col-sm-10
-        = f.text_area :key, class: "form-control", rows: 8, autofocus: true, required: true
+      = f.label :key, class: 'label-light'
+      = f.text_area :key, class: "form-control", rows: 8, required: true
     .form-group
-      = f.label :title, class: 'control-label'
-      .col-sm-10= f.text_field :title, class: "form-control", required: true
+      = f.label :title, class: 'label-light'
+      = f.text_field :title, class: "form-control", required: true
 
-    .form-actions
+    .prepend-top-default
       = f.submit 'Add key', class: "btn btn-create"
-      = link_to "Cancel", profile_keys_path, class: "btn btn-cancel"
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index 9bbccbc45ea..25e9e8ff008 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -1,11 +1,14 @@
-%tr
-  %td
-    = link_to path_to_key(key, is_admin) do
-      %strong= key.title
-  %td
-    %code.key-fingerprint= key.fingerprint
-  %td
-    %span.cgray
-      added #{time_ago_with_tooltip(key.created_at)}
-  %td
-    = link_to 'Remove', path_to_key(key, is_admin), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-sm btn-remove delete-key pull-right"
+%li.key-list-item
+  .pull-left.append-right-10
+    = icon 'key', class: "key-icon hidden-xs"
+  .key-list-item-info
+    = link_to path_to_key(key, is_admin), class: "title" do
+      = key.title
+    .description
+      = key.fingerprint
+  .pull-right
+    %span.key-created-at
+      created #{time_ago_with_tooltip(key.created_at)} ago
+    = link_to path_to_key(key, is_admin), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-transparent prepend-left-10" do
+      %span.sr-only Remove
+      = icon('trash')
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index 3bd1f1af162..dd7615400dc 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -1,5 +1,5 @@
 - is_admin = defined?(admin) ? true : false
-.row
+.row.prepend-top-default
   .col-md-4
     .panel.panel-default
       .panel-heading
diff --git a/app/views/profiles/keys/_key_table.html.haml b/app/views/profiles/keys/_key_table.html.haml
index 8c9d546af4c..296cafa6e31 100644
--- a/app/views/profiles/keys/_key_table.html.haml
+++ b/app/views/profiles/keys/_key_table.html.haml
@@ -1,19 +1,11 @@
-- is_admin = defined?(admin) ? true : false
+- is_admin = local_assigns.fetch(:admin, false)
+
 - if @keys.any?
-  .table-holder
-    %table.table
-      %thead.panel-heading
-        %tr
-          %th Title
-          %th Fingerprint
-          %th Added at
-          %th
-      %tbody
-        - @keys.each do |key|
-          = render 'profiles/keys/key', key: key, is_admin: is_admin
+  %ul.well-list
+    = render partial: 'profiles/keys/key', collection: @keys, locals: { is_admin: is_admin }
 - else
-  .nothing-here-block
+  %p.profile-settings-message.text-center
     - if is_admin
-      User has no ssh keys
+      There are no SSH keys associated with this account.
     - else
       There are no SSH keys with access to your account.
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index c9a6a93f545..e0f8c9a5733 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -1,14 +1,21 @@
 - page_title "SSH Keys"
 - header_title page_title, profile_keys_path
 
-.top-area
-  .nav-text
-    Before you can add an SSH key you need to
-    = link_to "generate it.", help_page_path("ssh", "README")
-  .nav-controls
-    = link_to new_profile_key_path, class: "btn btn-new" do
-      = icon('plus')
-      Add SSH Key
-
-.prepend-top-default
-= render 'key_table'
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      = page_title
+    %p
+      SSH keys allow you to establish a secure connection between your computer and GitLab.
+  .col-lg-9
+    %h5.prepend-top-0
+      Add an SSH key
+    %p.profile-settings-content
+      Before you can add an SSH key you need to
+      = link_to "generate it.", help_page_path("ssh", "README")
+    = render 'form'
+    %hr
+    %h5
+      Your SSH keys (#{@keys.count})
+    %div.append-bottom-default
+      = render 'key_table'
diff --git a/app/views/profiles/keys/new.html.haml b/app/views/profiles/keys/new.html.haml
deleted file mode 100644
index 13a18269d11..00000000000
--- a/app/views/profiles/keys/new.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-- page_title "Add SSH Keys"
-%h3.page-title Add an SSH Key
-%p.light
-  Paste your public key here. Read more about how to generate a key on #{link_to "the SSH help page", help_page_path("ssh", "README")}.
-%hr
-= render 'form'
-
-:javascript
-  $('#key_key').on('focusout', function(){
-    var title = $('#key_title'),
-        val      = $('#key_key').val(),
-        comment = val.match(/^\S+ \S+ (.+)\n?$/);
-
-    if( comment && comment.length > 1 && title.val() == '' ){
-      $('#key_title').val( comment[1] ).change();
-    }
-  });
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index 089179e677a..bb5fff2d3bb 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -1,6 +1,6 @@
 - if cookies[:hide_no_ssh_message].blank? && !current_user.hide_no_ssh_key && current_user.require_ssh_key?
   .no-ssh-key-message.alert.alert-warning.hidden-xs
-    You won't be able to pull or push project code via SSH until you #{link_to 'add an SSH key', new_profile_key_path, class: 'alert-link'} to your profile
+    You won't be able to pull or push project code via SSH until you #{link_to 'add an SSH key', profile_keys_path, class: 'alert-link'} to your profile
 
     .pull-right
       = link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'alert-link'
diff --git a/config/routes.rb b/config/routes.rb
index 52c532601b4..a918b5bd3f0 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -314,7 +314,7 @@ Rails.application.routes.draw do
         end
       end
       resource :preferences, only: [:show, :update]
-      resources :keys
+      resources :keys, except: [:new]
       resources :emails, only: [:index, :create, :destroy]
       resource :avatar, only: [:destroy]
       resource :two_factor_auth, only: [:new, :create, :destroy] do
diff --git a/features/profile/ssh_keys.feature b/features/profile/ssh_keys.feature
index 581503fc5f9..b0d5b748916 100644
--- a/features/profile/ssh_keys.feature
+++ b/features/profile/ssh_keys.feature
@@ -9,7 +9,7 @@ Feature: Profile SSH Keys
     Then I should see my ssh keys
 
   Scenario: Add new ssh key
-    Given I click link "Add new"
+    Given I should see new ssh key form
     And I submit new ssh key "Laptop"
     Then I should see new ssh key "Laptop"
 
diff --git a/features/steps/profile/ssh_keys.rb b/features/steps/profile/ssh_keys.rb
index c7f879d247d..a400488a532 100644
--- a/features/steps/profile/ssh_keys.rb
+++ b/features/steps/profile/ssh_keys.rb
@@ -7,8 +7,8 @@ class Spinach::Features::ProfileSshKeys < Spinach::FeatureSteps
     end
   end
 
-  step 'I click link "Add new"' do
-    click_link "Add SSH Key"
+  step 'I should see new ssh key form' do
+    expect(page).to have_content("Add an SSH key")
   end
 
   step 'I submit new ssh key "Laptop"' do
diff --git a/spec/routing/routing_spec.rb b/spec/routing/routing_spec.rb
index dfa18f69e05..1527eddfa48 100644
--- a/spec/routing/routing_spec.rb
+++ b/spec/routing/routing_spec.rb
@@ -137,7 +137,6 @@ end
 
 #     keys GET    /keys(.:format)          keys#index
 #          POST   /keys(.:format)          keys#create
-#  new_key GET    /keys/new(.:format)      keys#new
 # edit_key GET    /keys/:id/edit(.:format) keys#edit
 #      key GET    /keys/:id(.:format)      keys#show
 #          PUT    /keys/:id(.:format)      keys#update
@@ -151,10 +150,6 @@ describe Profiles::KeysController, "routing" do
     expect(post("/profile/keys")).to route_to('profiles/keys#create')
   end
 
-  it "to #new" do
-    expect(get("/profile/keys/new")).to route_to('profiles/keys#new')
-  end
-
   it "to #edit" do
     expect(get("/profile/keys/1/edit")).to route_to('profiles/keys#edit', id: '1')
   end