Protected branches UIprotected-branches-ui

Closes #14027

5 files changed, 77 insertions, 59 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 2ade341c9dd..3386523dbf7 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -11,6 +11,7 @@
 .prepend-top-10 { margin-top: 10px }
 .prepend-top-default { margin-top: $gl-padding !important; }
 .prepend-top-20 { margin-top: 20px }
+.prepend-left-5 { margin-left: 5px }
 .prepend-left-10 { margin-left: 10px }
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 0a5b4b8834c..64b1c247386 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -205,6 +205,10 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
 }
 
+.light-header {
+  font-weight: 600;
+}
+
 /** CODE **/
 pre {
   font-family: $monospace_font;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index fcca9d4faf5..0dd44cdc14e 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -256,12 +256,6 @@
   }
 }
 
-table.table.protected-branches-list tr.no-border {
-  th, td {
-    border: 0;
-  }
-}
-
 .project-import .btn {
   float: left;
   margin-right: 10px;
@@ -474,3 +468,14 @@ pre.light-well {
     color: #fff;
   }
 }
+
+.protected-branches-list {
+  a {
+    color: $gl-gray;
+    font-weight: 600;
+
+    &:hover {
+      color: $gl-link-color;
+    }
+  }
+}
diff --git a/app/views/projects/protected_branches/_branches_list.html.haml b/app/views/projects/protected_branches/_branches_list.html.haml
index f68449b1863..b9e9dd8aaea 100644
--- a/app/views/projects/protected_branches/_branches_list.html.haml
+++ b/app/views/projects/protected_branches/_branches_list.html.haml
@@ -1,35 +1,41 @@
-- unless @branches.empty?
-  %br
-  %h4 Already Protected:
-  .table-holder
+%h5.prepend-top-0
+  Already Protected (#{@branches.size})
+- if @branches.empty?
+  %p.profile-settings-message.text-center
+    No branches are protected, protect a branch with the form above.
+- else
+  - can_admin_project = can?(current_user, :admin_project, @project)
+  .table-responsive
     %table.table.protected-branches-list
+      %colgroup
+        %col{ width: "30%" }
+        %col{ width: "30%" }
+        %col{ width: "25%" }
+        - if can_admin_project
+          %col
       %thead
-        %tr.no-border
+        %tr
           %th Branch
-          %th Developers can push
           %th Last commit
-          %th
-
+          %th Developers can push
+          - if can_admin_project
+            %th
       %tbody
         - @branches.each do |branch|
           - @url = namespace_project_protected_branch_path(@project.namespace, @project, branch)
           %tr
             %td
-              = link_to namespace_project_commits_path(@project.namespace, @project, branch.name) do
-                %strong= branch.name
-                - if @project.root_ref?(branch.name)
-                  %span.label.label-info default
-              %td
-                = check_box_tag "developers_can_push", branch.id, branch.developers_can_push, "data-url" => @url
-              %td
-                - if commit = branch.commit
-                  = link_to namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id' do
-                    = commit.short_id
-                  ·
-                  #{time_ago_with_tooltip(commit.committed_date)}
-                - else
-                  (branch was removed from repository)
+              = link_to(branch.name, namespace_project_commits_path(@project.namespace, @project, branch.name))
+              - if @project.root_ref?(branch.name)
+                %span.label.label-info.prepend-left-5 default
+            %td
+              - if commit = branch.commit
+                = link_to(commit.short_id, namespace_project_commit_path(@project.namespace, @project, commit.id), class: 'commit_short_id')
+                #{time_ago_with_tooltip(commit.committed_date)}
+              - else
+                (branch was removed from repository)
+            %td
+              = check_box_tag("developers_can_push", branch.id, branch.developers_can_push, data: { url: @url })
+            - if can_admin_project
               %td
-                .pull-right
-                  - if can? current_user, :admin_project, @project
-                    = link_to 'Unprotect', [@project.namespace.becomes(Namespace), @project, branch], data: { confirm: 'Branch will be writable for developers. Are you sure?' }, method: :delete, class: "btn btn-remove btn-sm"
+                = link_to 'Unprotect', [@project.namespace.becomes(Namespace), @project, branch], data: { confirm: 'Branch will be writable for developers. Are you sure?' }, method: :delete, class: "btn btn-warning btn-sm"
diff --git a/app/views/projects/protected_branches/index.html.haml b/app/views/projects/protected_branches/index.html.haml
index 653b02da4db..c7d317dbaee 100644
--- a/app/views/projects/protected_branches/index.html.haml
+++ b/app/views/projects/protected_branches/index.html.haml
@@ -1,31 +1,33 @@
 - page_title "Protected branches"
-%h3.page-title Protected branches
-%p.light Keep stable branches secure and force developers to use Merge Requests
-%hr
 
-.well
-  %p Protected branches are designed to
-  %ul
-    %li prevent pushes from everybody except #{link_to "masters", help_page_path("permissions", "permissions"), class: "vlink"}
-    %li prevent anyone from force pushing to the branch
-    %li prevent anyone from deleting the branch
-  %p Read more about #{link_to "project permissions", help_page_path("permissions", "permissions"), class: "underlined-link"}
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    %h4.prepend-top-0
+      = page_title
+    %p Keep stable branches secure and force developers to use Merge Requests
+  .col-lg-9
+    %h5.prepend-top-0
+      Protect a branch
+    .account-well.append-bottom-default
+      %p.light-header.append-bottom-0 Protected branches are designed to
+      %ul
+        %li prevent pushes from everybody except #{link_to "masters", help_page_path("permissions", "permissions"), class: "vlink"}
+        %li prevent anyone from force pushing to the branch
+        %li prevent anyone from deleting the branch
+      %p.append-bottom-0 Read more about #{link_to "project permissions", help_page_path("permissions", "permissions"), class: "underlined-link"}
+    - if can? current_user, :admin_project, @project
+      = form_for [@project.namespace.becomes(Namespace), @project, @protected_branch] do |f|
+        = form_errors(@protected_branch)
 
-- if can? current_user, :admin_project, @project
-  = form_for [@project.namespace.becomes(Namespace), @project, @protected_branch], html: { class: 'form-horizontal' } do |f|
-    = form_errors(@protected_branch)
-
-    .form-group
-      = f.label :name, "Branch", class: 'control-label'
-      .col-sm-10
-        = f.select(:name, @project.open_branches.map { |br| [br.name, br.name] } , {include_blank: true}, {class: "select2", data: {placeholder: "Select branch"}})
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :developers_can_push do
-            = f.check_box :developers_can_push
-            %strong Developers can push
-          .help-block Allow developers to push to this branch
-    .form-actions
-      = f.submit 'Protect', class: "btn-create btn"
-= render 'branches_list'
+        .form-group
+          = f.label :name, "Branch", class: "label-light"
+          = f.select(:name, @project.open_branches.map { |br| [br.name, br.name] } , {include_blank: true}, {class: "select2", data: {placeholder: "Select branch"}})
+        .form-group
+          = f.check_box :developers_can_push, class: "pull-left"
+          .prepend-left-20
+            = f.label :developers_can_push, "Developers can push", class: "label-light append-bottom-0"
+            %p.light.append-bottom-0
+              Allow developers to push to this branch
+        = f.submit "Protect", class: "btn-create btn"
+    %hr
+    = render "branches_list"