Project deploy keys updated UI

Closes #13992

app/assets/stylesheets/pages/projects.scss

@@ -202,8 +202,31 @@
   min-width: 200px;
 }
 
-.deploy-project-label {
+.deploy-key-content {
-  margin: 1px;
+  @media (min-width: $screen-sm-min) {
+    float: left;
+
+    &:last-child {
+      float: right;
+    }
+  }
+}
+
+.deploy-key-projects {
+  @media (min-width: $screen-sm-min) {
+    line-height: 42px;
+  }
+}
+
+a.deploy-project-label {
+  padding: 5px;
+  margin-right: 5px;
+  color: $gl-gray;
+  background-color: $row-hover;
+
+  &:hover {
+    color: $gl-link-color;
+  }
 }
 
 .vs-public {

app/controllers/projects/deploy_keys_controller.rb

@@ -7,31 +7,24 @@ class Projects::DeployKeysController < Projects::ApplicationController
   layout "project_settings"
 
   def index
-    @enabled_keys = @project.deploy_keys
+    @key = DeployKey.new
-
+    set_index_vars
-    @available_keys         = accessible_keys - @enabled_keys
-    @available_project_keys = current_user.project_deploy_keys - @enabled_keys
-    @available_public_keys  = DeployKey.are_public - @enabled_keys
-
-    # Public keys that are already used by another accessible project are already
-    # in @available_project_keys.
-    @available_public_keys -= @available_project_keys
   end
 
   def new
-    @key = @project.deploy_keys.new
+    redirect_to namespace_project_deploy_keys_path(@project.namespace,
-
+                                                   @project)
-    respond_with(@key)
   end
 
   def create
     @key = DeployKey.new(deploy_key_params)
+    set_index_vars
 
     if @key.valid? && @project.deploy_keys << @key
       redirect_to namespace_project_deploy_keys_path(@project.namespace,
                                                      @project)
     else
-      render "new"
+      render "index"
     end
   end
 
@@ -51,6 +44,18 @@ class Projects::DeployKeysController < Projects::ApplicationController
 
   protected
 
+  def set_index_vars
+    @enabled_keys ||= @project.deploy_keys
+
+    @available_keys         ||= accessible_keys - @enabled_keys
+    @available_project_keys ||= current_user.project_deploy_keys - @enabled_keys
+    @available_public_keys  ||= DeployKey.are_public - @enabled_keys
+
+    # Public keys that are already used by another accessible project are already
+    # in @available_project_keys.
+    @available_public_keys -= @available_project_keys
+  end
+
   def accessible_keys
     @accessible_keys ||= current_user.accessible_deploy_keys
   end

app/views/projects/deploy_keys/_deploy_key.html.haml

@@ -1,32 +1,27 @@
 %li
-  .pull-right
+  .pull-left.append-right-10.hidden-xs
+    = icon "key", class: "key-icon"
+  .deploy-key-content.key-list-item-info
+    %strong.title
+      = deploy_key.title
+    .description
+      = deploy_key.fingerprint
+  .deploy-key-content.prepend-left-default.deploy-key-projects
+    - deploy_key.projects.each do |project|
+      - if can?(current_user, :read_project, project)
+        = link_to namespace_project_path(project.namespace, project), class: "label deploy-project-label" do
+          = project.name_with_namespace
+  .deploy-key-content
+    %span.key-created-at
+      created #{time_ago_with_tooltip(deploy_key.created_at)}
+    .visible-xs-block.visible-sm-block
     - if @available_keys.include?(deploy_key)
-      = link_to enable_namespace_project_deploy_key_path(@project.namespace, @project, deploy_key), class: 'btn btn-sm', method: :put do
+      = link_to enable_namespace_project_deploy_key_path(@project.namespace, @project, deploy_key), class: "btn btn-sm prepend-left-10", method: :put do
-        = icon('plus')
         Enable
     - else
       - if deploy_key.destroyed_when_orphaned? && deploy_key.almost_orphaned?
-        = link_to 'Remove', disable_namespace_project_deploy_key_path(@project.namespace, @project, deploy_key), data: { confirm: 'You are going to remove deploy key. Are you sure?'}, method: :put, class: "btn btn-remove delete-key btn-sm pull-right"
+        = link_to disable_namespace_project_deploy_key_path(@project.namespace, @project, deploy_key), data: { confirm: "You are going to remove deploy key. Are you sure?" }, method: :put, class: "btn btn-warning btn-sm prepend-left-10" do
+          Remove
       - else
-        = link_to disable_namespace_project_deploy_key_path(@project.namespace, @project, deploy_key), class: 'btn btn-sm', method: :put do
+        = link_to disable_namespace_project_deploy_key_path(@project.namespace, @project, deploy_key), class: "btn btn-warning btn-sm prepend-left-10", method: :put do
-          = icon('power-off')
           Disable
-
-  = icon('key')
-  %strong= deploy_key.title
-  %br
-  %code.key-fingerprint= deploy_key.fingerprint
-
-  %p.light.prepend-top-10
-    - if deploy_key.public?
-      %span.label.label-info.deploy-project-label
-        Public deploy key
-
-    - deploy_key.projects.each do |project|
-      - if can?(current_user, :read_project, project)
-        %span.label.label-gray.deploy-project-label
-          = link_to namespace_project_path(project.namespace, project) do
-            = project.name_with_namespace
-
-    %small.pull-right
-      Created #{time_ago_with_tooltip(deploy_key.created_at)}

app/views/projects/deploy_keys/_form.html.haml

@@ -1,18 +1,13 @@
-%div
+= form_for [@project.namespace.becomes(Namespace), @project, @key], url: namespace_project_deploy_keys_path, html: { class: "js-requires-input" } do |f|
-  = form_for [@project.namespace.becomes(Namespace), @project, @key], url: namespace_project_deploy_keys_path, html: { class: 'deploy-key-form form-horizontal js-requires-input' } do |f|
+  = form_errors(@key)
-    = form_errors(@key)
+  .form-group
-
+    = f.label :title, class: "label-light"
-    .form-group
+    = f.text_field :title, class: 'form-control', autofocus: true, required: true
-      = f.label :title, class: "control-label"
+  .form-group
-      .col-sm-10= f.text_field :title, class: 'form-control', autofocus: true, required: true
+    = f.label :key, class: "label-light"
-    .form-group
+    = f.text_area :key, class: "form-control", rows: 5, required: true
-      = f.label :key, class: "control-label"
+  .form-group
-      .col-sm-10
+    %p.light.append-bottom-0
-        %p.light
+      Paste a machine public key here. Read more about how to generate it
-          Paste a machine public key here. Read more about how to generate it
+      = link_to "here", help_page_path("ssh", "README")
-          = link_to "here", help_page_path("ssh", "README")
+  = f.submit "Add key", class: "btn-create btn"
-        = f.text_area :key, class: "form-control thin_area", rows: 5, required: true
-
-    .form-actions
-      = f.submit 'Create Deploy Key', class: "btn-create btn"
-      = link_to "Cancel", namespace_project_deploy_keys_path(@project.namespace, @project), class: "btn btn-cancel"

app/views/projects/deploy_keys/index.html.haml

@@ -1,43 +1,38 @@
 - page_title "Deploy Keys"
 
-%h3.page-title
+.row.prepend-top-default
-  Deploy keys allow read-only access to the repository
+  .col-lg-3.profile-settings-sidebar
-
+    %h4.prepend-top-0
-  = link_to new_namespace_project_deploy_key_path(@project.namespace, @project), class: "btn btn-new pull-right", title: "New Deploy Key" do
+      = page_title
-    %i.fa.fa-plus
+    %p
-    New Deploy Key
+      Deploy keys allow read-only access to your repository. Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.
-
+  .col-lg-9
-%p.light
+    %h5.prepend-top-0
-  Deploy keys can be used for CI, staging or production servers.
+      Create a new deploy key for this project
-  You can create a deploy key or add an existing one
+    = render "form"
-
+  .col-lg-9.col-lg-offset-3
-%hr.clearfix
+    %hr
-
+  .col-lg-9.col-lg-offset-3.append-bottom-default
-.row
+    %h5.prepend-top-0
-  .col-md-6.enabled-keys
+      Enabled deploy keys for this project (#{@enabled_keys.size})
-    %h5
+    - if @enabled_keys.any?
-      %strong.cgreen Enabled deploy keys
+      %ul.well-list
-      for this project
+        = render @enabled_keys
-    %ul.bordered-list
+    - else
-      = render @enabled_keys
+      .profile-settings-message.text-center
-      - if @enabled_keys.blank?
+        No deploy keys found. Create one with the form above or add existing one below.
-        .light-well
+  .col-lg-9.col-lg-offset-3.append-bottom-default
-          .nothing-here-block Create a #{link_to 'new deploy key', new_namespace_project_deploy_key_path(@project.namespace, @project)} or add an existing one
+    %h5.prepend-top-0
-  .col-md-6.available-keys
+      Deploy keys from projects you have access to (#{@available_project_keys.size})
-    - # If there are available public deploy keys but no available project deploy keys, only public deploy keys are shown.
+    - if @available_project_keys.any?
-    - if @available_project_keys.any? || @available_public_keys.blank?
+      %ul.well-list
-      %h5
-        %strong Deploy keys
-        from projects you have access to
-      %ul.bordered-list
         = render @available_project_keys
-        - if @available_project_keys.blank?
+    - else
-          .light-well
+      .profile-settings-message.text-center
-            .nothing-here-block Deploy keys from projects you have access to will be displayed here
+        No deploy keys from your projects could be found. Create one with the form above or add existing one below.
-
+  - if @available_public_keys.any?
-    - if @available_public_keys.any?
+    .col-lg-9.col-lg-offset-3.append-bottom-default
-      %h5
+      %h5.prepend-top-0
-        %strong Public deploy keys
+        Public deploy keys available to any project (#{@available_public_keys.size})
-        available to any project
+      %ul.well-list
-      %ul.bordered-list
         = render @available_public_keys